0x-lang 0.1.8 → 0.1.10

package/dist/ast.d.ts

@@ -700,6 +700,15 @@ export interface BreadcrumbNode extends BaseNode {
     type: 'Breadcrumb';
     props: Record<string, Expression>;
 }
+export interface DividerNode extends BaseNode {
+    type: 'Divider';
+    props: Record<string, Expression>;
+}
+export interface ProgressNode extends BaseNode {
+    type: 'Progress';
+    value: Expression;
+    props: Record<string, Expression>;
+}
 export interface StatsGridNode extends BaseNode {
     type: 'StatsGrid';
     cols: number;
@@ -893,7 +902,7 @@ export interface RtlNode extends BaseNode {
     enabled: boolean;
     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 | ErrorNode | LoadingNode | OfflineNode | RetryNode | LogNode;
+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 interface CodeGenerator {
     target: string;

package/dist/generators/react.js

@@ -431,6 +431,13 @@ function genUINode(node, c) {
         case 'Offline': return genOfflineUI(node, c);
         case 'Retry': return `{/* retry: max=${genExpr(node.maxRetries, c)} */}`;
         case 'Log': return `{/* log: ${genExpr(node.message, c)} */}`;
+        case 'Divider': return `<hr style={{ border: 'none', borderTop: '1px solid #e2e8f0', margin: '16px 0' }} />`;
+        case 'Progress': {
+            const pn = node;
+            const val = genExpr(pn.value, c);
+            const max = pn.props['max'] ? genExpr(pn.props['max'], c) : '100';
+            return `<div style={{ width: '100%', backgroundColor: '#e2e8f0', borderRadius: '9999px', height: '8px', overflow: 'hidden' }}>\n<div style={{ width: \`\${(${val} / ${max}) * 100}%\`, backgroundColor: '#3b82f6', height: '100%', borderRadius: '9999px', transition: 'width 0.3s' }} />\n</div>`;
+        }
         default: return `{/* unsupported: ${node.type} */}`;
     }
 }
@@ -576,14 +583,27 @@ function genText(node, c) {
             case 'strike': {
                 // strike={condition} → conditional textDecoration
                 const cond = genExpr(val, c);
-                style['textDecoration'] = `\${${cond} ? 'line-through' : 'none'}`;
+                style['textDecoration'] = `${cond} ? 'line-through' : 'none'`;
+                dynamicKeys.add('textDecoration');
                 break;
             }
         }
     }
     const content = genTextContent(node.content, c);
     const styleStr = Object.keys(style).length > 0 ? ` style={${genStyleObj(style, dynamicKeys)}}` : '';
-    return `<span${styleStr}>${content}</span>`;
+    // 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>`;
+    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>`;
+    }
+    if (tooltipExpr) {
+        const tooltip = genExpr(tooltipExpr, c);
+        result = `<span title={${tooltip}}>${badgeExpr ? result.replace(/^<span/, '<span') : `<span${styleStr}>${content}</span>`}</span>`;
+    }
+    return result;
 }
 function genButton(node, c) {
     const label = genTextContent(node.label, c);
@@ -633,6 +653,7 @@ function genInput(node, c) {
 function genImage(node, c) {
     const src = genExpr(node.src, c);
     const props = [`src={${src}}`];
+    const style = {};
     for (const [key, val] of Object.entries(node.props)) {
         const v = genExpr(val, c);
         switch (key) {
@@ -645,8 +666,24 @@ function genImage(node, c) {
             case 'alt':
                 props.push(`alt=${quoteJsx(v)}`);
                 break;
+            case 'round':
+                style['borderRadius'] = "'50%'";
+                break;
+            case 'radius':
+                style['borderRadius'] = `'${addPx(v)}'`;
+                break;
+            case 'size': {
+                const px = `'${addPx(v)}'`;
+                style['width'] = px;
+                style['height'] = px;
+                break;
+            }
         }
     }
+    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(' ')} />`;
 }
 function genLink(node, c) {
@@ -824,13 +861,26 @@ function genExpr(expr, c) {
                 const method = expr.callee.property;
                 if (objName && c.states.has(objName)) {
                     const setter = 'set' + capitalize(objName);
+                    const memberPath = extractMemberPath(expr.callee.object);
                     if (method === 'push') {
+                        if (memberPath.length > 0) {
+                            const arrayPath = 'prev.' + memberPath.join('.');
+                            return `${setter}(prev => ${buildSpreadUpdate('prev', memberPath, `[...${arrayPath}, ${args}]`)})`;
+                        }
                         return `${setter}(prev => [...prev, ${args}])`;
                     }
                     if (method === 'filter') {
+                        if (memberPath.length > 0) {
+                            const arrayPath = 'prev.' + memberPath.join('.');
+                            return `${setter}(prev => ${buildSpreadUpdate('prev', memberPath, `${arrayPath}.filter(${args})`)})`;
+                        }
                         return `${setter}(prev => prev.filter(${args}))`;
                     }
                     if (method === 'remove') {
+                        if (memberPath.length > 0) {
+                            const arrayPath = 'prev.' + memberPath.join('.');
+                            return `${setter}(prev => ${buildSpreadUpdate('prev', memberPath, `${arrayPath}.filter(item => item.id !== ${args})`)})`;
+                        }
                         return `${setter}(prev => prev.filter(item => item.id !== ${args}))`;
                     }
                 }
@@ -927,7 +977,19 @@ function genActionExpr(expr, c) {
         const stateName = extractStateName(expr.target);
         if (stateName && c.states.has(stateName)) {
             const setter = 'set' + capitalize(stateName);
+            // Evaluate value in readOnly mode to prevent double setState wrapping
+            const prevReadOnly = c.readOnly;
+            c.readOnly = true;
             const value = genExpr(expr.value, c);
+            c.readOnly = prevReadOnly;
+            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}(prev => prev + ${value})`;
             if (expr.op === '-=')