feat: 🎸 ESM Loading. Remove System JS. IE Support. CSS Hydration Fixes. Naming Conflict fixes. Robust support for plugins.

[nickreese]

This add the ability to split components to dev which will speed up local dev but breaks stores.

Usage:

module.exports = [...getRollupConfig({ svelteConfig, 
rollupConfig: { 
dev: { splitComponents: true } 
} 
})];

Also got a working module/nomodule setup built using iifes that doesn't break the Elder.js apis.

Testing

To test this:

1. clone this branch and type npm install && npm link
2. degit the template with npx degit Elderjs/template elderjs-app
3. cd elderjs-app
4. Update the @elderjs/elderjs entry in the package.json to be file:../relative/path/here/ and then type npm install.
5. npm run build

Notes:

• This also completely refactors how we're getting CSS, adds CSS sourcemaps, and fixes CSS Sourcemap #66, Component styles not added to cssStack #34, Hydrated Nested Svelte Components Losing Styles #37 and Component styles not added to cssStack #34.
• This also fixes naming conflicts Templates need unique compile paths to fix conflicts #41.
• It adds more robust support for plugin templates.

[jbmoelker]

Very curious about this feature. Just putting some findings here first, without having looked at the code:

• Test step 4, you can use a linked package using npm link @elderjs/elderjs inside elderjs-app/.
• npm run rollup:dev no longer works without rollupConfig: { dev: { splitComponents: true } }. Can that become optional?
• Maybe it's odd to have a rollupConfig property in getRollupConfig? Could this be getRollupConfig({ dev: { ... }, svelteConfig })?
• When I run dev:rollup and dev:server and I open http://localhost:3000/ I get a 404 on http://localhost:3000/svelte/undefined.mjs and the clock doesn't hydrate. Is it supposed to do that? If I set { splitComponents: false } it loads and hydrates again. Without SystemJS, so 🥳.

When I run a build and serve it locally using npx serve public/, the page works both in modern browsers and IE11. 💯

So quick first verdict would be that this should make it in :) Maybe without the dev: { splitComponents: true } to start with?

[jbmoelker]

Complex stuff. Great that you're digging into this. I can't think of a simpler solution. So for now, just left some small comments.

I do really enjoy seeing the module/nomodule script mechanism at work. As I think it's a really lean solution for wide browser support.

[codecov-io]

Codecov Report

Merging #42 into master will increase coverage by 0.74%.
The diff coverage is 92.50%.

@@            Coverage Diff             @@
##           master      #42      +/-   ##
==========================================
+ Coverage   92.65%   93.39%   +0.74%     
==========================================
  Files          32       38       +6     
  Lines        1198     1333     +135     
  Branches      253      278      +25     
==========================================
+ Hits         1110     1245     +135     
+ Misses         88       86       -2     
- Partials        0        2       +2     

Impacted Files	Coverage Δ
src/hookInterface/hookInterface.ts	100.00% <ø> (ø)
src/hooks.ts	92.77% <ø> (-0.18%)	⬇️
src/utils/validations.ts	79.03% <66.66%> (-2.33%)	⬇️
src/utils/svelteComponent.ts	81.42% <78.26%> (-5.02%)	⬇️
src/Elder.ts	87.71% <84.88%> (-2.61%)	⬇️
src/utils/getRollupConfig.ts	95.12% <93.47%> (+8.66%)	⬆️
src/utils/rollupPluginHandleCss.ts	95.55% <95.55%> (ø)
src/plugins/index.ts	95.91% <95.91%> (ø)
src/routes/routes.ts	96.15% <100.00%> (+0.10%)	⬆️
src/utils/Page.ts	91.01% <100.00%> (+0.42%)	⬆️
... and 13 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update b185635...89e7a06. Read the comment docs.

[nickreese]

@halafi @jbmoelker @decrek I think this is ready to merge in and release. 👍

Filip, we could use some tests for some of the new features/improvements when you have downtime.

[thisislawatts]

@nickreese this PR is a little hard for me to review given it's size. Have you considered rebasing against master branch, instead of merging master into esm to reduce some of noise here.
Are there any specific changes you would like extra eyes on?

[nickreese]

@thisislawatts I’ll need to google rebase. 👀

This started as a refactor for ESM/ie11 bundles which deeply changed our rollup configs. Then I wanted to fix the CSS issues as it was closely ties with the rollup configs. The problem was that the string kept going as the only way to pull off the CSS implementation was to make sure there weren’t component name shadowing and even a deeper refactor of the rollup configs.

I’ll look at rebase. This is tested against the template and 2 production projects so I’m confident in the fact the code works. Just mainly realize that more eyes are better than fewer but overall I think it is ready to merge.