Template for using TypeScript.

template/package.json

@@ -13,22 +13,28 @@
     ],
     "exports": {
         ".": {
-            "import": "./src/<%= name %>.js",
+            "import": "./dist/<%= name %>.js",
             "require": "./dist/<%= name %>.cjs",
             "default": "./dist/<%= name %>.js"
+        },
+        "./<%= name %>.css": {
+            "import": "./dist/<%= name %>.css"
         }
     },
-    "main":"./dist/<%= name %>.js",
+    "main": "./dist/<%= name %>.js",
+    "module": "./dist/<%= name %>.js",
     "scripts": {
         "dev": "vite",
-        "build": "vite build --config vite.build.config.js --emptyOutDir",
+        "build": "tsc --noEmit && vite build --config vite.transpile.config.ts --emptyOutDir && vite build --config vite.build.config.ts --emptyOutDir",
         "preview": "vite preview",
         "prepack": "npm run build"
     },
     "dependencies": {
         "lit": "3.1.3"
     },
     "devDependencies": {
-        "vite": "^5.4.11"
+        "typescript": "^5.6.3",
+        "vite": "^5.4.11",
+        "vite-plugin-dts": "^4.3.0"
     }
 }

template/src/{name}.js → template/src/{name}.ts

@@ -1,22 +1,21 @@
 import { LitElement, html, unsafeCSS } from "lit";
+// @ts-ignore
 import styles from './<%= name %>.styles.css?inline';
 import './<%= name %>.css';
+import { customElement, property } from "lit/decorators.js";
 
-class <%= _.upperFirst(_.camelCase(name.slice(4))) %> extends LitElement {
+@customElement("<%= name %>")
+export default class <%= _.upperFirst(_.camelCase(name.slice(4))) %> extends LitElement {
 
-    static get properties() {
-        return {
-            theme: { type: String, attribute: true }
-        };
-    }
+    @property()
+    theme = "";
 
     static get styles() {
         return unsafeCSS(styles);
     }
 
     constructor() {
         super();
-        this.theme = '';
     }
 
     render() {
@@ -28,4 +27,8 @@ class <%= _.upperFirst(_.camelCase(name.slice(4))) %> extends LitElement {
     }
 }
 
-customElements.define('<%= name %>', <%= _.upperFirst(_.camelCase(name.slice(4))) %>);
+declare global {
+    interface HTMLElementTagNameMap {
+        "<%= name %>": <%= _.upperFirst(_.camelCase(name.slice(4))) %>;
+    }
+}

template/vite.build.config.js → template/vite.build.config.ts

@@ -4,17 +4,18 @@ import { defineConfig } from "vite";
 export default defineConfig({
     root: "src",
     build: {
-        outDir: "../dist",
+        outDir: "../dist/cdn",
         lib: {
             name: "<%= name %>",
-            entry: "<%= name %>.js",
+            entry: "<%= name %>.ts",
             fileName: "<%= name %>",
-            formats: ["es", "cjs", "umd"],
+            formats: ["es"],
         },
         rollupOptions: {
             output: {
                 assetFileNames: (chunkInfo) => {
                     if (chunkInfo.name === "style.css") return "<%= name %>.css";
+                    return "assets/[name]-[hash][extname]"; // vite default
                 },
             },
         },

template/vite.transpile.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    root: "src",
+    build: {
+        outDir: "../dist",
+        lib: {
+            name: "<%= name %>",
+            entry: "<%= name %>.ts",
+            fileName: "<%= name %>",
+            formats: ["es"],
+        },
+        rollupOptions: {
+            external: [/^@?lit/],
+            output: {
+                assetFileNames: (chunkInfo) => {
+                    if (chunkInfo.name === "style.css") return "<%= name %>.css";
+                    return "assets/[name]-[hash][extname]"; // vite default
+                },
+            },
+        },
+    },
+    server: {
+        hmr: false,
+    },
+    plugins: [dts()],
+});