diff --git a/examples/svelte/package.json b/examples/svelte4/package.json similarity index 90% rename from examples/svelte/package.json rename to examples/svelte4/package.json index 52ec7442fe..9866e556ea 100644 --- a/examples/svelte/package.json +++ b/examples/svelte4/package.json @@ -1,5 +1,5 @@ { - "name": "@examples/svelte", + "name": "@examples/svelte4", "private": true, "scripts": { "dev": "rsbuild dev --open", diff --git a/examples/svelte/rsbuild.config.ts b/examples/svelte4/rsbuild.config.ts similarity index 81% rename from examples/svelte/rsbuild.config.ts rename to examples/svelte4/rsbuild.config.ts index 669bfdc375..47bc5c725c 100644 --- a/examples/svelte/rsbuild.config.ts +++ b/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()], }); diff --git a/examples/svelte/src/App.svelte b/examples/svelte4/src/App.svelte similarity index 100% rename from examples/svelte/src/App.svelte rename to examples/svelte4/src/App.svelte diff --git a/examples/svelte/src/index.css b/examples/svelte4/src/index.css similarity index 100% rename from examples/svelte/src/index.css rename to examples/svelte4/src/index.css diff --git a/examples/svelte/src/index.js b/examples/svelte4/src/index.js similarity index 100% rename from examples/svelte/src/index.js rename to examples/svelte4/src/index.js diff --git a/examples/svelte5/package.json b/examples/svelte5/package.json index be33f0b3d5..cc499f37e9 100644 --- a/examples/svelte5/package.json +++ b/examples/svelte5/package.json @@ -7,7 +7,7 @@ "preview": "rsbuild preview" }, "dependencies": { - "svelte": "^5.0.2" + "svelte": "^5.0.3" }, "devDependencies": { "@rsbuild/core": "workspace:*", diff --git a/examples/svelte5/rsbuild.config.ts b/examples/svelte5/rsbuild.config.ts index 669bfdc375..47bc5c725c 100644 --- a/examples/svelte5/rsbuild.config.ts +++ b/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()], }); diff --git a/packages/create-rsbuild/src/index.ts b/packages/create-rsbuild/src/index.ts index 2d08abd164..23fce07f6c 100644 --- a/packages/create-rsbuild/src/index.ts +++ b/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' }, ], }), diff --git a/packages/create-rsbuild/template-svelte-js/package.json b/packages/create-rsbuild/template-svelte-js/package.json index c17418c23e..c7aec609bc 100644 --- a/packages/create-rsbuild/template-svelte-js/package.json +++ b/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", diff --git a/packages/create-rsbuild/template-svelte-js/src/index.js b/packages/create-rsbuild/template-svelte-js/src/index.js index a531338e7f..9aa7050e99 100644 --- a/packages/create-rsbuild/template-svelte-js/src/index.js +++ b/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; diff --git a/packages/create-rsbuild/template-svelte-ts/package.json b/packages/create-rsbuild/template-svelte-ts/package.json index 4ee1a37d0d..5123e47452 100644 --- a/packages/create-rsbuild/template-svelte-ts/package.json +++ b/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", diff --git a/packages/create-rsbuild/template-svelte-ts/src/index.ts b/packages/create-rsbuild/template-svelte-ts/src/index.ts index a531338e7f..9aa7050e99 100644 --- a/packages/create-rsbuild/template-svelte-ts/src/index.ts +++ b/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; diff --git a/packages/create-rsbuild/template-svelte4-js/package.json b/packages/create-rsbuild/template-svelte4-js/package.json new file mode 100644 index 0000000000..a888684fa2 --- /dev/null +++ b/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" + } +} diff --git a/packages/create-rsbuild/template-svelte4-js/rsbuild.config.mjs b/packages/create-rsbuild/template-svelte4-js/rsbuild.config.mjs new file mode 100644 index 0000000000..47bc5c725c --- /dev/null +++ b/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()], +}); diff --git a/packages/create-rsbuild/template-svelte4-js/src/App.svelte b/packages/create-rsbuild/template-svelte4-js/src/App.svelte new file mode 100644 index 0000000000..758d2c71fb --- /dev/null +++ b/packages/create-rsbuild/template-svelte4-js/src/App.svelte @@ -0,0 +1,28 @@ +
+
+

Rsbuild with Svelte

+

Start building amazing things with Rsbuild.

+
+
+ + diff --git a/packages/create-rsbuild/template-svelte4-js/src/index.css b/packages/create-rsbuild/template-svelte4-js/src/index.css new file mode 100644 index 0000000000..85e7e2b4f2 --- /dev/null +++ b/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); +} diff --git a/packages/create-rsbuild/template-svelte4-js/src/index.js b/packages/create-rsbuild/template-svelte4-js/src/index.js new file mode 100644 index 0000000000..a531338e7f --- /dev/null +++ b/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; diff --git a/packages/create-rsbuild/template-svelte4-ts/package.json b/packages/create-rsbuild/template-svelte4-ts/package.json new file mode 100644 index 0000000000..9db6d916e6 --- /dev/null +++ b/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" + } +} diff --git a/packages/create-rsbuild/template-svelte4-ts/rsbuild.config.ts b/packages/create-rsbuild/template-svelte4-ts/rsbuild.config.ts new file mode 100644 index 0000000000..47bc5c725c --- /dev/null +++ b/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()], +}); diff --git a/packages/create-rsbuild/template-svelte4-ts/src/App.svelte b/packages/create-rsbuild/template-svelte4-ts/src/App.svelte new file mode 100644 index 0000000000..758d2c71fb --- /dev/null +++ b/packages/create-rsbuild/template-svelte4-ts/src/App.svelte @@ -0,0 +1,28 @@ +
+
+

Rsbuild with Svelte

+

Start building amazing things with Rsbuild.

+
+
+ + diff --git a/packages/create-rsbuild/template-svelte4-ts/src/env.d.ts b/packages/create-rsbuild/template-svelte4-ts/src/env.d.ts new file mode 100644 index 0000000000..796a3f691e --- /dev/null +++ b/packages/create-rsbuild/template-svelte4-ts/src/env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/packages/create-rsbuild/template-svelte4-ts/src/index.css b/packages/create-rsbuild/template-svelte4-ts/src/index.css new file mode 100644 index 0000000000..85e7e2b4f2 --- /dev/null +++ b/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); +} diff --git a/packages/create-rsbuild/template-svelte4-ts/src/index.ts b/packages/create-rsbuild/template-svelte4-ts/src/index.ts new file mode 100644 index 0000000000..a531338e7f --- /dev/null +++ b/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; diff --git a/packages/create-rsbuild/template-svelte4-ts/tsconfig.json b/packages/create-rsbuild/template-svelte4-ts/tsconfig.json new file mode 100644 index 0000000000..b79fe1d7cc --- /dev/null +++ b/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"] +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f0031d91cf..1fdc882d60 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -437,7 +437,7 @@ importers: specifier: workspace:* version: link:../../packages/plugin-solid - examples/svelte: + examples/svelte4: dependencies: svelte: specifier: ^4.2.19 @@ -453,7 +453,7 @@ importers: examples/svelte5: dependencies: svelte: - specifier: ^5.0.2 + specifier: ^5.0.3 version: 5.0.3 devDependencies: '@rsbuild/core': diff --git a/website/docs/en/guide/start/quick-start.mdx b/website/docs/en/guide/start/quick-start.mdx index eaa61ccb14..f1fc263c54 100644 --- a/website/docs/en/guide/start/quick-start.mdx +++ b/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 diff --git a/website/docs/zh/guide/start/quick-start.mdx b/website/docs/zh/guide/start/quick-start.mdx index 7e40d8e81f..4ca5757edf 100644 --- a/website/docs/zh/guide/start/quick-start.mdx +++ b/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 | ### 可选工具