create-dothtml 6.0.8

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Josh Sideris
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,25 @@
+# create-dothtml
+
+The official project initializer for [DOThtml](https://dothtml.org/).
+
+## Usage
+
+```bash
+npx create-dothtml <project-name> [options]
+```
+
+Or using `npm init`:
+
+```bash
+npm init dothtml <project-name> -- [options]
+```
+
+## Options
+
+- `--js`: Use JavaScript instead of TypeScript (default).
+- `--no-lint`: Skip adding ESLint to the project.
+
+## Features
+
+- **Vite-powered**: Instant dev server and fast builds.
+- **DOThtml-friendly Linting**: By default, projects include an ESLint configuration that is specifically tuned to allow DOThtml's signature method chaining (disables `newline-per-chained-call`).

package/bin/create-dothtml

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+
+require("../dist/index.js").cli(process.argv);

package/dist/index.d.mts

@@ -0,0 +1,3 @@
+declare function cli(args: string[]): Promise<void>;
+
+export { cli };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+declare function cli(args: string[]): Promise<void>;
+
+export { cli };

package/dist/index.js

@@ -0,0 +1,241 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  cli: () => cli
+});
+module.exports = __toCommonJS(index_exports);
+var import_fs = __toESM(require("fs"));
+var import_path = __toESM(require("path"));
+var import_url = require("url");
+var import_meta = {};
+var getDirname = () => {
+  try {
+    return __dirname;
+  } catch {
+    return import_path.default.dirname((0, import_url.fileURLToPath)(import_meta.url));
+  }
+};
+var cc = {
+  reset: "\x1B[0m",
+  bright: "\x1B[1m",
+  dim: "\x1B[2m",
+  underscore: "\x1B[4m",
+  blink: "\x1B[5m",
+  reverse: "\x1B[7m",
+  hidden: "\x1B[8m",
+  fgBlack: "\x1B[30m",
+  fgRed: "\x1B[31m",
+  FgGreen: "\x1B[32m",
+  fgYellow: "\x1B[33m",
+  fgBlue: "\x1B[34m",
+  fgMagenta: "\x1B[35m",
+  fgCyan: "\x1B[36m",
+  fgWhite: "\x1B[37m",
+  fgBrightBlack: "\x1B[90m",
+  fgBrightRed: "\x1B[91m",
+  FgBrightGreen: "\x1B[92m",
+  fgBrightYellow: "\x1B[93m",
+  fgBrightBlue: "\x1B[94m",
+  fgBrightMagenta: "\x1B[95m",
+  fgBrightCyan: "\x1B[96m",
+  fgBrightWhite: "\x1B[97m"
+};
+async function cli(args) {
+  const command = args[2];
+  if (command === "generate" || command === "g") {
+    handleGenerate(args.slice(3));
+    return;
+  }
+  let projectName = args[2];
+  let startIndex = 2;
+  if (projectName === "init") {
+    projectName = args[3];
+    startIndex = 3;
+  }
+  if (!projectName || projectName === "--help" || projectName === "-h") {
+    printUsage();
+    return;
+  }
+  const targetDir = import_path.default.resolve(process.cwd(), projectName);
+  if (import_fs.default.existsSync(targetDir)) {
+    printError(`Directory "${projectName}" already exists.`);
+    return;
+  }
+  console.log(`
+Creating a new DOThtml app in ${cc.fgBrightBlue}${targetDir}${cc.reset}...`);
+  const argsList = args.slice(startIndex);
+  const isJs = argsList.includes("--js");
+  const noLint = argsList.includes("--no-lint");
+  const template = isJs ? "vanilla-js" : "vanilla-ts";
+  const currentDir = getDirname();
+  let templateDir = import_path.default.resolve(currentDir, "..", "templates", template);
+  if (!import_fs.default.existsSync(templateDir)) {
+    templateDir = import_path.default.resolve(currentDir, "templates", template);
+    if (!import_fs.default.existsSync(templateDir)) {
+      templateDir = import_path.default.resolve(process.cwd(), "templates", template);
+      if (!import_fs.default.existsSync(templateDir)) {
+        printError(`Template directory not found. Tried:
+- ${import_path.default.resolve(currentDir, "..", "templates", template)}
+- ${import_path.default.resolve(currentDir, "templates", template)}`);
+        return;
+      }
+    }
+  }
+  try {
+    import_fs.default.mkdirSync(targetDir, { recursive: true });
+    import_fs.default.cpSync(templateDir, targetDir, { recursive: true });
+    const filesToProcess = ["package.json", "index.html"];
+    for (const file of filesToProcess) {
+      const filePath = import_path.default.join(targetDir, file);
+      if (import_fs.default.existsSync(filePath)) {
+        let content = import_fs.default.readFileSync(filePath, "utf-8");
+        content = content.replace(/{{name}}/g, projectName);
+        if (file === "package.json" && noLint) {
+          const pkg = JSON.parse(content);
+          delete pkg.scripts.lint;
+          if (pkg.devDependencies) {
+            delete pkg.devDependencies.eslint;
+            delete pkg.devDependencies["@eslint/js"];
+            delete pkg.devDependencies["typescript-eslint"];
+          }
+          content = JSON.stringify(pkg, null, 2);
+        }
+        import_fs.default.writeFileSync(filePath, content);
+      }
+    }
+    if (noLint) {
+      const eslintConfigPath = import_path.default.join(targetDir, "eslint.config.js");
+      if (import_fs.default.existsSync(eslintConfigPath)) {
+        import_fs.default.unlinkSync(eslintConfigPath);
+      }
+    }
+    console.log(`
+${cc.FgGreen}Success!${cc.reset} Created ${projectName} at ${targetDir}`);
+    console.log(`Inside that directory, you can run several commands:`);
+    console.log(`
+  ${cc.fgBrightBlue}npm install${cc.reset}`);
+    console.log(`    Installs the dependencies.`);
+    console.log(`
+  ${cc.fgBrightBlue}npm run dev${cc.reset}`);
+    console.log(`    Starts the development server.`);
+    console.log(`
+  ${cc.fgBrightBlue}npm test${cc.reset}`);
+    console.log(`    Runs the test suite using Vitest.`);
+    console.log(`
+  ${cc.fgBrightBlue}npm run build${cc.reset}`);
+    console.log(`    Bundles the app into static files for production.`);
+    if (!noLint) {
+      console.log(`
+  ${cc.fgBrightBlue}npm run lint${cc.reset}`);
+      console.log(`    Checks the code for potential errors.`);
+    }
+    console.log(`
+We suggest that you begin by typing:`);
+    console.log(`
+  ${cc.fgBrightBlue}cd${cc.reset} ${projectName}`);
+    console.log(`  ${cc.fgBrightBlue}npm install${cc.reset}`);
+    console.log(`  ${cc.fgBrightBlue}npm run dev${cc.reset}
+`);
+  } catch (err) {
+    printError(`Error creating project: ${err.message}`);
+  }
+}
+function handleGenerate(args) {
+  const type = args[0];
+  const name = args[1];
+  if (type !== "component" || !name) {
+    console.log(`
+${cc.bright}USAGE${cc.reset}`);
+    console.log(`  npx create-dothtml generate component <name>
+`);
+    return;
+  }
+  const isTs = import_fs.default.existsSync(import_path.default.join(process.cwd(), "tsconfig.json"));
+  const ext = isTs ? "ts" : "js";
+  const componentsDir = import_path.default.join(process.cwd(), "src", "components");
+  if (!import_fs.default.existsSync(componentsDir)) {
+    import_fs.default.mkdirSync(componentsDir, { recursive: true });
+  }
+  const filePath = import_path.default.join(componentsDir, `${name}.${ext}`);
+  if (import_fs.default.existsSync(filePath)) {
+    printError(`Component "${name}" already exists at ${filePath}`);
+    return;
+  }
+  const template = isTs ? `import { dot, IDotComponent, IDotDocument, FrameworkItems } from 'dothtml';
+
+export class ${name} implements IDotComponent {
+  _: FrameworkItems;
+
+  build(): IDotDocument {
+    return dot.div({ class: '${name.toLowerCase()}' })
+      .h2('${name} Component')
+      .p('This is a new component created with create-dothtml.');
+  }
+}
+` : `import { dot } from 'dothtml';
+
+export class ${name} {
+  build() {
+    return dot.div({ class: '${name.toLowerCase()}' })
+      .h2('${name} Component')
+      .p('This is a new component created with create-dothtml.');
+  }
+}
+`;
+  import_fs.default.writeFileSync(filePath, template);
+  console.log(`
+${cc.FgGreen}Success!${cc.reset} Created component ${cc.fgBrightBlue}${name}${cc.reset} at ${filePath}
+`);
+}
+function printUsage() {
+  console.log(`
+${cc.fgBrightBlue}create-dothtml${cc.reset}`);
+  console.log(`The official project initializer for DOThtml.
+`);
+  console.log(`${cc.bright}USAGE${cc.reset}`);
+  console.log(`  npx create-dothtml ${cc.fgBrightWhite}<project-name>${cc.reset} [options]`);
+  console.log(`  npx create-dothtml ${cc.fgBrightWhite}generate component <name>${cc.reset}
+`);
+  console.log(`${cc.bright}OPTIONS${cc.reset}`);
+  console.log(`  --js       Use JavaScript instead of TypeScript (default)`);
+  console.log(`  --no-lint  Skip adding ESLint to the project`);
+  console.log(`  --help     Show this help message
+`);
+}
+function printError(msg) {
+  console.error(`${cc.fgRed}Error: ${msg}${cc.reset}`);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  cli
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import fs from \"fs\";\nimport path from \"path\";\nimport { fileURLToPath } from 'url';\n\n// Helper to get __dirname in both CJS and ESM\nconst getDirname = () => {\n\ttry {\n\t\treturn __dirname;\n\t} catch {\n\t\treturn path.dirname(fileURLToPath(import.meta.url));\n\t}\n};\n\nconst cc = {\n\treset: \"\\x1b[0m\",\n\tbright: \"\\x1b[1m\",\n\tdim: \"\\x1b[2m\",\n\tunderscore: \"\\x1b[4m\",\n\tblink: \"\\x1b[5m\",\n\treverse: \"\\x1b[7m\",\n\thidden: \"\\x1b[8m\",\n\n\tfgBlack: \"\\x1b[30m\",\n\tfgRed: \"\\x1b[31m\",\n\tFgGreen: \"\\x1b[32m\",\n\tfgYellow: \"\\x1b[33m\",\n\tfgBlue: \"\\x1b[34m\",\n\tfgMagenta: \"\\x1b[35m\",\n\tfgCyan: \"\\x1b[36m\",\n\tfgWhite: \"\\x1b[37m\",\n\n\tfgBrightBlack: \"\\x1b[90m\",\n\tfgBrightRed: \"\\x1b[91m\",\n\tFgBrightGreen: \"\\x1b[92m\",\n\tfgBrightYellow: \"\\x1b[93m\",\n\tfgBrightBlue: \"\\x1b[94m\",\n\tfgBrightMagenta: \"\\x1b[95m\",\n\tfgBrightCyan: \"\\x1b[96m\",\n\tfgBrightWhite: \"\\x1b[97m\",\n}\n\nexport async function cli(args: string[]) {\n\tconst command = args[2];\n\n\tif (command === \"generate\" || command === \"g\") {\n\t\thandleGenerate(args.slice(3));\n\t\treturn;\n\t}\n\n\tlet projectName = args[2];\n\tlet startIndex = 2;\n\n\tif (projectName === \"init\") {\n\t\tprojectName = args[3];\n\t\tstartIndex = 3;\n\t}\n\n\tif (!projectName || projectName === \"--help\" || projectName === \"-h\") {\n\t\tprintUsage();\n\t\treturn;\n\t}\n\n\tconst targetDir = path.resolve(process.cwd(), projectName);\n\tif (fs.existsSync(targetDir)) {\n\t\tprintError(`Directory \"${projectName}\" already exists.`);\n\t\treturn;\n\t}\n\n\tconsole.log(`\\nCreating a new DOThtml app in ${cc.fgBrightBlue}${targetDir}${cc.reset}...`);\n\n\t// Template selection (default to TS)\n\tconst argsList = args.slice(startIndex);\n\tconst isJs = argsList.includes(\"--js\");\n\tconst noLint = argsList.includes(\"--no-lint\");\n\tconst template = isJs ? \"vanilla-js\" : \"vanilla-ts\";\n\t\n\tconst currentDir = getDirname();\n\t// When running from dist/index.js, templates is at ../templates\n\tlet templateDir = path.resolve(currentDir, \"..\", \"templates\", template);\n\n\tif (!fs.existsSync(templateDir)) {\n\t\t// Fallback for development if running directly from src\n\t\ttemplateDir = path.resolve(currentDir, \"templates\", template);\n\t\tif (!fs.existsSync(templateDir)) {\n\t\t\t// Another fallback for how tsup might bundle it\n\t\t\ttemplateDir = path.resolve(process.cwd(), \"templates\", template);\n\t\t\tif (!fs.existsSync(templateDir)) {\n\t\t\t\tprintError(`Template directory not found. Tried:\\n- ${path.resolve(currentDir, \"..\", \"templates\", template)}\\n- ${path.resolve(currentDir, \"templates\", template)}`);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\ttry {\n\t\t// Copy template\n\t\tfs.mkdirSync(targetDir, { recursive: true });\n\t\t// @ts-ignore - cpSync is available in Node 16.7.0+\n\t\tfs.cpSync(templateDir, targetDir, { recursive: true });\n\n\t\t// Replace placeholders in package.json and index.html\n\t\tconst filesToProcess = [\"package.json\", \"index.html\"];\n\t\tfor (const file of filesToProcess) {\n\t\t\tconst filePath = path.join(targetDir, file);\n\t\t\tif (fs.existsSync(filePath)) {\n\t\t\t\tlet content = fs.readFileSync(filePath, \"utf-8\");\n\t\t\t\tcontent = content.replace(/{{name}}/g, projectName);\n\n\t\t\t\tif (file === \"package.json\" && noLint) {\n\t\t\t\t\tconst pkg = JSON.parse(content);\n\t\t\t\t\tdelete pkg.scripts.lint;\n\t\t\t\t\tif (pkg.devDependencies) {\n\t\t\t\t\t\tdelete pkg.devDependencies.eslint;\n\t\t\t\t\t\tdelete pkg.devDependencies[\"@eslint/js\"];\n\t\t\t\t\t\tdelete pkg.devDependencies[\"typescript-eslint\"];\n\t\t\t\t\t}\n\t\t\t\t\tcontent = JSON.stringify(pkg, null, 2);\n\t\t\t\t}\n\n\t\t\t\tfs.writeFileSync(filePath, content);\n\t\t\t}\n\t\t}\n\n\t\tif (noLint) {\n\t\t\tconst eslintConfigPath = path.join(targetDir, \"eslint.config.js\");\n\t\t\tif (fs.existsSync(eslintConfigPath)) {\n\t\t\t\tfs.unlinkSync(eslintConfigPath);\n\t\t\t}\n\t\t}\n\n\t\tconsole.log(`\\n${cc.FgGreen}Success!${cc.reset} Created ${projectName} at ${targetDir}`);\n\t\tconsole.log(`Inside that directory, you can run several commands:`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm install${cc.reset}`);\n\t\tconsole.log(`    Installs the dependencies.`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm run dev${cc.reset}`);\n\t\tconsole.log(`    Starts the development server.`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm test${cc.reset}`);\n\t\tconsole.log(`    Runs the test suite using Vitest.`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm run build${cc.reset}`);\n\t\tconsole.log(`    Bundles the app into static files for production.`);\n\n\t\tif (!noLint) {\n\t\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm run lint${cc.reset}`);\n\t\t\tconsole.log(`    Checks the code for potential errors.`);\n\t\t}\n\n\t\tconsole.log(`\\nWe suggest that you begin by typing:`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}cd${cc.reset} ${projectName}`);\n\t\tconsole.log(`  ${cc.fgBrightBlue}npm install${cc.reset}`);\n\t\tconsole.log(`  ${cc.fgBrightBlue}npm run dev${cc.reset}\\n`);\n\n\t} catch (err: any) {\n\t\tprintError(`Error creating project: ${err.message}`);\n\t}\n}\n\nfunction handleGenerate(args: string[]) {\n\tconst type = args[0];\n\tconst name = args[1];\n\n\tif (type !== \"component\" || !name) {\n\t\tconsole.log(`\\n${cc.bright}USAGE${cc.reset}`);\n\t\tconsole.log(`  npx create-dothtml generate component <name>\\n`);\n\t\treturn;\n\t}\n\n\tconst isTs = fs.existsSync(path.join(process.cwd(), \"tsconfig.json\"));\n\tconst ext = isTs ? \"ts\" : \"js\";\n\tconst componentsDir = path.join(process.cwd(), \"src\", \"components\");\n\n\tif (!fs.existsSync(componentsDir)) {\n\t\tfs.mkdirSync(componentsDir, { recursive: true });\n\t}\n\n\tconst filePath = path.join(componentsDir, `${name}.${ext}`);\n\tif (fs.existsSync(filePath)) {\n\t\tprintError(`Component \"${name}\" already exists at ${filePath}`);\n\t\treturn;\n\t}\n\n\tconst template = isTs \n\t\t? `import { dot, IDotComponent, IDotDocument, FrameworkItems } from 'dothtml';\n\nexport class ${name} implements IDotComponent {\n  _: FrameworkItems;\n\n  build(): IDotDocument {\n    return dot.div({ class: '${name.toLowerCase()}' })\n      .h2('${name} Component')\n      .p('This is a new component created with create-dothtml.');\n  }\n}\n`\n\t\t: `import { dot } from 'dothtml';\n\nexport class ${name} {\n  build() {\n    return dot.div({ class: '${name.toLowerCase()}' })\n      .h2('${name} Component')\n      .p('This is a new component created with create-dothtml.');\n  }\n}\n`;\n\n\tfs.writeFileSync(filePath, template);\n\tconsole.log(`\\n${cc.FgGreen}Success!${cc.reset} Created component ${cc.fgBrightBlue}${name}${cc.reset} at ${filePath}\\n`);\n}\n\nfunction printUsage() {\n\tconsole.log(`\\n${cc.fgBrightBlue}create-dothtml${cc.reset}`);\n\tconsole.log(`The official project initializer for DOThtml.\\n`);\n\tconsole.log(`${cc.bright}USAGE${cc.reset}`);\n\tconsole.log(`  npx create-dothtml ${cc.fgBrightWhite}<project-name>${cc.reset} [options]`);\n\tconsole.log(`  npx create-dothtml ${cc.fgBrightWhite}generate component <name>${cc.reset}\\n`);\n\tconsole.log(`${cc.bright}OPTIONS${cc.reset}`);\n\tconsole.log(`  --js       Use JavaScript instead of TypeScript (default)`);\n\tconsole.log(`  --no-lint  Skip adding ESLint to the project`);\n\tconsole.log(`  --help     Show this help message\\n`);\n}\n\nfunction printError(msg: string) {\n\tconsole.error(`${cc.fgRed}Error: ${msg}${cc.reset}`);\n}\n"],"mappings":"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","names":["path","fs"]}

package/dist/index.mjs

@@ -0,0 +1,205 @@
+// src/index.ts
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+var getDirname = () => {
+  try {
+    return __dirname;
+  } catch {
+    return path.dirname(fileURLToPath(import.meta.url));
+  }
+};
+var cc = {
+  reset: "\x1B[0m",
+  bright: "\x1B[1m",
+  dim: "\x1B[2m",
+  underscore: "\x1B[4m",
+  blink: "\x1B[5m",
+  reverse: "\x1B[7m",
+  hidden: "\x1B[8m",
+  fgBlack: "\x1B[30m",
+  fgRed: "\x1B[31m",
+  FgGreen: "\x1B[32m",
+  fgYellow: "\x1B[33m",
+  fgBlue: "\x1B[34m",
+  fgMagenta: "\x1B[35m",
+  fgCyan: "\x1B[36m",
+  fgWhite: "\x1B[37m",
+  fgBrightBlack: "\x1B[90m",
+  fgBrightRed: "\x1B[91m",
+  FgBrightGreen: "\x1B[92m",
+  fgBrightYellow: "\x1B[93m",
+  fgBrightBlue: "\x1B[94m",
+  fgBrightMagenta: "\x1B[95m",
+  fgBrightCyan: "\x1B[96m",
+  fgBrightWhite: "\x1B[97m"
+};
+async function cli(args) {
+  const command = args[2];
+  if (command === "generate" || command === "g") {
+    handleGenerate(args.slice(3));
+    return;
+  }
+  let projectName = args[2];
+  let startIndex = 2;
+  if (projectName === "init") {
+    projectName = args[3];
+    startIndex = 3;
+  }
+  if (!projectName || projectName === "--help" || projectName === "-h") {
+    printUsage();
+    return;
+  }
+  const targetDir = path.resolve(process.cwd(), projectName);
+  if (fs.existsSync(targetDir)) {
+    printError(`Directory "${projectName}" already exists.`);
+    return;
+  }
+  console.log(`
+Creating a new DOThtml app in ${cc.fgBrightBlue}${targetDir}${cc.reset}...`);
+  const argsList = args.slice(startIndex);
+  const isJs = argsList.includes("--js");
+  const noLint = argsList.includes("--no-lint");
+  const template = isJs ? "vanilla-js" : "vanilla-ts";
+  const currentDir = getDirname();
+  let templateDir = path.resolve(currentDir, "..", "templates", template);
+  if (!fs.existsSync(templateDir)) {
+    templateDir = path.resolve(currentDir, "templates", template);
+    if (!fs.existsSync(templateDir)) {
+      templateDir = path.resolve(process.cwd(), "templates", template);
+      if (!fs.existsSync(templateDir)) {
+        printError(`Template directory not found. Tried:
+- ${path.resolve(currentDir, "..", "templates", template)}
+- ${path.resolve(currentDir, "templates", template)}`);
+        return;
+      }
+    }
+  }
+  try {
+    fs.mkdirSync(targetDir, { recursive: true });
+    fs.cpSync(templateDir, targetDir, { recursive: true });
+    const filesToProcess = ["package.json", "index.html"];
+    for (const file of filesToProcess) {
+      const filePath = path.join(targetDir, file);
+      if (fs.existsSync(filePath)) {
+        let content = fs.readFileSync(filePath, "utf-8");
+        content = content.replace(/{{name}}/g, projectName);
+        if (file === "package.json" && noLint) {
+          const pkg = JSON.parse(content);
+          delete pkg.scripts.lint;
+          if (pkg.devDependencies) {
+            delete pkg.devDependencies.eslint;
+            delete pkg.devDependencies["@eslint/js"];
+            delete pkg.devDependencies["typescript-eslint"];
+          }
+          content = JSON.stringify(pkg, null, 2);
+        }
+        fs.writeFileSync(filePath, content);
+      }
+    }
+    if (noLint) {
+      const eslintConfigPath = path.join(targetDir, "eslint.config.js");
+      if (fs.existsSync(eslintConfigPath)) {
+        fs.unlinkSync(eslintConfigPath);
+      }
+    }
+    console.log(`
+${cc.FgGreen}Success!${cc.reset} Created ${projectName} at ${targetDir}`);
+    console.log(`Inside that directory, you can run several commands:`);
+    console.log(`
+  ${cc.fgBrightBlue}npm install${cc.reset}`);
+    console.log(`    Installs the dependencies.`);
+    console.log(`
+  ${cc.fgBrightBlue}npm run dev${cc.reset}`);
+    console.log(`    Starts the development server.`);
+    console.log(`
+  ${cc.fgBrightBlue}npm test${cc.reset}`);
+    console.log(`    Runs the test suite using Vitest.`);
+    console.log(`
+  ${cc.fgBrightBlue}npm run build${cc.reset}`);
+    console.log(`    Bundles the app into static files for production.`);
+    if (!noLint) {
+      console.log(`
+  ${cc.fgBrightBlue}npm run lint${cc.reset}`);
+      console.log(`    Checks the code for potential errors.`);
+    }
+    console.log(`
+We suggest that you begin by typing:`);
+    console.log(`
+  ${cc.fgBrightBlue}cd${cc.reset} ${projectName}`);
+    console.log(`  ${cc.fgBrightBlue}npm install${cc.reset}`);
+    console.log(`  ${cc.fgBrightBlue}npm run dev${cc.reset}
+`);
+  } catch (err) {
+    printError(`Error creating project: ${err.message}`);
+  }
+}
+function handleGenerate(args) {
+  const type = args[0];
+  const name = args[1];
+  if (type !== "component" || !name) {
+    console.log(`
+${cc.bright}USAGE${cc.reset}`);
+    console.log(`  npx create-dothtml generate component <name>
+`);
+    return;
+  }
+  const isTs = fs.existsSync(path.join(process.cwd(), "tsconfig.json"));
+  const ext = isTs ? "ts" : "js";
+  const componentsDir = path.join(process.cwd(), "src", "components");
+  if (!fs.existsSync(componentsDir)) {
+    fs.mkdirSync(componentsDir, { recursive: true });
+  }
+  const filePath = path.join(componentsDir, `${name}.${ext}`);
+  if (fs.existsSync(filePath)) {
+    printError(`Component "${name}" already exists at ${filePath}`);
+    return;
+  }
+  const template = isTs ? `import { dot, IDotComponent, IDotDocument, FrameworkItems } from 'dothtml';
+
+export class ${name} implements IDotComponent {
+  _: FrameworkItems;
+
+  build(): IDotDocument {
+    return dot.div({ class: '${name.toLowerCase()}' })
+      .h2('${name} Component')
+      .p('This is a new component created with create-dothtml.');
+  }
+}
+` : `import { dot } from 'dothtml';
+
+export class ${name} {
+  build() {
+    return dot.div({ class: '${name.toLowerCase()}' })
+      .h2('${name} Component')
+      .p('This is a new component created with create-dothtml.');
+  }
+}
+`;
+  fs.writeFileSync(filePath, template);
+  console.log(`
+${cc.FgGreen}Success!${cc.reset} Created component ${cc.fgBrightBlue}${name}${cc.reset} at ${filePath}
+`);
+}
+function printUsage() {
+  console.log(`
+${cc.fgBrightBlue}create-dothtml${cc.reset}`);
+  console.log(`The official project initializer for DOThtml.
+`);
+  console.log(`${cc.bright}USAGE${cc.reset}`);
+  console.log(`  npx create-dothtml ${cc.fgBrightWhite}<project-name>${cc.reset} [options]`);
+  console.log(`  npx create-dothtml ${cc.fgBrightWhite}generate component <name>${cc.reset}
+`);
+  console.log(`${cc.bright}OPTIONS${cc.reset}`);
+  console.log(`  --js       Use JavaScript instead of TypeScript (default)`);
+  console.log(`  --no-lint  Skip adding ESLint to the project`);
+  console.log(`  --help     Show this help message
+`);
+}
+function printError(msg) {
+  console.error(`${cc.fgRed}Error: ${msg}${cc.reset}`);
+}
+export {
+  cli
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import fs from \"fs\";\nimport path from \"path\";\nimport { fileURLToPath } from 'url';\n\n// Helper to get __dirname in both CJS and ESM\nconst getDirname = () => {\n\ttry {\n\t\treturn __dirname;\n\t} catch {\n\t\treturn path.dirname(fileURLToPath(import.meta.url));\n\t}\n};\n\nconst cc = {\n\treset: \"\\x1b[0m\",\n\tbright: \"\\x1b[1m\",\n\tdim: \"\\x1b[2m\",\n\tunderscore: \"\\x1b[4m\",\n\tblink: \"\\x1b[5m\",\n\treverse: \"\\x1b[7m\",\n\thidden: \"\\x1b[8m\",\n\n\tfgBlack: \"\\x1b[30m\",\n\tfgRed: \"\\x1b[31m\",\n\tFgGreen: \"\\x1b[32m\",\n\tfgYellow: \"\\x1b[33m\",\n\tfgBlue: \"\\x1b[34m\",\n\tfgMagenta: \"\\x1b[35m\",\n\tfgCyan: \"\\x1b[36m\",\n\tfgWhite: \"\\x1b[37m\",\n\n\tfgBrightBlack: \"\\x1b[90m\",\n\tfgBrightRed: \"\\x1b[91m\",\n\tFgBrightGreen: \"\\x1b[92m\",\n\tfgBrightYellow: \"\\x1b[93m\",\n\tfgBrightBlue: \"\\x1b[94m\",\n\tfgBrightMagenta: \"\\x1b[95m\",\n\tfgBrightCyan: \"\\x1b[96m\",\n\tfgBrightWhite: \"\\x1b[97m\",\n}\n\nexport async function cli(args: string[]) {\n\tconst command = args[2];\n\n\tif (command === \"generate\" || command === \"g\") {\n\t\thandleGenerate(args.slice(3));\n\t\treturn;\n\t}\n\n\tlet projectName = args[2];\n\tlet startIndex = 2;\n\n\tif (projectName === \"init\") {\n\t\tprojectName = args[3];\n\t\tstartIndex = 3;\n\t}\n\n\tif (!projectName || projectName === \"--help\" || projectName === \"-h\") {\n\t\tprintUsage();\n\t\treturn;\n\t}\n\n\tconst targetDir = path.resolve(process.cwd(), projectName);\n\tif (fs.existsSync(targetDir)) {\n\t\tprintError(`Directory \"${projectName}\" already exists.`);\n\t\treturn;\n\t}\n\n\tconsole.log(`\\nCreating a new DOThtml app in ${cc.fgBrightBlue}${targetDir}${cc.reset}...`);\n\n\t// Template selection (default to TS)\n\tconst argsList = args.slice(startIndex);\n\tconst isJs = argsList.includes(\"--js\");\n\tconst noLint = argsList.includes(\"--no-lint\");\n\tconst template = isJs ? \"vanilla-js\" : \"vanilla-ts\";\n\t\n\tconst currentDir = getDirname();\n\t// When running from dist/index.js, templates is at ../templates\n\tlet templateDir = path.resolve(currentDir, \"..\", \"templates\", template);\n\n\tif (!fs.existsSync(templateDir)) {\n\t\t// Fallback for development if running directly from src\n\t\ttemplateDir = path.resolve(currentDir, \"templates\", template);\n\t\tif (!fs.existsSync(templateDir)) {\n\t\t\t// Another fallback for how tsup might bundle it\n\t\t\ttemplateDir = path.resolve(process.cwd(), \"templates\", template);\n\t\t\tif (!fs.existsSync(templateDir)) {\n\t\t\t\tprintError(`Template directory not found. Tried:\\n- ${path.resolve(currentDir, \"..\", \"templates\", template)}\\n- ${path.resolve(currentDir, \"templates\", template)}`);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\ttry {\n\t\t// Copy template\n\t\tfs.mkdirSync(targetDir, { recursive: true });\n\t\t// @ts-ignore - cpSync is available in Node 16.7.0+\n\t\tfs.cpSync(templateDir, targetDir, { recursive: true });\n\n\t\t// Replace placeholders in package.json and index.html\n\t\tconst filesToProcess = [\"package.json\", \"index.html\"];\n\t\tfor (const file of filesToProcess) {\n\t\t\tconst filePath = path.join(targetDir, file);\n\t\t\tif (fs.existsSync(filePath)) {\n\t\t\t\tlet content = fs.readFileSync(filePath, \"utf-8\");\n\t\t\t\tcontent = content.replace(/{{name}}/g, projectName);\n\n\t\t\t\tif (file === \"package.json\" && noLint) {\n\t\t\t\t\tconst pkg = JSON.parse(content);\n\t\t\t\t\tdelete pkg.scripts.lint;\n\t\t\t\t\tif (pkg.devDependencies) {\n\t\t\t\t\t\tdelete pkg.devDependencies.eslint;\n\t\t\t\t\t\tdelete pkg.devDependencies[\"@eslint/js\"];\n\t\t\t\t\t\tdelete pkg.devDependencies[\"typescript-eslint\"];\n\t\t\t\t\t}\n\t\t\t\t\tcontent = JSON.stringify(pkg, null, 2);\n\t\t\t\t}\n\n\t\t\t\tfs.writeFileSync(filePath, content);\n\t\t\t}\n\t\t}\n\n\t\tif (noLint) {\n\t\t\tconst eslintConfigPath = path.join(targetDir, \"eslint.config.js\");\n\t\t\tif (fs.existsSync(eslintConfigPath)) {\n\t\t\t\tfs.unlinkSync(eslintConfigPath);\n\t\t\t}\n\t\t}\n\n\t\tconsole.log(`\\n${cc.FgGreen}Success!${cc.reset} Created ${projectName} at ${targetDir}`);\n\t\tconsole.log(`Inside that directory, you can run several commands:`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm install${cc.reset}`);\n\t\tconsole.log(`    Installs the dependencies.`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm run dev${cc.reset}`);\n\t\tconsole.log(`    Starts the development server.`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm test${cc.reset}`);\n\t\tconsole.log(`    Runs the test suite using Vitest.`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm run build${cc.reset}`);\n\t\tconsole.log(`    Bundles the app into static files for production.`);\n\n\t\tif (!noLint) {\n\t\t\tconsole.log(`\\n  ${cc.fgBrightBlue}npm run lint${cc.reset}`);\n\t\t\tconsole.log(`    Checks the code for potential errors.`);\n\t\t}\n\n\t\tconsole.log(`\\nWe suggest that you begin by typing:`);\n\t\tconsole.log(`\\n  ${cc.fgBrightBlue}cd${cc.reset} ${projectName}`);\n\t\tconsole.log(`  ${cc.fgBrightBlue}npm install${cc.reset}`);\n\t\tconsole.log(`  ${cc.fgBrightBlue}npm run dev${cc.reset}\\n`);\n\n\t} catch (err: any) {\n\t\tprintError(`Error creating project: ${err.message}`);\n\t}\n}\n\nfunction handleGenerate(args: string[]) {\n\tconst type = args[0];\n\tconst name = args[1];\n\n\tif (type !== \"component\" || !name) {\n\t\tconsole.log(`\\n${cc.bright}USAGE${cc.reset}`);\n\t\tconsole.log(`  npx create-dothtml generate component <name>\\n`);\n\t\treturn;\n\t}\n\n\tconst isTs = fs.existsSync(path.join(process.cwd(), \"tsconfig.json\"));\n\tconst ext = isTs ? \"ts\" : \"js\";\n\tconst componentsDir = path.join(process.cwd(), \"src\", \"components\");\n\n\tif (!fs.existsSync(componentsDir)) {\n\t\tfs.mkdirSync(componentsDir, { recursive: true });\n\t}\n\n\tconst filePath = path.join(componentsDir, `${name}.${ext}`);\n\tif (fs.existsSync(filePath)) {\n\t\tprintError(`Component \"${name}\" already exists at ${filePath}`);\n\t\treturn;\n\t}\n\n\tconst template = isTs \n\t\t? `import { dot, IDotComponent, IDotDocument, FrameworkItems } from 'dothtml';\n\nexport class ${name} implements IDotComponent {\n  _: FrameworkItems;\n\n  build(): IDotDocument {\n    return dot.div({ class: '${name.toLowerCase()}' })\n      .h2('${name} Component')\n      .p('This is a new component created with create-dothtml.');\n  }\n}\n`\n\t\t: `import { dot } from 'dothtml';\n\nexport class ${name} {\n  build() {\n    return dot.div({ class: '${name.toLowerCase()}' })\n      .h2('${name} Component')\n      .p('This is a new component created with create-dothtml.');\n  }\n}\n`;\n\n\tfs.writeFileSync(filePath, template);\n\tconsole.log(`\\n${cc.FgGreen}Success!${cc.reset} Created component ${cc.fgBrightBlue}${name}${cc.reset} at ${filePath}\\n`);\n}\n\nfunction printUsage() {\n\tconsole.log(`\\n${cc.fgBrightBlue}create-dothtml${cc.reset}`);\n\tconsole.log(`The official project initializer for DOThtml.\\n`);\n\tconsole.log(`${cc.bright}USAGE${cc.reset}`);\n\tconsole.log(`  npx create-dothtml ${cc.fgBrightWhite}<project-name>${cc.reset} [options]`);\n\tconsole.log(`  npx create-dothtml ${cc.fgBrightWhite}generate component <name>${cc.reset}\\n`);\n\tconsole.log(`${cc.bright}OPTIONS${cc.reset}`);\n\tconsole.log(`  --js       Use JavaScript instead of TypeScript (default)`);\n\tconsole.log(`  --no-lint  Skip adding ESLint to the project`);\n\tconsole.log(`  --help     Show this help message\\n`);\n}\n\nfunction printError(msg: string) {\n\tconsole.error(`${cc.fgRed}Error: ${msg}${cc.reset}`);\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "create-dothtml",
+  "version": "6.0.8",
+  "private": false,
+  "description": "The official project initializer for DOThtml.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "bin": {
+    "create-dothtml": "bin/create-dothtml"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "bin"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/JSideris/DOThtml.git",
+    "directory": "packages/create-dothtml"
+  },
+  "homepage": "https://dothtml.org/",
+  "bugs": {
+    "url": "https://github.com/JSideris/DOThtml/issues"
+  },
+  "keywords": [
+    "dothtml",
+    "framework",
+    "web",
+    "cli",
+    "create-dothtml",
+    "vite"
+  ],
+  "author": "Joshua Sideris",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/node": "^18.19.130",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}

package/templates/vanilla-js/eslint.config.js

@@ -0,0 +1,10 @@
+import js from "@eslint/js";
+
+export default [
+  js.configs.recommended,
+  {
+    rules: {
+      "newline-per-chained-call": "off",
+    },
+  }
+];

package/templates/vanilla-js/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

package/templates/vanilla-js/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "dothtml": "^6.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "eslint": "^9.0.0",
+    "jsdom": "^24.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^1.0.0"
+  }
+}

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

@@ -0,0 +1,18 @@
+import { dot } from 'dothtml';
+
+export class Counter {
+  count = dot.state(0);
+
+  build() {
+    return dot.div({ class: 'card' })
+      .h2('Interactive Counter')
+      .p('The count is: ', this.count)
+      .button({ 
+        onClick: () => this.count.value++ 
+      }, 'Increment')
+      .button({ 
+        onClick: () => this.count.value--,
+        style: 'margin-left: 10px'
+      }, 'Decrement');
+  }
+}

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

@@ -0,0 +1,11 @@
+import { dot } from 'dothtml';
+import './style.css';
+import { Counter } from './components/Counter';
+
+dot('#app')
+  .h1('Welcome to DOThtml!')
+  .p('The fastest, lightest way to build reactive web apps.')
+  .mount(new Counter())
+  .p({ style: 'margin-top: 2rem; opacity: 0.8;' }, 
+    'Edit ', dot.code('src/main.js'), ' to get started!'
+  );

package/templates/vanilla-js/src/main.test.js

@@ -0,0 +1,15 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { dot } from 'dothtml'
+
+describe('DOThtml rendering', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>'
+  })
+
+  it('renders a heading', () => {
+    dot('#app').h1('Hello DOThtml!')
+    const h1 = document.querySelector('h1')
+    expect(h1).not.toBeNull()
+    expect(h1.textContent).toBe('Hello DOThtml!')
+  })
+})

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

@@ -0,0 +1,92 @@
+:root {
+  font-family: 'Inter', 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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.card {
+  padding: 2em;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  margin-bottom: 0.5em;
+  background: linear-gradient(to right, #fff, #a5b4fc);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+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, transform 0.1s;
+  color: white;
+}
+button:hover {
+  border-color: #646cff;
+  transform: scale(1.05);
+}
+button:active {
+  transform: scale(0.95);
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
+  }
+  .card {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  h1 {
+    background: linear-gradient(to right, #4f46e5, #9333ea);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  button {
+    background-color: #f9f9f9;
+    color: #213547;
+    border: 1px solid #ddd;
+  }
+}

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

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+  },
+})

package/templates/vanilla-ts/eslint.config.js

@@ -0,0 +1,13 @@
+import js from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+      "newline-per-chained-call": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+    },
+  }
+);

package/templates/vanilla-ts/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{name}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/templates/vanilla-ts/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "test": "vitest",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "dothtml": "^6.0.8"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "eslint": "^9.0.0",
+    "jsdom": "^24.0.0",
+    "typescript": "^5.0.0",
+    "typescript-eslint": "^8.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^1.0.0"
+  }
+}

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

@@ -0,0 +1,19 @@
+import { dot, IDotComponent, IDotDocument, FrameworkItems } from 'dothtml';
+
+export class Counter implements IDotComponent {
+  count = dot.state(0);
+  _: FrameworkItems;
+
+  build(): IDotDocument {
+    return dot.div({ class: 'card' })
+      .h2('Interactive Counter')
+      .p('The count is: ', this.count)
+      .button({ 
+        onClick: () => this.count.value++ 
+      }, 'Increment')
+      .button({ 
+        onClick: () => this.count.value--,
+        style: 'margin-left: 10px'
+      }, 'Decrement');
+  }
+}

package/templates/vanilla-ts/src/main.test.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { dot } from 'dothtml'
+
+describe('DOThtml rendering', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="app"></div>'
+  })
+
+  it('renders a heading', () => {
+    dot('#app').h1('Hello DOThtml!')
+    const h1 = document.querySelector('h1')
+    expect(h1).not.toBeNull()
+    expect(h1?.textContent).toBe('Hello DOThtml!')
+  })
+})

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

@@ -0,0 +1,11 @@
+import { dot } from 'dothtml';
+import './style.css';
+import { Counter } from './components/Counter';
+
+dot('#app')
+  .h1('Welcome to DOThtml!')
+  .p('The fastest, lightest way to build reactive web apps.')
+  .mount(new Counter())
+  .p({ style: 'margin-top: 2rem; opacity: 0.8;' }, 
+    'Edit ', dot.code('src/main.ts'), ' to get started!'
+  );

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

@@ -0,0 +1,92 @@
+:root {
+  font-family: 'Inter', 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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.card {
+  padding: 2em;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  margin-bottom: 0.5em;
+  background: linear-gradient(to right, #fff, #a5b4fc);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+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, transform 0.1s;
+  color: white;
+}
+button:hover {
+  border-color: #646cff;
+  transform: scale(1.05);
+}
+button:active {
+  transform: scale(0.95);
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
+  }
+  .card {
+    background: rgba(255, 255, 255, 0.7);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+  }
+  h1 {
+    background: linear-gradient(to right, #4f46e5, #9333ea);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  button {
+    background-color: #f9f9f9;
+    color: #213547;
+    border: 1px solid #ddd;
+  }
+}

package/templates/vanilla-ts/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  test: {
+    environment: 'jsdom',
+  },
+})