solidjs · vemonet · Dec 6, 2024
diff --git a/README.md b/README.md
@@ -99,6 +99,13 @@ $ cd my-solid-project
 $ npm install # or pnpm install or yarn install
 ```
 
+```bash
+# Typescript custom element template
+$ npx degit solidjs/templates/ts-custom-element my-solid-project
+$ cd my-solid-project
+$ npm install # or pnpm install or yarn install
+```
+
 ## I don't see a template that matches my need?
 
 You wish there was a template with your favorite library?

diff --git a/ts-custom-element/.gitignore b/ts-custom-element/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/ts-custom-element/README.md b/ts-custom-element/README.md
@@ -0,0 +1,39 @@
+## Usage
+
+Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
+
+This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
+
+```bash
+$ npm install # or pnpm install or yarn install
+```
+
+### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run dev` or `npm start`
+
+Runs the app in the development mode.
+
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.
+
+### `npm run build`
+
+Builds the component for production to the `dist` folder.
+
+It correctly bundles Solid in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes. Your app is ready to be published!
+
+### `npm run fmt` and `npm run lint`
+
+Format and lint with `prettier` and `eslint`.
+
+### `npm run upgrade`
+
+Upgrade dependencies in `package.json` to their latest version.
diff --git a/ts-custom-element/eslint.config.js b/ts-custom-element/eslint.config.js
@@ -0,0 +1,24 @@
+import js from '@eslint/js';
+import solid from 'eslint-plugin-solid/configs/typescript';
+import * as tsParser from '@typescript-eslint/parser';
+import globals from 'globals';
+
+export default [
+  js.configs.recommended,
+  {
+    files: ['**/*.{ts,tsx}'],
+    ...solid,
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        project: 'tsconfig.json',
+      },
+      globals: {
+        ...globals.browser,
+      },
+    },
+  },
+  {
+    ignores: ['node_modules', 'dist'],
+  },
+];
diff --git a/ts-custom-element/index.html b/ts-custom-element/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Solid App</title>
+    <script type="module" src="./src/my-counter.tsx"></script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <my-counter initial-count="1"></my-counter>
+  </body>
+</html>
diff --git a/ts-custom-element/package.json b/ts-custom-element/package.json
@@ -0,0 +1,60 @@
+{
+  "name": "vite-template-solid",
+  "version": "0.0.0",
+  "description": "A standard web component custom element built with SolidJS",
+  "type": "module",
+  "main": "dist/my-counter.umd.cjs",
+  "module": "dist/my-counter.js",
+  "types": "dist/types/my-counter.d.ts",
+  "files": [
+    "dist/*"
+  ],
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "fmt": "prettier --write . && eslint . --fix",
+    "lint": "prettier --check . && eslint .",
+    "upgrade": "npx npm-check-updates -u"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@typescript-eslint/parser": "^8.17.0",
+    "eslint": "^9.16.0",
+    "eslint-plugin-solid": "^0.14.4",
+    "globals": "^15.13.0",
+    "prettier": "^3.4.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0",
+    "vite-plugin-solid": "^2.11.0"
+  },
+  "dependencies": {
+    "solid-element": "^1.9.1",
+    "solid-js": "^1.9.3"
+  },
+  "prettier": {
+    "semi": true,
+    "tabWidth": 2,
+    "singleQuote": true,
+    "bracketSpacing": false,
+    "arrowParens": "avoid",
+    "useTabs": false
+  },
+  "license": "MIT",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": {
+    "name": "Author Name",
+    "email": "[email protected]"
+  },
+  "keywords": [
+    "SolidJS"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/solidjs/templates.git"
+  }
+}