create-sting-app 1.0.0

package/README.md

@@ -0,0 +1,39 @@
+# create-sting-app
+
+Scaffold a StingJS starter app with JavaScript or TypeScript.
+
+## Usage
+
+```bash
+npm create sting@latest
+```
+
+You can also run the package directly:
+
+```bash
+npx create-sting-app@latest
+```
+
+With a target directory:
+
+```bash
+npm create sting@latest my-sting-app
+```
+
+Select a template without prompts:
+
+```bash
+npm create sting@latest my-sting-app -- --template typescript --yes
+```
+
+Template values:
+- `javascript` (`js`)
+- `typescript` (`ts`)
+
+## Local Development
+
+From repo root:
+
+```bash
+node create-sting-app/bin/create-sting-app.js my-sting-app
+```

package/bin/create-sting-app.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+import process from "node:process"
+import { run } from "../lib/run.js"
+
+run(process.argv.slice(2), { cliName: "create-sting-app" }).catch((err) => {
+  console.error(`\n[create-sting-app] ${err?.message || err}`)
+  process.exit(1)
+})

package/lib/run.js

@@ -0,0 +1,268 @@
+import fs from "node:fs"
+import fsp from "node:fs/promises"
+import path from "node:path"
+import process from "node:process"
+import { fileURLToPath } from "node:url"
+import { createInterface } from "node:readline/promises"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const templates = {
+  javascript: path.resolve(__dirname, "../template/vanilla-js"),
+  typescript: path.resolve(__dirname, "../template/vanilla-ts"),
+}
+
+const defaultProjectName = "sting-app"
+
+export async function run(argv = process.argv.slice(2), options = {}) {
+  const cliName = options.cliName || "create-sting-app"
+  const parsed = parseArgs(argv)
+
+  if (parsed.help) {
+    printHelp(cliName)
+    return
+  }
+
+  const resolved = await resolveScaffoldOptions({
+    projectArg: parsed.projectArg,
+    templateArg: parsed.templateArg,
+    skipPrompts: parsed.skipPrompts,
+  })
+
+  const projectNameInput = resolved.projectName
+  const template = resolved.template
+  const templateRoot = templates[template]
+
+  if (!templateRoot) {
+    throw new Error(`unknown template: ${template}`)
+  }
+
+  const targetDir = path.resolve(process.cwd(), projectNameInput)
+  const inCurrentDir = projectNameInput === "."
+
+  const rawName = inCurrentDir ? path.basename(process.cwd()) : projectNameInput
+  const packageName = toPackageName(rawName)
+
+  await ensureTargetDir(targetDir, parsed.force)
+  await copyDir(templateRoot, targetDir)
+
+  const pkg = buildPackageJson({ packageName, template })
+  const pkgPath = path.join(targetDir, "package.json")
+  await fsp.writeFile(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`, "utf8")
+
+  console.log("\nDone. Created StingJS app:")
+  console.log(`  ${targetDir}`)
+  console.log(`\nTemplate: ${template}`)
+  console.log("\nNext steps:")
+
+  if (!inCurrentDir) {
+    const relativeTarget = path.relative(process.cwd(), targetDir)
+    const cdTarget = !relativeTarget || relativeTarget.startsWith("..")
+      ? targetDir
+      : relativeTarget
+    console.log(`  cd ${cdTarget}`)
+  }
+
+  console.log("  npm install")
+  console.log("  npm run dev")
+  console.log(`\nRun \`${cliName} --help\` for options.`)
+}
+
+function parseArgs(argv) {
+  let projectArg = ""
+  let templateArg = ""
+  let force = false
+  let skipPrompts = false
+  let help = false
+
+  for (let index = 0; index < argv.length; index += 1) {
+    const arg = argv[index]
+
+    if (arg === "--force" || arg === "-f") {
+      force = true
+      continue
+    }
+
+    if (arg === "--yes" || arg === "-y") {
+      skipPrompts = true
+      continue
+    }
+
+    if (arg === "--help" || arg === "-h") {
+      help = true
+      continue
+    }
+
+    if (arg === "--template" || arg === "-t") {
+      const nextArg = argv[index + 1]
+      if (!nextArg || nextArg.startsWith("-")) {
+        throw new Error("missing value for --template. Use --template javascript or --template typescript.")
+      }
+      templateArg = nextArg
+      index += 1
+      continue
+    }
+
+    if (arg.startsWith("--template=")) {
+      templateArg = arg.slice("--template=".length)
+      continue
+    }
+
+    if (!arg.startsWith("-") && !projectArg) {
+      projectArg = arg
+    }
+  }
+
+  return { projectArg, templateArg, force, skipPrompts, help }
+}
+
+function printHelp(cliName) {
+  console.log(cliName)
+  console.log("")
+  console.log("Usage:")
+  console.log(`  ${cliName} [project-name] [options]`)
+  console.log("")
+  console.log("Options:")
+  console.log("  -t, --template <name>  javascript | typescript")
+  console.log("  -f, --force            allow scaffolding into a non-empty directory")
+  console.log("  -y, --yes              skip prompts and use defaults")
+  console.log("  -h, --help             show this message")
+}
+
+async function resolveScaffoldOptions({ projectArg, templateArg, skipPrompts }) {
+  const normalizedProject = projectArg && projectArg.trim() ? projectArg.trim() : ""
+  const normalizedTemplate = normalizeTemplate(templateArg)
+
+  if (skipPrompts) {
+    return {
+      projectName: normalizedProject || defaultProjectName,
+      template: normalizedTemplate || "javascript",
+    }
+  }
+
+  if (normalizedProject && normalizedTemplate) {
+    return {
+      projectName: normalizedProject,
+      template: normalizedTemplate,
+    }
+  }
+
+  const rl = createInterface({ input: process.stdin, output: process.stdout })
+
+  try {
+    const projectName = normalizedProject || await promptProjectName(rl)
+    const template = normalizedTemplate || await promptTemplate(rl)
+    return { projectName, template }
+  } finally {
+    rl.close()
+  }
+}
+
+async function promptProjectName(rl) {
+  const answer = (await rl.question(`Project name (${defaultProjectName}): `)).trim()
+  return answer || defaultProjectName
+}
+
+async function promptTemplate(rl) {
+  for (;;) {
+    const answer = (await rl.question("Language? [1] JavaScript [2] TypeScript (1): ")).trim().toLowerCase()
+
+    if (!answer || answer === "1" || answer === "javascript" || answer === "js") {
+      return "javascript"
+    }
+
+    if (answer === "2" || answer === "typescript" || answer === "ts") {
+      return "typescript"
+    }
+
+    console.log("Please enter 1 (JavaScript) or 2 (TypeScript).")
+  }
+}
+
+function normalizeTemplate(input) {
+  if (typeof input !== "string") return ""
+
+  const normalized = input.trim().toLowerCase()
+  if (!normalized) return ""
+
+  if (normalized === "javascript" || normalized === "js" || normalized === "vanilla" || normalized === "vanilla-js") {
+    return "javascript"
+  }
+
+  if (normalized === "typescript" || normalized === "ts" || normalized === "vanilla-ts") {
+    return "typescript"
+  }
+
+  throw new Error(`unknown template \"${input}\". Use \"javascript\" or \"typescript\".`)
+}
+
+function buildPackageJson({ packageName, template }) {
+  const base = {
+    name: packageName,
+    private: true,
+    version: "0.0.0",
+    type: "module",
+    scripts: {
+      dev: "vite",
+      build: "vite build",
+      preview: "vite preview",
+    },
+    dependencies: {
+      stingjs: "^1.0.0",
+    },
+    devDependencies: {
+      vite: "^7.3.1",
+    },
+  }
+
+  if (template === "typescript") {
+    base.scripts.typecheck = "tsc --noEmit"
+    base.devDependencies.typescript = "^5.9.3"
+  }
+
+  return base
+}
+
+async function ensureTargetDir(targetDir, force) {
+  if (!fs.existsSync(targetDir)) {
+    await fsp.mkdir(targetDir, { recursive: true })
+    return
+  }
+
+  const entries = await fsp.readdir(targetDir)
+  if (entries.length === 0) return
+
+  if (!force) {
+    throw new Error(`target directory is not empty: ${targetDir}. Use --force to continue.`)
+  }
+}
+
+async function copyDir(srcDir, destDir) {
+  const entries = await fsp.readdir(srcDir, { withFileTypes: true })
+
+  for (const entry of entries) {
+    const srcPath = path.join(srcDir, entry.name)
+    const name = entry.name === "_gitignore" ? ".gitignore" : entry.name
+    const destPath = path.join(destDir, name)
+
+    if (entry.isDirectory()) {
+      await fsp.mkdir(destPath, { recursive: true })
+      await copyDir(srcPath, destPath)
+      continue
+    }
+
+    await fsp.copyFile(srcPath, destPath)
+  }
+}
+
+function toPackageName(input) {
+  const trimmed = input.trim().toLowerCase()
+  const sanitized = trimmed
+    .replace(/^\.+/, "")
+    .replace(/[^a-z0-9._-]+/g, "-")
+    .replace(/^-+/, "")
+    .replace(/-+$/, "")
+
+  return sanitized || defaultProjectName
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "create-sting-app",
+  "version": "1.0.0",
+  "description": "Scaffold a StingJS app",
+  "type": "module",
+  "bin": {
+    "create-sting-app": "./bin/create-sting-app.js"
+  },
+  "exports": {
+    "./cli": "./lib/run.js"
+  },
+  "files": [
+    "bin",
+    "lib",
+    "template",
+    "README.md"
+  ],
+  "keywords": [
+    "stingjs",
+    "create-sting",
+    "create-sting-app",
+    "scaffold",
+    "vite",
+    "typescript"
+  ],
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/template/vanilla-js/_gitignore

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

package/template/vanilla-js/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sting App</title>
+  </head>
+  <body>
+    <main class="app" x-data="counter">
+      <h1>StingJS Starter</h1>
+      <p class="hint">Counter demo powered by StingJS directives.</p>
+
+      <div class="row">
+        <button x-on:click="dec">Decrease</button>
+        <span class="count" x-text="count"></span>
+        <button x-on:click="inc">Increase</button>
+      </div>
+    </main>
+
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,15 @@
+import sting from "stingjs"
+import "./style.css"
+
+sting.data("counter", () => {
+  const [count, setCount] = sting.signal(0)
+
+  const inc = () => setCount((value) => value + 1)
+  const dec = () => setCount((value) => value - 1)
+
+  return {
+    count,
+    inc,
+    dec,
+  }
+})

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

@@ -0,0 +1,63 @@
+:root {
+  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  line-height: 1.4;
+  color: #0f172a;
+  background: radial-gradient(circle at top, #dbeafe 0%, #eff6ff 45%, #ffffff 100%);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+.app {
+  width: min(560px, calc(100vw - 32px));
+  background: #ffffff;
+  border: 1px solid #bfdbfe;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 16px 36px rgba(30, 64, 175, 0.16);
+}
+
+h1 {
+  margin: 0 0 8px;
+}
+
+.hint {
+  margin: 0 0 20px;
+  color: #334155;
+}
+
+.row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+button {
+  border: 1px solid #93c5fd;
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-radius: 10px;
+  padding: 8px 14px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #dbeafe;
+}
+
+.count {
+  min-width: 52px;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+}

package/template/vanilla-ts/_gitignore

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

package/template/vanilla-ts/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Sting App</title>
+  </head>
+  <body>
+    <main class="app" x-data="counter">
+      <h1>StingJS Starter</h1>
+      <p class="hint">Counter demo powered by StingJS directives.</p>
+
+      <div class="row">
+        <button x-on:click="dec">Decrease</button>
+        <span class="count" x-text="count"></span>
+        <button x-on:click="inc">Increase</button>
+      </div>
+    </main>
+
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

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

@@ -0,0 +1,15 @@
+import sting from "stingjs"
+import "./style.css"
+
+sting.data("counter", () => {
+  const [count, setCount] = sting.signal(0)
+
+  const inc = () => setCount((value) => value + 1)
+  const dec = () => setCount((value) => value - 1)
+
+  return {
+    count,
+    inc,
+    dec,
+  }
+})

package/template/vanilla-ts/src/stingjs.d.ts

@@ -0,0 +1,9 @@
+declare module "stingjs" {
+  interface StingApi {
+    data(name: string, setup: () => Record<string, unknown>): void
+    signal<T>(initialValue: T): [() => T, (nextValue: T | ((prev: T) => T)) => void]
+  }
+
+  const sting: StingApi
+  export default sting
+}

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

@@ -0,0 +1,63 @@
+:root {
+  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  line-height: 1.4;
+  color: #0f172a;
+  background: radial-gradient(circle at top, #dbeafe 0%, #eff6ff 45%, #ffffff 100%);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  display: grid;
+  place-items: center;
+}
+
+.app {
+  width: min(560px, calc(100vw - 32px));
+  background: #ffffff;
+  border: 1px solid #bfdbfe;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 16px 36px rgba(30, 64, 175, 0.16);
+}
+
+h1 {
+  margin: 0 0 8px;
+}
+
+.hint {
+  margin: 0 0 20px;
+  color: #334155;
+}
+
+.row {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+button {
+  border: 1px solid #93c5fd;
+  background: #eff6ff;
+  color: #1d4ed8;
+  border-radius: 10px;
+  padding: 8px 14px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover {
+  background: #dbeafe;
+}
+
+.count {
+  min-width: 52px;
+  text-align: center;
+  font-size: 1.5rem;
+  font-weight: 700;
+}

package/template/vanilla-ts/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noEmit": true,
+    "types": ["vite/client"]
+  },
+  "include": ["src"]
+}