@arcgis/lumina 4.33.0-next.16 → 4.33.0-next.160

package/dist/controllers/accessor/index.js

@@ -0,0 +1,245 @@
+import { isEsriInternalEnv } from "@arcgis/components-utils";
+import { r as retrieveComponent, f as createEventFactory, G as GenericController, l as trackPropKey, t as trackKey } from "../../Controller-BQOv8BAL.js";
+import { on, watch } from "@arcgis/core/core/reactiveUtils.js";
+import { p as proxyExports } from "../../proxyExports-Cdzj7WL_.js";
+import { createObservable, trackAccess } from "@arcgis/core/applications/Components/reactiveUtils.js";
+import { property, subclass } from "@arcgis/core/core/accessorSupport/decorators.js";
+import Accessor from "@arcgis/core/core/Accessor.js";
+const reEmitEvent = (getEventedAccessor, eventName) => {
+  const component = retrieveComponent();
+  const manager = component.manager;
+  manager.onLoaded(() => manager.onLifecycle(() => on(getEventedAccessor, eventName, emitter.emit)));
+  const emitter = createEventFactory();
+  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+    if (typeof emitter !== "object" || emitter === null || !("emit" in emitter) || typeof emitter.emit !== "function") {
+      throw new Error(`Expected to find $createEvent static property on Lumina's LitElement`);
+    }
+  }
+  return emitter;
+};
+const makeAccessorController = (createInstance, _options) => (component) => proxy(component, createInstance);
+class AccessorController extends GenericController {
+  constructor(component, createInstance) {
+    super(component);
+    this.Y = /* @__PURE__ */ new Map();
+    this.A = void 0;
+    this.#exportsObservable = createObservable();
+    const that = this;
+    that.#createInstance = createInstance;
+    that.Z();
+    that.setProvisionalExports(
+      makeBinderProxy(
+        component,
+        new WeakRef(that),
+        component.M.length - 1,
+        that.instance,
+        that.Y
+      ),
+      false
+    );
+    trackPropKey(
+      component,
+      (resolved) => {
+        if (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);
+        }
+      },
+      that.exports
+    );
+  }
+  #isInstanceOwner;
+  #exportsObservable;
+  #createInstance;
+  get exports() {
+    trackAccess(this.#exportsObservable);
+    return super.exports;
+  }
+  set exports(value) {
+    super.exports = value;
+    this.#exportsObservable.notify();
+  }
+  /** @private */
+  Z() {
+    const that = this;
+    that.instance = "prototype" in that.#createInstance && "declaredClass" in that.#createInstance.prototype ? new that.#createInstance() : that.#createInstance();
+    that.#isInstanceOwner = true;
+  }
+  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.#isInstanceOwner) {
+      this.instance.destroy?.();
+    }
+  }
+}
+const proxy = proxyExports(AccessorController);
+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;
+    }
+    const accessorController = component.M[accessorControllerIndex];
+    accessorController.A = propertyName;
+    return trackKey(
+      component,
+      (resolved) => {
+        accessorController.A = void 0;
+        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`);
+            }
+            const accessorController2 = component.M[accessorControllerIndex];
+            if (descriptor.i !== void 0 && descriptor.i !== accessorControllerIndex) {
+              console.error(component.M[descriptor.i], accessorController2);
+              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 (accessorController2 !== accessorControllerRef.deref()) {
+              console.error(accessorController2);
+              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`
+              );
+            }
+          }
+          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
+    );
+  }
+});
+const watchBoundProperty = (controllerRef, descriptor, propertyName, propName, shouldFlipBoolean, _handle) => _handle = watch(
+  () => {
+    const controller = controllerRef.deref();
+    return controller === void 0 || controller.component.manager.destroyed ? _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) {
+    const accessorController = this.M[accessorControllerIndex];
+    if (accessorController.A !== propertyName) {
+      accessorController.exports[propertyName] = shouldFlipBoolean ? !newValue : newValue;
+    }
+  };
+};
+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");
+  }
+};
+const createStore = (defaultValues) => {
+  const SubClass = class extends Accessor {
+  };
+  Object.entries(defaultValues).forEach(([name, value]) => property({ value })(SubClass.prototype, name));
+  const State = subclass()(SubClass);
+  return new State();
+};
+const createLegacyStore = (defaultState) => {
+  const defaultValues = typeof defaultState === "function" ? defaultState() : defaultState;
+  const state = createStore(defaultValues);
+  return {
+    state,
+    get: (propName) => state[propName],
+    set: (propName, value) => state.set(propName, value),
+    onChange: (propName, callback) => watch(
+      () => state[propName],
+      (newValue) => callback(newValue),
+      { sync: true }
+    ).remove
+  };
+};
+export {
+  AccessorController,
+  createLegacyStore,
+  createStore,
+  getAccessorControllerBoundProperties,
+  makeAccessorController,
+  makeBinderProxy,
+  reCreateAccessor,
+  reEmitEvent
+};

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

@@ -0,0 +1,10 @@
+import { EventEmitter } from '../../createEvent';
+/**
+ * Re-emit an event from the accessor instance on the component
+ *
+ * @example
+ * ```tsx
+ * arcgisGo = reEmitEvent<__esri.HomeViewModelGoEvent>(() => this.viewModel, "go");
+ * ```
+ */
+export declare const reEmitEvent: <T>(getEventedAccessor: () => __esri.Evented, eventName: string) => EventEmitter<T>;

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

@@ -0,0 +1,17 @@
+import { default as Accessor } from '@arcgis/core/core/Accessor.js';
+/**
+ * See https://qawebgis.esri.com/components/lumina/controllers/useAccessor#createstore-utility
+ */
+export declare const createStore: <T extends Record<string, unknown>>(defaultValues: T | (() => T)) => __esri.Accessor & T;
+/** @deprecated Use {@link createStore} instead */
+export declare const createLegacyStore: <T extends Record<string, unknown>>(defaultState: T | (() => T)) => ObservableMap<T>;
+/** @deprecated Use {@link createStore} instead */
+export type ObservableMap<T> = {
+    state: Accessor & T;
+    /** @deprecated Use state[propertyName] instead */
+    get: <P extends keyof T>(propName: P & string) => T[P];
+    /** @deprecated Use state[propertyName]=value instead */
+    set: <P extends keyof T>(propName: P & string, value: T[P]) => void;
+    /** @deprecated Use reactiveUtils.watch instead */
+    onChange: <Key extends keyof T>(propName: Key, callback: (newValue: T[Key]) => void) => () => void;
+};

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

@@ -0,0 +1,76 @@
+import { GenericController } from '../Controller';
+import { LitElement } from '../../LitElement';
+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.
+ *
+ * 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>(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
+     * is accepted by the Accessor's constructor will be required to be bound
+     * on your component. If you do not wish to bind certain properties
+     * (or you wish to bind them but with a different type), you can omit
+     * them using this option.
+     *
+     * You can also bind the property to \@state rather than \@property if you
+     * wish to use it internally only:
+     * @example
+     * ```tsx
+     * \@State() timeZone = this.viewModel.timeZone;
+     * ```
+     *
+     * @remarks
+     * This option affects the TypeScript error checking only - it has
+     * no runtime impact. Thus, if you wish to save a few bytes in the
+     * bundle, rather than simply setting this property like
+     * `makeAccessorController(..., { omitProps: ["propName"] })`, you can
+     * set it like this:
+     * `makeAccessorController(..., {} as { omitProps: ["propName"] })`
+     */
+    omitProps: OmitProps[];
+}) => (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;
+    protected instance: Accessor;
+    /**
+     * Use getAccessorControllerBoundProperties() helper to get access to this map
+     * @private
+     */
+    _boundAccessorProperties: Map<string & keyof Accessor, string>;
+    /** @private */
+    _currentlyBindingPropertyName?: string;
+    /**
+     * (development only) Allow these props to mismatch the name of the Accessor's
+     * property to avoid collisions
+     *
+     * @private
+     */
+    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;
+    hostDestroy(): void;
+}
+type MinimalAccessorController = Pick<AccessorController<never, __esri.Accessor>, "_currentlyBindingPropertyName" | "exports"> & {
+    component: LitElement;
+};
+export declare const makeBinderProxy: (component: LitElement, accessorControllerRef: WeakRef<MinimalAccessorController & {
+    constructor: MinimalAccessorController["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/functional.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from '../LitElement';
+import { GenericControllerType, Controller } from './Controller';
+/**
+ * Controller is a function that takes a component instance and then can
+ * export some values to the component, or hook into component's lifecycle
+ *
+ * See controllers documentation for many example controllers and their usages
+ */
+export declare const makeController: <Exports>(constructor: (component: LitElement, controller: Controller<Exports>) => Exports | Promise<Exports>) => Exports;
+/**
+ * If your controller requires some specific properties to be present on the
+ * component, besides what's included in the LitElement, use
+ * makeGenericController
+ *
+ * When using a controller created using makeGenericController(), consumer must
+ * pass in "this" explicitly for proper type-checking. If controller was
+ * created using makeController(), that is not necessary
+ */
+export declare const makeGenericController: <Exports, Component = LitElement>(constructor: (component: Component & LitElement, controller: GenericControllerType<Exports, Component>) => Exports | Promise<Exports>) => (component: Component & LitElement) => Exports;

package/dist/controllers/index.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter as _EventEmitter } from '../createEvent';
+export type { GenericControllerType } from './Controller';
+export { Controller, GenericController } from './Controller';
+export type { ControllerManager } from './ControllerManager';
+export { retrieveComponent, bypassSetter, bypassReadOnly } from './ControllerInternals';
+export { trackPropertyKey, keyTrackResolve } from './trackPropertyKey';
+export { trackPropKey } from './trackPropKey';
+export { trackKey } from './trackKey';
+export { makeController, makeGenericController } from './functional';
+export { useWatchAttributes } from './useWatchAttributes';
+export { load } from './load';
+export { proxyExports } from './proxyExports';
+export { toFunction } from './toFunction';
+export * from './types';
+export { useMedia } from './useMedia';
+export { useDirection } from './useDirection';
+export type { UseT9n, T9nMeta } from './useT9n';
+export { makeT9nController } from './useT9n';
+export { usePropertyChange } from './usePropertyChange';
+export { isController, getControllersCount } from './utils';
+/**
+ * @deprecated import from "@arcgis/lumina" instead
+ */
+export type EventEmitter<T = undefined> = _EventEmitter<T>;

package/dist/controllers/index.js

@@ -0,0 +1,270 @@
+import { C as Controller, s as setAmbientComponent, i as isPromise, d as setParentController, e as retrieveParentControllers, t as trackKey, r as retrieveComponent, f as createEventFactory } from "../Controller-BQOv8BAL.js";
+import { G, h, g, c, n, m, k, l, j } from "../Controller-BQOv8BAL.js";
+import { p as proxyExports } from "../proxyExports-Cdzj7WL_.js";
+import { isServer } from "lit";
+import { observeAncestorsMutation, isEsriInternalEnv, getElementAttribute, getElementLocales, startLocaleObserver } from "@arcgis/components-utils";
+const makeController = (constructor) => proxy(void 0, constructor);
+const makeGenericController = (constructor) => (component) => proxy(
+  component,
+  /**
+   * GenericController is identical to Controller, in all except for typing.
+   * So dying a type-cast here so as not to needlessly add one more object
+   * to the prototype chain
+   */
+  constructor
+);
+class FunctionalController extends Controller {
+  constructor(component, constructor) {
+    super(component);
+    const originalExports = this.exports;
+    try {
+      setAmbientComponent(this.component);
+      const value = constructor(this.component, this);
+      const constructorChangedExports = this.exports !== originalExports;
+      if (isPromise(value)) {
+        if (!constructorChangedExports) {
+          this.setProvisionalExports(value);
+        }
+        const resolved = value.then((result) => {
+          this.exports = result;
+          super.catchUpLifecycle();
+        }).catch((error) => {
+          this.P.reject(error);
+          console.error(error);
+        });
+        this.onLoad(async () => await resolved);
+      } else {
+        if (!constructorChangedExports || value !== void 0) {
+          this.exports = value;
+        }
+        queueMicrotask(() => super.catchUpLifecycle());
+      }
+    } catch (error) {
+      this.P.reject(error);
+      console.error(error);
+    }
+  }
+  /** Noop - will be called in the constructor instead */
+  catchUpLifecycle() {
+    return;
+  }
+}
+const proxy = proxyExports(FunctionalController);
+const useWatchAttributes = (attributes, callback) => new AttributeWatchController(attributes, callback);
+class AttributeWatchController extends Controller {
+  #observer;
+  #attributes;
+  #callback;
+  constructor(attributes, callback) {
+    super();
+    if (isServer) {
+      return;
+    }
+    this.#attributes = attributes;
+    this.#callback = callback;
+    this.#observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (attributes.includes(mutation.attributeName)) {
+          callback.call(
+            this.component,
+            this.component.el.getAttribute(mutation.attributeName),
+            mutation.oldValue,
+            mutation.attributeName
+          );
+        }
+      });
+    });
+  }
+  hostConnected() {
+    this.#attributes.forEach((attribute) => {
+      if (this.component.el.hasAttribute(attribute)) {
+        this.#callback.call(this.component, null, this.component.el.getAttribute(attribute), attribute);
+      }
+    });
+    this.#observer.observe(this.component.el, {
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: this.#attributes
+    });
+  }
+  hostDisconnected() {
+    this.#observer.disconnect();
+  }
+}
+const load = makeController;
+const toFunction = (Class) => (...args) => {
+  const ambientControllers = retrieveParentControllers();
+  const instance = new Class(...args);
+  setParentController(ambientControllers.at(-1));
+  return instance;
+};
+const useMedia = (query) => makeController((_component, controller) => {
+  const media = globalThis.matchMedia(query);
+  const changed = () => {
+    controller.exports = media.matches;
+  };
+  changed();
+  controller.onLifecycle(() => {
+    media.addEventListener("change", changed);
+    return () => media.removeEventListener("change", changed);
+  });
+  return void 0;
+});
+const defaultDirection = "ltr";
+const useDirection = () => makeController((component, controller) => {
+  controller.exports = defaultDirection;
+  controller.onLifecycle(() => {
+    const callback = () => {
+      const dir = getElementAttribute(component.el, "dir", defaultDirection);
+      controller.exports = dir === "rtl" ? "rtl" : "ltr";
+    };
+    callback();
+    return observeAncestorsMutation(component.el, ["dir"], callback);
+  });
+  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+    trackKey(
+      component,
+      (resolved) => {
+        if (resolved?.key === "dir") {
+          throw new Error(
+            `Do not assign this controller to a prop called \`dir\` as that will overwrite the \`dir\` attribute on the host element - component should not be setting the \`dir\` attribute on itself. Instead, assign this controller to a property called \`direction\`.`
+          );
+        }
+      },
+      controller.exports
+    );
+  }
+  return void 0;
+});
+const makeT9nController = (getAssetPath) => (options = {}) => (
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  makeController((component, controller) => {
+    const locale = getElementLocales(component.el);
+    const pending = { ["_lang"]: locale.lang, ["_t9nLocale"]: locale.t9nLocale, ["_loading"]: true };
+    const componentWithOverrides = component;
+    controller.onLifecycle(
+      () => startLocaleObserver(
+        component.el,
+        () => getAssetPath("./assets"),
+        ({ t9nLocale, t9nStrings, lang }) => {
+          const withoutOverrides = {
+            ...t9nStrings,
+            ["_lang"]: lang,
+            ["_t9nLocale"]: t9nLocale,
+            ["_loading"]: false
+          };
+          controller.exports = withoutOverrides;
+          const label = t9nStrings.componentLabel;
+          if (typeof label === "string" && "label" in component && component.label == null) {
+            component.label ??= label;
+          }
+          applyOverrides(componentWithOverrides.messageOverrides);
+        },
+        options.name
+      )
+    );
+    const applyOverrides = (messageOverrides) => {
+      const currentValue = controller.exports;
+      const rawMessages = currentValue["_original"] ?? currentValue;
+      const updated = deepMerge(rawMessages, messageOverrides);
+      if (messageOverrides) {
+        updated["_original"] = rawMessages;
+      }
+      controller.exports = updated;
+    };
+    if ("messageOverrides" in componentWithOverrides) {
+      controller.onUpdate((changes) => {
+        if (changes.has("messageOverrides")) {
+          applyOverrides(componentWithOverrides.messageOverrides);
+        }
+      });
+    }
+    if (options.blocking) {
+      controller.setProvisionalExports(pending, false);
+      return controller.ready;
+    } else {
+      return pending;
+    }
+  })
+);
+const deepMerge = (original, overwrites) => {
+  if (!overwrites) {
+    return original;
+  }
+  const merged = { ...original };
+  Object.entries(overwrites).forEach(([key, value]) => {
+    if (typeof value === "object") {
+      merged[key] = deepMerge(original[key], value);
+    } else {
+      merged[key] = value ?? original[key];
+    }
+  });
+  return merged;
+};
+const usePropertyChange = (_component) => propertyChangeController;
+const eventName = "arcgisPropertyChange";
+const propertyChangeController = (...toWatch) => {
+  const component = retrieveComponent();
+  const eventEmitter = createEventFactory(eventName, void 0, component);
+  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+    toWatch.forEach((prop) => {
+      const descriptor = component.constructor.elementProperties.get(prop);
+      const isProp = descriptor !== void 0 && descriptor.state !== true;
+      if (!isProp) {
+        throw new Error(
+          `For usePropertyChange to emit event on "${prop}" property change, you should add @property() to ${prop} in ${component.el.localName}`
+        );
+      }
+    });
+  }
+  let isFirst = true;
+  component.manager.onUpdated((changes) => {
+    if (isFirst || !component.el.isConnected) {
+      isFirst = false;
+      return;
+    }
+    for (const name of toWatch) {
+      if (changes.has(name)) {
+        eventEmitter.emit({ name });
+      }
+    }
+  });
+  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+    trackKey(
+      component,
+      (resolution) => {
+        if (resolution === void 0 || resolution.isReactive || resolution.key !== eventName) {
+          throw new Error(
+            `For consistency, usePropertyChange must be assigned to an arcgisPropertyChange property and that property should not have @property() or @state() decorators: arcgisPropertyChange = usePropertyChange<this>()("prop1", "prop2");`
+          );
+        }
+      },
+      eventEmitter
+    );
+  }
+  return eventEmitter;
+};
+export {
+  Controller,
+  G as GenericController,
+  h as bypassReadOnly,
+  g as bypassSetter,
+  c as controllerSymbol,
+  n as getControllersCount,
+  m as isController,
+  k as keyTrackResolve,
+  load,
+  makeController,
+  makeGenericController,
+  makeT9nController,
+  proxyExports,
+  retrieveComponent,
+  toFunction,
+  trackKey,
+  l as trackPropKey,
+  j as trackPropertyKey,
+  useDirection,
+  useMedia,
+  usePropertyChange,
+  useWatchAttributes
+};

package/dist/controllers/load.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Load a value from a promise and provide it to the component
+ *
+ * Documentation: https://qawebgis.esri.com/components/lumina/controllers/load
+ */
+export declare const load: <T>(loader: () => Promise<T>) => T;