create-apexjs 0.0.0 → 0.1.0

package/dist/index.js

@@ -1,5 +1,48 @@
 #!/usr/bin/env node
 
 // src/index.ts
-console.log("create-apexjs is coming soon. Follow https://github.com/andrecorugda/apexjs");
-process.exit(0);
+import { cpSync, existsSync, readdirSync, readFileSync, renameSync, writeFileSync } from "fs";
+import { basename, join, resolve } from "path";
+import { fileURLToPath } from "url";
+import { defineCommand, runMain } from "citty";
+var TEMPLATE_DIR = fileURLToPath(new URL("../templates/default", import.meta.url));
+var main = defineCommand({
+  meta: {
+    name: "create-apexjs",
+    description: "Scaffold a new Apex JS app"
+  },
+  args: {
+    dir: { type: "positional", required: false, description: "Target directory", default: "apex-app" }
+  },
+  run({ args }) {
+    const target = resolve(process.cwd(), args.dir);
+    const name = basename(target);
+    if (existsSync(target) && readdirSync(target).length > 0) {
+      console.error(`
+  \u2717 Target directory is not empty: ${target}
+`);
+      process.exit(1);
+    }
+    cpSync(TEMPLATE_DIR, target, { recursive: true });
+    const gitignore = join(target, "_gitignore");
+    if (existsSync(gitignore)) renameSync(gitignore, join(target, ".gitignore"));
+    for (const rel of ["package.json", "README.md"]) {
+      const file = join(target, rel);
+      if (existsSync(file)) {
+        writeFileSync(file, readFileSync(file, "utf8").replaceAll("{{name}}", name));
+      }
+    }
+    console.log(`
+  \x1B[36mApex JS\x1B[0m app created in ${args.dir}
+
+  Next steps:
+    cd ${args.dir}
+    npm install
+    npm run dev          # http://localhost:3000
+    npm run dev:islands  # static-first islands mode
+
+  Your server/api/*.ts routes are also MCP tools at /mcp.
+`);
+  }
+});
+runMain(main);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-apexjs",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Scaffold a new Apex JS app",
   "type": "module",
   "license": "MIT",
@@ -21,7 +21,8 @@
     "create-apexjs": "./dist/index.js"
   },
   "files": [
-    "dist"
+    "dist",
+    "templates"
   ],
   "dependencies": {
     "citty": "^0.1.6"

package/templates/default/README.md

@@ -0,0 +1,33 @@
+# {{name}}
+
+An [Apex JS](https://github.com/andrecorugda/apexjs) app — a meta-framework for
+Alpine.js that renders on the server and hydrates in the browser.
+
+## Getting started
+
+```bash
+npm install
+npm run dev
+```
+
+Then open [http://localhost:3000](http://localhost:3000).
+
+## Islands mode
+
+Ship interactive JavaScript only where you need it:
+
+```bash
+apex dev --islands
+```
+
+## Project structure
+
+- `pages/*.alpine` — single-file components. The `<script server>` block runs on
+  the server; its `loader()` return value becomes the Alpine `x-data` scope.
+- `server/api/*.ts` — API routes defined with `defineApexRoute`.
+
+## AI-native API
+
+Every route in `server/api/*.ts` is a REST endpoint **and** an MCP tool at the
+same time. Set `mcp: true` on a route (see `server/api/hello.ts`) and it is
+automatically exposed to AI agents at the `/mcp` endpoint — no extra wiring.

package/templates/default/_gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+*.log

package/templates/default/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "{{name}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "apex dev",
+    "dev:islands": "apex dev --islands"
+  },
+  "dependencies": {
+    "alpinejs": "^3.14.8",
+    "apexjs-core": "latest",
+    "zod": "^4.0.0"
+  }
+}

package/templates/default/pages/index.alpine

@@ -0,0 +1,107 @@
+<script server lang="ts">
+  export function loader() {
+    return {
+      title: 'Welcome to Apex JS',
+      tagline: 'The meta-framework for Alpine.js — server-rendered, then hydrated.',
+    }
+  }
+</script>
+
+<template x-data="{ open: false }">
+  <main>
+    <h1 x-text="title"></h1>
+    <p class="tagline" x-text="tagline"></p>
+
+    <section class="card">
+      <p>
+        This page was rendered on the server from
+        <code>pages/index.alpine</code>, then hydrated by Alpine in the browser.
+        Edit it and save to see your changes live.
+      </p>
+
+      <button type="button" @click="open = !open" x-text="open ? 'Hide the details' : 'Show me how'"></button>
+
+      <div x-show="open" x-transition class="details">
+        <p>
+          The <code>loader()</code> in the server block runs on the server and
+          hands its data straight to Alpine's <code>x-data</code> scope — no
+          fetch, no boilerplate.
+        </p>
+        <p>
+          Next, open <code>server/api/hello.ts</code>: it's a REST endpoint
+          <em>and</em> an MCP tool at <code>/mcp</code> at the same time.
+        </p>
+      </div>
+    </section>
+
+    <p class="hint">
+      Run <code>apex dev --islands</code> to ship interactive islands only where
+      you need them.
+    </p>
+  </main>
+</template>
+
+<style scoped>
+  main {
+    max-width: 40rem;
+    margin: 4rem auto;
+    padding: 0 1.5rem;
+    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
+    line-height: 1.6;
+    color: #1e293b;
+  }
+
+  h1 {
+    color: #2563eb;
+    font-size: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .tagline {
+    font-size: 1.15rem;
+    color: #475569;
+    margin-top: 0;
+  }
+
+  .card {
+    margin-top: 2rem;
+    padding: 1.5rem;
+    border: 1px solid #e2e8f0;
+    border-radius: 0.75rem;
+    background: #f8fafc;
+  }
+
+  button {
+    margin-top: 0.5rem;
+    padding: 0.6rem 1.1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: #fff;
+    background: #2563eb;
+    border: none;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+
+  button:hover {
+    background: #1d4ed8;
+  }
+
+  .details {
+    margin-top: 1rem;
+  }
+
+  code {
+    padding: 0.1rem 0.35rem;
+    font-size: 0.9em;
+    background: #e2e8f0;
+    border-radius: 0.35rem;
+  }
+
+  .hint {
+    margin-top: 2rem;
+    font-size: 0.95rem;
+    color: #64748b;
+  }
+</style>

package/templates/default/server/api/hello.ts

@@ -0,0 +1,10 @@
+import { defineApexRoute } from 'apexjs-core'
+import { z } from 'zod'
+
+export default defineApexRoute({
+  method: 'GET',
+  description: 'Say hello to someone by name',
+  input: { name: z.string() },
+  mcp: true,
+  handler: ({ input }) => ({ message: `Hello, ${input.name}!` }),
+})