cx 25.10.1 → 26.0.1

package/src/ui/Cx.tsx

@@ -0,0 +1,386 @@
+/** @jsxImportSource react */
+
+import { Widget, VDOM, getContent } from "./Widget";
+import { Instance } from "./Instance";
+import { RenderingContext } from "./RenderingContext";
+import { debug, appDataFlag } from "../util/Debug";
+import { Timing, now, appLoopFlag, vdomRenderFlag } from "../util/Timing";
+import { isBatchingUpdates, notifyBatchedUpdateStarting, notifyBatchedUpdateCompleted } from "./batchUpdates";
+import { shallowEquals } from "../util/shallowEquals";
+import { PureContainer } from "./PureContainer";
+import { onIdleCallback } from "../util/onIdleCallback";
+import { getCurrentCulture, pushCulture, popCulture, CultureInfo, ResolvedCultureInfo } from "./Culture";
+import { View } from "../data/View";
+import { Config } from "./Prop";
+
+export interface CxProps {
+   widget?: Config;
+   items?: Config;
+   store?: View;
+   instance?: Instance;
+   parentInstance?: Instance;
+   subscribe?: boolean;
+   immediate?: boolean;
+   deferredUntilIdle?: boolean;
+   idleTimeout?: number;
+   options?: any;
+   onError?: (error: Error, instance: Instance, info: any) => void;
+   params?: any;
+   contentFactory?: (props: { children: any }) => any;
+   cultureInfo?: ResolvedCultureInfo;
+}
+
+export interface CxState {
+   deferToken: number;
+   data?: any;
+}
+
+export class Cx extends VDOM.Component<CxProps, CxState> {
+   widget: Widget;
+   store: View;
+   parentInstance?: Instance;
+   instance?: Instance;
+   flags: { preparing?: boolean; dirty?: boolean; rendering?: boolean };
+   renderCount: number;
+   unsubscribe?: () => void;
+   componentDidCatch?: (error: Error, info: any) => void;
+   forceUpdateCallback: () => void;
+   deferCounter: number;
+   pendingUpdateTimer?: NodeJS.Timeout;
+   unsubscribeIdleRequest?: () => void;
+
+   constructor(props: CxProps) {
+      super(props);
+
+      if (props.instance) {
+         this.widget = (props.instance as any).widget;
+         this.store = (props.instance as any).store;
+      } else {
+         this.widget = PureContainer.create({ items: props.widget || props.items });
+
+         if (props.parentInstance) {
+            this.parentInstance = props.parentInstance;
+            this.store = props.store || (this.parentInstance as any).store;
+         } else {
+            this.parentInstance = new Instance(this.widget, "0", undefined, props.store);
+            this.store = props.store!;
+         }
+
+         if (!this.store) throw new Error("Cx component requires a store.");
+      }
+
+      this.state = {
+         deferToken: 0,
+      };
+
+      if (props.subscribe) {
+         this.unsubscribe = this.store.subscribe(this.update.bind(this));
+         (this.state as any).data = this.store.getData();
+      }
+
+      this.flags = {};
+      this.renderCount = 0;
+
+      if (props.onError) this.componentDidCatch = this.componentDidCatchHandler.bind(this);
+
+      this.forceUpdateCallback = this.forceUpdate.bind(this);
+
+      this.deferCounter = 0;
+      this.waitForIdle();
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CxProps): void {
+      let newStore = props.instance
+         ? (props.instance as any).store
+         : props.store
+           ? props.store
+           : (props.parentInstance as any).store;
+
+      if (newStore != this.store) {
+         this.store = newStore;
+         if (this.unsubscribe) this.unsubscribe();
+         if (props.subscribe) this.unsubscribe = this.store.subscribe(this.update.bind(this));
+      }
+
+      if (props.subscribe) {
+         let data = this.store.getData();
+         if (data !== this.state.data) {
+            this.waitForIdle();
+            this.setState({ data });
+         }
+      }
+   }
+
+   getInstance(): Instance {
+      if (this.props.instance) return this.props.instance;
+
+      if (this.instance && (this.instance as any).widget === this.widget) {
+         if ((this.instance as any).parentStore != this.store) (this.instance as any).setParentStore(this.store);
+         return this.instance;
+      }
+
+      if (this.widget && this.parentInstance)
+         return (this.instance = (this.parentInstance as any).getDetachedChild(this.widget, 0, this.store));
+
+      throw new Error("Could not resolve a widget instance in the Cx component.");
+   }
+
+   render() {
+      if (this.props.deferredUntilIdle && this.state.deferToken < this.deferCounter) return null;
+
+      let cultureInfo = this.props.cultureInfo ?? getCurrentCulture();
+
+      return (
+         <CxContext
+            instance={this.getInstance()}
+            flags={this.flags}
+            options={this.props.options}
+            buster={++this.renderCount}
+            contentFactory={this.props.contentFactory}
+            forceUpdate={this.forceUpdateCallback}
+            cultureInfo={cultureInfo}
+         />
+      );
+   }
+
+   componentDidMount(): void {
+      this.componentDidUpdate();
+
+      if (this.props.options && this.props.options.onPipeUpdate)
+         this.props.options.onPipeUpdate(this.update.bind(this));
+   }
+
+   componentDidUpdate(): void {
+      if (this.flags.dirty) {
+         this.update();
+      }
+   }
+
+   update(): void {
+      let data = this.store.getData();
+      debug(appDataFlag, data);
+      if (this.flags.preparing) this.flags.dirty = true;
+      else if (isBatchingUpdates() || this.props.immediate) {
+         notifyBatchedUpdateStarting();
+         this.setState({ data: data }, notifyBatchedUpdateCompleted);
+      } else {
+         //in standard mode sequential store commands are batched
+         if (!this.pendingUpdateTimer) {
+            notifyBatchedUpdateStarting();
+            this.pendingUpdateTimer = setTimeout(() => {
+               delete this.pendingUpdateTimer;
+               this.setState({ data: data }, notifyBatchedUpdateCompleted);
+            }, 0);
+         }
+      }
+   }
+
+   waitForIdle(): void {
+      if (!this.props.deferredUntilIdle) return;
+
+      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
+
+      let token = ++this.deferCounter;
+      this.unsubscribeIdleRequest = onIdleCallback(
+         () => {
+            this.setState({ deferToken: token });
+         },
+         {
+            timeout: this.props.idleTimeout || 30000,
+         },
+      );
+   }
+
+   componentWillUnmount(): void {
+      if (this.pendingUpdateTimer) clearTimeout(this.pendingUpdateTimer);
+      if (this.unsubscribeIdleRequest) this.unsubscribeIdleRequest();
+      if (this.unsubscribe) this.unsubscribe();
+      if (this.props.options && this.props.options.onPipeUpdate) this.props.options.onPipeUpdate(null);
+   }
+
+   shouldComponentUpdate(props: CxProps, state: CxState): boolean {
+      if (props.deferredUntilIdle && state.deferToken != this.deferCounter) return false;
+
+      return (
+         state !== this.state ||
+         !props.params ||
+         !shallowEquals(props.params, this.props.params) ||
+         props.instance !== this.props.instance ||
+         props.widget !== this.props.widget ||
+         props.store !== this.props.store ||
+         props.parentInstance !== this.props.parentInstance ||
+         props.cultureInfo !== this.props.cultureInfo
+      );
+   }
+
+   componentDidCatchHandler(error: Error, info: any): void {
+      this.flags.preparing = false;
+      this.props.onError!(error, this.getInstance(), info);
+   }
+}
+
+interface CxContextProps {
+   instance: Instance;
+   flags: { preparing?: boolean; dirty?: boolean; rendering?: boolean };
+   options?: any;
+   buster: number;
+   contentFactory?: (props: { children: any }) => any;
+   forceUpdate: () => void;
+   cultureInfo?: ResolvedCultureInfo;
+}
+
+class CxContext extends VDOM.Component<CxContextProps, {}> {
+   renderCount: number;
+   timings: any;
+   content: any;
+   renderingContext?: RenderingContext;
+
+   constructor(props: CxContextProps) {
+      super(props);
+      this.renderCount = 0;
+      this.UNSAFE_componentWillReceiveProps(props);
+   }
+
+   UNSAFE_componentWillReceiveProps(props: CxContextProps): void {
+      this.timings = {
+         start: now(),
+      };
+
+      let { instance, options, contentFactory } = props;
+      let count = 0,
+         visible,
+         context,
+         forceContinue;
+
+      //should not be tracked by parents for destroy
+      if (!(instance as any).detached)
+         throw new Error("The instance passed to a Cx component should be detached from its parent.");
+
+      if (this.props.instance !== instance && (this.props.instance as any).destroyTracked)
+         (this.props.instance as any).destroy();
+
+      this.props.flags.preparing = true;
+
+      if (this.props.cultureInfo) pushCulture(this.props.cultureInfo);
+
+      try {
+         do {
+            count++;
+            forceContinue = false;
+            context = new RenderingContext(options);
+            (context as any).forceUpdate = this.props.forceUpdate;
+            this.props.flags.dirty = false;
+            (instance as any).assignedRenderList = (context as any).getRootRenderList();
+            visible = (instance as any).scheduleExploreIfVisible(context);
+            if (visible) {
+               while (!(context as any).exploreStack.empty()) {
+                  let inst = (context as any).exploreStack.pop();
+                  //console.log("EXPLORE", inst.widget.constructor.name, inst.widget.tag, inst.widget.widgetId);
+                  (inst as any).explore(context);
+               }
+            } else if ((instance as any).destroyTracked) {
+               (instance as any).destroy();
+            }
+
+            if (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8) {
+               forceContinue = true;
+               continue;
+            }
+
+            if (visible) {
+               this.timings.afterExplore = now();
+
+               for (let i = 0; i < (context as any).prepareList.length; i++)
+                  (context as any).prepareList[i].prepare(context);
+               this.timings.afterPrepare = now();
+            }
+         } while (
+            forceContinue ||
+            (this.props.flags.dirty && count <= 3 && Widget.optimizePrepare && now() - this.timings.start < 8)
+         );
+
+         if (visible) {
+            //walk in reverse order so children get rendered first
+            let renderList = (context as any).getRootRenderList();
+            while (renderList) {
+               for (let i = renderList.data.length - 1; i >= 0; i--) {
+                  renderList.data[i].render(context);
+               }
+               renderList = renderList.right;
+            }
+
+            this.content = getContent((instance as any).vdom);
+            if (contentFactory) this.content = contentFactory({ children: this.content });
+            this.timings.afterRender = now();
+            for (let i = 0; i < (context as any).cleanupList.length; i++)
+               (context as any).cleanupList[i].cleanup(context);
+         } else {
+            this.content = null;
+            this.timings.afterExplore = this.timings.afterPrepare = this.timings.afterRender = now();
+         }
+      } finally {
+         if (this.props.cultureInfo) popCulture(this.props.cultureInfo);
+      }
+
+      this.timings.beforeVDOMRender = now();
+      this.props.flags.preparing = false;
+      this.props.flags.rendering = true;
+      this.renderingContext = context;
+   }
+
+   render() {
+      return this.content;
+   }
+
+   componentDidMount(): void {
+      this.componentDidUpdate();
+   }
+
+   componentDidUpdate(): void {
+      this.props.flags.rendering = false;
+      this.timings.afterVDOMRender = now();
+
+      //let {instance} = this.props;
+      //instance.cleanup(this.renderingContext);
+
+      this.timings.afterCleanup = now();
+      this.renderCount++;
+
+      if (process.env.NODE_ENV !== "production") {
+         let { start, beforeVDOMRender, afterVDOMRender, afterPrepare, afterExplore, afterRender, afterCleanup } =
+            this.timings;
+
+         Timing.log(
+            vdomRenderFlag,
+            this.renderCount,
+            "cx",
+            (beforeVDOMRender - start + afterCleanup - afterVDOMRender).toFixed(2) + "ms",
+            "vdom",
+            (afterVDOMRender - beforeVDOMRender).toFixed(2) + "ms",
+         );
+
+         Timing.log(
+            appLoopFlag,
+            this.renderCount,
+            (this.renderingContext as any).options.name || "main",
+            "total",
+            (afterCleanup - start).toFixed(1) + "ms",
+            "explore",
+            (afterExplore - start).toFixed(1) + "ms",
+            "prepare",
+            (afterPrepare - afterExplore).toFixed(1),
+            "render",
+            (afterRender - afterPrepare).toFixed(1),
+            "vdom",
+            (afterVDOMRender - beforeVDOMRender).toFixed(1),
+            "cleanup",
+            (afterCleanup - afterVDOMRender).toFixed(1),
+         );
+      }
+   }
+
+   componentWillUnmount(): void {
+      let { instance } = this.props;
+      if ((instance as any).destroyTracked) (instance as any).destroy();
+   }
+}

package/src/ui/DataProxy.spec.tsx

@@ -0,0 +1,337 @@
+import { Store } from "../data/Store";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { Controller } from "./Controller";
+import { DataProxy } from "./DataProxy";
+import { computable } from "../data/computable";
+import { useState } from "../hooks";
+import { createFunctionalComponent } from "./createFunctionalComponent";
+import { Widget } from "./Widget";
+import { bind } from "./bind";
+import { tpl } from "./tpl";
+
+describe("DataProxy", () => {
+   it("can calculate values", () => {
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: { bind: "value" },
+               }}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["good"],
+      });
+   });
+
+   it("can write into values aliased with bind", () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.set("$value", "excellent");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: { bind: "value" },
+               }}
+               controller={TestController}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert(store.get("value"), "excellent");
+
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["excellent"],
+      });
+   });
+
+   it("can write into aliased values using provided setters", () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.set("$value", "excellent");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: {
+                     expr: computable("value", (value: any) => value),
+                     set: (value: any, { store }: { store: any }) => {
+                        store.set("value", value);
+                     },
+                  },
+               }}
+               controller={TestController}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert(store.get("value"), "excellent");
+
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["excellent"],
+      });
+   });
+
+   it("allows shorter syntax", () => {
+      let widget = (
+         <cx>
+            <DataProxy alias="$value" value={bind("value")}>
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["good"],
+      });
+   });
+
+   it("correctly updates aliased data after write", () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.set("$value", "excellent");
+            assert.equal(this.store.get("$value"), "excellent");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: { bind: "value" },
+               }}
+               controller={TestController}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "good",
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert(store.get("value"), "excellent");
+
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["excellent"],
+      });
+   });
+
+   it("properly binds structures", () => {
+      class TestController extends Controller {
+         onInit() {
+            this.store.set("$person.firstName", "Jim");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $person: { bind: "person" },
+               }}
+               controller={TestController}
+            >
+               <span text={tpl("{$person.firstName} {$person.lastName}")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            person: { firstName: "John", lastName: "Smith" },
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert(store.get("person.firstName"), "Jim");
+
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["Jim Smith"],
+      });
+   });
+
+   it("works with Store refs", () => {
+      let widget = createFunctionalComponent(() => {
+         let valueRef = useState("a");
+         return (
+            <cx>
+               <DataProxy
+                  data={{
+                     $value: valueRef,
+                  }}
+               >
+                  <span
+                     text={bind("$value")}
+                     controller={{
+                        onInit() {
+                           valueRef.set("b");
+                        },
+                     }}
+                  />
+               </DataProxy>
+            </cx>
+         );
+      });
+
+      let store = new Store({
+         data: {
+            //value: "good"
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["b"],
+      });
+   });
+
+   it("controllers set on the DataProxy can see calculated values", () => {
+      let value;
+      let widget = Widget.create(
+         <cx>
+            <DataProxy
+               data={{
+                  $value: 5,
+               }}
+               controller={{
+                  onInit() {
+                     value = this.store.get("$value");
+                  },
+               }}
+            />
+         </cx>,
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.equal(value, 5);
+   });
+
+   it("correctly propagates undefined values over a previous value (bug)", () => {
+      let widget = (
+         <cx>
+            <DataProxy
+               data={{
+                  $value: { bind: "value" },
+               }}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+            <DataProxy
+               data={{
+                  $value: { bind: "dummy" },
+               }}
+            >
+               <span text={bind("$value")} />
+            </DataProxy>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "initial",
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+
+      assert.deepEqual(tree, [
+         {
+            type: "span",
+            props: {},
+            children: ["initial"],
+         },
+         {
+            type: "span",
+            props: {},
+            children: null,
+         },
+      ]);
+   });
+});