assign-gingerly 0.0.53 → 0.0.55

package/inferencer/inferencer.ts

@@ -0,0 +1,292 @@
+import type { EnhancementConfig } from "./types/assign-gingerly/types";
+import { withScopePerimeter } from "./withScopePerimeter.js";
+
+/**
+ * Symbol for smart value assignment
+ * When used with element.set[value], it infers and sets the appropriate value property
+ */
+export const value = Symbol.for('inferencer:value');
+
+/**
+ * Symbol for smart display assignment
+ * When used with element.set[display], it infers and sets the appropriate display property
+ */
+export const display = Symbol.for('inferencer:display');
+
+/**
+ * Enhancement class that provides smart value and display property inference
+ * Automatically determines the correct property to set based on element type
+ */
+export class Infer<TValue = any, TDisplay = any> {
+    #weakRef: WeakRef<Element>;
+
+    #propName: string | undefined;
+
+    #propagator: EventTarget | undefined;
+
+    get enhancedElement(){
+        return this.#weakRef.deref()!;
+    }
+    
+    constructor(enhancedElement?: Element, propName?: string){
+        this.#weakRef = new WeakRef(enhancedElement!);
+        this.#propName = propName;
+    }
+
+    /**
+     * Get a propagator (EventTarget) that emits events when properties change.
+     * For custom elements with a native propagator (roundabout), returns that directly.
+     * Otherwise, creates an InferencedPropagator that uses best-effort strategies
+     * to detect property changes.
+     */
+    async getPropagator(): Promise<EventTarget> {
+        if (this.#propagator) return this.#propagator;
+
+        const {enhancedElement} = this;
+        const {localName} = enhancedElement;
+
+        if (localName.includes('-')) {
+            await (
+                (enhancedElement as any).customElementRegistry || customElements
+            ).whenDefined(localName);
+            const {propagator} = enhancedElement as any;
+            if (propagator instanceof EventTarget) {
+                this.#propagator = propagator;
+                return propagator;
+            }
+        }
+
+        // No native propagator — create an inferred one
+        const {InferencedPropagator} = await import('./InferencedPropagator.js');
+        this.#propagator = new InferencedPropagator(this);
+        return this.#propagator;
+    }
+
+    #value: TValue | undefined;
+    
+    get value(): TValue | undefined {
+        return this.#value;
+    }
+    
+    set value(nv: TValue){
+        this.#value = nv;
+        const {enhancedElement} = this;
+        (enhancedElement as any)[inferValueProperty(enhancedElement)] = nv;
+    }
+
+    #display: TDisplay | undefined;
+    
+    get display(): TDisplay | undefined {
+        return this.#display;
+    }
+    
+    set display(nv: TDisplay){
+        this.#display = nv;
+        const {enhancedElement} = this;
+        (enhancedElement as any)[inferDisplayProperty(enhancedElement)] = nv;
+    }
+
+    /**
+     * Get the inferred event type for the element
+     * @returns The most appropriate event type for this element
+     */
+    get eventType(): string {
+        return inferEventType(this.enhancedElement);
+    }
+
+    /**
+     * Get the inferred value property name for the element
+     * @returns The property name used for value assignment (e.g. 'value', 'checked', 'dateTime')
+     */
+    get valueProperty(): string {
+        return inferValueProperty(this.enhancedElement);
+    }
+
+    ['|'](itempropAttr: string, scopeBoundary: string = '[itemscope]'){
+        const candidates = this.enhancedElement.querySelectorAll(`[itemprop="${itempropAttr}"]`);
+        return Array.from(candidates)
+            .filter(el => withScopePerimeter(this.enhancedElement, el, scopeBoundary))
+            .map(x => new Infer(x, itempropAttr));
+    }
+
+    ['@'](nameAttr: string, scopeBoundary?: string){
+        const candidates = this.enhancedElement.querySelectorAll(`[name="${nameAttr}"]`);
+        const filtered = scopeBoundary
+            ? Array.from(candidates).filter(el => withScopePerimeter(this.enhancedElement, el, scopeBoundary))
+            : Array.from(candidates);
+        return filtered.map(x => new Infer(x, nameAttr));
+    }
+
+    ['%'](partAttr: string, scopeBoundary?: string){
+        const candidates = this.enhancedElement.querySelectorAll(`[part~="${partAttr}"]`);
+        const filtered = scopeBoundary
+            ? Array.from(candidates).filter(el => withScopePerimeter(this.enhancedElement, el, scopeBoundary))
+            : Array.from(candidates);
+        return filtered.map(x => new Infer(x, partAttr));
+    }
+
+    ['#'](id: string, scopeBoundary?: string){
+        const candidates = this.enhancedElement.querySelectorAll(`#${id}`);
+        const filtered = scopeBoundary
+            ? Array.from(candidates).filter(el => withScopePerimeter(this.enhancedElement, el, scopeBoundary))
+            : Array.from(candidates);
+        return filtered.map(x => new Infer(x, id));
+    }
+
+    ['.'](className: string, scopeBoundary?: string){
+        const candidates = this.enhancedElement.querySelectorAll(`.${className}`);
+        const filtered = scopeBoundary
+            ? Array.from(candidates).filter(el => withScopePerimeter(this.enhancedElement, el, scopeBoundary))
+            : Array.from(candidates);
+        return filtered.map(x => new Infer(x, className));
+    }
+
+    setDisplay(vm: any){
+        const val = this.#propName ? vm[this.#propName] : inferBindingProperty(this.enhancedElement);
+        this.display = val;
+    }
+
+    get defaultRemoteBindingPropName(){
+        const {enhancedElement} = this;
+        return enhancedElement.getAttribute('itemprop') || enhancedElement.getAttribute('name') || enhancedElement.getAttribute('id') || 'value'
+    }
+}
+
+/**
+ * Registry item for the Infer enhancement
+ * Register this with customElements.enhancementRegistry to enable smart value/display assignment
+ */
+export const registryItem: EnhancementConfig<any> = {
+    spawn: Infer as any,
+    enhKey: 'inferencer',
+    symlinks: {
+        [value]: 'value',
+        [display]: 'display'
+    }
+}
+
+/**
+ * Infer the most appropriate value property for an element
+ * @param element - The element to infer the property for
+ * @returns The property name to use for value assignment
+ */
+export function inferValueProperty(element: Element): string {
+    // Non-empty itemscope → route through ish (itemscope manager)
+    const itemscope = element.getAttribute('itemscope');
+    if (itemscope !== null && itemscope !== '') {
+        return 'ish';
+    }
+
+    const {localName} = element;
+    
+    switch (localName) {
+        case 'input': {
+            const type = element.getAttribute('type')?.toLowerCase();
+            switch (type) {
+                case 'checkbox':
+                case 'radio':
+                    return 'checked';
+                case 'number':
+                case 'range':
+                    return 'valueAsNumber';
+                default:
+                    return 'value';
+            }
+        }
+        case 'textarea':
+        case 'select':
+        case 'data':
+        case 'meter':
+        case 'progress':
+        case 'output':
+            return 'value';
+        case 'time':
+            return 'dateTime';
+        case 'a':
+        case 'area':
+            return 'href';
+        default: {
+            return 'textContent';
+        }
+    }
+}
+
+/**
+ * Infer the most appropriate display property for an element
+ * @param element - The element to infer the property for
+ * @returns The property name to use for display assignment
+ */
+export function inferDisplayProperty(element: Element): string {
+    const {localName} = element;
+    
+    switch (localName) {
+        case 'input':
+        case 'textarea':
+        case 'select':
+            return 'value';
+        case 'meter':
+        case 'progress':
+            return 'ariaValueText';
+        case 'time':
+        case 'data':
+        default:
+            return 'textContent';
+    }
+}
+
+/**
+ * Infer the most appropriate event type for an element
+ * Used when no explicit event type is provided
+ * @param element - The element to infer the event type for
+ * @returns The event type name like 'input', 'change', 'click', 'submit'
+ */
+export function inferEventType(element: Element): string {
+    const {localName} = element;
+    
+    switch (localName) {
+        case 'input':
+        case 'textarea':
+        case 'select':
+            return 'input';
+        case 'form':
+            return 'submit';
+        case 'details':
+            return 'toggle';
+        case 'dialog':
+            return 'close';
+        default:
+            return 'click';
+    }
+}
+
+/**
+ * Check if an element requires propagator-based observation for value changes.
+ * Elements like <data>, <meter>, <output>, <time> have no meaningful user-driven
+ * event for value changes — their values change programmatically and reflect to attributes.
+ * Custom elements (names containing '-') should also use the propagator path, since they
+ * may expose a native propagator (EventTarget) for property change notification.
+ * For these elements, consumers should use InferencedPropagator rather than raw addEventListener.
+ * @param element - The element to check
+ * @returns true if the element needs propagator-based observation
+ */
+export function needsPropagator(element: Element): boolean {
+    const {localName} = element;
+    switch (localName) {
+        case 'data':
+        case 'meter':
+        case 'output':
+        case 'time':
+            return true;
+        default:
+            // Custom elements should use propagator path — Infer.getPropagator()
+            // will check for a native propagator or fall back to InferencedPropagator
+            if (localName.includes('-')) return true;
+            return inferEventType(element) === 'click';
+    }
+}
+
+export function inferBindingProperty(element: Element): string {
+    return element.getAttribute('itemprop') || element.getAttribute('name') || element.getAttribute('id') || 'value';
+}
+
+export default registryItem;

package/inferencer/package-lock.json

@@ -0,0 +1,129 @@
+{
+  "name": "inferencer",
+  "version": "0.0.13",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "inferencer",
+      "version": "0.0.13",
+      "license": "MIT",
+      "dependencies": {
+        "assign-gingerly": "0.0.51"
+      },
+      "devDependencies": {
+        "@playwright/test": "1.60.0",
+        "@types/node": "25.9.3",
+        "spa-ssi": "0.0.27",
+        "typescript": "6.0.3"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.60.0.tgz",
+      "integrity": "sha512-O71yZIbAh/PxDMNGns37GHBIfrVkEVyn+AXyIa5dOTfb4/xNvRWV+Vv/NMbNCtODB/pO7vLlF2OTmMVLhmr7Ag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "25.9.3",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.3.tgz",
+      "integrity": "sha512-603BddQMv3pUcr4U2dhujk83N2tTDVr/34wII2B6bJy6g+8WD6yUb11jszNs0gdi4PesVWl7ABt8nYMVpnLUcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": ">=7.24.0 <7.24.7"
+      }
+    },
+    "node_modules/assign-gingerly": {
+      "version": "0.0.51",
+      "resolved": "https://registry.npmjs.org/assign-gingerly/-/assign-gingerly-0.0.51.tgz",
+      "integrity": "sha512-aHs6TYjhZbzwWJgogOK+3dpbuz7gk82jn0un1UdVLyobyTD1QZKwYz/nORavD/hsMT4Lcwhe/HO8sbQkkFZ/GQ==",
+      "license": "MIT"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.60.0.tgz",
+      "integrity": "sha512-hheHdokM8cdqCb0lcE3s+zT4t4W+vvjpGxsZlDnikarzx8tSzMebh3UiFtgqwFwnTnjYQcsyMF8ei2mCO/tpeA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.60.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.60.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.60.0.tgz",
+      "integrity": "sha512-9bW6zvX/m0lEbgTKJ6YppOKx8H3VOPBMOCFh2irXFOT4BbHgrx5hPjwJYLT40Lu+4qtD36qKc/Hn56StUW57IA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/spa-ssi": {
+      "version": "0.0.27",
+      "resolved": "https://registry.npmjs.org/spa-ssi/-/spa-ssi-0.0.27.tgz",
+      "integrity": "sha512-bV/ChmBlGBQLyroDcng/PR5IeH9LokcNxMuoURE0vDy2NNkW7uFVofvQjLpUMW6IdlCACpOEJsAStACz2kB6iA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

package/inferencer/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "inferencer",
+  "version": "0.0.13",
+  "description": "DOM Element Enhancement that makes commonly used inferences",
+  "homepage": "https://github.com/bahrus/inferencer#readme",
+  "bugs": {
+    "url": "https://github.com/bahrus/inferencer/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bahrus/inferencer.git"
+  },
+  "license": "MIT",
+  "author": "Bruce B. Anderson <anderson.bruce.b@gmail.com>",
+  "type": "module",
+  "types": "types/inferencer/types.d.ts",
+  "files": [
+    "*.js",
+    "*.ts",
+    "README.md",
+    "LICENSE",
+    "types/inferencer/types.d.ts"
+  ],
+  "exports": {
+    ".": {
+      "default": "./inferencer.js",
+      "types": "./inferencer.ts"
+    },
+    "./inferencer.js": {
+      "default": "./inferencer.js",
+      "types": "./inferencer.ts"
+    },
+    "./InferencedPropagator.js": {
+      "default": "./InferencedPropagator.js",
+      "types": "./InferencedPropagator.ts"
+    },
+    "./upSearch.js": {
+      "default": "./upSearch.js",
+      "types": "./upSearch.ts"
+    }
+  },
+  "main": "inferencer.js",
+  "module": "inferencer.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"
+  },
+  "dependencies": {
+    "assign-gingerly": "0.0.51"
+  },
+  "devDependencies": {
+    "@playwright/test": "1.60.0",
+    "spa-ssi": "0.0.27",
+    "@types/node": "25.9.3",
+    "typescript": "6.0.3"
+  }
+}

package/inferencer/playwright-report/data/507ad515125e13390ea07de92f22331c913fa068.md

@@ -0,0 +1,55 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: inferencer.spec.ts >> Inferencer Enhancement › should run all inferencer tests in browser
+- Location: tests\inferencer.spec.ts:3:1
+
+# Error details
+
+```
+Error: expect(received).toBe(expected) // Object.is equality
+
+Expected: 28
+Received: 25
+```
+
+# Page snapshot
+
+```yaml
+- generic [active] [ref=e1]:
+  - heading "Inferencer Enhancement Tests" [level=1] [ref=e2]
+  - generic [ref=e3]:
+    - 'heading "Results: 25/28 tests passed" [level=2] [ref=e4]'
+    - generic [ref=e5]: "✓ should set value on text input ✓ should set checked on checkbox ✓ should set checked on radio button ✓ should set value on textarea ✓ should set value on select ✓ should set textContent on div ✓ should set dateTime on time element ✓ should set value on data element ✓ should set value on progress element ✓ should set value on meter element ✓ should set value on output element ✓ should use itemprop as property name ✓ should set display (textContent) on div ✓ should set display (textContent) on time element ✓ should set display (ariaValueText) on meter element ✗ should be accessible via enh.infer: Enhancement not accessible via enh.infer ✓ should handle multiple value assignments ✓ should handle both value and display assignments ✓ should infer \"input\" event for input element ✓ should infer \"input\" event for textarea element ✓ should infer \"input\" event for select element ✓ should infer \"submit\" event for form element ✓ should infer \"toggle\" event for details element ✓ should infer \"close\" event for dialog element ✓ should infer \"click\" event for button element ✓ should infer \"click\" event for div element ✗ should access eventType via enh.infer.eventType: Cannot read properties of undefined (reading 'eventType') ✗ should return correct eventType for different elements via getter: Cannot read properties of undefined (reading 'eventType')"
+```
+
+# Test source
+
+```ts
+  1  | import { test, expect } from '@playwright/test';
+  2  | 
+  3  | test('Inferencer Enhancement › should run all inferencer tests in browser', async ({ page }) => {
+  4  |   // Start local server and navigate
+  5  |   await page.goto('http://localhost:8000/tests/inferencer.html');
+  6  |   
+  7  |   // Wait for tests to complete
+  8  |   await page.waitForFunction(() => window.testResults !== undefined, { timeout: 5000 });
+  9  |   
+  10 |   // Get test results
+  11 |   const results = await page.evaluate(() => window.testResults);
+  12 |   
+  13 |   // Log results
+  14 |   console.log(`Inferencer tests: ${results.passed}/${results.total} passed`);
+  15 |   results.results.forEach((result: string) => console.log(result));
+  16 |   
+  17 |   // Assert all tests passed
+> 18 |   expect(results.passed).toBe(results.total);
+     |                          ^ Error: expect(received).toBe(expected) // Object.is equality
+  19 | });
+  20 | 
+```