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]: (

Chained String Methods

{/* Simple chain */}

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())}

Array Method Chains

{/* Filter then length */}

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 */} {/* Multiple filters */}

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)}

Methods with Reactive Arguments

{/* Slice with reactive indices */}

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)))}

Complex Method Combinations

{/* Map with chained operations inside */} {/* Reduce with reactive accumulator */}

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)}

Methods on Computed Values

{/* Method on binary expression result */}

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("-"))}

Array Methods with Complex Predicates

{/* Filter with multiple conditions */}

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 */} {/* Some/every with reactive predicates */}

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")}

Method Calls in Expressions

{/* Method result in arithmetic */}

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())}

), }; }); // @ts-ignore: Internals function h(...args: any[]) { return __ctHelpers.h.apply(null, args); } // @ts-ignore: Internals h.fragment = __ctHelpers.h.fragment;