0x-lang 0.1.19 → 0.1.21

package/README.md

@@ -435,6 +435,46 @@ layout col .card:                                 # Apply named style
 Sizes: `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`<br/>
 Button styles: `primary`, `secondary`, `danger`, `outline`, `ghost`
 
+### CSS Classes & Passthrough Props
+
+```python
+layout col class="container mx-auto p-4":
+  text "Title" class="text-xl font-bold text-blue-600"
+  button "Save" -> save() class="btn btn-primary"
+  input name class="form-input" aria-label="Name" data-testid="name-input"
+```
+
+- `class="..."` adds `className` (React) or `class` (Vue/Svelte) to any element
+- Works with Tailwind CSS, Bootstrap, or any CSS framework
+- Unknown props (`data-*`, `aria-*`, `role`, etc.) pass through as HTML attributes
+
+### Raw Block (Framework Escape Hatch)
+
+```python
+raw:
+  <CustomComponent onSpecialEvent={handler} />
+
+raw { <div dangerouslySetInnerHTML={{__html: content}} /> }
+```
+
+- `raw:` inserts code directly into JSX/template output (NOT the script section)
+- Different from `js:` which goes into the script/hook section
+- Use for third-party components or framework-specific code
+
+### Component Children
+
+```python
+component Dialog(title="Settings"):
+  layout col:
+    text "Content"
+    button "Close" -> close()
+
+component Card(item)    # Self-closing (no children)
+```
+
+- When a `component` call ends with `:`, indented children are wrapped inside the component
+- Without `:`, renders as a self-closing tag
+
 ### Control flow
 
 ```python
@@ -489,6 +529,13 @@ button "Reset" -> count = 0                       # Inline
 input query @keypress=onKeyPress                  # Keyboard
 ```
 
+### Performance Optimization (React)
+
+- `fn` declarations are auto-wrapped in `useCallback` with extracted deps
+- `derived` values use `useMemo` with extracted deps
+- Components with `prop` declarations are auto-wrapped in `React.memo`
+- No manual optimization needed — the compiler handles it automatically
+
 ---
 
 ## Programmatic API
@@ -739,7 +786,7 @@ Flags:
 git clone https://github.com/hankimis/0x-lang.git
 cd 0x-lang
 npm install
-npm test          # 2,600+ lines of tests
+npm test          # 1,767 tests across 9 test suites
 npm run build
 ```
 

package/dist/generators/react.js

@@ -1,5 +1,5 @@
 // 0x → React Code Generator
-import { SIZE_MAP, unquote, capitalize, parseGradient, addPx, getPassthroughProps, 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 { 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';
 export function ctx() {
     return {
@@ -1262,18 +1262,7 @@ function genModelCode(node) {
     lines.push(`}`);
     return lines.join('\n');
 }
-function typeExprToJs(t) {
-    switch (t.kind) {
-        case 'primitive': {
-            const map = { int: 'number', float: 'number', str: 'string', bool: 'boolean', datetime: 'Date', date: 'Date', time: 'string' };
-            return map[t.name] || t.name;
-        }
-        case 'list': return `${typeExprToJs(t.itemType)}[]`;
-        case 'named': return t.name;
-        case 'nullable': return `${typeExprToJs(t.inner)} | null`;
-        default: return 'any';
-    }
-}
+// typeExprToJs is now imported from shared.ts
 function genExprStandalone(expr) {
     const c = ctx();
     return genExpr(expr, c);
@@ -1377,17 +1366,7 @@ function genFormDecl(node, c) {
     }
     return lines.join('\n  ');
 }
-function getFieldDefault(t) {
-    if (t.kind === 'primitive') {
-        if (t.name === 'str')
-            return "''";
-        if (t.name === 'int' || t.name === 'float')
-            return '0';
-        if (t.name === 'bool')
-            return 'false';
-    }
-    return "''";
-}
+// getFieldDefault is now imported from shared.ts
 // ── Phase 1 Advanced: Table ─────────────────────────
 function genTableUI(node, c) {
     const data = node.dataSource;