luxaura 1.0.0

package/src/parser/index.js

@@ -0,0 +1,319 @@
+'use strict';
+
+/**
+ * Luxaura Parser
+ * Converts .lux file source into an Abstract Syntax Tree (AST)
+ *
+ * Block order in a .lux file:
+ *   props  → input declarations
+ *   state  → reactive local data
+ *   server → backend Node.js logic (stripped from client build)
+ *   style  → visual properties
+ *   view   → UI component tree
+ */
+
+const BLOCK_NAMES = ['props', 'state', 'server', 'style', 'view'];
+
+class LuxParser {
+  constructor(source, filename = 'unknown.lux') {
+    this.source = source;
+    this.filename = filename;
+    this.lines = source.split('\n');
+    this.pos = 0;
+  }
+
+  /** Main entry — returns full AST */
+  parse() {
+    const ast = {
+      type: 'LuxFile',
+      filename: this.filename,
+      props: [],
+      state: [],
+      server: null,
+      style: [],
+      view: null,
+    };
+
+    while (this.pos < this.lines.length) {
+      const line = this.lines[this.pos];
+      const trimmed = line.trim();
+
+      if (!trimmed || trimmed.startsWith('#')) {
+        this.pos++;
+        continue;
+      }
+
+      const blockName = BLOCK_NAMES.find(b => trimmed === b);
+      if (blockName) {
+        this.pos++;
+        const blockLines = this._collectBlock(0);
+        switch (blockName) {
+          case 'props':  ast.props  = this._parseProps(blockLines);  break;
+          case 'state':  ast.state  = this._parseState(blockLines);  break;
+          case 'server': ast.server = this._parseServer(blockLines); break;
+          case 'style':  ast.style  = this._parseStyle(blockLines);  break;
+          case 'view':   ast.view   = this._parseView(blockLines);   break;
+        }
+      } else {
+        this.pos++;
+      }
+    }
+
+    return ast;
+  }
+
+  /** Collect all lines that belong to the current block (indented deeper than baseIndent) */
+  _collectBlock(baseIndent) {
+    const blockLines = [];
+    while (this.pos < this.lines.length) {
+      const line = this.lines[this.pos];
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith('#')) {
+        blockLines.push(line);
+        this.pos++;
+        continue;
+      }
+      const indent = this._indentLevel(line);
+      if (indent <= baseIndent && trimmed && !trimmed.startsWith('#')) {
+        // Check if this is a new top-level block name
+        if (BLOCK_NAMES.includes(trimmed)) break;
+        // Could be content at the same level — stop if we're collecting a sub-block
+        if (baseIndent === 0) break;
+      }
+      blockLines.push(line);
+      this.pos++;
+    }
+    return blockLines;
+  }
+
+  _indentLevel(line) {
+    let count = 0;
+    for (const ch of line) {
+      if (ch === ' ')  count++;
+      else if (ch === '\t') count += 4;
+      else break;
+    }
+    return count;
+  }
+
+  // ─── Block Parsers ─────────────────────────────────────────────────────────
+
+  _parseProps(lines) {
+    const props = [];
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith('#')) continue;
+      // Format:  name: Type  or  name: Type = default
+      const match = trimmed.match(/^(\w+)\s*:\s*(\w+)(?:\s*=\s*(.+))?$/);
+      if (match) {
+        props.push({
+          type: 'Prop',
+          name: match[1],
+          propType: match[2],
+          defaultValue: match[3] ? this._parseValue(match[3]) : undefined,
+        });
+      }
+    }
+    return props;
+  }
+
+  _parseState(lines) {
+    const state = [];
+    for (const line of lines) {
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith('#')) continue;
+      // Format:  name: value
+      const match = trimmed.match(/^(\w+)\s*:\s*(.+)$/);
+      if (match) {
+        state.push({
+          type: 'StateVar',
+          name: match[1],
+          value: this._parseValue(match[2]),
+        });
+      }
+    }
+    return state;
+  }
+
+  _parseServer(lines) {
+    // Server block is raw Node.js code — preserve as-is for compilation
+    return {
+      type: 'ServerBlock',
+      raw: lines.map(l => l.replace(/^\s{4}/, '')).join('\n'), // dedent one level
+      functions: this._extractServerFunctions(lines),
+    };
+  }
+
+  _extractServerFunctions(lines) {
+    const fns = [];
+    for (let i = 0; i < lines.length; i++) {
+      const trimmed = lines[i].trim();
+      const match = trimmed.match(/^def\s+(\w+)\s*\(([^)]*)\)\s*:$/);
+      if (match) {
+        const name = match[1];
+        const params = match[2].split(',').map(p => p.trim()).filter(Boolean);
+        // Collect function body
+        const bodyLines = [];
+        i++;
+        while (i < lines.length) {
+          const indent = this._indentLevel(lines[i]);
+          if (indent < 8 && lines[i].trim()) break;
+          bodyLines.push(lines[i].replace(/^\s{8}/, ''));
+          i++;
+        }
+        i--; // rewind since outer loop will increment
+        fns.push({ type: 'ServerFunction', name, params, body: bodyLines.join('\n') });
+      }
+    }
+    return fns;
+  }
+
+  _parseStyle(lines) {
+    const rules = [];
+    let currentSelector = null;
+    let currentProps = {};
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      const trimmed = line.trim();
+      if (!trimmed || trimmed.startsWith('#')) continue;
+
+      const indent = this._indentLevel(line);
+
+      if (indent <= 4) {
+        // Selector (e.g., `self`, `.my-class`, `Title`)
+        if (currentSelector !== null) {
+          rules.push({ type: 'StyleRule', selector: currentSelector, props: currentProps });
+        }
+        currentSelector = trimmed;
+        currentProps = {};
+      } else {
+        // Property: value
+        const match = trimmed.match(/^([\w-]+)\s*:\s*(.+)$/);
+        if (match) {
+          currentProps[match[1]] = this._parseStyleValue(match[2]);
+        }
+      }
+    }
+    if (currentSelector !== null) {
+      rules.push({ type: 'StyleRule', selector: currentSelector, props: currentProps });
+    }
+    return rules;
+  }
+
+  _parseView(lines) {
+    if (!lines.length) return null;
+    const cleaned = lines.filter(l => l.trim() && !l.trim().startsWith('#'));
+    if (!cleaned.length) return null;
+    // Detect the minimum indentation level of the block so the tree
+    // builder knows what counts as the "root" level.
+    const baseIndent = Math.min(...cleaned.map(l => this._indentLevel(l)));
+    return this._parseComponentTree(cleaned, baseIndent).nodes[0] || null;
+  }
+
+  _parseComponentTree(lines, baseIndent) {
+    const nodes = [];
+    let i = 0;
+
+    while (i < lines.length) {
+      const line = lines[i];
+      const trimmed = line.trim();
+      if (!trimmed) { i++; continue; }
+
+      const indent = this._indentLevel(line);
+      if (indent < baseIndent) break;
+      if (indent > baseIndent) { i++; continue; }
+
+      const node = this._parseComponentLine(trimmed);
+
+      // Collect children (lines deeper than current indent)
+      const childLines = [];
+      i++;
+      while (i < lines.length) {
+        const childIndent = this._indentLevel(lines[i]);
+        const childTrimmed = lines[i].trim();
+        if (!childTrimmed) { i++; continue; }
+        if (childIndent <= indent) break;
+        childLines.push(lines[i]);
+        i++;
+      }
+
+      if (childLines.length) {
+        const result = this._parseComponentTree(childLines, indent + 4);
+        node.children = result.nodes;
+        node.events = [...(node.events || []), ...result.events];
+      }
+
+      nodes.push(node);
+    }
+
+    return { nodes, events: [] };
+  }
+
+  _parseComponentLine(text) {
+    // Event handler:  on click:
+    const eventMatch = text.match(/^on\s+(\w+)\s*:/);
+    if (eventMatch) {
+      return { type: 'EventHandler', event: eventMatch[1], children: [] };
+    }
+
+    // Component with bound prop:  Title "{propName}"  — check BEFORE plain string
+    const boundMatch = text.match(/^(\w+)\s+"\{([^}]+)\}"$/);
+    if (boundMatch) {
+      return { type: 'Component', name: boundMatch[1], binding: boundMatch[2], props: {}, children: [] };
+    }
+
+    // Component with string arg:  Title "Hello"
+    const strArgMatch = text.match(/^(\w+)\s+"([^"]*)"$/);
+    if (strArgMatch) {
+      return { type: 'Component', name: strArgMatch[1], text: strArgMatch[2], props: {}, children: [] };
+    }
+
+    // Component with props:  Input type:"text" placeholder:"Name"
+    const propsMatch = text.match(/^(\w+)\s+(.+)$/);
+    if (propsMatch) {
+      const name = propsMatch[1];
+      const propsRaw = propsMatch[2];
+      const props = this._parseInlineProps(propsRaw);
+      return { type: 'Component', name, props, children: [] };
+    }
+
+    // Bare component:  Box
+    return { type: 'Component', name: text, props: {}, children: [] };
+  }
+
+  _parseInlineProps(raw) {
+    const props = {};
+    // Match key:"value" or key:{binding} or key:value
+    const re = /(\w+)\s*:\s*(?:"([^"]*)"|\{([^}]+)\}|(\S+))/g;
+    let m;
+    while ((m = re.exec(raw)) !== null) {
+      const key = m[1];
+      const val = m[2] !== undefined ? m[2]
+                : m[3] !== undefined ? { binding: m[3] }
+                : this._parseValue(m[4]);
+      props[key] = val;
+    }
+    return props;
+  }
+
+  // ─── Value Helpers ──────────────────────────────────────────────────────────
+
+  _parseValue(raw) {
+    if (raw === 'true')  return true;
+    if (raw === 'false') return false;
+    if (raw === 'null')  return null;
+    if (!isNaN(Number(raw))) return Number(raw);
+    if (raw.startsWith('"') && raw.endsWith('"')) return raw.slice(1, -1);
+    if (raw.startsWith("'") && raw.endsWith("'")) return raw.slice(1, -1);
+    return raw; // treat as identifier / expression
+  }
+
+  _parseStyleValue(raw) {
+    const num = Number(raw);
+    if (!isNaN(num)) return num;
+    return raw;
+  }
+}
+
+module.exports = { LuxParser };

package/src/runtime/luxaura.runtime.js

@@ -0,0 +1,350 @@
+/**
+ * Luxaura Runtime Engine
+ * ~20kb client-side library
+ * Handles: component registry, reactive state, DOM diffing, RPC tunnel, routing
+ *
+ * Window global: window.__Lux__
+ */
+
+(function (global) {
+  'use strict';
+
+  // ─── Utilities ─────────────────────────────────────────────────────────────
+
+  let _uidCounter = 0;
+  const uid = () => ++_uidCounter;
+
+  function deepClone(obj) {
+    return JSON.parse(JSON.stringify(obj));
+  }
+
+  function debounce(fn, ms) {
+    let t;
+    return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
+  }
+
+  // ─── CSRF Token ────────────────────────────────────────────────────────────
+
+  function getCsrfToken() {
+    let token = sessionStorage.getItem('__lux_csrf__');
+    if (!token) {
+      token = Array.from(crypto.getRandomValues(new Uint8Array(16)))
+        .map(b => b.toString(16).padStart(2, '0')).join('');
+      sessionStorage.setItem('__lux_csrf__', token);
+    }
+    return token;
+  }
+
+  // ─── Reactive State (Proxy-based) ──────────────────────────────────────────
+
+  class ReactiveState {
+    constructor(initial, onChange) {
+      this._raw = deepClone(initial);
+      this._listeners = [];
+      if (onChange) this._listeners.push(onChange);
+
+      this._proxy = new Proxy(this._raw, {
+        set: (target, key, value) => {
+          target[key] = value;
+          this._notify();
+          return true;
+        },
+      });
+    }
+
+    get proxy() { return this._proxy; }
+
+    get(key) { return this._raw[key]; }
+
+    set(key, value) {
+      this._raw[key] = value;
+      this._notify();
+    }
+
+    _notify() {
+      this._listeners.forEach(fn => fn(this._raw));
+    }
+  }
+
+  // ─── Simple Virtual DOM Differ ─────────────────────────────────────────────
+
+  function patch(container, newHTML) {
+    // Lightweight: use innerHTML for initial render,
+    // diff only changed text nodes and attributes on update
+    const parser = new DOMParser();
+    const newDoc = parser.parseFromString(`<body>${newHTML}</body>`, 'text/html');
+    const newBody = newDoc.body;
+    diffNodes(container, newBody);
+  }
+
+  function diffNodes(oldParent, newParent) {
+    const oldChildren = Array.from(oldParent.childNodes);
+    const newChildren = Array.from(newParent.childNodes);
+
+    const maxLen = Math.max(oldChildren.length, newChildren.length);
+
+    for (let i = 0; i < maxLen; i++) {
+      const oldNode = oldChildren[i];
+      const newNode = newChildren[i];
+
+      if (!oldNode && newNode) {
+        oldParent.appendChild(newNode.cloneNode(true));
+        continue;
+      }
+      if (oldNode && !newNode) {
+        oldParent.removeChild(oldNode);
+        continue;
+      }
+      if (oldNode.nodeType !== newNode.nodeType ||
+          oldNode.nodeName !== newNode.nodeName) {
+        oldParent.replaceChild(newNode.cloneNode(true), oldNode);
+        continue;
+      }
+      if (oldNode.nodeType === Node.TEXT_NODE) {
+        if (oldNode.textContent !== newNode.textContent) {
+          oldNode.textContent = newNode.textContent;
+        }
+        continue;
+      }
+      if (oldNode.nodeType === Node.ELEMENT_NODE) {
+        diffAttributes(oldNode, newNode);
+        diffNodes(oldNode, newNode);
+      }
+    }
+  }
+
+  function diffAttributes(oldEl, newEl) {
+    // Remove old attrs
+    for (const attr of Array.from(oldEl.attributes)) {
+      if (!newEl.hasAttribute(attr.name)) oldEl.removeAttribute(attr.name);
+    }
+    // Set new/changed attrs
+    for (const attr of Array.from(newEl.attributes)) {
+      if (oldEl.getAttribute(attr.name) !== attr.value) {
+        oldEl.setAttribute(attr.name, attr.value);
+      }
+    }
+  }
+
+  // ─── RPC Tunnel (server.fn() calls) ────────────────────────────────────────
+
+  const rpc = new Proxy({}, {
+    get(_, fnName) {
+      return async (...args) => {
+        const resp = await fetch('/__lux_rpc__', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'X-Lux-CSRF': getCsrfToken(),
+          },
+          body: JSON.stringify({ fn: fnName, args }),
+        });
+        if (!resp.ok) throw new Error(`RPC ${fnName} failed: ${resp.status}`);
+        return resp.json();
+      };
+    },
+  });
+
+  // ─── Router ────────────────────────────────────────────────────────────────
+
+  const router = {
+    params: {},
+    query: {},
+
+    navigate(url) {
+      history.pushState({}, '', url);
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    },
+
+    _parseQuery(search) {
+      const q = {};
+      new URLSearchParams(search).forEach((v, k) => { q[k] = v; });
+      return q;
+    },
+
+    _init() {
+      this.query = this._parseQuery(location.search);
+      window.addEventListener('popstate', () => {
+        this.query = this._parseQuery(location.search);
+      });
+    },
+  };
+
+  // ─── Auto-Responsiveness (Physics Engine) ──────────────────────────────────
+
+  const physics = {
+    _init() {
+      this._applyMobileTargets();
+      window.addEventListener('resize', debounce(() => this._applyMobileTargets(), 100));
+    },
+
+    _applyMobileTargets() {
+      const isMobile = window.innerWidth < 768;
+      document.querySelectorAll('.lux-action, .lux-input, .lux-switch').forEach(el => {
+        if (isMobile) {
+          el.style.minHeight = '44px';
+          el.style.minWidth = '44px';
+        } else {
+          el.style.minHeight = '';
+          el.style.minWidth = '';
+        }
+      });
+
+      // Auto-stack Row → Column on mobile
+      document.querySelectorAll('.lux-row').forEach(el => {
+        el.style.flexDirection = isMobile ? 'column' : 'row';
+      });
+    },
+  };
+
+  // ─── Storage Wrapper ───────────────────────────────────────────────────────
+
+  const storage = {
+    local:   { get: k => localStorage.getItem(k),   set: (k,v) => localStorage.setItem(k,v),   remove: k => localStorage.removeItem(k) },
+    session: { get: k => sessionStorage.getItem(k), set: (k,v) => sessionStorage.setItem(k,v), remove: k => sessionStorage.removeItem(k) },
+  };
+
+  // ─── HTTP Helper ───────────────────────────────────────────────────────────
+
+  const http = {
+    async get(url, opts = {}) {
+      const r = await fetch(url, { method: 'GET', ...opts });
+      return r.json();
+    },
+    async post(url, body, opts = {}) {
+      const r = await fetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', ...opts.headers },
+        body: JSON.stringify(body),
+        ...opts,
+      });
+      return r.json();
+    },
+  };
+
+  // ─── Auth Stub ─────────────────────────────────────────────────────────────
+
+  const auth = {
+    async login(credentials) { return rpc.login(credentials); },
+    async logout() { return rpc.logout(); },
+    async user() { return rpc.currentUser(); },
+  };
+
+  // ─── Component Context ─────────────────────────────────────────────────────
+
+  class ComponentContext {
+    constructor(definition, props = {}) {
+      this._uid = uid();
+      this._def = definition;
+      this._props = props;
+      this._state = new ReactiveState(
+        deepClone(definition.state || {}),
+        () => this._scheduleUpdate()
+      );
+      this._el = null;
+      this._updateScheduled = false;
+
+      // Public interface available in render / event handlers
+      this.server = rpc;
+      this.router = router;
+      this.http   = http;
+      this.auth   = auth;
+      this.storage = storage;
+    }
+
+    get(key) {
+      if (key in this._props) return this._props[key];
+      return this._state.get(key);
+    }
+
+    set(key, value) {
+      this._state.set(key, value);
+    }
+
+    _scheduleUpdate() {
+      if (this._updateScheduled) return;
+      this._updateScheduled = true;
+      requestAnimationFrame(() => {
+        this._updateScheduled = false;
+        this._update();
+      });
+    }
+
+    _update() {
+      if (!this._el) return;
+      const newHTML = this._def.render(this);
+      patch(this._el, newHTML);
+    }
+
+    mount(selector) {
+      const container = typeof selector === 'string'
+        ? document.querySelector(selector)
+        : selector;
+      if (!container) throw new Error(`Luxaura: mount target not found: ${selector}`);
+      this._el = container;
+      container.innerHTML = this._def.render(this);
+      if (this._def.mounted) this._def.mounted(container, this);
+      return this;
+    }
+  }
+
+  // ─── Lux Core ──────────────────────────────────────────────────────────────
+
+  const registry = {};
+
+  const Lux = {
+    version: '1.0.0',
+
+    define(name, definition) {
+      registry[name] = definition;
+      return this;
+    },
+
+    mount(name, selector, props = {}) {
+      const def = registry[name];
+      if (!def) throw new Error(`Luxaura: component "${name}" not defined.`);
+      const ctx = new ComponentContext(def, props);
+      ctx.mount(selector);
+      return ctx;
+    },
+
+    /** Bind an event to a rendered component element */
+    on(container, componentName, event, handler) {
+      const selector = `[data-lux-id^="${componentName.toLowerCase()}-"]`;
+      container.addEventListener(event, async (e) => {
+        const target = e.target.closest(selector);
+        if (!target) return;
+        const ctx = target.__luxCtx__;
+        await handler(ctx || {});
+      });
+    },
+
+    /** Two-way binding for Input elements */
+    bind(container, ctx) {
+      container.addEventListener('input', e => {
+        const key = e.target.dataset.luxBind;
+        if (key) ctx.set(key, e.target.value);
+      });
+    },
+
+    router,
+    http,
+    auth,
+    storage,
+    rpc,
+
+    _init() {
+      router._init();
+      physics._init();
+    },
+  };
+
+  // Boot
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => Lux._init());
+  } else {
+    Lux._init();
+  }
+
+  global.__Lux__ = Lux;
+})(window);