p-elements-core 1.2.32-rc4 → 1.2.32-rc5

package/src/decorators/property.ts

@@ -78,7 +78,7 @@ export interface PropertyOptions {
  *
  * @typedef {PropertyOptions & { name: string }} PropertyOptionsWithName
  */
-export type PropertyOptionsWithName = PropertyOptions & {name: string};
+export type PropertyOptionsWithName = PropertyOptions & { name: string };
 
 /**
  * Track which elements are currently updating attributes from property setters.
@@ -98,7 +98,7 @@ const settingAttributes = new WeakSet<HTMLElement>();
  */
 const pendingAttributeReflections = new WeakMap<
   HTMLElement,
-  Map<string, {value: any; type: any; converter?: AttributeConverter<any>}>
+  Map<string, { value: any; type: any; converter?: AttributeConverter<any> }>
 >();
 
 /**
@@ -111,7 +111,7 @@ const pendingAttributeReflections = new WeakMap<
  */
 const pendingUpdates = new WeakMap<
   HTMLElement,
-  Array<{propertyKey: string; oldValue: any; newValue: any}>
+  Array<{ propertyKey: string; oldValue: any; newValue: any }>
 >();
 
 /**
@@ -399,6 +399,19 @@ function updateAttribute(
   }
 }
 
+const alreadLogedNodeNames = new Set<string>();
+
+function logConnectedCallback(nodeName: string) {
+  if (!alreadLogedNodeNames.has(nodeName)) {
+    alreadLogedNodeNames.add(nodeName);
+    if (typeof console !== "undefined" && console.info) {
+      console.info(
+        `[CustomElement] connectedCallback called for <${nodeName.toLocaleLowerCase()}>`,
+      );
+    }
+  }
+}
+
 /**
  * Class field decorator that creates a reactive property with automatic attribute syncing.
  *
@@ -470,7 +483,13 @@ function updateAttribute(
 export function property(
   options: PropertyOptions = {},
 ): (target: any, propertyKey: string) => void {
-  const {type: rawType, attribute = true, reflect = false, converter, readonly = false} = options;
+  const {
+    type: rawType,
+    attribute = true,
+    reflect = false,
+    converter,
+    readonly = false,
+  } = options;
 
   const type = normalizeType(rawType);
 
@@ -483,10 +502,15 @@ export function property(
     // Only patch once per class
     if (!target.__p_elements_core_lifecycle_patch_applied) {
       // Patch connectedCallback
-      if (Object.prototype.hasOwnProperty.call(target, 'connectedCallback') && typeof target.connectedCallback === 'function') {
+      if (
+        Object.prototype.hasOwnProperty.call(target, "connectedCallback") &&
+        typeof target.connectedCallback === "function"
+      ) {
         const originalConnected = target.connectedCallback;
-        target.connectedCallback = function patchedConnectedCallback(...args: any[]) {
-          const PATCHED_FLAG = '__p_elements_core_pending_updates_called';
+        target.connectedCallback = function patchedConnectedCallback(
+          ...args: any[]
+        ) {
+          const PATCHED_FLAG = "__p_elements_core_pending_updates_called";
           if (!this[PATCHED_FLAG]) {
             let superCalled = false;
             const origProcess = processPendingUpdates;
@@ -497,28 +521,36 @@ export function property(
               }
               return origProcess(element);
             }
-            (globalThis as any).__origProcessPendingUpdates = processPendingUpdates;
-            (globalThis as any).processPendingUpdates = wrappedProcessPendingUpdates;
+            (globalThis as any).__origProcessPendingUpdates =
+              processPendingUpdates;
+            (globalThis as any).processPendingUpdates =
+              wrappedProcessPendingUpdates;
             try {
               if (originalConnected) {
                 originalConnected.apply(this, args);
               }
             } finally {
-              (globalThis as any).processPendingUpdates = (globalThis as any).__origProcessPendingUpdates;
+              (globalThis as any).processPendingUpdates = (
+                globalThis as any
+              ).__origProcessPendingUpdates;
               delete (globalThis as any).__origProcessPendingUpdates;
             }
             if (!superCalled) {
               let baseProto = Object.getPrototypeOf(target);
               let baseConnected = baseProto && baseProto.connectedCallback;
-              if (typeof baseConnected === 'function') {
+              if (typeof baseConnected === "function") {
                 baseConnected.apply(this, args);
-                if (typeof console !== 'undefined' && console.info) {
-                  console.info(`[p-elements-core] connectedCallback: called base automatically for <${this.nodeName}>`);
+                if (typeof console !== "undefined" && console.info) {
+                  // log this once per nodeName
+                  logConnectedCallback(this.nodeName);
+
                 }
               } else {
                 processPendingUpdates(this);
-                if (typeof console !== 'undefined' && console.info) {
-                  console.info(`[p-elements-core] connectedCallback: called processPendingUpdates automatically for <${this.nodeName}>`);
+                if (typeof console !== "undefined" && console.info) {
+                  console.info(
+                    `[p-elements-core] connectedCallback: called processPendingUpdates automatically for <${this.nodeName}>`,
+                  );
                 }
               }
             }
@@ -530,23 +562,26 @@ export function property(
       }
 
       // Patch disconnectedCallback
-      if (Object.prototype.hasOwnProperty.call(target, 'disconnectedCallback') && typeof target.disconnectedCallback === 'function') {
+      if (
+        Object.prototype.hasOwnProperty.call(target, "disconnectedCallback") &&
+        typeof target.disconnectedCallback === "function"
+      ) {
         const originalDisconnected = target.disconnectedCallback;
-        target.disconnectedCallback = function patchedDisconnectedCallback(...args: any[]) {
-          const PATCHED_FLAG = '__p_elements_core_disconnected_called';
+        target.disconnectedCallback = function patchedDisconnectedCallback(
+          ...args: any[]
+        ) {
+          const PATCHED_FLAG = "__p_elements_core_disconnected_called";
           if (!this[PATCHED_FLAG]) {
             let superCalled = false;
             const baseProto = Object.getPrototypeOf(target);
-            const baseDisconnected = baseProto && baseProto.disconnectedCallback;
+            const baseDisconnected =
+              baseProto && baseProto.disconnectedCallback;
             if (originalDisconnected) {
               originalDisconnected.apply(this, args);
               superCalled = true;
             }
-            if (!superCalled && typeof baseDisconnected === 'function') {
+            if (!superCalled && typeof baseDisconnected === "function") {
               baseDisconnected.apply(this, args);
-                if (typeof console !== 'undefined' && console.info) {
-                  console.info(`[p-elements-core] disconnectedCallback: called base automatically for <${this.nodeName}>`);
-                }
             }
             this[PATCHED_FLAG] = true;
           } else if (originalDisconnected) {
@@ -556,29 +591,35 @@ export function property(
       }
 
       // Patch attributeChangedCallback
-      if (Object.prototype.hasOwnProperty.call(target, 'attributeChangedCallback') && typeof target.attributeChangedCallback === 'function') {
+      if (
+        Object.prototype.hasOwnProperty.call(
+          target,
+          "attributeChangedCallback",
+        ) &&
+        typeof target.attributeChangedCallback === "function"
+      ) {
         const originalAttributeChanged = target.attributeChangedCallback;
-        target.attributeChangedCallback = function patchedAttributeChangedCallback(...args: any[]) {
-          const PATCHED_FLAG = '__p_elements_core_attribute_changed_called';
-          if (!this[PATCHED_FLAG]) {
-            let superCalled = false;
-            const baseProto = Object.getPrototypeOf(target);
-            const baseAttributeChanged = baseProto && baseProto.attributeChangedCallback;
-            if (originalAttributeChanged) {
+        target.attributeChangedCallback =
+          function patchedAttributeChangedCallback(...args: any[]) {
+            const PATCHED_FLAG = "__p_elements_core_attribute_changed_called";
+
+            if (!this[PATCHED_FLAG]) {
+              let superCalled = false;
+              const baseProto = Object.getPrototypeOf(target);
+              const baseAttributeChanged =
+                baseProto && baseProto.attributeChangedCallback;
+              if (originalAttributeChanged) {
+                originalAttributeChanged.apply(this, args);
+                superCalled = true;
+              }
+              if (!superCalled && typeof baseAttributeChanged === "function") {
+                baseAttributeChanged.apply(this, args);
+              }
+              this[PATCHED_FLAG] = true;
+            } else if (originalAttributeChanged) {
               originalAttributeChanged.apply(this, args);
-              superCalled = true;
-            }
-            if (!superCalled && typeof baseAttributeChanged === 'function') {
-              baseAttributeChanged.apply(this, args);
-                if (typeof console !== 'undefined' && console.info) {
-                  console.info(`[p-elements-core] attributeChangedCallback: called base automatically for <${this.nodeName}>`);
-                }
             }
-            this[PATCHED_FLAG] = true;
-          } else if (originalAttributeChanged) {
-            originalAttributeChanged.apply(this, args);
-          }
-        };
+          };
       }
 
       target.__p_elements_core_lifecycle_patch_applied = true;
@@ -640,7 +681,6 @@ export function property(
           isRenderOnSet = true;
         }
 
-
         // On first set, check if an HTML attribute exists and use that instead of the default
         if (
           !instanceMap.has(this) &&
@@ -648,7 +688,6 @@ export function property(
           this.hasAttribute &&
           this.hasAttribute(attributeName)
         ) {
-
           const attrValue = this.getAttribute(attributeName);
           if (attrValue !== null) {
             if (converter && converter.fromAttribute) {
@@ -664,7 +703,6 @@ export function property(
 
             // Trigger update for initial HTML attribute only if connected
             if (this.isConnected) {
-
               if (typeof this.renderNow === "function") {
                 this.renderNow();
               }
@@ -673,7 +711,6 @@ export function property(
                 this.updated(propertyKey, oldValue, convertedValue);
               }
             } else {
-
               // Queue for later when element connects
               if (this.updated) {
                 if (!pendingUpdates.has(this)) {
@@ -681,7 +718,7 @@ export function property(
                 }
                 pendingUpdates
                   .get(this)!
-                  .push({propertyKey, oldValue, newValue: convertedValue});
+                  .push({ propertyKey, oldValue, newValue: convertedValue });
               }
             }
 
@@ -731,8 +768,6 @@ export function property(
               converter,
             });
           }
-
-
         }
 
         // Trigger update only if connected
@@ -752,15 +787,14 @@ export function property(
             }
             pendingUpdates
               .get(this)!
-              .push({propertyKey, oldValue, newValue: convertedValue});
+              .push({ propertyKey, oldValue, newValue: convertedValue });
           }
         }
 
         // Call renderNow if @RenderOnSet is used and value changed
-        if (isRenderOnSet && typeof this.renderNow === "function" ) {
+        if (isRenderOnSet && typeof this.renderNow === "function") {
           this.renderNow();
         }
-
       },
       configurable: true,
     });

package/src/sample/sample.tsx

@@ -11,7 +11,7 @@ import {CustomElementController} from "../custom-element-controller";
 
 @customElementConfig({tagName: "render-on-set"})
 export class RenderOnSet extends CustomElement {
-  
+
   @PropertyRenderOnSet
   public name: string = "foo";
 
@@ -22,11 +22,11 @@ export class RenderOnSet extends CustomElement {
   #initDone = false;
 
   connectedCallback(): void {
-    
+
     if (this.#initDone) {
       return
     }
-    this.#initDone = true;  
+    this.#initDone = true;
     let template = this.templateFromString(`<style>div{color: lime}</style><div />`);
     this.shadowRoot.appendChild(template);
     this.createProjector(this.shadowRoot.querySelector("div"), this.render);