Migrates container to Svelte v5

container/cypress/e2e/test-app/compound/create-dynamic-compound-container.cy.js

@@ -69,9 +69,10 @@ describe('create luigi-compound-container dynamically', () => {
                 }]
             };
             content.appendChild(wc);
-            </script>
-       `;
+        </script>
+    `;
     const stub = cy.stub();
+
     cy.on('window:alert', stub);
     cy.visit(tetsPage);
     cy.get('.content').invoke('append', scriptCode);
@@ -88,7 +89,8 @@ describe('create luigi-compound-container dynamically', () => {
           .get('luigi-wc-687474703a2f2f6c6f63616c686f73743a383038302f6173736574732f6d61696e2e6a73')
           .should('exist')
           .shadow()
-          .should('not.exist'); // ShadowRoot in 'closed' mode
+          .find('section')
+          .should('contain.text', 'This is a luigi micro frontend, based on web components.');
       });
   });
 
@@ -163,10 +165,10 @@ describe('create luigi-compound-container dynamically', () => {
             </script>
        `;
     const stub = cy.stub();
+
     cy.on('window:alert', stub);
     cy.visit(tetsPage);
     cy.get('.content').invoke('append', scriptCode);
-
     cy.get('luigi-compound-container').shadow().should('not.exist');
   });
 
@@ -241,6 +243,7 @@ describe('create luigi-compound-container dynamically', () => {
             </script>
        `;
     const stub = cy.stub();
+
     cy.on('window:alert', stub);
     cy.visit(tetsPage);
     cy.get('.content').invoke('append', scriptCode);

container/package.json

@@ -12,12 +12,12 @@
     "public"
   ],
   "scripts": {
-    "build": "npm run sync-event-typings && npm run generate-cem && rollup -c",
-    "buildWithCoverage": "npm run sync-event-typings && npm run generate-cem && rollup -c --environment COVERAGE",
+    "build": "npm run sync-event-typings && npm run generate-cem && rollup -c --bundleConfigAsCjs",
+    "buildWithCoverage": "npm run sync-event-typings && npm run generate-cem && rollup -c --bundleConfigAsCjs --environment COVERAGE",
     "test": "jest",
     "lint": "eslint src/**/*.*",
     "bundle": "npm run build",
-    "dev": "rollup -c -w",
+    "dev": "rollup -c -w --bundleConfigAsCjs",
     "copyBundle": "cp public/bundle.js public/bundle.js.map test-app/ && cp public/bundle.js public/bundle.js.map examples/ || COPY public\\* test-app\\",
     "copyLuigiClient": "cp ../client/public/luigi-client.js test-app/iframe",
     "copyLuigiElement": "cp ../client/src/luigi-element.js test-app/compound",
@@ -41,44 +41,44 @@
   },
   "devDependencies": {
     "@babel/node": "7.26.0",
-    "@babel/preset-env": "7.26.0",
+    "@babel/preset-env": "7.26.9",
     "@babel/preset-typescript": "7.26.0",
-    "@cypress/code-coverage": "^3.13.9",
+    "@cypress/code-coverage": "^3.13.12",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@rollup/plugin-commonjs": "28.0.0",
-    "@rollup/plugin-node-resolve": "15.3.0",
+    "@rollup/plugin-commonjs": "28.0.3",
+    "@rollup/plugin-node-resolve": "16.0.0",
     "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-typescript": "12.1.0",
-    "@stylistic/eslint-plugin": "^2.10.1",
-    "@tsconfig/svelte": "5.0.0",
-    "@types/jest": "^29.5.12",
-    "@typescript-eslint/eslint-plugin": "^8.13.0",
-    "@typescript-eslint/parser": "^8.13.0",
-    "@typescript-eslint/typescript-estree": "^8.13.0",
+    "@rollup/plugin-typescript": "12.1.2",
+    "@stylistic/eslint-plugin": "^2.12.1",
+    "@tsconfig/svelte": "5.0.4",
+    "@types/jest": "^29.5.14",
+    "@typescript-eslint/eslint-plugin": "^8.26.1",
+    "@typescript-eslint/parser": "^8.26.1",
+    "@typescript-eslint/typescript-estree": "^8.26.1",
     "chokidar-cli": "^3.0.0",
     "cli-color": "^2.0.4",
     "concurrently": "^7.6.0",
     "cypress": "^13.17.0",
-    "eslint": "^9.14.0",
-    "eslint-plugin-svelte": "^2.46.0",
+    "eslint": "^9.22.0",
+    "eslint-plugin-svelte": "^2.46.1",
     "file-system": "^2.2.2",
     "github-api": "^3.4.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "nyc": "^17.1.0",
-    "rollup": "2.79.2",
+    "rollup": "4.40.2",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-livereload": "2.0.5",
     "rollup-plugin-svelte": "7.2.2",
     "sirv-cli": "^2.0.0",
     "source-map-support": "^0.5.21",
-    "svelte": "4.2.19",
-    "svelte-check": "3.5.0",
-    "svelte-preprocess": "5.0.4",
+    "svelte": "^5.28.2",
+    "svelte-check": "^4.1.7",
+    "svelte-preprocess": "^6.0.3",
     "ts-node": "^10.9.2",
-    "tslib": "2.6.1",
-    "typescript": "5.1.6",
-    "typescript-eslint": "^8.13.0"
+    "tslib": "2.8.1",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.32.0"
   },
   "nyc": {
     "extends": "@istanbuljs/nyc-config-typescript",

container/rollup.config.js

@@ -1,20 +1,22 @@
-import svelte from 'rollup-plugin-svelte';
 import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
-import typescript from '@rollup/plugin-typescript';
-import livereload from 'rollup-plugin-livereload';
 import terser from '@rollup/plugin-terser';
-import autoPreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';
 import copy from 'rollup-plugin-copy';
+import livereload from 'rollup-plugin-livereload';
+import svelte from 'rollup-plugin-svelte';
+
+import svelteConfig from './svelte.config.js';
 
+const coverage = process.env.COVERAGE === 'true';
 const production = !process.env.ROLLUP_WATCH;
 let inputPath = 'src/main.ts';
 
 if (production) {
   console.log('Production BUILD');
 }
 
-if (process.env.COVERAGE === 'true') {
+if (coverage) {
   inputPath = 'instrumented/main.ts';
 }
 
@@ -28,6 +30,7 @@ function serve() {
   return {
     writeBundle() {
       if (server) return;
+
       server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
         stdio: ['ignore', 'inherit', 'inherit'],
         shell: true
@@ -48,19 +51,12 @@ export default [
       file: 'public/bundle.js'
     },
     plugins: [
-      svelte({
-        compilerOptions: {
-          customElement: true,
-          // enable run-time checks when not in production
-          dev: !production
-        },
-        preprocess: autoPreprocess({
-          sourceMap: true
-        })
-      }),
+      svelte(svelteConfig),
       typescript({
-        sourceMap: true,
-        inlineSources: true
+        compilerOptions: { noEmitOnError: !coverage },
+        exclude: !coverage ? 'instrumented/**/*' : null,
+        inlineSources: true,
+        sourceMap: true
       }),
       copy({
         targets: [{ src: 'typings/**/*', dest: 'public' }],
@@ -72,11 +68,13 @@ export default [
           resolveDynamicImport(specifier, importer) {
             const moduleInfo = this.getModuleInfo(importer);
             let index;
+
             for (index = specifier.start; index >= 0; index--) {
               if (moduleInfo.code.charAt(index) === '(') {
                 break;
               }
             }
+
             if (
               moduleInfo.code
                 .substr(index, specifier.end - index)
@@ -88,6 +86,7 @@ export default [
                 moduleInfo.code.substr(specifier.start, specifier.end - specifier.start)
               );
             }
+
             return null;
           },
           renderDynamicImport({ customResolution }) {
@@ -97,6 +96,7 @@ export default [
                 right: ')'
               };
             }
+
             return null;
           }
         };