luxaura 1.0.0

package/examples/TodoApp.lux

@@ -0,0 +1,97 @@
+# TodoApp — Full Example .lux Application
+# Showcases: state, server, style, view, events, bindings
+
+props
+    title: String = "My Todos"
+
+state
+    todos: []
+    newTodo: ""
+    filter: "all"
+    loading: false
+
+server
+    import db from "luxaura/db"
+
+    def getTodos():
+        return db.query("SELECT * FROM todos ORDER BY created_at DESC")
+
+    def addTodo(text):
+        return db.insert("todos", { text, done: false, created_at: "NOW()" })
+
+    def toggleTodo(id, done):
+        return db.update("todos", { done }, { id })
+
+    def deleteTodo(id):
+        return db.query("DELETE FROM todos WHERE id = ?", [id])
+
+style
+    self
+        padding: 8
+        background: #f8fafc
+        min-height: 100vh
+
+    Title
+        fontSize: 3xl
+        fontWeight: black
+        color: #1a1a2e
+        margin-bottom: 8
+
+    Input
+        padding: 4
+        radius: large
+        shadow: soft
+        fontSize: lg
+
+    Action
+        radius: large
+        padding: 4
+        shadow: soft
+        cursor: pointer
+
+    Card
+        shadow: medium
+        radius: large
+        padding: 6
+
+view
+    Container
+        Column
+            Row
+                Title "{title}"
+                Badge "{todos.length} items"
+
+            Card
+                Row
+                    Input type:"text" placeholder:"What needs to be done?" value:{newTodo}
+                    Action "Add"
+                        class: "lux-bg-primary lux-text-white"
+                        on click:
+                            await server.addTodo(newTodo)
+                            newTodo = ""
+                            todos = await server.getTodos()
+
+            Row
+                Action "All"
+                    on click:
+                        filter = "all"
+                Action "Active"
+                    on click:
+                        filter = "active"
+                Action "Done"
+                    on click:
+                        filter = "done"
+
+            List
+                ListItem
+                    Row
+                        Switch
+                        Text "{todo.text}"
+                        Action "Delete"
+                            class: "lux-action danger"
+                            on click:
+                                await server.deleteTodo(todo.id)
+                                todos = await server.getTodos()
+
+            Text "{todos.length === 0 ? 'No todos yet. Add one above!' : ''}"
+                class: "lux-text-muted lux-text-center"

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "luxaura",
+  "version": "1.0.0",
+  "description": "Intent-Based Full-Stack Web Framework — build apps with .lux files",
+  "main": "src/index.js",
+  "bin": {
+    "luxaura": "./bin/luxaura.js"
+
+  },
+  "scripts": {
+    "test": "node test/run-tests.js"
+  },
+  "keywords": [
+    "framework",
+    "web",
+    "fullstack",
+    "lux",
+    "intent-based"
+  ],
+  "author": "Imed Rebhi",
+  "license": "MIT",
+  "dependencies": {
+    "chokidar": "^3.5.3",
+    "commander": "^11.0.0",
+    "ws": "^8.14.2",
+    "express": "^4.18.2",
+    "http-proxy-middleware": "^2.0.6",
+    "chalk": "^4.1.2",
+    "glob": "^10.3.3",
+    "fs-extra": "^11.1.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/compiler/index.js

@@ -0,0 +1,389 @@
+'use strict';
+
+/**
+ * Luxaura Compiler
+ * Takes an AST produced by the parser and emits:
+ *   - client.js  : reactive runtime bundle (no server code)
+ *   - server.js  : secure RPC handler (vault)
+ *   - index.html : entry HTML shell
+ */
+
+const SMART_PROPS_MAP = {
+  padding:    (v) => `padding: ${typeof v === 'number' ? v * 4 + 'px' : v};`,
+  margin:     (v) => `margin: ${typeof v === 'number' ? v * 4 + 'px' : v};`,
+  radius: {
+    none: 'border-radius: 0;',
+    small: 'border-radius: 4px;',
+    medium: 'border-radius: 8px;',
+    large: 'border-radius: 16px;',
+    full: 'border-radius: 9999px;',
+  },
+  shadow: {
+    none: 'box-shadow: none;',
+    soft: 'box-shadow: 0 2px 12px rgba(0,0,0,0.08);',
+    medium: 'box-shadow: 0 4px 24px rgba(0,0,0,0.14);',
+    hard: 'box-shadow: 0 8px 32px rgba(0,0,0,0.24);',
+  },
+  gap:        (v) => `gap: ${typeof v === 'number' ? v * 4 + 'px' : v};`,
+  width:      (v) => `width: ${typeof v === 'number' ? v + 'px' : v};`,
+  height:     (v) => `height: ${typeof v === 'number' ? v + 'px' : v};`,
+  color:      (v) => `color: ${v};`,
+  background: (v) => `background: ${v};`,
+  fontSize: {
+    xs: 'font-size: 0.75rem;',
+    sm: 'font-size: 0.875rem;',
+    md: 'font-size: 1rem;',
+    lg: 'font-size: 1.25rem;',
+    xl: 'font-size: 1.5rem;',
+    '2xl': 'font-size: 2rem;',
+    '3xl': 'font-size: 3rem;',
+  },
+  fontWeight: {
+    thin: 'font-weight: 100;',
+    light: 'font-weight: 300;',
+    normal: 'font-weight: 400;',
+    medium: 'font-weight: 500;',
+    bold: 'font-weight: 700;',
+    black: 'font-weight: 900;',
+  },
+  display: (v) => `display: ${v};`,
+  flex:    (v) => `flex: ${v};`,
+  align:   (v) => `align-items: ${v};`,
+  justify: (v) => `justify-content: ${v};`,
+  overflow:(v) => `overflow: ${v};`,
+  opacity: (v) => `opacity: ${v};`,
+  border:  (v) => `border: ${v};`,
+  cursor:  (v) => `cursor: ${v};`,
+  zIndex:  (v) => `z-index: ${v};`,
+};
+
+function resolveSmartProp(key, val) {
+  const handler = SMART_PROPS_MAP[key];
+  if (!handler) return `${camelToKebab(key)}: ${val};`;
+  if (typeof handler === 'function') return handler(val);
+  if (typeof handler === 'object') return handler[val] || `${camelToKebab(key)}: ${val};`;
+  return `${camelToKebab(key)}: ${val};`;
+}
+
+function camelToKebab(str) {
+  return str.replace(/([A-Z])/g, m => '-' + m.toLowerCase());
+}
+
+// ─── Component → HTML tag mapping ────────────────────────────────────────────
+
+const COMPONENT_TAGS = {
+  Box:       'div',
+  Row:       'div',
+  Column:    'div',
+  Grid:      'div',
+  Container: 'div',
+  Nav:       'nav',
+  Sidebar:   'aside',
+  Footer:    'footer',
+  Header:    'header',
+  Section:   'section',
+  Title:     'h1',   // runtime selects h1–h6 by context depth
+  Text:      'p',
+  Image:     'img',
+  Icon:      'span',
+  Action:    'button',
+  Input:     'input',
+  Form:      'form',
+  Switch:    'input', // type="checkbox"
+  Table:     'table',
+  List:      'ul',
+  ListItem:  'li',
+  Link:      'a',
+  Span:      'span',
+  Code:      'code',
+  Pre:       'pre',
+  Badge:     'span',
+  Card:      'div',
+  Modal:     'div',
+  Overlay:   'div',
+  Divider:   'hr',
+};
+
+const COMPONENT_DEFAULT_CLASSES = {
+  Box:       'lux-box',
+  Row:       'lux-row',
+  Column:    'lux-column',
+  Grid:      'lux-grid',
+  Container: 'lux-container',
+  Nav:       'lux-nav',
+  Sidebar:   'lux-sidebar',
+  Footer:    'lux-footer',
+  Header:    'lux-header',
+  Section:   'lux-section',
+  Title:     'lux-title',
+  Text:      'lux-text',
+  Image:     'lux-image',
+  Icon:      'lux-icon',
+  Action:    'lux-action',
+  Input:     'lux-input',
+  Form:      'lux-form',
+  Switch:    'lux-switch',
+  Table:     'lux-table',
+  List:      'lux-list',
+  ListItem:  'lux-list-item',
+  Link:      'lux-link',
+  Badge:     'lux-badge',
+  Card:      'lux-card',
+};
+
+// ─── Main Compiler Class ──────────────────────────────────────────────────────
+
+class LuxCompiler {
+  constructor(ast, options = {}) {
+    this.ast = ast;
+    this.options = {
+      target: options.target || 'client', // 'client' | 'server' | 'full'
+      componentName: options.componentName || this._inferName(ast.filename),
+      ...options,
+    };
+    this._titleDepth = 0;
+  }
+
+  _inferName(filename) {
+    return (filename || 'App').replace(/\.lux$/, '').replace(/[^a-zA-Z0-9]/g, '');
+  }
+
+  compile() {
+    return {
+      clientJS:  this._compileClientJS(),
+      serverJS:  this._compileServerJS(),
+      css:       this._compileCSS(),
+      html:      this._compileHTMLShell(),
+    };
+  }
+
+  // ─── Client JS ─────────────────────────────────────────────────────────────
+
+  _compileClientJS() {
+    const name     = this.options.componentName;
+    const stateObj = this._compileStateObj();
+    const propsArr = this._compilePropsDecl();
+    const render   = this._compileRenderFn();
+    const events   = this._compileEventSetup();
+
+    return `
+/* Luxaura — ${name} Component | Generated by Luxaura Compiler v1.0 */
+(function(Lux) {
+  Lux.define('${name}', {
+    props: [${propsArr}],
+    state: ${stateObj},
+    render(ctx) {
+${render}
+    },
+    mounted(el, ctx) {
+${events}
+    }
+  });
+})(window.__Lux__);
+`.trim();
+  }
+
+  _compileStateObj() {
+    if (!this.ast.state.length) return '{}';
+    const obj = {};
+    this.ast.state.forEach(s => { obj[s.name] = s.value; });
+    // Use JSON.stringify then indent for readability
+    return JSON.stringify(obj, null, 6).replace(/^/gm, '    ').trimStart();
+  }
+
+  _compilePropsDecl() {
+    return this.ast.props.map(p => `'${p.name}'`).join(', ');
+  }
+
+  _compileRenderFn() {
+    if (!this.ast.view) return "      return '';";
+    const html = this._renderNode(this.ast.view, 0);
+    // Escape backticks in generated template
+    const escaped = html.replace(/`/g, '\\`');
+    return `      return \`${escaped}\`;`;
+  }
+
+  _renderNode(node, depth) {
+    if (!node) return '';
+    if (node.type === 'EventHandler') return '';
+
+    const tag  = COMPONENT_TAGS[node.name] || node.name.toLowerCase();
+    const cls  = COMPONENT_DEFAULT_CLASSES[node.name] || '';
+    const attrs = this._buildAttrs(node, cls);
+
+    // Special self-closing
+    if (tag === 'input' || tag === 'img' || tag === 'hr') {
+      return `<${tag}${attrs}>`;
+    }
+
+    // Title heading level based on nesting
+    let actualTag = tag;
+    if (node.name === 'Title') {
+      const level = Math.min(depth + 1, 6);
+      actualTag = `h${level}`;
+    }
+
+    const innerText = node.text
+      ? node.text
+      : node.binding
+        ? `\${ctx.get('${node.binding}')}`
+        : '';
+
+    const children = (node.children || [])
+      .filter(c => c.type !== 'EventHandler')
+      .map(c => this._renderNode(c, depth + 1))
+      .join('');
+
+    return `<${actualTag}${attrs}>${innerText}${children}</${actualTag}>`;
+  }
+
+  _buildAttrs(node, cls) {
+    const parts = [];
+    if (cls) parts.push(`class="${cls}"`);
+
+    // data-lux-id for event binding
+    parts.push(`data-lux-id="${node.name.toLowerCase()}-\${ctx._uid}"`);
+
+    // Image lazy loading
+    if (node.name === 'Image') {
+      parts.push('loading="lazy"');
+      if (node.props.src) parts.push(`src="${node.props.src}"`);
+      if (node.props.alt) parts.push(`alt="${node.props.alt}"`);
+      if (node.props.responsive) parts.push('style="max-width:100%;height:auto"');
+    }
+
+    // Input attributes
+    if (node.name === 'Input') {
+      const type = node.props.type || 'text';
+      parts.push(`type="${type}"`);
+      if (node.props.placeholder) parts.push(`placeholder="${node.props.placeholder}"`);
+      if (node.props.value) parts.push(`value="\${ctx.get('${node.props.value?.binding || node.props.value}')}" data-lux-bind="${node.props.value?.binding || node.props.value}"`);
+    }
+
+    // Switch
+    if (node.name === 'Switch') {
+      parts.push('type="checkbox"');
+    }
+
+    // Action / Link
+    if (node.name === 'Link' && node.props.href) {
+      parts.push(`href="${node.props.href}"`);
+    }
+
+    // Extra user-defined class
+    if (node.props.class) parts.push(`class="${cls} ${node.props.class}"`);
+
+    return parts.length ? ' ' + parts.join(' ') : '';
+  }
+
+  _compileEventSetup() {
+    if (!this.ast.view) return '';
+    const handlers = [];
+    this._collectEvents(this.ast.view, handlers);
+    if (!handlers.length) return '      // no events';
+    return handlers.map(h =>
+      `      Lux.on(el, '${h.component.toLowerCase()}', '${h.event}', async (ctx) => {\n        ${h.body}\n      });`
+    ).join('\n');
+  }
+
+  _collectEvents(node, out, parentName = null) {
+    if (!node) return;
+    const eventHandler = (node.children || []).find(c => c.type === 'EventHandler');
+    if (eventHandler) {
+      const body = (eventHandler.children || [])
+        .map(c => this._nodeToStatement(c))
+        .join('\n        ');
+      out.push({ component: node.name, event: eventHandler.event, body: body || '/* no body */' });
+    }
+    (node.children || []).forEach(c => this._collectEvents(c, out, node.name));
+  }
+
+  _nodeToStatement(node) {
+    // Very simple: treat node name as a raw statement for event bodies
+    if (node.type === 'Component') {
+      // e.g.  await server.saveData(count)
+      return node.name + (node.text ? ` ${node.text}` : '');
+    }
+    return '';
+  }
+
+  // ─── Server JS ─────────────────────────────────────────────────────────────
+
+  _compileServerJS() {
+    const name = this.options.componentName;
+    if (!this.ast.server) {
+      return `/* Luxaura Vault — ${name} | no server block */\nmodule.exports = {};`;
+    }
+
+    const { functions, raw } = this.ast.server;
+
+    // Translate `def name(params):` → `async function name(params) {`
+    let serverCode = raw
+      .replace(/^import\s+(\w+)\s+from\s+"([^"]+)"/gm, `const $1 = require('$2')`)
+      .replace(/^def\s+(\w+)\s*\(([^)]*)\)\s*:/gm, 'async function $1($2) {')
+      .replace(/^\s*db\.query\s*\(/gm, '  await db.query(');
+
+    // Close function blocks (simple heuristic: empty line after body)
+    serverCode = serverCode.replace(/\n\n/g, '\n}\n\n');
+
+    const exports = functions.map(f => `  ${f.name}`).join(',\n');
+
+    return `
+/* Luxaura Vault — ${name} Server Module | NEVER sent to client */
+'use strict';
+${serverCode}
+
+module.exports = {
+${exports || '  // no exported functions'}
+};
+`.trim();
+  }
+
+  // ─── CSS ───────────────────────────────────────────────────────────────────
+
+  _compileCSS() {
+    if (!this.ast.style.length) return '';
+    const name = this.options.componentName;
+    const blocks = this.ast.style.map(rule => {
+      const selector = this._resolveSelector(rule.selector, name);
+      const decls = Object.entries(rule.props)
+        .map(([k, v]) => '  ' + resolveSmartProp(k, v))
+        .join('\n');
+      return `${selector} {\n${decls}\n}`;
+    });
+    return `/* Luxaura — ${name} Styles */\n` + blocks.join('\n\n');
+  }
+
+  _resolveSelector(sel, componentName) {
+    if (sel === 'self') return `.lux-component-${componentName.toLowerCase()}`;
+    if (sel.startsWith('.') || sel.startsWith('#') || sel.startsWith('*')) return sel;
+    // Component name → default class
+    return COMPONENT_DEFAULT_CLASSES[sel] ? `.${COMPONENT_DEFAULT_CLASSES[sel].replace('lux-', 'lux-')}` : sel;
+  }
+
+  // ─── HTML Shell ────────────────────────────────────────────────────────────
+
+  _compileHTMLShell() {
+    const name = this.options.componentName;
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${name}</title>
+  <link rel="stylesheet" href="/luxaura.min.css">
+  <link rel="stylesheet" href="/styles.css">
+</head>
+<body>
+  <div id="lux-root" data-component="${name}"></div>
+  <script src="/luxaura.min.js"></script>
+  <script src="/app.js"></script>
+  <script>
+    window.__Lux__.mount('${name}', '#lux-root');
+  </script>
+</body>
+</html>`;
+  }
+}
+
+module.exports = { LuxCompiler, resolveSmartProp, COMPONENT_TAGS };

package/src/index.js

@@ -0,0 +1,44 @@
+'use strict';
+
+/**
+ * Luxaura Framework — Public API
+ */
+
+const { LuxParser }   = require('./parser');
+const { LuxCompiler } = require('./compiler');
+const { VaultServer } = require('./vault/server');
+
+module.exports = {
+  LuxParser,
+  LuxCompiler,
+  VaultServer,
+
+  /**
+   * Parse a .lux source string and return an AST
+   * @param {string} source - .lux file contents
+   * @param {string} filename - optional filename for error messages
+   */
+  parse(source, filename = 'input.lux') {
+    return new LuxParser(source, filename).parse();
+  },
+
+  /**
+   * Compile an AST to client JS, server JS, and CSS
+   * @param {object} ast - AST from parse()
+   * @param {object} options - compilation options
+   */
+  compile(ast, options = {}) {
+    return new LuxCompiler(ast, options).compile();
+  },
+
+  /**
+   * Full pipeline: parse → compile
+   * @param {string} source - .lux source
+   * @param {string} filename
+   * @param {object} options
+   */
+  transform(source, filename = 'input.lux', options = {}) {
+    const ast = this.parse(source, filename);
+    return this.compile(ast, options);
+  },
+};