Assets-only Pub Packages

[Anton Moiseev]

We are going to use a 3rd-party CSS library in our Dart app. To simplify dependency management I wrapped the library into a pub package. The package is intended to contain only asset directory and pubspec.yaml, no code at all. But to execute pub publish command pub forces me to create lib directory and add at least one Dart file (even empty works fine). The question is, what do you think about assets-only pub packages, is it appropriate use of pub, should the pub allow this type of packages?

[Bob Nystrom]

On Thu, Dec 26, 2013 at 4:33 AM, Anton Moiseev <an...@antonmoiseev.com> wrote:

But to execute pub publish command pub forces me to create lib directory and add at least one Dart file (even empty works fine). The question is, what do you think about assets-only pub packages, is it appropriate use of pub, should the pub allow this type of packages?

It's a totally appropriate use of pub. We should change that warning to require a lib directory or an asset directory. (Or, probably better, just remove that warning entirely.) At the time we implemented that warning, pub didn't have any asset support at all, so it made more sense then.

Can you file a bug? If you're interested fixing that bug too, you're more than welcome of course. :)

Thanks!

- bob

[Anton Moiseev]

Thanks, Bob! Would like to do both :). Here is the bug http://dartbug.com/15810. Will continue discussion there.

[Don Olmstead]

I never thought of doing a pub package for assets. This is a really cool idea as I've been thinking about having different themes for a polymer library and wasn't sure where to store them all.

Any advice on how to setup the package? I was thinking about doing some sass stylesheets and then have them generate somewhere. It looks like it should generate into the assets folder. The sass files themselves I'm not sure what a good layout would be.

--
For other discussions, see https://groups.google.com/a/dartlang.org/
 
For HOWTO questions, visit http://stackoverflow.com/tags/dart
 
To file a bug report or feature request, go to http://www.dartbug.com/new

To unsubscribe from this group and stop receiving emails from it, send an email to misc+uns...@dartlang.org.

[Anton Moiseev]

This assets story is relatively new and we are still experimenting with it, so almost no experience to share. But I do have some thoughts what ideal setup I would love to have (with your example).

Since pub packages are not deployable entities, I would rather keep only source files (sass in your case), not generated output (css files) in the package. Sass files should go to asset/ directory. Then ideally I would like to have generic pub sass transformer that generates css from sass. I would plug it into pubspec.yaml of the web app that actually uses your themes package. This way no matter how many packages with sass your app depends on, all they will be compiled into css and put to the build/ directory that you actually deploy.

Saying that, right now we come up with much less exciting and rather pragmatic approach :). For our app we use awesome Semantic UI, so for now I just wrapped production-ready semantic's files into the assets-only pub package. We plug it to the web app built with AngularDart and directly reference css files.

P.S. If someone missed it, there is a thread discussing pub transformers and long-waited writeup by Bob on assets, transformers and build process. Thanks, Bob!

[Bob Nystrom]

On Fri, Jan 10, 2014 at 4:34 AM, Anton Moiseev <an...@antonmoiseev.com> wrote:

Since pub packages are not deployable entities, I would rather keep only source files (sass in your case), not generated output (css files) in the package. Sass files should go to asset/ directory. Then ideally I would like to have generic pub sass transformer that generates css from sass.

This is exactly what we had in mind when we started working on this.

 

I would plug it into pubspec.yaml of the web app that actually uses your themes package.

I think I would probably do both. The asset-only package would apply the SASS transformer to itself. That way, applications that aren't themselves using SASS could just import the CSS asset from the package and it will be automagically generated.

But, for users that are using SASS, it would be good if they can also import the original SASS file too, so that should also work.

(Which reminds me, I think that may not work right now. I'll have to bug Nathan about this.)

Cheers!

- bob

[Don Olmstead]

Thanks for the ideas guys! I'll have to give it a go and see what happens.

[Don Olmstead]

Did this land in an SDK? I went to try an asset only package and saw that it was complaining that there was no lib in the library and I'm not seeing an associated symlink.

[Anton Moiseev]

It's already in the dev channel, but not in the stable. Regarding the symlink, you won't see it in the packages even on the dev channel if your package has only asset directory. I believe the link is created only for packages with lib dir, so you can import libraries from it.

[Seth Ladd]

On Sunday, February 2, 2014 9:39:44 PM UTC+1, Anton Moiseev wrote:

It's already in the dev channel, but not in the stable. Regarding the symlink, you won't see it in the packages even on the dev channel if your package has only asset directory. I believe the link is created only for packages with lib dir, so you can import libraries from it.

Hm, I have pub version 1.2.0.dev_02_04 (DEV) and I still get the "does not have a "lib" directory so you will not be able to import any libraries from it." warning.

Regardless, since package/lib is what's symlinked into your app, how are we supposed to link to assets?

Traditionally, we do this: link = 'packages/foo/file.css'  and we put file.css into foo/lib/file.css

Any tips for linking to static files that live in asset that come from a package?

Thanks!

[Anton Moiseev]

I see. The patch affects pub lish command, so you won't see this warning when publishing a package. But the warning when you add a package as dependency and run pub get still shows up. I will address it.

Regarding the linking assets, I use the approach described here:

1. Create a package containing only asset directory (I wrapped Semantic UI here).
2. Publish it to the pub, using pub lish command (It doesn't complains about the lib dir on the dev channel).
3. Add the package as dependency to my main project.
4. Run pub get. I do see the warning, but it doesn't prevent pub from successfully getting the package. However, I don't see the package inside packages dir, since the package doesn't have lib dir.
5. On an HTML page I use this form to link static resources from external package: 
   <link rel="stylesheet" href="assets/semantic_ui/css/semantic.css">
   This can be found in How to refer to assets section.

One caveat - only pub serve treats /assets links in the right way, so you have to use pub's development server, which is actually good. But I faced two issues using pub serve:

1. I do most of my development in WebStorm, but I can't debug pub's process right into the IDE. AFAIK, Dart Editor supports remote connections, I've tried it once, haven't succeeded and gave up. But I'm more than happy with Dartium's Dev Tools, so it's a minor issue for me, and I don't even find a way to fix IDE's debugging.
2. Pub doesn't serve SVG with the correct MIME type. So they are not rendered properly on an HTML page. That's also kind of minor for me, since I just inlined my image with <svg> tag and wrapped it into AngularDart's component.

[Seth Ladd]

Thanks for the clarification. I was using a file: source and running pub get locally, which is why I still see the message.

For this to be useful to a wider variety of workflows, I'm wondering if we can make asset-only packages work outside of pub serve/build. Any thoughts there?

I ended up putting my assets into lib/ for now. I'll keep an eye on asset support.

Cheers,

Seth

[Bob Nystrom]

On Sun, Feb 2, 2014 at 11:54 PM, Seth Ladd <seth...@google.com> wrote:

Regardless, since package/lib is what's symlinked into your app, how are we supposed to link to assets?

See the section "How to Refer to Assets" in the doc Kathy wrote.

Cheers!

- bob

[Bob Nystrom]

On Mon, Feb 3, 2014 at 1:53 AM, Anton Moiseev <an...@antonmoiseev.com> wrote:

The patch affects pub lish command, so you won't see this warning when publishing a package. But the warning when you add a package as dependency and run pub get still shows up. I will address it.

Thanks, Anton! I totally forgot that pub get warns too. :(

- bob

[Bob Nystrom]

On Mon, Feb 3, 2014 at 2:05 AM, Seth Ladd <seth...@google.com> wrote:

For this to be useful to a wider variety of workflows, I'm wondering if we can make asset-only packages work outside of pub serve/build. Any thoughts there?

We don't intend to support any workflows outside of pub serve/build. In fact, we want to move away from symlinks entirely, which means even using Dart code from other packages will go through those (or some yet-to-be-created command for running command line apps).

 

I ended up putting my assets into lib/ for now. I'll keep an eye on asset support.

You should put them in asset/. Otherwise, they won't get copied over in pub build.

Cheers!

- bob

[Seth Ladd]

Ah, I see where my confusion is. The editor doesn't support pub serve yet, so I needed the assets in lib. I now see that in a world where there is only pub serve, going into asset makes sense.

Just for my understanding, how does pub build handle dart.js from the browser package? That's in lib, and ends up in my built directory.

Thanks!

[Dennis Kaselow]

If you want to use pub serve in the editor, you can do this:

- create a .options file in your editor install directory with the following content

com.google.dart.tools.core/experimental=true

com.google.dart.tools.core/experimental/pubserve=true

- launch the editor from command line 

DartEditor -debug /path to editor install dir/.options

- Now in the editor if you go to Run > Manage Launches Dialog, you should see a new launch configuration type - launch in Dartium using pub serve.

Source: https://groups.google.com/a/dartlang.org/d/msg/web/IN5HtNqUg-M/KZ3FhbN1MAsJ

I've been using it this way ever since.

[Anton Moiseev]

@Dennis, indeed this configuration makes Dart Editor to use pub serve for hosting apps. Unfortunately, as of the current dev channel's version (r32242) debugging doesn't work, breakpoints are ignored. But thanks for the hint, will keep my eye on this.

@Seth, regarding dart.js, I believe it works as long as pub uses symlinks. My personal speculation, as soon as pub goes away from symlinks the new command will ignore everything except .dart files in the lib.

[Bob Nystrom]

On Mon, Feb 3, 2014 at 8:59 PM, Seth Ladd <seth...@google.com> wrote:

Just for my understanding, how does pub build handle dart.js from the browser package? That's in lib, and ends up in my built directory.

It has some gross special-case code to handle the JS files in the browser package. That's been in there since before the idea of an "asset" directory existed, and it got Grandfathered in.

We're planning to clean it up once other stuff is a little more stable. I believe we can get rid of the browser package entirely and just transform the HTML to insert the appropriate <script> tags at build time, but we need to spend a little time making sure it works like we think.

It wouldn't hurt to have a tracking bug for this if you'd like to file one. :)

- bob

[Seth Ladd]

https://code.google.com/p/dart/issues/detail?id=16596

I filed under "Pkg-Browser", which doesn't have an owner.

@Bob, you mentioned there needs to be some cleanup before we can address 16596. Do you want a tracking bug for the cleanup, which we can make a dependency of 16596 ?

Thanks!

[Bob Nystrom]

On Thu, Feb 6, 2014 at 8:21 AM, Seth Ladd <seth...@google.com> wrote:

@Bob, you mentioned there needs to be some cleanup before we can address 16596. Do you want a tracking bug for the cleanup, which we can make a dependency of 16596 ?

That would be super awesome. :)

The gist is "get rid of the JS files in the browser package and use a transformer to insert/replace the appropriate <script> tags."

- bob

[adam]

I've also run into this issue recently in a few places. One issue is the need to use the shadow dom polyfill with angular. Polymer projects do all the magic AFAICT in regards to `
packages/shadow_dom/shadow_dom.min.js`. Using Angular and shadow_dom.min.js will not work without some custom scripts to copy the package over after a `pub build`.