0

There's a new project for, what it seems to me to be, a way to vulcanise elements in bundles, web-components-shards.

I'm interested in the gulp version, gulp-web-components-shards.

Both projects lack comprehensive instructions in the README, how the file structure should be, what the output should look like and how to use it, or how I can declare which elements are shared between bundles.

Considering this use case:

A sample File Structure

The Polymer elements

  • ./app/elements
    • shared-element-1/shared-element-1.html
    • shared-element-2/shared-element-2.html
    • homepage-element-1/homepage-element-1.html
    • homepage-element-2/homepage-element-2.html
    • contact-element-1/contact-element-2.html
    • contact-element-1/contact-element-2.html

Note: shared-element-1.html & shared-element-2 are used in all routes

The routes:

  • ./app/homepage.jade
  • ./app/contact.jade

How should I set-up my gulp task so that is splits bundles I can use like so:

/* homepage.jade */

link(rel='import', href='/dist/shared-elements/shared-elements.html')
link(rel='import', href='/dist/homepage-elements/homepage-elements.html')

/* contact.jade */

link(rel='import', href='/dist/shared-elements/shared-elements.html')
link(rel='import', href='/dist/contact-elements/contact-elements.html')

Note: I've already opened an Issue - Still I think it would be nice to have an example usage snippet/explanation here as well.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167

1 Answers1

1

In that web-component-shards seems to be a deprecated/abandoned, I'd take a look at Polymer CLI where this is a little more laid out in the documentation available: https://www.polymer-project.org/1.0/docs/tools/polymer-cli#app It allows us to structure the build of our app in a polymer.json files shaped like:

{ "entrypoint": "index.html", "shell": "src/app-shell/app-shell.html", "fragments": [ "src/view-one/view-one.html", "src/view-one/view-two.html" ], "sources": [ "src/**/*", "images/**/*", "bower.json" ], "includeDependencies": [ "bower_components/webcomponentsjs/webcomponents-lite.min.js" ] }

For you the most important parts would be the "fragments" as it would structure most closely to the app you've described. Then you could use the hooks specifically set up in the CLI to process your JADE and what not as well.

Westbrook
  • 608
  • 5
  • 9
  • Why do I need to specify an `entrypoint`? Can't it just spit out the component bundles I need in a `/dist` folder and I'll decide how I would include them in my `.jade` files? – nicholaswmin Oct 31 '16 at 13:46
  • 1
    You can read more about that here: https://www.polymer-project.org/1.0/docs/tools/polymer-cli#build It has mainly to do with how it checks your imports for processing. If you have an import in your "shell" or "shared" package, and then request it again in your "fragment" or "page" package it can know not to include it in both (which will error). I think there is also some future plans around even more intelligent building from these data points, but I'm not sure where those plans are headed for sure. – Westbrook Oct 31 '16 at 23:40