@arcgis/lumina 4.31.0-next.97 → 4.31.0

package/dist/index.js

@@ -61,11 +61,22 @@ import { Deferred, camelToKebab } from "@arcgis/components-utils";
 // src/devOnlyDetectIncorrectLazyUsages.ts
 function devOnlyDetectIncorrectLazyUsages(LitClass) {
   const genericPrototype = LitClass.prototype;
+  const firstGetter = Object.getOwnPropertyDescriptor(genericPrototype, "innerText");
+  const secondGetter = Object.getOwnPropertyDescriptor(genericPrototype, "innerHTML");
+  if (firstGetter === secondGetter && firstGetter !== void 0) {
+    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"
+    "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"
   ]);
   const customErrorMessages = {
     addEventListener: "use this.listen() or this.el.addEventListener()"
@@ -75,28 +86,36 @@ function devOnlyDetectIncorrectLazyUsages(LitClass) {
     ...Object.getOwnPropertyDescriptors(Element.prototype),
     ...Object.getOwnPropertyDescriptors(Node.prototype),
     ...Object.getOwnPropertyDescriptors(EventTarget.prototype)
-  }).filter(([key, { value }]) => typeof value === "function" && !allowList.has(key)).forEach(([key]) => {
-    genericPrototype[key] = (...args) => {
+  }).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 calling this.${key}() directly as it won't work correctly in lazy-builds. Instead, ${customErrorMessages[key] ?? `use this.el.${key}()`}`
+        `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 === "function") {
+      genericPrototype[key] = callback;
+    } else {
+      Object.defineProperty(genericPrototype, key, { get: callback, set: callback });
+    }
   });
 }
 
 // src/lifecycleSupport.ts
-function attachToAncestor(child, el) {
-  let ancestor = el;
+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 litParent._postLoad.promise;
     }
   }
   return false;
@@ -151,6 +170,7 @@ function createLazyElement([tagName, [load, compactMeta = ""]]) {
   };
   customElements.define(tagName, ProxyClass);
 }
+var defineProperty = Object.defineProperty;
 function parseCondensedProp(propAndAttribute) {
   const name = propAndAttribute.split(lazyMetaSubItemJoiner);
   return name.length === 1 ? [name[0], camelToKebab(name[0])] : name;
@@ -194,7 +214,10 @@ var ProxyComponent = class extends HtmlElement {
     if (ProxyClass._LitConstructor) {
       this._initializeComponent({ a: ProxyClass._LitConstructor });
     } else {
-      void ProxyClass._loadPromise.then(this._initializeComponent.bind(this)).catch(this._postLoaded.reject);
+      void ProxyClass._loadPromise.then(this._initializeComponent.bind(this)).catch((error) => {
+        console.error(error);
+        this._postLoaded.reject(error);
+      });
     }
     if (process.env.NODE_ENV !== "production") {
       ProxyClass._hmrInstances ??= [];
@@ -211,7 +234,7 @@ var ProxyComponent = class extends HtmlElement {
     this._syncMethods?.forEach(this._bindSync, this);
   }
   static _bindProp(propName) {
-    Object.defineProperty(this.prototype, propName, {
+    defineProperty(this.prototype, propName, {
       configurable: true,
       enumerable: true,
       get() {
@@ -226,7 +249,7 @@ var ProxyComponent = class extends HtmlElement {
     });
   }
   static _bindAsync(methodName) {
-    Object.defineProperty(this.prototype, methodName, {
+    defineProperty(this.prototype, methodName, {
       async value(...args) {
         if (!this._litElement) {
           await this._postLoaded.promise;
@@ -240,7 +263,7 @@ var ProxyComponent = class extends HtmlElement {
     });
   }
   static _bindSync(methodName) {
-    Object.defineProperty(this.prototype, methodName, {
+    defineProperty(this.prototype, methodName, {
       value(...args) {
         if (process.env.NODE_ENV === "development" && !this._litElement) {
           const ProxyClass = this.constructor;
@@ -313,7 +336,7 @@ var ProxyComponent = class extends HtmlElement {
       this._litElement?.connectedCallback();
     } else {
       queueMicrotask(() => {
-        this._ancestorLoad = attachToAncestor(this, this);
+        this._ancestorLoad = attachToAncestor(this);
       });
     }
   }
@@ -352,10 +375,23 @@ var ProxyComponent = class extends HtmlElement {
     const isFirstInitialization = !ProxyClass._LitConstructor;
     if (isFirstInitialization) {
       ProxyClass._LitConstructor = LitConstructor;
-      LitConstructor.prototype.removeAttribute = removeAttribute;
-      LitConstructor.prototype.setAttribute = setAttribute;
+      LitConstructor.prototype.removeAttribute = function(qualifiedName) {
+        HTMLElement.prototype.removeAttribute.call(this.el, qualifiedName);
+      };
+      LitConstructor.prototype.setAttribute = function(qualifiedName, value) {
+        HTMLElement.prototype.setAttribute.call(this.el, qualifiedName, value);
+      };
+      defineProperty(LitConstructor.prototype, "isConnected", {
+        get() {
+          return this.el.isConnected;
+        }
+      });
       if (process.env.NODE_ENV !== "production" && LitConstructor.shadowRootOptions !== noShadowRoot) {
-        devOnlyDetectIncorrectLazyUsages(Object.getPrototypeOf(LitConstructor));
+        let prototype = LitConstructor;
+        while (prototype && !Object.hasOwn(prototype, "lumina")) {
+          prototype = Object.getPrototypeOf(prototype);
+        }
+        devOnlyDetectIncorrectLazyUsages(LitConstructor);
       }
       customElements.define(lazyTagName, LitConstructor);
     }
@@ -381,26 +417,20 @@ var ProxyComponent = class extends HtmlElement {
       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 can not infer statically. For these attributes, lazy-loading version of your component won't work correctly, thus this must be resolved`
+          `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 can not infer statically. This is a non-critical issue, but does indicate that something is going wrong and should be fixed`
+          `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`
         );
       }
     }
     if (this.isConnected) {
-      litElement.connectedCallback();
+      litElement.connectedCallback?.();
     }
   }
 };
-function removeAttribute(qualifiedName) {
-  HTMLElement.prototype.removeAttribute.call(this.el, qualifiedName);
-}
-function setAttribute(qualifiedName, value) {
-  HTMLElement.prototype.setAttribute.call(this.el, qualifiedName, value);
-}
 function syncLitElement([key, value]) {
   this[key] = value;
 }
@@ -542,13 +572,6 @@ var LitElement = class _LitElement extends OriginalLitElement {
      * @internal
      */
     this._offspring = this.constructor.lazy?._offspring ?? [];
-    /**
-     * Promise that resolves once parent's load() completed. False if there is no
-     * parent
-     *
-     * @internal
-     */
-    this._ancestorLoad = this.constructor.lazy?._ancestorLoad;
     this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred2();
     this._enableUpdating = this.enableUpdating;
     this.enableUpdating = emptyFunction;
@@ -618,7 +641,12 @@ var LitElement = class _LitElement extends OriginalLitElement {
     const isFirstCall = !this.manager.connectedCalled;
     super.connectedCallback();
     if (isFirstCall) {
-      queueMicrotask(() => void this._load().catch(this._postLoaded.reject));
+      queueMicrotask(
+        () => void this._load().catch((error) => {
+          console.error(error);
+          this._postLoaded.reject(error);
+        })
+      );
     }
   }
   /**
@@ -652,7 +680,7 @@ var LitElement = class _LitElement extends OriginalLitElement {
   }
   /** Do asynchronous component load */
   async _load() {
-    const parentLoadPromise = this._ancestorLoad ?? attachToAncestor(this, this);
+    const parentLoadPromise = this.el._ancestorLoad ?? attachToAncestor(this.el);
     if (parentLoadPromise) {
       await parentLoadPromise;
     }
@@ -746,8 +774,9 @@ function makeRuntime(options) {
 }
 
 // src/jsx/jsx.ts
-import { directive as litDirective } from "lit-html/directive.js";
+import { directive as litDirective, Directive } from "lit-html/directive.js";
 import { noChange as litNoChange, nothing as litNothing } from "lit-html";
+var Fragment = void 0;
 var bindAttribute = void 0;
 var bindBooleanAttribute = void 0;
 var bindProperty = void 0;
@@ -755,6 +784,33 @@ var bindEvent = void 0;
 var nothing = litNothing;
 var noChange = litNoChange;
 var directive = litDirective;
+var DynamicHtmlValueDirective = class extends Directive {
+  update(part, [prop, value]) {
+    if (process.env.NODE_ENV !== "production") {
+      if (part.type !== 6) {
+        throw new Error("DynamicHtmlValueDirective can only be used in the element part position");
+      }
+      if (prop !== "value" && prop !== "defaultValue") {
+        throw new Error('Expected the first argument to DynamicHtmlValueDirective to be "value" or "defaultValue"');
+      }
+      if (typeof value === "object" && value != null) {
+        throw new Error(
+          `Tried to set an object as the value/defaultValue prop in a <${part.element.tagName}> element.`
+        );
+      }
+    }
+    const element = part.element;
+    const tagName = element.tagName;
+    if (prop === "value" ? tagName === "INPUT" : tagName === "BUTTON" || tagName === "DATA") {
+      element[prop] = value;
+    } else if (value != null) {
+      element.setAttribute("value", value);
+    } else {
+      element.removeAttribute("value");
+    }
+  }
+};
+var dynamicValueDirective = directive(DynamicHtmlValueDirective);
 
 // src/jsx/directives.ts
 import { classMap } from "lit-html/directives/class-map.js";
@@ -782,6 +838,7 @@ function createPrototypeProxy(tagName) {
   return customElement;
 }
 export {
+  Fragment,
   LitElement,
   bindAttribute,
   bindBooleanAttribute,
@@ -790,6 +847,7 @@ export {
   createEvent,
   createPrototypeProxy,
   directive,
+  dynamicValueDirective,
   handleComponentMetaUpdate,
   handleHmrUpdate,
   makeDefineCustomElements,