From 131d98abd795a23ba5b960c54b1f86a23f82f924 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 8 Aug 2026 15:16:13 +0800 Subject: [PATCH] feat(create-rstack): add Solid app templates --- packages/create-rstack/README.md | 2 ++ packages/create-rstack/src/index.ts | 3 +++ .../template-app-solid-js/AGENTS.md | 12 +++++++++ .../template-app-solid-js/package.json | 22 +++++++++++++++ .../template-app-solid-js/rstack.config.js | 27 +++++++++++++++++++ .../template-app-solid-js/src/App.css | 26 ++++++++++++++++++ .../template-app-solid-js/src/App.jsx | 12 +++++++++ .../template-app-solid-js/src/index.jsx | 4 +++ .../template-app-solid-ts/AGENTS.md | 12 +++++++++ .../template-app-solid-ts/package.json | 24 +++++++++++++++++ .../template-app-solid-ts/rstack.config.ts | 26 ++++++++++++++++++ .../template-app-solid-ts/src/App.css | 26 ++++++++++++++++++ .../template-app-solid-ts/src/App.tsx | 12 +++++++++ .../template-app-solid-ts/src/index.tsx | 7 +++++ .../template-app-solid-ts/tsconfig.json | 24 +++++++++++++++++ packages/create-rstack/tests/create.test.ts | 12 +++++++++ 16 files changed, 251 insertions(+) create mode 100644 packages/create-rstack/template-app-solid-js/AGENTS.md create mode 100644 packages/create-rstack/template-app-solid-js/package.json create mode 100644 packages/create-rstack/template-app-solid-js/rstack.config.js create mode 100644 packages/create-rstack/template-app-solid-js/src/App.css create mode 100644 packages/create-rstack/template-app-solid-js/src/App.jsx create mode 100644 packages/create-rstack/template-app-solid-js/src/index.jsx create mode 100644 packages/create-rstack/template-app-solid-ts/AGENTS.md create mode 100644 packages/create-rstack/template-app-solid-ts/package.json create mode 100644 packages/create-rstack/template-app-solid-ts/rstack.config.ts create mode 100644 packages/create-rstack/template-app-solid-ts/src/App.css create mode 100644 packages/create-rstack/template-app-solid-ts/src/App.tsx create mode 100644 packages/create-rstack/template-app-solid-ts/src/index.tsx create mode 100644 packages/create-rstack/template-app-solid-ts/tsconfig.json diff --git a/packages/create-rstack/README.md b/packages/create-rstack/README.md index bdf20f28..f9cac468 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-solid-js` - JavaScript Solid application +- `app-solid-ts` - TypeScript Solid application - `lib-node-js` - JavaScript Node.js library - `lib-node-ts` - TypeScript Node.js library - `lib-react-js` - JavaScript React library diff --git a/packages/create-rstack/src/index.ts b/packages/create-rstack/src/index.ts index 360d67a5..49e8765b 100644 --- a/packages/create-rstack/src/index.ts +++ b/packages/create-rstack/src/index.ts @@ -46,6 +46,7 @@ const getTemplateName = async ({ template }: Argv): Promise => { { value: 'vanilla', label: 'Vanilla' }, { value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }, + { value: 'solid', label: 'Solid' }, ] : [ { value: 'node', label: 'Node.js' }, @@ -78,6 +79,8 @@ await create({ 'app-react-ts', 'app-vue-js', 'app-vue-ts', + 'app-solid-js', + 'app-solid-ts', 'lib-node-js', 'lib-node-ts', 'lib-react-js', diff --git a/packages/create-rstack/template-app-solid-js/AGENTS.md b/packages/create-rstack/template-app-solid-js/AGENTS.md new file mode 100644 index 00000000..fb378511 --- /dev/null +++ b/packages/create-rstack/template-app-solid-js/AGENTS.md @@ -0,0 +1,12 @@ +# 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 + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt diff --git a/packages/create-rstack/template-app-solid-js/package.json b/packages/create-rstack/template-app-solid-js/package.json new file mode 100644 index 00000000..887de41a --- /dev/null +++ b/packages/create-rstack/template-app-solid-js/package.json @@ -0,0 +1,22 @@ +{ + "name": "rstack-app-solid-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" + }, + "dependencies": { + "solid-js": "^1.9.14" + }, + "devDependencies": { + "@rsbuild/plugin-babel": "^2.0.1", + "@rsbuild/plugin-solid": "^1.2.2", + "rstack": "^0.3.5" + } +} diff --git a/packages/create-rstack/template-app-solid-js/rstack.config.js b/packages/create-rstack/template-app-solid-js/rstack.config.js new file mode 100644 index 00000000..aab9ecfd --- /dev/null +++ b/packages/create-rstack/template-app-solid-js/rstack.config.js @@ -0,0 +1,27 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app(async () => { + const { pluginBabel } = await import('@rsbuild/plugin-babel'); + const { pluginSolid } = await import('@rsbuild/plugin-solid'); + + return { + plugins: [ + pluginBabel({ + include: /\.(?:jsx|tsx)$/, + }), + pluginSolid(), + ], + }; +}); + +define.test({ + // Configure Rstest +}); + +define.lint(async () => { + const { js } = await import('rstack/lint'); + + return [js.configs.recommended]; +}); diff --git a/packages/create-rstack/template-app-solid-js/src/App.css b/packages/create-rstack/template-app-solid-js/src/App.css new file mode 100644 index 00000000..164c0a6a --- /dev/null +++ b/packages/create-rstack/template-app-solid-js/src/App.css @@ -0,0 +1,26 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} + +.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; +} diff --git a/packages/create-rstack/template-app-solid-js/src/App.jsx b/packages/create-rstack/template-app-solid-js/src/App.jsx new file mode 100644 index 00000000..732c63f9 --- /dev/null +++ b/packages/create-rstack/template-app-solid-js/src/App.jsx @@ -0,0 +1,12 @@ +import './App.css'; + +const App = () => { + return ( +
+

Rstack with Solid

+

Start building amazing things with Rstack.

+
+ ); +}; + +export default App; diff --git a/packages/create-rstack/template-app-solid-js/src/index.jsx b/packages/create-rstack/template-app-solid-js/src/index.jsx new file mode 100644 index 00000000..c6c556ad --- /dev/null +++ b/packages/create-rstack/template-app-solid-js/src/index.jsx @@ -0,0 +1,4 @@ +import { render } from 'solid-js/web'; +import App from './App'; + +render(() => , document.getElementById('root')); diff --git a/packages/create-rstack/template-app-solid-ts/AGENTS.md b/packages/create-rstack/template-app-solid-ts/AGENTS.md new file mode 100644 index 00000000..fb378511 --- /dev/null +++ b/packages/create-rstack/template-app-solid-ts/AGENTS.md @@ -0,0 +1,12 @@ +# 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 + +## Docs + +- Rsbuild: https://rsbuild.rs/llms.txt +- Rspack: https://rspack.rs/llms.txt diff --git a/packages/create-rstack/template-app-solid-ts/package.json b/packages/create-rstack/template-app-solid-ts/package.json new file mode 100644 index 00000000..3cdc10c5 --- /dev/null +++ b/packages/create-rstack/template-app-solid-ts/package.json @@ -0,0 +1,24 @@ +{ + "name": "rstack-app-solid-ts", + "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" + }, + "dependencies": { + "solid-js": "^1.9.14" + }, + "devDependencies": { + "@rsbuild/plugin-babel": "^2.0.1", + "@rsbuild/plugin-solid": "^1.2.2", + "@types/node": "^24.13.3", + "rstack": "^0.3.5", + "typescript": "^7.0.2" + } +} diff --git a/packages/create-rstack/template-app-solid-ts/rstack.config.ts b/packages/create-rstack/template-app-solid-ts/rstack.config.ts new file mode 100644 index 00000000..05629b14 --- /dev/null +++ b/packages/create-rstack/template-app-solid-ts/rstack.config.ts @@ -0,0 +1,26 @@ +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app(async () => { + const { pluginBabel } = await import('@rsbuild/plugin-babel'); + const { pluginSolid } = await import('@rsbuild/plugin-solid'); + + return { + plugins: [ + pluginBabel({ + include: /\.(?:jsx|tsx)$/, + }), + pluginSolid(), + ], + }; +}); + +define.test({ + // Configure Rstest +}); + +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-solid-ts/src/App.css b/packages/create-rstack/template-app-solid-ts/src/App.css new file mode 100644 index 00000000..164c0a6a --- /dev/null +++ b/packages/create-rstack/template-app-solid-ts/src/App.css @@ -0,0 +1,26 @@ +body { + margin: 0; + color: #fff; + font-family: Inter, Avenir, Helvetica, Arial, sans-serif; + background-image: linear-gradient(to bottom, #020917, #101725); +} + +.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; +} diff --git a/packages/create-rstack/template-app-solid-ts/src/App.tsx b/packages/create-rstack/template-app-solid-ts/src/App.tsx new file mode 100644 index 00000000..732c63f9 --- /dev/null +++ b/packages/create-rstack/template-app-solid-ts/src/App.tsx @@ -0,0 +1,12 @@ +import './App.css'; + +const App = () => { + return ( +
+

Rstack with Solid

+

Start building amazing things with Rstack.

+
+ ); +}; + +export default App; diff --git a/packages/create-rstack/template-app-solid-ts/src/index.tsx b/packages/create-rstack/template-app-solid-ts/src/index.tsx new file mode 100644 index 00000000..56ad2157 --- /dev/null +++ b/packages/create-rstack/template-app-solid-ts/src/index.tsx @@ -0,0 +1,7 @@ +import { render } from 'solid-js/web'; +import App from './App'; + +const root = document.getElementById('root'); +if (root) { + render(() => , root); +} diff --git a/packages/create-rstack/template-app-solid-ts/tsconfig.json b/packages/create-rstack/template-app-solid-ts/tsconfig.json new file mode 100644 index 00000000..0437f985 --- /dev/null +++ b/packages/create-rstack/template-app-solid-ts/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2020"], + "jsx": "preserve", + "target": "ES2020", + "noEmit": true, + "skipLibCheck": true, + "types": ["rstack/types", "node"], + "jsxImportSource": "solid-js", + "useDefineForClassFields": true, + + /* modules */ + "moduleDetection": "force", + "moduleResolution": "bundler", + "verbatimModuleSyntax": true, + "resolveJsonModule": true, + "allowImportingTsExtensions": true, + + /* type checking */ + "noUnusedLocals": true, + "noUnusedParameters": true + }, + "include": ["src"] +} diff --git a/packages/create-rstack/tests/create.test.ts b/packages/create-rstack/tests/create.test.ts index 920301f5..34352fc5 100644 --- a/packages/create-rstack/tests/create.test.ts +++ b/packages/create-rstack/tests/create.test.ts @@ -69,6 +69,18 @@ test.each([ sourceExtension: 'ts', hasTypeScript: true, }, + { + template: 'app-solid-js', + configExtension: 'js', + sourceExtension: 'jsx', + hasTypeScript: false, + }, + { + template: 'app-solid-ts', + configExtension: 'ts', + sourceExtension: 'tsx', + hasTypeScript: true, + }, ])( 'creates the $template template', async ({ template, configExtension, sourceExtension, hasTypeScript }) => {