cx 26.1.0 → 26.1.1

package/src/ui/PureContainer.spec.tsx

@@ -1,11 +1,11 @@
 import { Store } from "../data/Store";
 import assert from "assert";
-import { createTestRenderer } from "../util/test/createTestRenderer";
+import { createTestRenderer, act } from "../util/test/createTestRenderer";
 import { bind } from "./bind";
 import { PureContainer } from "./PureContainer";
 
 describe("PureContainer", () => {
-   it("renders static text children", () => {
+   it("renders static text children", async () => {
       let widget = (
          <cx>
             <PureContainer>
@@ -15,7 +15,7 @@ describe("PureContainer", () => {
       );
 
       let store = new Store();
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
@@ -26,7 +26,7 @@ describe("PureContainer", () => {
       });
    });
 
-   it("renders multiple children", () => {
+   it("renders multiple children", async () => {
       let widget = (
          <cx>
             <PureContainer>
@@ -38,7 +38,7 @@ describe("PureContainer", () => {
       );
 
       let store = new Store();
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(Array.isArray(tree), "Expected array of elements");
@@ -62,7 +62,7 @@ describe("PureContainer", () => {
       ]);
    });
 
-   it("renders children with data bindings", () => {
+   it("renders children with data bindings", async () => {
       let widget = (
          <cx>
             <PureContainer>
@@ -77,7 +77,7 @@ describe("PureContainer", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
@@ -88,7 +88,7 @@ describe("PureContainer", () => {
       });
    });
 
-   it("renders nested containers", () => {
+   it("renders nested containers", async () => {
       let widget = (
          <cx>
             <PureContainer>
@@ -102,7 +102,7 @@ describe("PureContainer", () => {
       );
 
       let store = new Store();
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
@@ -119,7 +119,7 @@ describe("PureContainer", () => {
       });
    });
 
-   it("conditionally renders children based on visible binding", () => {
+   it("conditionally renders children based on visible binding", async () => {
       let widget = (
          <cx>
             <PureContainer>
@@ -135,7 +135,7 @@ describe("PureContainer", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
@@ -146,7 +146,7 @@ describe("PureContainer", () => {
       });
    });
 
-   it("handles empty children", () => {
+   it("handles empty children", async () => {
       let widget = (
          <cx>
             <PureContainer>
@@ -156,7 +156,7 @@ describe("PureContainer", () => {
       );
 
       let store = new Store();
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
@@ -167,7 +167,7 @@ describe("PureContainer", () => {
       });
    });
 
-   it("renders children from items property", () => {
+   it("renders children from items property", async () => {
       let widget = (
          <cx>
             <PureContainer items={[<div key="1">Item 1</div>, <div key="2">Item 2</div>]} />
@@ -175,7 +175,7 @@ describe("PureContainer", () => {
       );
 
       let store = new Store();
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(Array.isArray(tree), "Expected array of elements");
@@ -192,7 +192,7 @@ describe("PureContainer", () => {
       });
    });
 
-   it("updates children when store data changes", () => {
+   it("updates children when store data changes", async () => {
       let widget = (
          <cx>
             <PureContainer>
@@ -207,7 +207,7 @@ describe("PureContainer", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert.deepEqual(tree, {
@@ -217,7 +217,9 @@ describe("PureContainer", () => {
       });
 
       // Update the store
-      store.set("count", 5);
+      await act(async () => {
+         store.set("count", 5);
+      });
 
       // Re-render
       tree = component.toJSON();

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/Rescope.ts

@@ -1,49 +1,49 @@
-import { Widget } from "./Widget";
-import { PureContainerBase, PureContainerConfig } from "./PureContainer";
-import { Binding } from "../data/Binding";
-import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
-import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
-import { isObject } from "../util/isObject";
-import { StructuredProp } from "./Prop";
-
-export interface RescopeConfig extends PureContainerConfig {
-   bind: string;
-   rootName?: string;
-   rootAlias?: string;
-   data?: StructuredProp;
-}
-
-export class Rescope extends PureContainerBase<RescopeConfig> {
-   declare bind: string;
-   declare binding: any;
-   declare rootAlias?: string;
-   declare rootName: string;
-   declare data?: any;
-
-   init() {
-      this.binding = Binding.get(this.bind);
-      if (this.rootAlias) this.rootName = this.rootAlias;
-      super.init();
-   }
-
-   initInstance(context: any, instance: any) {
-      instance.store = new ZoomIntoPropertyView({
-         store: instance.parentStore,
-         binding: this.binding,
-         rootName: this.rootName,
-         nestedData: isObject(this.data)
-            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
-            : undefined,
-      });
-      super.initInstance(context, instance);
-   }
-
-   applyParentStore(instance: any) {
-      instance.store.setStore(instance.parentStore);
-   }
-}
-
-Rescope.prototype.bind = "$page";
-Rescope.prototype.rootName = "$root";
-
-Widget.alias("rescope", Rescope);
+import { Widget } from "./Widget";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Binding } from "../data/Binding";
+import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { isObject } from "../util/isObject";
+import { StructuredProp } from "./Prop";
+
+export interface RescopeConfig extends PureContainerConfig {
+   bind: string;
+   rootName?: string;
+   rootAlias?: string;
+   data?: StructuredProp;
+}
+
+export class Rescope extends PureContainerBase<RescopeConfig> {
+   declare bind: string;
+   declare binding: any;
+   declare rootAlias?: string;
+   declare rootName: string;
+   declare data?: any;
+
+   init() {
+      this.binding = Binding.get(this.bind);
+      if (this.rootAlias) this.rootName = this.rootAlias;
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new ZoomIntoPropertyView({
+         store: instance.parentStore,
+         binding: this.binding,
+         rootName: this.rootName,
+         nestedData: isObject(this.data)
+            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
+            : undefined,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+Rescope.prototype.bind = "$page";
+Rescope.prototype.rootName = "$root";
+
+Widget.alias("rescope", Rescope);

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/VDOM.ts

@@ -1 +1 @@
-export { VDOM } from "cx-react";
+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;