@design.estate/dees-wcctools 1.0.96 → 1.0.98

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-wcctools",
-  "version": "1.0.96",
+  "version": "1.0.98",
   "private": false,
   "description": "A set of web component tools for creating element catalogues, enabling the structured development and documentation of custom elements and pages.",
   "exports": {

package/readme.hints.md

@@ -12,16 +12,24 @@ The properties panel had timing issues detecting rendered elements because:
 1. Added a 100ms initial delay to allow render completion
 2. Implemented recursive element search that:
    - Searches through nested children up to 5 levels deep
-   - Checks shadow roots of elements
-   - Handles complex DOM structures
+   - Checks both light DOM and shadow DOM for all elements
+   - Handles complex DOM structures generically
+   - Works with any wrapper elements, not specific to dees-demowrapper
 3. Added retry mechanism with up to 5 attempts (200ms between retries)
 4. Improved error messages to show retry count
+5. Comprehensive error handling:
+   - Errors in element search don't break the update cycle
+   - Individual property errors don't prevent other properties from rendering
+   - scheduleUpdate always completes even if createProperties fails
+   - Clears warnings and property content appropriately on errors
 
 ### Code Flow
 1. Dashboard renders element demo into viewport using `render(anonItem.demo(), viewport)`
-2. Properties panel waits, then searches recursively for the element instance
-3. If not found, retries with delays to handle async rendering
-4. Once found, extracts and displays element properties
+2. Properties panel waits 200ms for demo wrappers to run and set initial values
+3. Searches recursively for the element instance
+4. If not found, retries with delays to handle async rendering
+5. Once found, extracts and displays element properties
+6. Uses property binding (`.value=`) instead of attribute binding to prevent input events during initialization
 
 ## Demo Tools
 

package/readme.plan.md

@@ -61,4 +61,40 @@ The properties panel has timing issues detecting rendered elements because:
 - Access children via wrapper.children property
 - Updated documentation with correct import path (lowercase 'demotools')
 - Examples show how to use querySelector for powerful element selection
-- Added clarifying comment about querySelector working on slotted content
+- Added clarifying comment about querySelector working on slotted content
+
+## Fixed Properties Panel Compatibility:
+- Made element search generic - works with any container elements
+- Searches both light DOM and shadow DOM recursively
+- Improved error handling to prevent breaking the update cycle
+- Errors in one property don't prevent others from rendering
+- Detection continues working even after errors occur
+- Maintains compatibility with all element structures
+
+# Test Elements Created (COMPLETED)
+
+## Created comprehensive test elements:
+1. **test-noprops** - Element with no @property decorators
+2. **test-complextypes** - Element with arrays, objects, dates, and complex nested data
+3. **test-withwrapper** - Element that uses dees-demowrapper in its demo
+4. **test-edgecases** - Element with edge cases (null, undefined, NaN, Infinity, circular refs)
+5. **test-nested** - Element with deeply nested structure to test recursive search
+
+These test various scenarios:
+- Properties panel handling of elements without properties
+- Complex data type display and editing
+- Element detection inside dees-demowrapper
+- Error handling for problematic values
+- Deep nesting and shadow DOM traversal
+
+# Fixed Demo Value Overwriting (COMPLETED)
+
+## Issue:
+Properties panel was overwriting values set by demo functions
+
+## Solution:
+1. Changed from attribute binding (`value=`) to property binding (`.value=`)
+2. This prevents browser from firing input events during initialization
+3. Added proper number parsing for number inputs
+4. Increased initial wait to 200ms for demo wrappers to complete
+5. Simplified select element handling to use property binding

package/ts_web/elements/wcc-properties.ts

@@ -229,23 +229,28 @@ export class WccProperties extends DeesElement {
   private async findElementRecursively(container: Element, elementClass: any, maxDepth: number = 5): Promise<HTMLElement | null> {
     if (maxDepth <= 0) return null;
     
-    // Check direct children
-    for (const child of Array.from(container.children)) {
-      if (child instanceof elementClass) {
-        return child as HTMLElement;
+    try {
+      // Check direct children
+      for (const child of Array.from(container.children)) {
+        if (child instanceof elementClass) {
+          return child as HTMLElement;
+        }
       }
-    }
-    
-    // Check shadow roots of children
-    for (const child of Array.from(container.children)) {
-      if (child.shadowRoot) {
-        const found = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
+      
+      // Search in all children recursively
+      for (const child of Array.from(container.children)) {
+        // First, always check the light DOM children
+        const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
         if (found) return found;
+        
+        // Also check shadow root if it exists
+        if (child.shadowRoot) {
+          const shadowFound = await this.findElementRecursively(child.shadowRoot as any, elementClass, maxDepth - 1);
+          if (shadowFound) return shadowFound;
+        }
       }
-      
-      // Also check nested children
-      const found = await this.findElementRecursively(child, elementClass, maxDepth - 1);
-      if (found) return found;
+    } catch (error) {
+      console.error('Error in findElementRecursively:', error);
     }
     
     return null;
@@ -254,6 +259,9 @@ export class WccProperties extends DeesElement {
   public async createProperties() {
     console.log('creating properties for:');
     console.log(this.selectedItem);
+    
+    // Clear any previous warnings
+    this.warning = null;
     const isEnumeration = (propertyArg): boolean => {
       const keys = Object.keys(propertyArg.type);
       const values = [];
@@ -301,8 +309,8 @@ export class WccProperties extends DeesElement {
       console.log(anonItem.elementProperties);
       const wccFrame = await this.dashboardRef.wccFrame;
       
-      // Wait for render to complete
-      await new Promise(resolve => setTimeout(resolve, 100));
+      // Wait for render to complete and any demo wrappers to run
+      await new Promise(resolve => setTimeout(resolve, 200));
       
       // Try to find the element with recursive search
       const viewport = await wccFrame.getViewportElement();
@@ -315,15 +323,20 @@ export class WccProperties extends DeesElement {
       let retries = 0;
       while (!firstFoundInstantiatedElement && retries < 5) {
         await new Promise(resolve => setTimeout(resolve, 200));
-        firstFoundInstantiatedElement = await this.findElementRecursively(
-          viewport,
-          this.selectedItem as any
-        );
+        try {
+          firstFoundInstantiatedElement = await this.findElementRecursively(
+            viewport,
+            this.selectedItem as any
+          );
+        } catch (error) {
+          console.error('Error during element search retry:', error);
+        }
         retries++;
       }
       
       if (!firstFoundInstantiatedElement) {
         this.warning = `no first instantiated element found for >>${anonItem.name}<< after ${retries} retries`;
+        this.propertyContent = [];
         return;
       }
       const classProperties: Map<string, any> = anonItem.elementProperties;
@@ -337,9 +350,10 @@ export class WccProperties extends DeesElement {
         if (key === 'goBright' || key === 'domtools') {
           continue;
         }
-        const property = classProperties.get(key);
-        const propertyTypeString = await determinePropertyType(property);
-        propertyArray.push(
+        try {
+          const property = classProperties.get(key);
+          const propertyTypeString = await determinePropertyType(property);
+          propertyArray.push(
           html`
             <div class="property">
               ${key} / ${propertyTypeString}<br />
@@ -356,7 +370,7 @@ export class WccProperties extends DeesElement {
                   case 'String':
                     return html`<input
                       type="text"
-                      value=${firstFoundInstantiatedElement[key]}
+                      .value=${firstFoundInstantiatedElement[key] || ''}
                       @input="${(eventArg: any) => {
                         firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
@@ -364,14 +378,15 @@ export class WccProperties extends DeesElement {
                   case 'Number':
                     return html`<input
                       type="number"
-                      value=${firstFoundInstantiatedElement[key]}
+                      .value=${firstFoundInstantiatedElement[key] ?? ''}
                       @input="${(eventArg: any) => {
-                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = parseFloat(eventArg.target.value) || 0;
                       }}"
                     />`;
                   case 'Enum':
                     const enumValues: any[] = getEnumValues(property);
                     return html`<select
+                      .value=${firstFoundInstantiatedElement[key] || ''}
                       @change="${(eventArg: any) => {
                         firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
@@ -379,8 +394,7 @@ export class WccProperties extends DeesElement {
                       ${enumValues.map((valueArg) => {
                         return html`
                           <option
-                            ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
-                            name="${valueArg}"
+                            value="${valueArg}"
                           >
                             ${valueArg}
                           </option>
@@ -392,6 +406,10 @@ export class WccProperties extends DeesElement {
             </div>
           `
         );
+        } catch (error) {
+          console.error(`Error processing property ${key}:`, error);
+          // Continue with next property even if this one fails
+        }
       }
       this.propertyContent = propertyArray;
     } else {
@@ -413,7 +431,14 @@ export class WccProperties extends DeesElement {
   }
 
   public async scheduleUpdate() {
-    await this.createProperties();
+    try {
+      await this.createProperties();
+    } catch (error) {
+      console.error('Error creating properties:', error);
+      // Clear property content on error to show clean state
+      this.propertyContent = [];
+    }
+    // Always call super.scheduleUpdate to ensure component updates
     super.scheduleUpdate();
   }