0x-lang 0.1.15 → 0.1.17

package/README.md

@@ -6,7 +6,7 @@
 
 <p align="center">
   <strong>Write 18 lines. Get 96 lines of production React.</strong><br/>
-  A programming language that compiles to React, Vue 3, and Svelte 5.
+  A full-stack language that compiles to React, Vue 3, Svelte 5, Express, React Native, and Terraform.
 </p>
 
 <p align="center">
@@ -24,7 +24,7 @@
 
 ## What is this?
 
-0x is a tiny language for building UI. You describe what you want, and the compiler outputs production-ready React, Vue, or Svelte.
+0x is a tiny language for building apps. You describe what you want, and the compiler outputs production-ready React, Vue, Svelte, Express backends, React Native mobile apps, or Terraform infrastructure.
 
 ```python
 page Counter:
@@ -39,9 +39,9 @@ page Counter:
     button "+1" style=primary -> increment()
 ```
 
-That's a complete component. Run `0x build counter.ai --target react` and you get a working React component with `useState`, event handlers, and full styling. Same source also compiles to Vue 3 and Svelte 5.
+That's a complete component. Run `0x build counter.ai --target react` and you get a working React component with `useState`, event handlers, and full styling. Same source also compiles to Vue 3, Svelte 5, and React Native.
 
-**Why?** Most frontend code is boilerplate — imports, hook calls, JSX wrappers, style objects, closing tags. 0x skips all of that. You write what matters, the compiler handles the rest.
+**Why?** Most code is boilerplate — imports, hook calls, JSX wrappers, style objects, closing tags, Express middleware, Terraform blocks. 0x skips all of that. You write what matters, the compiler handles the rest.
 
 ## The numbers
 
@@ -75,12 +75,21 @@ page Hello:
 Compile it:
 
 ```bash
-# Pick your framework
+# Frontend
 0x build hello.ai --target react
 0x build hello.ai --target vue
 0x build hello.ai --target svelte
 
-# Or all three at once
+# Mobile
+0x build app.ai --target react-native
+
+# Backend
+0x build server.ai --target backend
+
+# Infrastructure
+0x build infra.ai --target terraform
+
+# Or multiple at once
 0x build hello.ai --target react,vue,svelte
 ```
 
@@ -272,6 +281,72 @@ page Shop:
             button "Add to Cart" style=primary -> addToCart(product)
 ```
 
+### Backend API — Express server
+
+```python
+page API:
+  model User:
+    field name: str
+    field email: str
+    field role: str = "user"
+
+  auth:
+    secret: JWT_SECRET
+    endpoint: /auth
+
+  route GET /api/users:
+    users = await db.find("users")
+    respond 200 users
+
+  route POST /api/users:
+    user = await db.create("users", body)
+    respond 201 user
+
+  env:
+    DATABASE_URL: "postgres://localhost/mydb"
+    JWT_SECRET: secret
+```
+
+Compiles to a full Express.js server with JWT auth, CORS, error handling, and CRUD routes.
+
+### React Native Mobile App
+
+```python
+page MobileCounter:
+  state count: int = 0
+
+  fn increment():
+    count += 1
+
+  layout col gap=16 padding=24 center:
+    text "Counter" size=2xl bold
+    text "{count}" size=4xl color=cyan
+    button "+1" style=primary -> increment()
+```
+
+Same 0x syntax compiles to React Native with `View`, `Text`, `TouchableOpacity`, and `StyleSheet`.
+
+### Infrastructure — Terraform
+
+```python
+page Infra:
+  deploy myApp:
+    provider: aws
+    region: us-east-1
+    instance: t3.medium
+
+  storage assets:
+    provider: s3
+    bucket: my-app-assets
+    versioning: true
+
+  domain mysite:
+    provider: route53
+    name: "myapp.com"
+```
+
+Compiles to Terraform HCL with provider blocks, resource definitions, and variable declarations.
+
 More examples in [`examples/`](examples/).
 
 ---
@@ -430,14 +505,46 @@ page Hello:
     text "Hello, {name}!" size=2xl bold
 `;
 
+// Frontend targets
 const react  = compile(source, { target: 'react' });
 const vue    = compile(source, { target: 'vue' });
 const svelte = compile(source, { target: 'svelte' });
 
+// Mobile
+const rn = compile(source, { target: 'react-native' });
+
+// Backend & infrastructure
+const server = compile(backendSource, { target: 'backend' });
+const infra  = compile(infraSource, { target: 'terraform' });
+
+// Options
+const result = compile(source, {
+  target: 'react',
+  validate: true,       // Run validator (default: true)
+  sourceMap: true,      // Add source line comments (default: true)
+  useClient: true,      // Add 'use client' for Next.js (default: auto)
+  compact: true,        // AI-optimized compact output — strips comments
+});
+
 console.log(react.code);       // Full React component
 console.log(react.lineCount);  // Line count
 ```
 
+### AI Bridge
+
+```typescript
+import { getLanguageSpec, generatePrompt, compileFromDescription } from '0x-lang';
+
+// Get the full 0x language spec for an LLM
+const spec = getLanguageSpec();
+
+// Generate a structured prompt for AI code generation
+const prompt = generatePrompt("todo app with authentication", 'react');
+
+// Auto-generate a 0x skeleton from a natural language description
+const skeleton = compileFromDescription("dashboard with charts and API");
+```
+
 ### Pipeline access
 
 ```typescript
@@ -461,6 +568,10 @@ const output = generateReact(ast);   // React JSX string
 | `0x-lang/generators/react` | `generateReact()` |
 | `0x-lang/generators/vue` | `generateVue()` |
 | `0x-lang/generators/svelte` | `generateSvelte()` |
+| `0x-lang/generators/backend` | `generateBackend()` |
+| `0x-lang/generators/react-native` | `generateReactNative()` |
+| `0x-lang/generators/terraform` | `generateTerraform()` |
+| `0x-lang/generators/ai-bridge` | `getLanguageSpec()`, `generatePrompt()`, `compileFromDescription()` |
 
 ---
 
@@ -541,39 +652,30 @@ See [mcp-server/](mcp-server/) for full docs.
 
 ## For AI agent builders
 
-If you're building tools that generate UI code, 0x works well as an intermediate representation:
+If you're building tools that generate code, 0x works well as an intermediate representation:
 
 ```typescript
 import { compile } from '0x-lang/compiler';
+import { compileFromDescription, generatePrompt } from '0x-lang';
 
-// Your AI generates compact 0x
-const aiOutput = `
-page Dashboard:
-  state metrics: list[object] = []
-
-  on mount:
-    metrics = await api.getMetrics()
+// Auto-generate 0x skeleton from natural language
+const skeleton = compileFromDescription("e-commerce product page");
 
-  layout col gap=24 padding=32:
-    text "Dashboard" size=3xl bold
-    layout grid cols=3 gap=16:
-      for metric in metrics:
-        layout col padding=20 bg=white rounded=lg shadow:
-          text "{metric.label}" size=sm color=gray
-          text "{metric.value}" size=2xl bold
-`;
+// Or use the AI bridge to generate a prompt for your LLM
+const prompt = generatePrompt("todo app with auth", 'react');
 
-// Compile to whatever the user needs
-const react  = compile(aiOutput, { target: 'react' });
-const vue    = compile(aiOutput, { target: 'vue' });
-const svelte = compile(aiOutput, { target: 'svelte' });
+// Compile with compact mode for AI-optimized output
+const react  = compile(source, { target: 'react', compact: true });
+const server = compile(source, { target: 'backend', compact: true });
 ```
 
 Why this matters for AI:
 
 - **80% fewer output tokens** — less generation cost, lower latency
 - **One syntax, zero decisions** — no "which React pattern?" hallucinations
-- **Multi-framework** — one generation covers React, Vue, and Svelte users
+- **Full-stack** — frontend, backend, mobile, and infrastructure from one language
+- **Compact mode** — strips comments and whitespace for minimal token usage
+- **AI Bridge** — built-in spec, prompt generation, and skeleton creation
 - **Deterministic** — same input always produces the same output
 - **Validated** — the compiler catches errors before they reach the user
 
@@ -591,12 +693,16 @@ Parser ────── Recursive descent → typed AST
 Validator ─── Circular deps · unused state · type checks
     ↓
 Generator
-    ├── React ─── JSX + hooks + CSS-in-JS
-    ├── Vue ───── SFC + Composition API + scoped styles
-    └── Svelte ── Runes ($state, $derived) + styles
+    ├── React ────────── JSX + hooks + CSS-in-JS
+    ├── Vue ──────────── SFC + Composition API + scoped styles
+    ├── Svelte ──────── Runes ($state, $derived) + styles
+    ├── React Native ── View + StyleSheet + TouchableOpacity
+    ├── Backend ─────── Express + JWT + CRUD + middleware
+    ├── Terraform ───── HCL + providers + resources
+    └── AI Bridge ───── Spec + prompts + skeleton generation
 ```
 
-~9,800 lines of TypeScript. Zero runtime dependencies.
+~12,000 lines of TypeScript. Zero runtime dependencies (except gen-mapping for source maps).
 
 | Module | Lines | |
 |:---|---:|:---|
@@ -605,8 +711,12 @@ Generator
 | AST Types | 1,065 | TypeScript definitions |
 | Vue Generator | 822 | SFC with `<script setup>` and `ref()` |
 | Svelte Generator | 743 | Svelte 5 with `$state()` and `$derived()` |
+| React Native Generator | 690 | View + StyleSheet + native components |
+| Backend Generator | 412 | Express + JWT + CRUD + middleware |
+| Terraform Generator | 370 | HCL + multi-provider (AWS, Vercel, Fly.io) |
 | Validator | 355 | Static analysis + error reporting |
 | Tokenizer | 348 | Indentation-aware lexer |
+| AI Bridge | 291 | Spec + prompt generation + skeleton |
 | CLI | 223 | build · dev · bench · init |
 
 ## CLI
@@ -618,7 +728,7 @@ Generator
 0x init [project-name]
 
 Flags:
-  --target, -t    react, vue, svelte (comma-separated)
+  --target, -t    react, vue, svelte, react-native, backend, terraform (comma-separated)
   --output, -o    Output directory (default: ./dist/)
   --help, -h      Show help
 ```

package/dist/compiler.js

@@ -69,6 +69,8 @@ function compactify(result) {
     code = code.replace(/\/\*[\s\S]*?\*\//g, '');
     // Strip single-line comments (but not URLs or sourceMappingURL)
     code = code.replace(/^(\s*)\/\/(?!#).*$/gm, '');
+    // Strip hash comments (Terraform-style)
+    code = code.replace(/^#\s+Generated by 0x.*$/gm, '');
     // Strip "Generated by 0x" header comments
     code = code.replace(/^\/\/ Generated by 0x.*$/gm, '');
     // Collapse multiple empty lines to single empty line

package/dist/compiler.js.map

@@ -1 +1 @@
-{"version":3,"file":"compiler.js","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"compiler.js","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"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"}

package/dist/generators/react.js

@@ -1,5 +1,5 @@
 // 0x → React Code Generator
-import { SIZE_MAP, unquote, capitalize, parseGradient, addPx } from './shared.js';
+import { SIZE_MAP, unquote, capitalize, parseGradient, addPx, getPassthroughProps, KNOWN_LAYOUT_PROPS, KNOWN_TEXT_PROPS, KNOWN_BUTTON_PROPS, KNOWN_INPUT_PROPS, KNOWN_IMAGE_PROPS, KNOWN_LINK_PROPS, KNOWN_TOGGLE_PROPS, KNOWN_SELECT_PROPS } from './shared.js';
 import { SourceMapBuilder } from './source-map.js';
 export function ctx() {
     return {
@@ -369,7 +369,8 @@ function genDerived(node, c) {
     c.readOnly = prevReadOnly;
     const { deps, warning } = extractDepsWithWarning(node.expression, c);
     const warnComment = warning ? ` ${warning}` : '';
-    return `${warnComment ? warnComment + '\n  ' : ''}const ${node.name} = useMemo(() => ${expr}, [${deps.join(', ')}]);`;
+    const sc = node.loc?.line ? `// 0x:L${node.loc.line}\n  ` : '';
+    return `${sc}${warnComment ? warnComment + '\n  ' : ''}const ${node.name} = useMemo(() => ${expr}, [${deps.join(', ')}]);`;
 }
 function genCheck(node, c) {
     const cond = genExpr(node.condition, c);
@@ -400,32 +401,36 @@ function genFunction(node, c) {
     // requires
     const requireChecks = node.requires.map(r => `if (!(${genExpr(r, c)})) throw new Error('Precondition failed');`).join('\n    ');
     const allBody = [requireChecks, body].filter(Boolean).join('\n    ');
-    return `const ${node.name} = ${asyncKw}(${params}) => {\n    ${allBody}\n  };`;
+    const sc = node.loc?.line ? `// 0x:L${node.loc.line}\n  ` : '';
+    return `${sc}const ${node.name} = ${asyncKw}(${params}) => {\n    ${allBody}\n  };`;
 }
 // ── Lifecycle ───────────────────────────────────────
 function genOnMount(node, c) {
     c.imports.add('useEffect');
     const body = node.body.map(s => genStatement(s, c)).join('\n    ');
     const hasAwait = bodyContainsAwait(node.body);
+    const sc = node.loc?.line ? `// 0x:L${node.loc.line}\n  ` : '';
     if (hasAwait) {
-        return `useEffect(() => {\n    (async () => {\n      ${body}\n    })();\n  }, []);`;
+        return `${sc}useEffect(() => {\n    (async () => {\n      ${body}\n    })();\n  }, []);`;
     }
-    return `useEffect(() => {\n    ${body}\n  }, []);`;
+    return `${sc}useEffect(() => {\n    ${body}\n  }, []);`;
 }
 function genOnDestroy(node, c) {
     c.imports.add('useEffect');
     const body = node.body.map(s => genStatement(s, c)).join('\n    ');
-    return `useEffect(() => {\n    return () => {\n      ${body}\n    };\n  }, []);`;
+    const sc = node.loc?.line ? `// 0x:L${node.loc.line}\n  ` : '';
+    return `${sc}useEffect(() => {\n    return () => {\n      ${body}\n    };\n  }, []);`;
 }
 function genWatch(node, c) {
     c.imports.add('useEffect');
     const body = node.body.map(s => genStatement(s, c)).join('\n    ');
     const vars = (node.variables || [node.variable]).join(', ');
     const hasAwait = bodyContainsAwait(node.body);
+    const sc = node.loc?.line ? `// 0x:L${node.loc.line}\n  ` : '';
     if (hasAwait) {
-        return `useEffect(() => {\n    (async () => {\n      ${body}\n    })();\n  }, [${vars}]);`;
+        return `${sc}useEffect(() => {\n    (async () => {\n      ${body}\n    })();\n  }, [${vars}]);`;
     }
-    return `useEffect(() => {\n    ${body}\n  }, [${vars}]);`;
+    return `${sc}useEffect(() => {\n    ${body}\n  }, [${vars}]);`;
 }
 // ── UI Nodes ────────────────────────────────────────
 function srcComment(node) {
@@ -522,10 +527,14 @@ function genLayout(node, c) {
         style['flexDirection'] = node.direction === 'row' ? 'row' : 'column';
     }
     // Process layout props
+    let className = null;
     for (const [key, val] of Object.entries(node.props)) {
         const v = genExpr(val, c);
         const isDynamic = val.kind === 'braced' || val.kind === 'ternary' || val.kind === 'binary' || val.kind === 'member' || val.kind === 'call';
         switch (key) {
+            case 'class':
+                className = unquote(v);
+                break;
             case 'gap':
                 style['gap'] = addPx(v);
                 break;
@@ -600,17 +609,23 @@ function genLayout(node, c) {
         }
     }
     const styleStr = genStyleObj(style, dynamicKeys);
+    const classAttr = className ? ` className="${className}"` : '';
+    const extra = getPassthroughProps(node.props, KNOWN_LAYOUT_PROPS, e => genExpr(e, c), 'react');
     const children = node.children.map(ch => genUINode(ch, c)).join('\n');
     const sc = srcComment(node);
-    return `${sc}<div style={${styleStr}}>\n${children}\n</div>`;
+    return `${sc}<div${classAttr} style={${styleStr}}${extra}>\n${children}\n</div>`;
 }
 function genText(node, c) {
     const style = {};
     const dynamicKeys = new Set();
+    let className = null;
     for (const [key, val] of Object.entries(node.props)) {
         const v = genExpr(val, c);
         const isDynamic = val.kind === 'braced' || val.kind === 'ternary' || val.kind === 'binary' || val.kind === 'member' || val.kind === 'call';
         switch (key) {
+            case 'class':
+                className = unquote(v);
+                break;
             case 'size': {
                 const uv = unquote(v);
                 style['fontSize'] = SIZE_MAP[uv] || `${uv}px`;
@@ -658,12 +673,14 @@ function genText(node, c) {
         }
     }
     const content = genTextContent(node.content, c);
+    const classAttr = className ? ` className="${className}"` : '';
     const styleStr = Object.keys(style).length > 0 ? ` style={${genStyleObj(style, dynamicKeys)}}` : '';
+    const extra = getPassthroughProps(node.props, KNOWN_TEXT_PROPS, e => genExpr(e, c), 'react');
     // Badge prop: render a badge indicator next to content
     const badgeExpr = node.props['badge'];
     const tooltipExpr = node.props['tooltip'];
     const sc = srcComment(node);
-    let result = `${sc}<span${styleStr}>${content}</span>`;
+    let result = `${sc}<span${classAttr}${styleStr}${extra}>${content}</span>`;
     if (badgeExpr) {
         const badge = genExpr(badgeExpr, c);
         result = `<span style={{ position: 'relative', display: 'inline-flex', alignItems: 'center' }}>\n<span${styleStr}>${content}</span>\n<span style={{ marginLeft: '6px', padding: '2px 6px', fontSize: '12px', fontWeight: 'bold', borderRadius: '9999px', backgroundColor: '#ef4444', color: '#fff', minWidth: '20px', textAlign: 'center' }}>{${badge}}</span>\n</span>`;
@@ -678,24 +695,37 @@ function genButton(node, c) {
     const label = genTextContent(node.label, c);
     const actionCode = genActionExpr(node.action, c);
     const styleProps = [];
+    let className = null;
     for (const [key, val] of Object.entries(node.props)) {
         const v = genExpr(val, c);
         switch (key) {
-            case 'style':
-                styleProps.push(`className="${v}"`);
+            case 'class':
+                className = unquote(v);
                 break;
+            case 'style': {
+                const sv = unquote(v);
+                if (sv === 'primary')
+                    styleProps.push('style={{ backgroundColor: "#3b82f6", color: "white", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer" }}');
+                else if (sv === 'danger')
+                    styleProps.push('style={{ backgroundColor: "#ef4444", color: "white", border: "none", padding: "8px 16px", borderRadius: "6px", cursor: "pointer" }}');
+                break;
+            }
             case 'disabled':
                 styleProps.push(`disabled={${v}}`);
                 break;
             case 'size': /* handled in style */ break;
         }
     }
+    if (className)
+        styleProps.push(`className="${className}"`);
+    const extra = getPassthroughProps(node.props, KNOWN_BUTTON_PROPS, e => genExpr(e, c), 'react');
     const propsStr = styleProps.join(' ');
     const sc = srcComment(node);
-    return `${sc}<button onClick={() => ${actionCode}}${propsStr ? ' ' + propsStr : ''}>${label}</button>`;
+    return `${sc}<button onClick={() => ${actionCode}}${propsStr ? ' ' + propsStr : ''}${extra}>${label}</button>`;
 }
 function genInput(node, c) {
     const setter = 'set' + capitalize(node.binding);
+    let className = null;
     const props = [
         `value={${node.binding}}`,
         `onChange={e => ${setter}(e.target.value)}`,
@@ -703,6 +733,9 @@ function genInput(node, c) {
     for (const [key, val] of Object.entries(node.props)) {
         const v = genExpr(val, c);
         switch (key) {
+            case 'class':
+                className = unquote(v);
+                break;
             case 'placeholder':
                 props.push(`placeholder=${quoteJsx(v)}`);
                 break;
@@ -718,16 +751,23 @@ function genInput(node, c) {
             props.push(`onKeyPress={e => ${handler}(e.key)}`);
         }
     }
+    if (className)
+        props.push(`className="${className}"`);
+    const extra = getPassthroughProps(node.props, KNOWN_INPUT_PROPS, e => genExpr(e, c), 'react');
     const sc = srcComment(node);
-    return `${sc}<input ${props.join(' ')} />`;
+    return `${sc}<input ${props.join(' ')}${extra} />`;
 }
 function genImage(node, c) {
     const src = genExpr(node.src, c);
     const props = [`src={${src}}`];
     const style = {};
+    let className = null;
     for (const [key, val] of Object.entries(node.props)) {
         const v = genExpr(val, c);
         switch (key) {
+            case 'class':
+                className = unquote(v);
+                break;
             case 'width':
                 props.push(`width="${v}"`);
                 break;
@@ -751,16 +791,26 @@ function genImage(node, c) {
             }
         }
     }
+    if (className)
+        props.push(`className="${className}"`);
     if (Object.keys(style).length > 0) {
         const entries = Object.entries(style).map(([k, v]) => `${k}: ${v}`).join(', ');
         props.push(`style={{ ${entries} }}`);
     }
-    return `<img ${props.join(' ')} />`;
+    const extra = getPassthroughProps(node.props, KNOWN_IMAGE_PROPS, e => genExpr(e, c), 'react');
+    return `<img ${props.join(' ')}${extra} />`;
 }
 function genLink(node, c) {
     const label = genTextContent(node.label, c);
     const href = genExpr(node.href, c);
-    return `<a href={${href}}>${label}</a>`;
+    let className = null;
+    for (const [key, val] of Object.entries(node.props || {})) {
+        if (key === 'class')
+            className = unquote(genExpr(val, c));
+    }
+    const classAttr = className ? ` className="${className}"` : '';
+    const extra = getPassthroughProps(node.props || {}, KNOWN_LINK_PROPS, e => genExpr(e, c), 'react');
+    return `<a href={${href}}${classAttr}${extra}>${label}</a>`;
 }
 function genToggle(node, c) {
     const binding = node.binding;
@@ -773,12 +823,26 @@ function genToggle(node, c) {
     else {
         setter = `set${capitalize(parts[0])}(prev => ({...prev, ${parts.slice(1).join('.')}: !prev.${parts.slice(1).join('.')}}))`;
     }
-    return `<input type="checkbox" checked={${binding}} onChange={() => ${setter}} />`;
+    let className = null;
+    for (const [key, val] of Object.entries(node.props || {})) {
+        if (key === 'class')
+            className = unquote(genExpr(val, c));
+    }
+    const classAttr = className ? ` className="${className}"` : '';
+    const extra = getPassthroughProps(node.props || {}, KNOWN_TOGGLE_PROPS, e => genExpr(e, c), 'react');
+    return `<input type="checkbox" checked={${binding}} onChange={() => ${setter}}${classAttr}${extra} />`;
 }
 function genSelect(node, c) {
     const setter = 'set' + capitalize(node.binding);
     const options = genExpr(node.options, c);
-    return `<select value={${node.binding}} onChange={e => ${setter}(e.target.value)}>\n  {${options}.map(opt => <option key={opt} value={opt}>{opt}</option>)}\n</select>`;
+    let className = null;
+    for (const [key, val] of Object.entries(node.props || {})) {
+        if (key === 'class')
+            className = unquote(genExpr(val, c));
+    }
+    const classAttr = className ? ` className="${className}"` : '';
+    const extra = getPassthroughProps(node.props || {}, KNOWN_SELECT_PROPS, e => genExpr(e, c), 'react');
+    return `<select value={${node.binding}} onChange={e => ${setter}(e.target.value)}${classAttr}${extra}>\n  {${options}.map(opt => <option key={opt} value={opt}>{opt}</option>)}\n</select>`;
 }
 function genComponentCall(node, c) {
     const parts = [];