0x-lang 0.1.9 → 0.1.11

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

@@ -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}`),
@@ -431,6 +459,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} */}`;
     }
 }
@@ -498,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
@@ -584,7 +623,19 @@ function genText(node, c) {
     }
     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);
@@ -634,6 +685,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) {
@@ -646,8 +698,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) {
@@ -825,13 +893,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}))`;
                     }
                 }
@@ -854,6 +935,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