Full support for ESM in root configs. Resolves #418 (#419)

* Full support for ESM in root configs. Resolves #418 * Changeset
single-spa · Nov 8, 2024 · 56da695 · 56da695
1 parent 97b2f42
commit 56da695
Show file tree

Hide file tree

Showing 6 changed files with 453 additions and 85 deletions.
diff --git a/.changeset/seven-ants-prove.md b/.changeset/seven-ants-prove.md
@@ -0,0 +1,5 @@
+---
+"generator-single-spa": patch
+---
+
+Load layout root config microfrontends with browser rather than SystemJS
diff --git a/packages/generator-single-spa/src/root-config/generator-root-config.js b/packages/generator-single-spa/src/root-config/generator-root-config.js
@@ -155,7 +155,7 @@ module.exports = class SingleSpaRootConfigGenerator extends PnpmGenerator {
     );
 
     this.fs.copyTpl(
-      this.templatePath(`${parentPath}/index.ejs`),
+      this.templatePath(`src/index.ejs`),
       this.destinationPath(`src/index.ejs`),
       this.options,
       { delimiter: "?" }

diff --git a/packages/generator-single-spa/src/root-config/templates/src/index.ejs b/packages/generator-single-spa/src/root-config/templates/src/index.ejs
@@ -28,7 +28,8 @@
   <script type="injector-importmap">
     {
       "imports": {
-        "@<?- orgName ?>/root-config": "//localhost:9000/<?- orgName ?>-root-config.js"
+        "@<?- orgName ?>/root-config": "//localhost:9000/<?- orgName ?>-root-config.js",
+        "@single-spa/welcome": "https://cdn.jsdelivr.net/npm/single-spa-welcome/dist/single-spa-welcome.min.js"
       }
     }
   </script>

diff --git a/packages/generator-single-spa/src/root-config/templates/src/layout/index.ejs b/packages/generator-single-spa/src/root-config/templates/src/layout/index.ejs
diff --git a/packages/generator-single-spa/src/root-config/templates/src/layout/root-config.ejs b/packages/generator-single-spa/src/root-config/templates/src/layout/root-config.ejs
@@ -10,7 +10,7 @@ const routes = constructRoutes(microfrontendLayout);
 const applications = constructApplications({
   routes,
   loadApp({ name }) {
-    return System.import(name);
+    return import(/* webpackIgnore: true */ name);
   },
 });
 const layoutEngine = constructLayoutEngine({ routes, applications });