cx 26.1.0 → 26.1.2

package/src/ui/layout/ContentPlaceholder.ts

@@ -1,133 +1,133 @@
-import { isNonEmptyArray } from "../../util/isNonEmptyArray";
-import { isString } from "../../util/isString";
-import { PureContainerBase, PureContainerConfig } from "../PureContainer";
-import { RenderingContext } from "../RenderingContext";
-import { Widget } from "../Widget";
-import { StringProp } from "../Prop";
-import { Instance } from "../Instance";
-
-export interface ContentPlaceholderConfig extends PureContainerConfig {
-   /** Name of the placeholder. Default is `body`. */
-   name?: StringProp;
-
-   /** Set to `true` to scope the placeholder to a local context. */
-   scoped?: boolean;
-
-   /** Set to `true` to allow all registered content elements to render inside the placeholder. Otherwise only one element is rendered. */
-   allowMultiple?: boolean;
-}
-
-export class ContentPlaceholderInstance extends Instance<ContentPlaceholder> {
-   declare content?: any;
-   unregisterContentPlaceholder?: () => void;
-}
-
-export class ContentPlaceholder extends PureContainerBase<ContentPlaceholderConfig, ContentPlaceholderInstance> {
-   declare name?: string;
-   declare scoped?: boolean;
-   declare allowMultiple?: boolean;
-
-   declareData(...args: any[]): void {
-      super.declareData(...args, {
-         name: undefined,
-      });
-   }
-
-   explore(context: RenderingContext, instance: ContentPlaceholderInstance): void {
-      instance.content = null;
-      let { data } = instance;
-
-      if (this.allowMultiple) {
-         const contentList = (context as any).contentList && (context as any).contentList[data.name];
-         if (isNonEmptyArray(contentList) && !this.scoped)
-            for (let i = 0; i < contentList.length; i++) this.setContent(context, instance, contentList[i]);
-
-         // in multi mode register a callback to allow for more entries to be added
-         (context as any).pushNamedValue("contentPlaceholder", data.name, (content: any) => {
-            this.setContent(context, instance, content);
-         });
-      } else {
-         const content = (context as any).content && (context as any).content[data.name];
-         if (content && !this.scoped) this.setContent(context, instance, content);
-         else
-            (context as any).pushNamedValue("contentPlaceholder", data.name, (content: any) => {
-               this.setContent(context, instance, content);
-            });
-      }
-
-      if (this.scoped)
-         instance.unregisterContentPlaceholder = () => {
-            (context as any).popNamedValue("contentPlaceholder", data.name);
-         };
-
-      super.explore(context, instance);
-   }
-
-   prepare(context: RenderingContext, instance: ContentPlaceholderInstance): void {
-      let { content } = instance;
-      if (this.allowMultiple) {
-         let contentId = "";
-         let shouldUpdate = false;
-         if (content) {
-            for (let i = 0; i < content.length; i++) {
-               let c = content[i];
-               contentId += c.id + "+";
-               shouldUpdate = shouldUpdate || c.shouldUpdate;
-            }
-         }
-         if (instance.cache("content", contentId) || shouldUpdate) instance.markShouldUpdate(context);
-      } else if (instance.cache("content", content) || (content && content.shouldUpdate))
-         instance.markShouldUpdate(context);
-   }
-
-   setContent(context: RenderingContext, instance: ContentPlaceholderInstance, content: any): void {
-      if (this.allowMultiple) {
-         if (instance.content == null) instance.content = [];
-         instance.content.push(content);
-      } else instance.content = content;
-      content.contentPlaceholder = instance;
-   }
-
-   render(context: RenderingContext, instance: ContentPlaceholderInstance, key: any): any {
-      const { content } = instance;
-      if (!content) return super.render(context, instance, key);
-      if (this.allowMultiple) return content.map((x: any) => x.contentVDOM);
-      return content.contentVDOM;
-   }
-}
-
-ContentPlaceholder.prototype.name = "body";
-ContentPlaceholder.prototype.scoped = false;
-ContentPlaceholder.prototype.allowMultiple = false;
-
-Widget.alias("content-placeholder", ContentPlaceholder);
-
-export interface ContentPlaceholderScopeConfig extends PureContainerConfig {
-   name: string | string[];
-}
-
-export class ContentPlaceholderScope extends PureContainerBase<ContentPlaceholderScopeConfig> {
-   declare name: string[];
-
-   init(): void {
-      super.init();
-      if (isString(this.name)) this.name = [this.name];
-   }
-
-   explore(context: RenderingContext, instance: any): void {
-      this.name.forEach((name) => {
-         context.pushNamedValue("contentPlaceholder", name, null);
-         context.pushNamedValue("content", name, null);
-         context.pushNamedValue("contentList", name, []);
-      });
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: RenderingContext, instance: any): void {
-      this.name.forEach((name) => {
-         context.popNamedValue("contentPlaceholder", name);
-         context.popNamedValue("content", name);
-         context.popNamedValue("contentList", name);
-      });
-   }
-}
+import { isNonEmptyArray } from "../../util/isNonEmptyArray";
+import { isString } from "../../util/isString";
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+import { Widget } from "../Widget";
+import { StringProp } from "../Prop";
+import { Instance } from "../Instance";
+
+export interface ContentPlaceholderConfig extends PureContainerConfig {
+   /** Name of the placeholder. Default is `body`. */
+   name?: StringProp;
+
+   /** Set to `true` to scope the placeholder to a local context. */
+   scoped?: boolean;
+
+   /** Set to `true` to allow all registered content elements to render inside the placeholder. Otherwise only one element is rendered. */
+   allowMultiple?: boolean;
+}
+
+export class ContentPlaceholderInstance extends Instance<ContentPlaceholder> {
+   declare content?: any;
+   unregisterContentPlaceholder?: () => void;
+}
+
+export class ContentPlaceholder extends PureContainerBase<ContentPlaceholderConfig, ContentPlaceholderInstance> {
+   declare name?: string;
+   declare scoped?: boolean;
+   declare allowMultiple?: boolean;
+
+   declareData(...args: any[]): void {
+      super.declareData(...args, {
+         name: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: ContentPlaceholderInstance): void {
+      instance.content = null;
+      let { data } = instance;
+
+      if (this.allowMultiple) {
+         const contentList = (context as any).contentList && (context as any).contentList[data.name];
+         if (isNonEmptyArray(contentList) && !this.scoped)
+            for (let i = 0; i < contentList.length; i++) this.setContent(context, instance, contentList[i]);
+
+         // in multi mode register a callback to allow for more entries to be added
+         (context as any).pushNamedValue("contentPlaceholder", data.name, (content: any) => {
+            this.setContent(context, instance, content);
+         });
+      } else {
+         const content = (context as any).content && (context as any).content[data.name];
+         if (content && !this.scoped) this.setContent(context, instance, content);
+         else
+            (context as any).pushNamedValue("contentPlaceholder", data.name, (content: any) => {
+               this.setContent(context, instance, content);
+            });
+      }
+
+      if (this.scoped)
+         instance.unregisterContentPlaceholder = () => {
+            (context as any).popNamedValue("contentPlaceholder", data.name);
+         };
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: RenderingContext, instance: ContentPlaceholderInstance): void {
+      let { content } = instance;
+      if (this.allowMultiple) {
+         let contentId = "";
+         let shouldUpdate = false;
+         if (content) {
+            for (let i = 0; i < content.length; i++) {
+               let c = content[i];
+               contentId += c.id + "+";
+               shouldUpdate = shouldUpdate || c.shouldUpdate;
+            }
+         }
+         if (instance.cache("content", contentId) || shouldUpdate) instance.markShouldUpdate(context);
+      } else if (instance.cache("content", content) || (content && content.shouldUpdate))
+         instance.markShouldUpdate(context);
+   }
+
+   setContent(context: RenderingContext, instance: ContentPlaceholderInstance, content: any): void {
+      if (this.allowMultiple) {
+         if (instance.content == null) instance.content = [];
+         instance.content.push(content);
+      } else instance.content = content;
+      content.contentPlaceholder = instance;
+   }
+
+   render(context: RenderingContext, instance: ContentPlaceholderInstance, key: any): any {
+      const { content } = instance;
+      if (!content) return super.render(context, instance, key);
+      if (this.allowMultiple) return content.map((x: any) => x.contentVDOM);
+      return content.contentVDOM;
+   }
+}
+
+ContentPlaceholder.prototype.name = "body";
+ContentPlaceholder.prototype.scoped = false;
+ContentPlaceholder.prototype.allowMultiple = false;
+
+Widget.alias("content-placeholder", ContentPlaceholder);
+
+export interface ContentPlaceholderScopeConfig extends PureContainerConfig {
+   name: string | string[];
+}
+
+export class ContentPlaceholderScope extends PureContainerBase<ContentPlaceholderScopeConfig> {
+   declare name: string[];
+
+   init(): void {
+      super.init();
+      if (isString(this.name)) this.name = [this.name];
+   }
+
+   explore(context: RenderingContext, instance: any): void {
+      this.name.forEach((name) => {
+         context.pushNamedValue("contentPlaceholder", name, null);
+         context.pushNamedValue("content", name, null);
+         context.pushNamedValue("contentList", name, []);
+      });
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      this.name.forEach((name) => {
+         context.popNamedValue("contentPlaceholder", name);
+         context.popNamedValue("content", name);
+         context.popNamedValue("contentList", name);
+      });
+   }
+}

package/src/ui/layout/FirstVisibleChildLayout.spec.tsx

@@ -1,195 +1,207 @@
-import { Store } from "../../data/Store";
-import { expr } from "../expr";
-import { createTestRenderer } from "../../util/test/createTestRenderer";
-
-import assert from "assert";
-import { FirstVisibleChildLayout } from "./FirstVisibleChildLayout";
-import { UseParentLayout } from "./UseParentLayout";
-import { PureContainer } from "../PureContainer";
-import { createFunctionalComponent } from "../createFunctionalComponent";
-
-describe("FirstVisibleChildLayout", () => {
-   it("renders only the first child", () => {
-      let widget = (
-         <cx>
-            <div layout={FirstVisibleChildLayout}>
-               <header></header>
-               <main></main>
-               <footer></footer>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [{ type: "header", props: {}, children: null }],
-      });
-   });
-
-   it("does not process other widgets", () => {
-      let h = false,
-         m = false,
-         f = false;
-
-      let widget = (
-         <cx>
-            <div layout={FirstVisibleChildLayout}>
-               <header
-                  onInit={() => {
-                     h = true;
-                  }}
-               />
-               <main
-                  onInit={() => {
-                     m = true;
-                  }}
-               />
-               <footer
-                  onInit={() => {
-                     f = true;
-                  }}
-               />
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [{ type: "header", props: {}, children: null }],
-      });
-
-      assert.equal(h, true);
-      assert.equal(m, false);
-      assert.equal(f, false);
-   });
-
-   it("skips the first child if not visible", () => {
-      let widget = (
-         <cx>
-            <div layout={FirstVisibleChildLayout}>
-               <header visible={false}></header>
-               <main></main>
-               <footer></footer>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [{ type: "main", props: {}, children: null }],
-      });
-   });
-
-   it("skips pure containers which use parent layouts", () => {
-      let widget = (
-         <cx>
-            <div layout={FirstVisibleChildLayout}>
-               <PureContainer layout={UseParentLayout}>
-                  <header visible={false}></header>
-               </PureContainer>
-               <main></main>
-               <footer></footer>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [{ type: "main", props: {}, children: null }],
-      });
-   });
-
-   it("works with functional components", () => {
-      let FC = createFunctionalComponent(({ children }: { children?: any }) => <cx>{children}</cx>);
-
-      let widget = (
-         <cx>
-            <div layout={FirstVisibleChildLayout}>
-               <FC>
-                  <header visible={false}></header>
-               </FC>
-               <main></main>
-               <footer></footer>
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = createTestRenderer(store, widget);
-
-      let tree = component.toJSON();
-      assert.deepEqual(tree, {
-         type: "div",
-         props: {},
-         children: [{ type: "main", props: {}, children: null }],
-      });
-   });
-
-   it("properly destroys invisible items", () => {
-      let destroyList: number[] = [];
-      let widget = (
-         <cx>
-            <div layout={FirstVisibleChildLayout}>
-               <div visible={expr("{index} == 0")} onDestroy={() => destroyList.push(0)} />
-               <div visible={expr("{index} == 1")} onDestroy={() => destroyList.push(1)} />
-               <div visible={expr("{index} == 2")} onDestroy={() => destroyList.push(2)} />
-               <div visible={expr("{index} == 3")} onDestroy={() => destroyList.push(3)} />
-               <div visible={expr("{index} == 4")} onDestroy={() => destroyList.push(4)} />
-            </div>
-         </cx>
-      );
-
-      let store = new Store();
-
-      const component = createTestRenderer(store, widget);
-
-      store.set("index", 0);
-      component.toJSON();
-      assert.deepEqual(destroyList, []);
-
-      store.set("index", 3);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0]);
-
-      store.set("index", 1);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0, 3]);
-
-      store.set("index", 4);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0, 3, 1]);
-
-      store.set("index", 0);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0, 3, 1, 4]);
-
-      store.set("index", -1);
-      component.toJSON();
-      assert.deepEqual(destroyList, [0, 3, 1, 4, 0]);
-   });
-});
+import { Store } from "../../data/Store";
+import { expr } from "../expr";
+import { createTestRenderer, act } from "../../util/test/createTestRenderer";
+
+import assert from "assert";
+import { FirstVisibleChildLayout } from "./FirstVisibleChildLayout";
+import { UseParentLayout } from "./UseParentLayout";
+import { PureContainer } from "../PureContainer";
+import { createFunctionalComponent } from "../createFunctionalComponent";
+
+describe("FirstVisibleChildLayout", () => {
+   it("renders only the first child", async () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header></header>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "header", props: {}, children: null }],
+      });
+   });
+
+   it("does not process other widgets", async () => {
+      let h = false,
+         m = false,
+         f = false;
+
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header
+                  onInit={() => {
+                     h = true;
+                  }}
+               />
+               <main
+                  onInit={() => {
+                     m = true;
+                  }}
+               />
+               <footer
+                  onInit={() => {
+                     f = true;
+                  }}
+               />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "header", props: {}, children: null }],
+      });
+
+      assert.equal(h, true);
+      assert.equal(m, false);
+      assert.equal(f, false);
+   });
+
+   it("skips the first child if not visible", async () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <header visible={false}></header>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("skips pure containers which use parent layouts", async () => {
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <PureContainer layout={UseParentLayout}>
+                  <header visible={false}></header>
+               </PureContainer>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("works with functional components", async () => {
+      let FC = createFunctionalComponent(({ children }: { children?: any }) => <cx>{children}</cx>);
+
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <FC>
+                  <header visible={false}></header>
+               </FC>
+               <main></main>
+               <footer></footer>
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [{ type: "main", props: {}, children: null }],
+      });
+   });
+
+   it("properly destroys invisible items", async () => {
+      let destroyList: number[] = [];
+      let widget = (
+         <cx>
+            <div layout={FirstVisibleChildLayout}>
+               <div visible={expr("{index} == 0")} onDestroy={() => destroyList.push(0)} />
+               <div visible={expr("{index} == 1")} onDestroy={() => destroyList.push(1)} />
+               <div visible={expr("{index} == 2")} onDestroy={() => destroyList.push(2)} />
+               <div visible={expr("{index} == 3")} onDestroy={() => destroyList.push(3)} />
+               <div visible={expr("{index} == 4")} onDestroy={() => destroyList.push(4)} />
+            </div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = await createTestRenderer(store, widget);
+
+      await act(async () => {
+         store.set("index", 0);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, []);
+
+      await act(async () => {
+         store.set("index", 3);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0]);
+
+      await act(async () => {
+         store.set("index", 1);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3]);
+
+      await act(async () => {
+         store.set("index", 4);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1]);
+
+      await act(async () => {
+         store.set("index", 0);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1, 4]);
+
+      await act(async () => {
+         store.set("index", -1);
+      });
+      component.toJSON();
+      assert.deepEqual(destroyList, [0, 3, 1, 4, 0]);
+   });
+});