0x-lang 0.1.10 → 0.1.12

package/dist/generators/react.js

@@ -249,6 +249,16 @@ function generateTopLevel(node) {
             case 'Rtl':
                 // Handled at top level
                 break;
+            case 'JsImport':
+                // Handled separately in import section
+                break;
+            case 'UseImport':
+                // use X from "source" → import + hook call
+                hookLines.push(`const ${child.name} = ${child.name}();`);
+                break;
+            case 'JsBlock':
+                hookLines.push(child.code);
+                break;
             case 'StyleDecl':
                 // Collected already, used by reference
                 break;
@@ -273,12 +283,30 @@ function generateTopLevel(node) {
         reactImports.push(...hookNames);
     }
     const importLine = `import ${reactImports[0]}, { ${hookNames.join(', ')} } from 'react';`;
+    // Collect user imports (js import / import / use)
+    const userImports = [];
+    for (const child of node.body) {
+        if (child.type === 'JsImport') {
+            const ji = child;
+            if (ji.isDefault) {
+                userImports.push(`import ${ji.specifiers[0]} from '${ji.source}';`);
+            }
+            else {
+                userImports.push(`import { ${ji.specifiers.join(', ')} } from '${ji.source}';`);
+            }
+        }
+        else if (child.type === 'UseImport') {
+            const ui = child;
+            userImports.push(`import ${ui.name} from '${ui.source}';`);
+        }
+    }
     // Build component
     const isComponent = node.type === 'Component';
     const exportKw = isComponent ? '' : 'export default ';
     const lines = [
         `// Generated by 0x`,
         hookNames.length > 0 ? importLine : `import React from 'react';`,
+        ...userImports,
         '',
         `${exportKw}function ${node.name}(${propsArg}) {`,
         ...hookLines.map(l => `  ${l}`),
@@ -505,20 +533,24 @@ function genLayout(node, c) {
             case 'grow':
                 style['flexGrow'] = v;
                 break;
-            case 'scroll':
-                style['overflow' + (v === 'y' ? 'Y' : 'X')] = 'auto';
+            case 'scroll': {
+                const sv = unquote(v);
+                style['overflow' + (sv === 'y' ? 'Y' : 'X')] = 'auto';
                 break;
+            }
             case 'radius':
                 style['borderRadius'] = addPx(v);
                 break;
-            case 'shadow':
-                if (v === 'sm')
+            case 'shadow': {
+                const sv = unquote(v);
+                if (sv === 'sm')
                     style['boxShadow'] = '0 1px 2px rgba(0,0,0,0.1)';
-                else if (v === 'md')
+                else if (sv === 'md')
                     style['boxShadow'] = '0 4px 6px rgba(0,0,0,0.1)';
-                else if (v === 'lg')
+                else if (sv === 'lg')
                     style['boxShadow'] = '0 10px 15px rgba(0,0,0,0.1)';
                 break;
+            }
         }
     }
     // Apply style class
@@ -761,12 +793,14 @@ function genFor(node, c) {
 function genShow(node, c) {
     const cond = genExpr(node.condition, c);
     const body = node.body.map(ch => genUINode(ch, c)).join('\n');
-    return `<div style={{ display: ${cond} ? 'block' : 'none' }}>\n${body}\n</div>`;
+    const wrapped = node.body.length === 1 ? body : `<>\n${body}\n</>`;
+    return `{${cond} && (\n${wrapped}\n)}`;
 }
 function genHide(node, c) {
     const cond = genExpr(node.condition, c);
     const body = node.body.map(ch => genUINode(ch, c)).join('\n');
-    return `<div style={{ display: ${cond} ? 'none' : 'block' }}>\n${body}\n</div>`;
+    const wrapped = node.body.length === 1 ? body : `<>\n${body}\n</>`;
+    return `{!${cond} && (\n${wrapped}\n)}`;
 }
 // ── Statements ──────────────────────────────────────
 function genStatement(stmt, c) {
@@ -903,6 +937,8 @@ function genExpr(expr, c) {
             return `[${els}]`;
         }
         case 'object_expr': {
+            if (expr.properties.length === 0)
+                return '{}';
             const props = expr.properties.map(p => {
                 if (p.key === p.value.kind && p.value.kind === 'identifier') {
                     return p.key; // shorthand
@@ -1231,18 +1267,19 @@ function genTableUI(node, c) {
     }
     lines.push(`<table style={{ width: '100%', borderCollapse: 'collapse' }}>`);
     // Header
+    const thStyle = `padding: '12px 8px', borderBottom: '2px solid #e2e8f0', textAlign: 'left', fontWeight: 600`;
     lines.push(`<thead>`);
     lines.push(`<tr>`);
     for (const col of node.columns) {
         if (col.kind === 'select') {
-            lines.push(`<th style={{ padding: '12px 8px', borderBottom: '2px solid #e2e8f0', textAlign: 'left' }}><input type="checkbox" /></th>`);
+            lines.push(`<th style={{ ${thStyle} }}><input type="checkbox" /></th>`);
         }
         else if (col.kind === 'field') {
-            const sortAttr = col.sortable ? ` style={{ cursor: 'pointer', padding: '12px 8px', borderBottom: '2px solid #e2e8f0', textAlign: 'left', fontWeight: 600 }}` : ` style={{ padding: '12px 8px', borderBottom: '2px solid #e2e8f0', textAlign: 'left', fontWeight: 600 }}`;
+            const sortAttr = col.sortable ? ` style={{ cursor: 'pointer', ${thStyle} }}` : ` style={{ ${thStyle} }}`;
             lines.push(`<th${sortAttr}>${col.label || col.field}</th>`);
         }
         else if (col.kind === 'actions') {
-            lines.push(`<th style={{ padding: '12px 8px', borderBottom: '2px solid #e2e8f0', textAlign: 'right', fontWeight: 600 }}>Actions</th>`);
+            lines.push(`<th style={{ ${thStyle}, textAlign: 'right' }}>Actions</th>`);
         }
     }
     lines.push(`</tr>`);
@@ -1406,16 +1443,22 @@ function genChartUI(node, c) {
     lines.push(`  {/* Chart: ${node.chartType} - ${node.name} */}`);
     lines.push(`  {/* Data: ${data}, X: ${x}, Y: ${y} */}`);
     if (node.chartType === 'bar') {
-        lines.push(`  <div style={{ display: 'flex', alignItems: 'flex-end', gap: '4px', height: '100%', padding: '20px 0' }}>`);
-        lines.push(`    <span style={{ fontSize: '14px', fontWeight: 'bold', position: 'absolute', top: 0 }}>{${title}}</span>`);
-        lines.push(`    {${data}.map((item, i) => (`);
-        lines.push(`      <div key={item?.id ?? i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'flex-end' }}>`);
-        lines.push(`        <span style={{ fontSize: '12px', marginBottom: '4px' }}>{item[${y}]}</span>`);
-        lines.push(`        <div style={{ width: '100%', backgroundColor: ${color ? `item[${color}] || '#3182ce'` : "'#3182ce'"}, height: \`\${(item[${y}] / Math.max(...${data}.map(d => d[${y}]))) * 100}%\`, borderRadius: '4px 4px 0 0', minHeight: '4px' }} />`);
-        lines.push(`        <span style={{ fontSize: '11px', marginTop: '4px', color: '#666' }}>{item[${x}]}</span>`);
+        c.imports.add('useMemo');
+        lines.push(`  {(() => {`);
+        lines.push(`    const maxVal = Math.max(...${data}.map(d => d[${y}]));`);
+        lines.push(`    return (`);
+        lines.push(`      <div style={{ display: 'flex', alignItems: 'flex-end', gap: '4px', height: '100%', padding: '20px 0' }}>`);
+        lines.push(`        <span style={{ fontSize: '14px', fontWeight: 'bold', position: 'absolute', top: 0 }}>{${title}}</span>`);
+        lines.push(`        {${data}.map((item, i) => (`);
+        lines.push(`          <div key={item?.id ?? i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'flex-end' }}>`);
+        lines.push(`            <span style={{ fontSize: '12px', marginBottom: '4px' }}>{item[${y}]}</span>`);
+        lines.push(`            <div style={{ width: '100%', backgroundColor: ${color ? `item[${color}] || '#3182ce'` : "'#3182ce'"}, height: \`\${(item[${y}] / maxVal) * 100}%\`, borderRadius: '4px 4px 0 0', minHeight: '4px' }} />`);
+        lines.push(`            <span style={{ fontSize: '11px', marginTop: '4px', color: '#666' }}>{item[${x}]}</span>`);
+        lines.push(`          </div>`);
+        lines.push(`        ))}`);
         lines.push(`      </div>`);
-        lines.push(`    ))}`);
-        lines.push(`  </div>`);
+        lines.push(`    );`);
+        lines.push(`  })()}`);
     }
     else if (node.chartType === 'pie') {
         lines.push(`  <div style={{ position: 'relative', width: '200px', height: '200px', margin: '0 auto' }}>`);
@@ -1423,7 +1466,7 @@ function genChartUI(node, c) {
         lines.push(`    {/* Pie chart - use recharts/chart.js for production */}`);
         lines.push(`    {${data}.map((item, i) => (`);
         lines.push(`      <div key={item?.id ?? i} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>`);
-        lines.push(`        <div style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: ['#3182ce','#38a169','#d69e2e','#e53e3e','#805ad5'][i % 5] }} />`);
+        lines.push(`        <div style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: ${color ? `item[${color}]` : `['#3182ce','#38a169','#d69e2e','#e53e3e','#805ad5'][i % 5]`} }} />`);
         lines.push(`        <span>{item[${x}]}: {item[${y}]}</span>`);
         lines.push(`      </div>`);
         lines.push(`    ))}`);
@@ -1732,7 +1775,7 @@ function genMediaUI(node, c) {
     const src = genExpr(node.src, c);
     if (node.mediaType === 'gallery') {
         const cols = node.props['cols'] ? genExpr(node.props['cols'], c) : '3';
-        return `<div style={{ display: 'grid', gridTemplateColumns: \`repeat(\${${cols}}, 1fr)\`, gap: '8px' }}>\n  {${src}.map((img, i) => <img key={i} src={img} style={{ width: '100%', borderRadius: '8px', objectFit: 'cover' }} />)}\n</div>`;
+        return `<div style={{ display: 'grid', gridTemplateColumns: \`repeat(\${${cols}}, 1fr)\`, gap: '8px' }}>\n  {${src}.map((img, i) => <img key={img ?? i} src={img} style={{ width: '100%', borderRadius: '8px', objectFit: 'cover' }} />)}\n</div>`;
     }
     if (node.mediaType === 'video') {
         return `<video src={${src}} controls style={{ width: '100%', borderRadius: '12px' }} />`;