create-signature 0.0.1

package/README.MD

@@ -0,0 +1,23 @@
+# create-signature
+
+Initializer for web-signature.
+
+# Usage
+
+```bash
+npm create signature@latest
+```
+
+Or
+
+```bash
+bun create signature@latest
+```
+
+## Templates
+
+| Name       | Description                            |
+|------------|----------------------------------------|
+| Vanilla JS | A basic JavaScript template.           |
+| Vite + JS  | A template using Vite with JavaScript. |
+| Vite + TS  | A template using Vite with TypeScript. |

package/bun.lock

@@ -0,0 +1,21 @@
+{
+  "lockfileVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "create-signature",
+      "dependencies": {
+        "prompts": "^2.4.2",
+        "qp-color": "^0.0.3",
+      },
+    },
+  },
+  "packages": {
+    "kleur": ["kleur@3.0.3", "", {}, "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w=="],
+
+    "prompts": ["prompts@2.4.2", "", { "dependencies": { "kleur": "^3.0.3", "sisteransi": "^1.0.5" } }, "sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q=="],
+
+    "qp-color": ["qp-color@0.0.3", "", {}, "sha512-4g5QA48tp/w7mAqsKVeJYHyCnE3qYGWU3DH9zE1zfk4RY+smUuZu03EYKi/lpT9kpkNt5ncKq6oP/4nRQlyy8w=="],
+
+    "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
+  }
+}

package/index.js

@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const prompt = require("prompts");
+const qp = require("qp-color");
+
+function copyTemplate(from, to, hooks) {
+	if (!fs.existsSync(from)) {
+		throw new Error(`Template directory does not exist: ${from}`);
+	}
+
+	if (!fs.existsSync(to)) {
+		fs.mkdirSync(to, {recursive: true});
+	}
+
+	const files = fs.readdirSync(from);
+
+	files.forEach(file => {
+		const srcPath = path.join(from, file);
+		const destPath = path.join(to, file);
+
+		if (fs.statSync(srcPath).isDirectory()) {
+			fs.mkdirSync(destPath, {recursive: true});
+			copyTemplate(srcPath, destPath, hooks);
+		} else {
+			let content = fs.readFileSync(srcPath, "utf8");
+			if (hooks) {
+				hooks.filter(hook => hook.file === file).forEach(hook => {
+					content = hook.fn(content);
+				});
+			}
+			fs.writeFileSync(destPath, content);
+		}
+	});
+}
+
+function clearDirectory(dir) {
+	if (fs.existsSync(dir)) {
+		fs.readdirSync(dir).forEach(file => {
+			const filePath = path.join(dir, file);
+			if (fs.statSync(filePath).isDirectory()) {
+				clearDirectory(filePath);
+				fs.rmdirSync(filePath);
+			} else {
+				fs.unlinkSync(filePath);
+			}
+		});
+	}
+}
+
+try {
+	let src;
+
+	if (process.argv[2]) {
+		src = path.resolve(process.cwd(), process.argv[2]);
+	} else {
+		src = path.resolve(process.cwd());
+	}
+
+	if (!(fs.existsSync(src) && fs.statSync(src).isDirectory())) {
+		throw {id: "path-doest-exist", src: src};
+	}
+
+	(async () => {
+		if (fs.readdirSync(src).length > 0) {
+			const confirm = (await prompt({
+				type: "confirm",
+				name: "confirm",
+				message: qp.wb("The directory is not empty. Do you want to clear directory?"),
+				initial: false
+			})).confirm;
+
+			if (!confirm) {
+				console.log(qp.rb("The process was stopped..."));
+				return;
+			} else {
+				console.log(qp.yb("Cleaning the directory..."));
+
+				clearDirectory(src);
+			}
+		}
+
+		const name = path.basename(src);
+
+		let type = (await prompt({
+			type: "select",
+			name: "type",
+			message: qp.gb("Choose a template:"),
+			choices: [
+				{title: "Vanilla JS", value: "js", description: "A basic JavaScript template."},
+				{
+					title: "Vite + JS",
+					value: "vite-js",
+					description: "A template using Vite with JavaScript.",
+					default: true
+				},
+				{title: "Vite + TS", value: "vite-ts", description: "A template using Vite with TypeScript."}
+			]
+		})).type;
+
+		if (typeof type === "string") {
+			if (fs.existsSync(path.join(__dirname, "templates", type))) {
+				console.log(qp.yb(`Initializing the project...`));
+				copyTemplate(path.join(__dirname, "templates", type), src, [
+					{
+						file: "package.json",
+						fn: content => content.replace("#name", name)
+					}
+				]);
+				console.log(qp.gb("The project was created!"));
+				console.log("\n");
+				console.log("Now run:\n");
+				if (path.resolve("./") !== src) {
+					console.log(qp.wb(`  cd ` + path.basename(src)));
+				}
+				console.log(`  ${qp.wb("npm install")}\t\tOr\t\t${qp.wb("bun install")}`);
+				console.log(`  ${qp.wb("npm run dev")}\t\tOr\t\t${qp.wb("bun run dev")}`);
+				console.log("\n");
+			} else {
+				console.log(qp.rb(`Error: The specified template does not exist.\n\t${src}\n\tTemplate: ${type}`));
+			}
+		} else {
+			console.log(qp.rb("The process was stopped..."));
+		}
+	})();
+} catch (err) {
+	switch (err.id) {
+		case "stop":
+			console.log(qp.rb("The process was stopped..."));
+			break;
+		case "path-doest-exist":
+			console.log(qp.rb(`Error: The specified path does not exist.\n\t${err.src}`));
+			break;
+		case "template-doest-exist":
+			console.log(qp.rb(`Error: The specified template does not exist.\n\t${err.src}\n\tTemplate: ${err.template}`));
+			break;
+		default:
+			console.log(qp.rb(`Error: An unexpected error occurred.\n\t${err.toString()}`));
+			break;
+	}
+
+	process.exit(0);
+}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "create-signature",
+  "version": "0.0.1",
+  "description": "Initializer for web-signature.",
+  "repository": {
+    "type": "git",
+    "url": "github.com/Pinbib/signature"
+  },
+  "license": "ISC",
+  "author": "PinBib",
+  "type": "commonjs",
+  "scripts": {},
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "qp-color": "^0.0.3"
+  },
+  "bin": {
+    "create": "./index.js",
+    "init": "./index.js"
+  },
+  "bun-create": {
+    "start": "bun run index.js"
+  }
+}

package/templates/js/css/style.css

@@ -0,0 +1,99 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #2196F3);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/js/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <link href="./public/signature.svg" rel="icon" type="image/svg+xml"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <script src="https://unpkg.com/web-signature@0.1.8/bundle/index.js" type="module"></script>
+    <link href="./css/style.css" rel="stylesheet">
+    <title>Signature</title>
+</head>
+
+<body>
+<div id="app">
+    <div>
+        <a href="https://github.com/Pinbib/signature" target="_blank">
+            <img alt="Signature logo" class="logo" src="./public/signature.svg"/>
+        </a>
+        <h1>Signature</h1>
+        <div class="card">
+            <Counter ref/>
+        </div>
+        <p class="read-the-docs">
+            Click on the logos to learn more
+        </p>
+    </div>
+</div>
+<script src="./js/main.js" type="module"></script>
+</body>
+
+</html>

package/templates/js/js/components/Counter.js

@@ -0,0 +1,18 @@
+import { Component } from "https://unpkg.com/web-signature@0.1.8/bundle/index.min.js";
+
+export default class Counter extends Component {
+    name = "Counter";
+
+    count = 0;
+
+    render() {
+        return `<button id="button" type="button">count is ${this.count}</button>`;
+    }
+
+    onMount(el) {
+        el.addEventListener("click", () => {
+            this.count++;
+            this.ref?.update();
+        });
+    }
+}

package/templates/js/js/main.js

@@ -0,0 +1,9 @@
+import { Signature } from "https://unpkg.com/web-signature@0.1.8/bundle/index.min.js";
+
+import Counter from "./components/Counter.js";
+
+let si = new Signature();
+
+si.add(Counter);
+
+si.contact("#app");

package/templates/js/public/signature.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_35_2)">
+<path d="M8.636 28.7C8.228 28.5867 7.89933 28.4847 7.65 28.394C7.40067 28.326 7.276 28.292 7.276 28.292C7.32133 28.1787 7.29867 28.0767 7.208 27.986C7.14 27.8953 6.98133 27.8387 6.732 27.816C6.392 27.612 6.07467 27.3513 5.78 27.034C5.508 26.7393 5.28133 26.4447 5.1 26.15C4.91867 25.8553 4.78267 25.606 4.692 25.402C4.53333 25.062 4.454 24.858 4.454 24.79C4.47667 24.6993 4.61267 24.5973 4.862 24.484C5.11133 24.3027 5.29267 24.246 5.406 24.314C5.542 24.382 5.70067 24.6087 5.882 24.994C6.17667 25.5153 6.67533 25.912 7.378 26.184C8.10333 26.456 8.908 26.5807 9.792 26.558C10.6987 26.5127 11.56 26.3087 12.376 25.946C13.2147 25.606 13.736 25.2547 13.94 24.892C14.1667 24.5067 14.0873 24.0193 13.702 23.43C13.634 23.2487 13.5547 23.1013 13.464 22.988C13.3733 22.8747 13.226 22.7273 13.022 22.546C12.8407 22.3647 12.5347 22.07 12.104 21.662C11.764 21.5033 11.4467 21.356 11.152 21.22C10.88 21.084 10.5853 20.9367 10.268 20.778C9.90533 20.5967 9.46333 20.336 8.942 19.996C8.44333 19.6333 7.96733 19.2367 7.514 18.806C7.06067 18.3753 6.732 17.9787 6.528 17.616C6.16533 17.276 5.89333 16.8113 5.712 16.222C5.53067 15.61 5.46267 14.964 5.508 14.284C5.55333 13.604 5.72333 12.992 6.018 12.448C6.154 12.1307 6.38067 11.7453 6.698 11.292C7.038 10.816 7.412 10.34 7.82 9.864C8.228 9.388 8.62467 8.95733 9.01 8.572C9.39533 8.18667 9.71267 7.91467 9.962 7.756C10.1433 7.57467 10.336 7.39333 10.54 7.212C10.744 7.008 10.846 6.906 10.846 6.906C10.8687 6.79267 10.9027 6.736 10.948 6.736C11.016 6.736 11.05 6.736 11.05 6.736C11.1633 6.668 11.4127 6.55467 11.798 6.396C12.1833 6.23733 12.6027 5.94267 13.056 5.512C14.5747 4.78667 15.81 4.254 16.762 3.914C17.714 3.574 18.496 3.404 19.108 3.404C19.6747 3.42667 20.1847 3.56267 20.638 3.812C21.114 4.03867 21.4993 4.34467 21.794 4.73C22.1113 5.11533 22.304 5.58 22.372 6.124C22.5307 6.668 22.4853 7.30267 22.236 8.028C21.9867 8.73067 21.6127 9.39933 21.114 10.034C20.638 10.646 20.1167 11.1107 19.55 11.428C18.9153 11.7 18.4847 11.8247 18.258 11.802C18.054 11.7567 17.9633 11.5187 17.986 11.088C17.986 10.9067 18.0427 10.6913 18.156 10.442C18.292 10.1927 18.6433 9.75067 19.21 9.116C19.9353 8.05067 20.3773 7.20067 20.536 6.566C20.6947 5.93133 20.5473 5.58 20.094 5.512C19.958 5.46667 19.7087 5.46667 19.346 5.512C19.006 5.55733 18.6207 5.62533 18.19 5.716C17.782 5.784 17.4307 5.86333 17.136 5.954C16.8413 6.022 16.694 6.07867 16.694 6.124C16.694 6.124 16.694 6.158 16.694 6.226C16.694 6.294 16.6487 6.31667 16.558 6.294C16.5127 6.294 16.32 6.38467 15.98 6.566C15.64 6.74733 15.232 6.98533 14.756 7.28C14.28 7.57467 13.804 7.86933 13.328 8.164C12.852 8.45867 12.444 8.71933 12.104 8.946C11.7867 9.15 11.6167 9.27467 11.594 9.32C11.5487 9.56933 11.288 9.796 10.812 10C10.3587 10.272 9.93933 10.6687 9.554 11.19C9.19133 11.7113 8.78333 12.3573 8.33 13.128C7.94467 13.6493 7.67267 14.216 7.514 14.828C7.35533 15.4173 7.35533 15.8933 7.514 16.256C7.62733 16.6187 7.97867 17.0833 8.568 17.65C9.15733 18.2167 9.894 18.7607 10.778 19.282C11.5487 19.7127 12.24 20.1433 12.852 20.574C13.464 20.982 13.9627 21.3787 14.348 21.764C14.756 22.1493 15.028 22.4893 15.164 22.784C15.436 23.1693 15.6287 23.566 15.742 23.974C15.878 24.3593 15.946 24.7333 15.946 25.096C15.9687 25.4587 15.9347 25.7873 15.844 26.082C15.6853 26.4447 15.402 26.8187 14.994 27.204C14.6087 27.5893 14.28 27.7707 14.008 27.748C13.7587 27.816 13.566 27.8953 13.43 27.986C13.3167 28.0767 13.1807 28.156 13.022 28.224C12.8633 28.3147 12.5233 28.4053 12.002 28.496C11.5033 28.5867 10.948 28.6433 10.336 28.666C9.724 28.7113 9.15733 28.7227 8.636 28.7ZM20.9732 25.912C20.7919 25.7307 20.6559 25.504 20.5652 25.232C20.4972 24.96 20.4746 24.688 20.4972 24.416C20.5199 24.144 20.5766 23.9173 20.6672 23.736C20.6672 23.5547 20.6899 23.4187 20.7352 23.328C20.8032 23.2147 20.8259 23.1127 20.8032 23.022C20.7806 22.9313 20.8032 22.7727 20.8712 22.546C20.9392 22.3193 21.0072 22.104 21.0752 21.9C21.2339 21.5373 21.4039 21.1067 21.5852 20.608C21.7666 20.0867 21.9366 19.5767 22.0952 19.078C22.2539 18.5793 22.3899 18.1487 22.5032 17.786C22.6166 17.4233 22.6846 17.1967 22.7072 17.106C22.7072 16.834 22.8886 16.6867 23.2512 16.664C23.5232 16.5733 23.7272 16.5733 23.8632 16.664C23.9992 16.732 24.1806 16.9473 24.4072 17.31C24.5886 17.4913 24.6566 17.7633 24.6112 18.126C24.5659 18.4887 24.4186 18.942 24.1692 19.486C24.0786 19.6673 23.9652 19.928 23.8292 20.268C23.7159 20.608 23.6366 20.914 23.5912 21.186C23.5006 21.3673 23.3872 21.628 23.2512 21.968C23.1379 22.2853 23.0359 22.5913 22.9452 22.886C22.8999 22.9993 22.8546 23.1693 22.8092 23.396C22.7639 23.6 22.7072 23.8267 22.6392 24.076C22.5712 24.3027 22.4806 24.5067 22.3672 24.688C22.1632 25.6173 21.9706 26.1613 21.7892 26.32C21.6306 26.4787 21.3586 26.3427 20.9732 25.912ZM24.2712 12.108C24.1579 11.9947 24.0559 11.836 23.9652 11.632C23.8746 11.4053 23.8179 11.2013 23.7952 11.02C23.7726 10.816 23.7952 10.714 23.8632 10.714C24.0446 10.6913 24.2599 10.4987 24.5092 10.136C24.7586 9.77333 24.8606 9.456 24.8152 9.184C24.8152 9.09333 24.8492 9.014 24.9172 8.946C24.9852 8.85533 25.0646 8.79867 25.1552 8.776C25.4272 8.59467 25.6879 8.572 25.9372 8.708C26.2092 8.82133 26.4586 9.05933 26.6852 9.422C26.8892 9.85267 26.9459 10.2153 26.8552 10.51C26.7646 10.782 26.5152 11.1673 26.1072 11.666C25.7672 12.1193 25.4499 12.3687 25.1552 12.414C24.8832 12.4593 24.5886 12.3573 24.2712 12.108Z" fill="#2196F3"/>
+</g>
+<defs>
+<clipPath id="clip0_35_2">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/templates/vite-js/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8"/>
+    <link href="/vite.svg" rel="icon" type="image/svg+xml"/>
+    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+    <title>Vite + Signature</title>
+</head>
+
+<body>
+<div id="app">
+    <div>
+        <a href="https://vite.dev" target="_blank">
+            <img alt="Vite logo" class="logo" src="/vite.svg"/>
+        </a>
+        <a href="https://github.com/Pinbib/signature" target="_blank">
+            <img alt="Signature logo" class="logo vanilla" src="/signature.svg"/>
+        </a>
+        <h1>Hello Vite!</h1>
+        <div class="card">
+            <Counter ref/>
+        </div>
+        <p class="read-the-docs">
+            Click on the Vite logo to learn more
+        </p>
+    </div>
+</div>
+<script src="/src/main.js" type="module"></script>
+</body>
+
+</html>

package/templates/vite-js/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "#name",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+	"dev": "vite",
+	"build": "vite build",
+	"preview": "vite preview"
+  },
+  "devDependencies": {
+	"vite": "^7.0.4",
+	"vite-signature": "^0.0.4"
+  },
+  "dependencies": {
+	"web-signature": "^0.1.8"
+  }
+}

package/templates/vite-js/public/signature.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_35_2)">
+<path d="M8.636 28.7C8.228 28.5867 7.89933 28.4847 7.65 28.394C7.40067 28.326 7.276 28.292 7.276 28.292C7.32133 28.1787 7.29867 28.0767 7.208 27.986C7.14 27.8953 6.98133 27.8387 6.732 27.816C6.392 27.612 6.07467 27.3513 5.78 27.034C5.508 26.7393 5.28133 26.4447 5.1 26.15C4.91867 25.8553 4.78267 25.606 4.692 25.402C4.53333 25.062 4.454 24.858 4.454 24.79C4.47667 24.6993 4.61267 24.5973 4.862 24.484C5.11133 24.3027 5.29267 24.246 5.406 24.314C5.542 24.382 5.70067 24.6087 5.882 24.994C6.17667 25.5153 6.67533 25.912 7.378 26.184C8.10333 26.456 8.908 26.5807 9.792 26.558C10.6987 26.5127 11.56 26.3087 12.376 25.946C13.2147 25.606 13.736 25.2547 13.94 24.892C14.1667 24.5067 14.0873 24.0193 13.702 23.43C13.634 23.2487 13.5547 23.1013 13.464 22.988C13.3733 22.8747 13.226 22.7273 13.022 22.546C12.8407 22.3647 12.5347 22.07 12.104 21.662C11.764 21.5033 11.4467 21.356 11.152 21.22C10.88 21.084 10.5853 20.9367 10.268 20.778C9.90533 20.5967 9.46333 20.336 8.942 19.996C8.44333 19.6333 7.96733 19.2367 7.514 18.806C7.06067 18.3753 6.732 17.9787 6.528 17.616C6.16533 17.276 5.89333 16.8113 5.712 16.222C5.53067 15.61 5.46267 14.964 5.508 14.284C5.55333 13.604 5.72333 12.992 6.018 12.448C6.154 12.1307 6.38067 11.7453 6.698 11.292C7.038 10.816 7.412 10.34 7.82 9.864C8.228 9.388 8.62467 8.95733 9.01 8.572C9.39533 8.18667 9.71267 7.91467 9.962 7.756C10.1433 7.57467 10.336 7.39333 10.54 7.212C10.744 7.008 10.846 6.906 10.846 6.906C10.8687 6.79267 10.9027 6.736 10.948 6.736C11.016 6.736 11.05 6.736 11.05 6.736C11.1633 6.668 11.4127 6.55467 11.798 6.396C12.1833 6.23733 12.6027 5.94267 13.056 5.512C14.5747 4.78667 15.81 4.254 16.762 3.914C17.714 3.574 18.496 3.404 19.108 3.404C19.6747 3.42667 20.1847 3.56267 20.638 3.812C21.114 4.03867 21.4993 4.34467 21.794 4.73C22.1113 5.11533 22.304 5.58 22.372 6.124C22.5307 6.668 22.4853 7.30267 22.236 8.028C21.9867 8.73067 21.6127 9.39933 21.114 10.034C20.638 10.646 20.1167 11.1107 19.55 11.428C18.9153 11.7 18.4847 11.8247 18.258 11.802C18.054 11.7567 17.9633 11.5187 17.986 11.088C17.986 10.9067 18.0427 10.6913 18.156 10.442C18.292 10.1927 18.6433 9.75067 19.21 9.116C19.9353 8.05067 20.3773 7.20067 20.536 6.566C20.6947 5.93133 20.5473 5.58 20.094 5.512C19.958 5.46667 19.7087 5.46667 19.346 5.512C19.006 5.55733 18.6207 5.62533 18.19 5.716C17.782 5.784 17.4307 5.86333 17.136 5.954C16.8413 6.022 16.694 6.07867 16.694 6.124C16.694 6.124 16.694 6.158 16.694 6.226C16.694 6.294 16.6487 6.31667 16.558 6.294C16.5127 6.294 16.32 6.38467 15.98 6.566C15.64 6.74733 15.232 6.98533 14.756 7.28C14.28 7.57467 13.804 7.86933 13.328 8.164C12.852 8.45867 12.444 8.71933 12.104 8.946C11.7867 9.15 11.6167 9.27467 11.594 9.32C11.5487 9.56933 11.288 9.796 10.812 10C10.3587 10.272 9.93933 10.6687 9.554 11.19C9.19133 11.7113 8.78333 12.3573 8.33 13.128C7.94467 13.6493 7.67267 14.216 7.514 14.828C7.35533 15.4173 7.35533 15.8933 7.514 16.256C7.62733 16.6187 7.97867 17.0833 8.568 17.65C9.15733 18.2167 9.894 18.7607 10.778 19.282C11.5487 19.7127 12.24 20.1433 12.852 20.574C13.464 20.982 13.9627 21.3787 14.348 21.764C14.756 22.1493 15.028 22.4893 15.164 22.784C15.436 23.1693 15.6287 23.566 15.742 23.974C15.878 24.3593 15.946 24.7333 15.946 25.096C15.9687 25.4587 15.9347 25.7873 15.844 26.082C15.6853 26.4447 15.402 26.8187 14.994 27.204C14.6087 27.5893 14.28 27.7707 14.008 27.748C13.7587 27.816 13.566 27.8953 13.43 27.986C13.3167 28.0767 13.1807 28.156 13.022 28.224C12.8633 28.3147 12.5233 28.4053 12.002 28.496C11.5033 28.5867 10.948 28.6433 10.336 28.666C9.724 28.7113 9.15733 28.7227 8.636 28.7ZM20.9732 25.912C20.7919 25.7307 20.6559 25.504 20.5652 25.232C20.4972 24.96 20.4746 24.688 20.4972 24.416C20.5199 24.144 20.5766 23.9173 20.6672 23.736C20.6672 23.5547 20.6899 23.4187 20.7352 23.328C20.8032 23.2147 20.8259 23.1127 20.8032 23.022C20.7806 22.9313 20.8032 22.7727 20.8712 22.546C20.9392 22.3193 21.0072 22.104 21.0752 21.9C21.2339 21.5373 21.4039 21.1067 21.5852 20.608C21.7666 20.0867 21.9366 19.5767 22.0952 19.078C22.2539 18.5793 22.3899 18.1487 22.5032 17.786C22.6166 17.4233 22.6846 17.1967 22.7072 17.106C22.7072 16.834 22.8886 16.6867 23.2512 16.664C23.5232 16.5733 23.7272 16.5733 23.8632 16.664C23.9992 16.732 24.1806 16.9473 24.4072 17.31C24.5886 17.4913 24.6566 17.7633 24.6112 18.126C24.5659 18.4887 24.4186 18.942 24.1692 19.486C24.0786 19.6673 23.9652 19.928 23.8292 20.268C23.7159 20.608 23.6366 20.914 23.5912 21.186C23.5006 21.3673 23.3872 21.628 23.2512 21.968C23.1379 22.2853 23.0359 22.5913 22.9452 22.886C22.8999 22.9993 22.8546 23.1693 22.8092 23.396C22.7639 23.6 22.7072 23.8267 22.6392 24.076C22.5712 24.3027 22.4806 24.5067 22.3672 24.688C22.1632 25.6173 21.9706 26.1613 21.7892 26.32C21.6306 26.4787 21.3586 26.3427 20.9732 25.912ZM24.2712 12.108C24.1579 11.9947 24.0559 11.836 23.9652 11.632C23.8746 11.4053 23.8179 11.2013 23.7952 11.02C23.7726 10.816 23.7952 10.714 23.8632 10.714C24.0446 10.6913 24.2599 10.4987 24.5092 10.136C24.7586 9.77333 24.8606 9.456 24.8152 9.184C24.8152 9.09333 24.8492 9.014 24.9172 8.946C24.9852 8.85533 25.0646 8.79867 25.1552 8.776C25.4272 8.59467 25.6879 8.572 25.9372 8.708C26.2092 8.82133 26.4586 9.05933 26.6852 9.422C26.8892 9.85267 26.9459 10.2153 26.8552 10.51C26.7646 10.782 26.5152 11.1673 26.1072 11.666C25.7672 12.1193 25.4499 12.3687 25.1552 12.414C24.8832 12.4593 24.5886 12.3573 24.2712 12.108Z" fill="#2196F3"/>
+</g>
+<defs>
+<clipPath id="clip0_35_2">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/templates/vite-js/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/vite-js/src/components/Counter.js

@@ -0,0 +1,18 @@
+import { Component } from "web-signature";
+
+export default class Counter extends Component {
+    name = "Counter";
+
+    count = 0;
+
+    render() {
+        return `<button id="button" type="button">count is ${this.count}</button>`;
+    }
+
+    onMount(el) {
+        el.addEventListener("click", () => {
+            this.count++;
+            this.ref.update();
+        });
+    }
+}

package/templates/vite-js/src/main.js

@@ -0,0 +1,10 @@
+import { Signature } from 'web-signature';
+
+import './style.css';
+import Counter from './components/Counter';
+
+const si = new Signature();
+
+si.add(Counter);
+
+si.contact("#app");

package/templates/vite-js/src/style.css

@@ -0,0 +1,103 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #2196F3);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/vite-js/vite.config.js

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import Signature from 'vite-signature';
+
+export default defineConfig({
+    plugins: [
+        Signature()
+    ]
+})

package/templates/vite-ts/index.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite + TS + Signature</title>
+</head>
+
+<body>
+  <div id="app">
+    <div>
+      <a href="https://vite.dev" target="_blank">
+        <img src="/vite.svg" class="logo" alt="Vite logo" />
+      </a>
+      <a href="https://www.typescriptlang.org/" target="_blank">
+        <img src="typescript.svg" class="logo vanilla" alt="TypeScript logo" />
+      </a>
+      <a href="https://github.com/Pinbib/signature" target="_blank">
+        <img src="/signature.svg" class="logo canella" alt="Signature logo" />
+      </a>
+      <h1>Vite + TypeScript + Signature</h1>
+      <div class="card">
+        <Counter ref />
+      </div>
+      <p class="read-the-docs">
+        Click on the logos to learn more
+      </p>
+    </div>
+  </div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

package/templates/vite-ts/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "#name",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "~5.8.3",
+    "vite": "^7.0.4",
+    "vite-signature": "^0.0.4"
+  },
+  "dependencies": {
+    "web-signature": "^0.1.8"
+  }
+}

package/templates/vite-ts/public/signature.svg

@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_35_2)">
+<path d="M8.636 28.7C8.228 28.5867 7.89933 28.4847 7.65 28.394C7.40067 28.326 7.276 28.292 7.276 28.292C7.32133 28.1787 7.29867 28.0767 7.208 27.986C7.14 27.8953 6.98133 27.8387 6.732 27.816C6.392 27.612 6.07467 27.3513 5.78 27.034C5.508 26.7393 5.28133 26.4447 5.1 26.15C4.91867 25.8553 4.78267 25.606 4.692 25.402C4.53333 25.062 4.454 24.858 4.454 24.79C4.47667 24.6993 4.61267 24.5973 4.862 24.484C5.11133 24.3027 5.29267 24.246 5.406 24.314C5.542 24.382 5.70067 24.6087 5.882 24.994C6.17667 25.5153 6.67533 25.912 7.378 26.184C8.10333 26.456 8.908 26.5807 9.792 26.558C10.6987 26.5127 11.56 26.3087 12.376 25.946C13.2147 25.606 13.736 25.2547 13.94 24.892C14.1667 24.5067 14.0873 24.0193 13.702 23.43C13.634 23.2487 13.5547 23.1013 13.464 22.988C13.3733 22.8747 13.226 22.7273 13.022 22.546C12.8407 22.3647 12.5347 22.07 12.104 21.662C11.764 21.5033 11.4467 21.356 11.152 21.22C10.88 21.084 10.5853 20.9367 10.268 20.778C9.90533 20.5967 9.46333 20.336 8.942 19.996C8.44333 19.6333 7.96733 19.2367 7.514 18.806C7.06067 18.3753 6.732 17.9787 6.528 17.616C6.16533 17.276 5.89333 16.8113 5.712 16.222C5.53067 15.61 5.46267 14.964 5.508 14.284C5.55333 13.604 5.72333 12.992 6.018 12.448C6.154 12.1307 6.38067 11.7453 6.698 11.292C7.038 10.816 7.412 10.34 7.82 9.864C8.228 9.388 8.62467 8.95733 9.01 8.572C9.39533 8.18667 9.71267 7.91467 9.962 7.756C10.1433 7.57467 10.336 7.39333 10.54 7.212C10.744 7.008 10.846 6.906 10.846 6.906C10.8687 6.79267 10.9027 6.736 10.948 6.736C11.016 6.736 11.05 6.736 11.05 6.736C11.1633 6.668 11.4127 6.55467 11.798 6.396C12.1833 6.23733 12.6027 5.94267 13.056 5.512C14.5747 4.78667 15.81 4.254 16.762 3.914C17.714 3.574 18.496 3.404 19.108 3.404C19.6747 3.42667 20.1847 3.56267 20.638 3.812C21.114 4.03867 21.4993 4.34467 21.794 4.73C22.1113 5.11533 22.304 5.58 22.372 6.124C22.5307 6.668 22.4853 7.30267 22.236 8.028C21.9867 8.73067 21.6127 9.39933 21.114 10.034C20.638 10.646 20.1167 11.1107 19.55 11.428C18.9153 11.7 18.4847 11.8247 18.258 11.802C18.054 11.7567 17.9633 11.5187 17.986 11.088C17.986 10.9067 18.0427 10.6913 18.156 10.442C18.292 10.1927 18.6433 9.75067 19.21 9.116C19.9353 8.05067 20.3773 7.20067 20.536 6.566C20.6947 5.93133 20.5473 5.58 20.094 5.512C19.958 5.46667 19.7087 5.46667 19.346 5.512C19.006 5.55733 18.6207 5.62533 18.19 5.716C17.782 5.784 17.4307 5.86333 17.136 5.954C16.8413 6.022 16.694 6.07867 16.694 6.124C16.694 6.124 16.694 6.158 16.694 6.226C16.694 6.294 16.6487 6.31667 16.558 6.294C16.5127 6.294 16.32 6.38467 15.98 6.566C15.64 6.74733 15.232 6.98533 14.756 7.28C14.28 7.57467 13.804 7.86933 13.328 8.164C12.852 8.45867 12.444 8.71933 12.104 8.946C11.7867 9.15 11.6167 9.27467 11.594 9.32C11.5487 9.56933 11.288 9.796 10.812 10C10.3587 10.272 9.93933 10.6687 9.554 11.19C9.19133 11.7113 8.78333 12.3573 8.33 13.128C7.94467 13.6493 7.67267 14.216 7.514 14.828C7.35533 15.4173 7.35533 15.8933 7.514 16.256C7.62733 16.6187 7.97867 17.0833 8.568 17.65C9.15733 18.2167 9.894 18.7607 10.778 19.282C11.5487 19.7127 12.24 20.1433 12.852 20.574C13.464 20.982 13.9627 21.3787 14.348 21.764C14.756 22.1493 15.028 22.4893 15.164 22.784C15.436 23.1693 15.6287 23.566 15.742 23.974C15.878 24.3593 15.946 24.7333 15.946 25.096C15.9687 25.4587 15.9347 25.7873 15.844 26.082C15.6853 26.4447 15.402 26.8187 14.994 27.204C14.6087 27.5893 14.28 27.7707 14.008 27.748C13.7587 27.816 13.566 27.8953 13.43 27.986C13.3167 28.0767 13.1807 28.156 13.022 28.224C12.8633 28.3147 12.5233 28.4053 12.002 28.496C11.5033 28.5867 10.948 28.6433 10.336 28.666C9.724 28.7113 9.15733 28.7227 8.636 28.7ZM20.9732 25.912C20.7919 25.7307 20.6559 25.504 20.5652 25.232C20.4972 24.96 20.4746 24.688 20.4972 24.416C20.5199 24.144 20.5766 23.9173 20.6672 23.736C20.6672 23.5547 20.6899 23.4187 20.7352 23.328C20.8032 23.2147 20.8259 23.1127 20.8032 23.022C20.7806 22.9313 20.8032 22.7727 20.8712 22.546C20.9392 22.3193 21.0072 22.104 21.0752 21.9C21.2339 21.5373 21.4039 21.1067 21.5852 20.608C21.7666 20.0867 21.9366 19.5767 22.0952 19.078C22.2539 18.5793 22.3899 18.1487 22.5032 17.786C22.6166 17.4233 22.6846 17.1967 22.7072 17.106C22.7072 16.834 22.8886 16.6867 23.2512 16.664C23.5232 16.5733 23.7272 16.5733 23.8632 16.664C23.9992 16.732 24.1806 16.9473 24.4072 17.31C24.5886 17.4913 24.6566 17.7633 24.6112 18.126C24.5659 18.4887 24.4186 18.942 24.1692 19.486C24.0786 19.6673 23.9652 19.928 23.8292 20.268C23.7159 20.608 23.6366 20.914 23.5912 21.186C23.5006 21.3673 23.3872 21.628 23.2512 21.968C23.1379 22.2853 23.0359 22.5913 22.9452 22.886C22.8999 22.9993 22.8546 23.1693 22.8092 23.396C22.7639 23.6 22.7072 23.8267 22.6392 24.076C22.5712 24.3027 22.4806 24.5067 22.3672 24.688C22.1632 25.6173 21.9706 26.1613 21.7892 26.32C21.6306 26.4787 21.3586 26.3427 20.9732 25.912ZM24.2712 12.108C24.1579 11.9947 24.0559 11.836 23.9652 11.632C23.8746 11.4053 23.8179 11.2013 23.7952 11.02C23.7726 10.816 23.7952 10.714 23.8632 10.714C24.0446 10.6913 24.2599 10.4987 24.5092 10.136C24.7586 9.77333 24.8606 9.456 24.8152 9.184C24.8152 9.09333 24.8492 9.014 24.9172 8.946C24.9852 8.85533 25.0646 8.79867 25.1552 8.776C25.4272 8.59467 25.6879 8.572 25.9372 8.708C26.2092 8.82133 26.4586 9.05933 26.6852 9.422C26.8892 9.85267 26.9459 10.2153 26.8552 10.51C26.7646 10.782 26.5152 11.1673 26.1072 11.666C25.7672 12.1193 25.4499 12.3687 25.1552 12.414C24.8832 12.4593 24.5886 12.3573 24.2712 12.108Z" fill="#2196F3"/>
+</g>
+<defs>
+<clipPath id="clip0_35_2">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/templates/vite-ts/public/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/templates/vite-ts/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/templates/vite-ts/src/components/Counter.ts

@@ -0,0 +1,19 @@
+import { Component } from "web-signature";
+
+// @ts-ignore
+export default class Counter extends Component {
+    name = "Counter";
+
+    count: number = 0;
+
+    render(): string {
+        return `<button id="button" type="button">count is ${this.count}</button>`;
+    }
+
+    onMount(el: Element): void {
+        el.addEventListener("click", () => {
+            this.count++;
+            this.ref?.update();
+        });
+    }
+}

package/templates/vite-ts/src/main.ts

@@ -0,0 +1,10 @@
+import { Signature } from 'web-signature';
+
+import './style.css';
+import Counter from './components/Counter';
+
+const si: Signature = new Signature();
+
+si.add(Counter, "Counter");
+
+si.contact("#app");

package/templates/vite-ts/src/style.css

@@ -0,0 +1,107 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.logo.canella:hover {
+  filter: drop-shadow(0 0 2em #2196F3);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/templates/vite-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/vite-ts/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "src"
+  ]
+}

package/templates/vite-ts/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+import Signature from "vite-signature";
+
+export default defineConfig({
+    plugins: [
+        Signature()
+    ]
+});