import * as __ctHelpers from "commontools"; import { pattern, UI } from "commontools"; interface Item { id: number; name: string; price: number; active: boolean; } interface State { items: Item[]; filter: string; discount: number; taxRate: number; } export default pattern((state) => { return { [UI]: (

Array Operations

Total items: {state.items.length}

Filtered count:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true }, filter: { type: "string", asOpaque: true } }, required: ["items", "filter"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items, filter: state.filter } }, ({ state }) => state.items.filter((i) => i.name.includes(state.filter)).length)}

Array with Complex Expressions

Array Methods

Item count: {state.items.length}

Active items: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items } }, ({ state }) => state.items.filter((i) => i.active).length)}

Simple Operations

Discount percent: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { discount: { type: "number", asOpaque: true } }, required: ["discount"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { discount: state.discount } }, ({ state }) => state.discount * 100)}%

Tax percent: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { taxRate: { type: "number", asOpaque: true } }, required: ["taxRate"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { taxRate: state.taxRate } }, ({ state }) => state.taxRate * 100)}%

Array Predicates

All active: {__ctHelpers.ifElse({ type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["Yes", "No"] } as const satisfies __ctHelpers.JSONSchema, __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items } }, ({ state }) => state.items.every((i) => i.active)), "Yes", "No")}

Any active: {__ctHelpers.ifElse({ type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["Yes", "No"] } as const satisfies __ctHelpers.JSONSchema, __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items } }, ({ state }) => state.items.some((i) => i.active)), "Yes", "No")}

Has expensive (gt 100):{" "} {__ctHelpers.ifElse({ type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["Yes", "No"] } as const satisfies __ctHelpers.JSONSchema, __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"] } }, required: ["state"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items } }, ({ state }) => state.items.some((i) => i.price > 100)), "Yes", "No")}

Object Operations

state.filter.length > 0)} data-discount={state.discount}> Object attributes
), }; }, { type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" } }, filter: { type: "string" }, discount: { type: "number" }, taxRate: { type: "number" } }, required: ["items", "filter", "discount", "taxRate"], $defs: { Item: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, price: { type: "number" }, active: { type: "boolean" } }, required: ["id", "name", "price", "active"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "object", properties: { $UI: { $ref: "#/$defs/JSXElement" } }, required: ["$UI"], $defs: { 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;