assign-gingerly 0.0.29 → 0.0.31

package/README.md

@@ -1,4 +1,4 @@
-# assign-gingerly and assign-tentatively
+# assign-gingerly and assign-tentatively
 
 [![Playwright Tests](https://github.com/bahrus/assign-gingerly/actions/workflows/CI.yml/badge.svg?branch=baseline)](https://github.com/bahrus/assign-gingerly/actions/workflows/CI.yml)
 [![NPM version](https://badge.fury.io/js/assign-gingerly.png)](http://badge.fury.io/js/assign-gingerly)
@@ -1460,19 +1460,19 @@ element.remove();
 
 // Case 1: Temporarily removed, will be re-added
 setTimeout(() => document.body.append(element), 1000);
-// ❌ Don't dispose - enhancement should persist
+// ? Don't dispose - enhancement should persist
 
 // Case 2: Moved to another location
 otherContainer.append(element);
-// ❌ Don't dispose - enhancement should persist
+// ? Don't dispose - enhancement should persist
 
 // Case 3: Cached for reuse
 elementCache.set('myElement', element);
-// ❌ Don't dispose - enhancement should persist
+// ? Don't dispose - enhancement should persist
 
 // Case 4: Truly done, ready for GC
 element = null;
-// ✅ Should dispose, but no way to detect this automatically
+// ? Should dispose, but no way to detect this automatically
 ```
 
 **Practical disposal strategies:**
@@ -1566,10 +1566,10 @@ class MyEnhancement {
 ```
 
 **Summary:**
-- ✅ Storage mechanism prevents memory leaks via WeakMap
-- ⚠️ Enhancement internals need manual cleanup via dispose()
-- ❌ No automatic way to detect when disposal should happen
-- 👍 Choose disposal strategy based on your application's lifecycle
+- ? Storage mechanism prevents memory leaks via WeakMap
+- ?? Enhancement internals need manual cleanup via dispose()
+- ? No automatic way to detect when disposal should happen
+- ?? Choose disposal strategy based on your application's lifecycle
 
 ### Waiting for Async Initialization with `enh.whenResolved(regItem)`
 
@@ -1976,7 +1976,7 @@ console.log(instance.value);  // 'test123' (parsed from attribute)
 
 </details>
 
-> ![NOTE]
+> [!NOTE]
 > `withAttrs` works with or without `enhKey`. When there's no `enhKey`, the parsed attributes are passed directly to the constructor. When there is an `enhKey`, they're merged with any pre-existing values on the enh container.
 
 ### The `enh-` Prefix for Attribute Isolation
@@ -2150,7 +2150,7 @@ The `base` attribute must contain either a dash (`-`) or a non-ASCII character t
 ```TypeScript
 // Valid base attributes
 const enhConfig1 = { base: 'data-config' };     // Has dash
-const enhConfig2 =  { base: '🎨-theme' });        // Has non-ASCII (and dash)
+const enhConfig2 =  { base: '??-theme' });        // Has non-ASCII (and dash)
 
 // Invalid - throws error
 const enhConig3 = { base: 'config' };          // No dash or non-ASCII
@@ -2198,6 +2198,33 @@ const result = parseWithAttrs(element, {
 // Result: { name: 'Alice', age: '30' }
 ```
 
+**Deep Nesting:**
+
+Template variables can reference other template variables to any depth, creating hierarchical attribute naming patterns:
+
+```TypeScript
+// HTML: <div data-app-user-profile-name="Alice" data-app-user-profile-email="alice@example.com"></div>
+
+const result = parseWithAttrs(element, {
+  base: 'data-',
+  app: '${base}app',
+  user: '${app}-user',
+  profile: '${user}-profile',
+  name: '${profile}-name',
+  email: '${profile}-email'
+});
+// Result: { name: 'Alice', email: 'alice@example.com' }
+
+// The resolution chain: base ? app ? user ? profile ? name/email
+// Resolves to: data-app-user-profile-name and data-app-user-profile-email
+```
+
+**Benefits of hierarchical variables:**
+- Build complex attribute names from simple parts
+- Maintain consistency across related attributes
+- Easy to refactor by changing a single variable
+- Self-documenting attribute structure
+
 Template variables are resolved recursively and cached for performance. Circular references are detected and throw an error.
 
 ### Type Parsing with instanceOf
@@ -2376,12 +2403,12 @@ registerCommonParsers(globalParserRegistry);
 
 **Benefits of Named Parsers:**
 
-- ✅ **JSON serializable** - Configs can be stored/transmitted as JSON
-- ✅ **Reusable** - Define once, use everywhere
-- ✅ **Maintainable** - Update parser logic in one place
-- ✅ **Testable** - Test parsers independently
-- ✅ **Discoverable** - `globalParserRegistry.getNames()` lists all available parsers
-- ✅ **Backward compatible** - Inline functions still work
+- ? **JSON serializable** - Configs can be stored/transmitted as JSON
+- ? **Reusable** - Define once, use everywhere
+- ? **Maintainable** - Update parser logic in one place
+- ? **Testable** - Test parsers independently
+- ? **Discoverable** - `globalParserRegistry.getNames()` lists all available parsers
+- ? **Backward compatible** - Inline functions still work
 
 **Mixing Inline and Named Parsers:**
 
@@ -3408,6 +3435,3 @@ ItemScope Managers follow these design principles:
 
 This design ensures backward compatibility while providing powerful new capabilities for managing DOM fragments.
 
-
-
-

package/object-extension.js

@@ -284,6 +284,74 @@ if (typeof Element !== 'undefined') {
         enumerable: true,
         configurable: true,
     });
+    /**
+     * Adds 'set' property to Element prototype for symbol-based dependency injection
+     * Returns a proxy that intercepts symbol property assignments
+     */
+    Object.defineProperty(Element.prototype, 'set', {
+        get: function () {
+            const element = this;
+            return new Proxy({}, {
+                set: (_, prop, value) => {
+                    if (typeof prop === 'symbol') {
+                        // Get the registry from customElementRegistry (scoped or global)
+                        const registry = element.customElementRegistry?.enhancementRegistry
+                            ?? (typeof customElements !== 'undefined' ? customElements.enhancementRegistry : undefined);
+                        if (registry) {
+                            const registryItem = registry.findBySymbol(prop);
+                            if (registryItem) {
+                                const instanceMap = getInstanceMap();
+                                const instances = instanceMap.getOrInsertComputed(element, () => new Map());
+                                let instance = instances.get(registryItem);
+                                if (!instance) {
+                                    const SpawnClass = registryItem.spawn;
+                                    // Check canSpawn if it exists
+                                    if (typeof SpawnClass.canSpawn === 'function') {
+                                        const ctx = { config: registryItem };
+                                        if (!SpawnClass.canSpawn(element, ctx)) {
+                                            // canSpawn returned false, skip spawning
+                                            return true;
+                                        }
+                                    }
+                                    // If target is an Element and registryItem has enhKey, pass element to constructor
+                                    if (registryItem.enhKey) {
+                                        const ctx = { config: registryItem };
+                                        const initVals = element.enh?.[registryItem.enhKey] &&
+                                            !(element.enh[registryItem.enhKey] instanceof SpawnClass)
+                                            ? element.enh[registryItem.enhKey]
+                                            : undefined;
+                                        instance = new SpawnClass(element, ctx, initVals);
+                                    }
+                                    else {
+                                        const ctx = { config: registryItem };
+                                        instance = new SpawnClass(element, ctx);
+                                    }
+                                    instances.set(registryItem, instance);
+                                    // If registryItem has enhKey, store on enh
+                                    if (registryItem.enhKey) {
+                                        if (!element.enh) {
+                                            // This shouldn't happen since enh is a getter, but be safe
+                                            element.enh = {};
+                                        }
+                                        element.enh[registryItem.enhKey] = instance;
+                                    }
+                                }
+                                if (registryItem.symlinks) {
+                                    const mappedKey = registryItem.symlinks[prop];
+                                    if (mappedKey && instance && typeof instance === 'object') {
+                                        instance[mappedKey] = value;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                    return true;
+                },
+            });
+        },
+        enumerable: false,
+        configurable: true,
+    });
 }
 /**
  * Adds assignGingerly method to all objects via the Object prototype

package/object-extension.ts

@@ -404,6 +404,84 @@ if (typeof Element !== 'undefined') {
     enumerable: true,
     configurable: true,
   });
+  
+  /**
+   * Adds 'set' property to Element prototype for symbol-based dependency injection
+   * Returns a proxy that intercepts symbol property assignments
+   */
+  Object.defineProperty(Element.prototype, 'set', {
+    get: function (this: Element) {
+      const element = this;
+      return new Proxy(
+        {},
+        {
+          set: (_: any, prop: string | symbol, value: any) => {
+            if (typeof prop === 'symbol') {
+              // Get the registry from customElementRegistry (scoped or global)
+              const registry = (element as any).customElementRegistry?.enhancementRegistry
+                ?? (typeof customElements !== 'undefined' ? customElements.enhancementRegistry : undefined);
+              
+              if (registry) {
+                const registryItem = registry.findBySymbol(prop);
+                if (registryItem) {
+                  const instanceMap = getInstanceMap();
+                  const instances = instanceMap.getOrInsertComputed(element, () => new Map());
+                  let instance = instances.get(registryItem);
+
+                  if (!instance) {
+                    const SpawnClass = registryItem.spawn;
+                    
+                    // Check canSpawn if it exists
+                    if (typeof SpawnClass.canSpawn === 'function') {
+                      const ctx = { config: registryItem };
+                      if (!SpawnClass.canSpawn(element, ctx)) {
+                        // canSpawn returned false, skip spawning
+                        return true;
+                      }
+                    }
+                    
+                    // If target is an Element and registryItem has enhKey, pass element to constructor
+                    if (registryItem.enhKey) {
+                      const ctx = { config: registryItem };
+                      const initVals = (element as any).enh?.[registryItem.enhKey] && 
+                                      !((element as any).enh[registryItem.enhKey] instanceof SpawnClass)
+                                      ? (element as any).enh[registryItem.enhKey]
+                                      : undefined;
+                      instance = new SpawnClass(element, ctx, initVals);
+                    } else {
+                      const ctx = { config: registryItem };
+                      instance = new SpawnClass(element, ctx);
+                    }
+                    
+                    instances.set(registryItem, instance);
+                    
+                    // If registryItem has enhKey, store on enh
+                    if (registryItem.enhKey) {
+                      if (!(element as any).enh) {
+                        // This shouldn't happen since enh is a getter, but be safe
+                        (element as any).enh = {};
+                      }
+                      (element as any).enh[registryItem.enhKey] = instance;
+                    }
+                  }
+                  
+                  if(registryItem.symlinks){
+                    const mappedKey = registryItem.symlinks[prop];
+                    if (mappedKey && instance && typeof instance === 'object') {
+                      (instance as any)[mappedKey] = value;
+                    }
+                  }
+                }
+              }
+            }
+            return true;
+          },
+        }
+      );
+    },
+    enumerable: false,
+    configurable: true,
+  });
 }
 
 /**

package/package.json

@@ -1,75 +1,75 @@
-{
-  "name": "assign-gingerly",
-  "version": "0.0.29",
-  "description": "This package provides a utility function for carefully merging one object into another.",
-  "homepage": "https://github.com/bahrus/assign-gingerly#readme",
-  "bugs": {
-    "url": "https://github.com/bahrus/assign-gingerly/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/bahrus/assign-gingerly.git"
-  },
-  "license": "MIT",
-  "author": "Bruce B. Anderson <andeson.bruce.b@gmail.com>",
-  "type": "module",
-  "types": "types/assign-gingerly/types.d.ts",
-  "files": [
-    "*.js",
-    "*.ts",
-    "README.md",
-    "LICENSE",
-    "types/assign-gingerly/types.d.ts"
-  ],
-  "exports": {
-    ".": {
-      "default": "./index.js",
-      "types": "./index.ts"
-    },
-    "./assignGingerly.js": {
-      "default": "./assignGingerly.js",
-      "types": "./assignGingerly.ts"
-    },
-    "./assignTentatively.js": {
-      "default": "./assignTentatively.js",
-      "types": "./assignTentatively.ts"
-    },
-    "./waitForEvent.js": {
-      "default": "./waitForEvent.js"
-    },
-    "./parserRegistry.js": {
-      "default": "./parserRegistry.js"
-    },
-    "./parseWithAttrs.js": {
-      "default": "./parseWithAttrs.js",
-      "types": "./parseWithAttrs.ts"
-    },
-    "./buildCSSQuery.js": {
-      "default": "./buildCSSQuery.js",
-      "types": "./buildCSSQuery.ts"
-    },
-    "./resolveTemplate.js": {
-      "default": "./resolveTemplate.js",
-      "types": "./resolveTemplate.ts"
-    },
-    "./getHost.js": {
-      "default": "./getHost.js",
-      "types": "./getHost.ts"
-    }
-  },
-  "main": "index.js",
-  "module": "index.js",
-  "scripts": {
-    "serve": "node ./node_modules/spa-ssi/serve.js",
-    "test": "playwright test",
-    "update": "ncu -u && npm install",
-    "safari": "npx playwright wk http://localhost:8000",
-    "chrome": "npx playwright cr http://localhost:8000"
-  },
-  "devDependencies": {
-    "@playwright/test": "1.59.1",
-    "spa-ssi": "0.0.27",
-    "@types/node": "25.5.2",
-    "typescript": "6.0.2"
-  }
-}
+{
+  "name": "assign-gingerly",
+  "version": "0.0.31",
+  "description": "This package provides a utility function for carefully merging one object into another.",
+  "homepage": "https://github.com/bahrus/assign-gingerly#readme",
+  "bugs": {
+    "url": "https://github.com/bahrus/assign-gingerly/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bahrus/assign-gingerly.git"
+  },
+  "license": "MIT",
+  "author": "Bruce B. Anderson <andeson.bruce.b@gmail.com>",
+  "type": "module",
+  "types": "types/assign-gingerly/types.d.ts",
+  "files": [
+    "*.js",
+    "*.ts",
+    "README.md",
+    "LICENSE",
+    "types/assign-gingerly/types.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "default": "./index.js",
+      "types": "./index.ts"
+    },
+    "./assignGingerly.js": {
+      "default": "./assignGingerly.js",
+      "types": "./assignGingerly.ts"
+    },
+    "./assignTentatively.js": {
+      "default": "./assignTentatively.js",
+      "types": "./assignTentatively.ts"
+    },
+    "./waitForEvent.js": {
+      "default": "./waitForEvent.js"
+    },
+    "./parserRegistry.js": {
+      "default": "./parserRegistry.js"
+    },
+    "./parseWithAttrs.js": {
+      "default": "./parseWithAttrs.js",
+      "types": "./parseWithAttrs.ts"
+    },
+    "./buildCSSQuery.js": {
+      "default": "./buildCSSQuery.js",
+      "types": "./buildCSSQuery.ts"
+    },
+    "./resolveTemplate.js": {
+      "default": "./resolveTemplate.js",
+      "types": "./resolveTemplate.ts"
+    },
+    "./getHost.js": {
+      "default": "./getHost.js",
+      "types": "./getHost.ts"
+    }
+  },
+  "main": "index.js",
+  "module": "index.js",
+  "scripts": {
+    "serve": "node ./node_modules/spa-ssi/serve.js",
+    "test": "playwright test",
+    "update": "ncu -u && npm install",
+    "safari": "npx playwright wk http://localhost:8000",
+    "chrome": "npx playwright cr http://localhost:8000"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.59.1",
+    "spa-ssi": "0.0.27",
+    "@types/node": "25.6.0",
+    "typescript": "6.0.3"
+  }
+}

package/parseWithAttrs.js

@@ -147,7 +147,8 @@ function hasDashOrNonASCII(str) {
  * @returns The attribute value or null
  */
 function getAttributeValue(element, attrName, allowUnprefixed) {
-    const isCustomElement = element.tagName.includes('-');
+    const { localName } = element;
+    const isCustomElement = localName.includes('-');
     const isSVGElement = typeof SVGElement !== 'undefined' && element instanceof SVGElement;
     // For custom elements and SVG - strict enh- requirement
     if (isCustomElement || isSVGElement) {
@@ -157,8 +158,7 @@ function getAttributeValue(element, attrName, allowUnprefixed) {
         // Only fallback if tag name matches the allowUnprefixed pattern
         if (allowUnprefixed) {
             const pattern = typeof allowUnprefixed === 'string' ? new RegExp(allowUnprefixed) : allowUnprefixed;
-            const tagName = element.tagName.toLowerCase();
-            if (pattern.test(tagName)) {
+            if (pattern.test(localName)) {
                 return element.getAttribute(attrName);
             }
         }

package/parseWithAttrs.ts

@@ -186,7 +186,8 @@ function getAttributeValue(
   attrName: string,
   allowUnprefixed?: string | RegExp
 ): string | null {
-  const isCustomElement = element.tagName.includes('-');
+  const { localName } = element;
+  const isCustomElement = localName.includes('-');
   const isSVGElement = typeof SVGElement !== 'undefined' && element instanceof SVGElement;
   
   // For custom elements and SVG - strict enh- requirement
@@ -197,8 +198,7 @@ function getAttributeValue(
     // Only fallback if tag name matches the allowUnprefixed pattern
     if (allowUnprefixed) {
       const pattern = typeof allowUnprefixed === 'string' ? new RegExp(allowUnprefixed) : allowUnprefixed;
-      const tagName = element.tagName.toLowerCase();
-      if (pattern.test(tagName)) {
+      if (pattern.test(localName)) {
         return element.getAttribute(attrName);
       }
     }

package/playwright.config.ts

@@ -20,7 +20,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [ ['html', { open: 'never' }] ],
+  reporter: [ ['html', { open: 'never' }] ], 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

package/types/assign-gingerly/types.d.ts

@@ -298,6 +298,7 @@ export declare function assignGingerly(
 export default assignGingerly;
 
 export declare class ElementEnhancementGateway{
+  //TODO:  this isn't right
   enh: ElementEnhancement;
 }