cx 25.10.1 → 26.0.1

package/src/ui/IsolatedScope.spec.tsx

@@ -0,0 +1,55 @@
+import { Store } from "../data/Store";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import assert from "assert";
+import { IsolatedScope } from "./IsolatedScope";
+import { bind } from "./bind";
+
+describe("IsolatedScope", () => {
+   it("prevents multiple re-renders", () => {
+      let list: any[] = [];
+      let widget = (
+         <cx>
+            <IsolatedScope
+               data={{
+                  value: { bind: 'value' }
+               }}
+            >
+               <span text={bind("value")} onExplore={(context, { store }) => {
+                  list.push(store.get("value"));
+               }} />
+            </IsolatedScope>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            value: "bad",
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(list, ["bad"]);
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["bad"],
+      });
+
+      //component should not re-render if unrelated data changes
+      store.set("dummy", "dummy");
+      tree = component.toJSON();
+      assert.deepEqual(list, ["bad"]);
+
+      //component should not re-render if unrelated data changes
+      store.set("value", "good");
+      tree = component.toJSON();
+      assert.deepEqual(list, ["bad", "good"]);
+      assert.deepEqual(tree, {
+         type: "span",
+         props: {},
+         children: ["good"],
+      });
+   });
+});

package/src/ui/IsolatedScope.ts

@@ -0,0 +1,50 @@
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { isArray } from "../util/isArray";
+import { Instance } from "./Instance";
+import { StructuredProp } from "./Prop";
+
+export interface IsolatedScopeConfig extends PureContainerConfig {
+   /**
+    * A single binding path or a list of paths to be monitored for changes.
+    * Use `bind` as a shorthand for defining the `data` object.
+    */
+   bind?: string | string[];
+
+   /** Data object selector. The children will update only if `data` change. */
+   data?: StructuredProp;
+}
+
+export class IsolatedScope<
+   Config extends IsolatedScopeConfig = IsolatedScopeConfig,
+   InstanceType extends Instance = Instance,
+> extends PureContainerBase<Config, InstanceType> {
+   declare bind?: string | string[];
+   declare data?: StructuredProp;
+
+   declareData(...args: any[]) {
+      return super.declareData(...args, {
+         data: { structured: true },
+      });
+   }
+
+   init() {
+      if (typeof this.bind === "string") this.data = { bind: this.bind };
+      else if (isArray(this.bind)) {
+         let data: Record<string, any> = {};
+         this.bind.forEach((x, i) => {
+            data[String(i)] = { bind: x };
+         });
+         this.data = data;
+      }
+      super.init();
+   }
+
+   explore(context: any, instance: any) {
+      if (instance.shouldUpdate) {
+         super.explore(context, instance);
+      } else if (instance.children) {
+         // mark children to prevent sweeping them away
+         for (let i = 0; i < instance.children.length; i++) instance.instanceCache.addChild(instance.children[i]);
+      }
+   }
+}

package/src/ui/Localization.ts

@@ -0,0 +1,70 @@
+let contents: any = {};
+let localizations: any = {};
+let overrides: any = {};
+let defaults: any = {};
+let trackDefaults = false;
+
+export class Localization {
+   static register(key: string) {
+      return (type: any) => {
+         this.registerPrototype(key, type);
+         return type;
+      }
+   }
+
+   static registerPrototype(key: string, type: any) {
+      contents[key] = type.prototype;
+      if (overrides[key])
+         this.override(key, overrides[key]);
+   }
+
+   static trackDefaults() {
+      trackDefaults = true;
+   }
+
+   static restoreDefaults() {
+      for (let type in defaults) {
+         let proto = contents[type];
+         if (!proto)
+            continue;
+         let d = defaults[type];
+         for (let key in d)
+            proto[key] = d[key];
+      }
+      defaults = {};
+   }
+
+   static override(key: string, values: any) {
+      overrides[key] = values;
+      let p = contents[key];
+      if (p) {
+         if (trackDefaults && !defaults[key]) {
+            let d: any = defaults[key] = {};
+            for (let key in values)
+               d[key] = p[key];
+         }
+         Object.assign(p, values);
+      }
+   }
+
+   static localize(culture: string, key: string, values: any) {
+      let l = localizations[culture];
+      if (!l)
+         l = localizations[culture] = {};
+      l[key] = {
+         ...l[key],
+         ...values
+      };
+   }
+
+   static setCulture(culture: string) {
+      var l = localizations[culture];
+      if (l) {
+         for (var key in l) {
+            var content = contents[key];
+            if (content)
+               Object.assign(content, l[key]);
+         }
+      }
+   }
+}

package/src/ui/Prop.ts

@@ -0,0 +1,112 @@
+import { Selector } from "../data/Selector";
+import { AccessorChain } from "../data/createAccessorModelProxy";
+
+export type Bind = {
+   bind: string;
+   defaultValue?: any;
+   throttle?: number;
+   debounce?: number;
+};
+
+export type Tpl = {
+   tpl: string;
+};
+
+export type Expr = {
+   expr: string;
+   set?: (value: any, instance?: any) => boolean;
+   throttle?: number;
+   debounce?: number;
+};
+
+export type Binding = Bind | Tpl | Expr;
+
+export type GetSet<T> = {
+   get: Selector<T>;
+   set?: (value: T, instance?: any) => boolean;
+   throttle?: number;
+   debounce?: number;
+};
+
+export interface StructuredSelector {
+   [prop: string]: Selector<any>;
+}
+
+export type Prop<T> = T | Binding | Selector<T> | AccessorChain<T> | GetSet<T>;
+
+export type WritableProp<T> = Bind | AccessorChain<T>;
+
+export interface DataRecord {
+   [prop: string]: any;
+}
+
+export interface Config {
+   [prop: string]: any;
+}
+
+export interface StructuredProp {
+   [prop: string]: Prop<any>;
+}
+
+/**
+ * Utility type that extracts the resolved value type from a Prop<T>.
+ * Used to derive the runtime type of structured props.
+ */
+export type ResolveProp<P> = P extends Selector<infer T>
+   ? T
+   : P extends AccessorChain<infer T>
+     ? T
+     : P extends GetSet<infer T>
+       ? T
+       : P extends Bind
+         ? any
+         : P extends Tpl
+           ? string
+           : P extends Expr
+             ? any
+             : P;
+
+/**
+ * Utility type that resolves a structured prop object to its runtime value types.
+ * Transforms { name: StringProp, count: NumberProp } to { name: string, count: number }
+ */
+export type ResolveStructuredProp<S> = {
+   [K in keyof S]: ResolveProp<S[K]>;
+};
+
+/**
+ * Generic structured prop type that provides type safety for params and their resolved values.
+ * Use with ContentResolver and similar widgets to type the onResolve callback params.
+ */
+export type TypedStructuredProp<T extends Record<string, any>> = {
+   [K in keyof T]: Prop<T[K]>;
+};
+
+export type StringProp = Prop<string>;
+export type StyleProp = Prop<string | React.CSSProperties> | StructuredProp;
+export type NumberProp = Prop<number>;
+export type BooleanProp = Prop<boolean>;
+export type ClassProp = Prop<string> | StructuredProp;
+export type RecordsProp = Prop<DataRecord[]>;
+export type SortersProp = Prop<Sorter[]>;
+export type UnknownProp = Prop<unknown>;
+export type ModProp = StringProp | StructuredProp;
+
+export type RecordAlias = string | { toString(): string };
+
+export type SortDirection = "ASC" | "DESC";
+
+export interface Sorter {
+   field?: string;
+   value?: (record: DataRecord) => any;
+   direction: SortDirection;
+}
+
+export interface CollatorOptions {
+   localeMatcher?: "lookup" | "best fit";
+   usage?: "sort" | "search";
+   sensitivity?: "base" | "accent" | "case" | "variant";
+   ignorePunctuation?: boolean;
+   numeric?: boolean;
+   caseFirst?: "upper" | "lower" | "false";
+}

package/src/ui/PureContainer.spec.tsx

@@ -0,0 +1,230 @@
+import { Store } from "../data/Store";
+import assert from "assert";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { bind } from "./bind";
+import { PureContainer } from "./PureContainer";
+
+describe("PureContainer", () => {
+   it("renders static text children", () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div>Test</div>
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store();
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Test"],
+      });
+   });
+
+   it("renders multiple children", () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div>First</div>
+               <div>Second</div>
+               <div>Third</div>
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store();
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(Array.isArray(tree), "Expected array of elements");
+      assert.equal(tree.length, 3);
+      assert.deepEqual(tree, [
+         {
+            type: "div",
+            props: {},
+            children: ["First"],
+         },
+         {
+            type: "div",
+            props: {},
+            children: ["Second"],
+         },
+         {
+            type: "div",
+            props: {},
+            children: ["Third"],
+         },
+      ]);
+   });
+
+   it("renders children with data bindings", () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div text={bind("message")} />
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            message: "Hello World",
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Hello World"],
+      });
+   });
+
+   it("renders nested containers", () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div>
+                  <PureContainer>
+                     <span>Nested</span>
+                  </PureContainer>
+               </div>
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store();
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "span",
+               props: {},
+               children: ["Nested"],
+            },
+         ],
+      });
+   });
+
+   it("conditionally renders children based on visible binding", () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div visible={bind("show")} text="Visible" />
+               <div visible={false} text="Hidden" />
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            show: true,
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Visible"],
+      });
+   });
+
+   it("handles empty children", () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div />
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store();
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(tree && !Array.isArray(tree), "Expected single element");
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: null,
+      });
+   });
+
+   it("renders children from items property", () => {
+      let widget = (
+         <cx>
+            <PureContainer items={[<div key="1">Item 1</div>, <div key="2">Item 2</div>]} />
+         </cx>
+      );
+
+      let store = new Store();
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert(Array.isArray(tree), "Expected array of elements");
+      assert.equal(tree.length, 2);
+      assert.deepEqual(tree[0], {
+         type: "div",
+         props: {},
+         children: ["Item 1"],
+      });
+      assert.deepEqual(tree[1], {
+         type: "div",
+         props: {},
+         children: ["Item 2"],
+      });
+   });
+
+   it("updates children when store data changes", () => {
+      let widget = (
+         <cx>
+            <PureContainer>
+               <div text={bind("count")} />
+            </PureContainer>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            count: 0,
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["0"],
+      });
+
+      // Update the store
+      store.set("count", 5);
+
+      // Re-render
+      tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["5"],
+      });
+   });
+});

package/src/ui/PureContainer.tsx

@@ -0,0 +1,19 @@
+import { ContainerBase, ContainerConfig } from "./Container";
+import { Instance } from "./Instance";
+
+export interface PureContainerConfig extends ContainerConfig {}
+
+// Base class for extending with custom Config types
+export class PureContainerBase<
+   Config extends PureContainerConfig = PureContainerConfig,
+   InstanceType extends Instance = Instance,
+> extends ContainerBase<Config, InstanceType> {
+   declare public isPureContainer: boolean;
+}
+
+PureContainerBase.prototype.isPureContainer = true;
+
+// Closed type for direct usage - preserves ControllerProp ThisType
+export class PureContainer extends PureContainerBase<PureContainerConfig, Instance> {}
+
+PureContainer.alias("pure-container", PureContainer);

package/src/ui/RenderingContext.ts

@@ -0,0 +1,99 @@
+import { TraversalStack } from "../util/TraversalStack";
+import { reverseSlice } from "../util/reverseSlice";
+import { Widget } from "./Widget";
+
+export type CxChild = Record<string, any> | React.ReactElement | Widget | CxChild[] | null | undefined;
+
+export class RenderingContext {
+   options: any;
+   exploreStack: any;
+   prepareList: any[];
+   cleanupList: any[];
+   stacks: any;
+   renderList: any;
+
+   [key: string]: any;
+
+   constructor(options?: any) {
+      this.options = options || {};
+      this.exploreStack = new TraversalStack();
+      this.prepareList = [];
+      this.cleanupList = [];
+      this.stacks = {};
+      this.renderList = new LinkedListsNode();
+   }
+
+   getStack(key: string) {
+      let stack = this.stacks[key];
+      if (!stack) stack = this.stacks[key] = [];
+      return stack;
+   }
+
+   push(key: string, value: any) {
+      let stack = this.getStack(key);
+      stack.push(this[key]);
+      return (this[key] = value);
+   }
+
+   pop(key: string) {
+      let stack = this.getStack(key);
+      return (this[key] = stack.pop());
+   }
+
+   pushNamedValue(key: string, name: string, value: any) {
+      let stack = this.getStack(`${key}:${name}`);
+      if (!this[key]) this[key] = {};
+      stack.push(this[key][name]);
+      return (this[key][name] = value);
+   }
+
+   popNamedValue(key: string, name: string) {
+      let stack = this.getStack(`${key}:${name}`);
+      return (this[key][name] = stack.pop());
+   }
+
+   get(key: string) {
+      return this[key];
+   }
+
+   getRootRenderList() {
+      let rl = this.renderList;
+      while (rl.left) rl = rl.left;
+      return rl;
+   }
+}
+
+class LinkedListsNode {
+   left?: LinkedListsNode;
+   right?: LinkedListsNode;
+   data: any[];
+   reverseIndex?: number;
+
+   constructor(left?: LinkedListsNode, right?: LinkedListsNode) {
+      this.left = left;
+      this.right = right;
+      this.data = [];
+   }
+
+   insertLeft() {
+      let node = new LinkedListsNode(this.left, this);
+      if (this.left) this.left.right = node;
+      this.left = node;
+      return node;
+   }
+
+   insertRight() {
+      let node = new LinkedListsNode(this, this.right);
+      if (this.right) this.right.left = node;
+      this.right = node;
+      return node;
+   }
+
+   markReverseIndex() {
+      this.reverseIndex = this.data.length;
+   }
+
+   reverse() {
+      reverseSlice(this.data, this.reverseIndex!);
+   }
+}