0x-lang 0.1.6 → 0.1.7

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="website/assets/logo.svg" alt="0x Logo" width="100" height="100" />
+  <img src="website/assets/0xlogo.svg" alt="0x Logo" width="100" height="100" />
 </p>
 
 <h1 align="center">0x</h1>

package/dist/generators/react.js

@@ -1,5 +1,5 @@
 // 0x → React Code Generator
-import { SIZE_MAP, unquote, capitalize, parseGradient } from './shared.js';
+import { SIZE_MAP, unquote, capitalize, parseGradient, addPx } from './shared.js';
 function ctx() {
     return {
         imports: new Set(),
@@ -457,16 +457,16 @@ function genLayout(node, c) {
         const isDynamic = val.kind === 'braced' || val.kind === 'ternary' || val.kind === 'binary' || val.kind === 'member' || val.kind === 'call';
         switch (key) {
             case 'gap':
-                style['gap'] = `${v}px`;
+                style['gap'] = addPx(v);
                 break;
             case 'padding':
-                style['padding'] = `${v}px`;
+                style['padding'] = addPx(v);
                 break;
             case 'margin':
                 style['margin'] = v;
                 break;
             case 'maxWidth':
-                style['maxWidth'] = `${v}px`;
+                style['maxWidth'] = addPx(v);
                 break;
             case 'height':
                 style['height'] = v;
@@ -502,7 +502,7 @@ function genLayout(node, c) {
                 style['overflow' + (v === 'y' ? 'Y' : 'X')] = 'auto';
                 break;
             case 'radius':
-                style['borderRadius'] = `${v}px`;
+                style['borderRadius'] = addPx(v);
                 break;
             case 'shadow':
                 if (v === 'sm')
@@ -740,6 +740,18 @@ function genStatement(stmt, c) {
                 const value = genExpr(stmt.value, c);
                 c.readOnly = prevReadOnly;
                 const setter = 'set' + capitalize(stateName);
+                const memberPath = extractMemberPath(stmt.target);
+                if (memberPath.length > 0) {
+                    // Nested state assignment: user.name = "Bob" → setUser(prev => ({...prev, name: 'Bob'}))
+                    if (stmt.op === '=') {
+                        return `${setter}(prev => ${buildSpreadUpdate('prev', memberPath, value)});`;
+                    }
+                    else {
+                        const opChar = stmt.op.charAt(0);
+                        const prevAccess = 'prev.' + memberPath.join('.');
+                        return `${setter}(prev => ${buildSpreadUpdate('prev', memberPath, `${prevAccess} ${opChar} ${value}`)});`;
+                    }
+                }
                 if (stmt.op === '=') {
                     return `${setter}(${value});`;
                 }
@@ -787,7 +799,7 @@ function genStatement(stmt, c) {
 function genExpr(expr, c) {
     switch (expr.kind) {
         case 'number': return String(expr.value);
-        case 'string': return `'${expr.value}'`;
+        case 'string': return `'${expr.value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")}'`;
         case 'boolean': return String(expr.value);
         case 'null': return 'null';
         case 'identifier': return expr.name;
@@ -825,7 +837,7 @@ function genExpr(expr, c) {
                 const body = expr.body.map(s => genStatement(s, c)).join('\n');
                 return `(${params}) => { ${body} }`;
             }
-            return `${params} => ${genExpr(expr.body, c)}`;
+            return `(${params}) => ${genExpr(expr.body, c)}`;
         }
         case 'array': {
             const els = expr.elements.map(e => genExpr(e, c)).join(', ');
@@ -858,6 +870,14 @@ function genExpr(expr, c) {
                 const value = genExpr(expr.value, c);
                 c.readOnly = prevReadOnly;
                 const setter = 'set' + capitalize(stateName);
+                const memberPath = extractMemberPath(expr.target);
+                if (memberPath.length > 0) {
+                    if (expr.op === '=')
+                        return `${setter}(prev => ${buildSpreadUpdate('prev', memberPath, value)})`;
+                    const opChar = expr.op.charAt(0);
+                    const prevAccess = 'prev.' + memberPath.join('.');
+                    return `${setter}(prev => ${buildSpreadUpdate('prev', memberPath, `${prevAccess} ${opChar} ${value}`)})`;
+                }
                 if (expr.op === '=')
                     return `${setter}(${value})`;
                 if (expr.op === '+=')
@@ -1159,7 +1179,7 @@ function genTableUI(node, c) {
     // Body
     lines.push(`<tbody>`);
     lines.push(`{${data}.map((row, idx) => (`);
-    lines.push(`<tr key={idx} style={{ borderBottom: '1px solid #e2e8f0' }}>`);
+    lines.push(`<tr key={row.id ?? idx} style={{ borderBottom: '1px solid #e2e8f0' }}>`);
     for (const col of node.columns) {
         if (col.kind === 'select') {
             lines.push(`<td style={{ padding: '12px 8px' }}><input type="checkbox" /></td>`);
@@ -1318,7 +1338,7 @@ function genChartUI(node, c) {
         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={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', height: '100%', justifyContent: 'flex-end' }}>`);
+        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>`);
@@ -1331,7 +1351,7 @@ function genChartUI(node, c) {
         lines.push(`    <span style={{ fontSize: '14px', fontWeight: 'bold' }}>{${title}}</span>`);
         lines.push(`    {/* Pie chart - use recharts/chart.js for production */}`);
         lines.push(`    {${data}.map((item, i) => (`);
-        lines.push(`      <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '8px' }}>`);
+        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(`        <span>{item[${x}]}: {item[${y}]}</span>`);
         lines.push(`      </div>`);
@@ -1344,7 +1364,7 @@ function genChartUI(node, c) {
         lines.push(`    <span style={{ fontSize: '14px', fontWeight: 'bold' }}>{${title}}</span>`);
         lines.push(`    <div style={{ marginTop: '12px', color: '#666' }}>`);
         lines.push(`      {${data}.map((item, i) => (`);
-        lines.push(`        <div key={i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px solid #eee' }}>`);
+        lines.push(`        <div key={item?.id ?? i} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', borderBottom: '1px solid #eee' }}>`);
         lines.push(`          <span>{item[${x}]}</span>`);
         lines.push(`          <span style={{ fontWeight: 600 }}>{item[${y}]}</span>`);
         lines.push(`        </div>`);
@@ -1521,7 +1541,7 @@ function genModalUI(node, c) {
     lines.push(`          <div style={{ backgroundColor: '#fff', borderRadius: '12px', padding: '24px', minWidth: '400px', maxWidth: '90vw', boxShadow: '0 20px 60px rgba(0,0,0,0.15)' }}`);
     lines.push(`            onClick={e => e.stopPropagation()}>`);
     lines.push(`            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>`);
-    lines.push(`              <h2 style={{ margin: 0, fontSize: '20px' }}>${node.title}</h2>`);
+    lines.push(`              <h2 style={{ margin: 0, fontSize: '20px' }}>${capitalize(node.title)}</h2>`);
     lines.push(`              <button onClick={() => set${capitalize(showVar)}(false)} style={{ border: 'none', background: 'none', fontSize: '20px', cursor: 'pointer', padding: '4px' }}>&times;</button>`);
     lines.push(`            </div>`);
     // Modal body
@@ -1615,9 +1635,9 @@ function genListUI(node, c) {
     const data = genExpr(node.dataSource, c);
     const body = node.body.map(ch => genUINode(ch, c)).join('\n');
     if (node.listType === 'grid') {
-        return `<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '16px' }}>\n  {${data}.map((item, i) => (\n    <div key={i}>\n      ${body}\n    </div>\n  ))}\n</div>`;
+        return `<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '16px' }}>\n  {${data}.map((item, i) => (\n    <div key={item?.id ?? i}>\n      ${body}\n    </div>\n  ))}\n</div>`;
     }
-    return `<div className="list-${node.listType}">\n  {${data}.map((item, i) => (\n    <div key={i}>${body}</div>\n  ))}\n</div>`;
+    return `<div className="list-${node.listType}">\n  {${data}.map((item, i) => (\n    <div key={item?.id ?? i}>${body}</div>\n  ))}\n</div>`;
 }
 function genDrawerUI(node, c) {
     c.imports.add('useState');
@@ -2290,6 +2310,27 @@ function extractStateName(expr) {
         return extractStateName(expr.object);
     return null;
 }
+/** Extract property path from a member expression, excluding the root state name.
+ *  e.g., user.name → ['name'], user.profile.name → ['profile', 'name'] */
+function extractMemberPath(expr) {
+    const path = [];
+    let current = expr;
+    while (current.kind === 'member') {
+        path.unshift(current.property);
+        current = current.object;
+    }
+    return path;
+}
+/** Build nested spread update: buildSpreadUpdate('prev', ['profile', 'name'], '"Bob"')
+ *  → ({...prev, profile: {...prev.profile, name: "Bob"}}) */
+function buildSpreadUpdate(prevVar, path, value) {
+    if (path.length === 1) {
+        return `({...${prevVar}, ${path[0]}: ${value}})`;
+    }
+    const [head, ...rest] = path;
+    const inner = buildSpreadUpdate(`${prevVar}.${head}`, rest, value);
+    return `({...${prevVar}, ${head}: ${inner}})`;
+}
 function extractDeps(expr, c) {
     const deps = new Set();
     walkExpr(expr, e => {