cx 26.0.13 → 26.1.0

package/build/ui/createFunctionalComponent.spec.js

@@ -1,272 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
-import { Store } from "../data/Store";
-import { createFunctionalComponent } from "./createFunctionalComponent";
-import { bind } from "./bind";
-import { expr } from "./expr";
-import { createTestRenderer } from "../util/test/createTestRenderer";
-import assert from "assert";
-import { Rescope } from "./Rescope";
-import { LabelsLeftLayout } from "./layout/LabelsLeftLayout";
-import { LabeledContainer } from "../widgets/form/LabeledContainer";
-import { Repeater } from "./Repeater";
-import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
-import { useStoreMethods } from "../hooks";
-describe("createFunctionalComponent", () => {
-    it("allows spread", () => {
-        const SuperDiv = createFunctionalComponent(({ ...props }) => {
-            return (_jsx("cx", { children: _jsx("div", { ...props }) }));
-        });
-        let props = {
-            text: "Spread",
-            style: "background: red;",
-        };
-        const widget = (_jsx("cx", { children: _jsx(SuperDiv, { ...props, class: "test" }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            children: ["Spread"],
-            props: {
-                className: "test",
-                style: {
-                    background: "red",
-                },
-            },
-        });
-    });
-    it("visible and Rescope behave as expected", () => {
-        const RootRescope = createFunctionalComponent(({}) => {
-            return (_jsx("cx", { children: _jsx(Rescope, { bind: "x", children: _jsx("div", { text: bind("y") }) }) }));
-        });
-        const widget = (_jsx("cx", { children: _jsx(RootRescope, { visible: expr("!!{x}") }) }));
-        let store = new Store({
-            data: {
-                x: {
-                    y: "OK",
-                },
-            },
-        });
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            children: ["OK"],
-            props: {},
-        });
-    });
-    it("visible and multiple items behave as expected", () => {
-        const FComponent = createFunctionalComponent(({}) => {
-            return (_jsxs("cx", { children: [_jsx("div", { children: "1" }), _jsx("div", { visible: false, children: "2" }), _jsx("div", { children: "3" })] }));
-        });
-        const widget = (_jsx("cx", { children: _jsx(FComponent, {}) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.deepEqual(tree, [
-            {
-                type: "div",
-                children: ["1"],
-                props: {},
-            },
-            {
-                type: "div",
-                children: ["3"],
-                props: {},
-            },
-        ]);
-    });
-    it("respects inner layouts", () => {
-        const FComponent = createFunctionalComponent(({}) => {
-            return (_jsxs("cx", { children: [_jsx(LabeledContainer, { label: "Test" }), _jsx(LabeledContainer, { label: "Test" })] }));
-        });
-        const widget = (_jsx("cx", { children: _jsx("div", { layout: LabelsLeftLayout, children: _jsx(FComponent, {}) }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "table",
-                    props: {
-                        className: "cxb-labelsleftlayout",
-                        style: undefined,
-                    },
-                    children: [
-                        {
-                            type: "tbody",
-                            props: {},
-                            children: [
-                                {
-                                    type: "tr",
-                                    props: {},
-                                    children: [
-                                        {
-                                            type: "td",
-                                            props: {
-                                                className: "cxe-labelsleftlayout-label",
-                                                style: undefined,
-                                            },
-                                            children: [
-                                                {
-                                                    type: "label",
-                                                    props: {
-                                                        className: "cxb-label",
-                                                    },
-                                                    children: ["Test"],
-                                                },
-                                            ],
-                                        },
-                                        {
-                                            type: "td",
-                                            props: {
-                                                className: "cxe-labelsleftlayout-field",
-                                            },
-                                            children: null,
-                                        },
-                                    ],
-                                },
-                                {
-                                    type: "tr",
-                                    props: {},
-                                    children: [
-                                        {
-                                            type: "td",
-                                            props: {
-                                                className: "cxe-labelsleftlayout-label",
-                                                style: undefined,
-                                            },
-                                            children: [
-                                                {
-                                                    type: "label",
-                                                    props: {
-                                                        className: "cxb-label",
-                                                    },
-                                                    children: ["Test"],
-                                                },
-                                            ],
-                                        },
-                                        {
-                                            type: "td",
-                                            props: {
-                                                className: "cxe-labelsleftlayout-field",
-                                            },
-                                            children: null,
-                                        },
-                                    ],
-                                },
-                            ],
-                        },
-                    ],
-                },
-            ],
-        });
-    });
-    it("can use refs for data bindings", () => {
-        const X = createFunctionalComponent(({}) => {
-            let { ref } = useStoreMethods();
-            let x = ref("x", "OK");
-            return (_jsx("cx", { children: _jsx("div", { text: x }) }));
-        });
-        const widget = (_jsx("cx", { children: _jsx(X, { visible: true }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            children: ["OK"],
-            props: {},
-        });
-    });
-    it("adds children at the right place", () => {
-        const X = createFunctionalComponent(({ children }) => (_jsxs("cx", { children: [_jsx("header", {}), _jsx("main", { children: children }), _jsx("footer", {})] })));
-        const widget = (_jsx("cx", { children: _jsx(X, { children: _jsx("div", {}) }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.deepEqual(tree, [
-            {
-                type: "header",
-                children: null,
-                props: {},
-            },
-            {
-                type: "main",
-                children: [
-                    {
-                        type: "div",
-                        children: null,
-                        props: {},
-                    },
-                ],
-                props: {},
-            },
-            {
-                type: "footer",
-                children: null,
-                props: {},
-            },
-        ]);
-    });
-    it("works well with repeaters", () => {
-        const X = createFunctionalComponent(({}) => {
-            let { ref } = useStoreMethods();
-            let text = ref("$record.text");
-            return (_jsx("cx", { children: _jsx("div", { text: text }) }));
-        });
-        const widget = (_jsx("cx", { children: _jsx(Repeater, { records: bind("array"), children: _jsx(X, {}) }) }));
-        let store = new Store({ data: { array: [{ text: "0" }, { text: "1" }, { text: "2" }] } });
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.deepEqual(tree, [
-            {
-                type: "div",
-                children: ["0"],
-                props: {},
-            },
-            {
-                type: "div",
-                children: ["1"],
-                props: {},
-            },
-            {
-                type: "div",
-                children: ["2"],
-                props: {},
-            },
-        ]);
-        store.update("array", (array) => [array[0], { text: "10" }, array[2]]);
-        tree = component.toJSON();
-        assert.deepEqual(tree, [
-            {
-                type: "div",
-                children: ["0"],
-                props: {},
-            },
-            {
-                type: "div",
-                children: ["10"],
-                props: {},
-            },
-            {
-                type: "div",
-                children: ["2"],
-                props: {},
-            },
-        ]);
-    });
-    it("can have its own layout", () => {
-        const X = createFunctionalComponent(() => (_jsxs("cx", { children: [_jsx("div", { children: "1" }), _jsx("div", { children: "2" }), _jsx("div", { children: "3" })] })));
-        const widget = (_jsx("cx", { children: _jsx(X, { layout: FirstVisibleChildLayout }) }));
-        let store = new Store();
-        const component = createTestRenderer(store, widget);
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            children: ["1"],
-            props: {},
-        });
-    });
-});

package/build/ui/layout/ContentPlaceholder.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/build/ui/layout/ContentPlaceholder.spec.js

@@ -1,333 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "cx/jsx-runtime";
-import { Store } from "../../data/Store";
-import { ContentPlaceholder, ContentPlaceholderScope } from "./ContentPlaceholder";
-import assert from "assert";
-import { PureContainer } from "../PureContainer";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
-import { bind } from "../bind";
-describe("ContentPlaceholder", () => {
-    it("allows putting content inside", () => {
-        let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx("main", { children: _jsx("h2", { putInto: "header", children: "Header" }) })] }) }));
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "header",
-                    props: {},
-                    children: [
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header"],
-                        },
-                    ],
-                },
-                {
-                    type: "main",
-                    props: {},
-                    children: null,
-                },
-            ],
-        });
-    });
-    it("updates content on change", () => {
-        let store = new Store({
-            data: {
-                headerText: "Header",
-            },
-        });
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "header" }), _jsx("h2", { putInto: "header", text: bind("headerText") })] }) }));
-        let getTree = (headerText) => ({
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "h2",
-                    props: {},
-                    children: [headerText],
-                },
-            ],
-        });
-        assert.deepEqual(component.toJSON(), getTree("Header"));
-        store.set("headerText", "Footer");
-        assert.deepEqual(component.toJSON(), getTree("Footer"));
-    });
-    it("allows putting multiple entries inside", () => {
-        let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsxs("main", { children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" })] })] }) }));
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "header",
-                    props: {},
-                    children: [
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header1"],
-                        },
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header2"],
-                        },
-                    ],
-                },
-                {
-                    type: "main",
-                    props: {},
-                    children: null,
-                },
-            ],
-        });
-    });
-    it("allows putting multiple entries inside when content is defined before and after the placeholder", () => {
-        let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsxs(PureContainer, { children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" })] }), _jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsxs(PureContainer, { children: [_jsx("h2", { putInto: "headers", children: "Header3" }), _jsx("h2", { putInto: "headers", children: "Header4" })] })] }) }));
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "header",
-                    props: {},
-                    children: [
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header1"],
-                        },
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header2"],
-                        },
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header3"],
-                        },
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header4"],
-                        },
-                    ],
-                },
-            ],
-        });
-    });
-    it("allows putting multiple entries into separate placeholders using content placeholder scopes", () => {
-        let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsxs(ContentPlaceholderScope, { name: "headers", children: [_jsx("h2", { putInto: "headers", children: "Header1" }), _jsx("h2", { putInto: "headers", children: "Header2" }), _jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) })] }), _jsxs(ContentPlaceholderScope, { name: "headers", children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "headers", allowMultiple: true }) }), _jsx("h2", { putInto: "headers", children: "Header3" }), _jsx("h2", { putInto: "headers", children: "Header4" })] })] }) }));
-        let tree = component.toJSON();
-        assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "header",
-                    props: {},
-                    children: [
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header1"],
-                        },
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header2"],
-                        },
-                    ],
-                },
-                {
-                    type: "header",
-                    props: {},
-                    children: [
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header3"],
-                        },
-                        {
-                            type: "h2",
-                            props: {},
-                            children: ["Header4"],
-                        },
-                    ],
-                },
-            ],
-        });
-    });
-    it("is used for defining body position in outer layouts", () => {
-        let store = new Store();
-        let layout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: "Header" }), _jsx(ContentPlaceholder, {}), _jsx("footer", { children: "Footer" })] }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("main", { outerLayout: layout }) }));
-        assert.deepEqual(component.toJSON(), {
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "header",
-                    props: {},
-                    children: ["Header"],
-                },
-                {
-                    type: "main",
-                    props: {},
-                    children: null,
-                },
-                {
-                    type: "footer",
-                    props: {},
-                    children: ["Footer"],
-                },
-            ],
-        });
-    });
-    it("data in deeply nested placeholders is correctly updated", () => {
-        let store = new Store({
-            data: {
-                header: "H",
-                footer: "F",
-                body: "B",
-            },
-        });
-        let layout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx(ContentPlaceholder, {}), _jsx("footer", { children: _jsx(ContentPlaceholder, { name: "footer" }) })] }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("main", { outerLayout: layout, children: [_jsx("div", { putInto: "header", children: _jsx("span", { text: bind("header") }) }), _jsx("div", { putInto: "footer", children: _jsx("span", { text: bind("footer") }) }), _jsx("span", { text: bind("body") })] }) }));
-        let getTree = (h, b, f) => ({
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "header",
-                    props: {},
-                    children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
-                },
-                {
-                    type: "main",
-                    props: {},
-                    children: [{ type: "span", props: {}, children: [b] }],
-                },
-                {
-                    type: "footer",
-                    props: {},
-                    children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
-                },
-            ],
-        });
-        assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
-        store.set("header", "H2");
-        assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
-        store.set("footer", "F2");
-        assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
-        store.set("body", "B2");
-        assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
-    });
-    it("inside a two-level deep outer-layout works", () => {
-        let store = new Store();
-        let outerLayout = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
-        let innerLayout = (_jsx("cx", { children: _jsx("main", { outerLayout: outerLayout, children: _jsx(ContentPlaceholder, {}) }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) }));
-        let tree = component.toJSON();
-        //console.log(tree);
-        assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "main",
-                    props: {},
-                    children: [
-                        {
-                            type: "section",
-                            props: {},
-                            children: null,
-                        },
-                    ],
-                },
-            ],
-        });
-    });
-    it("works in strange order", () => {
-        let store = new Store();
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "footer" }), _jsx(PureContainer, { putInto: "footer-content", children: "works" }), _jsxs(PureContainer, { putInto: "footer", children: ["It", _jsx(ContentPlaceholder, { name: "footer-content", children: "doesn't work" })] })] }) }));
-        let tree = component.toJSON();
-        //console.log(tree);
-        assert.deepEqual(tree, {
-            type: "div",
-            props: {},
-            children: ["It", "works"],
-        });
-    });
-    it("inside a complex two-level-deep outer-layout works", () => {
-        let store = new Store();
-        let outerLayout = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
-        let innerLayout = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsx("main", { outerLayout: outerLayout, children: _jsx(ContentPlaceholder, {}) }) }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) }));
-        assert.deepEqual(component.toJSON(), {
-            type: "div",
-            props: {},
-            children: [{ type: "main", props: {}, children: [{ type: "section", props: {}, children: null }] }],
-        });
-    });
-    it("each level use an outer-layout", () => {
-        let store = new Store();
-        let outerLayout1 = (_jsx("cx", { children: _jsx("div", { children: _jsx(ContentPlaceholder, {}) }) }));
-        let outerLayout2 = (_jsx("cx", { children: _jsx("main", { children: _jsx(ContentPlaceholder, {}) }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsx(PureContainer, { outerLayout: outerLayout1, children: _jsx(PureContainer, { outerLayout: outerLayout2, children: "Content" }) }) }));
-        assert.deepEqual(component.toJSON(), {
-            type: "div",
-            props: {},
-            children: [{ type: "main", props: {}, children: ["Content"] }],
-        });
-    });
-    it("data in a two-level deep outer-layout is correctly updated", () => {
-        let store = new Store({
-            data: {
-                header: "H",
-                footer: "F",
-                body: "B",
-            },
-        });
-        let outerLayout = (_jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, {}), _jsx("footer", { children: _jsx(ContentPlaceholder, { name: "footer" }) })] }) }));
-        let innerLayout = (_jsx("cx", { children: _jsx(PureContainer, { children: _jsxs(PureContainer, { outerLayout: outerLayout, children: [_jsx("header", { children: _jsx(ContentPlaceholder, { name: "header" }) }), _jsx(ContentPlaceholder, {})] }) }) }));
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("main", { outerLayout: innerLayout, children: [_jsx("div", { putInto: "header", children: _jsx("span", { text: bind("header") }) }), _jsx("div", { putInto: "footer", children: _jsx("span", { text: bind("footer") }) }), _jsx("span", { text: bind("body") })] }) }));
-        let getTree = (h, b, f) => ({
-            type: "div",
-            props: {},
-            children: [
-                {
-                    type: "header",
-                    props: {},
-                    children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [h] }] }],
-                },
-                {
-                    type: "main",
-                    props: {},
-                    children: [{ type: "span", props: {}, children: [b] }],
-                },
-                {
-                    type: "footer",
-                    props: {},
-                    children: [{ type: "div", props: {}, children: [{ type: "span", props: {}, children: [f] }] }],
-                },
-            ],
-        });
-        assert.deepEqual(component.toJSON(), getTree("H", "B", "F"));
-        store.set("header", "H2");
-        assert.deepEqual(component.toJSON(), getTree("H2", "B", "F"));
-        store.set("footer", "F2");
-        assert.deepEqual(component.toJSON(), getTree("H2", "B", "F2"));
-        store.set("body", "B2");
-        assert.deepEqual(component.toJSON(), getTree("H2", "B2", "F2"));
-    });
-});

package/build/ui/layout/FirstVisibleChildLayout.spec.d.ts

@@ -1 +0,0 @@
-export {};