0x-lang 0.1.16 → 0.1.18

package/dist/compiler.js

@@ -42,7 +42,7 @@ export function compile(source, options) {
     }
     // 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 };
+        result = { ...result, code: result.code.replace(/\{\/\* 0x:L\d+ \*\/\}/g, '').replace(/<!-- 0x:L\d+ -->/g, '').replace(/\/\/ 0x:L\d+\n\s*/g, ''), sourceMap: undefined };
     }
     else if (result.sourceMap) {
         // Append inline sourceMappingURL as base64 data URL

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;
@@ -570,9 +579,17 @@ function genLayout(node, c) {
                 break;
             case 'scroll': {
                 const sv = unquote(v);
-                style['overflow' + (sv === 'y' ? 'Y' : 'X')] = 'auto';
+                if (sv === 'y')
+                    style['overflowY'] = 'auto';
+                else if (sv === 'x')
+                    style['overflowX'] = 'auto';
+                else
+                    style['overflow'] = 'auto';
                 break;
             }
+            case 'wrap':
+                style['flexWrap'] = 'wrap';
+                break;
             case 'radius':
                 style['borderRadius'] = addPx(v);
                 break;
@@ -600,17 +617,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,19 +681,21 @@ 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>`;
+        result = `<span${classAttr} 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>`;
     }
     if (tooltipExpr) {
         const tooltip = genExpr(tooltipExpr, c);
-        result = `<span title={${tooltip}}>${badgeExpr ? result.replace(/^<span/, '<span') : `<span${styleStr}>${content}</span>`}</span>`;
+        result = `<span${classAttr} title={${tooltip}}>${badgeExpr ? result.replace(/^<span[^>]*>/, '<span>') : `<span${styleStr}>${content}</span>`}</span>`;
     }
     return result;
 }
@@ -678,24 +703,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 +741,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 +759,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 +799,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 +831,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 = [];