@arcgis/lumina 4.32.0-next.34 → 4.32.0-next.35

package/dist/index.d.ts

@@ -12,4 +12,4 @@ export * from "./jsx/jsx";
 export { safeClassMap, safeStyleMap, directive, live } from "./jsx/directives";
 export { nothing, noChange, setAttribute, stringOrBoolean } from "./jsx/utils";
 export { noShadowRoot } from "./utils";
-export { createPrototypeProxy } from "./wrappersUtils";
+export { makeReactWrapperFactory, getReactWrapperOptions } from "./wrappersUtils";

package/dist/index.js

@@ -357,24 +357,46 @@ var stringOrBoolean = {
 };
 
 // src/wrappersUtils.ts
-function createPrototypeProxy(tagName) {
-  const customElement = {
+var emptyObject = {};
+var makeReactWrapperFactory = (react, createComponent) => (options) => {
+  const tagName = options.tagName;
+  let customElementPrototype = emptyObject;
+  const elementClass = {
     name: tagName,
+    /**
+     * Lit's createComponent tries to access the elementClass.prototype in
+     * global scope (in development mode). The elementClass may not be defined
+     * yet (because we are in a lazy loading build, or because current app
+     * doesn't import a given custom element as it doesn't use it).
+     *
+     * Thus, we return an empty object as a fake prototype.
+     *
+     * Right after the call to `createComponent`, we set to
+     * customElementPrototype undefined so that the next access of
+     * `.prototype` tries to get the real prototype.
+     * `createPrototypeProxy()` is called, this small proxy delays retrieving the custom
+     * element prototype until it is actually needed, and caches the result for future calls.
+     */
     get prototype() {
-      const customElementPrototype = customElements.get(tagName)?.prototype;
-      if (!customElementPrototype) {
-        if (typeof process === "object" && process.env.NODE_ENV !== "production") {
-          return Object.create(HTMLElement.prototype);
-        } else {
+      if (customElementPrototype === void 0) {
+        customElementPrototype = customElements.get(tagName)?.prototype;
+        if (!customElementPrototype) {
           throw new Error(`Custom element "${tagName}" not found`);
         }
+        Object.defineProperty(elementClass, "prototype", { value: customElementPrototype });
       }
-      Object.defineProperty(customElement, "prototype", { value: customElementPrototype });
       return customElementPrototype;
     }
   };
-  return customElement;
-}
+  const result = createComponent({
+    ...options,
+    react,
+    elementClass
+  });
+  customElementPrototype = void 0;
+  return result;
+};
+var getReactWrapperOptions = (tagNameAndElement, events) => ({ tagName: tagNameAndElement, events });
 export {
   Fragment,
   LitElement,
@@ -383,10 +405,11 @@ export {
   bindEvent,
   bindProperty,
   createEvent,
-  createPrototypeProxy,
   directive,
+  getReactWrapperOptions,
   live,
   makeDefineCustomElements,
+  makeReactWrapperFactory,
   makeRuntime,
   method,
   noChange,

package/dist/wrappersUtils.d.ts

@@ -1,11 +1,31 @@
+export interface Options<I extends HTMLElement, E extends EventNames> {
+    react: any;
+    tagName: string;
+    elementClass: Constructor<I>;
+    events?: E;
+    displayName?: string;
+}
+export type EventNames = Record<string, string>;
+type Constructor<T> = new () => T;
 /**
- * Returns a proxy object for a custom element prototype.
- * The function that creates a React wrapper component for a custom element,
- * if rendered, will need the custom element prototype to define the React component properties.
- * Because the custom element may not yet be defined in global scope when
- * `createPrototypeProxy()` is called, this small proxy delays retrieving the custom
- * element prototype until it is actually needed, and caches the result for future calls.
+ * Wrap `createComponent` from `@lit/react` to improve lazy loading
+ * compatibility.
  *
  * @private
  */
-export declare function createPrototypeProxy<T extends HTMLElement>(tagName: string): new () => T;
+export declare const makeReactWrapperFactory: (react: unknown, createComponent: (options: Options<HTMLElement, EventNames>) => unknown) => (options: Pick<Options<HTMLElement, EventNames>, "events" | "tagName">) => unknown;
+/**
+ * Helper for `createComponent` to declare options in a type-safe and concise
+ * manner.
+ *
+ * @remarks
+ * Only tagName and events need to be provided to the wrapped version of the
+ * `createComponent` function. However, since we inherit the typings from
+ * the original `createComponent`, TypeScript would still force us to provide
+ * `react` and `elementClass` properties - instead, this helper convinces
+ * TypeScript that we are providing `react` and `elementClass` properties.
+ *
+ * @private
+ */
+export declare const getReactWrapperOptions: <Element extends HTMLElement, Events extends EventNames>(tagNameAndElement: Element, events: Events) => Options<Element, Events>;
+export {};

package/dist/wrappersUtils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcgis/lumina",
-  "version": "4.32.0-next.34",
+  "version": "4.32.0-next.35",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
@@ -20,8 +20,8 @@
   ],
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@arcgis/components-controllers": "4.32.0-next.34",
-    "@arcgis/components-utils": "4.32.0-next.34",
+    "@arcgis/components-controllers": "4.32.0-next.35",
+    "@arcgis/components-utils": "4.32.0-next.35",
     "@lit-labs/ssr": "^3.2.2",
     "@lit-labs/ssr-client": "^1.1.7",
     "@lit/context": "^1.1.3",