@arcgis/lumina 4.33.0-next.97 → 4.33.0-next.99

package/dist/index.js

@@ -1,19 +1,18 @@
 import { ContextProvider, ContextConsumer } from "@lit/context";
-import { r as retrieveComponent } from "./useWatch-CFtSpNnN.js";
-import { c } from "./useWatch-CFtSpNnN.js";
+import { r as retrieveComponent, G as GenericController, k as keyTrackResolve, s as setAmbientComponent, a as shouldBypassGetter, b as shouldBypassReadOnly, c as controllerSymbol } from "./Controller-CZ8Djohh.js";
+import { d } from "./Controller-CZ8Djohh.js";
 import { state } from "@lit/reactive-element/decorators/state.js";
 import { property as property$1 } from "@lit/reactive-element/decorators/property.js";
-import { n as noShadowRoot, a as attachToAncestor } from "./utils-GhKD5Lo-.js";
-import { m } from "./utils-GhKD5Lo-.js";
-import { Deferred, isEsriInternalEnv, camelToKebab } from "@arcgis/components-utils";
-import { LitElement as LitElement$1, isServer, noChange as noChange$1 } from "lit";
+import { n as noShadowRoot, a as attachToAncestor } from "./utils-DBdf1Dqp.js";
+import { m } from "./utils-DBdf1Dqp.js";
+import { isEsriInternalEnv, safeCall, devToolsAwareTimeout, Deferred, camelToKebab, safeAsyncCall } from "@arcgis/components-utils";
+import { nothing as nothing$1, LitElement as LitElement$1, isServer, noChange as noChange$1 } from "lit";
 import { PropertyFlags } from "./config.js";
-import { u as useControllerManager } from "./ControllerManager-B2comd8J.js";
 import { classMap } from "lit-html/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
 import { directive as directive$1, Directive } from "lit-html/directive.js";
 import { live as live$1 } from "lit-html/directives/live.js";
-import { nothing as nothing$1, noChange as noChange$2, render } from "lit-html";
+import { nothing as nothing$2, noChange as noChange$2, render } from "lit-html";
 function useContextProvider(options) {
   const component = retrieveComponent();
   const controller = new ContextProvider(component.el, options);
@@ -28,12 +27,271 @@ function useContextConsumer(options) {
 }
 const property = property$1;
 const method = void 0;
+class ControllerManager extends GenericController {
+  constructor(component) {
+    super(component);
+    this.destroyed = false;
+    this._enforceReadonly = false;
+    this._trackedValue = nothing$1;
+    this._keyTrackers = [];
+    this._accessorGetter = {};
+    this._accessorSetter = {};
+    this._exportsStore = /* @__PURE__ */ new WeakMap();
+    this.exports = void 0;
+    this.hasDestroy = autoDestroyDisabledPropName in component && typeof component.destroy === "function";
+    LitElement$1.prototype.addController.call(component, {
+      // Lit will call these callbacks
+      // We do not directly implement hostConnected and etc on ControllerManager
+      // because ControllerManager is also included in the list of controllers
+      // we manage - and for each controller we manage we call hostConnected
+      // (from inside of .triggerConnected). So there would be an infinite
+      // loop if Lit calls hostConnected which in turn calls
+      // triggerConnected which calls hostConnected again.
+      hostConnected: () => {
+        if (this.destroyed) {
+          const tagName = component.el.localName;
+          component.el.remove();
+          throw new Error(
+            `The ${tagName} component has already been destroyed. It cannot be used again. If you meant to disconnect and reconnect a component without automatic destroy, set the ${autoDestroyDisabledPropName} prop.`
+          );
+        }
+        if (this._autoDestroyTimeout !== void 0) {
+          clearTimeout(this._autoDestroyTimeout);
+        }
+        keyTrackResolve();
+        for (const controller of component._controllers) {
+          if ("triggerConnected" in controller) {
+            controller.triggerConnected();
+          } else {
+            safeCall(controller.hostConnected, controller);
+          }
+        }
+      },
+      hostDisconnected: () => {
+        for (const controller of component._controllers) {
+          if ("triggerDisconnected" in controller) {
+            controller.triggerDisconnected();
+          } else {
+            safeCall(controller.hostDisconnected, controller);
+          }
+        }
+        if (this.hasDestroy && !this.destroyed) {
+          this._setAutoDestroyTimeout();
+        }
+      },
+      hostUpdate: () => {
+        for (const controller of component._controllers) {
+          if ("triggerUpdate" in controller) {
+            controller.triggerUpdate(this._changes);
+          } else {
+            safeCall(controller.hostUpdate, controller, this._changes);
+          }
+        }
+      },
+      hostUpdated: () => {
+        for (const controller of component._controllers) {
+          if ("triggerUpdated" in controller) {
+            controller.triggerUpdated(this._changes);
+          } else {
+            safeCall(controller.hostUpdated, controller, this._changes);
+          }
+        }
+        this._changes = void 0;
+      }
+    });
+    component.constructor.elementProperties.forEach((descriptor, name) => {
+      if (!descriptor.noAccessor) {
+        this._accessorGetter[name] = defaultGetterSetter;
+        this._accessorSetter[name] = defaultGetterSetter;
+        this._getSetProxy(name, descriptor.readOnly);
+      }
+    });
+    queueMicrotask(() => {
+      this._enforceReadonly = true;
+    });
+    setAmbientComponent(component);
+  }
+  // Keep this method async needlessly for now to avoid a breaking change if we
+  // would need to make it async in the future
+  // eslint-disable-next-line @typescript-eslint/require-await
+  async destroy() {
+    if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+      this._ensureHasDestroy?.();
+    }
+    if (this.destroyed) {
+      return;
+    }
+    if (this.component.el.isConnected) {
+      this.hasDestroy = false;
+      try {
+        this.component.el.remove();
+      } finally {
+        this.hasDestroy = true;
+      }
+    }
+    this._autoDestroyTimeout = void 0;
+    this.destroyed = true;
+    for (const controller of this.component._controllers) {
+      if ("triggerDestroy" in controller) {
+        controller.triggerDestroy();
+      } else {
+        safeCall(controller.hostDestroy, controller);
+      }
+    }
+    this.component._controllers.clear();
+  }
+  /** @private */
+  _setAutoDestroyTimeout() {
+    if (this._autoDestroyTimeout !== void 0) {
+      clearTimeout(this._autoDestroyTimeout);
+    }
+    if (!this.component.el.isConnected && !this.component.autoDestroyDisabled) {
+      const destroy = () => void this.component.destroy();
+      if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && autoDestroyOnDisconnectTimeout === 0) ;
+      else {
+        this._autoDestroyTimeout = devToolsAwareTimeout(destroy, autoDestroyOnDisconnectTimeout);
+      }
+    }
+  }
+  /** @private */
+  _firePropTrackers(key, value) {
+    const trackers = this._keyTrackers;
+    this._trackedValue = nothing$1;
+    this._keyTrackers = [];
+    trackers.forEach((tracker) => tracker(key, value));
+  }
+  // REFACTOR: once Stencil is no longer supported, simplify this with Lit's getPropertyDescriptor(), or https://github.com/shoelace-style/shoelace/issues/1990
+  /**
+   * Configure a getter or setter for a given \@property/\@state
+   *
+   * Since props are defined on the prototype, they are shared between all
+   * instances of a component. Thus, instead of passing a reference to the
+   * getter/setter function, you should update the
+   * ComponentInternals.getters/setters properties, and then call getSetProxy
+   * to apply the changes to the prototype
+   *
+   * @deprecated
+   */
+  _getSetProxy(name, isReadOnly) {
+    let prototype = this.component.constructor.prototype;
+    let descriptor;
+    do {
+      descriptor = Object.getOwnPropertyDescriptor(prototype, name);
+    } while (!descriptor && (prototype = Object.getPrototypeOf(prototype)));
+    if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+      if (descriptor?.set === void 0 || descriptor.get === void 0) {
+        if (descriptor !== void 0 && "value" in descriptor) {
+          throw new Error(
+            `getSet() should only be used on @property/@state properties. For internal component properties, use regular get/set syntax. Tried to use it on "${name}" in ${this.component.el.localName}`
+          );
+        } else {
+          throw new Error(`Unable to find "${name}" property on the ${this.component.el.localName} component`);
+        }
+      }
+    } else if (!descriptor) {
+      return;
+    }
+    const originalGet = descriptor.get;
+    const originalSet = descriptor.set;
+    const isGetterAlreadyOverwritten = customAccessor in originalGet;
+    const isSetterAlreadyOverwritten = customAccessor in originalSet;
+    if (isGetterAlreadyOverwritten && isSetterAlreadyOverwritten) {
+      return;
+    }
+    const shouldOverwriteGet = !isGetterAlreadyOverwritten;
+    const shouldOverwriteSet = !isSetterAlreadyOverwritten;
+    const finalGetter = shouldOverwriteGet ? function getter() {
+      const value = originalGet.call(this);
+      if (shouldBypassGetter) {
+        return value;
+      }
+      return this.manager._accessorGetter[name](value, name);
+    } : originalGet;
+    const finalSetter = shouldOverwriteSet ? function setter(rawNewValue) {
+      const oldValue = originalGet.call(this);
+      let newValue = rawNewValue ?? void 0;
+      const manager = this.manager;
+      if (newValue !== oldValue) {
+        if (isReadOnly && !shouldBypassReadOnly && (manager._enforceReadonly || manager.connectedCalled)) {
+          throw new Error(
+            `Cannot assign to read-only property "${name}" of ${this.el.localName}. Trying to assign "${String(
+              newValue
+            )}"`
+          );
+        }
+        newValue = manager._accessorSetter[name](newValue, oldValue, name);
+      }
+      originalSet.call(this, newValue);
+      if (manager._keyTrackers.length > 0) {
+        manager?._firePropTrackers(name, rawNewValue);
+      }
+    } : originalSet;
+    if (shouldOverwriteGet) {
+      finalGetter[customAccessor] = true;
+    }
+    if (shouldOverwriteSet) {
+      finalSetter[customAccessor] = true;
+    }
+    Object.defineProperty(prototype, name, { ...descriptor, get: finalGetter, set: finalSetter });
+  }
+  /**
+   * Associate an exports object with a controller for reverse lookup in
+   * controller.use
+   *
+   * @private
+   */
+  _markExports(controller, exports) {
+    if (typeof exports === "object" && exports !== null || typeof exports === "function") {
+      this._exportsStore.set(exports, controller);
+    }
+  }
+  /** @private */
+  _resolveExports(exports) {
+    if (typeof exports === "object" && exports !== null || typeof exports === "function") {
+      return this._exportsStore.get(exports);
+    } else {
+      return void 0;
+    }
+  }
+}
+if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+  ControllerManager.prototype._ensureHasDestroy = function ensureHasDestroy() {
+    if (!this.hasDestroy) {
+      throw new Error(
+        `
+          If the component uses a controller that uses destroy() method, then the
+          component must have the following properties:
+          /**
+           * If true, the component will not be destroyed automatically when it is
+           * disconnected from the document. This is useful when you want to move the
+           * component to a different place on the page, or temporarily hide it. If this
+           * is set, make sure to call the \`destroy\` method when you are done to prevent
+           * memory leaks.
+           */
+          @property() ${autoDestroyDisabledPropName} = false;
+
+          /** Permanently destroy the component */
+          @method()
+          async destroy(): Promise<void> {
+            await this.manager.destroy();
+          }
+          `.trim().split("\n").map((line) => line.trim()).join("\n")
+      );
+    }
+  };
+}
+let autoDestroyOnDisconnectTimeout = 1e3;
+const autoDestroyDisabledPropName = "autoDestroyDisabled";
+process.env.NODE_ENV !== "production" && isEsriInternalEnv() ? {} : void 0;
+const defaultGetterSetter = (value) => value;
+const customAccessor = Symbol();
 const emptyFunction = () => void 0;
 class LitElement extends LitElement$1 {
   constructor() {
     super();
     this.el = this.constructor.lazy ?? this;
-    this.manager = useControllerManager(this);
+    this._controllers = /* @__PURE__ */ new Set();
+    this.manager = new ControllerManager(this);
     this._postLoad = this.constructor.lazy?._postLoad ?? new Deferred();
     this._offspring = this.constructor.lazy?._offspring ?? [];
     this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred();
@@ -53,6 +311,22 @@ class LitElement extends LitElement$1 {
       }
       if (isEsriInternalEnv()) {
         globalThis.devOnly$luminaComponentRefCallback?.(this);
+        const stencilToLitMapping = {
+          componentDidLoad: "loaded",
+          componentDidRender: "updated",
+          componentDidUpdate: "updated",
+          componentShouldUpdate: "shouldUpdate",
+          componentWillLoad: "load",
+          componentWillRender: "willUpdate",
+          componentWillUpdate: "willUpdate"
+        };
+        Object.entries(stencilToLitMapping).forEach(([stencilMethod, litMethod]) => {
+          if (stencilMethod in this) {
+            throw new Error(
+              `Unexpected ${stencilMethod}() in a Lit component ${this.el.localName}. In Lit, you should use ${litMethod}() instead`
+            );
+          }
+        });
       }
     }
     if (isServer) {
@@ -162,7 +436,21 @@ class LitElement extends LitElement$1 {
     if (parentLoadPromise) {
       await parentLoadPromise;
     }
-    await this.manager._load();
+    const promises = [];
+    for (const controller of this._controllers) {
+      if ("triggerLoad" in controller) {
+        promises.push(controller.triggerLoad());
+      } else {
+        promises.push(safeAsyncCall(controller.hostLoad, controller));
+      }
+    }
+    await Promise.all(promises);
+    await this.load?.();
+    if (this.manager.hasDestroy) {
+      this.manager.onUpdate(
+        (changes) => changes.has(autoDestroyDisabledPropName) && this.manager._setAutoDestroyTimeout()
+      );
+    }
     this._enableUpdating(true);
     this.performUpdate();
     this._postLoad.resolve();
@@ -173,7 +461,14 @@ class LitElement extends LitElement$1 {
     }
     this._offspring.length = 0;
     this.el.setAttribute(this.constructor.runtime.hydratedAttribute, "");
-    this.manager._loaded();
+    for (const controller of this._controllers) {
+      if ("triggerLoaded" in controller) {
+        controller.triggerLoaded();
+      } else {
+        safeCall(controller.hostLoaded, controller);
+      }
+    }
+    this.loaded?.();
     this._postLoaded.resolve();
   }
   /**
@@ -181,7 +476,7 @@ class LitElement extends LitElement$1 {
    * "changedProperties" so that we can later provide it to ControllerManager
    */
   shouldUpdate(_changedProperties) {
-    this.$changes = _changedProperties;
+    this.manager._changes = _changedProperties;
     return this._originalShouldUpdate?.(_changedProperties) ?? true;
   }
   listen(name, listener, options) {
@@ -212,6 +507,28 @@ class LitElement extends LitElement$1 {
     await this._postLoaded.promise;
     return this;
   }
+  /**
+   * Adds a controller to the host, which connects the controller's lifecycle
+   * methods to the host's lifecycle.
+   *
+   * @remarks
+   * Even though Lit's LitElement already has addController,
+   * we overwrite it with a compatible version to have more control over
+   * timing, and to add support for load/loaded lifecycle hooks.
+   */
+  addController(controller) {
+    this._controllers.add(controller);
+    if (!(controllerSymbol in controller) && this.renderRoot && this.el.isConnected) {
+      controller.hostConnected?.();
+    }
+  }
+  /**
+   * Removes a controller from the host.
+   */
+  removeController(controller) {
+    this._controllers.delete(controller);
+    controller.controllerRemoved?.();
+  }
 }
 if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
   const globalWithLit = globalThis;
@@ -289,7 +606,7 @@ const deferLoad = /* @__PURE__ */ directive$1(DeferLoad)();
 const deferredLoaders = /* @__PURE__ */ new Map();
 const directive = directive$1;
 const live = live$1;
-const nothing = nothing$1;
+const nothing = nothing$2;
 const noChange = noChange$2;
 function setAttribute(element, attributeName, value) {
   if (value == null) {
@@ -353,7 +670,7 @@ export {
   bindBooleanAttribute,
   bindEvent,
   bindProperty,
-  c as createEvent,
+  d as createEvent,
   deferLoad,
   deferredLoaders,
   directive,

package/dist/lazyLoad.d.ts

@@ -47,32 +47,32 @@ declare const HtmlElement: {
  * component, so as to have identical DOM structure for lazy vs non-lazy builds
  * (otherwise, css selectors may break)
  *
- * @internal
+ * @private
  */
 export declare abstract class ProxyComponent extends HtmlElement {
     static observedAttributes?: readonly string[];
-    /** @internal */
+    /** @private */
     static _loadPromise: Promise<Record<string, typeof LitElement>> | undefined;
-    /** @internal */
+    /** private */
     static _LitConstructor?: typeof LitElement;
     /**
      * A list of instances of this component. This allows hot module replacement
      * to update all proxy component to use a new LitElement instance.
      *
-     * @internal
+     * private
      */
     static _hmrInstances: WeakRef<ProxyComponent>[] | undefined;
-    /** @internal */
+    /** private */
     static _hmrIndex: number | undefined;
-    /** @internal */
+    /** private */
     static _properties?: readonly string[];
-    /** @internal */
+    /** private */
     static _asyncMethods?: readonly string[];
-    /** @internal */
+    /** private */
     static _syncMethods?: readonly string[];
     protected static _name: string;
     static readonly lumina = true;
-    /** @internal */
+    /** private */
     static _initializePrototype(): void;
     private static _bindProp;
     private static _bindAsync;
@@ -81,14 +81,14 @@ export declare abstract class ProxyComponent extends HtmlElement {
      * On HMR, preserve the values of all properties that at least once were set
      * by someone other than component itself.
      *
-     * @internal
+     * private
      */
     _hmrSetProps: Set<PropertyKey>;
-    /** @internal */
+    /** private */
     _hmrSetAttributes: Set<string>;
-    /** @internal */
+    /** private */
     _litElement: LitElement | undefined;
-    /** @internal */
+    /** private */
     _store: LitElement | Record<string, unknown>;
     /**
      * If attributeChangedCallback() is called before the LitElement is loaded,
@@ -153,7 +153,7 @@ export declare abstract class ProxyComponent extends HtmlElement {
      * Create a promise that resolves once component is fully loaded
      */
     componentOnReady(): Promise<this>;
-    /** @internal */
+    /** private */
     _initializeComponent(module: Record<string, typeof LitElement>): void;
     /**
      * Implemented on the proxy for compatibility with Lit Context.

package/dist/proxyExports-CK5BLFLO.js

@@ -0,0 +1,60 @@
+import { e as setParentController, f as retrieveParentControllers, u as setAmbientChildController, t as trackKey, l as bypassReadOnly } from "./Controller-CZ8Djohh.js";
+const proxyExports = (Class) => (...args) => {
+  const ambientControllers = retrieveParentControllers();
+  const instance = new Class(...args);
+  const initialExports = instance.exports;
+  setParentController(ambientControllers.at(-1));
+  const manager = instance.component.manager;
+  manager._markExports(instance, initialExports);
+  instance.watchExports((exports) => manager._markExports(instance, exports));
+  setAmbientChildController(instance);
+  const hostCandidates = [instance.component, ...ambientControllers].reverse();
+  return trackKey(
+    hostCandidates,
+    (resolution) => resolution === void 0 ? void 0 : setProxy(instance, resolution, initialExports),
+    initialExports
+  );
+};
+function setProxy(controller, { host, key, isReactive: assignedToProp }, initialExports) {
+  const genericHost = host;
+  const controllerValueChanged = genericHost[key] !== controller.exports;
+  const hostValueChanged = genericHost[key] !== initialExports;
+  const controllerUpdatedExports = initialExports !== controller.exports;
+  if (controllerValueChanged && !hostValueChanged && controllerUpdatedExports) {
+    genericHost[key] = controller.exports;
+  }
+  const isProxyExportsOnComponent = host === controller.component;
+  if (isProxyExportsOnComponent) {
+    if (assignedToProp) {
+      const manager = controller.component.manager;
+      if (hostValueChanged) {
+        manager._markExports(controller, genericHost[key]);
+      }
+      controller.onUpdate((changes) => {
+        if (changes.has(key)) {
+          const value = genericHost[key];
+          if (value !== controller.exports) {
+            manager._markExports(controller, value);
+          }
+        }
+      });
+    }
+    controller.assignedProperty = assignedToProp ? void 0 : key;
+  }
+  const isReadOnly = controller.component.constructor.elementProperties.get(key)?.readOnly;
+  controller.watchExports(() => {
+    if (genericHost[key] === controller.exports) {
+      return;
+    }
+    if (isReadOnly) {
+      bypassReadOnly(() => {
+        genericHost[key] = controller.exports;
+      });
+    } else {
+      genericHost[key] = controller.exports;
+    }
+  });
+}
+export {
+  proxyExports as p
+};

package/dist/{utils-GhKD5Lo-.js → utils-DBdf1Dqp.js}

@@ -163,17 +163,13 @@ class ProxyComponent extends HtmlElement {
     if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
       ProxyClass._hmrInstances ??= [];
       ProxyClass._hmrInstances.push(new WeakRef(this));
-      Object.defineProperty(this, "_store", {
-        value: this._store,
-        enumerable: false,
-        configurable: true
-      });
+      Object.defineProperty(this, "_store", { value: this._store, enumerable: false, configurable: true });
     }
   }
   static {
     this.lumina = true;
   }
-  /** @internal */
+  /** private */
   static _initializePrototype() {
     this._properties?.forEach(this._bindProp, this);
     this._asyncMethods?.forEach(this._bindAsync, this);
@@ -293,7 +289,7 @@ class ProxyComponent extends HtmlElement {
     await this._postLoaded.promise;
     return this;
   }
-  /** @internal */
+  /** private */
   _initializeComponent(module) {
     const ProxyClass = this.constructor;
     const tagName = ProxyClass._name;
@@ -321,11 +317,7 @@ class ProxyComponent extends HtmlElement {
     const litElement = document.createElement(lazyTagName);
     LitConstructor.lazy = void 0;
     if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
-      Object.defineProperty(this, "_litElement", {
-        value: litElement,
-        configurable: true,
-        enumerable: false
-      });
+      Object.defineProperty(this, "_litElement", { value: litElement, configurable: true, enumerable: false });
     } else {
       this._litElement = litElement;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/lumina",
-  "version": "4.33.0-next.97",
+  "version": "4.33.0-next.99",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -22,7 +22,7 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@arcgis/components-utils": "4.33.0-next.97",
+    "@arcgis/components-utils": "4.33.0-next.99",
     "@lit-labs/ssr": "^3.2.2",
     "@lit-labs/ssr-client": "^1.1.7",
     "@lit/context": "^1.1.3",