feat: vite lit starter

LinbuduLab · Mar 18, 2022 · a3ef938 · a3ef938
1 parent 6946f50
commit a3ef938
Show file tree

Hide file tree

Showing 11 changed files with 205 additions and 27 deletions.
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -5,7 +5,6 @@
 ## Advanced(Stage 3)
 
 - StoryBook
-- Lit
 - Midway Hooks
 - Midway Serverless
 

diff --git a/packages/vite-lit-starter/.gitignore b/packages/vite-lit-starter/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/vite-lit-starter/index.html b/packages/vite-lit-starter/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Lit App</title>
+    <script type="module" src="/src/my-element.ts"></script>
+  </head>
+  <body>
+    <my-element>
+      <p>This is child content</p>
+    </my-element>
+  </body>
+</html>
diff --git a/packages/vite-lit-starter/package.json b/packages/vite-lit-starter/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "vite-lit-starter",
+  "private": true,
+  "version": "0.0.0",
+  "main": "dist/my-element.es.js",
+  "exports": {
+    ".": "./dist/my-element.es.js"
+  },
+  "types": "types/my-element.d.ts",
+  "files": [
+    "dist",
+    "types"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "dependencies": {
+    "lit": "^2.0.2"
+  },
+  "devDependencies": {
+    "vite": "^2.8.0",
+    "typescript": "^4.5.4"
+  }
+}
diff --git a/packages/vite-lit-starter/src/favicon.svg b/packages/vite-lit-starter/src/favicon.svg
diff --git a/packages/vite-lit-starter/src/my-element.ts b/packages/vite-lit-starter/src/my-element.ts
@@ -0,0 +1,58 @@
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+/**
+ * An example element.
+ *
+ * @slot - This element has a slot
+ * @csspart button - The button
+ */
+@customElement('my-element')
+export class MyElement extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+      border: solid 1px gray;
+      padding: 16px;
+      max-width: 800px;
+    }
+  `;
+
+  /**
+   * The name to say "Hello" to.
+   */
+  @property()
+  name = 'World';
+
+  /**
+   * The number of times the button has been clicked.
+   */
+  @property({ type: Number })
+  count = 0;
+
+  render() {
+    return html`
+      <h1>LinbuduLab Vite + Lit Starter</h1>
+
+      <h2>Hello, ${this.name}!</h2>
+      <button @click=${this._onClick} part="button">
+        Click Count: ${this.count}
+      </button>
+      <slot></slot>
+    `;
+  }
+
+  private _onClick() {
+    this.count++;
+  }
+
+  foo(): string {
+    return 'foo';
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'my-element': MyElement;
+  }
+}
diff --git a/packages/vite-lit-starter/src/vite-env.d.ts b/packages/vite-lit-starter/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/vite-lit-starter/tsconfig.json b/packages/vite-lit-starter/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "lib": ["es2017", "dom", "dom.iterable"],
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "outDir": "./types",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": false
+  },
+  "include": ["src/**/*.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/vite-lit-starter/tsconfig.node.json b/packages/vite-lit-starter/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/vite-lit-starter/vite.config.ts b/packages/vite-lit-starter/vite.config.ts
@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/my-element.ts',
+      formats: ['es']
+    },
+    rollupOptions: {
+      external: /^lit/
+    }
+  }
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml