import * as __ctHelpers from "commontools"; /** * Regression test: inline arrow function inside explicit computed() in JSX * * Variation where an inline arrow function handler is wrapped inside an * explicit computed() in JSX. The transformer will convert the arrow function * to a handler, and the Cell reference (state.isEditing) must be properly * captured in the derive wrapper created for the computed. */ import { Cell, computed, pattern, UI } from "commontools"; interface Card { title: string; description: string; } interface State { card: Card; isEditing: Cell; } export default pattern((state) => { return { [UI]: ( {__ctHelpers.ifElse({ type: "boolean", asCell: true } as const satisfies __ctHelpers.JSONSchema, { anyOf: [{}, { type: "object", properties: {} }] } as const satisfies __ctHelpers.JSONSchema, { anyOf: [{}, { type: "object", properties: {} }] } as const satisfies __ctHelpers.JSONSchema, { anyOf: [{}, { type: "object", properties: {} }] } as const satisfies __ctHelpers.JSONSchema, state.isEditing,
Editing
,
{state.card.title} {/* Explicit computed() wrapping a button with inline handler */} {/* The Cell ref in the handler must be captured in the derive */} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { isEditing: { type: "boolean", asCell: true } }, required: ["isEditing"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { anyOf: [{ $ref: "https://commonfabric.org/schemas/vnode.json" }, { type: "object", properties: {} }, { $ref: "#/$defs/UIRenderable", asOpaque: true }], $defs: { UIRenderable: { type: "object", properties: { $UI: { $ref: "https://commonfabric.org/schemas/vnode.json" } }, required: ["$UI"] } } } as const satisfies __ctHelpers.JSONSchema, { state: { isEditing: state.isEditing } }, ({ state }) => ( state.isEditing.set(true))({ state: { isEditing: state.isEditing } })}>Edit))}
)}
), card: state.card, }; }, { type: "object", properties: { card: { $ref: "#/$defs/Card" }, isEditing: { type: "boolean", asCell: true } }, required: ["card", "isEditing"], $defs: { Card: { type: "object", properties: { title: { type: "string" }, description: { type: "string" } }, required: ["title", "description"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "object", properties: { $UI: { $ref: "#/$defs/JSXElement" }, card: { $ref: "#/$defs/Card", asOpaque: true } }, required: ["$UI", "card"], $defs: { Card: { type: "object", properties: { title: { type: "string" }, description: { type: "string" } }, required: ["title", "description"] }, JSXElement: { anyOf: [{ $ref: "https://commonfabric.org/schemas/vnode.json" }, { type: "object", properties: {} }, { $ref: "#/$defs/UIRenderable", asOpaque: true }] }, UIRenderable: { type: "object", properties: { $UI: { $ref: "https://commonfabric.org/schemas/vnode.json" } }, required: ["$UI"] } } } as const satisfies __ctHelpers.JSONSchema); // @ts-ignore: Internals function h(...args: any[]) { return __ctHelpers.h.apply(null, args); } // @ts-ignore: Internals h.fragment = __ctHelpers.h.fragment;