Upgrade Svelte to v5. Replace Jest with Vitest. Upgrade other packages

.changeset/pink-dodos-suffer.md

@@ -0,0 +1,8 @@
+---
+"generator-single-spa": major
+---
+
+- Breaking: Upgrade svelte to v5. Mount and unmount need to be passed to the `singleSpaSvelte` function.
+- Breaking: Rollup now outputs using the ESM format rather than the System format.
+- Breaking: Set `"type": "module"` in package.json to avoid performance overhead during rollup.
+- Replace jest with vitest to simplify test setup.

packages/generator-single-spa/src/svelte/generator-single-spa-svelte.js

@@ -113,13 +113,13 @@ module.exports = class SingleSpaSvelteGenerator extends PnpmGenerator {
       projectName: this.options.projectName,
     });
     this.fs.copyTpl(
-      this.templatePath(`jest.config.js`),
-      this.destinationPath(`jest.config.js`),
+      this.templatePath(`vite.config.mjs`),
+      this.destinationPath(`vite.config.mjs`),
       this.options
     );
     this.fs.copyTpl(
-      this.templatePath(`babel.config.js`),
-      this.destinationPath(`babel.config.js`),
+      this.templatePath(`setupTests.js`),
+      this.destinationPath(`setupTests.js`),
       this.options
     );
     this.fs.copyTpl(

packages/generator-single-spa/src/svelte/templates/rollup.config.js

@@ -2,22 +2,25 @@ import svelte from "rollup-plugin-svelte";
 import resolve from "@rollup/plugin-node-resolve";
 import commonjs from "@rollup/plugin-commonjs";
 import livereload from "rollup-plugin-livereload";
-import { terser } from "rollup-plugin-terser";
+import { minify } from "rollup-plugin-esbuild-minify";
+import { spawn } from "child_process";
 
 const production = !process.env.ROLLUP_WATCH;
 
 export default {
   input: "src/<%= orgName %>-<%= projectName %>.js",
   output: {
     sourcemap: true,
-    format: "system",
+    format: "esm",
     name: null, // ensure anonymous System.register
     file: "dist/<%= orgName %>-<%= projectName %>.js",
   },
   plugins: [
     svelte({
-      // enable run-time checks when not in production
-      dev: !production,
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
 
       emitCss: false,
     }),
@@ -43,7 +46,7 @@ export default {
 
     // If we're building for production (npm run build
     // instead of npm run dev), minify
-    production && terser(),
+    production && minify(),
   ],
   watch: {
     clearScreen: false,
@@ -58,7 +61,7 @@ function serve() {
       if (!started) {
         started = true;
 
-        require("child_process").spawn("npm", ["run", "serve", "--", "--dev"], {
+        spawn("npm", ["run", "serve", "--", "--dev"], {
           stdio: ["ignore", "inherit", "inherit"],
           shell: true,
         });

packages/generator-single-spa/src/svelte/templates/setupTests.js

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";

packages/generator-single-spa/src/svelte/templates/src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-  export let name;
+  let { name } = $props();
 </script>
 
 <style>

packages/generator-single-spa/src/svelte/templates/src/main.js

@@ -1,8 +1,11 @@
-import singleSpaSvelte from "single-spa-svelte";
+import singleSpaSvelte from "@single-spa/svelte";
+import { mount as originalMount, unmount as originalUnmount } from "svelte";
 import App from "./App.svelte";
 
 const svelteLifecycles = singleSpaSvelte({
   component: App,
+  mount: originalMount,
+  unmount: originalUnmount,
 });
 
 export const { bootstrap, mount, unmount } = svelteLifecycles;

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

@@ -1,36 +1,35 @@
 {
   "name": "<%= name %>",
+  "type": "module",
   "scripts": {
     "build": "concurrently <%- packageManager %>:build:*",
     "build:rollup": "rollup -c",
     "start": "rollup -c -w",
     "serve": "sirv dist -c",
-    "test": "jest",
+    "test": "vitest",
     "prepare": "husky install",
     "format": "prettier --write --plugin-search-dir=. .",
     "check-format": "prettier --plugin-search-dir=. --check ."
   },
   "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
-    "@rollup/plugin-commonjs": "^20.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.4",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/svelte": "^3.0.3",
-    "babel-jest": "^27.5.1",
-    "concurrently": "^6.2.1",
-    "jest": "^27.5.1",
-    "prettier": "^2.3.2",
-    "prettier-plugin-svelte": "^2.3.1",
-    "rollup": "^2.56.3",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/svelte": "^5.2.8",
+    "concurrently": "^9.2.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "rollup": "^4.44.1",
+    "rollup-plugin-esbuild-minify": "^1.3.0",
     "rollup-plugin-livereload": "^2.0.5",
-    "rollup-plugin-svelte": "^7.1.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "svelte": "^3.42.3",
-    "svelte-jester": "^2.0.0"
+    "rollup-plugin-svelte": "^7.2.2",
+    "vitest": "^3.2.4",
+    "jsdom": "^27.0.0"
   },
   "dependencies": {
-    "single-spa-svelte": "^2.1.1",
-    "sirv-cli": "^1.0.14"
+    "@single-spa/svelte": "^3.0.0-beta.0",
+    "sirv-cli": "^1.0.14",
+    "svelte": "^5.34.9"
   }
 }

packages/generator-single-spa/src/svelte/templates/vite.config.mjs

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()],
+  test: {
+    globals: true,
+    environment: "jsdom",
+    setupFiles: ["./setupTests.js"],
+  },
+  resolve: process.env.VITEST
+    ? {
+        conditions: ["browser"],
+      }
+    : undefined,
+});