components including components in another package (again)

[phyton.dbd]

Looking to learn as much as possible - so all advice and suggestions appreciated. Since this problem has been plaguing me for a while - maybe I'm using the tools incorrectly, so please advise.

Unfortunately I'm still having issues with getting paths correct in html import statements. I think the reason may be related to how I run the application. First, I'm trying to get a simple mortgage calculator component built. It is a basic calculator with a handful of inputs and a table output showing the payment schedule. Originally I did it all in one component library called finance. I decided to refactor by pulling out some of the input components into a separate component library called basic_components. The idea is maybe these could be used elsewhere by code unrelated to the mortgage calculator so storing them in their own package seems reasonable.

There are at least 4 ways to run an example:

(1) Select the html file directly and "Run in Dartium"

(2) Select the html file directly and "Run as Javascript"

(3) Build and then select the corresponding file under build and "Run in Dartium"

(4) Build and then select the corresponding file under build and "Run as Javascript"

I was under impression that you use (1) as much as possible since it is fastest turnaround for development. This is what I have been using almost exclusively since I've not gotten to a point to release to the web yet. I assume (4) is the most important when it is time to deploy and if your stuff works in (1) it should/will work in (4).

Question: Are all four supposed to work?

So, for reference I've shown the post-refactor structure of the two component libraries at bottom. As it stands (1), (3) and (4) all work for basic_input.html examples. (2) does not work: when running in javascript on the development html file I get a blank screen. So maybe (2) is not really needed/supported?

The problem comes in when a component library uses another component library which happens after refactoring since mortgage_calculator uses basic input components. Siggi has provided a detailed answer to this issue of how to import components from html here (https://groups.google.com/a/dartlang.org/forum/#!mydiscussions/web/dc5xwmVo5JY), providing these guidelines:

Basically the rule is:

- if your .html file is an entrypoint, make sure this file is under 'web/' and use 'packages/package_name/path_to_file_relative_to_lib'

- if your .html file is inside a lib/ directory, use '[../]{repeated_as_many_levels_deep_you_are_in_lib}/packages/package_name/path_to_file_relative_to_lib'

The problem is with the second piece of advice, regarding html files in the component library. For example, if I apply that rule to payment_schedule.html which imports a date_input component, the import should look like:

<link rel="import" href="../../packages/basic_input/components/date_input.html">

When run using (4) with this import I get:

Failed to load resource: the server responded with a status of 404 (Not Found)

  http://127.0.0.1:3030/mortgage_calculator/web/examples/mortgage_calculator/packages/packages/basic_input/components/date_input.html

So, it is throwing in an additional "packages" in the path. Naturally, I key in on that and change all imports to do Siggi rule 2 but leave off the "packages":

<link rel="import" href="../../basic_input/components/date_input.html">

Now it works when using run method (1). So I try to build the "working" project in order to try to run with (4). But the build fails with:

  [Error in polymer (Linter) on mortgage_calculator|lib/components/payment_schedule.html]:

  lib/components/payment_schedule.html:5:1: couldn't find imported asset "basic_input/components/date_input.html" in package "mortgage_calculator".

So now I see why Siggi put 'packages' in his second rule. But, if I add back the "packages" to all the mortage_calculator imports of basic_imports and then build again I still get an error:

  [Error in polymer (Linter) on mortgage_calculator|lib/components/payment_schedule.html]:

  lib/components/payment_schedule.html:5:1: couldn't find imported asset "packages/basic_input/components/date_input.html" in package "mortgage_calculator".

So, after many permutations I have it so that the calculator can work successfully using run method (1) (i.e. only dev using Dartium) as long as I adapt Siggi rule 2 by leaving off "packages" in the import.

Note: This project is at: https://github.com/patefacio/finance and the checked in version is the one that works with run method (1). No others work. Any help making run method (4) work is greatly appreciated. (There is another bug I encountered when all components were in the same package unrelated to imports that prevents the table from displaying. I imagine that issue will still exist after the imports are figured out).

Thanks

Dan

The new structure is:

   * basic_input *

    |-- build

    |   '-- examples

    |       '-- basic_input

    |           '-- basic_input.html

    |-- lib

    |   |-- components

    |   |   |-- basic_input.css

    |   |   |-- date_input.dart

    |   |   |-- date_input.html

    |   |   | (5 more...)

    |   |   |-- rate_input.html

    |   |   |-- year_input.dart

    |   |   '-- year_input.html

    |   '-- formatting.dart

    |-- pubspec.yaml

    '-- web

        '-- examples

            '-- basic_input

                '-- basic_input.html

   * mortgage_calculator *

    |-- lib

    |   |-- components

    |   |   |-- finance.css

    |   |   |-- mortgage_calculator.css

    |   |   |-- mortgage_calculator.dart

    |   |   |-- mortgage_calculator.html

    |   |   |-- mortgage_details.dart

    |   |   |-- mortgage_details.html

    |   |   |-- payment_schedule.dart

    |   |   '-- payment_schedule.html

    |   '-- mortgage.dart

    |-- pubspec.yaml

    '-- web

        '-- examples

            '-- mortgage_calculator

                '-- mortgage_calculator.html

[Siggi Cherem]

Great questions!

On Tue, Dec 24, 2013 at 8:30 AM, phyton.dbd <phyto...@gmail.com> wrote:

Looking to learn as much as possible - so all advice and suggestions appreciated. Since this problem has been plaguing me for a while - maybe I'm using the tools incorrectly, so please advise.

Unfortunately I'm still having issues with getting paths correct in html import statements. I think the reason may be related to how I run the application. First, I'm trying to get a simple mortgage calculator component built. It is a basic calculator with a handful of inputs and a table output showing the payment schedule. Originally I did it all in one component library called finance. I decided to refactor by pulling out some of the input components into a separate component library called basic_components. The idea is maybe these could be used elsewhere by code unrelated to the mortgage calculator so storing them in their own package seems reasonable.

There are at least 4 ways to run an example:

(1) Select the html file directly and "Run in Dartium"

(2) Select the html file directly and "Run as Javascript"

(3) Build and then select the corresponding file under build and "Run in Dartium"

(4) Build and then select the corresponding file under build and "Run as Javascript"

I was under impression that you use (1) as much as possible since it is fastest turnaround for development. This is what I have been using almost exclusively since I've not gotten to a point to release to the web yet. I assume (4) is the most important when it is time to deploy and if your stuff works in (1) it should/will work in (4).

Question: Are all four supposed to work?

Not quite. It's a bit confusing because we just recently added pub-build to the picture. The editor used to invoke dart2js for you when you wanted to run an application in Javascript, that's why we still have (2). The goal is that now that step is going to be handled by 'pub build'. In essence, 'dart2js' is included as a transformer in pub-build, so if you have no other packages and transformers (2) and (4) would be equivalent. I hope that in the future the editor menu 'Run as Javascript' will simply call 'pub build' for you and then launch the JS output of that.

Additionally, the default way to build in the editor always calls 'pub build' in release mode. This means that no Dart output is added to the build/ folder, and you might always be running the code in Javascript, even if you launch it in Dartium.

So I think we want to get to a point where we have the following 3 ways to run an example:

 (a) Run html directly in Dartium (no compilation, in the future maybe use 'pub serve')

 (b) Run html as Javascript by doing any necessary compilation via pub-build (compile with 'pub build --mode=release')

 (c) Run html compiled with pub-build in Dartium (compile with 'pub build --mode=debug')

 

(a) is like (1) and works today. (b) is like (2) and (4) and can be done today if you do the build from the editor, and (c) is like (3) but you need to do the build from the command-line or with a special editor launch in order to pass the '--mode=debug' option (this is temporary, of course).

So, for reference I've shown the post-refactor structure of the two component libraries at bottom. As it stands (1), (3) and (4) all work for basic_input.html examples. (2) does not work: when running in javascript on the development html file I get a blank screen. So maybe (2) is not really needed/supported?

Correct: basically if you are using 'polymer', you need to run the polymer transformers via pub-build in order to run the application in Javascript. This is why I'd like to push for merging (2) and (4) together into a single option (b). I want a transparent process, so we don't have to care or know how the compilation is being done under the hood.

 

The problem comes in when a component library uses another component library which happens after refactoring since mortgage_calculator uses basic input components. Siggi has provided a detailed answer to this issue of how to import components from html here (https://groups.google.com/a/dartlang.org/forum/#!mydiscussions/web/dc5xwmVo5JY), providing these guidelines:

Basically the rule is:

- if your .html file is an entrypoint, make sure this file is under 'web/' and use 'packages/package_name/path_to_file_relative_to_lib'

- if your .html file is inside a lib/ directory, use '[../]{repeated_as_many_levels_deep_you_are_in_lib}/packages/package_name/path_to_file_relative_to_lib'

The problem is with the second piece of advice, regarding html files in the component library. For example, if I apply that rule to payment_schedule.html which imports a date_input component, the import should look like:

<link rel="import" href="../../packages/basic_input/components/date_input.html">

When run using (4) with this import I get:

Failed to load resource: the server responded with a status of 404 (Not Found)

  http://127.0.0.1:3030/mortgage_calculator/web/examples/mortgage_calculator/packages/packages/basic_input/components/date_input.html

So, it is throwing in an additional "packages" in the path. Naturally, I key in on that and change all imports to do Siggi rule 2 but leave off the "packages":

<link rel="import" href="../../basic_input/components/date_input.html">

Now it works when using run method (1). So I try to build the "working" project in order to try to run with (4). But the build fails with:

  [Error in polymer (Linter) on mortgage_calculator|lib/components/payment_schedule.html]:

  lib/components/payment_schedule.html:5:1: couldn't find imported asset "basic_input/components/date_input.html" in package "mortgage_calculator".

So now I see why Siggi put 'packages' in his second rule. But, if I add back the "packages" to all the mortage_calculator imports of basic_imports and then build again I still get an error:

  [Error in polymer (Linter) on mortgage_calculator|lib/components/payment_schedule.html]:

  lib/components/payment_schedule.html:5:1: couldn't find imported asset "packages/basic_input/components/date_input.html" in package "mortgage_calculator".

So, after many permutations I have it so that the calculator can work successfully using run method (1) (i.e. only dev using Dartium) as long as I adapt Siggi rule 2 by leaving off "packages" in the import.

If I understood correctly, I think  you might be missing an extra '..' here, that's why 'packages/' is not working. In particular, you are starting from "packages/mortgage_calculator/components/payment_schedule.html" and reaching into ""packages/basic_input/components/date_input.html"", so you need to go up 3 levels to get back inside the packages folder.

True, that path is equivalent to "../../basic_input/components/date_input.html", but the polymer transformers doesn't understand that this is a cross-package import and it helps if you reach outside of the packages folder and enter it again with the extra "../packages/":

<link rel="import" href="../../../packages/basic_input/components/date_input.html">

Note: This project is at: https://github.com/patefacio/finance and the checked in version is the one that works with run method (1). No others work. Any help making run method (4) work is greatly appreciated. (There is another bug I encountered when all components were in the same package unrelated to imports that prevents the table from displaying. I imagine that issue will still exist after the imports are figured out).

Hope the details above help. Keep us posted!

Cheers,

Siggi

 

--
You received this message because you are subscribed to the Google Groups "Dart Web Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web+uns...@dartlang.org.
Visit this group at http://groups.google.com/a/dartlang.org/group/web/.

[Seth Ladd]

Thanks Siggi!

One bug to follow, related to this evolution, is https://code.google.com/p/dart/issues/detail?id=15624  If you star that issue, you'll be notified when it's addressed. Further use cases and clarifications are welcome.

[phyton.dbd]

Thanks so much. The extra '../' did the trick, so moving on to my table display error. 

[Seth Ladd]

Hi Siggi,

Is there a bug for simplifying the scenario you describe below? I want to follow along.

Thanks!
Seth

On Thu, Dec 26, 2013 at 1:07 PM, Siggi Cherem <sig...@google.com> wrote:

[Siggi Cherem]

Hi Seth,

I don't think there was one bug covering all changes we need to make it simple and uniform. So I just created one (https://code.google.com/p/dart/issues/detail?id=15859), There were a few bugs with some of the pieces, though. Like the bug you created to turn "Run as Javascript" into 'pub build' (https://code.google.com/p/dart/issues/detail?id=14836).

Cheers,

Siggi

[Seth Ladd]

Awesome, thanks Siggi. Starred!