cx 25.11.1 → 26.0.2

package/src/ui/Repeater.spec.tsx

@@ -0,0 +1,141 @@
+import { Store } from "../data/Store";
+import { Repeater } from "./Repeater";
+import { bind } from "./bind";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+
+import assert from "assert";
+
+describe("Repeater", () => {
+   it("allows sorting", () => {
+      let data = [
+         {
+            value: "C",
+         },
+         {
+            value: "B",
+         },
+         {
+            value: "A",
+         },
+      ];
+
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={data} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div text={bind("$item.value")} />
+               </Repeater>
+            </div>
+         </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: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+   });
+
+   it("changes are properly updated", () => {
+      let divInstances: any[] = [];
+      let widget = (
+         <cx>
+            <div>
+               <Repeater records={bind("data")} sorters={[{ field: "value", direction: "ASC" }]} recordAlias="$item">
+                  <div
+                     text={bind("$item.value")}
+                     onExplore={(context, instance) => {
+                        divInstances.push(instance);
+                     }}
+                  />
+               </Repeater>
+            </div>
+         </cx>
+      );
+
+      let store = new Store({
+         data: {
+            data: [
+               {
+                  value: "C",
+               },
+               {
+                  value: "B",
+               },
+            ],
+         },
+      });
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      divInstances = [];
+
+      store.update("data", (data) => [{ value: "A" }, ...data]);
+
+      assert.deepEqual(component.toJSON(), {
+         type: "div",
+         props: {},
+         children: [
+            {
+               type: "div",
+               props: {},
+               children: ["A"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["B"],
+            },
+            {
+               type: "div",
+               props: {},
+               children: ["C"],
+            },
+         ],
+      });
+
+      assert.equal(divInstances.length, 3);
+      assert.equal(divInstances[0].store.get("$item.value"), "A");
+      assert.equal(divInstances[1].store.get("$item.value"), "B");
+      assert.equal(divInstances[2].store.get("$item.value"), "C");
+   });
+});

package/src/ui/Repeater.ts

@@ -0,0 +1,203 @@
+import { Widget } from "./Widget";
+import { PureContainer } from "./PureContainer";
+import { ContainerBase, ContainerConfig } from "./Container";
+import { ArrayAdapter } from "./adapter/ArrayAdapter";
+import { UseParentLayout } from "./layout/UseParentLayout";
+import { getAccessor } from "../data/getAccessor";
+import { RenderingContext } from "./RenderingContext";
+import {
+   Prop,
+   StringProp,
+   StructuredProp,
+   RecordAlias,
+   SortersProp,
+   CollatorOptions,
+   SortDirection,
+   DataRecord,
+} from "./Prop";
+import { Instance } from "./Instance";
+import { DataAdapter, DataAdapterRecord } from "./adapter/DataAdapter";
+import type { GroupAdapter } from "./adapter/GroupAdapter";
+import type { TreeAdapter } from "./adapter/TreeAdapter";
+import { Create } from "../util/Component";
+
+export interface RepeaterConfig<T = DataRecord> extends ContainerConfig {
+   /** An array of records to be displayed. */
+   records?: Prop<T[]>;
+
+   /** Alias used to expose the record in the child scope. Default is `$record`. */
+   recordName?: RecordAlias;
+
+   /** Alias used to expose the record in the child scope. Default is `$record`. */
+   recordAlias?: RecordAlias;
+
+   /** Alias used to expose the index of the record. Default is `$index`. */
+   indexName?: RecordAlias;
+
+   /** Alias used to expose the index of the record. Default is `$index`. */
+   indexAlias?: RecordAlias;
+
+   /** Set to `true` to enable caching for improved performance on large datasets. */
+   cached?: boolean;
+
+   /** Indicate that parent store data should not be mutated. */
+   immutable?: boolean;
+
+   /** Indicate that record stores should not be mutated. */
+   sealed?: boolean;
+
+   /** An array of sorter configurations. */
+   sorters?: SortersProp;
+
+   /** A binding used to store the name of the field used for sorting the collection. Available only if `sorters` are not used. */
+   sortField?: StringProp;
+
+   /** A binding used to store the sort direction. Available only if `sorters` are not used. Possible values are `"ASC"` and `"DESC"`. Defaults to `"ASC"`. */
+   sortDirection?: Prop<SortDirection>;
+
+   /** Parameters that affect filtering. */
+   filterParams?: StructuredProp;
+
+   /** Callback to create a filter function for given filter params. */
+   onCreateFilter?: (filterParams: any, instance: Instance) => (record: T) => boolean;
+
+   /**
+    * Callback function to track and retrieve displayed records.
+    * Accepts new records as a first argument.
+    * If onCreateFilter callback is defined, filtered records can be retrieved using this callback.
+    */
+   onTrackMappedRecords?: string | ((records: DataAdapterRecord<T>[], instance: Instance) => void);
+
+   /** Options for data sorting. See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Collator */
+   sortOptions?: CollatorOptions;
+
+   /** A field used to get the unique identifier of the record. Setting keyField improves performance on sort operations as the widget is able to track movement of records inside the collection. */
+   keyField?: string;
+
+   /** Data adapter used to convert data in the list of records. Used for manipulation of records, e.g flattening the tree records. */
+   dataAdapter?:
+      | Create<typeof DataAdapter>
+      | Create<typeof ArrayAdapter>
+      | Create<typeof TreeAdapter>
+      | Create<typeof GroupAdapter>;
+}
+
+export class Repeater<Config extends RepeaterConfig = RepeaterConfig> extends ContainerBase<Config> {
+   declare records?: any;
+   recordsAccessor: any;
+   declare recordAlias?: string;
+   declare recordName: string;
+   declare indexAlias?: string;
+   declare indexName: string;
+   declare dataAdapter: any;
+   declare keyField?: string;
+   declare immutable: boolean;
+   declare sealed: boolean;
+   declare sortOptions?: any;
+   item: any;
+   declare cached: boolean;
+   declare onCreateFilter?: any;
+   filter?: any;
+   declare onTrackMappedRecords?: any;
+
+   declareData(...args: any[]) {
+      super.declareData(
+         {
+            records: undefined,
+            sorters: undefined,
+            sortField: undefined,
+            sortDirection: undefined,
+            filterParams: {
+               structured: true,
+            },
+         },
+         ...args,
+      );
+   }
+
+   init() {
+      this.recordsAccessor = getAccessor(this.records);
+
+      if (this.recordAlias) this.recordName = this.recordAlias;
+
+      if (this.indexAlias) this.indexName = this.indexAlias;
+
+      this.dataAdapter = ArrayAdapter.create({
+         ...this.dataAdapter,
+         recordName: this.recordName,
+         indexName: this.indexName,
+         keyField: this.keyField,
+         immutable: this.immutable,
+         sealed: this.sealed,
+         recordsAccessor: this.recordsAccessor,
+         sortOptions: this.sortOptions,
+      });
+
+      this.item = PureContainer.create({
+         children: this.items || this.children,
+         layout: UseParentLayout,
+      });
+
+      delete this.children;
+      this.items = [];
+
+      super.init();
+   }
+
+   initInstance(context: RenderingContext, instance: any): void {
+      this.dataAdapter.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any): void {
+      super.applyParentStore(instance);
+
+      // force prepareData to execute again and propagate the store change to the records
+      if (instance.cached) delete instance.cached.rawData;
+   }
+
+   prepareData(context: RenderingContext, instance: any): void {
+      let { data } = instance;
+      if (data.sortField)
+         data.sorters = [
+            {
+               field: data.sortField,
+               direction: data.sortDirection || "ASC",
+            },
+         ];
+      this.dataAdapter.sort(data.sorters);
+      let filter = null;
+      if (this.onCreateFilter) filter = instance.invoke("onCreateFilter", data.filterParams, instance);
+      else if (this.filter) filter = (item: any) => this.filter(item, data.filterParams);
+      this.dataAdapter.setFilter(filter);
+      instance.mappedRecords = this.dataAdapter.getRecords(context, instance, data.records, instance.store);
+
+      if (this.onTrackMappedRecords) {
+         instance.invoke("onTrackMappedRecords", instance.mappedRecords, instance);
+      }
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context: RenderingContext, instance: any, data?: any): void {
+      let instances: any[] = [];
+      instance.mappedRecords.forEach((record: any) => {
+         let subInstance = instance.getChild(context, this.item, record.key, record.store);
+         let changed = subInstance.cache("recordData", record.data) || subInstance.cache("key", record.key);
+         subInstance.record = record;
+         if (this.cached && !changed && subInstance.visible && !subInstance.childStateDirty) {
+            instances.push(subInstance);
+            subInstance.shouldUpdate = false;
+         } else if (subInstance.scheduleExploreIfVisible(context)) instances.push(subInstance);
+      });
+      instance.children = instances;
+   }
+}
+
+Repeater.prototype.recordName = "$record";
+Repeater.prototype.indexName = "$index";
+Repeater.prototype.cached = false;
+Repeater.prototype.immutable = false;
+Repeater.prototype.sealed = false;
+Repeater.prototype.isPureContainer = true;
+
+Widget.alias("repeater", Repeater);

package/src/ui/Rescope.spec.tsx

@@ -0,0 +1,199 @@
+import { Store } from "../data/Store";
+import { Rescope } from "./Rescope";
+import { bind } from "./bind";
+import { createTestRenderer } from "../util/test/createTestRenderer";
+import { Controller } from "./Controller";
+
+import assert from "assert";
+import { PureContainer } from "./PureContainer";
+
+describe("Rescope", () => {
+   it("allows simple access to nested data", () => {
+      let store = new Store({
+         data: {
+            $page: {
+               data: {
+                  name: "John",
+               },
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page.data">
+               <div text={bind("name")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["John"],
+      });
+   });
+
+   it("allows parent access through $root", () => {
+      let store = new Store({
+         data: {
+            layout: {
+               title: "Title",
+            },
+            $page: {
+               data: {
+                  name: "John",
+               },
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page.data">
+               <div text={bind("$root.layout.title")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Title"],
+      });
+   });
+
+   it("allows nested data access through data", () => {
+      let store = new Store({
+         data: {
+            layout: {
+               title: "Title",
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page" data={{ $title: { bind: "layout.title" } }}>
+               <div text={bind("$title")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["Title"],
+      });
+   });
+
+   it("nested data mutations are correctly propagated to the parent store", () => {
+      let store = new Store({
+         data: {
+            item: {
+               value: 0,
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page" data={{ $value: { bind: "item.value" } }}>
+               <PureContainer               
+                  controller={{
+                     onInit() {
+                        this.store.set("$value", 2);
+                     },
+                  }}
+               />
+            </Rescope>
+            <div text={bind("item.value")} />
+         </cx>
+      );
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["2"],
+      });
+   });
+
+   it("visible is calculated based on the inner scope", () => {
+      let store = new Store({
+         data: {
+            layout: {
+               title: "Title",
+            },
+            $page: {
+               data: {
+                  visible: true,
+                  name: "John",
+               },
+            },
+         },
+      });
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page.data" visible={bind("visible")}>
+               <div text={bind("name")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = createTestRenderer(store, widget);
+
+      let tree = component.toJSON();
+      assert.deepEqual(tree, {
+         type: "div",
+         props: {},
+         children: ["John"],
+      });
+   });
+
+   it("controllers see inner scope", () => {
+      let store = new Store({
+         data: {
+            $page: {
+               data: {
+                  visible: true,
+                  name: "John",
+               },
+            },
+         },
+      });
+
+      let testName = null;
+
+      class TestController extends Controller {
+         onInit() {
+            testName = this.store.get("name");
+         }
+      }
+
+      let widget = (
+         <cx>
+            <Rescope bind="$page.data" controller={TestController}>
+               <div text={bind("name")} />
+            </Rescope>
+         </cx>
+      );
+
+      const component = createTestRenderer(store, widget);
+
+      component.toJSON();
+      assert.equal(testName, "John");
+   });
+});

package/src/ui/Rescope.ts

@@ -0,0 +1,49 @@
+import { Widget } from "./Widget";
+import { PureContainerBase, PureContainerConfig } from "./PureContainer";
+import { Binding } from "../data/Binding";
+import { ZoomIntoPropertyView } from "../data/ZoomIntoPropertyView";
+import { StructuredInstanceDataAccessor } from "./StructuredInstanceDataAccessor";
+import { isObject } from "../util/isObject";
+import { StructuredProp } from "./Prop";
+
+export interface RescopeConfig extends PureContainerConfig {
+   bind: string;
+   rootName?: string;
+   rootAlias?: string;
+   data?: StructuredProp;
+}
+
+export class Rescope extends PureContainerBase<RescopeConfig> {
+   declare bind: string;
+   declare binding: any;
+   declare rootAlias?: string;
+   declare rootName: string;
+   declare data?: any;
+
+   init() {
+      this.binding = Binding.get(this.bind);
+      if (this.rootAlias) this.rootName = this.rootAlias;
+      super.init();
+   }
+
+   initInstance(context: any, instance: any) {
+      instance.store = new ZoomIntoPropertyView({
+         store: instance.parentStore,
+         binding: this.binding,
+         rootName: this.rootName,
+         nestedData: isObject(this.data)
+            ? new StructuredInstanceDataAccessor({ instance, data: this.data, useParentStore: true })
+            : undefined,
+      });
+      super.initInstance(context, instance);
+   }
+
+   applyParentStore(instance: any) {
+      instance.store.setStore(instance.parentStore);
+   }
+}
+
+Rescope.prototype.bind = "$page";
+Rescope.prototype.rootName = "$root";
+
+Widget.alias("rescope", Rescope);

package/src/ui/ResizeManager.ts

@@ -0,0 +1,31 @@
+import { SubscriberList } from '../util/SubscriberList';
+import { batchUpdates } from './batchUpdates';
+
+let subscribers = new SubscriberList();
+
+export class ResizeManager {
+   static subscribe(callback: () => void) {
+      return subscribers.subscribe(callback);
+   }
+
+   static notify() {
+      batchUpdates(() => {
+         subscribers.notify();
+      });
+   }
+
+   static trackElement(el: any, callback: (entries: ResizeObserverEntry[]) => void) {
+      if (typeof ResizeObserver !== 'function')
+         return this.subscribe(() => callback([]));
+
+      let obs = new ResizeObserver(callback);
+      obs.observe(el);
+
+      return () => {
+         obs.disconnect();
+      }
+   }
+}
+
+if (typeof window != 'undefined')
+   window.addEventListener('resize', () => ResizeManager.notify());