@arcgis/lumina 4.33.0-next.10 → 4.33.0-next.101

package/dist/index.js

@@ -1,13 +1,18 @@
-import {
-  attachToAncestor,
-  makeDefineCustomElements,
-  noShadowRoot
-} from "./chunk-NO7HOBNA.js";
-import "./chunk-PGHUBTOM.js";
-
-// src/context.ts
-import { retrieveComponent } from "@arcgis/components-controllers";
-import { ContextConsumer, ContextProvider } from "@lit/context";
+import { ContextProvider, ContextConsumer } from "@lit/context";
+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-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 { 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$2, noChange as noChange$2, render } from "lit-html";
 function useContextProvider(options) {
   const component = retrieveComponent();
   const controller = new ContextProvider(component.el, options);
@@ -20,120 +25,308 @@ function useContextConsumer(options) {
   component.addController(controller);
   return controller;
 }
-
-// src/createEvent.ts
-import { retrieveComponent as retrieveComponent2, keyTrackResolve, trackKey } from "@arcgis/components-controllers";
-import { isEsriInternalEnv } from "@arcgis/components-utils";
-var createEventFactory = (eventName = "", options = {}, component = retrieveComponent2()) => {
-  const emitter = {
-    emit: (payload) => {
-      if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && !component.el.isConnected) {
-        console.warn(
-          `Trying to emit an ${eventName} event on a disconnected element ${component.el.tagName.toLowerCase()}`
-        );
-      }
-      if (eventName === "") {
+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();
-        if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && eventName === "") {
-          throw new Error("Unable to resolve event name from property name");
+        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);
       }
-      const event = new CustomEvent(eventName, {
-        detail: payload,
-        cancelable: true,
-        bubbles: true,
-        composed: true,
-        ...options
-      });
-      component.el.dispatchEvent(event);
-      return event;
+    });
+    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 (eventName === "") {
-    trackKey(
-      void 0,
-      (resolution) => {
-        if (process.env.NODE_ENV !== "production" && isEsriInternalEnv() && resolution === void 0) {
-          throw new Error(`createEvent must be called in property default value only`);
+    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`);
         }
-        eventName = resolution.key;
-      },
-      emitter
-    );
+      }
+    } 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 });
   }
-  return emitter;
-};
-var createEvent = createEventFactory.bind(null, "");
-
-// src/decorators.ts
-import { state } from "@lit/reactive-element/decorators/state.js";
-import { property as litProperty } from "@lit/reactive-element/decorators/property.js";
-var property = litProperty;
-var method = void 0;
+  /**
+   * 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;
 
-// src/LitElement.ts
-import { Deferred, camelToKebab, isEsriInternalEnv as isEsriInternalEnv2 } from "@arcgis/components-utils";
-import { LitElement as OriginalLitElement, isServer } from "lit";
-import { useControllerManager } from "@arcgis/components-controllers";
-var emptyFunction = () => void 0;
-var LitElement = class _LitElement extends OriginalLitElement {
+          /** 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();
-    /**
-     * In lazy build, the actual DOM element differs from the class instance:
-     * - "this.el" is a proxy custom element - it's physically present in the DOM
-     *   even before the Lit component is loaded.
-     * - "this" is the actual Lit component - in case of Lazy builds, it's
-     *   never directly attached to the DOM. Instead, all interactions with the
-     *   proxy are forwarded to the actual Lit component. And, when Lit wants to
-     *   render, it renders into the shadow root of the proxy.
-     *
-     * "this.el" should be used instead of "this" for all things involving the
-     * DOM (addEventListener, querySelector, children, setAttribute,
-     * MutationObserver, etc...)
-     *
-     * @example
-     * ```ts
-     * // Generally, you shouldn't have to write logic specific to lazy or non-lazy
-     * // build, but if you have to, you can detect if you are in a lazy build like so:
-     * const isLazy = this.el !== this;
-     * ```
-     */
     this.el = this.constructor.lazy ?? this;
-    /**
-     * Controller Manager orchestrates all controllers used by this component,
-     * connecting their lifecycle hooks and providing context information.
-     */
-    this.manager = useControllerManager(this);
-    /** @internal */
+    this._controllers = /* @__PURE__ */ new Set();
+    this.manager = new ControllerManager(this);
     this._postLoad = this.constructor.lazy?._postLoad ?? new Deferred();
-    /**
-     * Direct offspring that should be awaited before loaded() is emitted.
-     *
-     * `attachToAncestor()` will add elements to this array
-     *
-     * @internal
-     */
     this._offspring = this.constructor.lazy?._offspring ?? [];
     this._postLoaded = this.constructor.lazy?._postLoaded ?? new Deferred();
     this._enableUpdating = this.enableUpdating;
     this.enableUpdating = emptyFunction;
-    const ourShouldUpdate = _LitElement.prototype.shouldUpdate;
+    const ourShouldUpdate = LitElement.prototype.shouldUpdate;
     if (this.shouldUpdate !== ourShouldUpdate) {
       this._originalShouldUpdate = this.shouldUpdate;
       this.shouldUpdate = ourShouldUpdate;
     }
     if (process.env.NODE_ENV !== "production") {
-      const isOwnComponent = globalThis.devOnly$ownTagNames?.has(
-        this.el.tagName.toLowerCase()
-      );
+      const isOwnComponent = globalThis.devOnly$ownTagNames?.has(this.el.localName);
       const constructor = this.constructor;
-      const warningsWereCustomized = constructor.enabledWarnings !== OriginalLitElement.enabledWarnings;
+      const warningsWereCustomized = constructor.enabledWarnings !== LitElement$1.enabledWarnings;
       if (!isOwnComponent && !warningsWereCustomized) {
         constructor.disableWarning?.("change-in-update");
       }
-      if (isEsriInternalEnv2()) {
+      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) {
@@ -171,18 +364,18 @@ var LitElement = class _LitElement extends OriginalLitElement {
        *
        * Thus, overwriting Lit's default behavior to use kebab-case:
        */
-      attribute: !!(flags & 1 /* ATTRIBUTE */) && typeof name === "string" ? camelToKebab(name) : false,
-      reflect: !!(flags & 2 /* REFLECT */),
-      type: flags & 4 /* BOOLEAN */ ? Boolean : flags & 8 /* NUMBER */ ? Number : void 0,
+      attribute: !!(flags & PropertyFlags.ATTRIBUTE) && typeof name === "string" ? camelToKebab(name) : false,
+      reflect: !!(flags & PropertyFlags.REFLECT),
+      type: flags & PropertyFlags.BOOLEAN ? Boolean : flags & PropertyFlags.NUMBER ? Number : void 0,
       /**
        * At the moment in Lit, state:true just means attribute:false, so this
        * line is technically redundant, but let's keep it here just in case Lit
        * will add more meaning to state:true in the future.
        */
-      state: !!(flags & 16 /* STATE */),
+      state: !!(flags & PropertyFlags.STATE),
       // Controllers add this option to Lit
-      readOnly: !!(flags & 32 /* READ_ONLY */),
-      noAccessor: !!(flags & 64 /* NO_ACCESSOR */),
+      readOnly: !!(flags & PropertyFlags.READ_ONLY),
+      noAccessor: !!(flags & PropertyFlags.NO_ACCESSOR),
       ...rest
     });
   }
@@ -219,13 +412,9 @@ var LitElement = class _LitElement extends OriginalLitElement {
     const options = Class.shadowRootOptions;
     const useLightDom = options === noShadowRoot;
     const renderRoot = existingShadowRoot ?? (useLightDom ? this.el : this.el.attachShadow(options));
-    Object.defineProperty(this, "shadowRoot", {
-      // Create shadow root on the proxy instance, to make Lit render content there
-      value: renderRoot
-    });
     if (existingShadowRoot) {
       if (process.env.NODE_ENV === "production") {
-        OriginalLitElement.prototype.createRenderRoot.call(this);
+        LitElement$1.prototype.createRenderRoot.call(this);
       }
       return existingShadowRoot;
     }
@@ -247,7 +436,21 @@ var LitElement = class _LitElement extends OriginalLitElement {
     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();
@@ -258,7 +461,14 @@ var LitElement = class _LitElement extends OriginalLitElement {
     }
     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();
   }
   /**
@@ -266,7 +476,7 @@ var LitElement = class _LitElement extends OriginalLitElement {
    * "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) {
@@ -297,18 +507,36 @@ var LitElement = class _LitElement extends OriginalLitElement {
     await this._postLoaded.promise;
     return this;
   }
-};
-LitElement.$createEvent = createEventFactory;
-if (process.env.NODE_ENV !== "production" && isEsriInternalEnv2()) {
+  /**
+   * 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;
   globalWithLit.litIssuedWarnings ??= /* @__PURE__ */ new Set();
   globalWithLit.litIssuedWarnings.add(
     "Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators See https://lit.dev/msg/no-override-create-property for more information."
   );
 }
-
-// src/runtime.ts
-import { isEsriInternalEnv as isEsriInternalEnv3 } from "@arcgis/components-utils";
 function makeRuntime(options) {
   let assetPath;
   const setAssetPath = (path) => {
@@ -351,33 +579,35 @@ function makeRuntime(options) {
     }
   };
   setAssetPath(options.defaultAssetPath);
-  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv3()) {
+  if (process.env.NODE_ENV !== "production" && isEsriInternalEnv()) {
     globalThis.devOnly$luminaRuntime = runtime;
   }
   return runtime;
 }
-
-// src/jsx/types.ts
-var Fragment = void 0;
-var bindAttribute = void 0;
-var bindBooleanAttribute = void 0;
-var bindProperty = void 0;
-var bindEvent = void 0;
-
-// src/jsx/directives.ts
-import { classMap } from "lit-html/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
-import { directive as litDirective } from "lit-html/directive.js";
-import { live as litLive } from "lit-html/directives/live.js";
-var safeClassMap = (parameters) => typeof parameters === "object" && parameters != null ? classMap(parameters) : parameters;
-var safeStyleMap = (parameters) => typeof parameters === "object" && parameters != null ? styleMap(parameters) : parameters;
-var directive = litDirective;
-var live = litLive;
-
-// src/jsx/utils.ts
-import { noChange as litNoChange, nothing as litNothing } from "lit-html";
-var nothing = litNothing;
-var noChange = litNoChange;
+const Fragment = void 0;
+const bindAttribute = void 0;
+const bindBooleanAttribute = void 0;
+const bindProperty = void 0;
+const bindEvent = void 0;
+const safeClassMap = (parameters) => typeof parameters === "object" && parameters != null ? classMap(parameters) : parameters;
+const safeStyleMap = (parameters) => typeof parameters === "object" && parameters != null ? styleMap(parameters) : parameters;
+class DeferLoad extends Directive {
+  update(part) {
+    const tagName = part.element.localName;
+    if (!customElements.get(tagName)) {
+      void deferredLoaders.get(tagName)?.();
+    }
+  }
+  render() {
+    return noChange$1;
+  }
+}
+const deferLoad = /* @__PURE__ */ directive$1(DeferLoad)();
+const deferredLoaders = /* @__PURE__ */ new Map();
+const directive = directive$1;
+const live = live$1;
+const nothing = nothing$2;
+const noChange = noChange$2;
 function setAttribute(element, attributeName, value) {
   if (value == null) {
     element.removeAttribute(attributeName);
@@ -385,13 +615,11 @@ function setAttribute(element, attributeName, value) {
     element.setAttribute(attributeName, value);
   }
 }
-var stringOrBoolean = {
+const stringOrBoolean = {
   toAttribute: (value) => value === true ? "" : value === false ? null : value
 };
-
-// src/wrappersUtils.ts
-var emptyObject = {};
-var makeReactWrapperFactory = (react, createComponent) => (options) => {
+const emptyObject = {};
+const makeReactWrapperFactory = (react, createComponent) => (options) => {
   const tagName = options.tagName;
   let customElementPrototype = emptyObject;
   const elementClass = {
@@ -429,7 +657,12 @@ var makeReactWrapperFactory = (react, createComponent) => (options) => {
   customElementPrototype = void 0;
   return result;
 };
-var getReactWrapperOptions = (tagNameAndElement, events) => ({ tagName: tagNameAndElement, events });
+const getReactWrapperOptions = (tagNameAndElement, events) => ({ tagName: tagNameAndElement, events });
+function renderElement(element) {
+  const container = document.createElement("div");
+  render(element, container);
+  return container.firstElementChild;
+}
 export {
   Fragment,
   LitElement,
@@ -437,11 +670,13 @@ export {
   bindBooleanAttribute,
   bindEvent,
   bindProperty,
-  createEvent,
+  d as createEvent,
+  deferLoad,
+  deferredLoaders,
   directive,
   getReactWrapperOptions,
   live,
-  makeDefineCustomElements,
+  m as makeDefineCustomElements,
   makeReactWrapperFactory,
   makeRuntime,
   method,
@@ -449,6 +684,7 @@ export {
   noShadowRoot,
   nothing,
   property,
+  renderElement,
   safeClassMap,
   safeStyleMap,
   setAttribute,