p-elements-core 1.2.32-rc7 → 1.2.32-rc8

package/src/custom-element.ts

@@ -131,7 +131,7 @@ export abstract class CustomElement extends HTMLElement {
    *
    * @returns {readonly PropertyOptionsWithName[]} Array of property metadata
    */
-  get properties() : readonly PropertyOptionsWithName[] {
+  get properties(): readonly PropertyOptionsWithName[] {
     const ctor = this.constructor as ComponentConstructor;
     if (!ctor._propertyInfo) {
       return [];
@@ -241,6 +241,8 @@ export abstract class CustomElement extends HTMLElement {
         this.#updateResolve = resolve;
       });
     }
+    // this.#projector.
+    // render(this.shadowRoot, this.render());
     this.#projector?.renderNow();
 
     // Call updated() lifecycle hook after DOM updates are complete
@@ -372,11 +374,10 @@ export abstract class CustomElement extends HTMLElement {
       this.#initStylesheet(styleElement.textContent);
       styleElement.remove();
     }
-     window.addEventListener("updatecssapply", () => {
+    window.addEventListener("updatecssapply", () => {
       this.#polyfillCssApply();
     });
 
-
     return fragment;
   }
 
@@ -391,9 +392,13 @@ export abstract class CustomElement extends HTMLElement {
     element: Element,
     render: () => VNode,
   ): Promise<Projector> {
+    await new Promise((resolve) =>
+      requestAnimationFrame(() => requestAnimationFrame(resolve)),
+    );
+    return await this.#createProjector(element, render);
+  }
 
-      await new Promise((resolve) => requestAnimationFrame(resolve));
-
+  #createProjector(element: Element, render: () => VNode): Promise<Projector> {
     return new Promise<Projector>((resolve, reject) => {
       let projector: Projector;
       const mode = this.#projectorMode ? this.#projectorMode : "append";
@@ -403,13 +408,11 @@ export abstract class CustomElement extends HTMLElement {
             if (eventName === "renderStart" || eventName === "renderDone") {
               this.#invokeRenderLifecycleFn(eventName);
             }
-          }
+          },
         });
         projector[mode](element, render.bind(this));
         this.#projector = projector;
-        requestAnimationFrame(() => {
-          projector.renderNow();
-        });
+        projector.renderNow();
         resolve(projector);
         this.dispatchEvent(new CustomEvent("firstRender", {}));
       });
@@ -428,13 +431,21 @@ export abstract class CustomElement extends HTMLElement {
   }
 
   #invokeRenderLifecycleFn(eventName: string) {
-    if (this[eventName]){
-      this[eventName](eventName === "renderStart" ? this.#isFirstRenderStart : this.#isFirstRenderDone);
+    if (this[eventName]) {
+      this[eventName](
+        eventName === "renderStart"
+          ? this.#isFirstRenderStart
+          : this.#isFirstRenderDone,
+      );
     }
     const controllerEventName = `host${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`;
     this.#controllers.forEach((controller) => {
       if (controller[controllerEventName]) {
-        controller[controllerEventName](eventName === "renderStart" ? this.#isFirstRenderStart : this.#isFirstRenderDone);
+        controller[controllerEventName](
+          eventName === "renderStart"
+            ? this.#isFirstRenderStart
+            : this.#isFirstRenderDone,
+        );
       }
     });
     if (eventName === "renderStart") {
@@ -491,18 +502,17 @@ export abstract class CustomElement extends HTMLElement {
       const div = document.createElement("div");
       this.shadowRoot.appendChild(div);
       requestAnimationFrame(() => {
-        this.createProjector(div, (this as any).render).then(() => {
+        this.#createProjector(div, (this as any).render).then(() => {
           this.#upgradeProperties();
-        })
+        });
       });
-       window.addEventListener("updatecssapply", () => {
+      window.addEventListener("updatecssapply", () => {
         this.#polyfillCssApply();
       });
-
     }
   }
 
-#polyfillCssApply(): string {
+  #polyfillCssApply(): string {
     let style = replaceApplyToCssVars(this.#cssText);
     if (this.#cssText !== style) {
       this.#cssText = style;
@@ -513,14 +523,13 @@ export abstract class CustomElement extends HTMLElement {
           URL.revokeObjectURL(this.#linkElement.href);
         }
         this.#linkElement.href = URL.createObjectURL(
-          new Blob([style], { type: "text/css" })
+          new Blob([style], { type: "text/css" }),
         );
       }
     }
     return style;
   }
 
-
   #initStylesheet(style: string) {
     this.#cssText = style;
     if (this.#useShadowRoot && this.shadowRoot) {

package/src/maquette/projector.ts

@@ -69,7 +69,12 @@ let createEventHandlerInterceptor = (
     // modified event handler
     return function(this: Node, evt: Event): boolean | undefined | void {
       performanceLogger("domEvent", evt);
-      let projection = getProjection()!;
+      let projection = getProjection();
+      // Guard: projection may be undefined when an event handler is invoked synchronously
+      // during initial DOM creation (e.g. by a custom-element setter calling onchange).
+      if (!projection) {
+        return eventHandler.apply(this, arguments);
+      }
       let parentNodePath = createParentNodePath(evt.currentTarget as Element, projection.domNode);
       parentNodePath.reverse();
       let matchingVNode = findVNodeByParentNodePath(projection.getLastRender(), parentNodePath);