cx 26.0.14 → 26.1.1

package/src/util/DOM.ts

@@ -1,88 +1,88 @@
-import { isNumber } from "../util/isNumber";
-
-type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
-
-/**
- * Returns first child element, or the parent element itself, that satisfies the `condition` function.
- * @param el
- * @param condition
- * @returns {Element}
- */
-export function findFirst<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
-export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null;
-export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null {
-   if (condition(el)) return el;
-
-   var children = el.children;
-   if (children)
-      for (var i = 0; i < children.length; i++) {
-         var child = findFirst(children[i], condition);
-         if (child) return child;
-      }
-   return null;
-}
-
-export function findFirstChild<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
-export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null;
-export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null {
-   var children = el.children;
-   if (children)
-      for (var i = 0; i < children.length; i++) {
-         var child = findFirst(children[i], condition);
-         if (child) return child;
-      }
-   return null;
-}
-
-export function closest(el: HTMLElement | null, condition: (el: HTMLElement) => boolean): HTMLElement | null;
-export function closest(el: Element | null, condition: (el: Element) => boolean): Element | null;
-export function closest(el: Element | null, condition: (el: any) => boolean): Element | null {
-   while (el) {
-      if (condition(el)) return el;
-      el = el.parentElement;
-   }
-   return null;
-}
-
-export function closestParent(el: HTMLElement, condition: (el: HTMLElement) => boolean): HTMLElement | null;
-export function closestParent(el: Element, condition: (el: HTMLElement) => boolean): HTMLElement | null;
-export function closestParent(el: Element, condition: (el: any) => boolean): HTMLElement | null {
-   return el && closest(el.parentElement, condition);
-}
-
-export function isFocused(el: Element): boolean {
-   return document.activeElement == el;
-}
-
-export function isFocusedDeep(el: Element): boolean {
-   return document.activeElement == el || (!!document.activeElement && el.contains(document.activeElement));
-}
-
-const focusableWithoutTabIndex = ["INPUT", "SELECT", "TEXTAREA", "A", "BUTTON"];
-
-export function isFocusable(el: Element): el is HTMLElement {
-   if (!(el instanceof HTMLElement)) return false;
-
-   var firstPass = el && isNumber(el.tabIndex) && el.tabIndex >= 0;
-   if (!firstPass) return false;
-
-   if (focusableWithoutTabIndex.indexOf(el.tagName) != -1 && !el.hasAttribute("disabled")) return true;
-
-   return el.hasAttribute("tabindex");
-}
-
-/**
- * Returns focused element.
- * @returns {Element}
- */
-export function getFocusedElement(): Element | null {
-   return document.activeElement;
-}
-
-export function isDescendant(el: Element, descEl: Element): boolean {
-   return el.contains(descEl);
-}
-
-export function isSelfOrDescendant(el: Element, descEl: Element): boolean {
-   return el == descEl || el.contains(descEl);
-}
+import { isNumber } from "../util/isNumber";
+
+type ElementFilter = (el: Element, condition: (el: Element) => boolean) => Element | null;
+
+/**
+ * Returns first child element, or the parent element itself, that satisfies the `condition` function.
+ * @param el
+ * @param condition
+ * @returns {Element}
+ */
+export function findFirst<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
+export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null;
+export function findFirst(el: Element, condition: (el: Element) => boolean): Element | null {
+   if (condition(el)) return el;
+
+   var children = el.children;
+   if (children)
+      for (var i = 0; i < children.length; i++) {
+         var child = findFirst(children[i], condition);
+         if (child) return child;
+      }
+   return null;
+}
+
+export function findFirstChild<T extends Element>(el: Element, condition: (el: Element) => el is T): T | null;
+export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null;
+export function findFirstChild(el: Element, condition: (el: Element) => boolean): Element | null {
+   var children = el.children;
+   if (children)
+      for (var i = 0; i < children.length; i++) {
+         var child = findFirst(children[i], condition);
+         if (child) return child;
+      }
+   return null;
+}
+
+export function closest(el: HTMLElement | null, condition: (el: HTMLElement) => boolean): HTMLElement | null;
+export function closest(el: Element | null, condition: (el: Element) => boolean): Element | null;
+export function closest(el: Element | null, condition: (el: any) => boolean): Element | null {
+   while (el) {
+      if (condition(el)) return el;
+      el = el.parentElement;
+   }
+   return null;
+}
+
+export function closestParent(el: HTMLElement, condition: (el: HTMLElement) => boolean): HTMLElement | null;
+export function closestParent(el: Element, condition: (el: HTMLElement) => boolean): HTMLElement | null;
+export function closestParent(el: Element, condition: (el: any) => boolean): HTMLElement | null {
+   return el && closest(el.parentElement, condition);
+}
+
+export function isFocused(el: Element): boolean {
+   return document.activeElement == el;
+}
+
+export function isFocusedDeep(el: Element): boolean {
+   return document.activeElement == el || (!!document.activeElement && el.contains(document.activeElement));
+}
+
+const focusableWithoutTabIndex = ["INPUT", "SELECT", "TEXTAREA", "A", "BUTTON"];
+
+export function isFocusable(el: Element): el is HTMLElement {
+   if (!(el instanceof HTMLElement)) return false;
+
+   var firstPass = el && isNumber(el.tabIndex) && el.tabIndex >= 0;
+   if (!firstPass) return false;
+
+   if (focusableWithoutTabIndex.indexOf(el.tagName) != -1 && !el.hasAttribute("disabled")) return true;
+
+   return el.hasAttribute("tabindex");
+}
+
+/**
+ * Returns focused element.
+ * @returns {Element}
+ */
+export function getFocusedElement(): Element | null {
+   return document.activeElement;
+}
+
+export function isDescendant(el: Element, descEl: Element): boolean {
+   return el.contains(descEl);
+}
+
+export function isSelfOrDescendant(el: Element, descEl: Element): boolean {
+   return el == descEl || el.contains(descEl);
+}

package/src/util/hasKey.ts

@@ -1,18 +1,18 @@
-import { isFunction } from "./isFunction";
-import { isString } from "./isString";
-
-export function hasKey<K extends string>(obj: object, key: K): obj is Record<K, unknown> {
-   return key in obj;
-}
-
-export function hasStringAtKey<K extends string>(obj: object, key: K): obj is Record<K, string> {
-   return hasKey(obj, key) && isString(obj[key]);
-}
-
-export function hasValueAtKey<K extends string>(obj: object, key: K, value: unknown): obj is Record<K, unknown> {
-   return hasKey(obj, key) && obj[key] === value;
-}
-
-export function hasFunctionAtKey<K extends string>(obj: object, key: K): obj is Record<K, (...args: any[]) => any> {
-   return hasKey(obj, key) && isFunction(obj[key]);
-}
+import { isFunction } from "./isFunction";
+import { isString } from "./isString";
+
+export function hasKey<K extends string>(obj: object, key: K): obj is Record<K, unknown> {
+   return key in obj;
+}
+
+export function hasStringAtKey<K extends string>(obj: object, key: K): obj is Record<K, string> {
+   return hasKey(obj, key) && isString(obj[key]);
+}
+
+export function hasValueAtKey<K extends string>(obj: object, key: K, value: unknown): obj is Record<K, unknown> {
+   return hasKey(obj, key) && obj[key] === value;
+}
+
+export function hasFunctionAtKey<K extends string>(obj: object, key: K): obj is Record<K, (...args: any[]) => any> {
+   return hasKey(obj, key) && isFunction(obj[key]);
+}

package/src/util/index.ts

@@ -1,55 +1,55 @@
-export * from "./Console";
-export * from "./Debug";
-export * from "./DOM";
-export * from "./Format";
-export * from "./expandFatArrows";
-export * from "./GlobalCacheIdentifier";
-export * from "./innerTextTrim";
-export * from "./isDigit";
-export * from "./isPromise";
-export * from "./isTouchDevice";
-export * from "./KeyCode";
-export * from "./parseStyle";
-export * from "./quote";
-export * from "./scrollElementIntoView";
-export * from "./shallowEquals";
-export * from "./Timing";
-export * from "./date/index";
-export * from "./color/index";
-export * from "./getVendorPrefix";
-export * from "./eventCallbacks";
-export * from "./getSearchQueryPredicate";
-export * from "./escapeSpecialRegexCharacters";
-export * from "./browserSupportsPassiveEventHandlers";
-export * from "./isTouchEvent";
-export * from "./debounce";
-export * from "./throttle";
-export * from "./SubscriberList";
-export * from "./findScrollableParent";
-export * from "./getScrollerBoundingClientRect";
-export * from "./isNonEmptyArray";
-export * from "./isArray";
-export * from "./isObject";
-export * from "./isNumber";
-export * from "./isFunction";
-export * from "./isString";
-export * from "./isUndefined";
-export * from "./isDefined";
-export * from "./routeAppend";
-export * from "./reverseSlice";
-export * from "./getTopLevelBoundingClientRect";
-export * from "./getParentFrameBoundingClientRect";
-export * from "./getActiveElement";
-export * from "./Component";
-export * from "./onIdleCallback";
-export * from "./validatedDebounce";
-export * from "./addEventListenerWithOptions";
-export * from "./coalesce";
-export * from "./dummyCallback";
-export * from "./calculateNaturalElementHeight";
-export * from "./isTextInputElement";
-export * from "./capitalize";
-export * from "./isValidIdentifierName";
-export * from "./isDataRecord";
-export * from "./TraversalStack";
-export * from "./hasKey"
+export * from "./Console";
+export * from "./Debug";
+export * from "./DOM";
+export * from "./Format";
+export * from "./expandFatArrows";
+export * from "./GlobalCacheIdentifier";
+export * from "./innerTextTrim";
+export * from "./isDigit";
+export * from "./isPromise";
+export * from "./isTouchDevice";
+export * from "./KeyCode";
+export * from "./parseStyle";
+export * from "./quote";
+export * from "./scrollElementIntoView";
+export * from "./shallowEquals";
+export * from "./Timing";
+export * from "./date/index";
+export * from "./color/index";
+export * from "./getVendorPrefix";
+export * from "./eventCallbacks";
+export * from "./getSearchQueryPredicate";
+export * from "./escapeSpecialRegexCharacters";
+export * from "./browserSupportsPassiveEventHandlers";
+export * from "./isTouchEvent";
+export * from "./debounce";
+export * from "./throttle";
+export * from "./SubscriberList";
+export * from "./findScrollableParent";
+export * from "./getScrollerBoundingClientRect";
+export * from "./isNonEmptyArray";
+export * from "./isArray";
+export * from "./isObject";
+export * from "./isNumber";
+export * from "./isFunction";
+export * from "./isString";
+export * from "./isUndefined";
+export * from "./isDefined";
+export * from "./routeAppend";
+export * from "./reverseSlice";
+export * from "./getTopLevelBoundingClientRect";
+export * from "./getParentFrameBoundingClientRect";
+export * from "./getActiveElement";
+export * from "./Component";
+export * from "./onIdleCallback";
+export * from "./validatedDebounce";
+export * from "./addEventListenerWithOptions";
+export * from "./coalesce";
+export * from "./dummyCallback";
+export * from "./calculateNaturalElementHeight";
+export * from "./isTextInputElement";
+export * from "./capitalize";
+export * from "./isValidIdentifierName";
+export * from "./isDataRecord";
+export * from "./TraversalStack";
+export * from "./hasKey"

package/src/util/isArray.ts

@@ -1,3 +1,3 @@
-export function isArray<T = unknown>(x: unknown): x is T[] {
-   return Array.isArray(x);
-}
+export function isArray<T = unknown>(x: unknown): x is T[] {
+   return Array.isArray(x);
+}

package/src/util/isDefined.ts

@@ -1,3 +1,3 @@
-export function isDefined<T>(x: T | undefined): x is T {
-   return x !== undefined;
-}
+export function isDefined<T>(x: T | undefined): x is T {
+   return x !== undefined;
+}

package/src/util/isString.ts

@@ -1,3 +1,3 @@
-export function isString(x: unknown): x is string {
-   return typeof x === "string";
-}
+export function isString(x: unknown): x is string {
+   return typeof x === "string";
+}

package/src/util/test/createTestRenderer.tsx

@@ -1,12 +1,19 @@
 /** @jsxImportSource react */
 import renderer from "react-test-renderer";
+import { act } from "react";
 import { Cx } from "../../ui/Cx";
 import { View } from "../../data/View";
 
-export function createTestRenderer(store: View, widget: any) {
-   return renderer.create(createTestWidget(store, widget));
+export async function createTestRenderer(store: View, widget: any) {
+   let result: renderer.ReactTestRenderer;
+   await act(async () => {
+      result = renderer.create(createTestWidget(store, widget));
+   });
+   return result!;
 }
 
 export function createTestWidget(store: View, widget: any) {
    return <Cx widget={widget} store={store} subscribe immediate />;
 }
+
+export { act };

package/src/widgets/AccessorBindings.spec.tsx

@@ -15,7 +15,7 @@ interface Model {
 let { $page } = createAccessorModelProxy<Model>();
 
 describe("Accessors", () => {
-   it("work as regular bindings", () => {
+   it("work as regular bindings", async () => {
       let widget = (
          <cx>
             <div text={$page.text} />
@@ -30,7 +30,7 @@ describe("Accessors", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree));
@@ -38,7 +38,7 @@ describe("Accessors", () => {
       assert.deepStrictEqual(tree.children, ["Test"]);
    });
 
-   it("support expressions", () => {
+   it("support expressions", async () => {
       let widget = (
          <cx>
             <div text={expr($page.a, $page.b, (a, b) => a + b)} />
@@ -54,7 +54,7 @@ describe("Accessors", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree));

package/src/widgets/DocumentTitle.ts

@@ -1,95 +1,95 @@
-import { Widget, WidgetConfig } from "../ui/Widget";
-import { RenderingContext } from "../ui/RenderingContext";
-import { Instance } from "../ui/Instance";
-import { StringProp } from "../ui/Prop";
-
-export interface DocumentTitleConfig extends WidgetConfig {
-   /** Text value to be used for the document title. */
-   value?: StringProp;
-
-   /** Text value to be used for the document title. */
-   text?: StringProp;
-
-   /** Deprecated. Use `action: "append"` instead. */
-   append?: boolean;
-
-   /** How to combine the title with existing document title. Default is `append`. */
-   action?: "append" | "replace" | "prepend";
-
-   /** Separator used when appending or prepending to the title. Default is empty string. */
-   separator?: StringProp;
-}
-
-export class DocumentTitle extends Widget<DocumentTitleConfig> {
-   declare value?: StringProp;
-   declare text?: StringProp;
-   declare append?: boolean;
-   declare action?: "append" | "replace" | "prepend";
-   declare separator?: StringProp;
-
-   constructor(config?: DocumentTitleConfig) {
-      super(config);
-   }
-
-   init(): void {
-      if (this.value) this.text = this.value;
-
-      if (this.append) this.action = "append";
-
-      super.init();
-   }
-
-   declareData(...args: Record<string, unknown>[]): void {
-      super.declareData(...args, {
-         value: undefined,
-         text: undefined,
-         action: undefined,
-         separator: undefined,
-      });
-   }
-
-   explore(context: RenderingContext, instance: Instance): void {
-      if (!(context as any).documentTitle) {
-         (context as any).documentTitle = {
-            activeInstance: instance,
-            title: "",
-         };
-      }
-
-      let { data } = instance;
-
-      if (data.text) {
-         switch (data.action) {
-            case "append":
-               if ((context as any).documentTitle.title) (context as any).documentTitle.title += data.separator;
-               (context as any).documentTitle.title += data.text;
-               break;
-
-            case "prepend":
-               (context as any).documentTitle.title = data.text + data.separator + (context as any).documentTitle.title;
-               break;
-
-            default:
-            case "replace":
-               (context as any).documentTitle.title = data.text;
-               break;
-         }
-      }
-
-      super.explore(context, instance);
-   }
-
-   prepare(context: RenderingContext, instance: Instance): void {
-      if ((context as any).documentTitle.activeInstance == instance)
-         document.title = (context as any).documentTitle.title;
-   }
-
-   render(): null {
-      return null;
-   }
-}
-
-DocumentTitle.prototype.action = "append";
-DocumentTitle.prototype.separator = "";
-
-Widget.alias("document-title", DocumentTitle);
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Instance } from "../ui/Instance";
+import { StringProp } from "../ui/Prop";
+
+export interface DocumentTitleConfig extends WidgetConfig {
+   /** Text value to be used for the document title. */
+   value?: StringProp;
+
+   /** Text value to be used for the document title. */
+   text?: StringProp;
+
+   /** Deprecated. Use `action: "append"` instead. */
+   append?: boolean;
+
+   /** How to combine the title with existing document title. Default is `append`. */
+   action?: "append" | "replace" | "prepend";
+
+   /** Separator used when appending or prepending to the title. Default is empty string. */
+   separator?: StringProp;
+}
+
+export class DocumentTitle extends Widget<DocumentTitleConfig> {
+   declare value?: StringProp;
+   declare text?: StringProp;
+   declare append?: boolean;
+   declare action?: "append" | "replace" | "prepend";
+   declare separator?: StringProp;
+
+   constructor(config?: DocumentTitleConfig) {
+      super(config);
+   }
+
+   init(): void {
+      if (this.value) this.text = this.value;
+
+      if (this.append) this.action = "append";
+
+      super.init();
+   }
+
+   declareData(...args: Record<string, unknown>[]): void {
+      super.declareData(...args, {
+         value: undefined,
+         text: undefined,
+         action: undefined,
+         separator: undefined,
+      });
+   }
+
+   explore(context: RenderingContext, instance: Instance): void {
+      if (!(context as any).documentTitle) {
+         (context as any).documentTitle = {
+            activeInstance: instance,
+            title: "",
+         };
+      }
+
+      let { data } = instance;
+
+      if (data.text) {
+         switch (data.action) {
+            case "append":
+               if ((context as any).documentTitle.title) (context as any).documentTitle.title += data.separator;
+               (context as any).documentTitle.title += data.text;
+               break;
+
+            case "prepend":
+               (context as any).documentTitle.title = data.text + data.separator + (context as any).documentTitle.title;
+               break;
+
+            default:
+            case "replace":
+               (context as any).documentTitle.title = data.text;
+               break;
+         }
+      }
+
+      super.explore(context, instance);
+   }
+
+   prepare(context: RenderingContext, instance: Instance): void {
+      if ((context as any).documentTitle.activeInstance == instance)
+         document.title = (context as any).documentTitle.title;
+   }
+
+   render(): null {
+      return null;
+   }
+}
+
+DocumentTitle.prototype.action = "append";
+DocumentTitle.prototype.separator = "";
+
+Widget.alias("document-title", DocumentTitle);

package/src/widgets/HtmlElement.spec.tsx

@@ -5,7 +5,7 @@ import { bind } from "../ui/bind";
 import { VDOM } from "../ui/Widget";
 
 describe("HtmlElement", () => {
-   it("renders textual content provided through the text property", () => {
+   it("renders textual content provided through the text property", async () => {
       let widget = (
          <cx>
             <div text={bind("text")} />
@@ -18,7 +18,7 @@ describe("HtmlElement", () => {
          },
       });
 
-      const component = createTestRenderer(store, widget);
+      const component = await createTestRenderer(store, widget);
 
       let tree = component.toJSON();
       assert(tree && !Array.isArray(tree), "Expected single element");
@@ -26,14 +26,14 @@ describe("HtmlElement", () => {
       assert.deepEqual(tree.children, ["Test"]);
    });
 
-   it("allows spread bindings", () => {
+   it("allows spread bindings", async () => {
       let store = new Store({
          data: {
             title: "title",
          },
       });
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <a href="#" {...{ title: { bind: "title" } }}>
@@ -54,10 +54,10 @@ describe("HtmlElement", () => {
       });
    });
 
-   it("supports SVG elements with camelCase attributes", () => {
+   it("supports SVG elements with camelCase attributes", async () => {
       let store = new Store();
 
-      const component = createTestRenderer(
+      const component = await createTestRenderer(
          store,
          <cx>
             <svg>