Svelte 5

package.json

@@ -79,10 +79,11 @@
     "sass-loader": "^11.0.1",
     "semver": "^7.3.2",
     "style-loader": "^2.0.0",
-    "svelte": "^4.2.8",
-    "svelte-loader": "^3.1.9",
+    "svelte": "^5.17.4",
+    "svelte-loader": "^3.2.4",
     "svelte-preprocess": "^5.1.1",
     "tcp-ping-sync": "^1.0.0",
+    "ts-loader": "^9.5.1",
     "typescript": "^5.3.2",
     "update-notifier": "^6.0.2",
     "webpack": "^5.33.2",

src/config/webpack.js

@@ -45,14 +45,7 @@ const PROJECT_TYPES_CONFIG = {
    */
   svelte: config => {
     config.resolve = {
-      // Make sure that only one copy of the Svelte runtime is bundled in the app
-      alias: {
-        svelte: resolve('node_modules', 'svelte/src/runtime')
-      },
-      // Recognise .svelte files
       extensions: [...config.resolve.extensions, '.svelte'],
-      // When using Svelte components installed from npm, use the original component
-      // source code, rather than consuming the already-compiled version
       mainFields: ['svelte', 'browser', 'module', 'main'],
       conditionNames: ['svelte', 'browser', 'import']
     };
@@ -62,31 +55,62 @@ const PROJECT_TYPES_CONFIG = {
 
     include.push(/(node_modules\/svelte)/);
 
-    config.module.rules.push({
-      test: /\.svelte$/,
-      include,
-      use: [
+    // options from https://github.com/sveltejs/svelte-loader
+    config.module.rules.push(
+      ...[
         {
-          loader,
-          options
+          test: /\.svelte\.ts$/,
+          use: [
+            {
+              loader,
+              options
+            },
+            { loader: require.resolve('ts-loader'), options: { transpileOnly: true } },
+            {
+              loader: require.resolve('svelte-loader'),
+              options: {
+                dev: config.mode === 'development',
+                emitCss: extractCSS,
+                preprocess: sveltePreprocess()
+              }
+            }
+          ]
         },
         {
-          loader: require.resolve('svelte-loader'),
+          test: /(?<!\.svelte)\.ts$/,
+          loader: require.resolve('ts-loader'),
           options: {
-            dev: config.mode === 'development',
-            emitCss: extractCSS,
-            preprocess: sveltePreprocess()
+            transpileOnly: true // you should use svelte-check for type checking
+          }
+        },
+        {
+          // Svelte 5+:
+          test: /\.(svelte|svelte\.js)$/,
+          include,
+          use: [
+            {
+              loader,
+              options
+            },
+            {
+              loader: require.resolve('svelte-loader'),
+              options: {
+                dev: config.mode === 'development',
+                emitCss: extractCSS,
+                preprocess: sveltePreprocess()
+              }
+            }
+          ]
+        },
+        {
+          // required to prevent errors from Svelte on Webpack 5+, omit on Webpack 4
+          test: /node_modules\/svelte\/.*\.mjs$/,
+          resolve: {
+            fullySpecified: false
           }
         }
       ]
-    });
-    // Required to prevent errors from Svelte on Webpack 5+
-    config.module.rules.push({
-      test: /node_modules\/svelte\/.*\.mjs$/,
-      resolve: {
-        fullySpecified: false
-      }
-    });
+    );
 
     return config;
   }

src/generators/project/index.js

@@ -217,7 +217,7 @@ Shorthand examples (assuming xyz is your project name):
         break;
       case 'svelte':
         devDependencies.push('@testing-library/svelte');
-        dependencies.push('svelte@4');
+        dependencies.push('svelte@5');
         break;
       default:
         break;

src/generators/project/templates/preact/src/components/App/index.tsx

@@ -1,4 +1,4 @@
-import { h<% if (isTS) { %>, FunctionalComponent<% } %> } from 'preact';
+import { h<% if (isTS) { %>, type FunctionalComponent<% } %> } from 'preact';
 import Worm from '../Worm';
 import styles from './styles.scss';
 <% if (isTS) { %>

src/generators/project/templates/preact/src/components/ErrorBox/index.tsx

@@ -1,4 +1,4 @@
-import { h<% if (isTS) { %>, FunctionalComponent<% } %> } from 'preact';
+import { h<% if (isTS) { %>, type FunctionalComponent<% } %> } from 'preact';
 import { useEffect } from 'preact/hooks';
 import styles from './styles.scss';
 <% if (isTS) { %>

src/generators/project/templates/preact/src/components/Worm/index.tsx

@@ -1,4 +1,4 @@
-import { h<% if (isTS) { %>, FunctionalComponent<% } %> } from 'preact';
+import { h<% if (isTS) { %>, type FunctionalComponent<% } %> } from 'preact';
 import styles from './styles.scss';
 import worm from './worm.svg';
 

src/generators/project/templates/react/src/index.tsx

@@ -2,7 +2,7 @@ import acto from '@abcnews/alternating-case-to-object';
 import { <% if (isOdyssey) { %>whenOdysseyLoaded<% } else { %>whenDOMReady<% } %> } from '@abcnews/env-utils';
 import { getMountValue, selectMounts } from '@abcnews/mount-utils';
 import React from 'react';
-import { createRoot<% if (isTS) { %>, Root<% } %> } from 'react-dom/client';
+import { createRoot<% if (isTS) { %>, type Root<% } %> } from 'react-dom/client';
 import App from './components/App';<% if (isTS) { %>
 import type { AppProps } from './components/App';<% } %>
 

src/generators/project/templates/svelte/src/index.ts

@@ -3,6 +3,7 @@ import { <% if (isOdyssey) { %>whenOdysseyLoaded<% } else { %>whenDOMReady<% } %
 import { getMountValue, selectMounts } from '@abcnews/mount-utils';<% if (isTS) { %>
 import type { Mount } from '@abcnews/mount-utils';<% } %>
 import App from './components/App/App.svelte';
+import { mount } from 'svelte';
 
 let appMountEl<% if (isTS) { %>: Mount<% } %>;
 let appProps;
@@ -12,7 +13,8 @@ let appProps;
 
   if (appMountEl) {
     appProps = acto(getMountValue(appMountEl));
-    new App({
+
+    mount(App, {
       target: appMountEl,
       props: appProps
     });

ts/config.json

@@ -14,7 +14,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "allowSyntheticDefaultImports": true,
-    "verbatimModuleSyntax": false,
+    "verbatimModuleSyntax": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "strictNullChecks": true