Skip to content

Commit

Permalink
Switch to ESM format in newly generated modules (#417)
Browse files Browse the repository at this point in the history
  • Loading branch information
joeldenning authored Oct 4, 2024
1 parent 632c33e commit d518ae4
Show file tree
Hide file tree
Showing 9 changed files with 62 additions and 125 deletions.
9 changes: 9 additions & 0 deletions .changeset/shaggy-boats-yell.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
---
"generator-single-spa": major
"single-spa-welcome": major
"create-single-spa": major
---

Output to ESM format rather than SystemJS format. Upgrade webpack-config-single-spa.

Newly generated root-configs, single-spa applications, and utility modules will now output to ESM format rather than SystemJS format. To revert to SystemJS format, add the `outputSystemJS: true` option to options passed to webpack-config-single-spa within the webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@babel/preset-typescript": "^7.23.3",
"eslint-config-ts-important-stuff": "^1.1.0",
"typescript": "^4.3.5",
"webpack-config-single-spa-ts": "^4.0.0",
"webpack-config-single-spa-ts": "^5.0.2",
"ts-config-single-spa": "^3.0.0"
},
"dependencies": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"pretty-quick": "^3.1.1",
"webpack": "^5.89.0",
"webpack-cli": "^4.10.0",
"webpack-config-single-spa-react": "^4.0.0",
"webpack-config-single-spa-react": "^5.0.2",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"serve": "^13.0.0",
"webpack": "^5.89.0",
"webpack-cli": "^4.10.0",
"webpack-config-single-spa": "^5.0.0",
"webpack-config-single-spa": "^6.0.2",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,44 +5,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Root Config</title>
<!--
Remove this if you only support browsers that support async/await.
This is needed by babel to share largeish helper code for compiling async/await in older
browsers. More information at https://github.com/single-spa/create-single-spa/issues/112
-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/runtime.min.js"></script>
<!--
This CSP allows any SSL-enabled host and for arbitrary eval(), but you should limit these directives further to increase your app's security.
Learn more about CSP policies at https://content-security-policy.com/#directive
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https:; object-src 'none';">
<meta name="importmap-type" content="systemjs-importmap" />
<meta name="importmap-type" use-injector />
<!-- If you wish to turn off import-map-overrides for specific environments (prod), uncomment the line below -->
<!-- More info at https://github.com/joeldenning/import-map-overrides/blob/master/docs/configuration.md#domain-list -->
<!-- More info at https://github.com/single-spa/import-map-overrides/blob/main/docs/configuration.md#domain-list -->
<!-- <meta name="import-map-overrides-domains" content="denylist:prod.example.com" /> -->

<!-- Shared dependencies go into this import map. Your shared dependencies must be of one of the following formats:
1. System.register (preferred when possible) - https://github.com/systemjs/systemjs/blob/master/docs/system-register.md
2. UMD - https://github.com/umdjs/umd
3. Global variable
More information about shared dependencies can be found at https://single-spa.js.org/docs/recommended-setup#sharing-with-import-maps.
-->
<script type="systemjs-importmap">
<!-- Shared dependencies go into this import map -->
<script type="injector-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js"
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa@6.0.3/lib/es2015/esm/single-spa.min.js"
}
}
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/system/single-spa.min.js" as="script">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/single-spa@6.0.3/lib/es2015/esm/single-spa.min.js" as="module">

<!-- Add your organization's prod import map URL to this script's src -->
<!-- <script type="systemjs-importmap" src="/importmap.json"></script> -->
<!-- <script type="injector-importmap" src="/importmap.json"></script> -->

<% if (isLocal) { %>
<script type="systemjs-importmap">
<script type="injector-importmap">
{
"imports": {
"@<?- orgName ?>/root-config": "//localhost:9000/<?- orgName ?>-root-config.js"
Expand All @@ -51,28 +34,18 @@
</script>
<% } %>

<!--
If you need to support Angular applications, uncomment the script tag below to ensure only one instance of ZoneJS is loaded
Learn more about why at https://single-spa.js.org/docs/ecosystem-angular/#zonejs
-->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zone.min.js"></script> -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js"></script>
<% if (isLocal) { %>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.js"></script>
<% } else { %>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.min.js"></script>
<% } %>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@single-spa/[email protected]/lib/import-map-injector.js"></script>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<main></main>
<script>
System.import('@<?- orgName ?>/root-config');
window.importMapInjector.initPromise.then(() => {
import('@<?- orgName ?>/root-config');
});
</script>
<import-map-overrides-full show-when-local-storage="devtools" dev-libs></import-map-overrides-full>
</body>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { registerApplication, start<% if (typescript) {%>, LifeCycles<% }%> } fr
registerApplication({
name: "@single-spa/welcome",
app: () =>
System.import<% if (typescript) {%><LifeCycles><% } %>(
import<% if (typescript) {%><LifeCycles><% } %>(
/* webpackIgnore: true */
"https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js"
),
activeWhen: ["/"],
Expand All @@ -12,7 +13,8 @@ registerApplication({
// registerApplication({
// name: "@<%- orgName %>/navbar",
// app: () =>
// System.import<% if (typescript) {%><LifeCycles><% } %>(
// import<% if (typescript) {%><LifeCycles><% } %>(
// /* webpackIgnore: true */
// "@<%- orgName %>/navbar"
// ),
// activeWhen: ["/"],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"webpack": "^5.89.0",
"webpack-config-single-spa": "^5.0.0",
"webpack-config-single-spa": "^6.0.2",
"webpack-merge": "^5.8.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.0.0"
Expand Down
14 changes: 10 additions & 4 deletions packages/single-spa-welcome/src/welcome.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,10 +53,16 @@ export default function Root(props) {
create-single-spa will need to add React and ReactDOM to the import
map.
</p>
<pre>
<code>{`"react": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"`}</code>
</pre>
<p>
You can use{" "}
<a
href="https://generator.jspm.io/#U2VhYGBkDM0rySzJSU1hKEpNTC5xMLTQM9YzBADlj3RUGwA"
target="_blank"
>
JSPM Generator
</a>{" "}
to generate an import map with shared dependencies from NPM.
</p>
</li>
</ul>
<p>
Expand Down
Loading

0 comments on commit d518ae4

Please sign in to comment.