create-zoijs 0.1.3 → 0.2.0

package/templates/app/dev-server.mjs

@@ -1,74 +1,124 @@
-// dev-server.mjs — a tiny static file server for this Zoijs app.
-//
-// Zero dependencies (Node built-ins only), no build step, no bundler. It serves
-// the project files so the import map in index.html can load @zoijs/core from
-// node_modules. Tries port 7310, then 7311 / 7312 / 7313 if one is busy.
-//
-//   node dev-server.mjs      (this is what `npm run dev` runs)
-
-import { createServer } from "node:http";
-import { readFile } from "node:fs/promises";
-import { extname, join, normalize } from "node:path";
-
-const PORTS = [7310, 7311, 7312, 7313];
-const ROOT = process.cwd();
-
-const TYPES = {
-  ".html": "text/html; charset=utf-8",
-  ".js": "text/javascript; charset=utf-8",
-  ".mjs": "text/javascript; charset=utf-8",
-  ".css": "text/css; charset=utf-8",
-  ".json": "application/json; charset=utf-8",
-  ".svg": "image/svg+xml",
-  ".ico": "image/x-icon",
-  ".png": "image/png",
-  ".woff2": "font/woff2",
-};
-
-const server = createServer(async (req, res) => {
-  let pathname = decodeURIComponent(new URL(req.url, "http://localhost").pathname);
-  if (pathname === "/") pathname = "/index.html";
-
-  // Resolve inside ROOT and refuse anything that climbs out of it.
-  const filePath = join(ROOT, normalize(pathname));
-  if (!filePath.startsWith(ROOT)) {
-    res.writeHead(403).end("Forbidden");
-    return;
-  }
-  try {
-    const body = await readFile(filePath);
-    res.writeHead(200, { "Content-Type": TYPES[extname(filePath)] || "application/octet-stream" });
-    res.end(body);
-  } catch {
-    res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" }).end("Not found");
-  }
-});
-
-function start(i = 0) {
-  if (i >= PORTS.length) {
-    console.error(`\nAll dev ports are busy (${PORTS.join(", ")}). Free one and try again.\n`);
-    process.exit(1);
-  }
-  // Paired once-listeners: each attempt removes its sibling so a failed bind
-  // can't leave a stale "listening" handler that prints the wrong port later.
-  const onError = (err) => {
-    server.removeListener("listening", onListening);
-    if (err.code === "EADDRINUSE") start(i + 1);
-    else {
-      console.error(err);
-      process.exit(1);
-    }
-  };
-  const onListening = () => {
-    server.removeListener("error", onError);
-    const lines = ["", "  Zoijs dev server", "", `  - Local:  http://localhost:${PORTS[i]}`];
-    if (i > 0) lines.push(`  (ports ${PORTS.slice(0, i).join(", ")} were busy)`);
-    lines.push("");
-    console.log(lines.join("\n"));
-  };
-  server.once("error", onError);
-  server.once("listening", onListening);
-  server.listen(PORTS[i]);
-}
-
-start();
+// dev-server.mjs — a tiny static file server for this Zoijs app. DEVELOPMENT ONLY.
+//
+// Zero dependencies (Node built-ins only), no build step, no bundler. It serves
+// the project files — index.html, your modules, and whatever its import map points
+// at inside this folder (node_modules/, if you installed). Tries port 7310, then
+// 7311 / 7312 / 7313 if one is busy. The same file ships in every Zoijs template.
+//
+//   node dev-server.mjs      (this is what `npm run dev` runs)
+//
+// Safe defaults for a dev server:
+//   - listens on 127.0.0.1 only — other devices on your network can't reach it.
+//     To test from a phone on your LAN, opt in explicitly: ZOIJS_HOST=0.0.0.0 npm run dev
+//     (anyone on that network can then read your project files while it runs).
+//   - never serves dotfiles or dot-directories (.env, .git/, .npmrc, …);
+//   - never serves anything outside this folder (no `..`, no symlinks pointing out —
+//     except package-manager links inside node_modules/);
+//   - answers malformed URLs with 400 instead of crashing.
+// It is not a production server: deploy the static files to a real host.
+
+import { createServer } from "node:http";
+import { readFile, realpath } from "node:fs/promises";
+import { extname, resolve, relative, isAbsolute } from "node:path";
+
+const PORTS = [7310, 7311, 7312, 7313];
+const HOST = process.env.ZOIJS_HOST || "127.0.0.1";
+const ROOT = resolve(process.cwd());
+
+const TYPES = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".ico": "image/x-icon",
+  ".png": "image/png",
+  ".woff2": "font/woff2",
+};
+
+const HEADERS = { "X-Content-Type-Options": "nosniff", "Cache-Control": "no-store", "Referrer-Policy": "no-referrer" };
+
+// Is `path` ROOT itself or inside it? (relative() handles separators, case and
+// sibling folders like `app-secrets` correctly — unlike a string-prefix check.)
+const inside = (base, path) => {
+  const rel = relative(base, path);
+  return rel === "" || (!rel.startsWith("..") && !isAbsolute(rel));
+};
+
+function send(res, status, body, type = "text/plain; charset=utf-8") {
+  res.writeHead(status, { ...HEADERS, "Content-Type": type });
+  res.end(body);
+}
+
+const server = createServer(async (req, res) => {
+  try {
+    let pathname;
+    try {
+      // Only the path (never the query string) maps to a file.
+      pathname = decodeURIComponent(new URL(req.url, "http://localhost").pathname);
+    } catch {
+      return send(res, 400, "Bad request");
+    }
+    if (pathname.includes("\0")) return send(res, 400, "Bad request");
+    if (pathname === "/") pathname = "/index.html";
+
+    const segments = pathname.split(/[\\/]+/).filter(Boolean);
+    // Hidden files and folders (.env, .git/, .npmrc, node_modules/.bin, …) are never
+    // served. 404, not 403, so it doesn't reveal whether they exist.
+    if (segments.some((s) => s.startsWith("."))) return send(res, 404, "Not found");
+
+    const filePath = resolve(ROOT, ...segments);
+    if (!inside(ROOT, filePath)) return send(res, 404, "Not found");
+
+    // Don't follow symlinks out of the project. Package managers (npm link, pnpm)
+    // legitimately link packages into node_modules/, so links there are allowed.
+    let real;
+    try {
+      real = await realpath(filePath);
+    } catch {
+      return send(res, 404, "Not found");
+    }
+    if (!inside(ROOT, real) && segments[0] !== "node_modules") return send(res, 404, "Not found");
+
+    const body = await readFile(real);
+    send(res, 200, body, TYPES[extname(filePath)] || "application/octet-stream");
+  } catch {
+    // Directories, permission errors, files deleted mid-request: a generic answer
+    // that never echoes a filesystem path.
+    if (!res.headersSent) send(res, 404, "Not found");
+    else res.destroy();
+  }
+});
+
+function start(i = 0) {
+  if (i >= PORTS.length) {
+    console.error(`\nAll dev ports are busy (${PORTS.join(", ")}). Free one and try again.\n`);
+    process.exit(1);
+  }
+  // Paired once-listeners: each attempt removes its sibling so a failed bind
+  // can't leave a stale "listening" handler that prints the wrong port later.
+  const onError = (err) => {
+    server.removeListener("listening", onListening);
+    if (err.code === "EADDRINUSE") start(i + 1);
+    else {
+      console.error(err);
+      process.exit(1);
+    }
+  };
+  const onListening = () => {
+    server.removeListener("error", onError);
+    const lines = ["", "  Zoijs dev server", "", `  - Local:  http://localhost:${PORTS[i]}`];
+    if (i > 0) lines.push(`  (ports ${PORTS.slice(0, i).join(", ")} were busy)`);
+    if (HOST !== "127.0.0.1" && HOST !== "localhost" && HOST !== "::1") {
+      lines.push(`  ⚠ Listening on ${HOST} (ZOIJS_HOST): other devices on your network can read`, `    this project's files while the server runs. Development only.`);
+    }
+    lines.push("");
+    console.log(lines.join("\n"));
+  };
+  server.once("error", onError);
+  server.once("listening", onListening);
+  server.listen(PORTS[i], HOST);
+}
+
+start();

package/templates/app/index.html

@@ -1,22 +1,24 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{{APP_TITLE}}</title>
-    <link rel="stylesheet" href="./src/style.css" />
-    <!-- No build step: an import map points the @zoijs/core name at the package
-         installed in node_modules. `npm install` puts it there. -->
-    <script type="importmap">
-      {
-        "imports": {
-          "@zoijs/core": "./node_modules/@zoijs/core/src/index.js"
-        }
-      }
-    </script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="./src/app.js"></script>
-  </body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{APP_TITLE}}</title>
+    <link rel="stylesheet" href="./src/style.css" />
+    <!-- No build step: an import map points the @zoijs/core name at the package
+         installed in node_modules. `npm install` puts it there. -->
+    <!-- Development entry (warnings + devtools). When you deploy, point "@zoijs/core"
+         at ./node_modules/@zoijs/core/src/prod.js — the production entry. -->
+    <script type="importmap">
+      {
+        "imports": {
+          "@zoijs/core": "./node_modules/@zoijs/core/src/index.js"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/app.js"></script>
+  </body>
+</html>

package/templates/app/jsconfig.json

@@ -0,0 +1,16 @@
+{
+  // jsconfig.json — gives your editor IntelliSense (autocomplete, hover, go-to-
+  // definition) for Zoijs and the DOM, from the types every package ships. No build
+  // step, no TypeScript migration. Flip "checkJs" to true to also TYPE-CHECK your
+  // JavaScript against those types (or add `// @ts-check` to a single file).
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "checkJs": false,
+    "strict": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/templates/app/package.json

@@ -1,12 +1,12 @@
-{
-  "name": "{{APP_NAME}}",
-  "version": "0.0.0",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "node dev-server.mjs"
-  },
-  "dependencies": {
-    "@zoijs/core": "^1.1.0"
-  }
-}
+{
+  "name": "{{APP_NAME}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "node dev-server.mjs"
+  },
+  "dependencies": {
+    "@zoijs/core": "^{{ZOIJS_CORE_VERSION}}"
+  }
+}

package/templates/app/src/app.js

@@ -1,98 +1,98 @@
-import { html, mount, createState, computed, each } from "@zoijs/core";
-import { Header } from "./components/Header.js";
-import { StatCard } from "./components/StatCard.js";
-import { TaskItem } from "./components/TaskItem.js";
-
-// The App owns all the state. Child components receive data as arguments
-// (parent -> child) and report events back through callbacks (child -> parent).
-// No store, no context, no providers — just functions and reactive values.
-function App() {
-  // --- state -----------------------------------------------------------------
-  const tasks = createState([
-    { id: 1, text: "Read the Zoijs guide", done: true },
-    { id: 2, text: "Scaffold a project", done: true },
-    { id: 3, text: "Design the dashboard", done: false },
-    { id: 4, text: "Ship something small", done: false },
-  ]);
-  const filter = createState("all"); // "all" | "active" | "done"
-  const draft = createState("");
-  let nextId = 5;
-
-  // --- derived values (computed: cached + reactive) --------------------------
-  const total = computed(() => tasks.get().length);
-  const completed = computed(() => tasks.get().filter((t) => t.done).length);
-  const active = computed(() => total.get() - completed.get());
-  const visible = computed(() => {
-    const f = filter.get();
-    return tasks.get().filter((t) => (f === "all" ? true : f === "done" ? t.done : !t.done));
-  });
-
-  // --- actions ---------------------------------------------------------------
-  const addTask = (e) => {
-    e.preventDefault();
-    const text = draft.get().trim();
-    if (!text) return;
-    tasks.set([...tasks.get(), { id: nextId++, text, done: false }]);
-    draft.set("");
-  };
-  const toggle = (id) => tasks.set(tasks.get().map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
-  const remove = (id) => tasks.set(tasks.get().filter((t) => t.id !== id));
-
-  const filterChip = (value, label) => html`
-    <button
-      class=${() => "chip" + (filter.get() === value ? " chip-on" : "")}
-      onclick=${() => filter.set(value)}>
-      ${label}
-    </button>
-  `;
-
-  return html`
-    <div class="app">
-      ${Header({ completed: () => completed.get(), total: () => total.get() })}
-
-      <section class="stats">
-        ${StatCard({ label: "Total", value: () => total.get(), accent: "indigo" })}
-        ${StatCard({ label: "Completed", value: () => completed.get(), accent: "green" })}
-        ${StatCard({ label: "Active", value: () => active.get(), accent: "amber" })}
-        ${StatCard({ label: "Filter", value: () => filter.get(), accent: "slate" })}
-      </section>
-
-      <section class="panel">
-        <form class="add" onsubmit=${addTask}>
-          <input
-            aria-label="Add a task"
-            placeholder="Add a task…"
-            value=${() => draft.get()}
-            oninput=${(e) => draft.set(e.target.value)} />
-          <button type="submit">Add</button>
-        </form>
-
-        <div class="filters" role="group" aria-label="Filter tasks">
-          ${filterChip("all", "All")}
-          ${filterChip("active", "Active")}
-          ${filterChip("done", "Done")}
-        </div>
-
-        <ul class="tasks">
-          ${each(
-            () => visible.get(),
-            (t) => t.id,
-            (t) => TaskItem({ task: t, onToggle: toggle, onDelete: remove })
-          )}
-        </ul>
-
-        ${() =>
-          visible.get().length === 0
-            ? html`<p class="empty">Nothing here yet — add a task above. ✨</p>`
-            : null}
-      </section>
-
-      <footer class="hint">
-        <p>This starter uses <code>html()</code>, <code>createState()</code>, <code>computed()</code>, and <code>each()</code>.</p>
-        <p>Open <code>src/app.js</code> to start editing.</p>
-      </footer>
-    </div>
-  `;
-}
-
-mount(App, "#app");
+import { html, mount, createState, computed, each } from "@zoijs/core";
+import { Header } from "./components/Header.js";
+import { StatCard } from "./components/StatCard.js";
+import { TaskItem } from "./components/TaskItem.js";
+
+// The App owns all the state. Child components receive data as arguments
+// (parent -> child) and report events back through callbacks (child -> parent).
+// No store, no context, no providers — just functions and reactive values.
+function App() {
+  // --- state -----------------------------------------------------------------
+  const tasks = createState([
+    { id: 1, text: "Read the Zoijs guide", done: true },
+    { id: 2, text: "Scaffold a project", done: true },
+    { id: 3, text: "Design the dashboard", done: false },
+    { id: 4, text: "Ship something small", done: false },
+  ]);
+  const filter = createState("all"); // "all" | "active" | "done"
+  const draft = createState("");
+  let nextId = 5;
+
+  // --- derived values (computed: cached + reactive) --------------------------
+  const total = computed(() => tasks.get().length);
+  const completed = computed(() => tasks.get().filter((t) => t.done).length);
+  const active = computed(() => total.get() - completed.get());
+  const visible = computed(() => {
+    const f = filter.get();
+    return tasks.get().filter((t) => (f === "all" ? true : f === "done" ? t.done : !t.done));
+  });
+
+  // --- actions ---------------------------------------------------------------
+  const addTask = (e) => {
+    e.preventDefault();
+    const text = draft.get().trim();
+    if (!text) return;
+    tasks.set([...tasks.get(), { id: nextId++, text, done: false }]);
+    draft.set("");
+  };
+  const toggle = (id) => tasks.set(tasks.get().map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
+  const remove = (id) => tasks.set(tasks.get().filter((t) => t.id !== id));
+
+  const filterChip = (value, label) => html`
+    <button
+      class=${() => "chip" + (filter.get() === value ? " chip-on" : "")}
+      onclick=${() => filter.set(value)}>
+      ${label}
+    </button>
+  `;
+
+  return html`
+    <div class="app">
+      ${Header({ completed: () => completed.get(), total: () => total.get() })}
+
+      <section class="stats">
+        ${StatCard({ label: "Total", value: () => total.get(), accent: "indigo" })}
+        ${StatCard({ label: "Completed", value: () => completed.get(), accent: "green" })}
+        ${StatCard({ label: "Active", value: () => active.get(), accent: "amber" })}
+        ${StatCard({ label: "Filter", value: () => filter.get(), accent: "slate" })}
+      </section>
+
+      <section class="panel">
+        <form class="add" onsubmit=${addTask}>
+          <input
+            aria-label="Add a task"
+            placeholder="Add a task…"
+            value=${() => draft.get()}
+            oninput=${(e) => draft.set(e.target.value)} />
+          <button type="submit">Add</button>
+        </form>
+
+        <div class="filters" role="group" aria-label="Filter tasks">
+          ${filterChip("all", "All")}
+          ${filterChip("active", "Active")}
+          ${filterChip("done", "Done")}
+        </div>
+
+        <ul class="tasks">
+          ${each(
+            () => visible.get(),
+            (t) => t.id,
+            (t) => TaskItem({ task: t, onToggle: toggle, onDelete: remove })
+          )}
+        </ul>
+
+        ${() =>
+          visible.get().length === 0
+            ? html`<p class="empty">Nothing here yet — add a task above. ✨</p>`
+            : null}
+      </section>
+
+      <footer class="hint">
+        <p>This starter uses <code>html()</code>, <code>createState()</code>, <code>computed()</code>, and <code>each()</code>.</p>
+        <p>Open <code>src/app.js</code> to start editing.</p>
+      </footer>
+    </div>
+  `;
+}
+
+mount(App, "#app");

package/templates/app/src/components/Header.js

@@ -1,16 +1,16 @@
-import { html } from "@zoijs/core";
-
-// Parent -> child: the Header receives derived stats as reader functions and
-// renders the hero. It holds no state of its own.
-export function Header({ completed, total }) {
-  return html`
-    <header class="hero">
-      <span class="badge">Built with Zoijs</span>
-      <h1>{{APP_TITLE}}</h1>
-      <p class="tagline">A tiny project dashboard — plain HTML, CSS, and JavaScript. No build step.</p>
-      <p class="summary">
-        <strong>${() => completed()}</strong> of <strong>${() => total()}</strong> tasks done
-      </p>
-    </header>
-  `;
-}
+import { html } from "@zoijs/core";
+
+// Parent -> child: the Header receives derived stats as reader functions and
+// renders the hero. It holds no state of its own.
+export function Header({ completed, total }) {
+  return html`
+    <header class="hero">
+      <span class="badge">Built with Zoijs</span>
+      <h1>{{APP_TITLE}}</h1>
+      <p class="tagline">A tiny project dashboard — plain HTML, CSS, and JavaScript. No build step.</p>
+      <p class="summary">
+        <strong>${() => completed()}</strong> of <strong>${() => total()}</strong> tasks done
+      </p>
+    </header>
+  `;
+}

package/templates/app/src/components/StatCard.js

@@ -1,13 +1,13 @@
-import { html } from "@zoijs/core";
-
-// A small, reusable presentational component used four times in the stats grid.
-// Parent -> child: it simply renders the label, value, and accent it is given —
-// composition without any shared state.
-export function StatCard({ label, value, accent }) {
-  return html`
-    <div class="card stat stat-${accent}">
-      <div class="stat-value">${() => value()}</div>
-      <div class="stat-label">${label}</div>
-    </div>
-  `;
-}
+import { html } from "@zoijs/core";
+
+// A small, reusable presentational component used four times in the stats grid.
+// Parent -> child: it simply renders the label, value, and accent it is given —
+// composition without any shared state.
+export function StatCard({ label, value, accent }) {
+  return html`
+    <div class="card stat stat-${accent}">
+      <div class="stat-value">${() => value()}</div>
+      <div class="stat-label">${label}</div>
+    </div>
+  `;
+}

package/templates/app/src/components/TaskItem.js

@@ -1,18 +1,18 @@
-import { html } from "@zoijs/core";
-
-// Child -> parent: TaskItem owns no state. It reports toggle and delete events
-// upward by calling the callbacks the parent passed in.
-export function TaskItem({ task, onToggle, onDelete }) {
-  return html`
-    <li class=${() => "task" + (task.done ? " done" : "")}>
-      <label>
-        <input
-          type="checkbox"
-          checked=${() => task.done}
-          onchange=${() => onToggle(task.id)} />
-        <span>${() => task.text}</span>
-      </label>
-      <button class="delete" title="Delete task" onclick=${() => onDelete(task.id)}>✕</button>
-    </li>
-  `;
-}
+import { html } from "@zoijs/core";
+
+// Child -> parent: TaskItem owns no state. It reports toggle and delete events
+// upward by calling the callbacks the parent passed in.
+export function TaskItem({ task, onToggle, onDelete }) {
+  return html`
+    <li class=${() => "task" + (task.done ? " done" : "")}>
+      <label>
+        <input
+          type="checkbox"
+          checked=${() => task.done}
+          onchange=${() => onToggle(task.id)} />
+        <span>${() => task.text}</span>
+      </label>
+      <button class="delete" title="Delete task" onclick=${() => onDelete(task.id)}>✕</button>
+    </li>
+  `;
+}