@toyz/create-loom 0.1.0

package/README.md

@@ -0,0 +1,70 @@
+<p align="center">
+  <img src="../logo.svg" alt="Loom" width="60" />
+</p>
+
+<h1 align="center">@toyz/create-loom</h1>
+
+<p align="center">
+  Scaffold a new Loom + TypeScript + Vite project in seconds.
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@toyz/create-loom"><img src="https://img.shields.io/npm/v/@toyz/create-loom?color=c084fc&label=npm" alt="npm" /></a>
+  <a href="https://github.com/Toyz/loom"><img src="https://img.shields.io/badge/framework-@toyz/loom-86efac" alt="loom" /></a>
+  <a href="../LICENSE"><img src="https://img.shields.io/badge/license-MIT-fbbf24" alt="MIT" /></a>
+</p>
+
+---
+
+## Usage
+
+```bash
+npm create @toyz/loom my-app
+cd my-app
+npm install
+npm run dev
+```
+
+That's it. No prompts, no config wizard, no JavaScript option — Loom is TypeScript only.
+
+## What you get
+
+```
+my-app/
+├── index.html            5 lines
+├── package.json          1 dep, 2 devDeps
+├── tsconfig.json         Loom JSX pre-configured
+├── vite.config.ts        esbuild JSX wired to Loom
+└── src/
+    ├── main.tsx           app.start()
+    ├── app.tsx            starter component
+    └── global.d.ts        CSS module types
+```
+
+### Dependencies
+
+| Type              | Package      | Why                                  |
+| ----------------- | ------------ | ------------------------------------ |
+| `dependencies`    | `@toyz/loom` | The framework (zero transitive deps) |
+| `devDependencies` | `typescript` | Type checking                        |
+| `devDependencies` | `vite`       | Dev server + bundler                 |
+
+No other packages. No plugins. No polyfills.
+
+## Current directory
+
+To scaffold into the current directory:
+
+```bash
+npm create @toyz/loom .
+```
+
+## Links
+
+- **Framework** — [@toyz/loom](https://www.npmjs.com/package/@toyz/loom)
+- **Docs** — [toyz.github.io/loom](https://toyz.github.io/loom/)
+- **Source** — [github.com/Toyz/loom](https://github.com/Toyz/loom)
+
+## License
+
+[MIT](../LICENSE) — do whatever you want with it.

package/bin/create-loom.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+
+/**
+ * create-loom — Scaffold a Loom + TypeScript + Vite project.
+ *
+ * Usage:
+ *   npm create loom my-app
+ *   npx create-loom my-app
+ *   npx create-loom .          (current directory)
+ */
+
+import { existsSync, mkdirSync, cpSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve, basename, join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = resolve(__dirname, "..", "template");
+
+const name = process.argv[2];
+
+if (!name) {
+  console.error("\n  Usage: npm create loom <project-name>\n");
+  process.exit(1);
+}
+
+const target = resolve(process.cwd(), name);
+const projectName = name === "." ? basename(process.cwd()) : basename(name);
+
+// Guard against overwriting
+if (name !== "." && existsSync(target)) {
+  console.error(`\n  Directory "${name}" already exists.\n`);
+  process.exit(1);
+}
+
+// Copy template
+if (name !== ".") mkdirSync(target, { recursive: true });
+cpSync(TEMPLATE_DIR, target, { recursive: true });
+
+// Patch project name into package.json
+const pkgPath = join(target, "package.json");
+const pkg = readFileSync(pkgPath, "utf-8");
+writeFileSync(pkgPath, pkg.replace(/"name": "loom-app"/, `"name": "${projectName}"`));
+
+console.log(`
+  ✨ Loom project created in ${name === "." ? "current directory" : name}
+
+  Get started:
+    ${name !== "." ? `cd ${name}` : ""}
+    npm install
+    npm run dev
+
+  Weave the web with Loom
+`);

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@toyz/create-loom",
+  "version": "0.1.0",
+  "description": "Scaffold a new Loom + TypeScript + Vite project",
+  "license": "MIT",
+  "author": "toyz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Toyz/loom.git",
+    "directory": "create-loom"
+  },
+  "type": "module",
+  "bin": {
+    "create-loom": "./bin/create-loom.js"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "keywords": [
+    "loom",
+    "create",
+    "scaffold",
+    "vite",
+    "web-components",
+    "decorators",
+    "typescript"
+  ]
+}

package/template/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>Loom App</title>
+  </head>
+  <body>
+    <my-app></my-app>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "loom-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@toyz/loom": "^0.10.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}

package/template/src/app.tsx

@@ -0,0 +1,63 @@
+import { LoomElement, component, reactive, css, styles } from "@toyz/loom";
+
+const appStyles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+      Helvetica, Arial, sans-serif;
+    background: #0a0a0a;
+    color: #ededed;
+  }
+  h1 {
+    font-size: 3rem;
+    font-weight: 200;
+    margin: 0 0 1rem;
+    background: linear-gradient(135deg, #c084fc, #67e8f9);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  p {
+    color: #888;
+    margin: 0 0 2rem;
+  }
+  button {
+    padding: 0.75rem 1.5rem;
+    border: 1px solid #333;
+    border-radius: 8px;
+    background: #1a1a1a;
+    color: #ededed;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: border-color 0.2s, background 0.2s;
+  }
+  button:hover {
+    border-color: #c084fc;
+    background: #222;
+  }
+  span {
+    font-weight: bold;
+    color: #c084fc;
+  }
+`;
+
+@component("my-app")
+@styles(appStyles)
+export class MyApp extends LoomElement {
+  @reactive accessor count = 0;
+
+  update() {
+    return (
+      <div>
+        <h1>Loom</h1>
+        <p>Weave the web Loom</p>
+        <button onClick={() => this.count++}>
+          Count: <span>{this.count}</span>
+        </button>
+      </div>
+    );
+  }
+}

package/template/src/global.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

package/template/src/main.tsx

@@ -0,0 +1,4 @@
+import { app } from "@toyz/loom";
+import "./app";
+
+app.start();

package/template/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@toyz/loom",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "dist"
+  },
+  "include": ["src"]
+}

package/template/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  esbuild: {
+    jsx: "automatic",
+    jsxImportSource: "@toyz/loom",
+  },
+});