From 54dfab376d3664a3fb43fc6bce0c169ffbcf953d Mon Sep 17 00:00:00 2001 From: Joel Denning Date: Fri, 4 Oct 2024 14:48:07 -0600 Subject: [PATCH] Switch to ESM format in newly generated modules --- .changeset/shaggy-boats-yell.md | 9 ++ .../typescript/typescript.package.json | 2 +- .../src/react/templates/react.package.json | 2 +- .../templates/root-config.package.json | 2 +- .../src/root-config/templates/src/index.ejs | 53 +++------- .../root-config/templates/src/root-config.ejs | 6 +- .../templates/util-module.package.json | 2 +- packages/single-spa-welcome/src/welcome.js | 14 ++- pnpm-lock.yaml | 97 +++++-------------- 9 files changed, 62 insertions(+), 125 deletions(-) create mode 100644 .changeset/shaggy-boats-yell.md diff --git a/.changeset/shaggy-boats-yell.md b/.changeset/shaggy-boats-yell.md new file mode 100644 index 0000000..dd78bec --- /dev/null +++ b/.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 diff --git a/packages/generator-single-spa/src/common-templates/typescript/typescript.package.json b/packages/generator-single-spa/src/common-templates/typescript/typescript.package.json index 4f6d8e7..d635a64 100644 --- a/packages/generator-single-spa/src/common-templates/typescript/typescript.package.json +++ b/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": { diff --git a/packages/generator-single-spa/src/react/templates/react.package.json b/packages/generator-single-spa/src/react/templates/react.package.json index 2296f59..7834625 100644 --- a/packages/generator-single-spa/src/react/templates/react.package.json +++ b/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" }, diff --git a/packages/generator-single-spa/src/root-config/templates/root-config.package.json b/packages/generator-single-spa/src/root-config/templates/root-config.package.json index 379c932..9d62942 100644 --- a/packages/generator-single-spa/src/root-config/templates/root-config.package.json +++ b/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" }, 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 index e5b629c..42c9bc3 100644 --- a/packages/generator-single-spa/src/root-config/templates/src/index.ejs +++ b/packages/generator-single-spa/src/root-config/templates/src/index.ejs @@ -5,44 +5,27 @@ Root Config - - - - + - + - - - + - + <% if (isLocal) { %> - <% } %> - - - - - <% if (isLocal) { %> - - - <% } else { %> - - - <% } %> + +
diff --git a/packages/generator-single-spa/src/root-config/templates/src/root-config.ejs b/packages/generator-single-spa/src/root-config/templates/src/root-config.ejs index 253975d..66458fc 100644 --- a/packages/generator-single-spa/src/root-config/templates/src/root-config.ejs +++ b/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) {%><% } %>( + import<% if (typescript) {%><% } %>( + /* 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) {%><% } %>( +// import<% if (typescript) {%><% } %>( +// /* webpackIgnore: true */ // "@<%- orgName %>/navbar" // ), // activeWhen: ["/"], diff --git a/packages/generator-single-spa/src/util-module/templates/util-module.package.json b/packages/generator-single-spa/src/util-module/templates/util-module.package.json index b751286..782a20d 100644 --- a/packages/generator-single-spa/src/util-module/templates/util-module.package.json +++ b/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" diff --git a/packages/single-spa-welcome/src/welcome.js b/packages/single-spa-welcome/src/welcome.js index 4f51fb4..c38f6bb 100644 --- a/packages/single-spa-welcome/src/welcome.js +++ b/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.

- 
-            {`"react": "https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.production.min.js",
-"react-dom": "https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.production.min.js"`}
-
+

+ You can use{" "} + + JSPM Generator + {" "} + to generate an import map with shared dependencies from NPM. +

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 33e9db8..1d1d009 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -151,13 +151,13 @@ importers: version: 27.5.1(@babel/core@7.23.5) babel-loader: specifier: ^8.2.5 - version: 8.3.0(@babel/core@7.23.5)(webpack@5.89.0(webpack-cli@4.10.0)) + version: 8.3.0(@babel/core@7.23.5)(webpack@5.89.0) cross-env: specifier: ^7.0.3 version: 7.0.3 css-loader: specifier: ^5.2.7 - version: 5.2.7(webpack@5.89.0(webpack-cli@4.10.0)) + version: 5.2.7(webpack@5.89.0) eslint: specifier: ^7.32.0 version: 7.32.0 @@ -190,7 +190,7 @@ importers: version: 6.0.1(@types/react-dom@17.0.25)(@types/react@17.0.71)(react@17.0.2) style-loader: specifier: ^3.2.1 - version: 3.3.3(webpack@5.89.0(webpack-cli@4.10.0)) + version: 3.3.3(webpack@5.89.0) ts-config-single-spa: specifier: workspace:* version: link:../ts-config-single-spa @@ -241,7 +241,7 @@ importers: devDependencies: webpack: specifier: ^5.89.0 - version: 5.89.0 + version: 5.89.0(webpack-cli@4.10.0) packages/webpack-config-single-spa-react: dependencies: @@ -7354,17 +7354,17 @@ snapshots: '@webassemblyjs/ast': 1.11.6 '@xtuc/long': 4.2.2 - '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0))(webpack@5.89.0(webpack-cli@4.10.0))': + '@webpack-cli/configtest@1.2.0(webpack-cli@4.10.0)(webpack@5.89.0)': dependencies: webpack: 5.89.0(webpack-cli@4.10.0) webpack-cli: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0) - '@webpack-cli/info@1.5.0(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0))': + '@webpack-cli/info@1.5.0(webpack-cli@4.10.0)': dependencies: envinfo: 7.11.0 webpack-cli: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0) - '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0))(webpack-dev-server@4.15.1(webpack-cli@4.10.0)(webpack@5.89.0))': + '@webpack-cli/serve@1.7.0(webpack-cli@4.10.0)(webpack-dev-server@4.15.1)': dependencies: webpack-cli: 4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0) optionalDependencies: @@ -7590,15 +7590,6 @@ snapshots: transitivePeerDependencies: - supports-color - babel-loader@8.3.0(@babel/core@7.23.5)(webpack@5.89.0(webpack-cli@4.10.0)): - dependencies: - '@babel/core': 7.23.5 - find-cache-dir: 3.3.2 - loader-utils: 2.0.4 - make-dir: 3.1.0 - schema-utils: 2.7.1 - webpack: 5.89.0(webpack-cli@4.10.0) - babel-loader@8.3.0(@babel/core@7.23.5)(webpack@5.89.0): dependencies: '@babel/core': 7.23.5 @@ -7606,7 +7597,7 @@ snapshots: loader-utils: 2.0.4 make-dir: 3.1.0 schema-utils: 2.7.1 - webpack: 5.89.0 + webpack: 5.89.0(webpack-cli@4.10.0) babel-plugin-istanbul@6.1.1: dependencies: @@ -8078,7 +8069,7 @@ snapshots: shebang-command: 2.0.0 which: 2.0.2 - css-loader@5.2.7(webpack@5.89.0(webpack-cli@4.10.0)): + css-loader@5.2.7(webpack@5.89.0): dependencies: icss-utils: 5.1.0(postcss@8.4.32) loader-utils: 2.0.4 @@ -8102,7 +8093,7 @@ snapshots: postcss-modules-values: 4.0.0(postcss@8.4.32) postcss-value-parser: 4.2.0 semver: 7.5.4 - webpack: 5.89.0 + webpack: 5.89.0(webpack-cli@4.10.0) css-select@4.3.0: dependencies: @@ -8801,7 +8792,7 @@ snapshots: semver: 7.5.4 tapable: 2.2.1 typescript: 4.9.5 - webpack: 5.89.0 + webpack: 5.89.0(webpack-cli@4.10.0) form-data@3.0.1: dependencies: @@ -9050,7 +9041,7 @@ snapshots: lodash: 4.17.21 pretty-error: 4.0.0 tapable: 2.2.1 - webpack: 5.89.0 + webpack: 5.89.0(webpack-cli@4.10.0) htmlparser2@6.1.0: dependencies: @@ -11372,7 +11363,7 @@ snapshots: standalone-single-spa-webpack-plugin@4.0.0(html-webpack-plugin@5.5.4(webpack@5.89.0))(webpack@5.89.0): dependencies: html-webpack-plugin: 5.5.4(webpack@5.89.0) - webpack: 5.89.0 + webpack: 5.89.0(webpack-cli@4.10.0) statuses@1.5.0: {} @@ -11462,13 +11453,9 @@ snapshots: strip-json-comments@3.1.1: {} - style-loader@3.3.3(webpack@5.89.0(webpack-cli@4.10.0)): - dependencies: - webpack: 5.89.0(webpack-cli@4.10.0) - style-loader@3.3.3(webpack@5.89.0): dependencies: - webpack: 5.89.0 + webpack: 5.89.0(webpack-cli@4.10.0) supports-color@5.5.0: dependencies: @@ -11493,7 +11480,7 @@ snapshots: systemjs-webpack-interop@2.3.7(webpack@5.89.0): dependencies: - webpack: 5.89.0 + webpack: 5.89.0(webpack-cli@4.10.0) table@6.8.1: dependencies: @@ -11523,15 +11510,6 @@ snapshots: ansi-escapes: 4.3.2 supports-hyperlinks: 2.3.0 - terser-webpack-plugin@5.3.9(webpack@5.89.0(webpack-cli@4.10.0)): - dependencies: - '@jridgewell/trace-mapping': 0.3.20 - jest-worker: 27.5.1 - schema-utils: 3.3.0 - serialize-javascript: 6.0.1 - terser: 5.25.0 - webpack: 5.89.0(webpack-cli@4.10.0) - terser-webpack-plugin@5.3.9(webpack@5.89.0): dependencies: '@jridgewell/trace-mapping': 0.3.20 @@ -11539,7 +11517,7 @@ snapshots: schema-utils: 3.3.0 serialize-javascript: 6.0.1 terser: 5.25.0 - webpack: 5.89.0 + webpack: 5.89.0(webpack-cli@4.10.0) terser@5.25.0: dependencies: @@ -11845,9 +11823,9 @@ snapshots: webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0): dependencies: '@discoveryjs/json-ext': 0.5.7 - '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0))(webpack@5.89.0(webpack-cli@4.10.0)) - '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0)) - '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0(webpack-dev-server@4.15.1)(webpack@5.89.0))(webpack-dev-server@4.15.1(webpack-cli@4.10.0)(webpack@5.89.0)) + '@webpack-cli/configtest': 1.2.0(webpack-cli@4.10.0)(webpack@5.89.0) + '@webpack-cli/info': 1.5.0(webpack-cli@4.10.0) + '@webpack-cli/serve': 1.7.0(webpack-cli@4.10.0)(webpack-dev-server@4.15.1) colorette: 2.0.20 commander: 7.2.0 cross-spawn: 7.0.3 @@ -11860,7 +11838,7 @@ snapshots: optionalDependencies: webpack-dev-server: 4.15.1(webpack-cli@4.10.0)(webpack@5.89.0) - webpack-dev-middleware@5.3.3(webpack@5.89.0(webpack-cli@4.10.0)): + webpack-dev-middleware@5.3.3(webpack@5.89.0): dependencies: colorette: 2.0.20 memfs: 3.5.3 @@ -11899,7 +11877,7 @@ snapshots: serve-index: 1.9.1 sockjs: 0.3.24 spdy: 4.0.2 - webpack-dev-middleware: 5.3.3(webpack@5.89.0(webpack-cli@4.10.0)) + webpack-dev-middleware: 5.3.3(webpack@5.89.0) ws: 8.14.2 optionalDependencies: webpack: 5.89.0(webpack-cli@4.10.0) @@ -11918,37 +11896,6 @@ snapshots: webpack-sources@3.2.3: {} - webpack@5.89.0: - dependencies: - '@types/eslint-scope': 3.7.7 - '@types/estree': 1.0.5 - '@webassemblyjs/ast': 1.11.6 - '@webassemblyjs/wasm-edit': 1.11.6 - '@webassemblyjs/wasm-parser': 1.11.6 - acorn: 8.11.2 - acorn-import-assertions: 1.9.0(acorn@8.11.2) - browserslist: 4.22.2 - chrome-trace-event: 1.0.3 - enhanced-resolve: 5.15.0 - es-module-lexer: 1.4.1 - eslint-scope: 5.1.1 - events: 3.3.0 - glob-to-regexp: 0.4.1 - graceful-fs: 4.2.11 - json-parse-even-better-errors: 2.3.1 - loader-runner: 4.3.0 - mime-types: 2.1.35 - neo-async: 2.6.2 - schema-utils: 3.3.0 - tapable: 2.2.1 - terser-webpack-plugin: 5.3.9(webpack@5.89.0) - watchpack: 2.4.0 - webpack-sources: 3.2.3 - transitivePeerDependencies: - - '@swc/core' - - esbuild - - uglify-js - webpack@5.89.0(webpack-cli@4.10.0): dependencies: '@types/eslint-scope': 3.7.7 @@ -11972,7 +11919,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.9(webpack@5.89.0(webpack-cli@4.10.0)) + terser-webpack-plugin: 5.3.9(webpack@5.89.0) watchpack: 2.4.0 webpack-sources: 3.2.3 optionalDependencies: