cx 26.0.13 → 26.1.0

package/src/ui/app/History.ts

@@ -1,133 +1,133 @@
-import { Url } from "./Url";
-import { batchUpdatesAndNotify } from "../batchUpdates";
-import { SubscriberList } from "../../util/SubscriberList";
-import { View } from "../../data/View";
-
-interface Transition {
-   url: string;
-   state: any;
-   title: string | null;
-   replace: boolean;
-   completed?: boolean;
-}
-
-type NavigateConfirmationCallback = (state: any) => boolean | Promise<boolean>;
-
-let last = 0;
-let next = 1;
-let transitions: Record<number, Transition> = {};
-let subscribers: SubscriberList | null = null;
-let reload = false;
-let navigateConfirmationCallback: NavigateConfirmationCallback | null = null;
-let permanentNavigateConfirmation = false;
-
-export class History {
-   static store: View;
-   static urlBinding: string;
-   static hashBinding?: string;
-
-   static connect(store: View, urlBinding: string, hashBinding?: string): void {
-      this.store = store;
-      this.urlBinding = urlBinding;
-      this.hashBinding = hashBinding;
-      this.updateStore();
-      window.onpopstate = () => {
-         this.updateStore();
-      };
-   }
-
-   static pushState(state: any, title: string | null, url: string): boolean {
-      return this.confirmAndNavigate(state, title, url);
-   }
-
-   static replaceState(state: any, title: string | null, url: string): boolean {
-      return this.navigate(state, title, url, true);
-   }
-
-   static reloadOnNextChange(): void {
-      reload = true;
-   }
-
-   static addNavigateConfirmation(callback: NavigateConfirmationCallback, permanent = false): void {
-      navigateConfirmationCallback = callback;
-      permanentNavigateConfirmation = permanent;
-   }
-
-   static confirm(continueCallback: () => boolean, state: any): boolean {
-      if (!navigateConfirmationCallback) return continueCallback();
-
-      let result = navigateConfirmationCallback(state);
-      Promise.resolve(result).then((value) => {
-         if (value) {
-            if (!permanentNavigateConfirmation) navigateConfirmationCallback = null;
-            continueCallback();
-         }
-      });
-
-      return false;
-   }
-
-   static confirmAndNavigate(state: any, title: string | null, url: string, replace?: boolean): boolean {
-      return this.confirm(() => this.navigate(state, title, url, replace), url);
-   }
-
-   static navigate(state: any, title: string | null, url: string, replace = false): boolean {
-      url = Url.resolve(url);
-
-      if (!window.history.pushState || reload) {
-         window.location[replace ? "replace" : "assign"](url);
-         return true;
-      }
-
-      let transition: Transition | undefined;
-      let changed = false;
-      batchUpdatesAndNotify(
-         () => {
-            changed = this.updateStore(url);
-            if (changed)
-               transitions[++last] = transition = {
-                  url,
-                  state,
-                  title,
-                  replace,
-               };
-         },
-         () => {
-            if (transition) transition.completed = true;
-
-            //update history once the page is rendered and the title is set
-            while (transitions[next] && transitions[next].completed) {
-               let tr = transitions[next];
-               delete transitions[next];
-               next++;
-               if (tr.replace) {
-                  window.history.replaceState(tr.state, tr.title ?? "", tr.url);
-                  if (subscribers) subscribers.notify(tr.url, "replaceState");
-               } else {
-                  window.history.pushState(tr.state, tr.title ?? "", tr.url);
-                  if (subscribers) subscribers.notify(tr.url, "pushState");
-               }
-            }
-         },
-      );
-
-      return changed;
-   }
-
-   static updateStore(href?: string): boolean {
-      let url = Url.unresolve(href || document.location.href);
-      let hash: string | null = null;
-      let hashIndex = url.indexOf("#");
-      if (hashIndex !== -1) {
-         hash = url.substring(hashIndex);
-         url = url.substring(0, hashIndex);
-      }
-      if (this.hashBinding) this.store.set(this.hashBinding, hash);
-      return this.store.set(this.urlBinding, url);
-   }
-
-   static subscribe(callback: (url: string, op: string) => void): () => void {
-      if (!subscribers) subscribers = new SubscriberList();
-      return subscribers.subscribe(callback);
-   }
-}
+import { Url } from "./Url";
+import { batchUpdatesAndNotify } from "../batchUpdates";
+import { SubscriberList } from "../../util/SubscriberList";
+import { View } from "../../data/View";
+
+interface Transition {
+   url: string;
+   state: any;
+   title: string | null;
+   replace: boolean;
+   completed?: boolean;
+}
+
+type NavigateConfirmationCallback = (state: any) => boolean | Promise<boolean>;
+
+let last = 0;
+let next = 1;
+let transitions: Record<number, Transition> = {};
+let subscribers: SubscriberList | null = null;
+let reload = false;
+let navigateConfirmationCallback: NavigateConfirmationCallback | null = null;
+let permanentNavigateConfirmation = false;
+
+export class History {
+   static store: View;
+   static urlBinding: string;
+   static hashBinding?: string;
+
+   static connect(store: View, urlBinding: string, hashBinding?: string): void {
+      this.store = store;
+      this.urlBinding = urlBinding;
+      this.hashBinding = hashBinding;
+      this.updateStore();
+      window.onpopstate = () => {
+         this.updateStore();
+      };
+   }
+
+   static pushState(state: any, title: string | null, url: string): boolean {
+      return this.confirmAndNavigate(state, title, url);
+   }
+
+   static replaceState(state: any, title: string | null, url: string): boolean {
+      return this.navigate(state, title, url, true);
+   }
+
+   static reloadOnNextChange(): void {
+      reload = true;
+   }
+
+   static addNavigateConfirmation(callback: NavigateConfirmationCallback, permanent = false): void {
+      navigateConfirmationCallback = callback;
+      permanentNavigateConfirmation = permanent;
+   }
+
+   static confirm(continueCallback: () => boolean, state: any): boolean {
+      if (!navigateConfirmationCallback) return continueCallback();
+
+      let result = navigateConfirmationCallback(state);
+      Promise.resolve(result).then((value) => {
+         if (value) {
+            if (!permanentNavigateConfirmation) navigateConfirmationCallback = null;
+            continueCallback();
+         }
+      });
+
+      return false;
+   }
+
+   static confirmAndNavigate(state: any, title: string | null, url: string, replace?: boolean): boolean {
+      return this.confirm(() => this.navigate(state, title, url, replace), url);
+   }
+
+   static navigate(state: any, title: string | null, url: string, replace = false): boolean {
+      url = Url.resolve(url);
+
+      if (!window.history.pushState || reload) {
+         window.location[replace ? "replace" : "assign"](url);
+         return true;
+      }
+
+      let transition: Transition | undefined;
+      let changed = false;
+      batchUpdatesAndNotify(
+         () => {
+            changed = this.updateStore(url);
+            if (changed)
+               transitions[++last] = transition = {
+                  url,
+                  state,
+                  title,
+                  replace,
+               };
+         },
+         () => {
+            if (transition) transition.completed = true;
+
+            //update history once the page is rendered and the title is set
+            while (transitions[next] && transitions[next].completed) {
+               let tr = transitions[next];
+               delete transitions[next];
+               next++;
+               if (tr.replace) {
+                  window.history.replaceState(tr.state, tr.title ?? "", tr.url);
+                  if (subscribers) subscribers.notify(tr.url, "replaceState");
+               } else {
+                  window.history.pushState(tr.state, tr.title ?? "", tr.url);
+                  if (subscribers) subscribers.notify(tr.url, "pushState");
+               }
+            }
+         },
+      );
+
+      return changed;
+   }
+
+   static updateStore(href?: string): boolean {
+      let url = Url.unresolve(href || document.location.href);
+      let hash: string | null = null;
+      let hashIndex = url.indexOf("#");
+      if (hashIndex !== -1) {
+         hash = url.substring(hashIndex);
+         url = url.substring(0, hashIndex);
+      }
+      if (this.hashBinding) this.store.set(this.hashBinding, hash);
+      return this.store.set(this.urlBinding, url);
+   }
+
+   static subscribe(callback: (url: string, op: string) => void): () => void {
+      if (!subscribers) subscribers = new SubscriberList();
+      return subscribers.subscribe(callback);
+   }
+}

package/src/ui/app/Url.spec.ts

@@ -1,50 +1,50 @@
-import { Url } from "./Url";
-import Route from "route-parser";
-import assert from "assert";
-describe("Url", function () {
-   describe(".unresolve", function () {
-      it("preserves query parameters", function () {
-         Url.absoluteBase = "https://cxjs.io/docs/";
-         assert.equal("~/?state=1", Url.unresolve("https://cxjs.io/docs/?state=1"));
-      });
-
-      it("doesn't touch unresolved urls", function () {
-         assert.equal("~/test", Url.unresolve("~/test"));
-      });
-   });
-
-   describe(".getBaseFromScriptSrc", () => {
-      it("ignores query strings", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/vendor.js?qs=1", "~/vendor.js"), "/");
-      });
-
-      it("allows wildcards", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/vendor.123.js?qs=1", "~/vendor.*.js"), "/");
-      });
-
-      it("works for an application folder", function () {
-         assert.equal(Url.getBaseFromScriptSrc("/datasync/vendor.124c82.js", "~/vendor.*.js"), "/datasync/");
-      });
-   });
-});
-
-describe("Route", function () {
-   it("matches query param", function () {
-      let route = new Route("~/?state=:state");
-      let result = route.match("~/?state=1");
-      assert(result !== false);
-      assert.equal(result.state, "1");
-   });
-
-   it("matches routes with extra query params", function () {
-      let route = new Route("~/?state=:state");
-      let result = route.match("~/?state=1&more=2");
-      assert(result);
-   });
-
-   it.skip("matches query params in any order", function () {
-      let route = new Route("~/?a=:a&b=:b");
-      let result = route.match("~/?b=1&a=2");
-      assert(result);
-   });
-});
+import { Url } from "./Url";
+import Route from "route-parser";
+import assert from "assert";
+describe("Url", function () {
+   describe(".unresolve", function () {
+      it("preserves query parameters", function () {
+         Url.absoluteBase = "https://cxjs.io/docs/";
+         assert.equal("~/?state=1", Url.unresolve("https://cxjs.io/docs/?state=1"));
+      });
+
+      it("doesn't touch unresolved urls", function () {
+         assert.equal("~/test", Url.unresolve("~/test"));
+      });
+   });
+
+   describe(".getBaseFromScriptSrc", () => {
+      it("ignores query strings", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/vendor.js?qs=1", "~/vendor.js"), "/");
+      });
+
+      it("allows wildcards", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/vendor.123.js?qs=1", "~/vendor.*.js"), "/");
+      });
+
+      it("works for an application folder", function () {
+         assert.equal(Url.getBaseFromScriptSrc("/datasync/vendor.124c82.js", "~/vendor.*.js"), "/datasync/");
+      });
+   });
+});
+
+describe("Route", function () {
+   it("matches query param", function () {
+      let route = new Route("~/?state=:state");
+      let result = route.match("~/?state=1");
+      assert(result !== false);
+      assert.equal(result.state, "1");
+   });
+
+   it("matches routes with extra query params", function () {
+      let route = new Route("~/?state=:state");
+      let result = route.match("~/?state=1&more=2");
+      assert(result);
+   });
+
+   it.skip("matches query params in any order", function () {
+      let route = new Route("~/?a=:a&b=:b");
+      let result = route.match("~/?b=1&a=2");
+      assert(result);
+   });
+});

package/src/ui/app/startAppLoop.tsx

@@ -1,6 +1,7 @@
 /** @jsxImportSource react */
 
-import { Widget, VDOM, WidgetConfig } from "../Widget";
+import type { Root } from "cx-react";
+import { Widget, VDOM } from "../Widget";
 import { Store } from "../../data/Store";
 import { Cx } from "../Cx";
 import { Instance } from "../Instance";
@@ -44,11 +45,8 @@ export function startAppLoop(
       />
    ) as any;
 
-   let root: any = null;
-   if (VDOM.DOM.createRoot) {
-      root = VDOM.DOM.createRoot(parentDOMElement);
-      root.render(content);
-   } else VDOM.DOM.render(content, parentDOMElement);
+   let root = VDOM.DOM.createRoot(parentDOMElement);
+   root.render(content);
 
    let stopped = false;
 
@@ -66,10 +64,8 @@ export function startAppLoop(
    };
 }
 
-function destroy(parentDOMElement: HTMLElement, options: StartAppLoopOptions, root: any): void {
+function destroy(parentDOMElement: HTMLElement, options: StartAppLoopOptions, root: Root): void {
    if (root) root.unmount();
-   else VDOM.DOM.unmountComponentAtNode(parentDOMElement);
-
    if (options.removeParentDOMElement && parentDOMElement.parentNode)
       parentDOMElement.parentNode.removeChild(parentDOMElement);
 }

package/src/ui/app/startHotAppLoop.ts

@@ -1,41 +1,41 @@
-import { startAppLoop, StartAppLoopOptions } from "./startAppLoop";
-import { Widget, WidgetConfig } from "../Widget";
-import { Store } from "../../data/Store";
-import { Create } from "../../util/Component";
-
-export interface HotModule {
-   hot?: {
-      accept: () => void;
-      dispose: (callback: (data: any) => void) => void;
-      data?: any;
-   };
-}
-
-export function startHotAppLoop(
-   appModule: HotModule,
-   element: HTMLElement,
-   store: Store,
-   widgets: Create<typeof Widget> | Create<typeof Widget>[],
-   options: StartAppLoopOptions = {},
-): () => void {
-   let stop: (() => void) | undefined;
-   //webpack (HMR)
-   if (appModule.hot) {
-      // accept itself
-      appModule.hot.accept();
-
-      // remember data on dispose
-      appModule.hot.dispose(function (data: any) {
-         data.state = store.getData();
-         if (stop) stop();
-      });
-
-      //apply data on hot replace
-      if (appModule.hot.data?.state) store.load(appModule.hot.data.state);
-   }
-
-   Widget.resetCounter();
-
-   //app loop
-   return (stop = startAppLoop(element, store, widgets, options));
-}
+import { startAppLoop, StartAppLoopOptions } from "./startAppLoop";
+import { Widget, WidgetConfig } from "../Widget";
+import { Store } from "../../data/Store";
+import { Create } from "../../util/Component";
+
+export interface HotModule {
+   hot?: {
+      accept: () => void;
+      dispose: (callback: (data: any) => void) => void;
+      data?: any;
+   };
+}
+
+export function startHotAppLoop(
+   appModule: HotModule,
+   element: HTMLElement,
+   store: Store,
+   widgets: Create<typeof Widget> | Create<typeof Widget>[],
+   options: StartAppLoopOptions = {},
+): () => void {
+   let stop: (() => void) | undefined;
+   //webpack (HMR)
+   if (appModule.hot) {
+      // accept itself
+      appModule.hot.accept();
+
+      // remember data on dispose
+      appModule.hot.dispose(function (data: any) {
+         data.state = store.getData();
+         if (stop) stop();
+      });
+
+      //apply data on hot replace
+      if (appModule.hot.data?.state) store.load(appModule.hot.data.state);
+   }
+
+   Widget.resetCounter();
+
+   //app loop
+   return (stop = startAppLoop(element, store, widgets, options));
+}

package/src/ui/layout/Content.ts

@@ -1,30 +1,30 @@
-import { Widget } from "../Widget";
-import { PureContainerBase, PureContainerConfig } from "../PureContainer";
-import { Instance } from "../Instance";
-
-export interface ContentConfig extends PureContainerConfig {
-   /** Placeholder name where the content is rendered. */
-   name?: string;
-
-   /** Placeholder name where the content is rendered. */
-   for?: string;
-}
-
-export class Content extends PureContainerBase<ContentConfig, Instance> {
-   declare name?: string;
-   declare for?: string;
-
-   constructor(config?: ContentConfig) {
-      super(config);
-   }
-
-   init(): void {
-      super.init();
-      if (!this.putInto) this.putInto = this.for || this.name;
-   }
-}
-
-Content.prototype.name = "body";
-Content.prototype.isContent = true;
-
-Widget.alias("content", Content);
+import { Widget } from "../Widget";
+import { PureContainerBase, PureContainerConfig } from "../PureContainer";
+import { Instance } from "../Instance";
+
+export interface ContentConfig extends PureContainerConfig {
+   /** Placeholder name where the content is rendered. */
+   name?: string;
+
+   /** Placeholder name where the content is rendered. */
+   for?: string;
+}
+
+export class Content extends PureContainerBase<ContentConfig, Instance> {
+   declare name?: string;
+   declare for?: string;
+
+   constructor(config?: ContentConfig) {
+      super(config);
+   }
+
+   init(): void {
+      super.init();
+      if (!this.putInto) this.putInto = this.for || this.name;
+   }
+}
+
+Content.prototype.name = "body";
+Content.prototype.isContent = true;
+
+Widget.alias("content", Content);

package/src/ui/layout/FirstVisibleChildLayout.ts

@@ -1,60 +1,60 @@
-import { PureContainerConfig } from "./../PureContainer";
-import { Instance } from "../Instance";
-import { PureContainer } from "../PureContainer";
-import { RenderingContext } from "../RenderingContext";
-
-function isVisibleDeep(instance: Instance): boolean {
-   if (instance.visible && (!instance.widget.isPureContainer || !instance.widget.useParentLayout)) return true;
-   if (instance.children) {
-      for (let i = 0; i < instance.children.length; i++) if (isVisibleDeep(instance.children[i])) return true;
-   }
-   return false;
-}
-
-class FirstVisibleChildItem extends PureContainer {
-   constructor(config: PureContainerConfig) {
-      super(config);
-   }
-
-   checkVisible(context: RenderingContext, instance: any, data: any): boolean {
-      if (instance.parent.firstVisibleChild) return false;
-      return super.checkVisible(context, instance, data);
-   }
-
-   explore(context: RenderingContext, instance: any): void {
-      if (instance.parent.firstVisibleChild) return;
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: RenderingContext, instance: any): void {
-      if (instance.parent.firstVisibleChild) return;
-      if (isVisibleDeep(instance)) instance.parent.firstVisibleChild = instance;
-   }
-
-   render(context: RenderingContext, instance: any, key: any): any {
-      if (instance.parent.firstVisibleChild != instance) return null;
-      return super.render(context, instance, key);
-   }
-}
-
-FirstVisibleChildItem.prototype.useParentLayout = true;
-
-export class FirstVisibleChildLayout extends PureContainer {
-   explore(context: RenderingContext, instance: any): void {
-      instance.firstVisibleChild = null;
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context: RenderingContext, instance: any): void {
-      let { children, firstVisibleChild } = instance;
-      if (children) {
-         for (let i = 0; i < children.length; i++) if (children[i] != firstVisibleChild) children[i].destroy();
-      }
-      instance.children = [];
-      if (firstVisibleChild) instance.children.push(firstVisibleChild);
-   }
-
-   wrapItem(item: any): any {
-      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({ items: item });
-   }
-}
+import { PureContainerConfig } from "./../PureContainer";
+import { Instance } from "../Instance";
+import { PureContainer } from "../PureContainer";
+import { RenderingContext } from "../RenderingContext";
+
+function isVisibleDeep(instance: Instance): boolean {
+   if (instance.visible && (!instance.widget.isPureContainer || !instance.widget.useParentLayout)) return true;
+   if (instance.children) {
+      for (let i = 0; i < instance.children.length; i++) if (isVisibleDeep(instance.children[i])) return true;
+   }
+   return false;
+}
+
+class FirstVisibleChildItem extends PureContainer {
+   constructor(config: PureContainerConfig) {
+      super(config);
+   }
+
+   checkVisible(context: RenderingContext, instance: any, data: any): boolean {
+      if (instance.parent.firstVisibleChild) return false;
+      return super.checkVisible(context, instance, data);
+   }
+
+   explore(context: RenderingContext, instance: any): void {
+      if (instance.parent.firstVisibleChild) return;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      if (instance.parent.firstVisibleChild) return;
+      if (isVisibleDeep(instance)) instance.parent.firstVisibleChild = instance;
+   }
+
+   render(context: RenderingContext, instance: any, key: any): any {
+      if (instance.parent.firstVisibleChild != instance) return null;
+      return super.render(context, instance, key);
+   }
+}
+
+FirstVisibleChildItem.prototype.useParentLayout = true;
+
+export class FirstVisibleChildLayout extends PureContainer {
+   explore(context: RenderingContext, instance: any): void {
+      instance.firstVisibleChild = null;
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context: RenderingContext, instance: any): void {
+      let { children, firstVisibleChild } = instance;
+      if (children) {
+         for (let i = 0; i < children.length; i++) if (children[i] != firstVisibleChild) children[i].destroy();
+      }
+      instance.children = [];
+      if (firstVisibleChild) instance.children.push(firstVisibleChild);
+   }
+
+   wrapItem(item: any): any {
+      return item instanceof FirstVisibleChildItem ? item : FirstVisibleChildItem.create({ items: item });
+   }
+}