english-lang 0.1.0

package/dist/src/codegen/ReactNativeBackend.js

@@ -0,0 +1,657 @@
+"use strict";
+// ============================================================
+// ReactNativeBackend.ts — Emits React Native TypeScript from AST
+//
+// Generates clean, standard TypeScript that a senior developer
+// would write by hand.  Same .eng input → same output every time.
+// ============================================================
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactNativeBackend = void 0;
+// ─────────────────────────────────────────────────────────────
+class ReactNativeBackend {
+    constructor() {
+        this.out = [];
+        this.depth = 0;
+    }
+    // ── Public entry point ────────────────────────────────────
+    emit(program, sourceFile) {
+        this.out = [];
+        this.depth = 0;
+        for (const screen of program.screens) {
+            this.emitScreen(screen, sourceFile, program.types);
+            this.line('');
+        }
+        for (const comp of program.components) {
+            this.emitComponent(comp, sourceFile);
+            this.line('');
+        }
+        return this.out.join('\n');
+    }
+    // ── Type declarations (noun) ──────────────────────────────
+    emitTypeDecl(type) {
+        this.line(`export interface ${type.name} {`);
+        this.depth++;
+        for (const field of type.fields) {
+            const tsType = this.tsTypeFromAnnotation(field.type);
+            this.line(`${field.name}: ${tsType};`);
+        }
+        this.depth--;
+        this.line('}');
+        this.line('');
+    }
+    // ── Screen ────────────────────────────────────────────────
+    emitScreen(screen, sourceFile, types = []) {
+        const stateVarTypes = this.inferStateTypes(screen.state);
+        const buttonHandlers = this.buildButtonHandlerMap(screen.events);
+        const needsEffect = screen.events.some(e => e.trigger.kind === 'ScreenOpens' || e.trigger.kind === 'ScreenCloses');
+        const needsState = screen.state.length > 0;
+        // Header
+        this.line(`// Generated from ${sourceFile}`);
+        this.line(`// Do not edit — modify the .eng source instead.`);
+        this.line('');
+        // Imports
+        const hooks = [];
+        if (needsState)
+            hooks.push('useState');
+        if (needsEffect)
+            hooks.push('useEffect');
+        this.line(`import React${hooks.length ? `, { ${hooks.join(', ')} }` : ''} from 'react';`);
+        const rnImports = this.collectRNImports(screen.layout, screen.events);
+        if (rnImports.length) {
+            this.line(`import { ${rnImports.join(', ')} } from 'react-native';`);
+        }
+        this.line('');
+        // Type interfaces (noun declarations)
+        for (const type of types) {
+            this.emitTypeDecl(type);
+        }
+        // Component function
+        this.line(`export function ${screen.name}({ navigation }: any) {`);
+        this.depth++;
+        // useState hooks
+        for (const field of screen.state) {
+            const tsType = this.tsType(field, stateVarTypes);
+            const initVal = this.emitExpr(field.defaultValue);
+            const setter = setterName(field.name);
+            this.line(`const [${field.name}, ${setter}] = useState<${tsType}>(${initVal});`);
+        }
+        if (screen.state.length)
+            this.line('');
+        // useEffect for screen opens
+        const screenOpensHandler = screen.events.find(e => e.trigger.kind === 'ScreenOpens');
+        if (screenOpensHandler) {
+            this.line('useEffect(() => {');
+            this.depth++;
+            for (const stmt of screenOpensHandler.body) {
+                this.emitStatement(stmt, stateVarTypes);
+            }
+            this.depth--;
+            this.line('}, []);');
+            this.line('');
+        }
+        // Button handler functions
+        for (const event of screen.events) {
+            if (event.trigger.kind !== 'ButtonPressed')
+                continue;
+            const fnName = buttonHandlers.get(event.trigger.label);
+            this.line(`const ${fnName} = () => {`);
+            this.depth++;
+            for (const stmt of event.body) {
+                this.emitStatement(stmt, stateVarTypes);
+            }
+            this.depth--;
+            this.line('};');
+            this.line('');
+        }
+        // Action functions
+        for (const action of screen.actions) {
+            this.emitAction(action, stateVarTypes);
+        }
+        // JSX return
+        this.line('return (');
+        this.depth++;
+        this.line('<View style={styles.container}>');
+        this.depth++;
+        if (screen.layout.length === 0) {
+            this.line('{/* empty screen */}');
+        }
+        else if (screen.layout.length === 1) {
+            this.emitLayoutNode(screen.layout[0], buttonHandlers, stateVarTypes);
+        }
+        else {
+            this.line('<View>');
+            this.depth++;
+            for (const node of screen.layout) {
+                this.emitLayoutNode(node, buttonHandlers, stateVarTypes);
+            }
+            this.depth--;
+            this.line('</View>');
+        }
+        this.depth--;
+        this.line('</View>');
+        this.depth--;
+        this.line(');');
+        this.depth--;
+        this.line('}');
+        this.line('');
+        // StyleSheet
+        this.emitStyleSheet();
+    }
+    // ── Component ─────────────────────────────────────────────
+    emitComponent(comp, sourceFile) {
+        const paramList = comp.params.map(p => `${p.name}: ${this.tsTypeFromAnnotation(p.type)}`).join(', ');
+        const propsType = comp.params.length ? `{ ${paramList} }` : 'Record<string, never>';
+        const buttonHandlers = this.buildButtonHandlerMap(comp.events);
+        const stateVarTypes = new Map();
+        this.line(`export function ${comp.name}({ ${comp.params.map(p => p.name).join(', ')} }: ${propsType}) {`);
+        this.depth++;
+        this.line('return (');
+        this.depth++;
+        if (comp.layout.length === 1) {
+            this.emitLayoutNode(comp.layout[0], buttonHandlers, stateVarTypes);
+        }
+        else {
+            this.line('<View>');
+            this.depth++;
+            for (const node of comp.layout) {
+                this.emitLayoutNode(node, buttonHandlers, stateVarTypes);
+            }
+            this.depth--;
+            this.line('</View>');
+        }
+        this.depth--;
+        this.line(');');
+        this.depth--;
+        this.line('}');
+    }
+    // ── Action functions ──────────────────────────────────────
+    emitAction(action, stateVarTypes) {
+        const fnName = camelCase(action.verbPhrase);
+        const params = action.params.map(p => `${p.name}: ${this.tsTypeFromAnnotation(p.type)}`).join(', ');
+        const retType = action.returnType ? `: ${this.tsTypeFromAnnotation(action.returnType)}` : '';
+        this.line(`const ${fnName} = async (${params})${retType} => {`);
+        this.depth++;
+        for (const stmt of action.body) {
+            this.emitStatement(stmt, stateVarTypes);
+        }
+        this.depth--;
+        this.line('};');
+        this.line('');
+    }
+    // ── Statements ────────────────────────────────────────────
+    emitStatement(stmt, stateVars) {
+        switch (stmt.kind) {
+            case 'SetStatement': {
+                const setter = stateVars.has(stmt.name) ? `${setterName(stmt.name)}` : stmt.name;
+                const val = this.emitExpr(stmt.value);
+                if (stateVars.has(stmt.name)) {
+                    this.line(`${setter}(${val});`);
+                }
+                else {
+                    this.line(`${stmt.name} = ${val};`);
+                }
+                break;
+            }
+            case 'FetchStatement': {
+                this.line(`try {`);
+                this.depth++;
+                const url = this.emitExpr(stmt.url);
+                if (stmt.method === 'GET') {
+                    this.line(`const _res = await fetch(${url});`);
+                }
+                else {
+                    this.line(`const _res = await fetch(${url}, { method: '${stmt.method}' });`);
+                }
+                this.line(`const ${stmt.resultName} = await _res.json();`);
+                if (stmt.onSuccess) {
+                    this.line(`const ${stmt.onSuccess.param} = ${stmt.resultName};`);
+                    for (const s of stmt.onSuccess.body) {
+                        this.emitStatement(s, stateVars);
+                    }
+                }
+                this.depth--;
+                if (stmt.onFailure) {
+                    this.line(`} catch (${stmt.onFailure.param}) {`);
+                    this.depth++;
+                    for (const s of stmt.onFailure.body) {
+                        this.emitStatement(s, stateVars);
+                    }
+                    this.depth--;
+                }
+                this.line(`}`);
+                break;
+            }
+            case 'GoToStatement': {
+                const passing = stmt.passing ? `, { item: ${this.emitExpr(stmt.passing)} }` : '';
+                this.line(`navigation.navigate('${stmt.screen}'${passing});`);
+                break;
+            }
+            case 'PresentStatement':
+                this.line(`navigation.navigate('${stmt.screen}');`);
+                break;
+            case 'GoBackStatement':
+                this.line(`navigation.goBack();`);
+                break;
+            case 'DismissStatement':
+                this.line(`navigation.goBack();`);
+                break;
+            case 'ReturnStatement':
+                this.line(`return ${this.emitExpr(stmt.value)};`);
+                break;
+            case 'CallStatement': {
+                const fnName = camelCase(stmt.verbPhrase);
+                const args = stmt.args.map(a => this.emitExpr(a)).join(', ');
+                this.line(`${fnName}(${args});`);
+                break;
+            }
+            case 'IfStatement': {
+                const cond = this.emitConditionJS(stmt.condition);
+                this.line(`if (${cond}) {`);
+                this.depth++;
+                for (const s of stmt.thenBody)
+                    this.emitStatement(s, stateVars);
+                this.depth--;
+                for (const branch of stmt.otherwiseIfBranches) {
+                    this.line(`} else if (${this.emitConditionJS(branch.condition)}) {`);
+                    this.depth++;
+                    for (const s of branch.body)
+                        this.emitStatement(s, stateVars);
+                    this.depth--;
+                }
+                if (stmt.elseBody) {
+                    this.line(`} else {`);
+                    this.depth++;
+                    for (const s of stmt.elseBody)
+                        this.emitStatement(s, stateVars);
+                    this.depth--;
+                }
+                this.line(`}`);
+                break;
+            }
+        }
+    }
+    // ── Layout nodes → JSX ───────────────────────────────────
+    emitLayoutNode(node, handlers, stateVars) {
+        switch (node.kind) {
+            case 'VerticalStack': {
+                const styleAttr = this.stackStyleAttr('column', node.spacing, node.padding);
+                this.line(`<View${styleAttr}>`);
+                this.depth++;
+                for (const child of node.children)
+                    this.emitLayoutNode(child, handlers, stateVars);
+                this.depth--;
+                this.line(`</View>`);
+                break;
+            }
+            case 'HorizontalStack': {
+                const styleAttr = this.stackStyleAttr('row', node.spacing, null);
+                this.line(`<View${styleAttr}>`);
+                this.depth++;
+                for (const child of node.children)
+                    this.emitLayoutNode(child, handlers, stateVars);
+                this.depth--;
+                this.line(`</View>`);
+                break;
+            }
+            case 'ScrollView': {
+                const horizontal = node.direction === 'horizontal' ? ' horizontal' : '';
+                this.line(`<ScrollView${horizontal}>`);
+                this.depth++;
+                for (const child of node.children)
+                    this.emitLayoutNode(child, handlers, stateVars);
+                this.depth--;
+                this.line(`</ScrollView>`);
+                break;
+            }
+            case 'Grid': {
+                // Use FlatList with numColumns for grids
+                this.line(`{/* grid ${node.columns} columns */}`);
+                this.line(`<View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: ${node.spacing ?? 0} }}>`);
+                this.depth++;
+                for (const child of node.children)
+                    this.emitLayoutNode(child, handlers, stateVars);
+                this.depth--;
+                this.line(`</View>`);
+                break;
+            }
+            case 'Card': {
+                const radius = node.cornerRadius ?? 8;
+                this.line(`<View style={[styles.card, { borderRadius: ${radius} }]}>`);
+                this.depth++;
+                for (const child of node.children)
+                    this.emitLayoutNode(child, handlers, stateVars);
+                this.depth--;
+                this.line(`</View>`);
+                break;
+            }
+            case 'Text': {
+                const styleRef = this.textStyleRef(node.style, node.color);
+                const content = this.exprToJSX(node.expr, stateVars);
+                this.line(`<Text${styleRef}>${content}</Text>`);
+                break;
+            }
+            case 'Button': {
+                const handler = handlers.get(node.label);
+                const onPress = handler ? ` onPress={${handler}}` : ' onPress={() => {}}';
+                this.line(`<TouchableOpacity style={styles.button}${onPress}>`);
+                this.depth++;
+                this.line(`<Text style={styles.buttonText}>${node.label}</Text>`);
+                this.depth--;
+                this.line(`</TouchableOpacity>`);
+                break;
+            }
+            case 'TextField': {
+                const setter = setterName(node.boundTo);
+                const placeholder = node.placeholder ? ` placeholder="${node.placeholder}"` : '';
+                this.line(`<TextInput`);
+                this.depth++;
+                this.line(`style={styles.input}`);
+                this.line(`value={${node.boundTo}}`);
+                this.line(`onChangeText={${setter}}`);
+                if (node.placeholder)
+                    this.line(`placeholder="${node.placeholder}"`);
+                this.depth--;
+                this.line(`/>`);
+                break;
+            }
+            case 'Image': {
+                const src = this.emitExpr(node.source);
+                const w = node.width ? node.width : 'undefined';
+                const h = node.height ? node.height : 'undefined';
+                this.line(`<Image source={{ uri: ${src} }} style={{ width: ${w}, height: ${h} }} />`);
+                break;
+            }
+            case 'Icon':
+                this.line(`{/* Icon: ${node.name} */}`);
+                break;
+            case 'Spacer':
+                this.line(`<View style={{ flex: 1 }} />`);
+                break;
+            case 'Divider':
+                this.line(`<View style={styles.divider} />`);
+                break;
+            case 'LoadingSpinner': {
+                const centered = node.centered ? ` style={{ alignSelf: 'center' }}` : '';
+                this.line(`<ActivityIndicator${centered} />`);
+                break;
+            }
+            case 'ForEach': {
+                const col = this.emitExpr(node.collection);
+                this.line(`{${col}.map((${node.item}, _idx) => (`);
+                this.depth++;
+                this.line(`<React.Fragment key={_idx}>`);
+                this.depth++;
+                for (const child of node.children)
+                    this.emitLayoutNode(child, handlers, stateVars);
+                this.depth--;
+                this.line(`</React.Fragment>`);
+                this.depth--;
+                this.line(`))}`);
+                break;
+            }
+            case 'LayoutIf': {
+                const cond = this.emitConditionJSX(node.condition);
+                if (node.otherwiseIfBranches.length === 0 && !node.elseBranch) {
+                    // Simple && short-circuit
+                    this.line(`{${cond} && (`);
+                    this.depth++;
+                    if (node.thenBranch.length === 1) {
+                        this.emitLayoutNode(node.thenBranch[0], handlers, stateVars);
+                    }
+                    else {
+                        this.line(`<>`);
+                        this.depth++;
+                        for (const child of node.thenBranch)
+                            this.emitLayoutNode(child, handlers, stateVars);
+                        this.depth--;
+                        this.line(`</>`);
+                    }
+                    this.depth--;
+                    this.line(`)}`);
+                }
+                else {
+                    // Ternary / nested ternary
+                    this.line(`{${cond} ? (`);
+                    this.depth++;
+                    this.line(`<>`);
+                    this.depth++;
+                    for (const child of node.thenBranch)
+                        this.emitLayoutNode(child, handlers, stateVars);
+                    this.depth--;
+                    this.line(`</>`);
+                    this.depth--;
+                    this.line(`) : (`);
+                    this.depth++;
+                    if (node.elseBranch) {
+                        this.line(`<>`);
+                        this.depth++;
+                        for (const child of node.elseBranch)
+                            this.emitLayoutNode(child, handlers, stateVars);
+                        this.depth--;
+                        this.line(`</>`);
+                    }
+                    else {
+                        this.line(`null`);
+                    }
+                    this.depth--;
+                    this.line(`)}`);
+                }
+                break;
+            }
+            case 'ComponentCall': {
+                const props = node.args.map(a => `${a.name}={${this.emitExpr(a.value)}}`).join(' ');
+                this.line(`<${node.name}${props ? ' ' + props : ''} />`);
+                break;
+            }
+        }
+    }
+    // ── Expressions → JS strings ──────────────────────────────
+    emitExpr(expr) {
+        switch (expr.kind) {
+            case 'StringLiteral': {
+                // Convert {variable} and {object's property} to template literal interpolation
+                const hasInterp = /{[\w]/.test(expr.value);
+                if (hasInterp) {
+                    const interpolated = expr.value
+                        .replace(/{(\w+)'s\s+(\w+)}/g, '${$1.$2}') // {product's name} → ${product.name}
+                        .replace(/{([\w]+)}/g, '${$1}'); // {count} → ${count}
+                    return '`' + interpolated + '`';
+                }
+                return `"${expr.value}"`;
+            }
+            case 'NumberLiteral': return String(expr.value);
+            case 'BooleanLiteral': return String(expr.value);
+            case 'NullLiteral': return 'null';
+            case 'EmptyListLiteral': return '[]';
+            case 'VariableRef': return expr.name;
+            case 'PropertyAccess': return `${expr.object}.${expr.property}`;
+            case 'BinaryExpr': return `(${this.emitExpr(expr.left)} ${expr.op} ${this.emitExpr(expr.right)})`;
+            case 'UnaryExpr': return `${expr.op}(${this.emitExpr(expr.operand)})`;
+        }
+    }
+    // Expression inside JSX curly braces — may need String() for numbers
+    exprToJSX(expr, stateVars) {
+        if (expr.kind === 'StringLiteral') {
+            // Interpolated string: render as JSX expression with template literal
+            if (/{[\w]/.test(expr.value)) {
+                const interpolated = expr.value
+                    .replace(/{(\w+)'s\s+(\w+)}/g, '${$1.$2}')
+                    .replace(/{([\w]+)}/g, '${$1}');
+                return '{`' + interpolated + '`}';
+            }
+            return expr.value;
+        }
+        const js = this.emitExpr(expr);
+        if (expr.kind === 'VariableRef' && stateVars.get(expr.name) === 'number') {
+            return `{String(${js})}`;
+        }
+        return `{${js}}`;
+    }
+    // ── Conditions → JS boolean expressions ──────────────────
+    emitConditionJS(cond) {
+        switch (cond.kind) {
+            case 'Truthy': return this.emitExpr(cond.expr);
+            case 'Falsy': return `!${this.emitExpr(cond.expr)}`;
+            case 'Equals': return `${this.emitExpr(cond.left)} === ${this.emitExpr(cond.right)}`;
+            case 'NotEquals': return `${this.emitExpr(cond.left)} !== ${this.emitExpr(cond.right)}`;
+            case 'GreaterThan': return `${this.emitExpr(cond.left)} > ${this.emitExpr(cond.right)}`;
+            case 'LessThan': return `${this.emitExpr(cond.left)} < ${this.emitExpr(cond.right)}`;
+            case 'AtLeast': return `${this.emitExpr(cond.left)} >= ${this.emitExpr(cond.right)}`;
+            case 'AtMost': return `${this.emitExpr(cond.left)} <= ${this.emitExpr(cond.right)}`;
+            case 'HasItems': return `${this.emitExpr(cond.expr)}.length > 0`;
+            case 'IsEmpty': return `${this.emitExpr(cond.expr)}.length === 0`;
+            case 'Exists': return `${this.emitExpr(cond.expr)} != null`;
+            case 'Contains': return `${this.emitExpr(cond.haystack)}.includes(${this.emitExpr(cond.needle)})`;
+            case 'And': return `(${this.emitConditionJS(cond.left)}) && (${this.emitConditionJS(cond.right)})`;
+            case 'Or': return `(${this.emitConditionJS(cond.left)}) || (${this.emitConditionJS(cond.right)})`;
+            case 'Not': return `!(${this.emitConditionJS(cond.inner)})`;
+        }
+    }
+    // Condition suitable for JSX interpolation {cond && ... }
+    emitConditionJSX(cond) {
+        return this.emitConditionJS(cond);
+    }
+    // ── StyleSheet ────────────────────────────────────────────
+    emitStyleSheet() {
+        this.line(`const styles = StyleSheet.create({`);
+        this.depth++;
+        this.line(`container:   { flex: 1, backgroundColor: '#fff' },`);
+        this.line(`inner:       { flex: 1, padding: 16 },`);
+        this.line(`heading:     { fontSize: 24, fontWeight: 'bold', color: '#111' },`);
+        this.line(`subheading:  { fontSize: 18, fontWeight: '600', color: '#222' },`);
+        this.line(`body:        { fontSize: 16, color: '#333' },`);
+        this.line(`caption:     { fontSize: 12, color: '#888' },`);
+        this.line(`button:      { backgroundColor: '#007AFF', borderRadius: 8, padding: 14, alignItems: 'center' },`);
+        this.line(`buttonText:  { color: '#fff', fontSize: 16, fontWeight: '600' },`);
+        this.line(`input:       { borderWidth: 1, borderColor: '#ddd', borderRadius: 8, padding: 12, fontSize: 16 },`);
+        this.line(`card:        { backgroundColor: '#fff', borderRadius: 8, padding: 16, shadowColor: '#000', shadowOpacity: 0.1, shadowRadius: 4, elevation: 3 },`);
+        this.line(`divider:     { height: 1, backgroundColor: '#eee', marginVertical: 8 },`);
+        this.depth--;
+        this.line(`});`);
+    }
+    // ── Helpers ────────────────────────────────────────────────
+    inferStateTypes(fields) {
+        const map = new Map();
+        for (const f of fields) {
+            if (f.typeHint) {
+                map.set(f.name, this.tsTypeFromAnnotation(f.typeHint));
+            }
+            else {
+                switch (f.defaultValue.kind) {
+                    case 'StringLiteral':
+                        map.set(f.name, 'string');
+                        break;
+                    case 'NumberLiteral':
+                        map.set(f.name, 'number');
+                        break;
+                    case 'BooleanLiteral':
+                        map.set(f.name, 'boolean');
+                        break;
+                    default:
+                        map.set(f.name, 'any');
+                        break;
+                }
+            }
+        }
+        return map;
+    }
+    tsType(field, stateVarTypes) {
+        return stateVarTypes.get(field.name) ?? 'any';
+    }
+    tsTypeFromAnnotation(ann) {
+        switch (ann.kind) {
+            case 'SimpleType': return this.mapSimpleType(ann.name);
+            case 'ListType': return `${this.mapSimpleType(ann.itemType)}[]`;
+            case 'OptionalType': return `${this.tsTypeFromAnnotation(ann.inner)} | null`;
+        }
+    }
+    mapSimpleType(name) {
+        const map = {
+            text: 'string', number: 'number', numeric: 'number', decimal: 'number',
+            boolean: 'boolean', date: 'Date', any: 'any'
+        };
+        return map[name] ?? name;
+    }
+    buildButtonHandlerMap(events) {
+        const map = new Map();
+        for (const e of events) {
+            if (e.trigger.kind === 'ButtonPressed') {
+                map.set(e.trigger.label, buttonHandlerName(e.trigger.label));
+            }
+        }
+        return map;
+    }
+    collectRNImports(layout, events) {
+        const needed = new Set(['View', 'StyleSheet']);
+        const scan = (nodes) => {
+            for (const node of nodes) {
+                switch (node.kind) {
+                    case 'Text':
+                        needed.add('Text');
+                        break;
+                    case 'Button':
+                        needed.add('TouchableOpacity');
+                        needed.add('Text');
+                        break;
+                    case 'TextField':
+                        needed.add('TextInput');
+                        break;
+                    case 'Image':
+                        needed.add('Image');
+                        break;
+                    case 'LoadingSpinner':
+                        needed.add('ActivityIndicator');
+                        break;
+                    case 'ScrollView':
+                        needed.add('ScrollView');
+                        break;
+                }
+                if ('children' in node)
+                    scan(node.children);
+                if ('thenBranch' in node) {
+                    scan(node.thenBranch);
+                    if (node.elseBranch)
+                        scan(node.elseBranch);
+                }
+                if ('body' in node && Array.isArray(node.body))
+                    scan(node.body);
+            }
+        };
+        scan(layout);
+        return Array.from(needed).sort();
+    }
+    textStyleRef(style, color) {
+        const styleStr = `styles.${style}`;
+        if (!color)
+            return ` style={${styleStr}}`;
+        return ` style={[${styleStr}, { color: '${color}' }]}`;
+    }
+    stackStyleAttr(direction, spacing, padding) {
+        const parts = [`flexDirection: '${direction}'`];
+        if (spacing)
+            parts.push(`gap: ${spacing}`);
+        if (padding)
+            parts.push(`padding: ${padding}`);
+        return ` style={{ ${parts.join(', ')} }}`;
+    }
+    // ── Output helpers ────────────────────────────────────────
+    line(text) {
+        const pad = '  '.repeat(this.depth);
+        this.out.push(pad + text);
+    }
+}
+exports.ReactNativeBackend = ReactNativeBackend;
+// ─────────────────────────────────────────────────────────────
+// Utility functions
+// ─────────────────────────────────────────────────────────────
+function setterName(name) {
+    return 'set' + name[0].toUpperCase() + name.slice(1);
+}
+function camelCase(words) {
+    return words
+        .map((w, i) => i === 0 ? w : w[0].toUpperCase() + w.slice(1))
+        .join('');
+}
+function buttonHandlerName(label) {
+    return 'handle' + label.split(/\s+/).map(w => w[0].toUpperCase() + w.slice(1)).join('');
+}