import * as __ctHelpers from "commontools"; import { Cell, derive, recipe, UI } from "commontools"; interface Item { name: string; done: Cell; } interface Assignment { aisle: string; item: Item; } // CT-1036: Property access on derived grouped objects with derived keys // This pattern groups items by a property, then maps over the group keys // and accesses the grouped object with each key. export default recipe({ type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" } } }, required: ["items"], $defs: { Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } 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, ({ items }) => { // Create assignments with aisle data const itemsWithAisles = derive({ type: "object", properties: { items: { type: "array", items: { $ref: "#/$defs/Item" }, asOpaque: true } }, required: ["items"], $defs: { Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "array", items: { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item", asOpaque: true } }, required: ["aisle", "item"] }, asOpaque: true, $defs: { Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { items }, ({ items }) => items.mapWithPattern(__ctHelpers.recipe({ type: "object", properties: { element: { $ref: "#/$defs/Item" }, index: { type: "number" }, params: { type: "object", properties: {} } }, required: ["element", "params"], $defs: { Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item", asOpaque: true } }, required: ["aisle", "item"], $defs: { Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, ({ element: item, index: idx, params: {} }) => ({ aisle: `Aisle ${(idx % 3) + 1}`, item: item, })), {})); // Group by aisle - returns Record const groupedByAisle = derive({ type: "object", properties: { itemsWithAisles: { type: "array", items: { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item", asOpaque: true } }, required: ["aisle", "item"] }, asOpaque: true } }, required: ["itemsWithAisles"], $defs: { Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "object", properties: {}, additionalProperties: { type: "array", items: { $ref: "#/$defs/Assignment" } }, $defs: { Assignment: { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item" } }, required: ["aisle", "item"] }, Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { itemsWithAisles }, ({ itemsWithAisles }) => { const groups: Record = {}; for (const assignment of itemsWithAisles) { if (!groups[assignment.aisle]) { groups[assignment.aisle] = []; } groups[assignment.aisle]!.push(assignment); } return groups; }); // Derive sorted aisle names from grouped object const aisleNames = derive({ type: "object", properties: { groupedByAisle: { type: "object", properties: {}, additionalProperties: { type: "array", items: { $ref: "#/$defs/Assignment" } }, asOpaque: true } }, required: ["groupedByAisle"], $defs: { Assignment: { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item" } }, required: ["aisle", "item"] }, Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "array", items: { type: "string" } } as const satisfies __ctHelpers.JSONSchema, { groupedByAisle }, ({ groupedByAisle }) => Object.keys(groupedByAisle).sort()); // The pattern from CT-1036: // - Map over derived keys (aisleNames) // - Access derived object with derived key (groupedByAisle[aisleName]) // - Map over the result return { [UI]: (
{aisleNames.mapWithPattern(__ctHelpers.recipe({ type: "object", properties: { element: { type: "string" }, params: { type: "object", properties: { groupedByAisle: { type: "object", properties: {}, additionalProperties: { type: "array", items: { $ref: "#/$defs/Assignment" } }, asOpaque: true } }, required: ["groupedByAisle"] } }, required: ["element", "params"], $defs: { Assignment: { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item" } }, required: ["aisle", "item"] }, Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { 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"], $defs: { 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, ({ element: aisleName, params: { groupedByAisle } }) => (

{aisleName}

{(__ctHelpers.derive({ type: "object", properties: { groupedByAisle: { type: "object", properties: {}, additionalProperties: { type: "array", items: { $ref: "#/$defs/Assignment" } }, asOpaque: true }, aisleName: { type: "string", asOpaque: true } }, required: ["groupedByAisle", "aisleName"], $defs: { Assignment: { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item" } }, required: ["aisle", "item"] }, Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { type: "array", items: { $ref: "#/$defs/Assignment" }, asOpaque: true, $defs: { Assignment: { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item" } }, required: ["aisle", "item"] }, Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { groupedByAisle: groupedByAisle, aisleName: aisleName }, ({ groupedByAisle, aisleName }) => groupedByAisle[aisleName]! ?? [])).mapWithPattern(__ctHelpers.recipe({ type: "object", properties: { element: { $ref: "#/$defs/Assignment" }, params: { type: "object", properties: {} } }, required: ["element", "params"], $defs: { Assignment: { type: "object", properties: { aisle: { type: "string" }, item: { $ref: "#/$defs/Item" } }, required: ["aisle", "item"] }, Item: { type: "object", properties: { name: { type: "string" }, done: { type: "boolean", asCell: true } }, required: ["name", "done"] } } } as const satisfies __ctHelpers.JSONSchema, { 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"], $defs: { 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, ({ element: assignment, params: {} }) => (
{assignment.item.name}
)), {})}
)), { groupedByAisle: groupedByAisle })}
), }; }); // @ts-ignore: Internals function h(...args: any[]) { return __ctHelpers.h.apply(null, args); } // @ts-ignore: Internals h.fragment = __ctHelpers.h.fragment;