0x-lang 0.1.12 → 0.1.14

package/dist/ast.d.ts

@@ -79,6 +79,7 @@ export interface OnDestroy extends BaseNode {
 export interface WatchBlock extends BaseNode {
     type: 'WatchBlock';
     variable: string;
+    variables: string[];
     body: Statement[];
 }
 export interface CheckDecl extends BaseNode {
@@ -188,6 +189,12 @@ export interface JsBlock extends BaseNode {
     type: 'JsBlock';
     code: string;
 }
+export interface TopLevelVarDecl extends BaseNode {
+    type: 'TopLevelVarDecl';
+    keyword: 'const' | 'let';
+    name: string;
+    value: Expression;
+}
 export interface CommentNode extends BaseNode {
     type: 'Comment';
     text: string;
@@ -903,7 +910,7 @@ export interface RtlNode extends BaseNode {
     props: Record<string, Expression>;
 }
 export type UINode = LayoutNode | TextNode | ButtonNode | InputNode | ImageNode | LinkNode | ToggleNode | SelectNode | IfBlock | ForBlock | ShowBlock | HideBlock | ComponentCall | CommentNode | TableNode | ChartNode | StatNode | NavNode | UploadNode | ModalNode | ToastNode | CrudNode | ListNode | LayoutShellNode | SlideOverNode | DrawerNode | CommandNode | ConfirmNode | PayNode | CartNode | MediaNode | NotificationNode | SearchNode | FilterNode | SocialNode | ProfileNode | HeroNode | FeaturesNode | PricingNode | FaqNode | TestimonialNode | FooterNode | AdminNode | SeoNode | A11yNode | AnimateNode | GestureNode | AiNode | AutomationNode | DevNode | EmitNode | ResponsiveNode | BreadcrumbNode | StatsGridNode | DividerNode | ProgressNode | ErrorNode | LoadingNode | OfflineNode | RetryNode | LogNode;
-export type ASTNode = AppNode | PageNode | ComponentNode | StateDecl | DerivedDecl | PropDecl | TypeDecl | StoreDecl | ApiDecl | FnDecl | OnMount | OnDestroy | WatchBlock | CheckDecl | StyleDecl | JsImport | UseImport | JsBlock | ModelNode | DataDecl | FormDecl | AuthDecl | RealtimeDecl | RouteDecl | RoleDecl | AutomationNode | DevNode | DeployNode | EnvNode | DockerNode | CiNode | DomainNode | CdnNode | MonitorNode | BackupNode | EndpointNode | MiddlewareNode | QueueNode | CronNode | CacheNode | MigrateNode | SeedNode | WebhookNode | StorageNode | TestNode | E2eNode | MockNode | FixtureNode | I18nNode | LocaleNode | RtlNode | UINode;
+export type ASTNode = AppNode | PageNode | ComponentNode | StateDecl | DerivedDecl | PropDecl | TypeDecl | StoreDecl | ApiDecl | FnDecl | OnMount | OnDestroy | WatchBlock | CheckDecl | StyleDecl | JsImport | UseImport | JsBlock | TopLevelVarDecl | ModelNode | DataDecl | FormDecl | AuthDecl | RealtimeDecl | RouteDecl | RoleDecl | AutomationNode | DevNode | DeployNode | EnvNode | DockerNode | CiNode | DomainNode | CdnNode | MonitorNode | BackupNode | EndpointNode | MiddlewareNode | QueueNode | CronNode | CacheNode | MigrateNode | SeedNode | WebhookNode | StorageNode | TestNode | E2eNode | MockNode | FixtureNode | I18nNode | LocaleNode | RtlNode | UINode;
 export interface CodeGenerator {
     target: string;
     generate(ast: PageNode | ComponentNode | AppNode): GeneratedCode;
@@ -914,4 +921,5 @@ export interface GeneratedCode {
     imports: string[];
     lineCount: number;
     tokenCount: number;
+    sourceMap?: string;
 }

package/dist/compiler.d.ts

@@ -2,5 +2,7 @@ import type { GeneratedCode } from './ast.js';
 export interface CompileOptions {
     target: 'react' | 'vue' | 'svelte';
     validate?: boolean;
+    sourceMap?: boolean;
+    useClient?: boolean;
 }
 export declare function compile(source: string, options: CompileOptions): GeneratedCode;

package/dist/compiler.js

@@ -14,15 +14,33 @@ export function compile(source, options) {
             throw new Error(`Validation errors:\n${errMsg}`);
         }
     }
+    let result;
     switch (options.target) {
         case 'react':
-            return generateReact(ast);
+            result = generateReact(ast);
+            break;
         case 'vue':
-            return generateVue(ast);
+            result = generateVue(ast);
+            break;
         case 'svelte':
-            return generateSvelte(ast);
+            result = generateSvelte(ast);
+            break;
         default:
             throw new Error(`Unknown target: ${options.target}`);
     }
+    // Post-process: strip source map comments and V3 source map if disabled
+    if (options.sourceMap === false) {
+        result = { ...result, code: result.code.replace(/\{\/\* 0x:L\d+ \*\/\}/g, '').replace(/<!-- 0x:L\d+ -->/g, ''), sourceMap: undefined };
+    }
+    else if (result.sourceMap) {
+        // Append inline sourceMappingURL as base64 data URL
+        const b64 = Buffer.from(result.sourceMap).toString('base64');
+        result = { ...result, code: result.code + `\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,${b64}\n` };
+    }
+    // Post-process: strip 'use client' if explicitly disabled
+    if (options.useClient === false && options.target === 'react') {
+        result = { ...result, code: result.code.replace(/^'use client';\n\n/gm, '') };
+    }
+    return result;
 }
 //# sourceMappingURL=compiler.js.map

package/dist/compiler.js.map

@@ -1 +1 @@
-{"version":3,"file":"compiler.js","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA,uBAAuB;AAEvB,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAQ1C,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,OAAuB;IAC7D,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE1B,8BAA8B;IAC9B,IAAI,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7B,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClG,MAAM,IAAI,KAAK,CAAC,uBAAuB,MAAM,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAED,QAAQ,OAAO,CAAC,MAAM,EAAE,CAAC;QACvB,KAAK,OAAO;YACV,OAAO,aAAa,CAAC,GAAG,CAAC,CAAC;QAC5B,KAAK,KAAK;YACR,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC;QAC1B,KAAK,QAAQ;YACX,OAAO,cAAc,CAAC,GAAG,CAAC,CAAC;QAC7B;YACE,MAAM,IAAI,KAAK,CAAC,mBAAmB,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACzD,CAAC;AACH,CAAC"}
+{"version":3,"file":"compiler.js","sourceRoot":"","sources":["../src/compiler.ts"],"names":[],"mappings":"AAAA,uBAAuB;AAEvB,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAY1C,MAAM,UAAU,OAAO,CAAC,MAAc,EAAE,OAAuB;IAC7D,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAE1B,8BAA8B;IAC9B,IAAI,OAAO,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;QAC/B,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;QAC7B,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC7B,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,IAAI,SAAS,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClG,MAAM,IAAI,KAAK,CAAC,uBAAuB,MAAM,EAAE,CAAC,CAAC;QACnD,CAAC;IACH,CAAC;IAED,IAAI,MAAqB,CAAC;IAC1B,QAAQ,OAAO,CAAC,MAAM,EAAE,CAAC;QACvB,KAAK,OAAO;YACV,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;YAC5B,MAAM;QACR,KAAK,KAAK;YACR,MAAM,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;YAC1B,MAAM;QACR,KAAK,QAAQ;YACX,MAAM,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;YAC7B,MAAM;QACR;YACE,MAAM,IAAI,KAAK,CAAC,mBAAmB,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;IACzD,CAAC;IAED,wEAAwE;IACxE,IAAI,OAAO,CAAC,SAAS,KAAK,KAAK,EAAE,CAAC;QAChC,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,wBAAwB,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;IACzI,CAAC;SAAM,IAAI,MAAM,CAAC,SAAS,EAAE,CAAC;QAC5B,oDAAoD;QACpD,MAAM,GAAG,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;QAC7D,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,GAAG,qEAAqE,GAAG,IAAI,EAAE,CAAC;IAC3H,CAAC;IAED,0DAA0D;IAC1D,IAAI,OAAO,CAAC,SAAS,KAAK,KAAK,IAAI,OAAO,CAAC,MAAM,KAAK,OAAO,EAAE,CAAC;QAC9D,MAAM,GAAG,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,EAAE,EAAE,CAAC,EAAE,CAAC;IAChF,CAAC;IAED,OAAO,MAAM,CAAC;AAChB,CAAC"}

package/dist/generators/react.js

@@ -1,13 +1,16 @@
 // 0x → React Code Generator
 import { SIZE_MAP, unquote, capitalize, parseGradient, addPx } from './shared.js';
+import { SourceMapBuilder } from './source-map.js';
 function ctx() {
     return {
         imports: new Set(),
         states: new Map(),
         derivedNames: new Set(),
+        propNames: new Set(),
         styles: new Map(),
         indent: 1,
         readOnly: false,
+        smb: null,
     };
 }
 function ind(c) {
@@ -116,12 +119,25 @@ export function generateReact(ast) {
     }
     const code = parts.join('\n\n');
     const importLines = code.match(/^import .+$/gm) || [];
+    // Build V3 source map from 0x:L### comments in generated code
+    const sourceFile = ast.find(n => n.type === 'Page' || n.type === 'Component' || n.type === 'App');
+    const srcName = sourceFile?.name ? `${sourceFile.name}.0x` : 'source.0x';
+    const smb = new SourceMapBuilder(srcName, 'Component.jsx');
+    const lines = code.split('\n');
+    for (let i = 0; i < lines.length; i++) {
+        const match = lines[i].match(/\{\/\* 0x:L(\d+) \*\/\}/);
+        if (match) {
+            smb.addMapping(parseInt(match[1], 10), 0);
+        }
+        smb.advance(lines[i] + (i < lines.length - 1 ? '\n' : ''));
+    }
     return {
         code,
         filename: 'Component.jsx',
         imports: importLines,
-        lineCount: code.split('\n').length,
+        lineCount: lines.length,
         tokenCount: code.split(/\s+/).length,
+        sourceMap: smb.toJSON(),
     };
 }
 /** Generate framework-agnostic backend/infrastructure code for a non-UI node. Returns null if unrecognized. */
@@ -162,12 +178,14 @@ export function generateBackendCode(node) {
 }
 function generateTopLevel(node) {
     const c = ctx();
-    // First pass: collect states, derived, styles
+    // First pass: collect states, derived, props, styles
     for (const child of node.body) {
         if (child.type === 'StateDecl')
             c.states.set(child.name, child);
         if (child.type === 'DerivedDecl')
             c.derivedNames.add(child.name);
+        if (child.type === 'PropDecl')
+            c.propNames.add(child.name);
         if (child.type === 'StyleDecl')
             c.styles.set(child.name, child);
     }
@@ -259,6 +277,11 @@ function generateTopLevel(node) {
             case 'JsBlock':
                 hookLines.push(child.code);
                 break;
+            case 'TopLevelVarDecl': {
+                const tlv = child;
+                hookLines.push(`${tlv.keyword} ${tlv.name} = ${genExpr(tlv.value, c)};`);
+                break;
+            }
             case 'StyleDecl':
                 // Collected already, used by reference
                 break;
@@ -276,13 +299,17 @@ function generateTopLevel(node) {
     const propsArg = props.length > 0
         ? `{ ${props.map(p => p.defaultValue ? `${p.name} = ${genExpr(p.defaultValue, c)}` : p.name).join(', ')} }`
         : '';
-    // Build import line
-    const reactImports = ['React'];
+    // Build import line — only import hooks that are actually used
     const hookNames = Array.from(c.imports).sort();
-    if (hookNames.length > 0) {
-        reactImports.push(...hookNames);
-    }
-    const importLine = `import ${reactImports[0]}, { ${hookNames.join(', ')} } from 'react';`;
+    // Check if React.Fragment is used in JSX (for loops, show/hide with multiple children)
+    const needsReact = jsxParts.some(p => p.includes('React.Fragment'));
+    const importLine = needsReact && hookNames.length > 0
+        ? `import React, { ${hookNames.join(', ')} } from 'react';`
+        : needsReact
+            ? `import React from 'react';`
+            : hookNames.length > 0
+                ? `import { ${hookNames.join(', ')} } from 'react';`
+                : `import React from 'react';`;
     // Collect user imports (js import / import / use)
     const userImports = [];
     for (const child of node.body) {
@@ -303,9 +330,12 @@ function generateTopLevel(node) {
     // Build component
     const isComponent = node.type === 'Component';
     const exportKw = isComponent ? '' : 'export default ';
+    // Add "use client" for Next.js SSR when client-side hooks are used
+    const needsClient = c.imports.has('useState') || c.imports.has('useEffect') || c.imports.has('useRef') || c.imports.has('useCallback');
     const lines = [
+        ...(needsClient ? [`'use client';`, ''] : []),
         `// Generated by 0x`,
-        hookNames.length > 0 ? importLine : `import React from 'react';`,
+        importLine,
         ...userImports,
         '',
         `${exportKw}function ${node.name}(${propsArg}) {`,
@@ -337,8 +367,9 @@ function genDerived(node, c) {
     c.readOnly = true;
     const expr = genExpr(node.expression, c);
     c.readOnly = prevReadOnly;
-    const deps = extractDeps(node.expression, c);
-    return `const ${node.name} = useMemo(() => ${expr}, [${deps.join(', ')}]);`;
+    const { deps, warning } = extractDepsWithWarning(node.expression, c);
+    const warnComment = warning ? ` ${warning}` : '';
+    return `${warnComment ? warnComment + '\n  ' : ''}const ${node.name} = useMemo(() => ${expr}, [${deps.join(', ')}]);`;
 }
 function genCheck(node, c) {
     const cond = genExpr(node.condition, c);
@@ -389,13 +420,17 @@ function genOnDestroy(node, c) {
 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);
     if (hasAwait) {
-        return `useEffect(() => {\n    (async () => {\n      ${body}\n    })();\n  }, [${node.variable}]);`;
+        return `useEffect(() => {\n    (async () => {\n      ${body}\n    })();\n  }, [${vars}]);`;
     }
-    return `useEffect(() => {\n    ${body}\n  }, [${node.variable}]);`;
+    return `useEffect(() => {\n    ${body}\n  }, [${vars}]);`;
 }
 // ── UI Nodes ────────────────────────────────────────
+function srcComment(node) {
+    return node.loc?.line ? `{/* 0x:L${node.loc.line} */}` : '';
+}
 function genUINode(node, c) {
     switch (node.type) {
         case 'Layout': return genLayout(node, c);
@@ -566,7 +601,8 @@ function genLayout(node, c) {
     }
     const styleStr = genStyleObj(style, dynamicKeys);
     const children = node.children.map(ch => genUINode(ch, c)).join('\n');
-    return `<div style={${styleStr}}>\n${children}\n</div>`;
+    const sc = srcComment(node);
+    return `${sc}<div style={${styleStr}}>\n${children}\n</div>`;
 }
 function genText(node, c) {
     const style = {};
@@ -626,7 +662,8 @@ function genText(node, c) {
     // Badge prop: render a badge indicator next to content
     const badgeExpr = node.props['badge'];
     const tooltipExpr = node.props['tooltip'];
-    let result = `<span${styleStr}>${content}</span>`;
+    const sc = srcComment(node);
+    let result = `${sc}<span${styleStr}>${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>`;
@@ -654,7 +691,8 @@ function genButton(node, c) {
         }
     }
     const propsStr = styleProps.join(' ');
-    return `<button onClick={() => ${actionCode}}${propsStr ? ' ' + propsStr : ''}>${label}</button>`;
+    const sc = srcComment(node);
+    return `${sc}<button onClick={() => ${actionCode}}${propsStr ? ' ' + propsStr : ''}>${label}</button>`;
 }
 function genInput(node, c) {
     const setter = 'set' + capitalize(node.binding);
@@ -680,7 +718,8 @@ function genInput(node, c) {
             props.push(`onKeyPress={e => ${handler}(e.key)}`);
         }
     }
-    return `<input ${props.join(' ')} />`;
+    const sc = srcComment(node);
+    return `${sc}<input ${props.join(' ')} />`;
 }
 function genImage(node, c) {
     const src = genExpr(node.src, c);
@@ -2445,14 +2484,32 @@ function buildSpreadUpdate(prevVar, path, value) {
     const inner = buildSpreadUpdate(`${prevVar}.${head}`, rest, value);
     return `({...${prevVar}, ${head}: ${inner}})`;
 }
-function extractDeps(expr, c) {
+const KNOWN_GLOBALS = new Set([
+    'console', 'Math', 'JSON', 'parseInt', 'parseFloat', 'Number', 'String', 'Boolean',
+    'Array', 'Object', 'Date', 'RegExp', 'Error', 'Promise', 'Map', 'Set', 'Symbol',
+    'window', 'document', 'navigator', 'localStorage', 'sessionStorage', 'fetch',
+    'setTimeout', 'setInterval', 'clearTimeout', 'clearInterval', 'requestAnimationFrame',
+    'undefined', 'NaN', 'Infinity', 'globalThis', 'alert', 'confirm', 'prompt',
+    'encodeURIComponent', 'decodeURIComponent', 'encodeURI', 'decodeURI', 'btoa', 'atob',
+    'e', 'event', 'prev', 'item', 'index', 'key', 'value', 'i', 'j', 'k', 'v', 'x', 'el',
+]);
+function extractDepsWithWarning(expr, c) {
     const deps = new Set();
+    const unknowns = new Set();
     walkExpr(expr, e => {
-        if (e.kind === 'identifier' && (c.states.has(e.name) || c.derivedNames.has(e.name))) {
-            deps.add(e.name);
+        if (e.kind === 'identifier') {
+            if (c.states.has(e.name) || c.derivedNames.has(e.name) || c.propNames.has(e.name)) {
+                deps.add(e.name);
+            }
+            else if (!KNOWN_GLOBALS.has(e.name)) {
+                unknowns.add(e.name);
+            }
         }
     });
-    return Array.from(deps);
+    const warning = unknowns.size > 0
+        ? `/* 0x-warn: untracked deps: ${Array.from(unknowns).join(', ')} */`
+        : null;
+    return { deps: Array.from(deps), warning };
 }
 function walkExpr(expr, fn) {
     fn(expr);
@@ -2487,8 +2544,12 @@ function walkExpr(expr, fn) {
             expr.properties.forEach(p => walkExpr(p.value, fn));
             break;
         case 'arrow':
-            if (!Array.isArray(expr.body))
+            if (Array.isArray(expr.body)) {
+                walkStmts(expr.body, fn);
+            }
+            else {
                 walkExpr(expr.body, fn);
+            }
             break;
         case 'template':
             expr.parts.forEach(p => { if (typeof p !== 'string')
@@ -2503,6 +2564,37 @@ function walkExpr(expr, fn) {
             break;
     }
 }
+function walkStmts(stmts, fn) {
+    for (const stmt of stmts) {
+        switch (stmt.kind) {
+            case 'expr_stmt':
+                walkExpr(stmt.expression, fn);
+                break;
+            case 'return':
+                if (stmt.value)
+                    walkExpr(stmt.value, fn);
+                break;
+            case 'var_decl':
+                walkExpr(stmt.value, fn);
+                break;
+            case 'assignment_stmt':
+                walkExpr(stmt.target, fn);
+                walkExpr(stmt.value, fn);
+                break;
+            case 'if_stmt':
+                walkExpr(stmt.condition, fn);
+                walkStmts(stmt.body, fn);
+                stmt.elifs.forEach(ei => { walkExpr(ei.condition, fn); walkStmts(ei.body, fn); });
+                if (stmt.elseBody)
+                    walkStmts(stmt.elseBody, fn);
+                break;
+            case 'for_stmt':
+                walkExpr(stmt.iterable, fn);
+                walkStmts(stmt.body, fn);
+                break;
+        }
+    }
+}
 function genStyleObj(style, dynamicKeys) {
     if (Object.keys(style).length === 0)
         return '{}';