view-contracts 0.5.1 → 0.5.3

package/docs/cli-reference.md

@@ -2,7 +2,7 @@
 
 Contract-first UI design toolchain. Compiles restricted view-contract TSX to language-neutral View IR and renders platform targets (React, SwiftUI, Compose).
 
-**Version:** 0.5.0
+**Version:** 0.5.3
 
 ## Table of Contents
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "view-contracts",
-  "version": "0.5.1",
+  "version": "0.5.3",
   "description": "Contract-first UI design toolchain — restricted TSX to View IR to platform renderers",
   "type": "module",
   "bin": {

package/renderers/compose/lowering/lowerToCompose.ts

@@ -343,6 +343,18 @@ function bindingExpr(binding: IrBinding, ctx: ComposeRenderContext, itemScope?:
   return binding.path ? `${root}.${binding.path}` : root;
 }
 
+function resolveComposeValue(props: Record<string, IrValue>, itemScope?: string): string {
+  const valueRaw = props.value;
+  if (!valueRaw) return '""';
+  if (typeof valueRaw === 'string') return JSON.stringify(valueRaw);
+  if (typeof valueRaw === 'object' && valueRaw !== null && 'kind' in valueRaw && valueRaw.kind === 'binding') {
+    const binding = valueRaw as { kind: 'binding'; path: string; scope?: string };
+    const root = binding.scope ?? (itemScope ?? 'vm');
+    return binding.path ? `${root}.${binding.path}` : root;
+  }
+  return '""';
+}
+
 function wrapWithInheritedStyles(childBlock: string, modifiers: string[], level: number): string {
   const contentColor = extractContentColor(modifiers);
   const inheritParts = extractInheritedTextStyleParts(modifiers);
@@ -674,15 +686,16 @@ function renderLeaf(
     const textStyleLine = textStyleParts.length > 0
       ? `${pad}  textStyle = TextStyle(${textStyleParts.join(', ')}),`
       : `${pad}  textStyle = TextStyle(color = ${textColor}, fontSize = 14.sp),`;
+    const composeVal = resolveComposeValue(node.props, itemScope);
     return [
       `${pad}BasicTextField(`,
-      `${pad}  value = "",`,
+      `${pad}  value = ${composeVal},`,
       `${pad}  onValueChange = {},`,
       `${pad}  modifier = ${modifierExpr},`,
       textStyleLine,
       `${pad}  decorationBox = { innerTextField ->`,
       `${pad}    Box(modifier = Modifier.fillMaxWidth(), contentAlignment = Alignment.CenterStart) {`,
-      `${pad}      if ("".isEmpty()) {`,
+      `${pad}      if (${composeVal}.isEmpty()) {`,
       `${pad}        Text(text = ${ph}, style = TextStyle(color = ${mutedColor}, fontSize = 14.sp))`,
       `${pad}      }`,
       `${pad}      innerTextField()`,
@@ -704,15 +717,16 @@ function renderLeaf(
     const containerExpr = applyModifiers('Modifier', dedupeModifiers(containerMods));
     const textStyleParts = extractTextStyleModifiers(textMods);
     const textStyleSuffix = textStyleParts.length > 0 ? `, textStyle = TextStyle(${textStyleParts.join(', ')})` : '';
+    const composeVal = resolveComposeValue(node.props, itemScope);
     return [
       `${pad}Box(modifier = ${containerExpr}.heightIn(min = ${minHeight}.dp)) {`,
       `${pad}  BasicTextField(`,
-      `${pad}    value = "",`,
+      `${pad}    value = ${composeVal},`,
       `${pad}    onValueChange = {},`,
       `${pad}    modifier = Modifier.fillMaxWidth()${textStyleSuffix},`,
       `${pad}    decorationBox = { innerTextField ->`,
       `${pad}      Box(modifier = Modifier.fillMaxWidth()) {`,
-      `${pad}        if ("".isEmpty()) {`,
+      `${pad}        if (${composeVal}.isEmpty()) {`,
       `${pad}          Text(text = ${ph}, modifier = Modifier.align(Alignment.TopStart).padding(top = 8.dp, start = 4.dp), style = TextStyle(color = ${mutedColor}, fontSize = 14.sp))`,
       `${pad}        }`,
       `${pad}        innerTextField()`,

package/renderers/react/lowering/lowerToJsx.ts

@@ -109,6 +109,21 @@ function actionHandler(props: Record<string, IrValue>, event: 'onClick' | 'onSub
   return `onClick={() => { void dispatchAction(${expr}); }}`;
 }
 
+function onChangeHandler(props: Record<string, IrValue>, targetProp = 'e.target.value'): string | undefined {
+  const onChange = props.onChange;
+  if (!onChange || typeof onChange !== 'object' || !('kind' in onChange) || onChange.kind !== 'action') {
+    return undefined;
+  }
+  const action = onChange as IrAction;
+  if (!action.params || Object.keys(action.params).length === 0) {
+    return `onChange={(e) => { void dispatchAction({ name: ${JSON.stringify(action.name)}, params: { value: ${targetProp} } } as ActionDescriptor); }}`;
+  }
+  const existingParams = Object.entries(action.params)
+    .map(([key, val]) => `${key}: ${renderValue(val, 0)}`)
+    .join(', ');
+  return `onChange={(e) => { void dispatchAction({ name: ${JSON.stringify(action.name)}, params: { ${existingParams}, value: ${targetProp} } } as ActionDescriptor); }}`;
+}
+
 function componentToKebab(name: string): string {
   return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 }
@@ -182,10 +197,13 @@ function emitFieldWrap(inner: string, props: Record<string, IrValue>, level: num
 function emitCheckbox(props: Record<string, IrValue>, level: number): string {
   const name = propExpr(props, 'name') ?? '""';
   const label = propExpr(props, 'label') ?? '""';
-  const checked = props.checked ? `defaultChecked={${propExpr(props, 'checked')}}` : '';
   const disabled = props.enabled ? `disabled={${propExpr(props, 'enabled')} === false}` : '';
+  const changeAttr = onChangeHandler(props, 'e.target.checked') ?? '';
+  const checkedAttr = props.checked
+    ? (changeAttr ? `checked={${propExpr(props, 'checked')}}` : `defaultChecked={${propExpr(props, 'checked')}}`)
+    : '';
   return `${indent(level)}<label className="vc-checkbox">
-${indent(level + 1)}<input type="checkbox" name={${name}} ${checked} ${disabled} />
+${indent(level + 1)}<input type="checkbox" name={${name}} ${checkedAttr} ${disabled} ${changeAttr} />
 ${indent(level + 1)}<span>{${label}}</span>
 ${indent(level)}</label>`;
 }
@@ -194,10 +212,13 @@ function emitRadio(props: Record<string, IrValue>, level: number): string {
   const name = propExpr(props, 'binding') ?? propExpr(props, 'name') ?? '""';
   const value = propExpr(props, 'value') ?? '""';
   const label = propExpr(props, 'label') ?? '""';
-  const checked = props.checked ? `defaultChecked={${propExpr(props, 'checked')}}` : '';
   const disabled = props.enabled ? `disabled={${propExpr(props, 'enabled')} === false}` : '';
+  const changeAttr = onChangeHandler(props, 'e.target.value') ?? '';
+  const checkedAttr = props.checked
+    ? (changeAttr ? `checked={${propExpr(props, 'checked')}}` : `defaultChecked={${propExpr(props, 'checked')}}`)
+    : '';
   return `${indent(level)}<label className="vc-radio">
-${indent(level + 1)}<input type="radio" name={${name}} value={${value}} ${checked} ${disabled} />
+${indent(level + 1)}<input type="radio" name={${name}} value={${value}} ${checkedAttr} ${disabled} ${changeAttr} />
 ${indent(level + 1)}<span>{${label}}</span>
 ${indent(level)}</label>`;
 }
@@ -205,10 +226,13 @@ ${indent(level)}</label>`;
 function emitSwitch(props: Record<string, IrValue>, level: number): string {
   const name = propExpr(props, 'binding') ?? propExpr(props, 'name') ?? '""';
   const label = propExpr(props, 'label') ?? '""';
-  const checked = props.checked ? `defaultChecked={${propExpr(props, 'checked')}}` : '';
   const disabled = props.enabled ? `disabled={${propExpr(props, 'enabled')} === false}` : '';
+  const changeAttr = onChangeHandler(props, 'e.target.checked') ?? '';
+  const checkedAttr = props.checked
+    ? (changeAttr ? `checked={${propExpr(props, 'checked')}}` : `defaultChecked={${propExpr(props, 'checked')}}`)
+    : '';
   return `${indent(level)}<label className="vc-switch">
-${indent(level + 1)}<input type="checkbox" role="switch" name={${name}} ${checked} ${disabled} />
+${indent(level + 1)}<input type="checkbox" role="switch" name={${name}} ${checkedAttr} ${disabled} ${changeAttr} />
 ${indent(level + 1)}<span>{${label}}</span>
 ${indent(level)}</label>`;
 }
@@ -267,7 +291,7 @@ function emitVoidInput(
   }
   if (props.name) attrs.push(`name={${propExpr(props, 'name')}}`);
   if (props.placeholder) attrs.push(`placeholder={${propExpr(props, 'placeholder')}}`);
-  if (entry.inputType) attrs.push(`type={${propExpr(props, 'type') ?? JSON.stringify(entry.inputType)}}`);
+  if (entry.inputType) attrs.push(`type={${propExpr(props, 'inputType') ?? JSON.stringify(entry.inputType)}}`);
   if (props.required) attrs.push(`required={${propExpr(props, 'required')}}`);
   if (props.readonly) attrs.push(`readOnly={${propExpr(props, 'readonly')}}`);
   if (props.enabled) attrs.push(`disabled={${propExpr(props, 'enabled')} === false}`);
@@ -275,6 +299,13 @@ function emitVoidInput(
   if (entry.tag === 'img' && props.alt) attrs.push(`alt={${propExpr(props, 'alt')}}`);
   if (entry.tag === 'progress' && props.value) attrs.push(`value={${propExpr(props, 'value')}}`);
   if (props.rows) attrs.push(`rows={${propExpr(props, 'rows') ?? '4'}}`);
+  const changeHandler = onChangeHandler(props);
+  if (changeHandler) {
+    if (props.value && entry.tag !== 'progress') attrs.push(`value={${propExpr(props, 'value')}}`);
+    attrs.push(changeHandler);
+  } else if (props.value && entry.tag !== 'progress') {
+    attrs.push(`defaultValue={${propExpr(props, 'value')}}`);
+  }
   return `${indent(level)}<${entry.tag} ${attrs.join(' ')} />`;
 }
 
@@ -298,6 +329,18 @@ function emitOpenTag(
     const handler = actionHandler(props, entry.actionEvent);
     if (handler) attrs.push(handler);
   }
+  if (props.name) attrs.push(`name={${propExpr(props, 'name')}}`);
+  if (entry.tag === 'select' || entry.tag === 'textarea' || entry.tag === 'input') {
+    if (props.required) attrs.push(`required={${propExpr(props, 'required')}}`);
+    if (props.enabled) attrs.push(`disabled={${propExpr(props, 'enabled')} === false}`);
+    const changeHandler = onChangeHandler(props);
+    if (changeHandler) {
+      if (props.value) attrs.push(`value={${propExpr(props, 'value')}}`);
+      attrs.push(changeHandler);
+    } else if (props.value) {
+      attrs.push(`defaultValue={${propExpr(props, 'value')}}`);
+    }
+  }
   if (entry.tag === 'button' && props.enabled) attrs.push(`disabled={${propExpr(props, 'enabled')} === false}`);
   if (entry.tag === 'a' && props.href) attrs.push(`href={${propExpr(props, 'href')}}`);
   if (entry.tag === 'button') attrs.push(`type={${propExpr(props, 'type') ?? '"button"'}}`);

package/renderers/swiftui/lowering/lowerToSwiftUI.ts

@@ -245,6 +245,25 @@ function bindingExpr(binding: IrBinding, ctx: SwiftUIRenderContext, itemScope?:
   return binding.path ? `${root}.${binding.path}` : root;
 }
 
+function resolveValueBinding(props: Record<string, IrValue>, ctx: SwiftUIRenderContext, itemScope?: string): { valueExpr: string; hasOnChange: boolean } {
+  const vmRef = itemScope ?? ctx.propsRoot ?? 'vm';
+  const valueRaw = props.value;
+  const onChange = props.onChange;
+
+  const hasOnChange = onChange !== undefined && typeof onChange === 'object' && onChange !== null && 'kind' in onChange && onChange.kind === 'action';
+
+  let valueExpr: string;
+  if (valueRaw && typeof valueRaw === 'object' && 'kind' in valueRaw && valueRaw.kind === 'binding') {
+    valueExpr = bindingExpr(valueRaw as IrBinding, ctx, itemScope);
+  } else if (typeof valueRaw === 'string') {
+    valueExpr = JSON.stringify(valueRaw);
+  } else {
+    valueExpr = '""';
+  }
+
+  return { valueExpr, hasOnChange };
+}
+
 function renderTextContent(children: IrNode[], ctx: SwiftUIRenderContext, itemScope?: string): string | null {
   for (const child of children) {
     if (child.kind === 'text') return JSON.stringify((child as IrTextNode).value);
@@ -309,7 +328,11 @@ function renderLeaf(
     const placeholder = propLiteral(node.props, 'placeholder');
     const ph = typeof placeholder === 'string' ? JSON.stringify(placeholder) : '""';
     const mutedColor = tokenHexColorExpr(ctx.tokens, 'ui.text-muted', '#6b7280');
-    const line = `${pad}TextField("", text: .constant(""), prompt: Text(${ph}).foregroundStyle(${mutedColor}))`;
+    const { valueExpr, hasOnChange } = resolveValueBinding(node.props, ctx, itemScope);
+    const textBinding = hasOnChange
+      ? `.init(get: { ${valueExpr} }, set: { _ in })`
+      : `.constant(${valueExpr})`;
+    const line = `${pad}TextField("", text: ${textBinding}, prompt: Text(${ph}).foregroundStyle(${mutedColor}))`;
     const allMods = [...modifiers, ...leafExtraModifiers(node.name)];
     const modLines = allMods.map((mod) => `${pad}${mod}`);
     return [line, ...modLines].join('\n');
@@ -322,6 +345,11 @@ function renderLeaf(
     const minHeightMod = modifiers.find((mod) => mod.startsWith('.frame(minHeight:'));
     const minHeight = minHeightMod?.match(/minHeight: (\d+)/)?.[1] ?? '72';
 
+    const { valueExpr: teValueExpr, hasOnChange: teHasOnChange } = resolveValueBinding(node.props, ctx, itemScope);
+    const teTextBinding = teHasOnChange
+      ? `.init(get: { ${teValueExpr} }, set: { _ in })`
+      : `.constant(${teValueExpr})`;
+
     // Split modifiers: text-related go on TextEditor, visual/layout go on ZStack
     const textMods = modifiers.filter((mod) =>
       mod.startsWith('.foregroundStyle(') || mod.startsWith('.font(') || mod.startsWith('.fontWeight(')
@@ -343,7 +371,7 @@ function renderLeaf(
       `${pad}      .padding(.horizontal, 4)`,
       `${pad}      .allowsHitTesting(false)`,
       `${pad}  }`,
-      `${pad}  TextEditor(text: .constant(""))`,
+      `${pad}  TextEditor(text: ${teTextBinding})`,
       `${pad}    .scrollContentBackground(.hidden)`,
       ...textModLines,
       `${pad}}`,