cx 25.11.1 → 26.0.1

package/src/ui/DataProxy.spec.js

@@ -1,338 +0,0 @@
-import { Cx } from "./Cx";
-import { Store } from "../data/Store";
-import { VDOM } from "./VDOM";
-import renderer from "react-test-renderer";
-import assert from "assert";
-import { Controller } from "./Controller";
-import { DataProxy } from "./DataProxy";
-import { computable } from "../data/computable";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { useState } from "../hooks";
-import { createFunctionalComponent } from "./createFunctionalComponent";
-import { Widget } from "./Widget";
-
-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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      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) => value),
-                     set: (value, { store }) => {
-                        store.set("value", value);
-                     },
-                  },
-               }}
-               controller={TestController}
-            >
-               <span text-bind="$value" />
-            </DataProxy>
-         </cx>
-      );
-
-      let store = new Store({
-         data: {
-            value: "good",
-         },
-      });
-
-      const component = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      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 = renderer.create(<Cx widget={widget} store={store} subscribe immediate />);
-
-      let tree = component.toJSON();
-
-      assert.deepEqual(tree, [
-         {
-            type: "span",
-            props: {},
-            children: ["initial"],
-         },
-         {
-            type: "span",
-            props: {},
-            children: null,
-         },
-      ]);
-   });
-});

package/src/ui/DetachedScope.d.ts

@@ -1,21 +0,0 @@
-import * as Cx from '../core';
-import {IsolatedScopeProps} from "./IsolatedScope";
-
-interface DetachedScopeProps extends IsolatedScopeProps {
-
-   /**
-    * A single binding path or a list of paths to be monitored for changes.
-    * Use `exclusive` as a shorthand for defining the `exclusiveData` object.
-    */
-   exclusive?: string | string[]
-
-   /** Exclusive data selector. If only exclusive data change, the scope will be re-rendered without recalculating other elements on the page.
-    * Use in case if the scope uses both exclusive and shared data. */
-   exclusiveData?: Cx.StructuredProp,
-
-   /** Name of the scope used for debugging/reporting purposes. */
-   name?: string
-}
-
-export class DetachedScope extends Cx.Widget<DetachedScopeProps> {
-}

package/src/ui/DetachedScope.js

@@ -1,98 +0,0 @@
-import { PureContainer } from "./PureContainer";
-import { SubscribableView } from "../data/SubscribableView";
-import { getSelector } from "../data/getSelector";
-import { Cx } from "./Cx";
-import { VDOM } from "./Widget";
-import { IsolatedScope } from "./IsolatedScope";
-
-export class DetachedScope extends IsolatedScope {
-   declareData() {
-      return super.declareData(...arguments, {
-         exclusiveData: { structured: true },
-      });
-   }
-
-   init() {
-      if (typeof this.exclusive === "string") this.exclusiveData = { bind: this.exclusive };
-      if (Array.isArray(this.exclusive)) {
-         this.exclusiveData = {};
-         this.exclusive.forEach((x, i) => {
-            this.exclusiveData[String(i)] = { bind: x };
-         });
-      }
-
-      this.container = PureContainer.create({
-         type: PureContainer,
-         items: this.children || this.items,
-      });
-      delete this.items;
-      delete this.children;
-
-      if (this.name)
-         this.options = {
-            ...this.options,
-            name: this.name,
-         };
-
-      super.init();
-   }
-
-   initInstance(context, instance) {
-      instance.subStore = new ContainmentStore({
-         store: instance.store,
-         selector: getSelector(this.exclusiveData || this.data),
-      });
-   }
-
-   applyParentStore(instance) {
-      instance.store = instance.parentStore;
-      instance.subStore.setStore(instance.parentStore);
-   }
-
-   render(context, instance, key) {
-      return (
-         <Cx
-            key={key}
-            widget={this.container}
-            store={instance.subStore}
-            parentInstance={instance}
-            subscribe
-            options={this.options}
-            onError={this.onError}
-         />
-      );
-   }
-}
-
-class ContainmentStore extends SubscribableView {
-   getData() {
-      return this.store.getData();
-   }
-
-   setItem(...args) {
-      return this.wrapper(() => {
-         this.store.setItem(...args);
-      });
-   }
-
-   deleteItem(...args) {
-      return this.wrapper(() => {
-         this.store.deleteItem(...args);
-      });
-   }
-
-   wrapper(callback) {
-      if (this.store.silently(callback)) {
-         let data = this.getData();
-         let containedData = this.selector(data);
-         if (containedData === this.cache.containedData) {
-            this.store.notify();
-         } else {
-            this.cache.containedData = containedData;
-            this.notify();
-         }
-         return true;
-      }
-      return false;
-   }
-}

package/src/ui/FocusManager.d.ts

@@ -1,29 +0,0 @@
-import * as Cx from "../core";
-
-declare type FocusOutCallback = (Element) => void;
-
-export class FocusManager {
-   static subscribe(callback: FocusOutCallback): void;
-
-   static onFocusOut(el: Element, callback: FocusOutCallback): () => void;
-
-   static oneFocusOut(el: Element, callback: FocusOutCallback): () => void;
-
-   static nudge(): () => void;
-
-   static focus(el: Element): () => void;
-
-   static focusFirst(el: Element): () => void;
-
-   static setInterval(interval: number): void;
-}
-
-export function oneFocusOut(component: any, el: Element, callback: FocusOutCallback);
-
-export function offFocusOut(component: any): void;
-
-export function preventFocus(e: Event): void;
-
-export function preventFocusOnTouch(e: Event, force?: boolean): void;
-
-export function unfocusElement(target?: Element, forceBlur?: boolean): void;

package/src/ui/FocusManager.js

@@ -1,171 +0,0 @@
-import { isSelfOrDescendant, findFirst, findFirstChild, isFocusable, closestParent } from "../util/DOM";
-import { batchUpdates } from "./batchUpdates";
-import { SubscriberList } from "../util/SubscriberList";
-import { isTouchEvent } from "../util/isTouchEvent";
-import { getActiveElement } from "../util/getActiveElement";
-
-/*
- *  Purpose of FocusManager is to provide focusout notifications.
- *  IE and Firefox do not provide relatedTarget info in blur events which makes it impossible
- *  to determine if focus went outside or stayed inside the component.
- */
-
-let subscribers = new SubscriberList(),
-   timerInterval = 300,
-   timerId = null;
-
-let lastActiveElement = null;
-let pending = false;
-
-export class FocusManager {
-   static subscribe(callback) {
-      let unsubscribe = subscribers.subscribe(callback);
-      checkTimer();
-      return unsubscribe;
-   }
-
-   static onFocusOut(el, callback) {
-      let active = isSelfOrDescendant(el, getActiveElement());
-      return this.subscribe((focusedEl) => {
-         if (!active) active = isSelfOrDescendant(el, getActiveElement());
-         else if (!isSelfOrDescendant(el, focusedEl)) {
-            active = false;
-            callback(focusedEl);
-         }
-      });
-   }
-
-   static oneFocusOut(el, callback) {
-      this.nudge();
-      let off = this.subscribe((focusedEl) => {
-         if (!isSelfOrDescendant(el, focusedEl)) {
-            callback(focusedEl);
-            off();
-         }
-      });
-      return off;
-   }
-
-   static nudge() {
-      if (typeof document !== "undefined" && getActiveElement() !== lastActiveElement) {
-         if (!pending) {
-            pending = true;
-            setTimeout(function () {
-               pending = false;
-               if (getActiveElement() !== lastActiveElement) {
-                  lastActiveElement = getActiveElement();
-                  batchUpdates(() => {
-                     subscribers.notify(lastActiveElement);
-                  });
-                  checkTimer();
-               }
-            }, 0);
-         }
-      }
-   }
-
-   static focus(el) {
-      el.focus();
-      this.nudge();
-   }
-
-   static focusFirst(el) {
-      let focusable = findFirst(el, isFocusable);
-      if (focusable) this.focus(focusable);
-      return focusable;
-   }
-
-   static focusFirstChild(el) {
-      let focusable = findFirstChild(el, isFocusable);
-      if (focusable) this.focus(focusable);
-      return focusable;
-   }
-
-   static focusNext(el) {
-      let next = el,
-         skip = true;
-      do {
-         if (!skip) {
-            let focusable = this.focusFirst(next);
-            if (focusable) return focusable;
-         }
-
-         if (next.nextSibling) {
-            next = next.nextSibling;
-            skip = false;
-         } else {
-            next = next.parentNode;
-            skip = true;
-         }
-      } while (next);
-   }
-
-   static setInterval(interval) {
-      timerInterval = interval;
-      checkTimer();
-   }
-}
-
-export function oneFocusOut(component, el, callback) {
-   if (!component.oneFocusOut)
-      component.oneFocusOut = FocusManager.oneFocusOut(el, (focus) => {
-         delete component.oneFocusOut;
-         callback(focus);
-      });
-}
-
-export function offFocusOut(component) {
-   if (component.oneFocusOut) {
-      component.oneFocusOut();
-      delete component.oneFocusOut;
-   }
-}
-
-export function preventFocus(e) {
-   //Focus can be prevented only on mousedown event. On touchstart this will not work
-   //preventDefault cannot be used as it prevents scrolling
-   if (e.type !== "mousedown") return;
-
-   e.preventDefault();
-
-   unfocusElement(e.currentTarget, false);
-}
-
-function checkTimer() {
-   let shouldRun = !subscribers.isEmpty();
-
-   if (shouldRun && !timerId)
-      timerId = setInterval(() => {
-         FocusManager.nudge();
-      }, timerInterval);
-
-   if (!shouldRun && timerId) {
-      clearInterval(timerId);
-      timerId = null;
-   }
-}
-
-export function preventFocusOnTouch(e, force = false) {
-   if (force || isTouchEvent()) preventFocus(e);
-}
-
-export function unfocusElement(target = null, unfocusParentOverlay = true) {
-   const activeElement = getActiveElement();
-   if (!target) target = activeElement;
-
-   if (unfocusParentOverlay) {
-      let focusableOverlayContainer = closestParent(target, (el) => el.dataset?.focusableOverlayContainer);
-      if (focusableOverlayContainer) target = focusableOverlayContainer;
-   }
-
-   //find the closest focusable parent of the target element and focus it instead
-   let focusableParent = closestParent(
-      target,
-      (el) => isFocusable(el) && (!unfocusParentOverlay || el.dataset?.focusableOverlayContainer),
-   );
-
-   if (focusableParent && focusableParent !== document.body) focusableParent.focus({ preventScroll: true });
-   else activeElement.blur();
-
-   FocusManager.nudge();
-}

package/src/ui/Format.d.ts

@@ -1,3 +0,0 @@
-export * from "../util/Format";
-
-export function enableCultureSensitiveFormatting();