From 2f6d8829cfb4f512ae1dc3e7c6a85d8a34a25130 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 8 Aug 2026 22:00:59 +0800 Subject: [PATCH] feat(create-rstack): add Svelte app templates --- packages/create-rstack/README.md | 2 + packages/create-rstack/src/index.ts | 3 ++ .../template-app-svelte-js/AGENTS.md | 15 ++++++++ .../template-app-svelte-js/package.json | 25 +++++++++++++ .../pnpm-workspace.yaml | 2 + .../template-app-svelte-js/rstack.config.js | 21 +++++++++++ .../template-app-svelte-js/src/App.svelte | 28 ++++++++++++++ .../template-app-svelte-js/src/index.css | 6 +++ .../template-app-svelte-js/src/index.js | 8 ++++ .../tests/index.test.js | 8 ++++ .../tests/rstest.setup.js | 4 ++ .../template-app-svelte-ts/AGENTS.md | 15 ++++++++ .../template-app-svelte-ts/package.json | 28 ++++++++++++++ .../pnpm-workspace.yaml | 2 + .../template-app-svelte-ts/rstack.config.ts | 20 ++++++++++ .../template-app-svelte-ts/src/App.svelte | 37 +++++++++++++++++++ .../template-app-svelte-ts/src/index.css | 6 +++ .../template-app-svelte-ts/src/index.ts | 14 +++++++ .../tests/index.test.ts | 11 ++++++ .../tests/rstest.setup.ts | 4 ++ .../tests/tsconfig.json | 7 ++++ .../template-app-svelte-ts/tsconfig.json | 22 +++++++++++ packages/create-rstack/tests/create.test.ts | 14 +++++++ 23 files changed, 302 insertions(+) create mode 100644 packages/create-rstack/template-app-svelte-js/AGENTS.md create mode 100644 packages/create-rstack/template-app-svelte-js/package.json create mode 100644 packages/create-rstack/template-app-svelte-js/pnpm-workspace.yaml create mode 100644 packages/create-rstack/template-app-svelte-js/rstack.config.js create mode 100644 packages/create-rstack/template-app-svelte-js/src/App.svelte create mode 100644 packages/create-rstack/template-app-svelte-js/src/index.css create mode 100644 packages/create-rstack/template-app-svelte-js/src/index.js create mode 100644 packages/create-rstack/template-app-svelte-js/tests/index.test.js create mode 100644 packages/create-rstack/template-app-svelte-js/tests/rstest.setup.js create mode 100644 packages/create-rstack/template-app-svelte-ts/AGENTS.md create mode 100644 packages/create-rstack/template-app-svelte-ts/package.json create mode 100644 packages/create-rstack/template-app-svelte-ts/pnpm-workspace.yaml create mode 100644 packages/create-rstack/template-app-svelte-ts/rstack.config.ts create mode 100644 packages/create-rstack/template-app-svelte-ts/src/App.svelte create mode 100644 packages/create-rstack/template-app-svelte-ts/src/index.css create mode 100644 packages/create-rstack/template-app-svelte-ts/src/index.ts create mode 100644 packages/create-rstack/template-app-svelte-ts/tests/index.test.ts create mode 100644 packages/create-rstack/template-app-svelte-ts/tests/rstest.setup.ts create mode 100644 packages/create-rstack/template-app-svelte-ts/tests/tsconfig.json create mode 100644 packages/create-rstack/template-app-svelte-ts/tsconfig.json diff --git a/packages/create-rstack/README.md b/packages/create-rstack/README.md index a3b245b2..08d9d8de 100644 --- a/packages/create-rstack/README.md +++ b/packages/create-rstack/README.md @@ -27,6 +27,8 @@ npx create-rstack -d my-project -t app-vanilla-ts - `app-react-ts` - TypeScript React application - `app-vue-js` - JavaScript Vue application - `app-vue-ts` - TypeScript Vue application +- `app-svelte-js` - JavaScript Svelte application +- `app-svelte-ts` - TypeScript Svelte application - `app-solid-js` - JavaScript Solid application - `app-solid-ts` - TypeScript Solid application - `lib-node-js` - JavaScript Node.js library diff --git a/packages/create-rstack/src/index.ts b/packages/create-rstack/src/index.ts index d57d370a..d2b0d978 100644 --- a/packages/create-rstack/src/index.ts +++ b/packages/create-rstack/src/index.ts @@ -75,6 +75,7 @@ const getTemplateName = async ({ template }: Argv): Promise => { { value: 'vanilla', label: 'Vanilla' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, + { value: 'svelte', label: 'Svelte' }, { value: 'solid', label: 'Solid' }, ] : [ @@ -109,6 +110,8 @@ await create({ 'app-react-ts', 'app-vue-js', 'app-vue-ts', + 'app-svelte-js', + 'app-svelte-ts', 'app-solid-js', 'app-solid-ts', 'lib-node-js', diff --git a/packages/create-rstack/template-app-svelte-js/AGENTS.md b/packages/create-rstack/template-app-svelte-js/AGENTS.md new file mode 100644 index 00000000..1de123b2 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-js/AGENTS.md @@ -0,0 +1,15 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run dev` - Start the development server +- `{{ packageManager }} run build` - Build the app for production +- `{{ packageManager }} run preview` - Preview the production build locally +- `{{ packageManager }} run test` - Run tests +- `{{ packageManager }} run test:watch` - Run tests in watch mode + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt +- Rstest: https://rstest.rs/llms.txt diff --git a/packages/create-rstack/template-app-svelte-js/package.json b/packages/create-rstack/template-app-svelte-js/package.json new file mode 100644 index 00000000..177c983d --- /dev/null +++ b/packages/create-rstack/template-app-svelte-js/package.json @@ -0,0 +1,25 @@ +{ + "name": "rstack-app-svelte-js", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "build": "rs build", + "dev": "rs dev", + "format": "rs fmt", + "lint": "rs lint", + "preview": "rs preview", + "test": "rs test", + "test:watch": "rs test --watch" + }, + "dependencies": { + "svelte": "^5.56.8" + }, + "devDependencies": { + "@rsbuild/plugin-svelte": "^2.0.1", + "@testing-library/jest-dom": "^7.0.0", + "@testing-library/svelte": "^5.4.2", + "happy-dom": "^20.11.1", + "rstack": "^0.3.5" + } +} diff --git a/packages/create-rstack/template-app-svelte-js/pnpm-workspace.yaml b/packages/create-rstack/template-app-svelte-js/pnpm-workspace.yaml new file mode 100644 index 00000000..3c064313 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-js/pnpm-workspace.yaml @@ -0,0 +1,2 @@ +allowBuilds: + svelte-preprocess: false diff --git a/packages/create-rstack/template-app-svelte-js/rstack.config.js b/packages/create-rstack/template-app-svelte-js/rstack.config.js new file mode 100644 index 00000000..df0fda3a --- /dev/null +++ b/packages/create-rstack/template-app-svelte-js/rstack.config.js @@ -0,0 +1,21 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app(async () => { + const { pluginSvelte } = await import('@rsbuild/plugin-svelte'); + + return { + plugins: [pluginSvelte()], + }; +}); + +define.test({ + setupFiles: ['./tests/rstest.setup.js'], +}); + +define.lint(async () => { + const { js } = await import('rstack/lint'); + + return [js.configs.recommended]; +}); diff --git a/packages/create-rstack/template-app-svelte-js/src/App.svelte b/packages/create-rstack/template-app-svelte-js/src/App.svelte new file mode 100644 index 00000000..0c6b2937 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-js/src/App.svelte @@ -0,0 +1,28 @@ +
+
+

Rstack with Svelte

+

Start building amazing things with Rstack.

+
+
+ + diff --git a/packages/create-rstack/template-app-svelte-js/src/index.css b/packages/create-rstack/template-app-svelte-js/src/index.css new file mode 100644 index 00000000..85e7e2b4 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-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-rstack/template-app-svelte-js/src/index.js b/packages/create-rstack/template-app-svelte-js/src/index.js new file mode 100644 index 00000000..b8cf0263 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-js/src/index.js @@ -0,0 +1,8 @@ +import { mount } from 'svelte'; +import App from './App.svelte'; +import './index.css'; + +const root = document.getElementById('root'); +if (root) { + mount(App, { target: root }); +} diff --git a/packages/create-rstack/template-app-svelte-js/tests/index.test.js b/packages/create-rstack/template-app-svelte-js/tests/index.test.js new file mode 100644 index 00000000..067c6161 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-js/tests/index.test.js @@ -0,0 +1,8 @@ +import { render, screen } from '@testing-library/svelte'; +import { expect, test } from 'rstack/test'; +import App from '../src/App.svelte'; + +test('renders the main page', () => { + render(App); + expect(screen.getByText('Rstack with Svelte')).toBeInTheDocument(); +}); diff --git a/packages/create-rstack/template-app-svelte-js/tests/rstest.setup.js b/packages/create-rstack/template-app-svelte-js/tests/rstest.setup.js new file mode 100644 index 00000000..93951b15 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-js/tests/rstest.setup.js @@ -0,0 +1,4 @@ +import { expect } from 'rstack/test'; +import * as jestDomMatchers from '@testing-library/jest-dom/matchers'; + +expect.extend(jestDomMatchers); diff --git a/packages/create-rstack/template-app-svelte-ts/AGENTS.md b/packages/create-rstack/template-app-svelte-ts/AGENTS.md new file mode 100644 index 00000000..1de123b2 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/AGENTS.md @@ -0,0 +1,15 @@ +# AGENTS.md + +## Commands + +- `{{ packageManager }} run dev` - Start the development server +- `{{ packageManager }} run build` - Build the app for production +- `{{ packageManager }} run preview` - Preview the production build locally +- `{{ packageManager }} run test` - Run tests +- `{{ packageManager }} run test:watch` - Run tests in watch mode + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt +- Rstest: https://rstest.rs/llms.txt diff --git a/packages/create-rstack/template-app-svelte-ts/package.json b/packages/create-rstack/template-app-svelte-ts/package.json new file mode 100644 index 00000000..ab6fae50 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/package.json @@ -0,0 +1,28 @@ +{ + "name": "rstack-app-svelte-ts", + "version": "1.0.0", + "private": true, + "type": "module", + "scripts": { + "build": "svelte-check && rs build", + "dev": "rs dev", + "format": "rs fmt", + "lint": "rs lint", + "preview": "rs preview", + "test": "rs test", + "test:watch": "rs test --watch" + }, + "dependencies": { + "svelte": "^5.56.8" + }, + "devDependencies": { + "@rsbuild/plugin-svelte": "^2.0.1", + "@testing-library/jest-dom": "^7.0.0", + "@testing-library/svelte": "^5.4.2", + "@types/node": "^24.13.3", + "happy-dom": "^20.11.1", + "rstack": "^0.3.5", + "svelte-check": "^4.7.4", + "typescript": "^6.0.3" + } +} diff --git a/packages/create-rstack/template-app-svelte-ts/pnpm-workspace.yaml b/packages/create-rstack/template-app-svelte-ts/pnpm-workspace.yaml new file mode 100644 index 00000000..3c064313 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/pnpm-workspace.yaml @@ -0,0 +1,2 @@ +allowBuilds: + svelte-preprocess: false diff --git a/packages/create-rstack/template-app-svelte-ts/rstack.config.ts b/packages/create-rstack/template-app-svelte-ts/rstack.config.ts new file mode 100644 index 00000000..b4f61075 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/rstack.config.ts @@ -0,0 +1,20 @@ +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app(async () => { + const { pluginSvelte } = await import('@rsbuild/plugin-svelte'); + + return { + plugins: [pluginSvelte()], + }; +}); + +define.test({ + setupFiles: ['./tests/rstest.setup.ts'], +}); + +define.lint(async () => { + const { js, ts } = await import('rstack/lint'); + + return [js.configs.recommended, ts.configs.recommended]; +}); diff --git a/packages/create-rstack/template-app-svelte-ts/src/App.svelte b/packages/create-rstack/template-app-svelte-ts/src/App.svelte new file mode 100644 index 00000000..5c147cf2 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/src/App.svelte @@ -0,0 +1,37 @@ + + +
+
+

{tool} with {framework}

+

Start building amazing things with Rstack.

+
+
+ + diff --git a/packages/create-rstack/template-app-svelte-ts/src/index.css b/packages/create-rstack/template-app-svelte-ts/src/index.css new file mode 100644 index 00000000..85e7e2b4 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-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-rstack/template-app-svelte-ts/src/index.ts b/packages/create-rstack/template-app-svelte-ts/src/index.ts new file mode 100644 index 00000000..0dc0b8b9 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/src/index.ts @@ -0,0 +1,14 @@ +import { mount } from 'svelte'; +import App from './App.svelte'; +import './index.css'; + +const root = document.getElementById('root'); +if (root) { + mount(App, { + target: root, + props: { + tool: 'Rstack', + framework: 'Svelte', + }, + }); +} diff --git a/packages/create-rstack/template-app-svelte-ts/tests/index.test.ts b/packages/create-rstack/template-app-svelte-ts/tests/index.test.ts new file mode 100644 index 00000000..def49543 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/tests/index.test.ts @@ -0,0 +1,11 @@ +import { render, screen } from '@testing-library/svelte'; +import { expect, test } from 'rstack/test'; +import App from '../src/App.svelte'; + +test('renders the main page', () => { + render(App, { + tool: 'Rstack', + framework: 'Svelte', + }); + expect(screen.getByText('Rstack with Svelte')).toBeInTheDocument(); +}); diff --git a/packages/create-rstack/template-app-svelte-ts/tests/rstest.setup.ts b/packages/create-rstack/template-app-svelte-ts/tests/rstest.setup.ts new file mode 100644 index 00000000..93951b15 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/tests/rstest.setup.ts @@ -0,0 +1,4 @@ +import { expect } from 'rstack/test'; +import * as jestDomMatchers from '@testing-library/jest-dom/matchers'; + +expect.extend(jestDomMatchers); diff --git a/packages/create-rstack/template-app-svelte-ts/tests/tsconfig.json b/packages/create-rstack/template-app-svelte-ts/tests/tsconfig.json new file mode 100644 index 00000000..3eb5dc12 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/tests/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../tsconfig.json", + "compilerOptions": { + "types": ["rstack/types", "node", "@testing-library/jest-dom"] + }, + "include": ["./"] +} diff --git a/packages/create-rstack/template-app-svelte-ts/tsconfig.json b/packages/create-rstack/template-app-svelte-ts/tsconfig.json new file mode 100644 index 00000000..333158f0 --- /dev/null +++ b/packages/create-rstack/template-app-svelte-ts/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2020"], + "target": "ES2020", + "noEmit": true, + "skipLibCheck": true, + "types": ["rstack/types", "node", "svelte"], + "useDefineForClassFields": true, + + /* modules */ + "moduleDetection": "force", + "moduleResolution": "bundler", + "verbatimModuleSyntax": true, + "resolveJsonModule": true, + "allowImportingTsExtensions": true, + + /* type checking */ + "noUnusedLocals": true, + "noUnusedParameters": true + }, + "include": ["src/**/*.ts", "src/**/*.svelte"] +} diff --git a/packages/create-rstack/tests/create.test.ts b/packages/create-rstack/tests/create.test.ts index 5396e7b0..ec3b507c 100644 --- a/packages/create-rstack/tests/create.test.ts +++ b/packages/create-rstack/tests/create.test.ts @@ -75,6 +75,20 @@ test.each([ testFile: 'index.test.ts', hasTypeScript: true, }, + { + template: 'app-svelte-js', + configExtension: 'js', + sourceExtension: 'js', + testFile: 'index.test.js', + hasTypeScript: false, + }, + { + template: 'app-svelte-ts', + configExtension: 'ts', + sourceExtension: 'ts', + testFile: 'index.test.ts', + hasTypeScript: true, + }, { template: 'app-solid-js', configExtension: 'js',