Skip to content

Commit 07cf991

Browse files
chenjiahanchenjiahan
committed
feat(create-rstack): add Lit app templates
1 parent e970f37 commit 07cf991

20 files changed

Lines changed: 291 additions & 0 deletions

File tree

‎packages/create-rstack/README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ npx create-rstack -d my-project -t app-vanilla-ts
2929
- `app-preact-ts` - TypeScript Preact application
3030
- `app-vue-js` - JavaScript Vue application
3131
- `app-vue-ts` - TypeScript Vue application
32+
- `app-lit-js` - JavaScript Lit application
33+
- `app-lit-ts` - TypeScript Lit application
3234
- `app-svelte-js` - JavaScript Svelte application
3335
- `app-svelte-ts` - TypeScript Svelte application
3436
- `app-solid-js` - JavaScript Solid application

‎packages/create-rstack/src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ const getTemplateName = async ({ template }: Argv): Promise<string> => {
7676
{ value: 'react', label: 'React' },
7777
{ value: 'preact', label: 'Preact' },
7878
{ value: 'vue', label: 'Vue' },
79+
{ value: 'lit', label: 'Lit' },
7980
{ value: 'svelte', label: 'Svelte' },
8081
{ value: 'solid', label: 'Solid' },
8182
]
@@ -113,6 +114,8 @@ await create({
113114
'app-preact-ts',
114115
'app-vue-js',
115116
'app-vue-ts',
117+
'app-lit-js',
118+
'app-lit-ts',
116119
'app-svelte-js',
117120
'app-svelte-ts',
118121
'app-solid-js',

‎packages/create-rstack/template-app-lit-js/AGENTS.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# AGENTS.md
2+
3+
## Commands
4+
5+
- `{{ packageManager }} run dev` - Start the development server
6+
- `{{ packageManager }} run build` - Build the app for production
7+
- `{{ packageManager }} run preview` - Preview the production build locally
8+
- `{{ packageManager }} run test` - Run tests
9+
- `{{ packageManager }} run test:watch` - Run tests in watch mode
10+
11+
## Docs
12+
13+
- Rsbuild: https://rsbuild.rs/llms.txt
14+
- Rspack: https://rspack.rs/llms.txt
15+
- Rstest: https://rstest.rs/llms.txt

‎packages/create-rstack/template-app-lit-js/package.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "rstack-app-lit-js",
3+
"version": "1.0.0",
4+
"private": true,
5+
"type": "module",
6+
"scripts": {
7+
"build": "rs build",
8+
"dev": "rs dev",
9+
"format": "rs fmt",
10+
"lint": "rs lint",
11+
"preview": "rs preview",
12+
"test": "rs test",
13+
"test:watch": "rs test --watch"
14+
},
15+
"dependencies": {
16+
"lit": "^3.3.3"
17+
},
18+
"devDependencies": {
19+
"happy-dom": "^20.11.1",
20+
"rstack": "^0.3.5"
21+
}
22+
}

‎packages/create-rstack/template-app-lit-js/rstack.config.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// @ts-check
2+
// Rstack configuration guide: https://rstack.rs/config
3+
import { define } from 'rstack';
4+
5+
define.app({
6+
html: {
7+
template: './src/index.html',
8+
},
9+
source: {
10+
decorators: {
11+
version: 'legacy',
12+
},
13+
},
14+
});
15+
16+
define.test({
17+
testEnvironment: 'happy-dom',
18+
});
19+
20+
define.lint(async () => {
21+
const { js } = await import('rstack/lint');
22+
23+
return [js.configs.recommended];
24+
});

‎packages/create-rstack/template-app-lit-js/src/index.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
body {
2+
margin: 0;
3+
color: #fff;
4+
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
5+
background-image: linear-gradient(to bottom, #020917, #101725);
6+
}

‎packages/create-rstack/template-app-lit-js/src/index.html‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head></head>
4+
<body>
5+
<my-element></my-element>
6+
</body>
7+
</html>

‎packages/create-rstack/template-app-lit-js/src/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import './index.css';
2+
import { MyElement } from './my-element';
3+
4+
customElements.define('my-element', MyElement);

‎packages/create-rstack/template-app-lit-js/src/my-element.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { html, css, LitElement } from 'lit';
2+
3+
export class MyElement extends LitElement {
4+
static styles = css`
5+
.content {
6+
display: flex;
7+
min-height: 100vh;
8+
line-height: 1.1;
9+
text-align: center;
10+
flex-direction: column;
11+
justify-content: center;
12+
}
13+
14+
.content h1 {
15+
font-size: 3.6rem;
16+
font-weight: 700;
17+
}
18+
19+
.content p {
20+
font-size: 1.2rem;
21+
font-weight: 400;
22+
opacity: 0.5;
23+
}
24+
`;
25+
26+
render() {
27+
return html`
28+
<div class="content">
29+
<h1>Rstack with Lit</h1>
30+
<p>Start building amazing things with Rstack.</p>
31+
</div>
32+
`;
33+
}
34+
}

‎packages/create-rstack/template-app-lit-js/tests/index.test.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { expect, test } from 'rstack/test';
2+
import { MyElement } from '../src/my-element';
3+
4+
test('renders the main page', async () => {
5+
customElements.define('my-element', MyElement);
6+
const element = document.createElement('my-element');
7+
document.body.append(element);
8+
9+
await element.updateComplete;
10+
11+
expect(element.shadowRoot?.textContent).toContain('Rstack with Lit');
12+
});

0 commit comments

Comments
 (0)