humanjs-core 1.0.0

package/scripts/humanjs.js

@@ -0,0 +1,700 @@
+#!/usr/bin/env node
+
+import path from 'node:path';
+import { mkdir, readFile, writeFile, access } from 'node:fs/promises';
+import { compileHuman } from '../src/compiler/human.js';
+
+function printHelp() {
+  console.log(`
+  humanjs
+
+  create <name>          scaffold a new app
+  compile <in> <out>     compile .human → .js
+
+`);
+}
+
+const [, , command, arg1, arg2] = process.argv;
+
+if (!command || command === '--help' || command === '-h') {
+  printHelp();
+  process.exit(0);
+}
+
+if (command === 'compile') { await compileCommand(arg1, arg2); process.exit(0); }
+if (command === 'create')  { await createCommand(arg1);        process.exit(0); }
+
+console.error(`  unknown command: ${command}`);
+process.exit(1);
+
+async function compileCommand(inputPath, outputPath) {
+  if (!inputPath || !outputPath) throw new Error('missing paths');
+  const cwd = process.cwd();
+  const absIn  = path.resolve(cwd, inputPath);
+  const absOut = path.resolve(cwd, outputPath);
+  const source = await readFile(absIn, 'utf8');
+  const appImportPath = await resolveAppImportPath(cwd, absOut);
+  const compiled = compileHuman(source, { appImportPath });
+  await writeFile(absOut, compiled, 'utf8');
+  console.log(`  ${path.relative(cwd, absIn)} → ${path.relative(cwd, absOut)}`);
+}
+
+async function createCommand(appName) {
+  if (!appName) throw new Error('missing name');
+  const targetDir = path.resolve(process.cwd(), appName);
+  await ensureMissing(targetDir);
+
+  const folders = ['src', 'src/api', 'src/components', 'src/layouts', 'src/routes', 'src/styles'];
+  await Promise.all(folders.map(f => mkdir(path.join(targetDir, f), { recursive: true })));
+
+  const files = {
+    'package.json':                  createPackageJson(appName),
+    'index.html':                    createIndexHtml(appName),
+    'README.md':                     createReadme(appName),
+    'src/main.js':                   createMainJs(),
+    'src/app.js':                    createAppJs(),
+    'src/api/client.js':             createApiClientJs(),
+    'src/components/BrandMark.js':   createBrandMarkJs(),
+    'src/components/NavLink.js':     createNavLinkJs(),
+    'src/components/Badge.js':       createBadgeJs(),
+    'src/layouts/AppLayout.js':      createAppLayoutJs(),
+    'src/routes/home.js':            createHomeRouteJs(),
+    'src/routes/about.js':           createAboutRouteJs(),
+    'src/routes/user.js':            createUserRouteJs(),
+    'src/routes/not-found.js':       createNotFoundRouteJs(),
+    'src/styles/theme.css':          createThemeCss(),
+  };
+
+  await Promise.all(
+    Object.entries(files).map(([rel, content]) =>
+      writeFile(path.join(targetDir, rel), content, 'utf8')
+    )
+  );
+
+  console.log(`\n  created: ${appName}\n`);
+  console.log(`  cd ${appName}`);
+  console.log(`  npm install`);
+  console.log(`  npm start\n`);
+}
+
+async function ensureMissing(targetDir) {
+  try {
+    await access(targetDir);
+    throw new Error(`already exists: ${path.basename(targetDir)}`);
+  } catch (error) {
+    if (error.code !== 'ENOENT') throw error;
+  }
+}
+
+async function resolveAppImportPath(cwd, absoluteOutput) {
+  try {
+    const pkg = JSON.parse(await readFile(path.resolve(cwd, 'package.json'), 'utf8'));
+    const localEntry = path.resolve(cwd, 'src/index.js');
+    if (pkg.name === 'human-js' || pkg.name === '@kaiserofthenight/human-js' || pkg.name === '@kaiserofthenight/human-js-test') {
+      const rel = path.relative(path.dirname(absoluteOutput), localEntry).split(path.sep).join('/');
+      return rel.startsWith('.') ? rel : `./${rel}`;
+    }
+  } catch {}
+  return 'humanjs-core';
+}
+
+// ─── Scaffold files ───────────────────────────────────────────────────────────
+
+function createPackageJson(appName) {
+  return JSON.stringify({
+    name: appName,
+    private: true,
+    type: 'module',
+    scripts: {
+      start: 'python -m http.server 3000 || python3 -m http.server 3000 || npx serve . --listen 3000',
+      dev:   'python -m http.server 3000 || python3 -m http.server 3000 || npx serve . --listen 3000',
+    },
+    dependencies: {
+      'humanjs-core': '^1.0.0',
+    },
+  }, null, 2) + '\n';
+}
+
+function createIndexHtml(appName) {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${appName}</title>
+    <link rel="icon" href="https://human-js.vercel.app/logo.png" />
+    <script type="importmap">
+      {
+        "imports": {
+          "humanjs-core": "./node_modules/humanjs-core/src/index.js",
+          "@/": "./src/"
+        }
+      }
+    </script>
+    <link rel="stylesheet" href="./src/styles/theme.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>
+`;
+}
+
+function createReadme(appName) {
+  return `# ${appName}
+
+\`\`\`bash
+npm install && npm start
+\`\`\`
+
+Open [localhost:3000](http://localhost:3000)
+
+## Structure
+
+\`\`\`
+src/
+  api/          data fetching & clients
+  components/   reusable UI pieces
+  layouts/      page shells (header, footer)
+  routes/       one file per page
+  styles/       theme.css — tokens + base styles
+  app.js        router setup
+  main.js       entry point
+\`\`\`
+
+## Imports
+
+Use the \`@/\` alias for local imports:
+
+\`\`\`js
+import { homeRoute } from '@/routes/home.js';
+import { AppLayout } from '@/layouts/AppLayout.js';
+\`\`\`
+`;
+}
+
+function createMainJs() {
+  return `import '@/app.js';\n`;
+}
+
+function createAppJs() {
+  return `import { createRouter } from 'humanjs-core';
+import { AppLayout } from '@/layouts/AppLayout.js';
+import { homeRoute } from '@/routes/home.js';
+import { aboutRoute } from '@/routes/about.js';
+import { userRoute } from '@/routes/user.js';
+import { notFoundRoute } from '@/routes/not-found.js';
+
+createRouter(
+  {
+    '/': {
+      layout: ({ children }) => AppLayout({ title: 'Home', children }),
+      ...homeRoute,
+    },
+    '/about': {
+      layout: ({ children }) => AppLayout({ title: 'About', children }),
+      render: aboutRoute,
+    },
+    '/user/:id': {
+      layout: ({ children, params }) => AppLayout({ title: \`User \${params.id}\`, children }),
+      render: userRoute,
+    },
+    '*': {
+      layout: ({ children }) => AppLayout({ title: 'Not found', children }),
+      render: notFoundRoute,
+    },
+  },
+  { root: document.getElementById('app') }
+);
+`;
+}
+
+function createApiClientJs() {
+  return `// Replace with your real API base URL
+const BASE = 'https://jsonplaceholder.typicode.com';
+
+export async function getUser(id) {
+  const res = await fetch(\`\${BASE}/users/\${id}\`);
+  if (!res.ok) throw new Error(\`HTTP \${res.status}\`);
+  return res.json();
+}
+`;
+}
+
+function createBrandMarkJs() {
+  return `import { component, html } from 'humanjs-core';
+
+export const BrandMark = component(({ compact = false }) => html\`
+  <a class="brand\${compact ? ' brand--sm' : ''}" href="#/">
+    <img class="brand__logo" src="https://human-js.vercel.app/logo.png" alt="" />
+    <span class="brand__name">Human<em>JS</em></span>
+  </a>
+\`);
+`;
+}
+
+function createNavLinkJs() {
+  return `import { component, html } from 'humanjs-core';
+
+export const NavLink = component(({ href, label }) => html\`
+  <a class="nav-link" href="#\${href}">\${label}</a>
+\`);
+`;
+}
+
+function createBadgeJs() {
+  return `import { component, html } from 'humanjs-core';
+
+// tone: 'purple' | 'cyan' | 'pink' | 'green' | 'yellow' | 'default'
+export const Badge = component(({ label, tone = 'default' }) => html\`
+  <span class="badge badge--\${tone}">\${label}</span>
+\`);
+`;
+}
+
+function createAppLayoutJs() {
+  return `import { layout, html } from 'humanjs-core';
+import { BrandMark } from '@/components/BrandMark.js';
+import { NavLink } from '@/components/NavLink.js';
+
+export const AppLayout = layout(({ title = 'HumanJS', children }) => html\`
+  <div class="app">
+
+    <header class="header">
+      <div class="container header__inner">
+        \${BrandMark({})}
+        <nav class="nav">
+          \${NavLink({ href: '/',                    label: 'Home'  })}
+          \${NavLink({ href: '/about',               label: 'About' })}
+          \${NavLink({ href: '/user/1?tab=overview', label: 'User'  })}
+        </nav>
+      </div>
+    </header>
+
+    <main class="main container">
+      <h1 class="page-title">\${title}</h1>
+      <div class="page-body">
+        \${children}
+      </div>
+    </main>
+
+    <footer class="footer">
+      <div class="container footer__inner">
+        \${BrandMark({ compact: true })}
+        <span class="footer__note">MIT license</span>
+      </div>
+    </footer>
+
+  </div>
+\`);
+`;
+}
+
+function createHomeRouteJs() {
+  return `import { html } from 'humanjs-core';
+import { Badge } from '@/components/Badge.js';
+
+export const homeRoute = {
+  state: { count: 0 },
+  actions: {
+    inc({ state })   { state.count += 1; },
+    dec({ state })   { state.count -= 1; },
+    reset({ state }) { state.count = 0;  },
+  },
+  render: (_, { state }) => html\`
+    <div class="stack">
+
+      <section class="panel">
+        <p class="label">counter</p>
+        <h2 class="counter">\${state.count}</h2>
+        <div class="btn-row">
+          <button data-click="dec"   class="btn btn--ghost">−</button>
+          <button data-click="reset" class="btn">reset</button>
+          <button data-click="inc"   class="btn btn--primary">+</button>
+        </div>
+      </section>
+
+      <section class="panel">
+        <p class="label">stack</p>
+        <div class="tag-row">
+          \${Badge({ label: 'zero build', tone: 'purple' })}
+          \${Badge({ label: '~5kb',       tone: 'cyan'   })}
+          \${Badge({ label: 'no magic',   tone: 'pink'   })}
+          \${Badge({ label: 'plain JS',   tone: 'green'  })}
+        </div>
+      </section>
+
+    </div>
+  \`,
+};
+`;
+}
+
+function createAboutRouteJs() {
+  return `import { html } from 'humanjs-core';
+
+export function aboutRoute() {
+  return html\`
+    <div class="stack">
+      <section class="panel">
+        <p class="label">structure</p>
+        <ul class="file-list">
+          <li><code>src/api/</code>       — data &amp; fetch helpers</li>
+          <li><code>src/components/</code>— reusable UI pieces</li>
+          <li><code>src/layouts/</code>   — page shells</li>
+          <li><code>src/routes/</code>    — one file per page</li>
+          <li><code>src/styles/</code>    — tokens &amp; base CSS</li>
+        </ul>
+      </section>
+    </div>
+  \`;
+}
+`;
+}
+
+function createUserRouteJs() {
+  return `import { html, getParams } from 'humanjs-core';
+import { getUser } from '@/api/client.js';
+
+export async function userRoute(params) {
+  const query = getParams();
+  let user = null;
+  let error = null;
+
+  try {
+    user = await getUser(params.id);
+  } catch (e) {
+    error = e.message;
+  }
+
+  if (error) return html\`
+    <section class="panel">
+      <p class="label error">error</p>
+      <p>\${error}</p>
+    </section>
+  \`;
+
+  return html\`
+    <div class="stack">
+      <section class="panel">
+        <p class="label">user #\${params.id}</p>
+        <h2 class="user-name">\${user.name}</h2>
+        <p class="user-meta">\${user.email}</p>
+        <p class="user-meta">\${user.company?.name}</p>
+      </section>
+      <section class="panel">
+        <p class="label">active tab</p>
+        <p>\${query.tab || 'overview'}</p>
+      </section>
+    </div>
+  \`;
+}
+`;
+}
+
+function createNotFoundRouteJs() {
+  return `import { html } from 'humanjs-core';
+
+export function notFoundRoute() {
+  return html\`
+    <section class="panel">
+      <p class="label error">404</p>
+      <p>Page not found. <a href="#/">Go home</a></p>
+    </section>
+  \`;
+}
+`;
+}
+
+function createThemeCss() {
+  return `@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;0,800;1,400&display=swap');
+
+/* ── Reset ───────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+/* ── Tokens ──────────────────────────────────── */
+
+:root {
+  /* Dracula / Catppuccin Mocha */
+  --bg:       #1e1e2e;
+  --bg-alt:   #181825;
+  --surface:  #313244;
+  --overlay:  #45475a;
+  --muted:    #585b70;
+  --subtle:   #6c7086;
+  --text:     #cdd6f4;
+  --subtext:  #a6adc8;
+
+  /* Accent palette */
+  --purple:   #cba6f7;
+  --pink:     #f38ba8;
+  --cyan:     #89dceb;
+  --blue:     #89b4fa;
+  --green:    #a6e3a1;
+  --yellow:   #f9e2af;
+  --peach:    #fab387;
+
+  /* Semantic */
+  --border:   var(--surface);
+  --link:     var(--blue);
+
+  /* Scale */
+  --radius:   12px;
+  --radius-sm: 7px;
+  --font: 'JetBrains Mono', ui-monospace, monospace;
+}
+
+/* ── Base ────────────────────────────────────── */
+
+html { color-scheme: dark; }
+
+body {
+  font-family:  var(--font);
+  background:   var(--bg-alt);
+  color:        var(--text);
+  font-size:    13px;
+  line-height:  1.65;
+  min-height:   100vh;
+  -webkit-font-smoothing: antialiased;
+}
+
+a     { color: var(--link); }
+img   { display: block; }
+code  { font-family: var(--font); font-size: .9em; color: var(--cyan); }
+button { font: inherit; cursor: pointer; }
+
+/* ── Layout ──────────────────────────────────── */
+
+.app {
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  min-height: 100vh;
+}
+
+.container {
+  width: min(100% - 40px, 900px);
+  margin-inline: auto;
+}
+
+/* ── Header ──────────────────────────────────── */
+
+.header {
+  background: var(--bg);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.header__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 14px;
+}
+
+/* ── Brand ───────────────────────────────────── */
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  text-decoration: none;
+  color: var(--text);
+}
+
+.brand__logo {
+  width: 28px;
+  height: 28px;
+  border-radius: var(--radius-sm);
+}
+
+.brand__name {
+  font-size: 14px;
+  font-weight: 800;
+  letter-spacing: .05em;
+}
+
+.brand__name em {
+  font-style: normal;
+  color: var(--purple);
+}
+
+.brand--sm .brand__logo { width: 22px; height: 22px; }
+.brand--sm .brand__name { font-size: 12px; }
+
+/* ── Nav ─────────────────────────────────────── */
+
+.nav { display: flex; gap: 2px; }
+
+.nav-link {
+  display: inline-block;
+  padding: 6px 12px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: .04em;
+  color: var(--subtle);
+  text-decoration: none;
+  transition: color .15s, background .15s;
+}
+
+.nav-link:hover {
+  color: var(--cyan);
+  background: rgba(137, 220, 235, .08);
+}
+
+/* ── Main ────────────────────────────────────── */
+
+.main {
+  padding-block: 44px 72px;
+  display: grid;
+  gap: 6px;
+  align-content: start;
+}
+
+.page-title {
+  font-size: clamp(28px, 5vw, 46px);
+  font-weight: 800;
+  letter-spacing: -.04em;
+  line-height: 1;
+  color: var(--text);
+  margin-bottom: 28px;
+}
+
+.page-body { display: grid; gap: 16px; }
+
+/* ── Stack (vertical spacing util) ──────────────*/
+
+.stack { display: grid; gap: 14px; }
+
+/* ── Panel ───────────────────────────────────── */
+
+.panel {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 24px;
+  display: grid;
+  gap: 14px;
+}
+
+.label {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: .15em;
+  text-transform: uppercase;
+  color: var(--subtle);
+}
+
+.label.error { color: var(--pink); }
+
+/* ── Counter ─────────────────────────────────── */
+
+.counter {
+  font-size: clamp(56px, 12vw, 96px);
+  font-weight: 800;
+  letter-spacing: -.05em;
+  line-height: 1;
+  color: var(--purple);
+}
+
+.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }
+
+/* ── Buttons ─────────────────────────────────── */
+
+.btn {
+  padding: 9px 18px;
+  border-radius: var(--radius-sm);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: .04em;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+  transition: opacity .15s, transform .1s;
+}
+
+.btn:hover  { opacity: .75; }
+.btn:active { transform: scale(.97); }
+
+.btn--primary {
+  background: var(--purple);
+  border-color: transparent;
+  color: var(--bg-alt);
+}
+
+.btn--ghost {
+  background: transparent;
+  color: var(--subtle);
+}
+
+/* ── Badge ───────────────────────────────────── */
+
+.tag-row { display: flex; gap: 8px; flex-wrap: wrap; }
+
+.badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .04em;
+  background: var(--surface);
+  color: var(--subtext);
+}
+
+.badge--purple { background: rgba(203,166,247,.15); color: var(--purple); }
+.badge--cyan   { background: rgba(137,220,235,.15); color: var(--cyan);   }
+.badge--pink   { background: rgba(243,139,168,.15); color: var(--pink);   }
+.badge--green  { background: rgba(166,227,161,.15); color: var(--green);  }
+.badge--yellow { background: rgba(249,226,175,.15); color: var(--yellow); }
+.badge--blue   { background: rgba(137,180,250,.15); color: var(--blue);   }
+
+/* ── File list ───────────────────────────────── */
+
+.file-list {
+  list-style: none;
+  display: grid;
+  gap: 8px;
+}
+
+.file-list li { color: var(--subtext); font-size: 12px; }
+.file-list li code { color: var(--cyan); }
+
+/* ── User route ──────────────────────────────── */
+
+.user-name { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
+.user-meta { font-size: 12px; color: var(--subtext); }
+
+/* ── Footer ──────────────────────────────────── */
+
+.footer {
+  background: var(--bg);
+  border-top: 1px solid var(--border);
+}
+
+.footer__inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block: 14px;
+}
+
+.footer__note {
+  font-size: 11px;
+  color: var(--muted);
+  letter-spacing: .06em;
+}
+
+/* ── Mobile ──────────────────────────────────── */
+
+@media (max-width: 580px) {
+  .header__inner { flex-wrap: wrap; gap: 10px; }
+  .page-title    { margin-bottom: 20px; }
+  .panel         { padding: 18px; }
+}
+`;
+}