///
/**
* 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,
};
});