cx 25.10.1 → 26.0.1

package/src/ui/Controller.ts

@@ -0,0 +1,189 @@
+import { computable, ComputableSelector, InferSelectorValue } from "../data/computable";
+import { Component, ComponentConstructor, ComponentConfigType } from "../util/Component";
+import { isArray } from "../util/isArray";
+import { isFunction } from "../util/isFunction";
+import { StoreProxy } from "../data/StoreProxy";
+import { RenderingContext } from "./RenderingContext";
+import { View, ViewMethods } from "../data/View";
+import { Widget } from "./Widget";
+import { Instance } from "./Instance";
+
+const computablePrefix = "computable-";
+const triggerPrefix = "trigger-";
+
+interface ComputableEntry {
+   name: string;
+   selector: any;
+   type: "computable" | "trigger";
+}
+
+// Controller methods interface for ThisType in config objects
+export interface ControllerMethods {
+   store: View;
+   instance: Instance;
+   widget?: Widget;
+   invokeParentMethod(method: string, ...args: any[]): any;
+   addTrigger<Selectors extends readonly ComputableSelector[]>(
+      name: string,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => any,
+      autoRun?: boolean,
+   ): void;
+   addComputable<Selectors extends readonly ComputableSelector[]>(
+      name: string,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => any,
+   ): void;
+}
+
+export interface BaseControllerConfig {
+   store?: View;
+   instance?: Instance;
+   widget?: Widget;
+
+   onInit?: (context: RenderingContext) => void;
+   onExplore?: (context: RenderingContext) => void;
+   onPrepare?: (context: RenderingContext) => void;
+   onCleanup?: (context: RenderingContext) => void;
+   onDestroy?: () => void;
+}
+
+// Controller config object type with Controller methods AND its own methods available on 'this'
+export type ControllerConfig<T extends BaseControllerConfig = BaseControllerConfig> = T &
+   ThisType<ControllerMethods & T>;
+
+/** Controller factory function type */
+export type ControllerFactory<T extends BaseControllerConfig = BaseControllerConfig> = (
+   config: ViewMethods,
+) => ControllerConfig<T>;
+
+export class Controller extends Component implements ControllerMethods {
+   initialized?: boolean;
+   onInit?(context: RenderingContext): void;
+   onExplore?(context: RenderingContext): void;
+   onPrepare?(context: RenderingContext): void;
+   onCleanup?(context: RenderingContext): void;
+   onDestroy?(): void;
+   declare instance: Instance;
+   declare store: View;
+   declare widget?: Widget;
+   computables?: Record<string, ComputableEntry>;
+
+   constructor(config?: BaseControllerConfig) {
+      super(config);
+   }
+
+   init(context?: RenderingContext): void {
+      if (!this.initialized) {
+         this.initialized = true;
+         if (this.onInit && context) this.onInit(context);
+      }
+   }
+
+   explore(context: RenderingContext): void {
+      let { store } = this.instance;
+      this.store = store; //in rare cases instance may change its store
+
+      if (!this.initialized) {
+         this.init(context);
+         //forgive if the developer forgets to call super.init()
+         this.initialized = true;
+      }
+
+      if (this.computables) {
+         for (let key in this.computables) {
+            let x = this.computables[key];
+            let v = x.selector(store.getData());
+            if (x.type == "computable") store.set(x.name, v);
+         }
+      }
+
+      if (this.onExplore) {
+         this.onExplore(context);
+      }
+   }
+
+   prepare(context: RenderingContext): void {
+      if (this.onPrepare) {
+         this.onPrepare(context);
+      }
+   }
+
+   cleanup(context: RenderingContext): void {
+      if (this.onCleanup) {
+         this.onCleanup(context);
+      }
+   }
+
+   addComputable<Selectors extends readonly ComputableSelector[]>(
+      name: string,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => any,
+   ): void {
+      if (!isArray(args)) throw new Error("Second argument to the addComputable method should be an array.");
+      let selector = computable(...args, callback).memoize();
+      if (!this.computables) this.computables = {};
+      this.computables[computablePrefix + name] = { name, selector, type: "computable" };
+   }
+
+   addTrigger<Selectors extends readonly ComputableSelector[]>(
+      name: string,
+      args: [...Selectors],
+      callback: (...values: { [K in keyof Selectors]: InferSelectorValue<Selectors[K]> }) => any,
+      autoRun?: boolean,
+   ): void {
+      if (!isArray(args)) throw new Error("Second argument to the addTrigger method should be an array.");
+      let selector = computable(...args, callback).memoize(!autoRun && this.store.getData());
+      if (!this.computables) this.computables = {};
+      this.computables[triggerPrefix + name] = { name, selector, type: "trigger" };
+   }
+
+   removeTrigger(name: string): void {
+      if (this.computables) delete this.computables[triggerPrefix + name];
+   }
+
+   removeComputable(name: string): void {
+      if (this.computables) delete this.computables[computablePrefix + name];
+   }
+
+   invokeParentMethod(methodName: string, ...args: any[]): any {
+      let parent = this.instance.parent;
+      if (!parent) throw new Error("Cannot invoke a parent controller method as the instance does not have a parent.");
+      return parent.invokeControllerMethod(methodName, ...args);
+   }
+
+   invokeMethod(methodName: string, ...args: any[]): any {
+      return this.instance.invokeControllerMethod(methodName, ...args);
+   }
+}
+
+Controller.namespace = "ui.controller.";
+
+Controller.factory = function (alias: any, config?: any, more?: any) {
+   if (isFunction(alias)) {
+      let cfg = {
+         ...config,
+         ...more,
+      };
+
+      if (cfg.instance) {
+         //in rare cases instance.store may change, so we cannot rely on the store passed through configuration
+         cfg.store = new StoreProxy(() => cfg.instance.store);
+         Object.assign(cfg, cfg.store.getMethods());
+      }
+
+      let result = alias(cfg);
+      if (result instanceof Controller) return result;
+
+      return Controller.create({
+         ...config,
+         ...more,
+         ...result,
+      });
+   }
+
+   return Controller.create({
+      ...config,
+      ...more,
+   });
+};

package/src/ui/Culture.ts

@@ -0,0 +1,159 @@
+// @ts-expect-error
+import { NumberCulture, DateTimeCulture } from "intl-io";
+import { Localization } from "./Localization";
+import { GlobalCacheIdentifier } from "../util/GlobalCacheIdentifier";
+import { invalidateExpressionCache } from "../data/Expression";
+import { invalidateStringTemplateCache } from "../data/StringTemplate";
+import { defaultCompare } from "../data/defaultCompare";
+import { Console } from "../util/Console";
+
+export interface CultureInfo {
+   culture?: string;
+   numberCulture?: string | null;
+   dateTimeCulture?: string | null;
+   defaultCurrency?: string;
+   dateEncoding?: (date: Date) => string;
+   timezone?: string | null;
+}
+
+export interface ResolvedCultureInfo {
+   culture: string;
+   numberCulture?: string | null;
+   dateTimeCulture?: string | null;
+   cache: any;
+   defaultCurrency: string;
+   dateEncoding: (date: Date) => string;
+   timezone?: string | null;
+}
+
+let stack: ResolvedCultureInfo[] = [
+   {
+      culture: "en",
+      numberCulture: null,
+      dateTimeCulture: null,
+      cache: {},
+      defaultCurrency: "USD",
+      dateEncoding: (date: Date) => date.toISOString(),
+      timezone: null,
+   },
+];
+
+export function getDefaultCulture(): ResolvedCultureInfo {
+   return stack[0];
+}
+
+export function getCurrentCulture(): ResolvedCultureInfo {
+   return stack[stack.length - 1];
+}
+
+export function getCurrentCultureCache(): any {
+   return getCurrentCulture().cache;
+}
+
+export function pushCulture(cultureInfo: ResolvedCultureInfo): void {
+   stack.push(cultureInfo);
+}
+
+export function createCulture(cultureSpecs: Partial<CultureInfo>): ResolvedCultureInfo {
+   let current = getCurrentCulture();
+   let info: ResolvedCultureInfo = {
+      culture: current.culture,
+      dateEncoding: current.dateEncoding,
+      defaultCurrency: current.defaultCurrency,
+      cache: {},
+   };
+   for (let key in cultureSpecs) {
+      if (!(cultureSpecs as any)[key]) continue;
+      (info as any)[key] = (cultureSpecs as any)[key];
+   }
+   return info;
+}
+
+export function popCulture(cultureSpecs?: CultureInfo): CultureInfo | undefined {
+   if (stack.length == 1) throw new Error("Cannot pop the last culture object.");
+   if (cultureSpecs && stack[stack.length - 1] !== cultureSpecs) {
+      Console.warn("Popped culture object does not match the current one.");
+   }
+   return stack.pop();
+}
+
+export class Culture {
+   static setCulture(cultureCode: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.culture = cultureCode;
+      cultureSpecs.cache = {};
+      Localization.setCulture(cultureCode);
+      this.invalidateCache();
+   }
+
+   static setNumberCulture(cultureCode: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.numberCulture = cultureCode;
+      delete cultureSpecs.cache.numberCulture;
+      this.invalidateCache();
+   }
+
+   static setDateTimeCulture(cultureCode: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.dateTimeCulture = cultureCode;
+      delete cultureSpecs.cache.dateTimeCulture;
+      this.invalidateCache();
+   }
+
+   static setDefaultCurrency(currencyCode: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.defaultCurrency = currencyCode;
+      this.invalidateCache();
+   }
+
+   static setDefaultTimezone(timezone: string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.timezone = timezone;
+      this.invalidateCache();
+   }
+
+   static setDefaultDateEncoding(encoding: (date: Date) => string): void {
+      let cultureSpecs = getDefaultCulture();
+      cultureSpecs.dateEncoding = encoding;
+      this.invalidateCache();
+   }
+
+   static invalidateCache(): void {
+      GlobalCacheIdentifier.change();
+      invalidateExpressionCache();
+      invalidateStringTemplateCache();
+   }
+
+   static get defaultCurrency(): string | undefined {
+      return getCurrentCulture().defaultCurrency;
+   }
+
+   static get culture(): string | undefined {
+      return getCurrentCulture().culture;
+   }
+
+   static getNumberCulture(): NumberCulture {
+      let { cache, numberCulture, culture } = getCurrentCulture();
+      if (!cache!.numberCulture) cache!.numberCulture = new NumberCulture(numberCulture ?? culture);
+      return cache!.numberCulture;
+   }
+
+   static getDateTimeCulture(): DateTimeCulture {
+      let { cache, dateTimeCulture, culture, timezone } = getCurrentCulture();
+      if (!cache!.dateTimeCulture)
+         cache!.dateTimeCulture = new DateTimeCulture(dateTimeCulture ?? culture, {
+            defaultTimezone: timezone,
+         });
+      return cache!.dateTimeCulture;
+   }
+
+   static getDefaultDateEncoding(): (date: Date) => string {
+      return getCurrentCulture().dateEncoding;
+   }
+
+   static getComparer(options?: Intl.CollatorOptions): (a: any, b: any) => number {
+      let { culture } = getCurrentCulture();
+      if (typeof Intl.Collator != "undefined") return new Intl.Collator(culture, options).compare;
+      return defaultCompare;
+   }
+}

package/src/ui/Cx.spec.tsx

@@ -0,0 +1,208 @@
+import { Cx } from "./Cx";
+import { VDOM } from "./VDOM";
+import { Container, ContainerBase, ContainerConfig } from "./Container";
+import { Store } from "../data/Store";
+import { bind } from "./bind";
+import { createTestRenderer, createTestWidget } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { HtmlElement } from "../widgets/HtmlElement";
+
+describe("Cx", () => {
+   it("can render cx content", () => {
+      let widget = (
+         <cx>
+            <div>Test</div>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Test"],
+      });
+   });
+
+   it("store changes preserve the instance", () => {
+      let instanceLog: any[] = [];
+      let storeLog: any[] = [];
+
+      let widget = (
+         <cx>
+            <div
+               text={bind("text")}
+               onExplore={(context, instance) => {
+                  instanceLog.push(instance);
+                  storeLog.push(instance.store);
+               }}
+            />
+         </cx>
+      );
+
+      let store1 = new Store({ data: { text: "Test1" } });
+      let store2 = new Store({ data: { text: "Test2" } });
+
+      const component = createTestRenderer(store1, widget);
+
+      let tree1 = component.toJSON();
+      assert.deepEqual(tree1, {
+         type: "div",
+         props: {},
+         children: ["Test1"],
+      });
+
+      component.update(createTestWidget(store2, widget));
+
+      let tree2 = component.toJSON();
+      assert.deepEqual(tree2, {
+         type: "div",
+         props: {},
+         children: ["Test2"],
+      });
+
+      assert.equal(instanceLog.length, 2);
+      assert.equal(instanceLog[0], instanceLog[1]); //store changes should preserve the instance
+      assert(storeLog[0] === store1);
+      assert(storeLog[1] === store2);
+   });
+
+   it("invokes lifetime methods in the right order", () => {
+      let events: any[] = [];
+
+      interface TestWidgetConfig extends ContainerConfig {
+         id?: string;
+      }
+
+      class TestWidget extends ContainerBase<TestWidgetConfig> {
+         declare id?: string;
+
+         explore(context: any, instance: any) {
+            super.explore(context, instance);
+            events.push(["explore", this.id]);
+         }
+
+         exploreCleanup(context: any, instance: any) {
+            //super.exploreCleanup(context, instance);
+            events.push(["exploreCleanup", this.id]);
+         }
+
+         prepare(context: any, instance: any) {
+            //super.prepare(context, instance);
+            events.push(["prepare", this.id]);
+         }
+
+         prepareCleanup(context: any, instance: any) {
+            //super.prepareCleanup(context, instance);
+            events.push(["prepareCleanup", this.id]);
+         }
+
+         render(context: any, instance: any, key: any) {
+            events.push(["render", this.id]);
+            return VDOM.createElement("div", { key }, this.renderChildren(context, instance));
+         }
+      }
+
+      let widget = (
+         <cx>
+            <TestWidget id="0">
+               <TestWidget id="0.0" />
+               <TestWidget id="0.1">
+                  <TestWidget id="0.1.0" />
+                  <TestWidget id="0.1.1" />
+               </TestWidget>
+               <TestWidget id="0.2">
+                  <TestWidget id="0.2.0" />
+               </TestWidget>
+            </TestWidget>
+         </cx>
+      );
+
+      let store = new Store();
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: null,
+            },
+            {
+               type: "div",
+               props: {},
+               children: [
+                  {
+                     type: "div",
+                     props: {},
+                     children: null,
+                  },
+                  {
+                     type: "div",
+                     props: {},
+                     children: null,
+                  },
+               ],
+            },
+            {
+               type: "div",
+               props: {},
+               children: [
+                  {
+                     type: "div",
+                     props: {},
+                     children: null,
+                  },
+               ],
+            },
+         ],
+      });
+
+      //console.log(events);
+
+      assert.deepEqual(events, [
+         ["explore", "0"],
+         ["explore", "0.0"],
+         ["exploreCleanup", "0.0"],
+         ["explore", "0.1"],
+         ["explore", "0.1.0"],
+         ["exploreCleanup", "0.1.0"],
+         ["explore", "0.1.1"],
+         ["exploreCleanup", "0.1.1"],
+         ["exploreCleanup", "0.1"],
+         ["explore", "0.2"],
+         ["explore", "0.2.0"],
+         ["exploreCleanup", "0.2.0"],
+         ["exploreCleanup", "0.2"],
+         ["exploreCleanup", "0"],
+         ["prepare", "0"],
+         ["prepare", "0.0"],
+         ["prepareCleanup", "0.0"],
+         ["prepare", "0.1"],
+         ["prepare", "0.1.0"],
+         ["prepareCleanup", "0.1.0"],
+         ["prepare", "0.1.1"],
+         ["prepareCleanup", "0.1.1"],
+         ["prepareCleanup", "0.1"],
+         ["prepare", "0.2"],
+         ["prepare", "0.2.0"],
+         ["prepareCleanup", "0.2.0"],
+         ["prepareCleanup", "0.2"],
+         ["prepareCleanup", "0"],
+         ["render", "0.2.0"],
+         ["render", "0.2"],
+         ["render", "0.1.1"],
+         ["render", "0.1.0"],
+         ["render", "0.1"],
+         ["render", "0.0"],
+         ["render", "0"],
+      ]);
+   });
+});