/// /** * Minimal pattern exposing a computed array and a string output. * Used to reproduce the .length bug on reactive proxy values. * * The bug: accessing .length on computed arrays or string outputs * from a pattern instance returns undefined instead of the actual length. */ import { action, computed, Default, NAME, pattern, Stream, Writable, } from "commontools"; interface Item { name: string; } interface Input { items: Writable>; } interface Output { [NAME]: string; items: Item[]; filteredItems: Item[]; label: string; itemCount: number; addItem: Stream; } export default pattern(({ items }) => { const addItem = action(() => { items.push({ name: `Item ${items.get().length + 1}` }); }); // Computed array derived from the input const filteredItems = computed(() => items.get().filter((i) => i.name !== "") ); // Computed string const label = computed(() => `Total: ${items.get().length}`); // Computed count (for comparison) const itemCount = computed(() => items.get().length); return { [NAME]: "Proxy Length Repro", items, filteredItems, label, itemCount, addItem, }; });