create-jslop 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 p-arndt 
+
+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,32 @@
+# create-jslop
+
+Scaffold a new [JSlop](https://github.com/p-arndt/jslop) app.
+
+```bash
+npm create jslop@latest my-app
+# or
+pnpm create jslop my-app
+# or
+bun create jslop my-app
+```
+
+Then:
+
+```bash
+cd my-app
+pnpm install
+pnpm dev
+```
+
+## Flags
+
+- `--template=<name>` — pick a template non-interactively. Currently shipped: `minimal`.
+- `--yes` / `-y` — skip prompts. With a project name on the command line and a single template available, no prompts fire anyway.
+
+## Templates
+
+| Template  | What you get                                                                 |
+|-----------|------------------------------------------------------------------------------|
+| `minimal` | One route, `state`, two-way `bind:value`, `{#if}`, a Vite config and a Node `serve.mjs` for production. |
+
+More templates (Tailwind, CRUD) will land alongside future JSlop releases.

package/dist/index.js

@@ -0,0 +1,123 @@
+#!/usr/bin/env node
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync, } from "node:fs";
+import { dirname, join, relative, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { createInterface } from "node:readline/promises";
+import { stdin, stdout } from "node:process";
+const HERE = dirname(fileURLToPath(import.meta.url));
+// dist/index.js → ../templates resolves to the templates dir that ships in the
+// npm tarball (see `files` in package.json).
+const TEMPLATES_DIR = resolve(HERE, "..", "templates");
+function parseArgs(argv) {
+    const out = { projectName: null, template: null, yes: false };
+    for (const a of argv) {
+        if (a === "--yes" || a === "-y")
+            out.yes = true;
+        else if (a.startsWith("--template="))
+            out.template = a.slice("--template=".length);
+        else if (!a.startsWith("-") && !out.projectName)
+            out.projectName = a;
+    }
+    return out;
+}
+function listTemplates() {
+    return readdirSync(TEMPLATES_DIR).filter((n) => statSync(join(TEMPLATES_DIR, n)).isDirectory());
+}
+function loadOwnVersion() {
+    const pkg = JSON.parse(readFileSync(resolve(HERE, "..", "package.json"), "utf8"));
+    return pkg.version;
+}
+function copyTree(from, to, replacements) {
+    mkdirSync(to, { recursive: true });
+    for (const entry of readdirSync(from)) {
+        const src = join(from, entry);
+        // npm strips `.gitignore` from published tarballs (renames it to .npmignore).
+        // Workaround: ship as `_gitignore` and rename at scaffold time. Same trick
+        // for any other dotfile we want to ship.
+        const renamed = entry.startsWith("_") ? "." + entry.slice(1) : entry;
+        const dst = join(to, renamed);
+        const s = statSync(src);
+        if (s.isDirectory()) {
+            copyTree(src, dst, replacements);
+            continue;
+        }
+        // Substitute placeholders only in text-ish files; for everything else
+        // copy bytes verbatim so we don't accidentally corrupt binaries.
+        if (looksTextual(entry)) {
+            let text = readFileSync(src, "utf8");
+            for (const [k, v] of Object.entries(replacements)) {
+                text = text.split(k).join(v);
+            }
+            writeFileSync(dst, text);
+        }
+        else {
+            cpSync(src, dst);
+        }
+    }
+}
+function looksTextual(name) {
+    return /\.(json|jsonc|mjs|cjs|js|ts|tsx|jsx|jslop|css|html|md|txt|svg|yml|yaml|toml)$/i.test(name)
+        || name === "package.json"
+        || name.startsWith("_");
+}
+async function promptName() {
+    const rl = createInterface({ input: stdin, output: stdout });
+    const answer = (await rl.question("Project name: ")).trim();
+    rl.close();
+    if (!answer) {
+        console.error("project name is required");
+        process.exit(1);
+    }
+    return answer;
+}
+async function promptTemplate(available) {
+    if (available.length === 1)
+        return available[0];
+    console.log("Available templates:");
+    available.forEach((t, i) => console.log(`  ${i + 1}. ${t}`));
+    const rl = createInterface({ input: stdin, output: stdout });
+    const answer = (await rl.question(`Pick one [1-${available.length}, default 1]: `)).trim();
+    rl.close();
+    const idx = answer === "" ? 1 : Number(answer);
+    if (!Number.isInteger(idx) || idx < 1 || idx > available.length) {
+        console.error(`invalid choice: ${answer}`);
+        process.exit(1);
+    }
+    return available[idx - 1];
+}
+async function main() {
+    const args = parseArgs(process.argv.slice(2));
+    const templates = listTemplates();
+    const projectName = args.projectName ?? (await promptName());
+    if (!/^[a-z0-9][a-z0-9._-]*$/i.test(projectName)) {
+        console.error(`invalid project name: ${projectName}`);
+        console.error("use letters, digits, '.', '_', '-' and start with a letter or digit.");
+        process.exit(1);
+    }
+    const template = args.template ?? (await promptTemplate(templates));
+    if (!templates.includes(template)) {
+        console.error(`unknown template: ${template}`);
+        console.error(`available: ${templates.join(", ")}`);
+        process.exit(1);
+    }
+    const target = resolve(process.cwd(), projectName);
+    if (existsSync(target)) {
+        console.error(`directory already exists: ${relative(process.cwd(), target) || "."}`);
+        process.exit(1);
+    }
+    const version = loadOwnVersion();
+    // create-jslop is in the same fixed-version group as @jslop/*, so its own
+    // version doubles as the framework version the scaffold should request.
+    const jslopRange = `^${version}`;
+    const replacements = {
+        "__JSLOP_VERSION__": jslopRange,
+        "__PROJECT_NAME__": projectName,
+    };
+    copyTree(join(TEMPLATES_DIR, template), target, replacements);
+    console.log(`\n✔ Created ${projectName} (template: ${template})\n`);
+    console.log("Next steps:");
+    console.log(`  cd ${projectName}`);
+    console.log("  pnpm install   # or: npm install / bun install");
+    console.log("  pnpm dev\n");
+}
+void main();

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "create-jslop",
+  "version": "0.1.0",
+  "description": "Scaffold a new JSlop app. Run `npm create jslop@latest my-app` or `pnpm create jslop my-app`.",
+  "keywords": [
+    "jslop",
+    "create",
+    "scaffold",
+    "starter",
+    "framework"
+  ],
+  "license": "MIT",
+  "author": "p-arndt",
+  "homepage": "https://github.com/p-arndt/jslop#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/p-arndt/jslop.git",
+    "directory": "packages/create-jslop"
+  },
+  "bugs": "https://github.com/p-arndt/jslop/issues",
+  "engines": {
+    "node": ">=20"
+  },
+  "type": "module",
+  "bin": {
+    "create-jslop": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^25.7.0",
+    "typescript": "^5.6.3"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node -e \"import('node:fs').then(fs => fs.chmodSync('dist/index.js', 0o755))\""
+  }
+}

package/templates/minimal/README.md

@@ -0,0 +1,27 @@
+# __PROJECT_NAME__
+
+A [JSlop](https://github.com/p-arndt/jslop) app.
+
+## Develop
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Open <http://localhost:5173>. Edit `src/routes/index.jslop` — the dev server reloads on save.
+
+## Build for production
+
+```bash
+pnpm build       # emits dist/client and dist/server
+pnpm serve       # runs the Node adapter against the built output
+```
+
+## Layout
+
+- `src/routes/` — file-based routes. `index.jslop` → `/`, `about.jslop` → `/about`, `users/[id].jslop` → `/users/:id`.
+- `src/routes/_layout.jslop` — wraps every route in this directory (optional). Use `<children/>` to mark where the inner route goes.
+- `src/routes/_404.jslop` — custom not-found page (optional).
+- `vite.config.mjs` — the Vite + `@jslop/vite` configuration.
+- `serve.mjs` — production Node entrypoint.

package/templates/minimal/_gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.DS_Store
+*.log

package/templates/minimal/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "__PROJECT_NAME__",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && vite build --ssr",
+    "preview": "vite preview",
+    "serve": "node serve.mjs"
+  },
+  "dependencies": {
+    "@jslop/client": "__JSLOP_VERSION__",
+    "@jslop/node-adapter": "__JSLOP_VERSION__",
+    "@jslop/router": "__JSLOP_VERSION__",
+    "@jslop/runtime": "__JSLOP_VERSION__",
+    "@jslop/server": "__JSLOP_VERSION__"
+  },
+  "devDependencies": {
+    "@jslop/vite": "__JSLOP_VERSION__",
+    "vite": "^7.0.0"
+  }
+}

package/templates/minimal/serve.mjs

@@ -0,0 +1,16 @@
+import { createServer } from "@jslop/node-adapter";
+import { render } from "./dist/server/entry-server.js";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const port = Number(process.env.PORT ?? 3000);
+
+const server = createServer({
+  render,
+  clientDir: resolve(here, "dist/client"),
+});
+
+server.listen(port, () => {
+  console.log(`__PROJECT_NAME__ listening on http://localhost:${port}`);
+});

package/templates/minimal/src/routes/index.jslop

@@ -0,0 +1,34 @@
+component Index {
+  state count = 0
+  state name = "world"
+
+  function increment() {
+    count++
+  }
+
+  view {
+    <main>
+      <h1>Hello, {name}!</h1>
+
+      <label>
+        Your name:
+        <input bind:value={name} />
+      </label>
+
+      <p>You've clicked the button {count} times.</p>
+      <button onclick={increment}>+1</button>
+
+      {#if count >= 10}
+        <p>Nice — keep going.</p>
+      {/if}
+
+      <hr/>
+
+      <p>
+        Edit <code>src/routes/index.jslop</code> and save. The dev server
+        reloads automatically. Add more routes by dropping <code>.jslop</code>
+        files into <code>src/routes/</code>.
+      </p>
+    </main>
+  }
+}

package/templates/minimal/vite.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite";
+import jslop from "@jslop/vite";
+
+export default defineConfig({
+  plugins: [jslop()],
+});