@arcgis/lumina 4.32.0-next.7 → 4.32.0-next.71

package/dist/LitElement.d.ts

@@ -3,7 +3,7 @@ import { LitElement as OriginalLitElement } from "lit";
 import type { LuminaPropertyDeclaration } from "@arcgis/components-controllers";
 import type { Runtime } from "./runtime";
 import type { ProxyComponent } from "./lazyLoad";
-import type { ToElement } from "./jsx/jsx";
+import type { ToElement } from "./jsx/types";
 type ComponentLifecycle = {
     connectedCallback?: () => void;
     disconnectedCallback?: () => void;
@@ -36,6 +36,9 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
     /** @internal */
     static runtime: Runtime;
     static tagName: string;
+    /**
+     * Customize Lit's default style handling to support non-shadow-root styles
+     */
     static finalizeStyles(styles?: CSSResultGroup): CSSResultOrNative[];
     static createProperty(name: PropertyKey, 
     /**
@@ -230,4 +233,12 @@ export declare class LitElement extends OriginalLitElement implements ComponentL
 type Listener<ThisType, EventType> = ((this: ThisType, event: EventType) => unknown) | {
     handleEvent(event: EventType): unknown;
 };
+/**
+ * List of tag names defined by this library.
+ *
+ * @private
+ */
+export type GlobalThisWithOwnTagNames = typeof globalThis & {
+    devOnly$ownTagNames?: Set<string>;
+};
 export {};

package/dist/PublicLitElement.d.ts

@@ -13,4 +13,5 @@ export declare class PublicLitElement extends HTMLElement {
      * });
      */
     componentOnReady(): Promise<this>;
+    private el;
 }

package/dist/chunk-J3BVM76V.js

@@ -0,0 +1,418 @@
+import {
+  lazyMetaGroupJoiner,
+  lazyMetaItemJoiner,
+  lazyMetaSubItemJoiner
+} from "./chunk-PGHUBTOM.js";
+
+// src/lazyLoad.ts
+import { Deferred, camelToKebab, isEsriInternalEnv } from "@arcgis/components-utils";
+
+// src/devOnlyDetectIncorrectLazyUsages.ts
+function devOnlyDetectIncorrectLazyUsages(LitClass) {
+  const genericPrototype = LitClass.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(genericPrototype, "innerText");
+  if (descriptor !== void 0 && descriptor.get === descriptor.set) {
+    return;
+  }
+  const allowList = /* @__PURE__ */ new Set([
+    // We shouldn't be overwriting this property
+    "constructor",
+    // Called by Lit - we proxy it to this.el in ProxyComponent
+    "setAttribute",
+    // Called by Lit SSR - we proxy it to this.el in ProxyComponent
+    "removeAttribute",
+    // Called by Lit - we proxy it to this.el in ProxyComponent
+    "isConnected",
+    // Called by Lit, but only in dev mode for warnings, so we don't have to proxy.
+    "localName",
+    // Called by Lit Context - we proxy it to this.el in ProxyComponent.
+    // Interestingly, they never call removeEventListener.
+    "addEventListener"
+  ]);
+  const customErrorMessages = {
+    addEventListener: "use this.listen() or this.el.addEventListener()"
+  };
+  Object.entries({
+    ...Object.getOwnPropertyDescriptors(HTMLElement.prototype),
+    ...Object.getOwnPropertyDescriptors(Element.prototype),
+    ...Object.getOwnPropertyDescriptors(Node.prototype),
+    ...Object.getOwnPropertyDescriptors(EventTarget.prototype)
+  }).forEach(([key, value]) => {
+    if (allowList.has(key)) {
+      return;
+    }
+    const callback = (...args) => {
+      if (key === "hasAttribute" && args[0] === "defer-hydration") {
+        return false;
+      }
+      throw new Error(
+        `You should not be trying to access this.${key} directly as it won't work correctly in lazy-builds. Instead, ${customErrorMessages[key] ?? `use this.el.${key}`}`
+      );
+    };
+    if (typeof value.value === "function") {
+      genericPrototype[key] = callback;
+    } else {
+      Object.defineProperty(genericPrototype, key, { get: callback, set: callback });
+    }
+  });
+}
+
+// src/lifecycleSupport.ts
+function attachToAncestor(child) {
+  let ancestor = child;
+  while (ancestor = ancestor.parentNode ?? ancestor.host) {
+    if (ancestor?.constructor?.lumina) {
+      const litParent = ancestor;
+      if (!litParent.manager?.loadedCalled) {
+        litParent._offspring.push(child);
+      }
+      return litParent._postLoad.promise;
+    }
+  }
+  return false;
+}
+
+// src/lazyLoad.ts
+var makeDefineCustomElements = (runtime, structure) => function defineCustomElements(windowOrOptions, options) {
+  if (!globalThis.customElements) {
+    return;
+  }
+  const resolvedOptions = options ?? windowOrOptions ?? {};
+  const resourcesUrl = resolvedOptions.resourcesUrl;
+  if (resourcesUrl) {
+    runtime.setAssetPath(resourcesUrl);
+  }
+  Object.entries(structure).forEach(createLazyElement);
+};
+function createLazyElement([tagName, [load, compactMeta = ""]]) {
+  if (customElements.get(tagName)) {
+    return;
+  }
+  const [compactObservedProps, compactAsyncMethods, compactSyncMethods] = compactMeta.split(lazyMetaGroupJoiner);
+  const observedProps = compactObservedProps ? compactObservedProps?.split(lazyMetaItemJoiner).map(parseCondensedProp) : void 0;
+  const observedProperties = observedProps?.map(([property]) => property);
+  const ProxyClass = class extends ProxyComponent {
+    static {
+      this.observedAttributes = observedProps?.map(([, attribute]) => attribute).filter((attribute) => attribute !== "");
+    }
+    static {
+      this._properties = observedProperties;
+    }
+    static {
+      this._asyncMethods = compactAsyncMethods ? compactAsyncMethods?.split(lazyMetaItemJoiner) : void 0;
+    }
+    static {
+      this._syncMethods = compactSyncMethods?.split(lazyMetaItemJoiner);
+    }
+    static {
+      this._name = tagName;
+    }
+    constructor() {
+      const isFirstInstanceOfType = !ProxyClass._loadPromise;
+      if (isFirstInstanceOfType) {
+        ProxyClass._loadPromise = load();
+        ProxyClass._initializePrototype();
+      }
+      super();
+    }
+  };
+  customElements.define(tagName, ProxyClass);
+  if (typeof process === "object" && process.env.NODE_ENV !== "production") {
+    globalThis.devOnly$ownTagNames?.add(tagName);
+  }
+}
+var defineProperty = Object.defineProperty;
+function parseCondensedProp(propAndAttribute) {
+  const name = propAndAttribute.split(lazyMetaSubItemJoiner);
+  return name.length === 1 ? [name[0], camelToKebab(name[0])] : name;
+}
+var HtmlElement = globalThis.HTMLElement ?? parseCondensedProp;
+var ProxyComponent = class extends HtmlElement {
+  constructor() {
+    super();
+    /** @internal */
+    this._store = {};
+    /**
+     * If attributeChangedCallback() is called before the LitElement is loaded,
+     * store the attributes here, and replay later
+     */
+    this._pendingAttributes = [];
+    /**
+     * Resolved once LitElement's load() is complete.
+     * Not read inside of this class, but needed for LitElement to determine if
+     * it's closest ancestor finished load()
+     */
+    this._postLoad = new Deferred();
+    /**
+     * Resolved once LitElement's loaded() is complete
+     */
+    this._postLoaded = new Deferred();
+    /**
+     * Direct offspring that should be awaited before loaded() is emitted
+     */
+    this._offspring = [];
+    if (typeof process === "object" && process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+      this._hmrSetProps = /* @__PURE__ */ new Set();
+      this._hmrSetAttributes = /* @__PURE__ */ new Set();
+      globalThis.devOnly$createdElements ??= [];
+      globalThis.devOnly$createdElements.push(new WeakRef(this));
+    }
+    this._saveInstanceProperties();
+    const ProxyClass = this.constructor;
+    if (ProxyClass._LitConstructor) {
+      this._initializeComponent({ a: ProxyClass._LitConstructor });
+    } else {
+      void ProxyClass._loadPromise.then(this._initializeComponent.bind(this)).catch((error) => {
+        this._postLoaded.reject(error);
+        setTimeout(() => {
+          throw error;
+        });
+      });
+    }
+    if (typeof process === "object" && 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
+      });
+    }
+  }
+  static {
+    this.lumina = true;
+  }
+  /** @internal */
+  static _initializePrototype() {
+    this._properties?.forEach(this._bindProp, this);
+    this._asyncMethods?.forEach(this._bindAsync, this);
+    this._syncMethods?.forEach(this._bindSync, this);
+  }
+  static _bindProp(propName) {
+    defineProperty(this.prototype, propName, {
+      configurable: true,
+      enumerable: true,
+      get() {
+        return this._store[propName];
+      },
+      set(value) {
+        this._store[propName] = value;
+        if (typeof process === "object" && process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+          this._hmrSetProps.add(propName);
+        }
+      }
+    });
+  }
+  static _bindAsync(methodName) {
+    defineProperty(this.prototype, methodName, {
+      async value(...args) {
+        if (!this._litElement) {
+          await this._postLoaded.promise;
+        }
+        const genericLitElement = this._litElement;
+        return await genericLitElement[methodName](...args);
+      },
+      configurable: true
+    });
+  }
+  static _bindSync(methodName) {
+    defineProperty(this.prototype, methodName, {
+      value(...args) {
+        if (typeof process === "object" && process.env.NODE_ENV !== "production" && !this._litElement) {
+          const ProxyClass = this.constructor;
+          throw new Error(
+            `Tried to call method ${methodName}() on <${ProxyClass._name}> component before it's fully loaded. Please do 'await component.componentOnReady();' before calling this method.`
+          );
+        }
+        const genericLitElement = this._litElement;
+        return genericLitElement[methodName](...args);
+      },
+      configurable: true
+    });
+  }
+  get manager() {
+    return this._litElement?.manager;
+  }
+  /**
+   * Until the custom element is registered on the page, an instance of that
+   * element can be constructed and some properties on that instance set.
+   *
+   * These properties are set before the element prototype is set to this proxy
+   * class and thus none of our getters/setters are yet registered - such
+   * properties will be set by JavaScript on the instance directly.
+   *
+   * Once element is registered, the properties set in the meanwhile will shadow
+   * the getter/setters, and thus break reactivity. The fix is to delete these
+   * properties from the instance, and re-apply them once accessors are set.
+   *
+   * @example
+   * ```ts
+   * import { defineCustomElements } from '@arcgis/map-components';
+   * const map = document.createElement('arcgis-map');
+   * // This will shadow the getter/setters
+   * map.itemId = '...';
+   * // This finally defines the custom elements and sets the property accessors
+   * defineCustomElements();
+   * ```
+   *
+   * @remarks
+   * This is an equivalent of the __saveInstanceProperties method in Lit's
+   * ReactiveElement. Lit takes care of this on LitElement, but we have to take
+   * care of this on the lazy proxy
+   */
+  _saveInstanceProperties() {
+    const ProxyClass = this.constructor;
+    const genericThis = this;
+    ProxyClass._properties?.forEach((propName) => {
+      if (Object.hasOwn(this, propName)) {
+        this._store[propName] = genericThis[propName];
+        delete genericThis[propName];
+      }
+    });
+  }
+  /*
+   * This method must be statically present rather than added later, or else,
+   * browsers won't call it. Same for connected and disconnected callbacks.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    this._litElement?.attributeChangedCallback(name, oldValue, newValue);
+    if (!this._litElement) {
+      this._pendingAttributes.push(name);
+    }
+    if (typeof process === "object" && process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+      this._hmrSetAttributes.add(name);
+    }
+  }
+  connectedCallback() {
+    if (this._litElement) {
+      this._litElement.connectedCallback?.();
+    } else {
+      queueMicrotask(() => {
+        this._ancestorLoad = attachToAncestor(this);
+      });
+    }
+  }
+  disconnectedCallback() {
+    this._litElement?.disconnectedCallback?.();
+  }
+  /**
+   * Create a promise that resolves once component is fully loaded
+   */
+  async componentOnReady() {
+    await this._postLoaded.promise;
+    return this;
+  }
+  /** @internal */
+  _initializeComponent(module) {
+    const ProxyClass = this.constructor;
+    const tagName = ProxyClass._name;
+    const store = this._store;
+    const LitConstructor = Object.values(module).find(
+      (LitConstructor2) => LitConstructor2.tagName === tagName
+    );
+    if (typeof process === "object" && process.env.NODE_ENV !== "production" && isEsriInternalEnv() && !LitConstructor) {
+      throw new Error(
+        `Unable to find the LitElement class for the "${tagName}" custom element in the lazy-loaded module`
+      );
+    }
+    const lazyTagName = typeof process === "object" && process.env.NODE_ENV !== "production" && isEsriInternalEnv() ? (ProxyClass._hmrIndex ?? 0) === 0 ? `${tagName}--lazy` : `${tagName}--lazy-${ProxyClass._hmrIndex}` : `${tagName}--lazy`;
+    let parentClass = LitConstructor;
+    while (parentClass && !Object.hasOwn(parentClass, "lumina")) {
+      parentClass = Object.getPrototypeOf(parentClass);
+    }
+    const litElementPrototype = parentClass.prototype;
+    const elementPrototype = Element.prototype;
+    const alreadyPatched = Object.hasOwn(litElementPrototype, "isConnected");
+    if (!alreadyPatched) {
+      litElementPrototype.setAttribute = function(qualifiedName, value) {
+        elementPrototype.setAttribute.call(this.el, qualifiedName, value);
+      };
+      litElementPrototype.removeAttribute = function(qualifiedName) {
+        elementPrototype.removeAttribute.call(this.el, qualifiedName);
+      };
+      defineProperty(litElementPrototype, "isConnected", {
+        get() {
+          return Reflect.get(elementPrototype, "isConnected", this.el);
+        }
+      });
+    }
+    if (typeof process === "object" && process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+      devOnlyDetectIncorrectLazyUsages(parentClass);
+    }
+    const isFirstInitialization = !ProxyClass._LitConstructor;
+    if (isFirstInitialization) {
+      ProxyClass._LitConstructor = LitConstructor;
+      customElements.define(lazyTagName, LitConstructor);
+    }
+    LitConstructor.lazy = this;
+    const litElement = document.createElement(lazyTagName);
+    LitConstructor.lazy = void 0;
+    if (typeof process === "object" && process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+      Object.defineProperty(this, "_litElement", {
+        value: litElement,
+        configurable: true,
+        enumerable: false
+      });
+    } else {
+      this._litElement = litElement;
+    }
+    this._store = litElement;
+    this._pendingAttributes.forEach((name) => {
+      const value = this.getAttribute(name);
+      litElement.attributeChangedCallback(
+        name,
+        // Lit doesn't look at this value, thus even if attribute already exists, that's ok
+        null,
+        value
+      );
+    });
+    Object.entries(store).forEach(syncLitElement, litElement);
+    if (typeof process === "object" && process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
+      const litObserved = LitConstructor.observedAttributes ?? [];
+      const lazyObserved = ProxyClass.observedAttributes ?? [];
+      const missingFromLazy = litObserved.filter((attribute) => !lazyObserved.includes(attribute));
+      const missingFromLit = lazyObserved.filter((attribute) => !litObserved.includes(attribute));
+      if (missingFromLazy.length > 0) {
+        console.warn(
+          `The following attributes on <${ProxyClass._name}> are present on the Lit element, but are missing from the lazy proxy component: ${missingFromLazy.join(", ")}. This either indicates a bug in Lumina, or you are creating the attribute dynamically in a way that compiler cannot infer statically. For these attributes, lazy-loading version of your component won't work correctly, thus this must be resolved`
+        );
+      }
+      if (missingFromLit.length > 0) {
+        console.warn(
+          `The following attributes on <${ProxyClass._name}> are defined on the lazy proxy component, but not on the actual Lit element: ${missingFromLit.join(", ")}. This either indicates a bug in Lumina, or you are creating the attribute dynamically in a way that compiler cannot infer statically. This is a non-critical issue, but does indicate that something is going wrong and should be fixed`
+        );
+      }
+    }
+    const isStillConnected = this.isConnected;
+    if (isStillConnected || this._ancestorLoad) {
+      litElement.connectedCallback?.();
+      if (!isStillConnected) {
+        litElement.disconnectedCallback();
+      }
+    }
+  }
+  /**
+   * Implemented on the proxy for compatibility with Lit Context.
+   */
+  addController() {
+  }
+  /**
+   * Implemented on the proxy for compatibility with Lit Context.
+   */
+  requestUpdate() {
+    this._litElement?.requestUpdate();
+  }
+};
+function syncLitElement([key, value]) {
+  this[key] = value;
+}
+
+// src/utils.ts
+var noShadowRoot = {};
+
+export {
+  attachToAncestor,
+  makeDefineCustomElements,
+  ProxyComponent,
+  noShadowRoot
+};

package/dist/{chunk-CH52Q2MB.js → chunk-PGHUBTOM.js}

@@ -2,9 +2,6 @@
 var lazyMetaGroupJoiner = ";";
 var lazyMetaItemJoiner = ",";
 var lazyMetaSubItemJoiner = ":";
-var defaultEventBubbles = true;
-var defaultEventCancelable = true;
-var defaultEventComposed = true;
 var PropertyFlags = /* @__PURE__ */ ((PropertyFlags2) => {
   PropertyFlags2[PropertyFlags2["ATTRIBUTE"] = 1] = "ATTRIBUTE";
   PropertyFlags2[PropertyFlags2["REFLECT"] = 2] = "REFLECT";
@@ -20,8 +17,5 @@ export {
   lazyMetaGroupJoiner,
   lazyMetaItemJoiner,
   lazyMetaSubItemJoiner,
-  defaultEventBubbles,
-  defaultEventCancelable,
-  defaultEventComposed,
   PropertyFlags
 };

package/dist/config.d.ts

@@ -6,14 +6,6 @@
 export declare const lazyMetaGroupJoiner = ";";
 export declare const lazyMetaItemJoiner = ",";
 export declare const lazyMetaSubItemJoiner = ":";
-/**
- * While these defaults don't match DOM defaults (all false), they match
- * Stencil and Shoelace defaults. Also, they make more sense for our
- * usage (i.e why would you want events to not be cancelable by default?)
- */
-export declare const defaultEventBubbles = true;
-export declare const defaultEventCancelable = true;
-export declare const defaultEventComposed = true;
 /**
  * By default in Lit, the `@property()` decorator accepts an object. However, to
  * keep the bundle size smaller, in production builds, instead of passing it an

package/dist/config.js

@@ -1,17 +1,11 @@
 import {
   PropertyFlags,
-  defaultEventBubbles,
-  defaultEventCancelable,
-  defaultEventComposed,
   lazyMetaGroupJoiner,
   lazyMetaItemJoiner,
   lazyMetaSubItemJoiner
-} from "./chunk-CH52Q2MB.js";
+} from "./chunk-PGHUBTOM.js";
 export {
   PropertyFlags,
-  defaultEventBubbles,
-  defaultEventCancelable,
-  defaultEventComposed,
   lazyMetaGroupJoiner,
   lazyMetaItemJoiner,
   lazyMetaSubItemJoiner

package/dist/context.d.ts

@@ -0,0 +1,26 @@
+import { type ControllerHost } from "@arcgis/components-controllers";
+import { ContextConsumer, ContextProvider, type Context, type ContextType } from "@lit/context";
+interface ContextProviderOptions<C extends Context<unknown, unknown>> {
+    context: C;
+    initialValue?: ContextType<C>;
+}
+interface ContextConsumerOptions<C extends Context<unknown, unknown>> {
+    context: C;
+    callback?: (value: ContextType<C>, dispose?: () => void) => void;
+    subscribe?: boolean;
+}
+/**
+ * Wrapper for Lit's ContextProvider controller to provide lazy-loading compatibility.
+ *
+ * @see https://lit.dev/docs/data/context/
+ */
+export declare function useContextProvider<C extends Context<unknown, unknown>>(options: ContextProviderOptions<C>): ContextProvider<C>;
+/**
+ * Wrapper for Lit's ContextConsumer controller to provide lazy-loading compatibility.
+ *
+ * @see https://lit.dev/docs/data/context/
+ *
+ * FEATURE: wrap this in proxyExports to improve DX, or keep it simple?
+ */
+export declare function useContextConsumer<C extends Context<unknown, unknown>>(options: ContextConsumerOptions<C>): ContextConsumer<C, ControllerHost & HTMLElement>;
+export {};

package/dist/createEvent.d.ts

@@ -1,4 +1,9 @@
-import type { EventEmitter } from "@arcgis/components-controllers";
+import type { BaseComponent, EventEmitter } from "@arcgis/components-controllers";
+/**
+ * While these defaults don't match DOM defaults (all false), they match
+ * Stencil and Shoelace defaults. Also, they make more sense for our
+ * usage (i.e why would you want events to not be cancelable by default?)
+ */
 export type EventOptions = {
     /**
      * A Boolean indicating whether the event bubbles up through the DOM or not.
@@ -22,7 +27,7 @@ export type EventOptions = {
      */
     composed?: boolean;
 };
-export declare const createEventFactory: <T = undefined>(eventName?: string, options?: EventOptions, component?: import("@arcgis/components-controllers").BaseComponent) => EventEmitter<T>;
+export declare const createEventFactory: <T = undefined>(eventName?: string, options?: EventOptions, component?: BaseComponent) => EventEmitter<T>;
 /**
  * Creates an event emitter.
  * Events emitted by your component will be included in the documentation.

package/dist/hmrSupport.d.ts

@@ -5,8 +5,11 @@ import type { ModuleNamespace } from "vite/types/hot.js";
  * @remarks
  * You should not need to call this function directly - it will be inserted
  * automatically when running in serve mode.
+ *
+ * @private
  */
 export declare function handleHmrUpdate(newModules: (ModuleNamespace | undefined)[]): void;
+/** @private */
 export type HmrComponentMeta = {
     readonly tagName: string;
     /**
@@ -25,5 +28,7 @@ export type HmrComponentMeta = {
  * @remarks
  * You should not need to call this function directly - it will be inserted
  * automatically when running in serve mode.
+ *
+ * @private
  */
 export declare function handleComponentMetaUpdate(meta: HmrComponentMeta): void;