0x-lang 0.1.25 → 0.1.27

package/dist/ast.d.ts

@@ -200,6 +200,10 @@ export interface TopLevelVarDecl extends BaseNode {
     name: string;
     value: Expression;
 }
+export interface ThemeDecl extends BaseNode {
+    type: 'ThemeDecl';
+    theme: string;
+}
 export interface CommentNode extends BaseNode {
     type: 'Comment';
     text: string;
@@ -915,7 +919,7 @@ export interface RtlNode extends BaseNode {
     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 | DividerNode | ProgressNode | ErrorNode | LoadingNode | OfflineNode | RetryNode | LogNode | RawBlock;
-export type ASTNode = AppNode | PageNode | ComponentNode | StateDecl | DerivedDecl | PropDecl | TypeDecl | StoreDecl | ApiDecl | FnDecl | OnMount | OnDestroy | WatchBlock | CheckDecl | StyleDecl | JsImport | UseImport | JsBlock | RawBlock | TopLevelVarDecl | 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 type ASTNode = AppNode | PageNode | ComponentNode | StateDecl | DerivedDecl | PropDecl | TypeDecl | StoreDecl | ApiDecl | FnDecl | OnMount | OnDestroy | WatchBlock | CheckDecl | StyleDecl | JsImport | UseImport | JsBlock | RawBlock | TopLevelVarDecl | 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 | ThemeDecl | UINode;
 export interface CodeGenerator {
     target: string;
     generate(ast: PageNode | ComponentNode | AppNode): GeneratedCode;

package/dist/generators/react.d.ts

@@ -1,5 +1,6 @@
 import type { ASTNode, StateDecl, StyleDecl, Expression, Statement, GeneratedCode } from '../ast.js';
 import { SourceMapBuilder } from './source-map.js';
+import { type ThemeName } from './themes.js';
 export interface GenContext {
     imports: Set<string>;
     states: Map<string, StateDecl>;
@@ -9,6 +10,8 @@ export interface GenContext {
     indent: number;
     readOnly: boolean;
     smb: SourceMapBuilder | null;
+    theme: ThemeName | null;
+    themeImports: Set<string>;
 }
 export declare function ctx(): GenContext;
 export declare function generateReact(ast: ASTNode[]): GeneratedCode;

package/dist/generators/react.js

@@ -1,6 +1,7 @@
 // 0x → React Code Generator
 import { SIZE_MAP, unquote, capitalize, parseGradient, addPx, getPassthroughProps, typeExprToJs, getFieldDefault, 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';
+import { getReactThemeRenderer } from './themes.js';
 export function ctx() {
     return {
         imports: new Set(),
@@ -11,6 +12,8 @@ export function ctx() {
         indent: 1,
         readOnly: false,
         smb: null,
+        theme: null,
+        themeImports: new Set(),
     };
 }
 function ind(c) {
@@ -18,8 +21,14 @@ function ind(c) {
 }
 export function generateReact(ast) {
     const parts = [];
+    // Detect theme declaration
+    const themeNode = ast.find(n => n.type === 'ThemeDecl');
+    const theme = themeNode ? themeNode.theme : null;
     for (const node of ast) {
-        if (node.type === 'Model') {
+        if (node.type === 'ThemeDecl') {
+            // Handled above
+        }
+        else if (node.type === 'Model') {
             parts.push(genModelCode(node));
         }
         else if (node.type === 'AuthDecl') {
@@ -114,7 +123,7 @@ export function generateReact(ast) {
             parts.push(genRtlCode(node));
         }
         else if (node.type === 'Page' || node.type === 'Component' || node.type === 'App') {
-            parts.push(generateTopLevel(node));
+            parts.push(generateTopLevel(node, theme));
         }
     }
     const code = parts.join('\n\n');
@@ -176,8 +185,9 @@ export function generateBackendCode(node) {
         default: return null;
     }
 }
-function generateTopLevel(node) {
+function generateTopLevel(node, theme = null) {
     const c = ctx();
+    c.theme = theme;
     // First pass: collect states, derived, props, styles
     for (const child of node.body) {
         if (child.type === 'StateDecl')
@@ -265,6 +275,7 @@ function generateTopLevel(node) {
             case 'I18n':
             case 'Locale':
             case 'Rtl':
+            case 'ThemeDecl':
                 // Handled at top level
                 break;
             case 'JsImport':
@@ -333,14 +344,17 @@ function generateTopLevel(node) {
             userImports.push(`import ${ui.name} from '${ui.source}';`);
         }
     }
+    // Collect theme imports (deduplicated)
+    const themeImportLines = Array.from(c.themeImports).sort();
     const exportKw = isComponent ? '' : 'export default ';
     // Add "use client" for Next.js SSR when client-side hooks are used
     const needsClient = c.imports.has('useState') || c.imports.has('useEffect') || c.imports.has('useRef') || c.imports.has('useCallback');
     const lines = [
         ...(needsClient ? [`'use client';`, ''] : []),
-        `// Generated by 0x`,
+        `// Generated by 0x${c.theme ? ` (theme: ${c.theme})` : ''}`,
         importLine,
         ...userImports,
+        ...themeImportLines,
         '',
         `${exportKw}function ${node.name}(${propsArg}) {`,
         ...hookLines.map(l => `  ${l}`),
@@ -451,6 +465,17 @@ function srcComment(node) {
     return node.loc?.line ? `{/* 0x:L${node.loc.line} */}` : '';
 }
 function genUINode(node, c) {
+    // Check for themed renderer
+    if (c.theme) {
+        const renderer = getReactThemeRenderer(c.theme, node.type);
+        if (renderer) {
+            const helpers = { genExpr: (e, ctx) => genExpr(e, ctx || c), genTextContent: (e, ctx) => genTextContent(e, ctx || c), genActionExpr: (a, ctx) => genActionExpr(a, ctx || c), genUINode: (n, ctx) => genUINode(n, ctx || c), srcComment: (n) => srcComment(n) };
+            const result = renderer(node, c, helpers);
+            for (const imp of result.imports)
+                c.themeImports.add(imp);
+            return result.jsx;
+        }
+    }
     switch (node.type) {
         case 'Layout': return genLayout(node, c);
         case 'Text': return genText(node, c);