Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/systemjs upgrade #2

Merged
merged 3 commits into from
Aug 3, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 0 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,22 +23,13 @@ styled-components poses a problem in a single-spa microfrontends implementation
1. Add `styled-components` to Webpack externals (so that it is not bundled) ([6f70b10](https://github.com/filoxo/single-spa-example-shared-styled-components/commit/6f70b10b500a65e21dd9d49e2d8e08f7e8db9ef0))
1. Create and export styled components from styleguide (eg. `Button`) ([4603309](https://github.com/filoxo/single-spa-example-shared-styled-components/commit/4603309ee7a38d00caf8c62007bc83f3c7dbd882))
1. Add `styled-components` and `react-is` to importmap ([05188d3](https://github.com/filoxo/single-spa-example-shared-styled-components/commit/05188d33ef99f1b7a1d73a875024fc7f1b02e9c7))
1. Add workaround for Webpack System external interop bug ([04a8a78](https://github.com/filoxo/single-spa-example-shared-styled-components/commit/04a8a78bc73226a7fee2c756e5d1e5a9f3d36899))

In some future, this could be solved 3 ways:

- Use the workaround code if using Webpack ~4
- Upgrade to Webpack 5
- [Implement and use a System build of styled-components](https://github.com/esm-bundle/new-repo-instructions)

1. Import and use styleguide components in navbar, eg. `import { Button } from '@filoxo/styleguide'` ([69caa41](https://github.com/filoxo/single-spa-example-shared-styled-components/commit/69caa41709e309fe919dcde7ccee62b0618d9512))
1. Celebrate good times 🎉

## Additional notes

- These are implemented within the same repo **for illustration purposes**. In an organizational setting, each of the modules should be in its own repo.
- While the styleguide uses styled-components, I chose to implement the local styles for navbar using CSS modules to show that applications can be autonomous when choosing which style technologies they'd like to use.
- The "Webpack System external interop" bug is unrelated to styled-components. Its simply an artifact of module interop.
- How to test applications that consume styleguide components is not ideal, and something that will hopefully change in the future.
- ESM support in Jest is planned
- maybe it would be possible to create a Systemjs module resolver?
Expand Down
36 changes: 8 additions & 28 deletions root-config/src/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.5.0/lib/system/single-spa.min.js",
"react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
"react-is": "https://cdn.jsdelivr.net/npm/@esm-bundle/react-is@16.13.1/system/react-is.production.min.js",
"styled-components": "https://cdn.jsdelivr.net/npm/@esm-bundle/styled-components/system/styled-components.js"
"react-is": "https://unpkg.com/react-is@16.13.1/umd/react-is.production.min.js",
"styled-components": "https://unpkg.com/styled-components@5.1.1/dist/styled-components.min.js"
}
}
</script>
Expand All @@ -37,35 +37,15 @@
}
</script>
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.14.6/dist/import-map-overrides.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.3.1/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.3.1/dist/extras/amd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.3.1/dist/extras/named-exports.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.1/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.1/dist/extras/amd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.1/dist/extras/named-exports.js"></script>
<% } else { %>
<script src="https://cdn.jsdelivr.net/npm/import-map-overrides@1.14.6/dist/import-map-overrides.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.3.1/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.3.1/dist/extras/amd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.3.1/dist/extras/named-exports.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.1/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.1/dist/extras/amd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/systemjs@6.4.1/dist/extras/named-exports.min.js"></script>
<% } %>
<script>
// This workaround is for Webpack failing to properly interop with System format externals
// This is a workaround for Webpack 4 https://github.com/react-microfrontends/api/issues/1#issuecomment-594289086
// but could also be resolved by upgrading to Webpack 5, which is still in beta at the time of this commit.
(function() {
const originalInstantiate = System.constructor.prototype.instantiate;
System.constructor.prototype.instantiate = function() {
return originalInstantiate
.apply(this, arguments)
.then(function(register) {
const originalFn = register[1];
register[1] = function(_export) {
_export("__esModule", true);
return originalFn.apply(this, arguments);
};
return register;
});
};
})();
</script>

<template id="single-spa-layout">
<single-spa-router>
Expand Down