view-contracts 0.5.2 → 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.2
+**Version:** 0.5.3
 
 ## Table of Contents
 

package/package.json

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

package/renderers/react/lowering/lowerToJsx.ts

@@ -109,19 +109,19 @@ function actionHandler(props: Record<string, IrValue>, event: 'onClick' | 'onSub
   return `onClick={() => { void dispatchAction(${expr}); }}`;
 }
 
-function onChangeHandler(props: Record<string, IrValue>): string | undefined {
+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: e.target.value } } as ActionDescriptor); }}`;
+    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: e.target.value } } as ActionDescriptor); }}`;
+  return `onChange={(e) => { void dispatchAction({ name: ${JSON.stringify(action.name)}, params: { ${existingParams}, value: ${targetProp} } } as ActionDescriptor); }}`;
 }
 
 function componentToKebab(name: string): string {
@@ -197,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>`;
 }
@@ -209,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>`;
 }
@@ -220,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>`;
 }
@@ -282,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}`);
@@ -320,7 +329,10 @@ 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')}}`);