create-rsbuild 1.0.3 → 1.0.4

package/dist/index.js

@@ -43,7 +43,11 @@ async function getTemplateName(param) {
             },
             {
                 value: 'svelte',
-                label: 'Svelte'
+                label: 'Svelte 5'
+            },
+            {
+                value: 'svelte4',
+                label: 'Svelte 4'
             },
             {
                 value: 'solid',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rsbuild",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Create a new Rsbuild project",
   "homepage": "https://rsbuild.dev",
   "repository": {

package/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",

package/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;

package/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",

package/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;

package/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"
+  }
+}

package/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()],
+});

package/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>

package/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);
+}

package/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;

package/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"
+  }
+}

package/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()],
+});

package/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>

package/template-svelte4-ts/src/env.d.ts

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

package/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);
+}

package/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;

package/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"]
+}