mez-easyjs 0.1.0

package/src/compiler/template.js

@@ -0,0 +1,419 @@
+/**
+ * Lightweight HTML template parser → AST.
+ * Svelte-like: {expr}, onclick={handler}, {@html}, {#if}, {#each}
+ * Compat: {{expr}}, @click, e-if, e-for
+ */
+
+const VOID_TAGS = new Set([
+  'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta',
+  'param', 'source', 'track', 'wbr'
+]);
+
+const EVENT_ATTRS = new Set([
+  'onclick', 'ondblclick', 'onmousedown', 'onmouseup', 'onmouseover', 'onmouseout',
+  'onmousemove', 'onmouseenter', 'onmouseleave', 'onkeydown', 'onkeyup', 'onkeypress',
+  'oninput', 'onchange', 'onsubmit', 'onfocus', 'onblur', 'onscroll', 'onload',
+  'onerror', 'oncontextmenu', 'ontouchstart', 'ontouchend', 'ontouchmove'
+]);
+
+export function parseTemplate(html, options = {}) {
+  const expanded = expandControlBlocks(String(html || ''));
+  const tokens = tokenize(expanded);
+  const root = { type: 'Root', children: [] };
+  const stack = [root];
+
+  for (const token of tokens) {
+    const parent = stack[stack.length - 1];
+
+    if (token.type === 'text') {
+      const parts = splitInterpolations(token.value);
+      for (const part of parts) parent.children.push(part);
+      continue;
+    }
+
+    if (token.type === 'comment') {
+      parent.children.push({ type: 'Comment', value: token.value });
+      continue;
+    }
+
+    if (token.type === 'close') {
+      const name = token.name.toLowerCase();
+      if (stack.length > 1) {
+        const cur = stack[stack.length - 1];
+        if (cur.type === 'Element' && cur.tag.toLowerCase() === name) {
+          stack.pop();
+        }
+      }
+      continue;
+    }
+
+    if (token.type === 'open' || token.type === 'self') {
+      const el = createElement(token);
+      parent.children.push(el);
+      if (token.type === 'open' && !VOID_TAGS.has(el.tag.toLowerCase()) && !token.selfClosing) {
+        stack.push(el);
+      }
+    }
+  }
+
+  return root;
+}
+
+/**
+ * {#if expr}...{/if}  →  <div data-e-block="if" e-if="expr">...</div>
+ * {#each list as item}...{/each} → e-for
+ * {#each list as item, i}...{/each}
+ */
+function expandControlBlocks(html) {
+  let out = html;
+
+  // each first (may nest inside if)
+  out = out.replace(
+    /\{#each\s+([^}]+?)\s+as\s+([^}]+)\}([\s\S]*?)\{\/each\}/g,
+    (_, source, alias, body) => {
+      const parts = alias.split(',').map((s) => s.trim());
+      const item = parts[0];
+      const index = parts[1];
+      const forVal = index ? `${item}, ${index} in ${source.trim()}` : `${item} in ${source.trim()}`;
+      return `<div style="display:contents" e-for="${escapeAttr(forVal)}">${body}</div>`;
+    }
+  );
+
+  out = out.replace(
+    /\{#if\s+([^}]+)\}([\s\S]*?)\{\/if\}/g,
+    (_, cond, body) =>
+      `<div style="display:contents" e-if="${escapeAttr(cond.trim())}">${body}</div>`
+  );
+
+  return out;
+}
+
+function createElement(token) {
+  const el = {
+    type: 'Element',
+    tag: token.name,
+    attrs: [],
+    directives: [],
+    events: [],
+    children: [],
+    isComponent: isComponentTag(token.name),
+    isRouterView: token.name.toLowerCase() === 'router-view'
+  };
+
+  for (const [rawName, rawValue] of Object.entries(token.attrs)) {
+    classifyAttr(el, rawName, rawValue === true ? '' : String(rawValue));
+  }
+
+  return el;
+}
+
+function classifyAttr(el, name, value) {
+  // Primary: onclick={handler} — brace form only (CSP). Quoted onclick="..." rejected.
+  if (EVENT_ATTRS.has(name.toLowerCase())) {
+    const raw = String(value || '');
+    if (!raw.startsWith('\0expr:')) {
+      throw new Error(
+        `Inline event attribute ${name}="..." is not allowed. Use ${name}={handler} (compiles to data-e-on).`
+      );
+    }
+    const handler = stripBraces(value);
+    if (!isSafeHandler(handler)) {
+      throw new Error(
+        `Invalid event handler "${handler}". Use a method name like onclick={go} or onclick={go()}.`
+      );
+    }
+    const event = name.toLowerCase().slice(2); // onclick → click
+    el.events.push({ event, handler, modifiers: [] });
+    return;
+  }
+
+  // on:click={handler}
+  if (name.startsWith('on:') || name.startsWith('on-')) {
+    const handler = stripBraces(value);
+    if (!String(value || '').startsWith('\0expr:') && !isSafeHandler(handler)) {
+      throw new Error(
+        `Invalid event handler for ${name}. Use on:click={handler}.`
+      );
+    }
+    if (!isSafeHandler(handler)) {
+      throw new Error(
+        `Invalid event handler "${handler}". Use a method name like on:click={go}.`
+      );
+    }
+    const event = name.slice(3);
+    el.events.push({ event, handler, modifiers: [] });
+    return;
+  }
+
+  // Compat: @click / e-on:click
+  if (name.startsWith('@') || name.startsWith('e-on:')) {
+    const handler = stripBraces(value);
+    if (!isSafeHandler(handler)) {
+      throw new Error(
+        `Invalid event handler "${handler}". Use @click={go} or e-on:click={go}.`
+      );
+    }
+    const event = name.startsWith('@') ? name.slice(1) : name.slice(5);
+    el.events.push({ event, handler, modifiers: [] });
+    return;
+  }
+
+  // bind:value={x} → model; bind:other={x} → attr bind (onclick etc. rejected in codegen)
+  if (name === 'bind:value' || name === 'bind:checked') {
+    el.directives.push({ name: 'model', value: stripBraces(value) });
+    return;
+  }
+  if (name.startsWith('bind:') && name.length > 5) {
+    el.directives.push({
+      name: 'bind',
+      arg: name.slice(5),
+      value: stripBraces(value)
+    });
+    return;
+  }
+
+  // :title / e-bind:title / title={expr} dynamic when braced originally
+  if ((name.startsWith(':') && name !== ':') || name.startsWith('e-bind:')) {
+    const attr = name.startsWith(':') ? name.slice(1) : name.slice(7);
+    el.directives.push({ name: 'bind', arg: attr, value: stripBraces(value) });
+    return;
+  }
+
+  // value={expr} without bind: — treat as bind if looks like expression (no quotes in original)
+  // Handled via attr meta from tokenizer: valueMayBeExpr
+  if (name.endsWith('}') || false) {
+    /* noop */
+  }
+
+  // e-model / model
+  if (name === 'e-model' || name === 'model') {
+    el.directives.push({ name: 'model', value: stripBraces(value) });
+    return;
+  }
+
+  if (name === 'e-html' || name === '@html') {
+    el.directives.push({ name: 'html', value: stripBraces(value), raw: true });
+    return;
+  }
+
+  if (name.startsWith('e-')) {
+    const dir = name.slice(2);
+    el.directives.push({ name: dir, value: stripBraces(value) });
+    return;
+  }
+
+  // Dynamic attr: name was parsed from foo={bar}
+  if (value.startsWith('\0expr:')) {
+    const expr = value.slice(6);
+    el.directives.push({ name: 'bind', arg: name, value: expr });
+    return;
+  }
+
+  el.attrs.push({ name, value, dynamic: false });
+}
+
+function stripBraces(value) {
+  const v = String(value || '').trim();
+  if (v.startsWith('\0expr:')) return v.slice(6).trim();
+  if (v.startsWith('{') && v.endsWith('}')) return v.slice(1, -1).trim();
+  return v.replace(/^['"]|['"]$/g, '');
+}
+
+/** Method name, optional empty call: go | go() */
+function isSafeHandler(handler) {
+  return /^[A-Za-z_$][\w$]*(?:\s*\(\s*\))?$/.test(String(handler || '').trim());
+}
+
+function isComponentTag(tag) {
+  return /^[A-Z]/.test(tag);
+}
+
+function splitInterpolations(text) {
+  const nodes = [];
+  // {@html expr} | {{ expr }} | { expr }  (single braces last so {@html} wins)
+  const re = /\{@html\s+([\s\S]+?)\}|\{\{([\s\S]+?)\}\}|\{([^{}@][^{}]*)\}/g;
+  let last = 0;
+  let m;
+  while ((m = re.exec(text)) !== null) {
+    if (m.index > last) {
+      nodes.push({ type: 'Text', value: text.slice(last, m.index) });
+    }
+    if (m[1] != null) {
+      nodes.push({ type: 'RawHtml', expression: m[1].trim(), raw: true });
+    } else if (m[2] != null) {
+      nodes.push({ type: 'Interpolation', expression: m[2].trim(), raw: false });
+    } else {
+      const expr = m[3].trim();
+      // Skip CSS-like or empty; skip {# and {/
+      if (expr && !expr.startsWith('#') && !expr.startsWith('/')) {
+        nodes.push({ type: 'Interpolation', expression: expr, raw: false });
+      } else {
+        nodes.push({ type: 'Text', value: m[0] });
+      }
+    }
+    last = m.index + m[0].length;
+  }
+  if (last < text.length) {
+    nodes.push({ type: 'Text', value: text.slice(last) });
+  }
+  return nodes.filter((n) => !(n.type === 'Text' && n.value === ''));
+}
+
+function tokenize(html) {
+  const tokens = [];
+  let i = 0;
+
+  while (i < html.length) {
+    if (html.startsWith('<!--', i)) {
+      const end = html.indexOf('-->', i + 4);
+      const value = html.slice(i + 4, end === -1 ? html.length : end);
+      tokens.push({ type: 'comment', value });
+      i = end === -1 ? html.length : end + 3;
+      continue;
+    }
+
+    if (html[i] === '<') {
+      const close = html.startsWith('</', i);
+      const end = findTagEnd(html, i);
+      if (end === -1) break;
+      const raw = html.slice(i + (close ? 2 : 1), end);
+      const selfClosing = !close && /\/\s*$/.test(raw);
+      const cleaned = raw.replace(/\/\s*$/, '').trim();
+      const nameMatch = cleaned.match(/^([^\s/>]+)/);
+      if (!nameMatch) {
+        i = end + 1;
+        continue;
+      }
+      const name = nameMatch[1];
+      const attrs = close ? {} : parseTagAttrs(cleaned.slice(name.length));
+      tokens.push({
+        type: close ? 'close' : selfClosing || VOID_TAGS.has(name.toLowerCase()) ? 'self' : 'open',
+        name,
+        attrs,
+        selfClosing
+      });
+      i = end + 1;
+      continue;
+    }
+
+    const next = html.indexOf('<', i);
+    const value = html.slice(i, next === -1 ? html.length : next);
+    tokens.push({ type: 'text', value });
+    i = next === -1 ? html.length : next;
+  }
+
+  return tokens;
+}
+
+/** Find `>` not inside quotes or {...} */
+function findTagEnd(html, start) {
+  let i = start + 1;
+  let quote = null;
+  let brace = 0;
+  while (i < html.length) {
+    const ch = html[i];
+    if (quote) {
+      if (ch === '\\') {
+        i += 2;
+        continue;
+      }
+      if (ch === quote) quote = null;
+      i++;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      i++;
+      continue;
+    }
+    if (ch === '{') {
+      brace++;
+      i++;
+      continue;
+    }
+    if (ch === '}') {
+      brace = Math.max(0, brace - 1);
+      i++;
+      continue;
+    }
+    if (ch === '>' && brace === 0) return i;
+    i++;
+  }
+  return -1;
+}
+
+/**
+ * Parse attributes including onclick={greet} and class="x".
+ * Brace values are marked with \0expr: prefix.
+ */
+function parseTagAttrs(str) {
+  const attrs = {};
+  let i = 0;
+  const s = str;
+
+  while (i < s.length) {
+    while (i < s.length && /\s/.test(s[i])) i++;
+    if (i >= s.length) break;
+
+    const nameStart = i;
+    while (i < s.length && /[^\s=]/.test(s[i])) i++;
+    const name = s.slice(nameStart, i);
+    if (!name) break;
+
+    while (i < s.length && /\s/.test(s[i])) i++;
+
+    if (s[i] !== '=') {
+      attrs[name] = true;
+      continue;
+    }
+    i++; // =
+    while (i < s.length && /\s/.test(s[i])) i++;
+
+    if (s[i] === '{') {
+      let depth = 0;
+      const start = i;
+      while (i < s.length) {
+        if (s[i] === '{') depth++;
+        else if (s[i] === '}') {
+          depth--;
+          if (depth === 0) {
+            i++;
+            break;
+          }
+        }
+        i++;
+      }
+      const inner = s.slice(start + 1, i - 1).trim();
+      attrs[name] = '\0expr:' + inner;
+      continue;
+    }
+
+    if (s[i] === '"' || s[i] === "'") {
+      const q = s[i];
+      i++;
+      let val = '';
+      while (i < s.length && s[i] !== q) {
+        if (s[i] === '\\') {
+          val += s[i + 1] || '';
+          i += 2;
+          continue;
+        }
+        val += s[i];
+        i++;
+      }
+      if (s[i] === q) i++;
+      attrs[name] = val;
+      continue;
+    }
+
+    const start = i;
+    while (i < s.length && /[^\s>]/.test(s[i])) i++;
+    attrs[name] = s.slice(start, i);
+  }
+
+  return attrs;
+}
+
+function escapeAttr(s) {
+  return String(s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
+}

package/src/index.js

@@ -0,0 +1,128 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createProject } from './commands/create.js';
+import { runDev } from './commands/dev.js';
+import { runBuild } from './commands/build.js';
+import { generate } from './commands/generate.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+export const PKG_ROOT = path.resolve(__dirname, '..');
+export const MONOREPO_ROOT = path.resolve(__dirname, '../../..');
+
+export async function run(argv) {
+  const { command, args, flags } = parseArgs(argv);
+
+  if (!command || command === 'help' || flags.help) {
+    printHelp();
+    return;
+  }
+
+  switch (command) {
+    case 'create':
+    case 'scaffold':
+      await createProject(args[0], flags);
+      break;
+    case 'dev':
+      await runDev(flags);
+      break;
+    case 'build':
+      await runBuild(flags);
+      break;
+    case 'generate':
+    case 'g':
+      await generate(args[0], args[1], flags);
+      break;
+    case 'version':
+    case '-v':
+    case '--version':
+      console.log('easy.js 0.1.0');
+      break;
+    default:
+      console.error(`Unknown command: ${command}`);
+      printHelp();
+      process.exitCode = 1;
+  }
+}
+
+function parseArgs(argv) {
+  const flags = {};
+  const args = [];
+  let command = null;
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a.startsWith('--')) {
+      const key = a.slice(2);
+      const next = argv[i + 1];
+      if (next && !next.startsWith('-')) {
+        flags[key] = next;
+        i++;
+      } else {
+        flags[key] = true;
+      }
+    } else if (a.startsWith('-') && a.length === 2) {
+      const key = { p: 'port', c: 'cwd', o: 'outDir' }[a[1]] || a[1];
+      const next = argv[i + 1];
+      if (next && !next.startsWith('-')) {
+        flags[key] = next;
+        i++;
+      } else {
+        flags[key] = true;
+      }
+    } else if (!command) {
+      command = a;
+    } else {
+      args.push(a);
+    }
+  }
+
+  return { command, args, flags };
+}
+
+function printHelp() {
+  console.log(`
+Easy.js CLI v0.1.0
+
+Usage:
+  easy <command> [options]
+  create-easy-app [name] [options]
+
+Commands:
+  create [name]       Interactive project wizard (alias: scaffold)
+  dev                 Start dev server with HMR
+  build               Compile for production → dist/assets/ (Vite-like)
+  generate <type> <n> Scaffold component|page (alias: g)
+  help                Show this help
+
+Create options:
+  --name <n>          Project name (npm-valid)
+  --template <id>     minimal | starter | tailwind
+  --lang js           JavaScript only (TypeScript coming soon)
+  --yes               Skip confirmation prompts
+  --skip-install      Skip npm install
+  --skip-git          Skip git init / commit
+  --cwd <path>        Parent directory for the new project
+
+Dev / build options:
+  --cwd <path>        Project directory (default: .)
+  --port <n>          Dev server port (default: 5173)
+  --outDir <path>     Build output (default: dist)
+  --open              Open browser on dev
+  --minify            Minify build output (default: true)
+  --no-minify         Skip minify
+
+Examples:
+  easy create
+  easy create my-app --template starter --yes
+  create-easy-app my-app --template tailwind --yes
+  easy dev --cwd examples/demo
+  easy build
+  easy generate component Counter
+  easy generate page About
+
+Templates:
+  minimal   Clean skeleton (App.easy + config)
+  starter   Counter, routing, parent→child props
+  tailwind  Tailwind Play CDN only (no PostCSS / npm tailwindcss)
+`);
+}

package/src/runtime/app.js

@@ -0,0 +1,115 @@
+import { mountComponent, unmountComponent } from './component.js';
+import { setupDelegation, createEventContext } from './events.js';
+import { EasyError, reportError } from './errors.js';
+import { installOverlay } from './overlay.js';
+import { enableHmr } from './hmr.js';
+
+/**
+ * Create an Easy.js application.
+ */
+export function createApp(rootComponent) {
+  const context = {
+    plugins: [],
+    provides: Object.create(null),
+    router: null,
+    store: null,
+    rootInstance: null,
+    config: {
+      dev: typeof window !== 'undefined' && !!window.__EASY_DEV__
+    }
+  };
+
+  const nodeContext = new WeakMap();
+
+  // Shared with router / child mounts so route pages can register event contexts.
+  context.registerContext = (node, ctx) => {
+    nodeContext.set(node, ctx);
+  };
+
+  if (context.config.dev) {
+    installOverlay();
+    enableHmr();
+  }
+
+  const app = {
+    config: context.config,
+    _context: context,
+
+    use(plugin, options) {
+      if (plugin && typeof plugin.install === 'function') {
+        plugin.install(app, options);
+      } else if (typeof plugin === 'function') {
+        plugin(app, options);
+      }
+      context.plugins.push(plugin);
+      return app;
+    },
+
+    provide(key, value) {
+      context.provides[key] = value;
+      return app;
+    },
+
+    mount(selectorOrEl) {
+      const el =
+        typeof selectorOrEl === 'string'
+          ? document.querySelector(selectorOrEl)
+          : selectorOrEl;
+
+      if (!el) {
+        const err = new EasyError(`Mount target not found: ${selectorOrEl}`, {
+          hint: 'Ensure index.html has <div id="app"></div> (or pass a valid selector).'
+        });
+        reportError(err);
+        throw err;
+      }
+
+      setupDelegation(el, (node) => {
+        let n = node;
+        while (n) {
+          if (nodeContext.has(n)) return nodeContext.get(n);
+          n = n.parentNode;
+        }
+        return context.rootInstance
+          ? createEventContext(
+              context.rootInstance.methods,
+              context.rootInstance.state,
+              { $router: context.router }
+            )
+          : null;
+      });
+
+      try {
+        context.rootInstance = mountComponent(rootComponent, el, {}, {
+          app,
+          ...context
+        });
+      } catch (err) {
+        reportError(err, { component: 'Root' });
+        throw err;
+      }
+
+      if (context.rootInstance) {
+        nodeContext.set(
+          el,
+          createEventContext(
+            context.rootInstance.methods,
+            context.rootInstance.state,
+            { $router: context.router }
+          )
+        );
+      }
+
+      return context.rootInstance;
+    },
+
+    unmount() {
+      if (context.rootInstance) {
+        unmountComponent(context.rootInstance);
+        context.rootInstance = null;
+      }
+    }
+  };
+
+  return app;
+}