Svelte v5 Support (#236)

* Svelte v5 Support

examples/new-svelte/newtab/scripts.ts

@@ -1,7 +1,10 @@
+import * as svelte from 'svelte'
 import './styles.css'
 import App from './NewTabApp.svelte'
 
-const app = new App({
-  target: document.getElementById('app')!
+const container = document.getElementById('app')
+const app = svelte.mount(App, {
+  target: container as HTMLElement
 })
+
 export default app

examples/new-svelte/package.json

@@ -10,10 +10,10 @@
   },
   "license": "MIT",
   "dependencies": {
-    "svelte": "4.2.19"
+    "svelte": "5.15.0"
   },
   "devDependencies": {
-    "typescript": "5.3.3",
-    "@tsconfig/svelte": "5.0.4"
+    "@tsconfig/svelte": "5.0.4",
+    "typescript": "5.3.3"
   }
 }

programs/develop/webpack/dev-server.ts

@@ -85,9 +85,8 @@ export async function devServer(projectPath: string, devOptions: DevOptions) {
       'Access-Control-Allow-Origin': '*'
     },
     port: 'auto',
-    // WARN: Setting TRUE here causes the content_script
-    // entry of a react extension to be reloaded infinitely.
-    hot: 'only'
+
+    hot: true
   }
 
   const devServer = new WebpackDevServer(serverConfig, compiler)

programs/develop/webpack/plugin-js-frameworks/index.ts

@@ -28,7 +28,7 @@ export class JsFrameworksPlugin {
     const maybeInstallReact = await maybeUseReact(projectPath)
     const maybeInstallPreact = await maybeUsePreact(projectPath)
     const maybeInstallVue = await maybeUseVue(projectPath)
-    const maybeInstallSvelte = await maybeUseSvelte(projectPath)
+    const maybeInstallSvelte = await maybeUseSvelte(projectPath, mode as any)
 
     compiler.options.resolve.alias = {
       ...(maybeInstallBabel?.alias || {}),

programs/develop/webpack/plugin-js-frameworks/js-tools/svelte.ts

@@ -7,6 +7,7 @@
 
 import path from 'path'
 import fs from 'fs'
+import {sveltePreprocess} from 'svelte-preprocess'
 import * as messages from '../../lib/messages'
 import {installOptionalDependencies} from '../../lib/utils'
 import {JsFramework} from '../../webpack-types'
@@ -41,12 +42,11 @@ export function isUsingSvelte(projectPath: string) {
 }
 
 export async function maybeUseSvelte(
-  projectPath: string
+  projectPath: string,
+  mode: 'development' | 'production'
 ): Promise<JsFramework | undefined> {
   if (!isUsingSvelte(projectPath)) return undefined
 
-  const isDev = process.env.NODE_ENV !== 'production'
-
   try {
     require.resolve('svelte-loader')
   } catch (e) {
@@ -58,24 +58,40 @@ export async function maybeUseSvelte(
 
     await installOptionalDependencies('Svelte', svelteDependencies)
 
-    // The compiler will exit after installing the dependencies
-    // as it can't read the new dependencies without a restart.
     console.log(messages.youAreAllSet('Svelte'))
     process.exit(0)
   }
 
   const svelteLoaders: JsFramework['loaders'] = [
     {
-      test: /\.svelte$/,
-      loader: require.resolve('svelte-loader'),
+      test: /\.svelte\.ts$/,
+      use: [require.resolve('svelte-loader')],
+      include: projectPath,
+      exclude: /node_modules/
+    },
+    {
+      test: /\.(svelte|svelte\.js)$/,
+      use: {
+        loader: require.resolve('svelte-loader'),
+        options: {
+          preprocess: sveltePreprocess({
+            typescript: true,
+            postcss: true
+          }),
+          emitCss: true,
+          compilerOptions: {
+            dev: mode === 'development',
+          }
+        }
+      },
       include: projectPath,
-      exclude: /node_modules/,
-      options: {
-        compilerOptions: {
-          dev: isDev
-        },
-        hotReload: isDev,
-        preprocess: require('svelte-preprocess')()
+      exclude: /node_modules/
+    },
+    {
+      // Required to prevent errors from Svelte on Webpack 5+
+      test: /node_modules\/svelte\/.*\.mjs$/,
+      resolve: {
+        fullySpecified: false
       }
     }
   ]

programs/develop/webpack/webpack-config.ts

@@ -84,10 +84,7 @@ export default function webpackConfig(
         '.tsx',
         '.json',
         '.wasm',
-        '.less',
-        '.css',
-        '.sass',
-        '.scss'
+        '.svelte'
       ]
     },
     watchOptions: {