fix(plugin-svelte): failed to compile *.svslte.ts

e2e/cases/svelte/index.test.ts

@@ -38,21 +38,6 @@ rspackOnlyTest(
   },
 );
 
-rspackOnlyTest(
-  'should build svelte component with typescript',
-  async ({ page }) => {
-    const rsbuild = await buildFixture('ts', 'src/index.ts');
-
-    await gotoPage(page, rsbuild);
-
-    const title = page.locator('#title');
-
-    await expect(title).toHaveText('Hello world!');
-
-    rsbuild.close();
-  },
-);
-
 // test cases for CSS preprocessors
 for (const name of ['less', 'scss', 'stylus']) {
   rspackOnlyTest(

e2e/cases/svelte/ts/index.test.ts

@@ -0,0 +1,22 @@
+import { build, gotoPage, rspackOnlyTest } from '@e2e/helper';
+import { expect } from '@playwright/test';
+
+rspackOnlyTest(
+  'should build svelte component with typescript',
+  async ({ page }) => {
+    const rsbuild = await build({
+      cwd: __dirname,
+      page,
+    });
+
+    await gotoPage(page, rsbuild);
+
+    const title = page.locator('#title');
+    await expect(title).toHaveText('Hello world!');
+
+    const count = page.locator('#count');
+    await expect(count).toHaveText('Count: 2');
+
+    rsbuild.close();
+  },
+);

e2e/cases/svelte/ts/rsbuild.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginSvelte } from '@rsbuild/plugin-svelte';
+
+export default defineConfig({
+  plugins: [pluginSvelte()],
+});

e2e/cases/svelte/ts/src/App.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
+  import { getCount } from './count.svelte';
   export let name: string;
 </script>
 
 <main>
   <h1 id="title">Hello {name}!</h1>
+  <p id="count" >Count: {getCount()}</p>
 </main>
 
 <style>

e2e/cases/svelte/ts/src/count.svelte.ts

@@ -0,0 +1,6 @@
+export function getCount() {
+  let count: number = $state(0);
+  count++;
+  count++;
+  return count;
+}

e2e/cases/svelte/ts/src/index.ts

@@ -4,7 +4,7 @@ import App from './App.svelte';
 const app = mount(App, {
   target: document.body,
   props: {
-    name: 'world' as const,
+    name: 'world',
   },
 });
 

packages/plugin-svelte/src/index.ts

@@ -119,10 +119,25 @@ export function pluginSvelte(options: PluginSvelteOptions = {}): RsbuildPlugin {
 
           chain.module
             .rule(CHAIN_ID.RULE.SVELTE)
-            .test(svelte5 ? /\.(?:svelte|svelte\.js|svelte\.ts)$/ : /\.svelte$/)
+            .test(/\.svelte$/)
             .use(CHAIN_ID.USE.SVELTE)
             .loader(loaderPath)
             .options(svelteLoaderOptions);
+
+          const jsRule = chain.module.rules.get(CHAIN_ID.RULE.JS);
+          if (svelte5 && jsRule) {
+            const swcUse = jsRule.uses.get(CHAIN_ID.USE.SWC);
+            chain.module
+              .rule('svelte-js')
+              .test(/\.(?:svelte\.js|svelte\.ts)$/)
+              .use(CHAIN_ID.USE.SVELTE)
+              .loader(loaderPath)
+              .options(svelteLoaderOptions)
+              .end()
+              .use(CHAIN_ID.USE.SWC)
+              .loader(swcUse.get('loader'))
+              .options(swcUse.get('options'));
+          }
         },
       );
     },

packages/plugin-svelte/tests/__snapshots__/index.test.ts.snap

@@ -5,7 +5,7 @@ exports[`plugin-svelte > should add svelte loader properly 1`] = `
   "module": {
     "rules": [
       {
-        "test": /\\\\\\.\\(\\?:svelte\\|svelte\\\\\\.js\\|svelte\\\\\\.ts\\)\\$/,
+        "test": /\\\\\\.svelte\\$/,
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/svelte-loader/index.js",
@@ -55,7 +55,7 @@ exports[`plugin-svelte > should override default svelte-loader options throw opt
   "module": {
     "rules": [
       {
-        "test": /\\\\\\.\\(\\?:svelte\\|svelte\\\\\\.js\\|svelte\\\\\\.ts\\)\\$/,
+        "test": /\\\\\\.svelte\\$/,
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/svelte-loader/index.js",
@@ -101,7 +101,7 @@ exports[`plugin-svelte > should set dev and hotReload to false in production mod
   "module": {
     "rules": [
       {
-        "test": /\\\\\\.\\(\\?:svelte\\|svelte\\\\\\.js\\|svelte\\\\\\.ts\\)\\$/,
+        "test": /\\\\\\.svelte\\$/,
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/svelte-loader/index.js",
@@ -151,7 +151,7 @@ exports[`plugin-svelte > should support pass custom preprocess options 1`] = `
   "module": {
     "rules": [
       {
-        "test": /\\\\\\.\\(\\?:svelte\\|svelte\\\\\\.js\\|svelte\\\\\\.ts\\)\\$/,
+        "test": /\\\\\\.svelte\\$/,
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/svelte-loader/index.js",
@@ -201,7 +201,7 @@ exports[`plugin-svelte > should turn off HMR by hand correctly 1`] = `
   "module": {
     "rules": [
       {
-        "test": /\\\\\\.\\(\\?:svelte\\|svelte\\\\\\.js\\|svelte\\\\\\.ts\\)\\$/,
+        "test": /\\\\\\.svelte\\$/,
         "use": [
           {
             "loader": "<ROOT>/node_modules/<PNPM_INNER>/svelte-loader/index.js",