import * as __ctHelpers from "commontools"; import { recipe, UI } from "commontools"; interface State { text: string; searchTerm: string; items: number[]; start: number; end: number; threshold: number; factor: number; names: string[]; prefix: string; prices: number[]; discount: number; taxRate: number; users: Array<{ name: string; age: number; active: boolean; }>; minAge: number; words: string[]; separator: string; } export default recipe({ type: "object", properties: { text: { type: "string" }, searchTerm: { type: "string" }, items: { type: "array", items: { type: "number" } }, start: { type: "number" }, end: { type: "number" }, threshold: { type: "number" }, factor: { type: "number" }, names: { type: "array", items: { type: "string" } }, prefix: { type: "string" }, prices: { type: "array", items: { type: "number" } }, discount: { type: "number" }, taxRate: { type: "number" }, users: { type: "array", items: { type: "object", properties: { name: { type: "string" }, age: { type: "number" }, active: { type: "boolean" } }, required: ["name", "age", "active"] } }, minAge: { type: "number" }, words: { type: "array", items: { type: "string" } }, separator: { type: "string" } }, required: ["text", "searchTerm", "items", "start", "end", "threshold", "factor", "names", "prefix", "prices", "discount", "taxRate", "users", "minAge", "words", "separator"] } as const satisfies __ctHelpers.JSONSchema, { type: "object", properties: { $UI: { $ref: "#/$defs/Element" } }, required: ["$UI"], $defs: { Element: { type: "object", properties: { type: { type: "string", "enum": ["vnode"] }, name: { type: "string" }, props: { $ref: "#/$defs/Props" }, children: { $ref: "#/$defs/RenderNode" }, $UI: { $ref: "#/$defs/VNode" } }, required: ["type", "name", "props"] }, VNode: { type: "object", properties: { type: { type: "string", "enum": ["vnode"] }, name: { type: "string" }, props: { $ref: "#/$defs/Props" }, children: { $ref: "#/$defs/RenderNode" }, $UI: { $ref: "#/$defs/VNode" } }, required: ["type", "name", "props"] }, RenderNode: { anyOf: [{ type: "string" }, { type: "number" }, { type: "boolean", "enum": [false] }, { type: "boolean", "enum": [true] }, { $ref: "#/$defs/VNode" }, { type: "object", properties: {} }, { type: "array", items: { $ref: "#/$defs/RenderNode" } }] }, Props: { type: "object", properties: {}, additionalProperties: { anyOf: [{ type: "string" }, { type: "number" }, { type: "boolean", "enum": [false] }, { type: "boolean", "enum": [true] }, { type: "object", additionalProperties: true }, { type: "array", items: true }, { asCell: true }, { asStream: true }, { type: "null" }] } } } } as const satisfies __ctHelpers.JSONSchema, (state) => { return { [UI]: (
Trimmed lower: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { text: { type: "string", asOpaque: true } }, required: ["text"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { text: state.text } }, ({ state }) => state.text.trim().toLowerCase())}
{/* Chain with reactive argument */}Contains search:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { text: { type: "string", asOpaque: true }, searchTerm: { type: "string", asOpaque: true } }, required: ["text", "searchTerm"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { text: state.text, searchTerm: state.searchTerm } }, ({ state }) => state.text.toLowerCase().includes(state.searchTerm.toLowerCase()))}
{/* Longer chain */}Processed:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { text: { type: "string", asOpaque: true } }, required: ["text"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { text: state.text } }, ({ state }) => state.text.trim().toLowerCase().replace("old", "new").toUpperCase())}
Count above threshold:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { type: "number" }, asOpaque: true }, threshold: { type: "number", asOpaque: true } }, required: ["items", "threshold"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items, threshold: state.threshold } }, ({ state }) => state.items.filter((x) => x > state.threshold).length)}
{/* Filter then map */}Double filter count:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { type: "number" }, asOpaque: true }, start: { type: "number", asOpaque: true }, end: { type: "number", asOpaque: true } }, required: ["items", "start", "end"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items, start: state.start, end: state.end } }, ({ state }) => state.items.filter((x) => x > state.start).filter((x) => x < state.end).length)}
Sliced items: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { type: "number" }, asOpaque: true }, start: { type: "number", asOpaque: true }, end: { type: "number", asOpaque: true } }, required: ["items", "start", "end"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items, start: state.start, end: state.end } }, ({ state }) => state.items.slice(state.start, state.end).join(", "))}
{/* String methods with reactive args */}Starts with:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { names: { type: "array", items: { type: "string" }, asOpaque: true }, prefix: { type: "string", asOpaque: true } }, required: ["names", "prefix"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { names: state.names, prefix: state.prefix } }, ({ state }) => state.names.filter((n) => n.startsWith(state.prefix)).join(", "))}
{/* Array find with reactive predicate */}First match: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { names: { type: "array", items: { type: "string" }, asOpaque: true }, searchTerm: { type: "string", asOpaque: true } }, required: ["names", "searchTerm"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string", asOpaque: true } as const satisfies __ctHelpers.JSONSchema, { state: { names: state.names, searchTerm: state.searchTerm } }, ({ state }) => state.names.find((n) => n.includes(state.searchTerm)))}
Total with discount: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { prices: { type: "array", items: { type: "number" }, asOpaque: true }, discount: { type: "number", asOpaque: true } }, required: ["prices", "discount"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { prices: state.prices, discount: state.discount } }, ({ state }) => state.prices.reduce((sum, price) => sum + price * (1 - state.discount), 0))}
{/* Method result used in computation */}Average * factor:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { items: { type: "array", items: { type: "number" }, asOpaque: true }, factor: { type: "number", asOpaque: true } }, required: ["items", "factor"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { items: state.items, factor: state.factor } }, ({ state }) => (state.items.reduce((a, b) => a + b, 0) / state.items.length) * state.factor)}
Formatted price: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { prices: { type: "array", items: { type: "number" }, asOpaque: true }, discount: { type: "number", asOpaque: true } }, required: ["prices", "discount"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { prices: state.prices, discount: state.discount } }, ({ state }) => (state.prices[0]! * (1 - state.discount)).toFixed(2))}
{/* Method on conditional result */}Conditional trim:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { text: { type: "string", asOpaque: true }, prefix: { type: "string", asOpaque: true } }, required: ["text", "prefix"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { text: state.text, prefix: state.prefix } }, ({ state }) => (state.text.length > 10 ? state.text : state.prefix).trim())}
{/* Method chain on computed value */}Complex:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { text: { type: "string", asOpaque: true }, prefix: { type: "string", asOpaque: true } }, required: ["text", "prefix"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { text: state.text, prefix: state.prefix } }, ({ state }) => (state.text + " " + state.prefix).trim().toLowerCase().split(" ") .join("-"))}
Active adults:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { users: { type: "array", items: { type: "object", properties: { name: { type: "string" }, age: { type: "number" }, active: { type: "boolean" } }, required: ["name", "age", "active"] }, asOpaque: true }, minAge: { type: "number", asOpaque: true } }, required: ["users", "minAge"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { users: state.users, minAge: state.minAge } }, ({ state }) => state.users.filter((u) => u.age >= state.minAge && u.active).length)}
{/* Map with conditional logic */}Has adults:{" "} {__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: { users: { type: "array", items: { type: "object", properties: { name: { type: "string" }, age: { type: "number" }, active: { type: "boolean" } }, required: ["name", "age", "active"] }, asOpaque: true }, minAge: { type: "number", asOpaque: true } }, required: ["users", "minAge"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { users: state.users, minAge: state.minAge } }, ({ state }) => state.users.some((u) => u.age >= state.minAge)), "Yes", "No")}
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: { users: { type: "array", items: { type: "object", properties: { name: { type: "string" }, age: { type: "number" }, active: { type: "boolean" } }, required: ["name", "age", "active"] }, asOpaque: true } }, required: ["users"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { users: state.users } }, ({ state }) => state.users.every((u) => u.active)), "Yes", "No")}
Length sum: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { text: { type: "string", asOpaque: true }, prefix: { type: "string", asOpaque: true } }, required: ["text", "prefix"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { text: state.text, prefix: state.prefix } }, ({ state }) => state.text.trim().length + state.prefix.trim().length)}
{/* Method result in comparison */}Is long: {__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: { text: { type: "string", asOpaque: true }, threshold: { type: "number", asOpaque: true } }, required: ["text", "threshold"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "boolean" } as const satisfies __ctHelpers.JSONSchema, { state: { text: state.text, threshold: state.threshold } }, ({ state }) => state.text.trim().length > state.threshold), "Yes", "No")}
{/* Multiple method results combined */}Joined: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { words: { type: "array", items: { type: "string" }, asOpaque: true }, separator: { type: "string", asOpaque: true } }, required: ["words", "separator"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { words: state.words, separator: state.separator } }, ({ state }) => state.words.join(state.separator).toUpperCase())}