From 07cf9919045557fa5390d495123fa37e33209f4c Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 9 Aug 2026 08:17:30 +0800 Subject: [PATCH] feat(create-rstack): add Lit app templates --- packages/create-rstack/README.md | 2 ++ packages/create-rstack/src/index.ts | 3 ++ .../template-app-lit-js/AGENTS.md | 15 ++++++++ .../template-app-lit-js/package.json | 22 ++++++++++++ .../template-app-lit-js/rstack.config.js | 24 +++++++++++++ .../template-app-lit-js/src/index.css | 6 ++++ .../template-app-lit-js/src/index.html | 7 ++++ .../template-app-lit-js/src/index.js | 4 +++ .../template-app-lit-js/src/my-element.js | 34 +++++++++++++++++++ .../template-app-lit-js/tests/index.test.js | 12 +++++++ .../template-app-lit-ts/AGENTS.md | 15 ++++++++ .../template-app-lit-ts/package.json | 24 +++++++++++++ .../template-app-lit-ts/rstack.config.ts | 23 +++++++++++++ .../template-app-lit-ts/src/index.css | 6 ++++ .../template-app-lit-ts/src/index.html | 7 ++++ .../template-app-lit-ts/src/index.ts | 4 +++ .../template-app-lit-ts/src/my-element.ts | 34 +++++++++++++++++++ .../template-app-lit-ts/tests/index.test.ts | 12 +++++++ .../template-app-lit-ts/tsconfig.json | 23 +++++++++++++ packages/create-rstack/tests/create.test.ts | 14 ++++++++ 20 files changed, 291 insertions(+) create mode 100644 packages/create-rstack/template-app-lit-js/AGENTS.md create mode 100644 packages/create-rstack/template-app-lit-js/package.json create mode 100644 packages/create-rstack/template-app-lit-js/rstack.config.js create mode 100644 packages/create-rstack/template-app-lit-js/src/index.css create mode 100644 packages/create-rstack/template-app-lit-js/src/index.html create mode 100644 packages/create-rstack/template-app-lit-js/src/index.js create mode 100644 packages/create-rstack/template-app-lit-js/src/my-element.js create mode 100644 packages/create-rstack/template-app-lit-js/tests/index.test.js create mode 100644 packages/create-rstack/template-app-lit-ts/AGENTS.md create mode 100644 packages/create-rstack/template-app-lit-ts/package.json create mode 100644 packages/create-rstack/template-app-lit-ts/rstack.config.ts create mode 100644 packages/create-rstack/template-app-lit-ts/src/index.css create mode 100644 packages/create-rstack/template-app-lit-ts/src/index.html create mode 100644 packages/create-rstack/template-app-lit-ts/src/index.ts create mode 100644 packages/create-rstack/template-app-lit-ts/src/my-element.ts create mode 100644 packages/create-rstack/template-app-lit-ts/tests/index.test.ts create mode 100644 packages/create-rstack/template-app-lit-ts/tsconfig.json diff --git a/packages/create-rstack/README.md b/packages/create-rstack/README.md index b8bbd02..21ff6e9 100644 --- a/packages/create-rstack/README.md +++ b/packages/create-rstack/README.md @@ -29,6 +29,8 @@ npx create-rstack -d my-project -t app-vanilla-ts - `app-preact-ts` - TypeScript Preact application - `app-vue-js` - JavaScript Vue application - `app-vue-ts` - TypeScript Vue application +- `app-lit-js` - JavaScript Lit application +- `app-lit-ts` - TypeScript Lit application - `app-svelte-js` - JavaScript Svelte application - `app-svelte-ts` - TypeScript Svelte application - `app-solid-js` - JavaScript Solid application diff --git a/packages/create-rstack/src/index.ts b/packages/create-rstack/src/index.ts index 079141e..6cbb3a9 100644 --- a/packages/create-rstack/src/index.ts +++ b/packages/create-rstack/src/index.ts @@ -76,6 +76,7 @@ const getTemplateName = async ({ template }: Argv): Promise => { { value: 'react', label: 'React' }, { value: 'preact', label: 'Preact' }, { value: 'vue', label: 'Vue' }, + { value: 'lit', label: 'Lit' }, { value: 'svelte', label: 'Svelte' }, { value: 'solid', label: 'Solid' }, ] @@ -113,6 +114,8 @@ await create({ 'app-preact-ts', 'app-vue-js', 'app-vue-ts', + 'app-lit-js', + 'app-lit-ts', 'app-svelte-js', 'app-svelte-ts', 'app-solid-js', diff --git a/packages/create-rstack/template-app-lit-js/AGENTS.md b/packages/create-rstack/template-app-lit-js/AGENTS.md new file mode 100644 index 0000000..1de123b --- /dev/null +++ b/packages/create-rstack/template-app-lit-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-lit-js/package.json b/packages/create-rstack/template-app-lit-js/package.json new file mode 100644 index 0000000..80bd675 --- /dev/null +++ b/packages/create-rstack/template-app-lit-js/package.json @@ -0,0 +1,22 @@ +{ + "name": "rstack-app-lit-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": { + "lit": "^3.3.3" + }, + "devDependencies": { + "happy-dom": "^20.11.1", + "rstack": "^0.3.5" + } +} diff --git a/packages/create-rstack/template-app-lit-js/rstack.config.js b/packages/create-rstack/template-app-lit-js/rstack.config.js new file mode 100644 index 0000000..2ff6f2b --- /dev/null +++ b/packages/create-rstack/template-app-lit-js/rstack.config.js @@ -0,0 +1,24 @@ +// @ts-check +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app({ + html: { + template: './src/index.html', + }, + source: { + decorators: { + version: 'legacy', + }, + }, +}); + +define.test({ + testEnvironment: 'happy-dom', +}); + +define.lint(async () => { + const { js } = await import('rstack/lint'); + + return [js.configs.recommended]; +}); diff --git a/packages/create-rstack/template-app-lit-js/src/index.css b/packages/create-rstack/template-app-lit-js/src/index.css new file mode 100644 index 0000000..85e7e2b --- /dev/null +++ b/packages/create-rstack/template-app-lit-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-lit-js/src/index.html b/packages/create-rstack/template-app-lit-js/src/index.html new file mode 100644 index 0000000..b3a6a02 --- /dev/null +++ b/packages/create-rstack/template-app-lit-js/src/index.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/create-rstack/template-app-lit-js/src/index.js b/packages/create-rstack/template-app-lit-js/src/index.js new file mode 100644 index 0000000..ec31c9e --- /dev/null +++ b/packages/create-rstack/template-app-lit-js/src/index.js @@ -0,0 +1,4 @@ +import './index.css'; +import { MyElement } from './my-element'; + +customElements.define('my-element', MyElement); diff --git a/packages/create-rstack/template-app-lit-js/src/my-element.js b/packages/create-rstack/template-app-lit-js/src/my-element.js new file mode 100644 index 0000000..9a370ce --- /dev/null +++ b/packages/create-rstack/template-app-lit-js/src/my-element.js @@ -0,0 +1,34 @@ +import { html, css, LitElement } from 'lit'; + +export class MyElement extends LitElement { + static styles = css` + .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; + } + `; + + render() { + return html` +
+

Rstack with Lit

+

Start building amazing things with Rstack.

+
+ `; + } +} diff --git a/packages/create-rstack/template-app-lit-js/tests/index.test.js b/packages/create-rstack/template-app-lit-js/tests/index.test.js new file mode 100644 index 0000000..abb38d2 --- /dev/null +++ b/packages/create-rstack/template-app-lit-js/tests/index.test.js @@ -0,0 +1,12 @@ +import { expect, test } from 'rstack/test'; +import { MyElement } from '../src/my-element'; + +test('renders the main page', async () => { + customElements.define('my-element', MyElement); + const element = document.createElement('my-element'); + document.body.append(element); + + await element.updateComplete; + + expect(element.shadowRoot?.textContent).toContain('Rstack with Lit'); +}); diff --git a/packages/create-rstack/template-app-lit-ts/AGENTS.md b/packages/create-rstack/template-app-lit-ts/AGENTS.md new file mode 100644 index 0000000..1de123b --- /dev/null +++ b/packages/create-rstack/template-app-lit-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-lit-ts/package.json b/packages/create-rstack/template-app-lit-ts/package.json new file mode 100644 index 0000000..cf2d028 --- /dev/null +++ b/packages/create-rstack/template-app-lit-ts/package.json @@ -0,0 +1,24 @@ +{ + "name": "rstack-app-lit-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", + "test:watch": "rs test --watch" + }, + "dependencies": { + "lit": "^3.3.3" + }, + "devDependencies": { + "@types/node": "^24.13.3", + "happy-dom": "^20.11.1", + "rstack": "^0.3.5", + "typescript": "^7.0.2" + } +} diff --git a/packages/create-rstack/template-app-lit-ts/rstack.config.ts b/packages/create-rstack/template-app-lit-ts/rstack.config.ts new file mode 100644 index 0000000..d9c137b --- /dev/null +++ b/packages/create-rstack/template-app-lit-ts/rstack.config.ts @@ -0,0 +1,23 @@ +// Rstack configuration guide: https://rstack.rs/config +import { define } from 'rstack'; + +define.app({ + html: { + template: './src/index.html', + }, + source: { + decorators: { + version: 'legacy', + }, + }, +}); + +define.test({ + testEnvironment: 'happy-dom', +}); + +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-lit-ts/src/index.css b/packages/create-rstack/template-app-lit-ts/src/index.css new file mode 100644 index 0000000..85e7e2b --- /dev/null +++ b/packages/create-rstack/template-app-lit-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-lit-ts/src/index.html b/packages/create-rstack/template-app-lit-ts/src/index.html new file mode 100644 index 0000000..b3a6a02 --- /dev/null +++ b/packages/create-rstack/template-app-lit-ts/src/index.html @@ -0,0 +1,7 @@ + + + + + + + diff --git a/packages/create-rstack/template-app-lit-ts/src/index.ts b/packages/create-rstack/template-app-lit-ts/src/index.ts new file mode 100644 index 0000000..ec31c9e --- /dev/null +++ b/packages/create-rstack/template-app-lit-ts/src/index.ts @@ -0,0 +1,4 @@ +import './index.css'; +import { MyElement } from './my-element'; + +customElements.define('my-element', MyElement); diff --git a/packages/create-rstack/template-app-lit-ts/src/my-element.ts b/packages/create-rstack/template-app-lit-ts/src/my-element.ts new file mode 100644 index 0000000..9a370ce --- /dev/null +++ b/packages/create-rstack/template-app-lit-ts/src/my-element.ts @@ -0,0 +1,34 @@ +import { html, css, LitElement } from 'lit'; + +export class MyElement extends LitElement { + static styles = css` + .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; + } + `; + + render() { + return html` +
+

Rstack with Lit

+

Start building amazing things with Rstack.

+
+ `; + } +} diff --git a/packages/create-rstack/template-app-lit-ts/tests/index.test.ts b/packages/create-rstack/template-app-lit-ts/tests/index.test.ts new file mode 100644 index 0000000..352a5a7 --- /dev/null +++ b/packages/create-rstack/template-app-lit-ts/tests/index.test.ts @@ -0,0 +1,12 @@ +import { expect, test } from 'rstack/test'; +import { MyElement } from '../src/my-element'; + +test('renders the main page', async () => { + customElements.define('my-element', MyElement); + const element = document.createElement('my-element') as MyElement; + document.body.append(element); + + await element.updateComplete; + + expect(element.shadowRoot?.textContent).toContain('Rstack with Lit'); +}); diff --git a/packages/create-rstack/template-app-lit-ts/tsconfig.json b/packages/create-rstack/template-app-lit-ts/tsconfig.json new file mode 100644 index 0000000..a6f5c44 --- /dev/null +++ b/packages/create-rstack/template-app-lit-ts/tsconfig.json @@ -0,0 +1,23 @@ +{ + "compilerOptions": { + "lib": ["DOM", "ES2020"], + "target": "ES2020", + "noEmit": true, + "skipLibCheck": true, + "types": ["rstack/types", "node"], + "experimentalDecorators": true, + "useDefineForClassFields": false, + + /* 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 c2ddf2b..f89a62f 100644 --- a/packages/create-rstack/tests/create.test.ts +++ b/packages/create-rstack/tests/create.test.ts @@ -89,6 +89,20 @@ test.each([ testFile: 'index.test.ts', hasTypeScript: true, }, + { + template: 'app-lit-js', + configExtension: 'js', + sourceExtension: 'js', + testFile: 'index.test.js', + hasTypeScript: false, + }, + { + template: 'app-lit-ts', + configExtension: 'ts', + sourceExtension: 'ts', + testFile: 'index.test.ts', + hasTypeScript: true, + }, { template: 'app-svelte-js', configExtension: 'js',