polymerlabs / web-component-shards Goto Github PK
View Code? Open in Web Editor NEWLicense: BSD 3-Clause "New" or "Revised" License
License: BSD 3-Clause "New" or "Revised" License
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)
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.
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
.
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
.
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.
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:
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.
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).
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.