import * as __ctHelpers from "commontools"; import { recipe, UI } from "commontools"; interface State { user: { name: string; age: number; email: string; profile: { bio: string; location: string; website: string; }; settings: { theme: string; notifications: boolean; privacy: string; }; }; config: { theme: { colors: { primary: string; secondary: string; background: string; }; fonts: { heading: string; body: string; mono: string; }; spacing: { small: number; medium: number; large: number; }; }; features: { darkMode: boolean; animations: boolean; betaFeatures: boolean; }; }; data: { items: Array<{ id: number; name: string; value: number; }>; totals: { count: number; sum: number; average: number; }; }; deeply: { nested: { structure: { with: { many: { levels: { value: string; count: number; }; }; }; }; }; }; arrays: { first: string[]; second: number[]; nested: Array<{ items: string[]; count: number; }>; }; } export default recipe({ type: "object", properties: { user: { type: "object", properties: { name: { type: "string" }, age: { type: "number" }, email: { type: "string" }, profile: { type: "object", properties: { bio: { type: "string" }, location: { type: "string" }, website: { type: "string" } }, required: ["bio", "location", "website"] }, settings: { type: "object", properties: { theme: { type: "string" }, notifications: { type: "boolean" }, privacy: { type: "string" } }, required: ["theme", "notifications", "privacy"] } }, required: ["name", "age", "email", "profile", "settings"] }, config: { type: "object", properties: { theme: { type: "object", properties: { colors: { type: "object", properties: { primary: { type: "string" }, secondary: { type: "string" }, background: { type: "string" } }, required: ["primary", "secondary", "background"] }, fonts: { type: "object", properties: { heading: { type: "string" }, body: { type: "string" }, mono: { type: "string" } }, required: ["heading", "body", "mono"] }, spacing: { type: "object", properties: { small: { type: "number" }, medium: { type: "number" }, large: { type: "number" } }, required: ["small", "medium", "large"] } }, required: ["colors", "fonts", "spacing"] }, features: { type: "object", properties: { darkMode: { type: "boolean" }, animations: { type: "boolean" }, betaFeatures: { type: "boolean" } }, required: ["darkMode", "animations", "betaFeatures"] } }, required: ["theme", "features"] }, data: { type: "object", properties: { items: { type: "array", items: { type: "object", properties: { id: { type: "number" }, name: { type: "string" }, value: { type: "number" } }, required: ["id", "name", "value"] } }, totals: { type: "object", properties: { count: { type: "number" }, sum: { type: "number" }, average: { type: "number" } }, required: ["count", "sum", "average"] } }, required: ["items", "totals"] }, deeply: { type: "object", properties: { nested: { type: "object", properties: { structure: { type: "object", properties: { "with": { type: "object", properties: { many: { type: "object", properties: { levels: { type: "object", properties: { value: { type: "string" }, count: { type: "number" } }, required: ["value", "count"] } }, required: ["levels"] } }, required: ["many"] } }, required: ["with"] } }, required: ["structure"] } }, required: ["nested"] }, arrays: { type: "object", properties: { first: { type: "array", items: { type: "string" } }, second: { type: "array", items: { type: "number" } }, nested: { type: "array", items: { type: "object", properties: { items: { type: "array", items: { type: "string" } }, count: { type: "number" } }, required: ["items", "count"] } } }, required: ["first", "second", "nested"] } }, required: ["user", "config", "data", "deeply", "arrays"] } 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]: (
User info: {state.user.name} (age: {state.user.age}, email:{" "} {state.user.email})
{/* String concatenation with multiple property accesses */}Full profile:{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { user: { type: "object", properties: { name: { type: "string", asOpaque: true }, profile: { type: "object", properties: { location: { type: "string", asOpaque: true }, bio: { type: "string", asOpaque: true } }, required: ["location", "bio"] } }, required: ["name", "profile"] } }, required: ["user"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { user: { name: state.user.name, profile: { location: state.user.profile.location, bio: state.user.profile.bio } } } }, ({ state }) => state.user.name + " from " + state.user.profile.location + " - " + state.user.profile.bio)}
{/* Arithmetic with multiple properties from same base */}Age calculation: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { user: { type: "object", properties: { age: { type: "number", asOpaque: true } }, required: ["age"] } }, required: ["user"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { user: { age: state.user.age } } }, ({ state }) => state.user.age * 12)} months, or{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { user: { type: "object", properties: { age: { type: "number", asOpaque: true } }, required: ["age"] } }, required: ["user"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { user: { age: state.user.age } } }, ({ state }) => state.user.age * 365)} days
Theme: {state.config.theme.colors.primary} /{" "} {state.config.theme.colors.secondary} on{" "} {state.config.theme.colors.background}
{/* Fonts from same nested structure */}Typography: Headings in {state.config.theme.fonts.heading}, body in {" "} {state.config.theme.fonts.body}, code in{" "} {state.config.theme.fonts.mono}
{/* Mixed depth accesses */}Config summary: Dark mode{" "} {__ctHelpers.ifElse({ type: "boolean", asOpaque: true } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["enabled", "disabled"] } as const satisfies __ctHelpers.JSONSchema, state.config.features.darkMode, "enabled", "disabled")} with{" "} {state.config.theme.colors.primary} primary color
Deep value: {state.deeply.nested.structure.with.many.levels.value} {" "} (count: {state.deeply.nested.structure.with.many.levels.count})
{/* Mixed depth from same root */}Mixed depths: {state.deeply.nested.structure.with.many.levels.value} {" "} in {state.deeply.nested.structure.with.many.levels.count} items
Array info: First has {state.arrays.first.length} items, second has {" "} {state.arrays.second.length} items
{/* Nested array access with shared base */}Nested: {state.arrays.nested[0]!.items.length} items in first, count is {" "} {state.arrays.nested[0]!.count}
{/* Array and property access mixed */}First item: {state.arrays.first[0]} (total:{" "} {state.arrays.first.length})
Status: {__ctHelpers.ifElse({ type: "boolean", asOpaque: true } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, state.user.settings.notifications, __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { user: { type: "object", properties: { name: { type: "string", asOpaque: true }, settings: { type: "object", properties: { theme: { type: "string", asOpaque: true } }, required: ["theme"] } }, required: ["name", "settings"] } }, required: ["user"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { user: { name: state.user.name, settings: { theme: state.user.settings.theme } } } }, ({ state }) => state.user.name + " has notifications on with " + state.user.settings.theme + " theme"), __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { user: { type: "object", properties: { name: { type: "string", asOpaque: true } }, required: ["name"] } }, required: ["user"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { user: { name: state.user.name } } }, ({ state }) => state.user.name + " has notifications off"))}
{/* Computed expression with shared base */}Spacing calc: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { config: { type: "object", properties: { theme: { type: "object", properties: { spacing: { type: "object", properties: { small: { type: "number", asOpaque: true }, medium: { type: "number", asOpaque: true }, large: { type: "number", asOpaque: true } }, required: ["small", "medium", "large"] } }, required: ["spacing"] } }, required: ["theme"] } }, required: ["config"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "number" } as const satisfies __ctHelpers.JSONSchema, { state: { config: { theme: { spacing: { small: state.config.theme.spacing.small, medium: state.config.theme.spacing.medium, large: state.config.theme.spacing.large } } } } }, ({ state }) => state.config.theme.spacing.small + state.config.theme.spacing.medium + state.config.theme.spacing.large)} total
{/* Boolean expressions with multiple properties */}Features:{" "} {__ctHelpers.ifElse({ type: "boolean", asOpaque: true } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["Full features", "Limited features"] } as const satisfies __ctHelpers.JSONSchema, __ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { config: { type: "object", properties: { features: { type: "object", properties: { darkMode: { type: "boolean", asOpaque: true }, animations: { type: "boolean", asOpaque: true } }, required: ["darkMode", "animations"] } }, required: ["features"] } }, required: ["config"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "boolean", asOpaque: true } as const satisfies __ctHelpers.JSONSchema, { state: { config: { features: { darkMode: state.config.features.darkMode, animations: state.config.features.animations } } } }, ({ state }) => state.config.features.darkMode && state.config.features.animations), "Full features", "Limited features")}
Formatted: {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { user: { type: "object", properties: { name: { type: "string", asOpaque: true } }, required: ["name"] } }, required: ["user"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { user: { name: state.user.name } } }, ({ state }) => state.user.name.toUpperCase())} -{" "} {__ctHelpers.derive({ type: "object", properties: { state: { type: "object", properties: { user: { type: "object", properties: { email: { type: "string", asOpaque: true } }, required: ["email"] } }, required: ["user"] } }, required: ["state"] } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { state: { user: { email: state.user.email } } }, ({ state }) => state.user.email.toLowerCase())}
{/* Property access and method calls mixed */}Profile length: {state.user.profile.bio.length} chars in bio,{" "} {state.user.profile.location.length} chars in location
User settings: Theme is {state.user.settings.theme} with privacy{" "} {state.user.settings.privacy}
{/* Parent and child both used */}Data summary: {state.data.items.length} items with average{" "} {state.data.totals.average}
{/* Multiple levels of the same chain */}Nested refs: {state.config.theme.colors.primary} in{" "} {state.config.theme.fonts.body} with{" "} {__ctHelpers.ifElse({ type: "boolean", asOpaque: true } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["animations", "no animations"] } as const satisfies __ctHelpers.JSONSchema, state.config.features.animations, "animations", "no animations")}
All levels: Root: {__ctHelpers.ifElse({ type: "object", properties: { nested: { type: "object", properties: { structure: { type: "object", properties: { "with": { type: "object", properties: { many: { type: "object", properties: { levels: { type: "object", properties: { value: { type: "string" }, count: { type: "number" } }, required: ["value", "count"] } }, required: ["levels"] } }, required: ["many"] } }, required: ["with"] } }, required: ["structure"] } }, required: ["nested"], asOpaque: true } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["exists", "missing"] } as const satisfies __ctHelpers.JSONSchema, state.deeply, "exists", "missing")}, Nested:{" "} {__ctHelpers.ifElse({ type: "object", properties: { structure: { type: "object", properties: { "with": { type: "object", properties: { many: { type: "object", properties: { levels: { type: "object", properties: { value: { type: "string" }, count: { type: "number" } }, required: ["value", "count"] } }, required: ["levels"] } }, required: ["many"] } }, required: ["with"] } }, required: ["structure"], asOpaque: true } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { type: "string" } as const satisfies __ctHelpers.JSONSchema, { "enum": ["exists", "missing"] } as const satisfies __ctHelpers.JSONSchema, state.deeply.nested, "exists", "missing")}, Value:{" "} {state.deeply.nested.structure.with.many.levels.value}