cx 26.0.14 → 26.1.1

package/src/ui/RenderingContext.ts

@@ -1,99 +1,99 @@
-import { TraversalStack } from "../util/TraversalStack";
-import { reverseSlice } from "../util/reverseSlice";
-import { Widget } from "./Widget";
-
-export type CxChild = Record<string, any> | React.ReactElement | Widget | CxChild[] | null | undefined;
-
-export class RenderingContext {
-   options: any;
-   exploreStack: any;
-   prepareList: any[];
-   cleanupList: any[];
-   stacks: any;
-   renderList: any;
-
-   [key: string]: any;
-
-   constructor(options?: any) {
-      this.options = options || {};
-      this.exploreStack = new TraversalStack();
-      this.prepareList = [];
-      this.cleanupList = [];
-      this.stacks = {};
-      this.renderList = new LinkedListsNode();
-   }
-
-   getStack(key: string) {
-      let stack = this.stacks[key];
-      if (!stack) stack = this.stacks[key] = [];
-      return stack;
-   }
-
-   push(key: string, value: any) {
-      let stack = this.getStack(key);
-      stack.push(this[key]);
-      return (this[key] = value);
-   }
-
-   pop(key: string) {
-      let stack = this.getStack(key);
-      return (this[key] = stack.pop());
-   }
-
-   pushNamedValue(key: string, name: string, value: any) {
-      let stack = this.getStack(`${key}:${name}`);
-      if (!this[key]) this[key] = {};
-      stack.push(this[key][name]);
-      return (this[key][name] = value);
-   }
-
-   popNamedValue(key: string, name: string) {
-      let stack = this.getStack(`${key}:${name}`);
-      return (this[key][name] = stack.pop());
-   }
-
-   get(key: string) {
-      return this[key];
-   }
-
-   getRootRenderList() {
-      let rl = this.renderList;
-      while (rl.left) rl = rl.left;
-      return rl;
-   }
-}
-
-class LinkedListsNode {
-   left?: LinkedListsNode;
-   right?: LinkedListsNode;
-   data: any[];
-   reverseIndex?: number;
-
-   constructor(left?: LinkedListsNode, right?: LinkedListsNode) {
-      this.left = left;
-      this.right = right;
-      this.data = [];
-   }
-
-   insertLeft() {
-      let node = new LinkedListsNode(this.left, this);
-      if (this.left) this.left.right = node;
-      this.left = node;
-      return node;
-   }
-
-   insertRight() {
-      let node = new LinkedListsNode(this, this.right);
-      if (this.right) this.right.left = node;
-      this.right = node;
-      return node;
-   }
-
-   markReverseIndex() {
-      this.reverseIndex = this.data.length;
-   }
-
-   reverse() {
-      reverseSlice(this.data, this.reverseIndex!);
-   }
-}
+import { TraversalStack } from "../util/TraversalStack";
+import { reverseSlice } from "../util/reverseSlice";
+import { Widget } from "./Widget";
+
+export type CxChild = Record<string, any> | React.ReactElement | Widget | CxChild[] | null | undefined;
+
+export class RenderingContext {
+   options: any;
+   exploreStack: any;
+   prepareList: any[];
+   cleanupList: any[];
+   stacks: any;
+   renderList: any;
+
+   [key: string]: any;
+
+   constructor(options?: any) {
+      this.options = options || {};
+      this.exploreStack = new TraversalStack();
+      this.prepareList = [];
+      this.cleanupList = [];
+      this.stacks = {};
+      this.renderList = new LinkedListsNode();
+   }
+
+   getStack(key: string) {
+      let stack = this.stacks[key];
+      if (!stack) stack = this.stacks[key] = [];
+      return stack;
+   }
+
+   push(key: string, value: any) {
+      let stack = this.getStack(key);
+      stack.push(this[key]);
+      return (this[key] = value);
+   }
+
+   pop(key: string) {
+      let stack = this.getStack(key);
+      return (this[key] = stack.pop());
+   }
+
+   pushNamedValue(key: string, name: string, value: any) {
+      let stack = this.getStack(`${key}:${name}`);
+      if (!this[key]) this[key] = {};
+      stack.push(this[key][name]);
+      return (this[key][name] = value);
+   }
+
+   popNamedValue(key: string, name: string) {
+      let stack = this.getStack(`${key}:${name}`);
+      return (this[key][name] = stack.pop());
+   }
+
+   get(key: string) {
+      return this[key];
+   }
+
+   getRootRenderList() {
+      let rl = this.renderList;
+      while (rl.left) rl = rl.left;
+      return rl;
+   }
+}
+
+class LinkedListsNode {
+   left?: LinkedListsNode;
+   right?: LinkedListsNode;
+   data: any[];
+   reverseIndex?: number;
+
+   constructor(left?: LinkedListsNode, right?: LinkedListsNode) {
+      this.left = left;
+      this.right = right;
+      this.data = [];
+   }
+
+   insertLeft() {
+      let node = new LinkedListsNode(this.left, this);
+      if (this.left) this.left.right = node;
+      this.left = node;
+      return node;
+   }
+
+   insertRight() {
+      let node = new LinkedListsNode(this, this.right);
+      if (this.right) this.right.left = node;
+      this.right = node;
+      return node;
+   }
+
+   markReverseIndex() {
+      this.reverseIndex = this.data.length;
+   }
+
+   reverse() {
+      reverseSlice(this.data, this.reverseIndex!);
+   }
+}

package/src/ui/Repeater.spec.tsx

@@ -1,12 +1,12 @@
 import { Store } from "../data/Store";
 import { Repeater } from "./Repeater";
 import { bind } from "./bind";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
 
 import assert from "assert";
 
 describe("Repeater", () => {
-   it("allows sorting", () => {
+   it("allows sorting", async () => {
       let data = [
          {
             value: "C",
@@ -31,7 +31,7 @@ describe("Repeater", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -57,7 +57,7 @@ describe("Repeater", () => {
       });
    });
 
-   it("changes are properly updated", () => {
+   it("changes are properly updated", async () => {
       let divInstances: any[] = [];
       let widget = (
          <cx>
@@ -87,7 +87,7 @@ describe("Repeater", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -109,7 +109,9 @@ describe("Repeater", () => {
 
       divInstances = [];
 
-      store.update("data", (data) => [{ value: "A" }, ...data]);
+      await act(async () => {
+         store.update("data", (data) => [{ value: "A" }, ...data]);
+      });
 
       assert.deepEqual(component.toJSON(), {
          type: "div",

package/src/ui/Rescope.spec.tsx

@@ -8,7 +8,7 @@ import assert from "assert";
 import { PureContainer } from "./PureContainer";
 
 describe("Rescope", () => {
-   it("allows simple access to nested data", () => {
+   it("allows simple access to nested data", async () => {
       let store = new Store({
          data: {
             $page: {
@@ -27,7 +27,7 @@ describe("Rescope", () => {
          </cx>
       );
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -37,7 +37,7 @@ describe("Rescope", () => {
       });
    });
 
-   it("allows parent access through $root", () => {
+   it("allows parent access through $root", async () => {
       let store = new Store({
          data: {
             layout: {
@@ -59,7 +59,7 @@ describe("Rescope", () => {
          </cx>
       );
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -69,7 +69,7 @@ describe("Rescope", () => {
       });
    });
 
-   it("allows nested data access through data", () => {
+   it("allows nested data access through data", async () => {
       let store = new Store({
          data: {
             layout: {
@@ -86,7 +86,7 @@ describe("Rescope", () => {
          </cx>
       );
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -96,7 +96,7 @@ describe("Rescope", () => {
       });
    });
 
-   it("nested data mutations are correctly propagated to the parent store", () => {
+   it("nested data mutations are correctly propagated to the parent store", async () => {
       let store = new Store({
          data: {
             item: {
@@ -108,7 +108,7 @@ describe("Rescope", () => {
       let widget = (
          <cx>
             <Rescope bind="$page" data={{ $value: { bind: "item.value" } }}>
-               <PureContainer               
+               <PureContainer
                   controller={{
                      onInit() {
                         this.store.set("$value", 2);
@@ -120,7 +120,7 @@ describe("Rescope", () => {
          </cx>
       );
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -130,7 +130,7 @@ describe("Rescope", () => {
       });
    });
 
-   it("visible is calculated based on the inner scope", () => {
+   it("visible is calculated based on the inner scope", async () => {
       let store = new Store({
          data: {
             layout: {
@@ -153,7 +153,7 @@ describe("Rescope", () => {
          </cx>
       );
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -163,7 +163,7 @@ describe("Rescope", () => {
       });
    });
 
-   it("controllers see inner scope", () => {
+   it("controllers see inner scope", async () => {
       let store = new Store({
          data: {
             $page: {
@@ -191,7 +191,7 @@ describe("Rescope", () => {
          </cx>
       );
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       component.toJSON();
       assert.equal(testName, "John");

package/src/ui/Restate.spec.tsx

@@ -1,13 +1,13 @@
 import { Restate } from "./Restate";
 import { Store } from "../data/Store";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
 import assert from "assert";
 import { Controller } from "./Controller";
 import { bind } from "./bind";
 import { FirstVisibleChildLayout } from "./layout/FirstVisibleChildLayout";
 
 describe("Restate", () => {
-   it("provides a blank slate", () => {
+   it("provides a blank slate", async () => {
       let widget = (
          <cx>
             <div>
@@ -30,7 +30,7 @@ describe("Restate", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -51,7 +51,7 @@ describe("Restate", () => {
       });
    });
 
-   it("wires declared data", () => {
+   it("wires declared data", async () => {
       let widget = (
          <cx>
             <div>
@@ -80,7 +80,7 @@ describe("Restate", () => {
          changed = true;
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
 
@@ -89,7 +89,7 @@ describe("Restate", () => {
       assert(changed);
    });
 
-   it("causes a global update if internal data changes", () => {
+   it("causes a global update if internal data changes", async () => {
       let controller: TestController | undefined;
 
       class TestController extends Controller {
@@ -122,7 +122,7 @@ describe("Restate", () => {
          changed = true;
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -137,7 +137,9 @@ describe("Restate", () => {
          ],
       });
 
-      controller!.setNickname("Sale");
+      await act(async () => {
+         controller!.setNickname("Sale");
+      });
 
       let tree2 = component.toJSON();
       assert.deepEqual(tree2, {
@@ -153,7 +155,7 @@ describe("Restate", () => {
       });
    });
 
-   it("doesn't notify parent if not necessary in detached mode", () => {
+   it("doesn't notify parent if not necessary in detached mode", async () => {
       class TestController extends Controller {
          onInit() {
             this.store.init("nickname", "Sale");
@@ -181,13 +183,13 @@ describe("Restate", () => {
          changed = true;
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(!changed);
    });
 
-   it("shared state can be used across components inside and outside Restate", () => {
+   it("shared state can be used across components inside and outside Restate", async () => {
       let widget = (
          <cx>
             <div>
@@ -213,7 +215,7 @@ describe("Restate", () => {
          //console.log(store.getData());
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(store.getData(), {
@@ -226,8 +228,8 @@ describe("Restate", () => {
       });
    });
 
-   it("updates if shared state is changed from outside", () => {
-      [true, false].forEach((detached) => {
+   it("updates if shared state is changed from outside", async () => {
+      for (const detached of [true, false]) {
          let widget = (
             <cx>
                <div>
@@ -246,7 +248,7 @@ describe("Restate", () => {
 
          let store = new Store();
 
-         const component = createTestRenderer(store, widget);
+         const component = await createTestRenderer(store, widget);
 
          let tree = component.toJSON();
          assert.deepEqual(tree, {
@@ -265,7 +267,9 @@ describe("Restate", () => {
                },
             ],
          });
-         store.set("person.firstName", "Jack");
+         await act(async () => {
+            store.set("person.firstName", "Jack");
+         });
 
          tree = component.toJSON();
          assert.deepEqual(tree, {
@@ -284,11 +288,11 @@ describe("Restate", () => {
                },
             ],
          });
-      });
+      }
    });
 
-   it("allows field initialization in data declaration", () => {
-      [true, false].forEach((detached) => {
+   it("allows field initialization in data declaration", async () => {
+      for (const detached of [true, false]) {
          let widget = (
             <cx>
                <div>
@@ -306,7 +310,7 @@ describe("Restate", () => {
 
          let store = new Store();
 
-         const component = createTestRenderer(store, widget);
+         const component = await createTestRenderer(store, widget);
 
          let tree = component.toJSON();
          assert.deepEqual(tree, {
@@ -320,10 +324,10 @@ describe("Restate", () => {
                },
             ],
          });
-      });
+      }
    });
 
-   it("updates if internal data changes", () => {
+   it("updates if internal data changes", async () => {
       class TestController extends Controller {
          onInit() {
             this.store.init("nickname", "Sale");
@@ -348,7 +352,7 @@ describe("Restate", () => {
          changed = true;
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -364,7 +368,7 @@ describe("Restate", () => {
       });
    });
 
-   it("works with FirstVisibleChildLayout", () => {
+   it("works with FirstVisibleChildLayout", async () => {
       let widget = (
          <cx>
             <div>
@@ -380,7 +384,7 @@ describe("Restate", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -390,7 +394,7 @@ describe("Restate", () => {
       });
    });
 
-   it("is transparent to FirstVisibleChildLayout", () => {
+   it("is transparent to FirstVisibleChildLayout", async () => {
       let widget = (
          <cx>
             <div>
@@ -406,7 +410,7 @@ describe("Restate", () => {
 
       let store = new Store();
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {

package/src/ui/StructuredInstanceDataAccessor.ts

@@ -1,32 +1,32 @@
-import { getSelector } from "../data/getSelector";
-import { StructuredDataAccessor } from "../data/NestedDataView";
-
-export class StructuredInstanceDataAccessor implements StructuredDataAccessor {
-   instance: any;
-   dataConfig: any;
-   useParentStore: any;
-   dataSelector: any;
-
-   constructor(config: any) {
-      this.instance = config.instance;
-      this.dataConfig = config.data;
-      this.useParentStore = config.useParentStore;
-      this.dataSelector = getSelector(config.data);
-      if (this.dataSelector.memoize) this.dataSelector = this.dataSelector.memoize();
-   }
-   getSelector() {
-      return this.dataSelector;
-   }
-   get() {
-      return this.dataSelector.get(this.instance.store.getData());
-   }
-   setItem(key: string, value: any): boolean {
-      return this.instance.nestedDataSet(key, value, this.dataConfig, this.useParentStore);
-   }
-   containsKey(key: string) {
-      return this.dataConfig.hasOwnProperty(key);
-   }
-   getKeys() {
-      return Object.keys(this.dataConfig);
-   }
-}
+import { getSelector } from "../data/getSelector";
+import { StructuredDataAccessor } from "../data/NestedDataView";
+
+export class StructuredInstanceDataAccessor implements StructuredDataAccessor {
+   instance: any;
+   dataConfig: any;
+   useParentStore: any;
+   dataSelector: any;
+
+   constructor(config: any) {
+      this.instance = config.instance;
+      this.dataConfig = config.data;
+      this.useParentStore = config.useParentStore;
+      this.dataSelector = getSelector(config.data);
+      if (this.dataSelector.memoize) this.dataSelector = this.dataSelector.memoize();
+   }
+   getSelector() {
+      return this.dataSelector;
+   }
+   get() {
+      return this.dataSelector.get(this.instance.store.getData());
+   }
+   setItem(key: string, value: any): boolean {
+      return this.instance.nestedDataSet(key, value, this.dataConfig, this.useParentStore);
+   }
+   containsKey(key: string) {
+      return this.dataConfig.hasOwnProperty(key);
+   }
+   getKeys() {
+      return Object.keys(this.dataConfig);
+   }
+}

package/src/ui/VDOM.ts

@@ -1,34 +1 @@
-// @ts-expect-error
-import { VDOM as vdom } from "cx-react";
-
-import type * as React from "react";
-import type { Component } from "react";
-import type {
-   unstable_batchedUpdates,
-   render,
-   findDOMNode,
-   createPortal,
-   unstable_renderSubtreeIntoContainer,
-   hydrate,
-   unmountComponentAtNode,
-} from "react-dom";
-import type { createRoot, hydrateRoot, Root } from "react-dom/client";
-
-export interface VDOMType extends Omit<typeof React, "default"> {
-   allowRenderOutputCaching?: boolean;
-   Component: typeof Component;
-
-   DOM: {
-      unstable_batchedUpdates: typeof unstable_batchedUpdates;
-      render: typeof render;
-      findDOMNode: typeof findDOMNode;
-      createPortal: typeof createPortal;
-      createRoot: typeof createRoot;
-      hydrateRoot: typeof hydrateRoot;
-      hydrate: typeof hydrate;
-      unmountComponentAtNode: typeof unmountComponentAtNode;
-      unstable_renderSubtreeIntoContainer: typeof unstable_renderSubtreeIntoContainer;
-   };
-}
-
-export const VDOM = vdom as VDOMType;
+export { VDOM } from "cx-react";

package/src/ui/Widget.tsx

@@ -152,13 +152,6 @@ export abstract class Widget<
       if (this.styles) this.style = this.styles;
 
       if (this.styled) this.style = parseStyle(this.style);
-      else if (this.style) {
-         Console.warn(
-            "Components that allow use of the style attribute should set styled = true on their prototype. This will be an error in future versions.",
-         );
-         this.style = parseStyle(this.style);
-         this.styled = true;
-      }
 
       if (typeof this.if !== "undefined") this.visible = this.if;