cx 26.0.4 → 26.0.6

package/build/data/ArrayElementView.spec.js

@@ -23,7 +23,7 @@ describe("ArrayElementView", function () {
         let store = new Store({ data: { letters } });
         let elementView = new ArrayElementView({ store, itemIndex: 1, arrayAccessor: getAccessor({ bind: "letters" }) });
         elementView.delete("$record");
-        assert.deepEqual(store.get("letters"), [letters[0]]);
+        assert.deepEqual(store.get("letters"), [...letters[0]]);
     });
     it("exposes the element as under the given alias", function () {
         let letters = [{ letter: "A" }, { letter: "B" }];

package/build/hooks/store.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "cx/jsx-runtime";
 import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer } from "src/util/test/createTestRenderer";
 import { computable } from "../data";
 import { Store } from "../data/Store";
 import { createFunctionalComponent } from "../ui/createFunctionalComponent";

package/build/hooks/useTrigger.spec.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "cx/jsx-runtime";
 import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer } from "src/util/test/createTestRenderer";
 import { Store } from "../data/Store";
 import { createFunctionalComponent } from "../ui/createFunctionalComponent";
 import { useTrigger } from "./useTrigger";

package/build/ui/Controller.spec.js

@@ -39,9 +39,11 @@ describe("Controller", () => {
         }
         class Cmp extends Widget {
             render(context, instance, key) {
-                instance.invoke("onTest");
                 return null;
             }
+            onInit(context, instance) {
+                instance.invoke("onTest");
+            }
         }
         let store = new Store();
         const component = createTestRenderer(store, _jsx("cx", { children: _jsx(Cmp, { controller: TestController, onTest: "callback" }) }));
@@ -63,9 +65,11 @@ describe("Controller", () => {
         }
         class Cmp extends Widget {
             render(context, instance, key) {
-                instance.invoke("onTest");
                 return null;
             }
+            onInit(context, instance) {
+                instance.invoke("onTest");
+            }
         }
         let store = new Store();
         const component = createTestRenderer(store, _jsx("cx", { children: _jsx("div", { controller: TestController1, children: _jsx(Cmp, { controller: TestController2, onTest: "callback1" }) }) }));

package/build/ui/app/startAppLoop.d.ts

@@ -1,10 +1,11 @@
 /** @jsxImportSource react */
-import { Widget, WidgetConfig } from "../Widget";
+import { Widget } from "../Widget";
 import { Store } from "../../data/Store";
 import { Instance } from "../Instance";
+import { Create } from "../../util/Component";
 export interface StartAppLoopOptions {
     destroyDelay?: number;
     removeParentDOMElement?: boolean;
     [key: string]: any;
 }
-export declare function startAppLoop(parentDOMElement: HTMLElement, storeOrInstance?: Store | Instance, widget?: Widget | WidgetConfig, options?: StartAppLoopOptions): () => void;
+export declare function startAppLoop(parentDOMElement: HTMLElement, storeOrInstance?: Store | Instance, widget?: Create<typeof Widget> | Create<typeof Widget>[], options?: StartAppLoopOptions): () => void;

package/build/ui/app/startHotAppLoop.d.ts

@@ -1,6 +1,7 @@
 import { StartAppLoopOptions } from "./startAppLoop";
-import { Widget, WidgetConfig } from "../Widget";
+import { Widget } from "../Widget";
 import { Store } from "../../data/Store";
+import { Create } from "../../util/Component";
 export interface HotModule {
     hot?: {
         accept: () => void;
@@ -8,4 +9,4 @@ export interface HotModule {
         data?: any;
     };
 }
-export declare function startHotAppLoop(appModule: HotModule, element: HTMLElement, store: Store, widgets: Widget | WidgetConfig, options?: StartAppLoopOptions): () => void;
+export declare function startHotAppLoop(appModule: HotModule, element: HTMLElement, store: Store, widgets: Create<typeof Widget> | Create<typeof Widget>[], options?: StartAppLoopOptions): () => void;

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

@@ -8,7 +8,7 @@ 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" }) })] }) }));
+        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",
@@ -39,7 +39,7 @@ describe("ContentPlaceholder", () => {
                 headerText: "Header",
             },
         });
-        const component = createTestRenderer(store, _jsx("cx", { children: _jsxs("div", { children: [_jsx(ContentPlaceholder, { name: "header" }), _jsx("h2", { putInto: "header", text: bind("headerText") })] }) }));
+        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: {},
@@ -57,7 +57,7 @@ describe("ContentPlaceholder", () => {
     });
     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" })] })] }) }));
+        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",
@@ -89,7 +89,7 @@ describe("ContentPlaceholder", () => {
     });
     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" })] })] }) }));
+        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",
@@ -126,7 +126,7 @@ describe("ContentPlaceholder", () => {
     });
     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" })] })] }) }));
+        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",
@@ -170,7 +170,7 @@ describe("ContentPlaceholder", () => {
     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 }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("main", { outerLayout: layout }) })));
         assert.deepEqual(component.toJSON(), {
             type: "div",
             props: {},
@@ -202,7 +202,7 @@ describe("ContentPlaceholder", () => {
             },
         });
         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") })] }) }));
+        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: {},
@@ -236,7 +236,7 @@ describe("ContentPlaceholder", () => {
         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 }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) })));
         let tree = component.toJSON();
         //console.log(tree);
         assert.deepEqual(tree, {
@@ -259,7 +259,7 @@ describe("ContentPlaceholder", () => {
     });
     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" })] })] }) }));
+        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, {
@@ -272,7 +272,7 @@ describe("ContentPlaceholder", () => {
         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 }) }));
+        const component = createTestRenderer(store, (_jsx("cx", { children: _jsx("section", { outerLayout: innerLayout }) })));
         assert.deepEqual(component.toJSON(), {
             type: "div",
             props: {},
@@ -283,7 +283,7 @@ describe("ContentPlaceholder", () => {
         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" }) }) }));
+        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: {},
@@ -300,7 +300,7 @@ describe("ContentPlaceholder", () => {
         });
         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") })] }) }));
+        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: {},

package/build.js

@@ -1,129 +1,129 @@
-const buildJS = require("cx-build-tools/buildJS"),
-   buildSCSS = require("cx-build-tools/buildSCSS"),
-   getPathResolver = require("cx-build-tools/getPathResolver"),
-   fs = require("fs"),
-   resolvePath = getPathResolver(__dirname),
-   cxSrc = getPathResolver(resolvePath("./src")),
-   cxBuild = getPathResolver(resolvePath("./build"));
-
-const entries = [
-   {
-      name: "util",
-      options: {
-         input: cxBuild("util/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "data",
-
-      options: {
-         input: cxBuild("data/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "ui",
-      options: {
-         input: cxBuild("ui/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "widgets",
-      options: {
-         input: cxBuild("widgets/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "svg",
-      options: {
-         input: cxBuild("svg/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "charts",
-      options: {
-         input: cxBuild("charts/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "hooks",
-      options: {
-         input: cxBuild("hooks/index.js"),
-      },
-      output: {},
-   },
-   {
-      name: "jsx-runtime",
-      options: {
-         input: cxBuild("jsx-runtime.js"),
-      },
-      output: {},
-   },
-];
-
-const externalPaths = {
-   [cxBuild("./util/")]: "cx/util",
-   [cxBuild("./data/")]: "cx/data",
-   [cxBuild("./ui/")]: "cx/ui",
-   [cxBuild("./widgets")]: "cx/widgets",
-   [cxBuild("./charts")]: "cx/charts",
-   [cxBuild("./svg/")]: "cx/svg",
-   [cxBuild("./hooks/")]: "cx/hooks",
-   [cxBuild("./jsx-runtime")]: "cx/jsx-runtime",
-};
-
-(async function buildAll() {
-   console.log("Building cx...");
-   try {
-      let distPath = resolvePath("./dist");
-      if (!fs.existsSync(distPath)) {
-         fs.mkdirSync(distPath);
-      }
-
-      await Promise.all([
-         buildJS(resolvePath("./src"), resolvePath("./dist"), entries, externalPaths),
-         buildSCSS([resolvePath("../cx-build-tools/reset.scss")], resolvePath("./dist/reset.css")),
-         buildSCSS(
-            [
-               cxSrc("variables.scss"),
-               resolvePath("../cx-build-tools/divide.scss"),
-               cxSrc("widgets/index.scss"),
-               cxSrc("ui/index.scss"),
-            ],
-            resolvePath("./dist/widgets.css"),
-         ),
-         buildSCSS(
-            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("charts/index.scss")],
-            resolvePath("./dist/charts.css"),
-         ),
-         buildSCSS(
-            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("svg/index.scss")],
-            resolvePath("./dist/svg.css"),
-         ),
-      ]);
-   } catch (err) {
-      console.log("Build error.", err);
-   }
-
-   // console.log("Building cx-redux...");
-   // await build(
-   //    resolvePath("../../cx-redux/src"),
-   //    resolvePath("../../cx-redux/dist"),
-   //    [
-   //       {
-   //          name: "index",
-   //          options: {
-   //             input: [resolvePath("../../cx-redux/src/index.js")]
-   //          },
-   //          output: {}
-   //       }
-   //    ],
-   //    null,
-   //    ["redux", "cx/data"]
-   // );
-})();
+const buildJS = require("cx-build-tools/buildJS"),
+   buildSCSS = require("cx-build-tools/buildSCSS"),
+   getPathResolver = require("cx-build-tools/getPathResolver"),
+   fs = require("fs"),
+   resolvePath = getPathResolver(__dirname),
+   cxSrc = getPathResolver(resolvePath("./src")),
+   cxBuild = getPathResolver(resolvePath("./build"));
+
+const entries = [
+   {
+      name: "util",
+      options: {
+         input: cxBuild("util/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "data",
+
+      options: {
+         input: cxBuild("data/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "ui",
+      options: {
+         input: cxBuild("ui/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "widgets",
+      options: {
+         input: cxBuild("widgets/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "svg",
+      options: {
+         input: cxBuild("svg/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "charts",
+      options: {
+         input: cxBuild("charts/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "hooks",
+      options: {
+         input: cxBuild("hooks/index.js"),
+      },
+      output: {},
+   },
+   {
+      name: "jsx-runtime",
+      options: {
+         input: cxBuild("jsx-runtime.js"),
+      },
+      output: {},
+   },
+];
+
+const externalPaths = {
+   [cxBuild("./util/")]: "cx/util",
+   [cxBuild("./data/")]: "cx/data",
+   [cxBuild("./ui/")]: "cx/ui",
+   [cxBuild("./widgets")]: "cx/widgets",
+   [cxBuild("./charts")]: "cx/charts",
+   [cxBuild("./svg/")]: "cx/svg",
+   [cxBuild("./hooks/")]: "cx/hooks",
+   [cxBuild("./jsx-runtime")]: "cx/jsx-runtime",
+};
+
+(async function buildAll() {
+   console.log("Building cx...");
+   try {
+      let distPath = resolvePath("./dist");
+      if (!fs.existsSync(distPath)) {
+         fs.mkdirSync(distPath);
+      }
+
+      await Promise.all([
+         buildJS(resolvePath("./src"), resolvePath("./dist"), entries, externalPaths),
+         buildSCSS([resolvePath("../cx-build-tools/reset.scss")], resolvePath("./dist/reset.css")),
+         buildSCSS(
+            [
+               cxSrc("variables.scss"),
+               resolvePath("../cx-build-tools/divide.scss"),
+               cxSrc("widgets/index.scss"),
+               cxSrc("ui/index.scss"),
+            ],
+            resolvePath("./dist/widgets.css"),
+         ),
+         buildSCSS(
+            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("charts/index.scss")],
+            resolvePath("./dist/charts.css"),
+         ),
+         buildSCSS(
+            [cxSrc("variables.scss"), resolvePath("../cx-build-tools/divide.scss"), cxSrc("svg/index.scss")],
+            resolvePath("./dist/svg.css"),
+         ),
+      ]);
+   } catch (err) {
+      console.log("Build error.", err);
+   }
+
+   // console.log("Building cx-redux...");
+   // await build(
+   //    resolvePath("../../cx-redux/src"),
+   //    resolvePath("../../cx-redux/dist"),
+   //    [
+   //       {
+   //          name: "index",
+   //          options: {
+   //             input: [resolvePath("../../cx-redux/src/index.js")]
+   //          },
+   //          output: {}
+   //       }
+   //    ],
+   //    null,
+   //    ["redux", "cx/data"]
+   // );
+})();