GithubHelp home page GithubHelp logo

web-component-shards's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

web-component-shards's Issues

get shared dependecies across multiple folders

Is there a way to get shared dependencies across multiple folder.

__ Folder1 for Component1
|__ Element xyz.html (dependencies: 1,2,3,4)
|__ Element abc.html (dependencies: 2,3,4)
__ Folder 2 for Component2
|__ Element pqr.html (dependencies: 5,6,7)
|__ Element uvw.html (dependencies: 1,7,8,9)

Produce feedback on the dependencies included in each shard

Producing multiple shards is helpful, but without knowing what is actually included in each shard it is hard to further optimize the structure/layout of an application.

It would be nice to have web-component-shards produce a (machine readable) report on what (unique) dependencies it found for which endpoint, and which dependencies ended up in the shared import.

Allow Vulcanize options to be customized

Since this tool would be used to execute Vulcanize instead of running Vulcanize directly, ideally it should allow users to customize the options passed to Vulcanize. Right now it's setting its own options without allowing an override.

Some of Vulcanize's options may only have one value that makes sense in this context, but at the least, I'd like to be able to be able to turn Vulcanize's --strip-comments option on when running web-component-shards.

Importing shard requires explicit call to Polymer.updateStyles()

Some of our elements lost their styling after we started sharding. For example, elements depending on the CSS variables from paper-styles/default-theme.html (e.g. --primary-color) lost their color.
It turned out that the shared styles, on which the elements depend, were not imported in the initial load but only at a later stage via importHref. This meant that the declared CSS variables were not considered in Polymer.StyleDefaults.
Our solution is to explicitly call Polymer.updateStyles() after each shard is imported:

Polymer.Base.importHref(['next-shard.html'], function() {
  Polymer.updateStyles();
});

Ideally, Polymer itself would figure out that it needs to adjust the styles. For the time being, it would be helpful to document this required adjustment when using web-component-shards.

errors during build result in a successful exit code

When an error occurs during the wcs build process, the exit code is a successful 0. This causes CI systems to think things passed when in fact they did not.

To reproduce: cause an error somewhere in vulcanize, for example by importing a file that doesn't exist. Then output the exit code echo $? and see that you get 0 instead of a non-zero failure value.

Splitting shared file into multiple bundles

For now, when using wcs, we have to put a lot of components into single bundle. This approach might be OK for small projects, but I'd like to focus on several disadvantages:

  1. There can be a number of core components which are not intended to be updated very often, and so it would be nice to place them separately, and to use caching for that bundle (with the help of versioning tools such as gulp-rev-all. Let's call them "monthly".
  2. At the same time, other components can change weekly or even daily. If we put them into same bunlde with monthly components (as we have no choce), any change will lead to cache invalidation (monthly components will be reloaded by users too, although they hadn't changed).

So, I suggest implementing the possibility to split shared imports into multiple bundles like so:

shared: {
  '/^polymer-/': 'polymer.html',
  '/^iron-/': 'vendor-iron.html',
  '/^paper-/': 'vendor-paper.html',
  '/^font-/': 'fonts.html',
  '/^my-/': 'my.html',
}

This way, we would be able to cache several bundles (at least, Polymer itself and maybe also iron, paper etc) - and to update other components without causing users to reload the whole bundle.

I'm writing this because now I'm working on migration of Polymer 0.5 project, which isn't vulcanized at all and has 300+ components. Even with http2 it takes a lot of time to bootstrap the app. And I realize that single bundle for me is not a solution.

broken with vulcanize 1.14.11

As soon as vulcanize 1.14.11 has released, web-component-shards stopped working correctly.
I tried to debug and managed to find out that commonDeps array is generated, but their imports aren't replaced in "shared.html" file.
It also takes a lot of time and causes CPU performance issues.
My current workaround is to setup "vulcanize": "1.14.8" explicitly (the last working versrion).

Doesn't work on node version > 5 due to outdated dependency on command-line-args

If you try to run web-component-shards on a version of node greater than 5, you get the following error:

/node_modules/column-layout/lib/rows.js:69
  return columns.map(column => {
                ^

TypeError: Cannot read property 'map' of undefined
    at objectToIterable (/node_modules/column-layout/lib/rows.js:69:17)
    at arrayify.forEach.row (/node_modules/column-layout/lib/rows.js:20:53)
    at Array.forEach (native)
    at Rows.load (/node_modules/column-layout/lib/rows.js:20:20)
    at new Rows (/node_modules/column-layout/lib/rows.js:15:10)
    at Rows.map (native)
    at Table.getWrapped (/node_modules/column-layout/lib/table.js:74:22)
    at Table.getLines (/node_modules/column-layout/lib/table.js:92:29)
    at Table.renderLines (/node_modules/column-layout/lib/table.js:108:22)
    at Table.render (/node_modules/column-layout/lib/table.js:118:17)

If you trace the dependency tree back, it's coming from command-line-args, which depends on column-layout, which has since been renamed to table-layout. There's a newer version of command-line-args that seems to fix the problem, but there are some breaking changes involved in upgrading to it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.