@arcgis/lumina 4.33.0-next.124 → 4.33.0-next.126

package/dist/controllers/accessor/index.js

@@ -1,245 +1,209 @@
-import { p as devOnlySetPersistentControllerData, q as devOnlyGetPersistentControllerData, G as GenericController, n as trackPropKey, h as bypassGetter, l as bypassReadOnly, t as trackKey, r as retrieveComponent, g as createEventFactory } from "../../Controller-CZ8Djohh.js";
-import { p as proxyExports } from "../../proxyExports-CK5BLFLO.js";
+import { G as GenericController, l as trackPropKey, t as trackKey, r as retrieveComponent, f as createEventFactory } from "../../Controller-B3mB4uaz.js";
+import { p as proxyExports } from "../../proxyExports-DQobuu44.js";
 import { isEsriInternalEnv } from "@arcgis/components-utils";
 import { watch, on } from "@arcgis/core/core/reactiveUtils.js";
-const makeAccessorController = (loadAccessor, _options) => (component, options) => proxy(component, loadAccessor, options);
+import { createObservable, createTrackingTarget, runTracked, trackAccess } from "@arcgis/core/applications/Components/reactiveUtils.js";
+const makeAccessorController = (createInstance, _options) => (component) => proxy(component, createInstance);
 class AccessorController extends GenericController {
-  constructor(component, _loadAccessor, _options) {
+  constructor(component, createInstance) {
     super(component);
-    this._loadAccessor = _loadAccessor;
-    this._options = _options;
-    this._watchedProperties = /* @__PURE__ */ new Map();
-    this._isBinding = { value: true };
-    this.setProvisionalExports(
-      accessorSupport.makeGetterProxy(
+    this.Y = /* @__PURE__ */ new Map();
+    this.#exportsObservable = createObservable();
+    const that = this;
+    that.#createInstance = createInstance;
+    that.Z();
+    component.manager.A = createTrackingTarget;
+    component.manager.B = runTracked;
+    that.setProvisionalExports(
+      makeBinderProxy(
         component,
-        this._watchedProperties,
-        this._isBinding,
-        this.constructor.allowedPropNameMismatches
-      )
+        new WeakRef(that),
+        component.M.length - 1,
+        that.instance,
+        that.Y
+      ),
+      false
     );
     trackPropKey(
       component,
       (resolved) => {
         if (resolved) {
-          this._instancePropName = resolved;
+          const handle = watch(
+            // If the property to which controller is assigned is public, the user may
+            // manually create an accessor instance and assign it to this property
+            // We pick it up and replace our created accessor instance with user's.
+            () => component[resolved],
+            (newInstance) => {
+              if (newInstance === that.instance) {
+                return;
+              }
+              const oldInstance = that.instance;
+              that.exports = newInstance;
+              that.instance = newInstance;
+              that.Y.forEach(
+                (propName, propertyName) => component.requestUpdate(propName, oldInstance[propertyName])
+              );
+              if (that.#isInstanceOwner) {
+                oldInstance.destroy();
+              }
+              that.#isInstanceOwner = false;
+            },
+            { sync: true }
+          );
+          that.onDestroy(handle.remove);
         }
       },
-      this.exports
+      that.exports
     );
   }
-  hostConnected() {
-    this._isBinding.value = false;
+  #isInstanceOwner;
+  #exportsObservable;
+  #createInstance;
+  get exports() {
+    trackAccess(this.#exportsObservable);
+    return super.exports;
   }
-  async hostLoad() {
-    const component = this.component;
-    const parameters = this._gatherParameters();
-    const finalParameters = this._options?.editConstructorProperties?.call(component, parameters) ?? parameters;
-    const awaitedParameters = finalParameters instanceof Promise ? await finalParameters : finalParameters;
-    const genericComponent = component;
-    const existingInstance = typeof this._instancePropName === "string" ? genericComponent[this._instancePropName] : void 0;
-    const hasInstance = existingInstance != null && existingInstance !== this.exports;
-    if (hasInstance) {
-      this._instance = existingInstance;
-      existingInstance.set(awaitedParameters);
-    } else {
-      this._instance = await this._createInstance(awaitedParameters);
-    }
-    if (component.manager.destroyed) {
-      return;
-    }
-    accessorSupport.watchComponentUpdates(this, this._instance, this._watchedProperties);
-    accessorSupport.watchAccessorUpdates(this, this._instance, this._watchedProperties);
-    this.exports = this._instance;
+  set exports(value) {
+    super.exports = value;
+    this.#exportsObservable.notify();
   }
-  _gatherParameters() {
-    const data = Object.fromEntries(
-      Array.from(
-        this._watchedProperties,
-        ([prop, property]) => [property, this.component[prop]]
-      ).filter(([, value]) => value !== void 0)
-    );
-    const props = process.env.NODE_ENV !== "production" && isEsriInternalEnv() ? filterWatchedProperties?.(this, data) ?? data : data;
-    return props;
+  /** @private */
+  Z() {
+    const that = this;
+    that.instance = "prototype" in that.#createInstance && "declaredClass" in that.#createInstance.prototype ? new that.#createInstance() : that.#createInstance();
+    that.#isInstanceOwner = true;
   }
-  async _createInstance(parameters) {
-    if (this._isAccessorConstructor(this._loadAccessor)) {
-      return new this._loadAccessor(parameters);
-    } else {
-      return await this._loadAccessor(parameters);
-    }
-  }
-  _isAccessorConstructor(loader) {
-    return "prototype" in loader && "declaredClass" in loader.prototype;
+  hostConnected() {
+    this.exports = this.instance;
   }
+  // FEATURE: is there a way to detect that accessor does not need to be destroyed?
+  //   Is it possible to write accessors that don't need to be destroyed?
   hostDestroy() {
-    if (this._instance) {
-      this._instance.destroy();
+    if (this.#isInstanceOwner) {
+      this.instance.destroy?.();
     }
   }
-  async reCreate() {
-    this.hostDestroy();
-    await this.hostLoad();
-  }
 }
 const proxy = proxyExports(AccessorController);
-const accessorSupport = {
-  makeGetterProxy: (component, watchedProperties, isBinding, allowedPropNameMismatches) => new Proxy(
-    {},
-    {
-      /*
-       * Without this, makeProvisionalValue() will throw on accessing
-       * non-existent prop
-       */
-      has: (target, prop) => typeof prop === "string" || prop in target,
-      get: (target, prop) => {
-        const value = Reflect.get(target, prop);
-        if (typeof prop === "symbol" || prop in Promise.prototype) {
-          return value;
-        }
-        const hasProp = prop in target;
-        const doBinding = isBinding?.value ?? true;
-        if (hasProp || !doBinding) {
-          return value;
-        }
-        if (watchedProperties.has(prop)) {
-          return;
-        }
-        return trackKey(
-          component,
-          (resolved) => {
-            if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
-              if (resolved === void 0) {
-                return;
-              }
-              const isFlippingBoolean = resolved.key.toLowerCase().includes("disable");
-              const collidesWithNativeProp = prop in HTMLElement.prototype;
-              const collidesWithCustomProp = allowedPropNameMismatches?.has(prop) === true;
-              if (resolved.key !== prop && !collidesWithNativeProp && !collidesWithCustomProp && !isFlippingBoolean) {
-                throw new Error(
-                  `Tried to bind "${resolved?.key}" property to "${prop.toString()}" - property names must match`
-                );
-              }
-              if (!resolved.isReactive) {
-                throw new Error(
-                  `For two-way binding with Accessor to work, the property on your component must have @property() or @state() decorator. "${prop.toString()}" has neither`
-                );
-              }
+const makeBinderProxy = (component, accessorControllerRef, accessorControllerIndex, instance, boundProperties) => new Proxy(instance, {
+  get: (target, propertyName) => {
+    const value = target[propertyName];
+    if (
+      // Possibly called by the JS engine
+      typeof propertyName === "symbol" || // Already bound?
+      boundProperties.has(propertyName)
+    ) {
+      return value;
+    }
+    return trackKey(
+      component,
+      (resolved) => {
+        if (resolved !== void 0) {
+          const propName = resolved.key;
+          boundProperties.set(propertyName, propName);
+          const descriptor = component.constructor.getPropertyOptions(
+            propName
+          );
+          if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+            if (!(propertyName in instance)) {
+              throw new Error(`"${propertyName}" does not exist on the accessor instance`);
             }
-            if (resolved !== void 0) {
-              watchedProperties.set(resolved.key, prop);
+            const accessorController = component.M[accessorControllerIndex];
+            if (descriptor.i !== void 0 && descriptor.i !== accessorControllerIndex) {
+              console.error(component.M[descriptor.i], accessorController);
+              throw Error(
+                `Expected property "${propName}" to be bound to the controller at index ${descriptor.i}, but tried to bind it to a controller at index ${accessorControllerIndex}. Double check whether you are calling useAccessor() conditionally in a way that is not supported.`
+              );
+            }
+            if (accessorController !== accessorControllerRef.deref()) {
+              console.error(accessorController);
+              throw Error(
+                `Expected controller at index ${accessorControllerIndex} to be instance of useAccessor but it is not.`
+              );
+            }
+            const isFlippingBoolean = resolved.key.toLowerCase().includes("disable");
+            const collidesWithNativeProp = propertyName in HTMLElement.prototype;
+            const collidesWithCustomProp = accessorControllerRef.deref().constructor.devOnly$allowedPropNameMismatches?.has(propName) === true;
+            if (resolved.key !== propertyName && !collidesWithNativeProp && !collidesWithCustomProp && !isFlippingBoolean) {
+              throw new Error(
+                `Tried to bind "${resolved?.key}" property to "${propertyName.toString()}" - property names must match`
+              );
+            }
+            if (!resolved.isReactive) {
+              throw new Error(
+                `For two-way binding with Accessor to work, the property on your component must have @property() or @state() decorator. "${propertyName.toString()}" has neither`
+              );
             }
-          },
-          value
-        );
-      }
-    }
-  ),
-  // Update Accessor on component prop change
-  watchComponentUpdates(controller, instance, watchedProperties) {
-    function getter(_value, propName) {
-      const propertyName = watchedProperties.get(propName);
-      const value = instance[propertyName];
-      const flipBoolean = typeof value === "boolean" && propertyName !== propName && propName.toLowerCase().includes("disable");
-      return flipBoolean ? !value : value;
-    }
-    const setter = (newValue, _oldValue, propName) => {
-      const propertyName = watchedProperties.get(propName);
-      const value = instance[propertyName];
-      const flipBoolean = typeof value === "boolean" && propertyName !== propName && propName.toLowerCase().includes("disable");
-      const currentValue = flipBoolean ? !value : value ?? void 0;
-      if (currentValue === newValue) {
-        return newValue;
-      }
-      instance[propertyName] = flipBoolean ? !newValue : newValue;
-      const finalValue = instance[propertyName];
-      return flipBoolean ? !finalValue : finalValue;
-    };
-    const manager = controller.component.manager;
-    watchedProperties.forEach((_propName, propertyName) => {
-      manager._accessorGetter[propertyName] = getter;
-      manager._accessorSetter[propertyName] = setter;
-    });
-  },
-  // Update component on Accessor prop change
-  watchAccessorUpdates(controller, instance, watchedProperties) {
-    const { component } = controller;
-    const genericComponent = component;
-    const genericInstance = instance;
-    const readonlyProps = findReadOnlyAccessorProps(instance);
-    if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
-      setReadonlyProps?.(controller, readonlyProps);
-    }
-    bypassGetter(
-      () => (
-        // Careful: Map's forEach callback arguments are (value, key), not (key, value)
-        watchedProperties.forEach((propertyName, propName) => {
-          if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && !(propertyName in instance)) {
-            throw new Error(`"${propertyName}" does not exist on the accessor instance`);
-          }
-          if (readonlyProps.has(propertyName)) {
-            return;
           }
-          const domValue = genericComponent[propName];
-          const modelValue = genericInstance[propertyName] ?? void 0;
-          const flipBoolean = typeof domValue === "boolean" && propertyName !== propName && propName.toLowerCase().includes("disable");
-          const resolvedDomValue = flipBoolean ? !domValue : domValue;
-          if (resolvedDomValue != null && modelValue !== resolvedDomValue) {
-            genericInstance[propertyName] = resolvedDomValue;
+          const shouldFlipBoolean = propertyName !== propName && propName.toLowerCase().includes("disable");
+          watchBoundProperty(accessorControllerRef, descriptor, propertyName, propName, shouldFlipBoolean);
+          if (descriptor.i === void 0) {
+            bindPropToProperty(descriptor, accessorControllerIndex, propertyName, shouldFlipBoolean);
           }
-        })
-      )
+        }
+      },
+      value
     );
-    controller.onLifecycle(() => {
-      if (instance.destroyed) {
-        return;
-      }
-      return Array.from(
-        watchedProperties,
-        ([propName, propertyName]) => watch(
-          () => genericInstance[propertyName],
-          () => {
-            const newValue = genericInstance[propertyName];
-            const flipBoolean = typeof newValue === "boolean" && propertyName !== propName && propName.toLowerCase().includes("disable");
-            const resolvedNewValue = flipBoolean ? !newValue : newValue;
-            bypassReadOnly(() => {
-              genericComponent[propName] = resolvedNewValue;
-            });
-          },
-          { initial: true }
-        )
-      );
-    });
   },
-  async reCreate(instance, component) {
-    const accessorController = component.manager.useRefSync(instance);
-    if (accessorController === void 0) {
-      if (process.env.NODE_ENV !== "production") {
-        console.error("Unable to resolve the useAccessor controller from the provided value");
-      }
-      return;
+  set(_target, propertyName, newValue) {
+    if (boundProperties.has(propertyName) || // But some properties may be never bound, yet set in the constructor - let them through
+    newValue !== (instance[propertyName] ?? void 0)) {
+      instance[propertyName] = newValue;
     }
-    await accessorController.reCreate();
+    return true;
   }
+});
+const watchBoundProperty = (controllerRef, descriptor, propertyName, propName, shouldFlipBoolean, _handle) => _handle = watch(
+  () => {
+    const controller = controllerRef.deref();
+    return controller === void 0 || controller.component.manager.destroyed ? (
+      // eslint-disable-next-line @typescript-eslint/no-confusing-void-expression
+      _handle = _handle.remove()
+    ) : controller.exports[propertyName];
+  },
+  (_, oldValue) => {
+    if (!_handle) {
+      return;
+    }
+    const component = controllerRef.deref().component;
+    component?.requestUpdate(propName, shouldFlipBoolean ? !oldValue : oldValue);
+    descriptor.c = false;
+  },
+  // At present, since useAccessor initializes the Accessor instance without
+  // any properties, it assumes that there is no need to do initial sync of
+  // accessor properties to the component, especially since the component
+  // setter always gets the newest value from the Accessor instance anyway.
+  // We might wish to change that if view model is shared between multiple
+  // components and has default value for some property. Even then, this issue
+  // will only manifest itself in default value not being reflected to
+  // attribute (). If fixing above becomes important, can do so by adding
+  // `initial: true` here and updating the above code to only call .notify()
+  // if hasChanged returns true (see reference implementation in
+  // _handleInstanceChanged). Not doing so yet as it is an edge case that is
+  // easy to work around and proper fix will add overhead to the startup of
+  // each component.
+  { sync: true }
+);
+const bindPropToProperty = (descriptor, accessorControllerIndex, propertyName, shouldFlipBoolean) => {
+  descriptor.d.get = function() {
+    const value = this.M[accessorControllerIndex]?.exports[propertyName];
+    return shouldFlipBoolean ? !value : value;
+  };
+  descriptor.d.set = function(newValue) {
+    this.M[accessorControllerIndex].exports[propertyName] = shouldFlipBoolean ? !newValue : newValue;
+  };
 };
-function findReadOnlyAccessorProps(instance) {
-  const accessor = instance;
-  const properties = Object.entries(accessor.__accessor__?.metadata ?? {});
-  return new Set(
-    properties.filter(([_property, descriptor]) => descriptor?.readOnly === true).map(([property]) => property)
-  );
-}
-const setReadonlyProps = process.env.NODE_ENV !== "production" && isEsriInternalEnv() ? (controller, properties) => {
-  devOnlySetPersistentControllerData?.(controller, properties);
-} : void 0;
-const filterWatchedProperties = process.env.NODE_ENV !== "production" && isEsriInternalEnv() ? (controller, data) => {
-  const readonlyProperties = devOnlyGetPersistentControllerData?.(controller);
-  if (readonlyProperties instanceof Set) {
-    return Object.fromEntries(Object.entries(data).filter(([key]) => !readonlyProperties.has(key)));
+const getAccessorControllerBoundProperties = (controller) => controller.Y;
+const reCreateAccessor = (instance, component) => {
+  const accessorController = component.manager.useRefSync(instance);
+  accessorController?.hostDestroy();
+  accessorController?.Z();
+  accessorController?.hostConnected();
+  if (process.env.NODE_ENV !== "production" && accessorController === void 0) {
+    console.error("Unable to resolve the useAccessor controller from the provided value");
   }
-  return data;
-} : void 0;
-function reEmitEvent(getEventedAccessor, eventName) {
+};
+const reEmitEvent = (getEventedAccessor, eventName) => {
   const component = retrieveComponent();
   const manager = component.manager;
   manager.onLoaded(() => manager.onLifecycle(() => on(getEventedAccessor, eventName, emitter.emit)));
@@ -250,10 +214,12 @@ function reEmitEvent(getEventedAccessor, eventName) {
     }
   }
   return emitter;
-}
+};
 export {
   AccessorController,
-  accessorSupport,
+  getAccessorControllerBoundProperties,
   makeAccessorController,
+  makeBinderProxy,
+  reCreateAccessor,
   reEmitEvent
 };

package/dist/controllers/accessor/reEmitEvent.d.ts

@@ -7,4 +7,4 @@ import { EventEmitter } from '../../createEvent';
  * arcgisGo = reEmitEvent<__esri.HomeViewModelGoEvent>(() => this.viewModel, "go");
  * ```
  */
-export declare function reEmitEvent<T>(getEventedAccessor: () => __esri.Evented, eventName: string): EventEmitter<T>;
+export declare const reEmitEvent: <T>(getEventedAccessor: () => __esri.Evented, eventName: string) => EventEmitter<T>;

package/dist/controllers/accessor/useAccessor.d.ts

@@ -1,16 +1,18 @@
 import { Controller, GenericController } from '../Controller';
 import { LitElement } from '../../LitElement';
-type Requires<Props, Accessor extends __esri.Accessor> = LitElement & Pick<Accessor, keyof Accessor & keyof Props> & {
+type Requires<Props, Accessor extends __esri.Accessor, OmitProps extends string = never> = LitElement & Omit<Pick<Accessor, keyof Accessor & keyof Props>, AlwaysOmit | OmitProps> & {
     autoDestroyDisabled: boolean;
     destroy: () => Promise<void>;
 };
+type AlwaysOmit = "addHandles" | "declaredClass" | "destroyed" | "hasHandles" | "initialized" | "removeHandles" | "set" | "watch";
 /**
  * Given an Accessor class, create a controller that will do two-way binding of
- * props between the component and the Accessor
+ * props between the component and the Accessor.
  *
- * See 4.accessor.tsx for documentation & examples
+ * See https://qawebgis.esri.com/components/lumina/controllers/useAccessor for
+ * documentation & examples.
  */
-export declare const makeAccessorController: <Props, Accessor extends __esri.Accessor, OmitProps extends string = never>(loadAccessor: ((props: Props) => Accessor | Promise<Accessor>) | (new (props: Props) => Accessor), _options?: {
+export declare const makeAccessorController: <Props, Accessor extends __esri.Accessor, OmitProps extends string = never>(createInstance: ((props?: Props) => Accessor) | (new (props?: Props) => Accessor), _options?: {
     /**
      * By default, to ensure that you didn't accidentally forget to bind any
      * of the Accessor's properties on your component, every property that
@@ -35,40 +37,35 @@ export declare const makeAccessorController: <Props, Accessor extends __esri.Acc
      * `makeAccessorController(..., {} as { omitProps: ["propName"] })`
      */
     omitProps: OmitProps[];
-}) => (component: Requires<Omit<Props, OmitProps>, Accessor>, options?: {
-    editConstructorProperties(props: Props): Promise<Props> | Props;
-}) => Accessor;
+}) => (component: Requires<Props, Accessor, OmitProps>) => Accessor;
 export declare class AccessorController<Props, Accessor extends __esri.Accessor, ExtraRequires = Record<never, never>> extends GenericController<Accessor, ExtraRequires & Requires<Props, Accessor>> {
-    private _loadAccessor;
-    private _options?;
-    protected _instance: Accessor;
-    protected _watchedProperties: Map<string, string & keyof Props>;
-    private _instancePropName;
-    private _isBinding;
+    #private;
+    protected instance: Accessor;
     /**
-     * (development only) Allow these props to mismatch the name of the Accessor's property
-     * to avoid collisions
+     * Use getAccessorControllerBoundProperties() helper to get access to this map
+     * @private
+     */
+    _boundAccessorProperties: Map<string & keyof Accessor, string>;
+    /**
+     * (development only) Allow these props to mismatch the name of the Accessor's
+     * property to avoid collisions
      *
      * @private
      */
-    static allowedPropNameMismatches?: Set<string>;
-    constructor(component: ExtraRequires & Requires<Props, Accessor>, _loadAccessor: ((props: Props) => Accessor | Promise<Accessor>) | (new (props: Props) => Accessor), _options?: {
-        editConstructorProperties?(props: Props): Promise<Props> | Props;
-    } | undefined);
+    static devOnly$allowedPropNameMismatches?: ReadonlySet<string>;
+    get exports(): Accessor;
+    set exports(value: Accessor);
+    constructor(component: ExtraRequires & Requires<Props, Accessor>, createInstance: ((props?: Props) => Accessor) | (new (props?: Props) => Accessor));
+    /** @private */
+    _createAccessorInstance(): void;
     hostConnected(): void;
-    hostLoad(): Promise<void>;
-    private _gatherParameters;
-    private _createInstance;
-    private _isAccessorConstructor;
     hostDestroy(): void;
-    reCreate(): Promise<void>;
 }
-export declare const accessorSupport: {
-    makeGetterProxy: (component: LitElement, watchedProperties: Map<string, string>, isBinding?: {
-        value: boolean;
-    }, allowedPropNameMismatches?: Set<string>) => unknown;
-    watchComponentUpdates<T>(controller: Controller<T>, instance: __esri.Accessor, watchedProperties: Map<string, string>): void;
-    watchAccessorUpdates<T>(controller: Controller<T>, instance: __esri.Accessor, watchedProperties: Map<string, string>): void;
-    reCreate(instance: __esri.Accessor, component: LitElement): Promise<void>;
-};
+export declare const makeBinderProxy: (component: LitElement, accessorControllerRef: WeakRef<Pick<Controller<__esri.Accessor>, "component" | "exports"> & {
+    constructor: (typeof __esri.Accessor)["constructor"] & {
+        devOnly$allowedPropNameMismatches?: ReadonlySet<string>;
+    };
+}>, accessorControllerIndex: number, instance: __esri.Accessor, boundProperties: Map<string, string>) => unknown;
+export declare const getAccessorControllerBoundProperties: <Accessor extends __esri.Accessor>(controller: AccessorController<unknown, Accessor>) => Map<string & keyof Accessor, string>;
+export declare const reCreateAccessor: (instance: __esri.Accessor, component: LitElement) => void;
 export {};

package/dist/controllers/index.d.ts

@@ -2,7 +2,7 @@ import { EventEmitter as _EventEmitter } from '../createEvent';
 export type { GenericControllerType } from './Controller';
 export { Controller, GenericController } from './Controller';
 export type { ControllerManager } from './ControllerManager';
-export { retrieveComponent, bypassGetter, bypassSetter, bypassReadOnly } from './ControllerInternals';
+export { retrieveComponent, bypassSetter, bypassReadOnly } from './ControllerInternals';
 export { trackPropertyKey, keyTrackResolve } from './trackPropertyKey';
 export { trackPropKey } from './trackPropKey';
 export { trackKey } from './trackKey';
@@ -17,7 +17,7 @@ export { useDirection } from './useDirection';
 export type { UseT9n, T9nMeta } from './useT9n';
 export { makeT9nController } from './useT9n';
 export { usePropertyChange } from './usePropertyChange';
-export { isController } from './utils';
+export { isController, getControllersCount } from './utils';
 /**
  * @deprecated import from "@arcgis/lumina" instead
  */