import * as __ctHelpers from "commontools"; import { Cell, Default, handler, NAME, pattern, toSchema, UI, } from "commontools"; import "commontools/schema"; interface Item { text: Default; } interface InputSchemaInterface { title: Default; items: Default; } interface OutputSchemaInterface extends InputSchemaInterface { items_count: number; } type InputEventType = { detail: { message: string; }; }; const inputSchema = { type: "object", properties: { title: { type: "string", "default": "untitled" }, items: { type: "array", items: { $ref: "#/$defs/Item" }, "default": [] } }, required: ["title", "items"], $defs: { Item: { type: "object", properties: { text: { type: "string", "default": "" } }, required: ["text"] } } } as const satisfies __ctHelpers.JSONSchema; const outputSchema = { type: "object", properties: { items_count: { type: "number" }, title: { type: "string", "default": "untitled" }, items: { type: "array", items: { $ref: "#/$defs/Item" }, "default": [] } }, required: ["items_count", "title", "items"], $defs: { Item: { type: "object", properties: { text: { type: "string", "default": "" } }, required: ["text"] } } } as const satisfies __ctHelpers.JSONSchema; // Handler that logs the message event const addItem = handler // < ({ type: "object", properties: { detail: { type: "object", properties: { message: { type: "string" } }, required: ["message"] } }, required: ["detail"] } as const satisfies __ctHelpers.JSONSchema, { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asCell: true } }, required: ["items"], $defs: { Item: { type: "object", properties: { text: { type: "string", "default": "" } }, required: ["text"] } } } as const satisfies __ctHelpers.JSONSchema, (event: InputEventType, { items }: { items: Cell; }) => { items.push({ text: event.detail.message }); }); export default pattern(({ title, items }) => { const items_count = items.length; return { [NAME]: title, [UI]: (

{title}

Basic pattern

Items count: {items_count}

    {items.mapWithPattern(__ctHelpers.pattern(({ element: item, index, params: {} }) => (
  • {item.text}
  • ), { type: "object", properties: { element: { $ref: "#/$defs/Item" }, index: { type: "number" }, params: { type: "object", properties: {} } }, required: ["element", "params"], $defs: { Item: { type: "object", properties: { text: { type: "string", "default": "" } }, required: ["text"] } } } 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), {})}
), title, items, items_count, }; }, { type: "object", properties: { title: { type: "string", "default": "untitled" }, items: { type: "array", items: { $ref: "#/$defs/Item" }, "default": [] } }, required: ["title", "items"], $defs: { Item: { type: "object", properties: { text: { type: "string", "default": "" } }, required: ["text"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "object", properties: { items_count: { type: "number" }, title: { type: "string", "default": "untitled" }, items: { type: "array", items: { $ref: "#/$defs/Item" }, "default": [] } }, required: ["items_count", "title", "items"], $defs: { Item: { type: "object", properties: { text: { type: "string", "default": "" } }, required: ["text"] } } } 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;