0x-lang 0.1.16 → 0.1.17

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 = [];