feat(create-rsbuild): support for both svelte4 and svelte5 (#3771)

examples/svelte/package.json → examples/svelte4/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@examples/svelte",
+  "name": "@examples/svelte4",
   "private": true,
   "scripts": {
     "dev": "rsbuild dev --open",

examples/svelte/rsbuild.config.ts → examples/svelte4/rsbuild.config.ts

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

examples/svelte5/package.json

@@ -7,7 +7,7 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
-    "svelte": "^5.0.2"
+    "svelte": "^5.0.3"
   },
   "devDependencies": {
     "@rsbuild/core": "workspace:*",

examples/svelte5/rsbuild.config.ts

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

packages/create-rsbuild/src/index.ts

@@ -34,7 +34,8 @@ async function getTemplateName({ template }: Argv) {
         { value: 'vue2', label: 'Vue 2' },
         { value: 'lit', label: 'Lit' },
         { value: 'preact', label: 'Preact' },
-        { value: 'svelte', label: 'Svelte' },
+        { value: 'svelte', label: 'Svelte 5' },
+        { value: 'svelte4', label: 'Svelte 4' },
         { value: 'solid', label: 'Solid' },
       ],
     }),

packages/create-rsbuild/template-svelte-js/package.json

@@ -8,7 +8,7 @@
     "preview": "rsbuild preview"
   },
   "dependencies": {
-    "svelte": "^4.2.19"
+    "svelte": "^5.0.3"
   },
   "devDependencies": {
     "@rsbuild/core": "^1.0.13",

packages/create-rsbuild/template-svelte-js/src/index.js

@@ -1,8 +1,12 @@
+import { mount } from 'svelte';
 import App from './App.svelte';
 import './index.css';
 
-const app = new App({
+const app = mount(App, {
   target: document.body,
+  props: {
+    name: 'world',
+  },
 });
 
 export default app;

packages/create-rsbuild/template-svelte-ts/package.json

@@ -9,7 +9,7 @@
     "svelte-check": "svelte-check --tsconfig ./tsconfig.json"
   },
   "dependencies": {
-    "svelte": "^4.2.19"
+    "svelte": "^5.0.3"
   },
   "devDependencies": {
     "@rsbuild/core": "^1.0.13",

packages/create-rsbuild/template-svelte-ts/src/index.ts

@@ -1,8 +1,12 @@
+import { mount } from 'svelte';
 import App from './App.svelte';
 import './index.css';
 
-const app = new App({
+const app = mount(App, {
   target: document.body,
+  props: {
+    name: 'world',
+  },
 });
 
 export default app;

packages/create-rsbuild/template-svelte4-js/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "rsbuild-svelte4-js",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "svelte": "^4.2.19"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.0.13",
+    "@rsbuild/plugin-svelte": "^1.0.1"
+  }
+}

packages/create-rsbuild/template-svelte4-js/rsbuild.config.mjs

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

packages/create-rsbuild/template-svelte4-js/src/App.svelte

@@ -0,0 +1,28 @@
+<main>
+  <div class="content">
+    <h1>Rsbuild with Svelte</h1>
+    <p>Start building amazing things with Rsbuild.</p>
+  </div>
+</main>
+
+<style>
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}
+</style>

packages/create-rsbuild/template-svelte4-js/src/index.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}

packages/create-rsbuild/template-svelte4-js/src/index.js

@@ -0,0 +1,8 @@
+import App from './App.svelte';
+import './index.css';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

packages/create-rsbuild/template-svelte4-ts/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "rsbuild-svelte4-ts",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev --open",
+    "build": "rsbuild build",
+    "preview": "rsbuild preview",
+    "svelte-check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "dependencies": {
+    "svelte": "^4.2.19"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "^1.0.13",
+    "@rsbuild/plugin-svelte": "^1.0.1",
+    "svelte-check": "^4.0.5",
+    "typescript": "^5.6.3"
+  }
+}

packages/create-rsbuild/template-svelte4-ts/rsbuild.config.ts

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

packages/create-rsbuild/template-svelte4-ts/src/App.svelte

@@ -0,0 +1,28 @@
+<main>
+  <div class="content">
+    <h1>Rsbuild with Svelte</h1>
+    <p>Start building amazing things with Rsbuild.</p>
+  </div>
+</main>
+
+<style>
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}
+</style>

packages/create-rsbuild/template-svelte4-ts/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@rsbuild/core/types" />
+/// <reference types="svelte" />

packages/create-rsbuild/template-svelte4-ts/src/index.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}

packages/create-rsbuild/template-svelte4-ts/src/index.ts

@@ -0,0 +1,8 @@
+import App from './App.svelte';
+import './index.css';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

packages/create-rsbuild/template-svelte4-ts/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "noEmit": true,
+    "strict": true,
+    "skipLibCheck": true,
+    // svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
+    // to enforce using `import type` instead of `import` for Types.
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+    "allowImportingTsExtensions": true
+  },
+  "include": ["src"]
+}

website/docs/en/guide/start/quick-start.mdx

@@ -56,7 +56,8 @@ When creating a project, you can choose from the following templates provided by
 | vue2     | [Vue 2](https://v2.vuejs.org/)  | TypeScript        |
 | lit      | [Lit](https://lit.dev/)         | TypeScript        |
 | preact   | [Preact](https://preactjs.com/) | TypeScript        |
-| svelte   | [Svelte](https://svelte.dev/)   | TypeScript        |
+| svelte   | [Svelte 5](https://svelte.dev/) | TypeScript        |
+| svelte4  | [Svelte 4](https://svelte.dev/) | TypeScript        |
 | solid    | [Solid](https://solidjs.com/)   | TypeScript        |
 
 ### Optional Tools

website/docs/zh/guide/start/quick-start.mdx

@@ -61,7 +61,8 @@ import { PackageManagerTabs } from '@theme';
 | vue2    | [Vue 2](https://v2.vuejs.org/)  | TypeScript |
 | lit     | [Lit](https://lit.dev/)         | TypeScript |
 | preact  | [Preact](https://preactjs.com/) | TypeScript |
-| svelte  | [Svelte](https://svelte.dev/)   | TypeScript |
+| svelte  | [Svelte 5](https://svelte.dev/) | TypeScript |
+| svelte4 | [Svelte 4](https://svelte.dev/) | TypeScript |
 | solid   | [Solid](https://solidjs.com/)   | TypeScript |
 
 ### 可选工具