Allow for using native modules instead of SystemJS

src/instant-test/instant-test.component.js

@@ -15,6 +15,7 @@ export default function InstantTest(props) {
         name: params.get("name"),
         pathPrefix: "/",
         framework: params.get("framework") || undefined,
+        useNativeModules: params.get("useNativeModules") === "true",
       };
 
       addApplication(app);

src/registered-app/registered-app.component.js

@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import { useCss } from "kremling";
 import Code from "../code.component";
 import { LocalStorageContext } from "../use-local-storage-data.hook";
+import { importAppCode } from "../verify-app-guide/verification-steps/import-app";
 
 export default function RegisteredApp({ app, edit, interactive }) {
   const scope = useCss(css);
@@ -85,7 +86,7 @@ const indentedCode = (app) =>
   `
 singleSpa.registerApplication(
   '${app.name}',
-  System.import('${app.name}'),
+  () => ${importAppCode(app)},
   location => location.pathname.startsWith('${app.pathPrefix}')
 );
 `;

src/root-config-guide/root-config-guide.component.js

@@ -7,6 +7,7 @@ import Code from "../shared/code.component";
 import { sharedDepsImportMap } from "../shared/registered-app.component";
 import { Link } from "react-router-dom";
 import { useAppSharedDependencies } from "../shared/use-app-shared-deps.hook";
+import { importAppCode } from "../verify-app-guide/verification-steps/import-app";
 
 export default function HtmlFile(props) {
   const scope = useCss(css);
@@ -50,7 +51,7 @@ export default function HtmlFile(props) {
   const registerAppCode = `
 singleSpa.registerApplication(
   '${application.name}',
-  () => System.import('${application.name}'),
+  () => ${importAppCode(application)},
   location => location.pathname.startsWith('${application.pathPrefix}')
 );
 

src/root.component.js

@@ -3,6 +3,7 @@ import Playground from "./playground.component";
 import useLocalStorageData from "./shared/use-local-storage-data.hook";
 import { getAppNames, registerApplication, navigateToUrl } from "single-spa";
 import HiddenPlayground from "./hidden-playground.component";
+import { importApp } from "./verify-app-guide/verification-steps/import-app";
 
 export default function Root(props) {
   const [showPlayground, setShowPlayground] = useState(() =>
@@ -53,7 +54,7 @@ export default function Root(props) {
         /* global System */
         registerApplication(
           application.name,
-          () => System.import(application.name),
+          () => importApp(application),
           (location) => location.pathname.startsWith(application.pathPrefix)
         );
       }

src/shared/edit-registered-app.component.js

@@ -17,6 +17,7 @@ export default function EditRegisteredApp({
   const [alertMessage, setAlertMessage] = useState(null);
   const [loading, setLoading] = useState(false);
   const [appSharedDeps, setAppSharedDeps] = useState([]);
+  const [useNativeModules, setUseNativeModules] = useState(false);
   const scope = useCss(css);
 
   const ariaPrefix = name || "new-app";
@@ -68,7 +69,13 @@ export default function EditRegisteredApp({
             type="text"
             value={url}
             onChange={(evt) => setUrl(evt.target.value)}
-            placeholder="http://localhost:8080/app1.js"
+            placeholder={
+              framework === "vue"
+                ? `http://localhost:8080/js/app.js`
+                : `http://localhost:8080/${
+                    name ? name.replace(/@/g, "").replace(/\//g, "-") : "app1"
+                  }.js`
+            }
             aria-labelledby={urlLabel}
             required
             autoComplete="off"
@@ -89,6 +96,33 @@ export default function EditRegisteredApp({
           />
         </label>
       </div>
+      <div className="section">
+        <label>
+          <div className="inner-label">Module Loader (Advanced)</div>
+          <div className="form-inputs">
+            <label htmlFor="use-systemjs">SystemJS</label>
+            <input
+              id="use-systemjs"
+              type="radio"
+              name="use-esm"
+              checked={!useNativeModules}
+              onChange={(evt) => setUseNativeModules(!evt.target.checked)}
+              required
+              autoComplete="off"
+            />
+            <label htmlFor="use-esm">Browser</label>
+            <input
+              id="use-esm"
+              type="radio"
+              name="use-esm"
+              checked={useNativeModules}
+              onChange={(evt) => setUseNativeModules(evt.target.checked)}
+              required
+              autoComplete="off"
+            />
+          </div>
+        </label>
+      </div>
       <div className="actions">
         <button type="button" className="secondary" onClick={cancel}>
           Cancel
@@ -162,6 +196,7 @@ export default function EditRegisteredApp({
       name,
       pathPrefix,
       sharedDeps: newAppSharedDeps || appSharedDeps,
+      useNativeModules,
     };
     app.name ? updateApp(appToSave, url, app.name) : addApp(appToSave, url);
   }
@@ -206,9 +241,18 @@ const css = `
   align-items: center;
 }
 
-& .application-form input, & .application-form select {
+& .application-form input[type="text"], & .application-form select {
   width: 35.0rem;
 }
+
+& .form-inputs {
+  display: flex;
+  align-items: center;
+}
+
+& .application-form input[type="radio"] {
+  margin-right: 2.4rem;
+}
 `;
 
 const extractFrameworkName = (dependencies) => {

src/shared/registered-app.component.js

@@ -3,6 +3,7 @@ import { useCss } from "kremling";
 import Code from "./code.component";
 import { LocalStorageContext } from "./use-local-storage-data.hook";
 import { getPlaygroundDeps } from "../verify-app-guide/verification-steps/application-dependencies.component";
+import { importAppCode } from "../verify-app-guide/verification-steps/import-app";
 
 export default function RegisteredApp({ app, edit, interactive }) {
   const scope = useCss(css);
@@ -57,7 +58,7 @@ const indentedCode = (app, importMap) =>
   `
 singleSpa.registerApplication({
   name: '${app.name}',
-  app: () => System.import('${app.name}'),
+  app: ${importAppCode(app)},
   activeWhen: '${app.pathPrefix}'
 });
 

src/verify-app-guide/verification-steps/application-executable.component.js

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useCallback } from "react";
 import CodeOutput from "../../shared/code-output.component";
 import singleSpa from "single-spa";
+import { importApp } from "./import-app";
 
 export default React.forwardRef(function ApplicationExecutable(props, ref) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -35,8 +36,7 @@ export default React.forwardRef(function ApplicationExecutable(props, ref) {
   if (ref) {
     ref.current = {
       runTest() {
-        /* global System */
-        return System.import(props.app.name).catch((err) => {
+        return importApp(props.app).catch((err) => {
           console.error(err);
           setError(err);
           if (err.message.match(/systemjs-webpack-interop/)) {

src/verify-app-guide/verification-steps/import-app.js

@@ -0,0 +1,19 @@
+export function importApp(app) {
+  if (app.useNativeModules) {
+    return import(/* webpackIgnore: true */ getAppUrl(app));
+  } else {
+    return System.import(app.name);
+  }
+}
+
+export function importAppCode(app) {
+  if (app.useNativeModules) {
+    return `import(/* webpackIgnore: true */ '${getAppUrl(app)}')`;
+  } else {
+    return `System.import('${app.name}')`;
+  }
+}
+
+export function getAppUrl(app) {
+  return window.importMapOverrides.getOverrideMap().imports[app.name];
+}

src/verify-app-guide/verification-steps/lifecycles-exported.component.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import CodeOutput from "../../shared/code-output.component";
+import { importApp } from "./import-app";
 
 export default React.forwardRef(function LifecycleExports(props, ref) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -9,7 +10,7 @@ export default React.forwardRef(function LifecycleExports(props, ref) {
     ref.current = {
       runTest() {
         /* global System */
-        return System.import(props.app.name)
+        return importApp(props.app)
           .then((mod) => {
             if (
               typeof mod.bootstrap !== "function" ||

src/verify-app-guide/verification-steps/mount-lifecycle.component.js

@@ -7,6 +7,7 @@ import {
   getAppNames,
 } from "single-spa";
 import CodeOutput from "../../shared/code-output.component";
+import { importApp } from "./import-app";
 
 export let shouldMount = false;
 export const setShouldMount = (val) => (shouldMount = val);
@@ -33,7 +34,7 @@ export default React.forwardRef(function MountLifecycle(
         /* global System */
         registerApplication(
           app.name,
-          () => System.import(app.name),
+          () => importApp(app),
           () => shouldMount
         );
 

src/verify-app-guide/verification-steps/view-application.component.js

@@ -1,6 +1,7 @@
 import React, { forwardRef, useState } from "react";
 import { registerApplication } from "single-spa";
 import CodeOutput from "../../shared/code-output.component";
+import { importApp } from "./import-app";
 
 export default forwardRef(function ViewApplication({ app, stepNumber }, ref) {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -15,7 +16,7 @@ export default forwardRef(function ViewApplication({ app, stepNumber }, ref) {
             /* global System */
             registerApplication(
               app.name,
-              () => System.import(app.name),
+              () => importApp(app),
               (location) => location.pathname.startsWith(app.pathPrefix)
             );
             window.history.pushState({}, document.title, app.pathPrefix);