Skip to content

Commit 830f3d3

Browse files
yyx990803yyx990803
committed
feat: lit-element templates
close #1684
1 parent 3240db1 commit 830f3d3

File tree

12 files changed

+254
-2
lines changed

12 files changed

+254
-2
lines changed

‎packages/create-app/index.js

+11-2
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,14 @@ const fs = require('fs')
55
const path = require('path')
66
const argv = require('minimist')(process.argv.slice(2))
77
const { prompt } = require('enquirer')
8-
const { yellow, green, cyan, magenta, stripColors } = require('kolorist')
8+
const {
9+
yellow,
10+
green,
11+
cyan,
12+
magenta,
13+
lightRed,
14+
stripColors
15+
} = require('kolorist')
916

1017
const cwd = process.cwd()
1118

@@ -16,7 +23,9 @@ const TEMPLATES = [
1623
cyan('react'),
1724
cyan('react-ts'),
1825
magenta('preact'),
19-
magenta('preact-ts')
26+
magenta('preact-ts'),
27+
lightRed('lit-element'),
28+
lightRed('lit-element-ts')
2029
]
2130

2231
const renameFiles = {

‎packages/create-app/template-lit-element-ts/_gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
types
5+
*.local

‎packages/create-app/template-lit-element-ts/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite + Lit-Element App</title>
7+
<script type="module" src="/src/my-element.ts"></script>
8+
</head>
9+
<body>
10+
<my-element>
11+
<p>This is child content</p>
12+
</my-element>
13+
</body>
14+
</html>

‎packages/create-app/template-lit-element-ts/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "my-vite-element",
3+
"version": "0.0.0",
4+
"main": "dist/my-vite-element.es.js",
5+
"exports": {
6+
".": "./dist/my-vite-element.es.js"
7+
},
8+
"types": "types/my-element.d.ts",
9+
"files": [
10+
"dist",
11+
"types"
12+
],
13+
"scripts": {
14+
"dev": "vite",
15+
"build": "tsc --emitDeclarationOnly && vite build"
16+
},
17+
"dependencies": {
18+
"lit-element": "^2.4.0"
19+
},
20+
"devDependencies": {
21+
"vite": "^2.0.0-beta.45",
22+
"typescript": "^4.1.3"
23+
}
24+
}

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

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { LitElement, html, customElement, property, css } from 'lit-element'
2+
3+
/**
4+
* An example element.
5+
*
6+
* @slot - This element has a slot
7+
* @csspart button - The button
8+
*/
9+
@customElement('my-element')
10+
export class MyElement extends LitElement {
11+
static styles = css`
12+
:host {
13+
display: block;
14+
border: solid 1px gray;
15+
padding: 16px;
16+
max-width: 800px;
17+
}
18+
`
19+
20+
/**
21+
* The name to say "Hello" to.
22+
*/
23+
@property()
24+
name = 'World'
25+
26+
/**
27+
* The number of times the button has been clicked.
28+
*/
29+
@property({ type: Number })
30+
count = 0
31+
32+
render() {
33+
return html`
34+
<h1>Hello, ${this.name}!</h1>
35+
<button @click=${this._onClick} part="button">
36+
Click Count: ${this.count}
37+
</button>
38+
<slot></slot>
39+
`
40+
}
41+
42+
private _onClick() {
43+
this.count++
44+
}
45+
46+
foo(): string {
47+
return 'foo'
48+
}
49+
}
50+
51+
declare global {
52+
interface HTMLElementTagNameMap {
53+
'my-element': MyElement
54+
}
55+
}

‎packages/create-app/template-lit-element-ts/tsconfig.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"compilerOptions": {
3+
"module": "esnext",
4+
"lib": ["es2017", "dom", "dom.iterable"],
5+
"declaration": true,
6+
"declarationMap": true,
7+
"sourceMap": true,
8+
"outDir": "./types",
9+
"rootDir": "./src",
10+
"strict": true,
11+
"noUnusedLocals": true,
12+
"noUnusedParameters": true,
13+
"noImplicitReturns": true,
14+
"noFallthroughCasesInSwitch": true,
15+
"moduleResolution": "node",
16+
"allowSyntheticDefaultImports": true,
17+
"experimentalDecorators": true,
18+
"forceConsistentCasingInFileNames": true
19+
},
20+
"include": ["src/**/*.ts"],
21+
"exclude": []
22+
}

‎packages/create-app/template-lit-element-ts/vite.config.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { defineConfig } from 'vite'
2+
3+
export default defineConfig({
4+
build: {
5+
lib: {
6+
entry: 'src/my-element.ts',
7+
formats: ['es']
8+
},
9+
rollupOptions: {
10+
external: /^lit-element/
11+
}
12+
}
13+
})

‎packages/create-app/template-lit-element/_gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎packages/create-app/template-lit-element/index.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite + Lit-Element App</title>
7+
<script type="module" src="/src/my-element.js"></script>
8+
</head>
9+
<body>
10+
<my-element>
11+
<p>This is child content</p>
12+
</my-element>
13+
</body>
14+
</html>

‎packages/create-app/template-lit-element/package.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"name": "my-vite-element",
3+
"version": "0.0.0",
4+
"main": "dist/my-vite-element.es.js",
5+
"exports": {
6+
".": "./dist/my-vite-element.es.js"
7+
},
8+
"files": [
9+
"dist"
10+
],
11+
"scripts": {
12+
"dev": "vite",
13+
"build": "vite build"
14+
},
15+
"dependencies": {
16+
"lit-element": "^2.4.0"
17+
},
18+
"devDependencies": {
19+
"vite": "^2.0.0-beta.45"
20+
}
21+
}

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

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { LitElement, html, css } from 'lit-element'
2+
3+
/**
4+
* An example element.
5+
*
6+
* @slot - This element has a slot
7+
* @csspart button - The button
8+
*/
9+
export class MyElement extends LitElement {
10+
static get styles() {
11+
return css`
12+
:host {
13+
display: block;
14+
border: solid 1px gray;
15+
padding: 16px;
16+
max-width: 800px;
17+
}
18+
`
19+
}
20+
21+
static get properties() {
22+
return {
23+
/**
24+
* The name to say "Hello" to.
25+
*/
26+
name: { type: String },
27+
28+
/**
29+
* The number of times the button has been clicked.
30+
*/
31+
count: { type: Number }
32+
}
33+
}
34+
35+
constructor() {
36+
super()
37+
this.name = 'World'
38+
this.count = 0
39+
}
40+
41+
render() {
42+
return html`
43+
<h1>Hello, ${this.name}!</h1>
44+
<button @click=${this._onClick} part="button">
45+
Click Count: ${this.count}
46+
</button>
47+
<slot></slot>
48+
`
49+
}
50+
51+
_onClick() {
52+
this.count++
53+
}
54+
}
55+
56+
window.customElements.define('my-element', MyElement)

‎packages/create-app/template-lit-element/vite.config.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* @type {import('vite').UserConfig}
3+
*/
4+
export default {
5+
build: {
6+
lib: {
7+
entry: 'src/my-element.js',
8+
formats: ['es']
9+
},
10+
rollupOptions: {
11+
external: /^lit-element/
12+
}
13+
}
14+
}

0 commit comments

Comments
 (0)