Switch to ESM format in newly generated modules

.changeset/shaggy-boats-yell.md

@@ -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

packages/generator-single-spa/src/common-templates/typescript/typescript.package.json

@@ -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": {

packages/generator-single-spa/src/react/templates/react.package.json

@@ -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"
   },

packages/generator-single-spa/src/root-config/templates/root-config.package.json

@@ -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"
   },

packages/generator-single-spa/src/root-config/templates/src/index.ejs

@@ -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"
@@ -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>

packages/generator-single-spa/src/root-config/templates/src/root-config.ejs

@@ -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: ["/"],
@@ -12,7 +13,8 @@ registerApplication({
 // registerApplication({
 //   name: "@<%- orgName %>/navbar",
 //   app: () =>
-//     System.import<% if (typescript) {%><LifeCycles><% } %>(
+//     import<% if (typescript) {%><LifeCycles><% } %>(
+//       /* webpackIgnore: true */
 //       "@<%- orgName %>/navbar"
 //     ),
 //   activeWhen: ["/"],

packages/generator-single-spa/src/util-module/templates/util-module.package.json

@@ -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"

packages/single-spa-welcome/src/welcome.js

@@ -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>