mount-observer 0.0.82 → 0.0.84

package/MountObserver.js

@@ -64,7 +64,7 @@ export class MountObserver extends EventTarget {
         const bis = fragment.querySelectorAll(`${inclTemplQry}`);
         for (const bi of bis) {
             if (bi.getAttribute('rel') === 'preload') {
-                (await import('./preloadContent.js')).preloadContent(bi, this.#mountInit.withTargetShadowRoot);
+                (await import('./preloadContent.js')).preloadContent(bi);
             }
             else {
                 await this.#compose(bi, level);
@@ -486,7 +486,7 @@ export class MountObserver extends EventTarget {
         for (const elToMount of elsToMount) {
             if (elToMount.matches(inclTemplQry)) {
                 if (elToMount instanceof HTMLTemplateElement && elToMount.getAttribute('rel') === 'preload') {
-                    (await import('./preloadContent.js')).preloadContent(elToMount, this.#mountInit.withTargetShadowRoot);
+                    (await import('./preloadContent.js')).preloadContent(elToMount /*, this.#mountInit.withTargetShadowRoot*/);
                 }
                 else {
                     await this.#compose(elToMount, 0);

package/MountObserver.ts

@@ -77,7 +77,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
         const bis = fragment.querySelectorAll(`${inclTemplQry}`) as NodeListOf<HTMLTemplateElement>;
         for(const bi of bis){
             if(bi.getAttribute('rel') === 'preload'){
-                (await import('./preloadContent.js')).preloadContent(bi, this.#mountInit.withTargetShadowRoot);
+                (await import('./preloadContent.js')).preloadContent(bi);
             }else{
                 await this.#compose(bi, level);
             }
@@ -515,7 +515,7 @@ export class MountObserver extends EventTarget implements IMountObserver{
         for(const elToMount of elsToMount){
             if(elToMount.matches(inclTemplQry)){
                 if(elToMount instanceof HTMLTemplateElement && elToMount.getAttribute('rel') === 'preload'){
-                    (await import('./preloadContent.js')).preloadContent(elToMount, this.#mountInit.withTargetShadowRoot);
+                    (await import('./preloadContent.js')).preloadContent(elToMount/*, this.#mountInit.withTargetShadowRoot*/);
                 }else{
                     await this.#compose(elToMount as HTMLTemplateElement, 0);
                 }

package/README.md

@@ -11,7 +11,7 @@ Author:  Bruce B. Anderson (with valuable feedback from @doeixd )
 
 Issues / pr's / polyfill:  [mount-observer](https://github.com/bahrus/mount-observer)
 
-Last Update: Aug 2, 2025
+Last Update: Aug 7, 2025
 
 ## Benefits of this API
 
@@ -929,7 +929,7 @@ The discussion there leads to an open question whether a processing instruction
 
 The [add src attribute to template to load a template from file](https://github.com/whatwg/html/issues/10571) and an interesting proposal that is [coming from](https://github.com/htmlcomponents/declarative-shadow-imports/blob/main/examples/02-explainer-proposal/02-html.html) the Edge team [seem quite compatible](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/ShadowDOM/explainer.md#proposal-inline-declarative-css-module-scripts) with this idea.
 
-## Applying DRY to templates. [WIP]
+## Applying DRY to templates
 
 Recall that with the previous examples, there was an implicit value of the rel attribute:
 
@@ -1160,11 +1160,7 @@ Again, because of the mount-observer being the "first point of contact" with the
       console.log({e});
       //{addedChildren, removedChildren}
    });
-   console.log(myId2.via.itemref.parents); //TODO
-   const mo = new MountObserver({ //TODO
-      via: 'itemref.children',
-   });
-   mo.observe('#section');
+   
 </script>
 ```
 
@@ -1183,9 +1179,6 @@ Again, because of the mount-observer being the "first point of contact" with the
    console.log(mySpan.via.ariaLabelledby.children);
    //[span#tac, span#tac2]
 
-   console.log(tac2.via.ariaLabelledby.parents);
-   //[span#mySpan]
-
 
    mySpan.via.ariaLabelledby.addEventListener('change', e => {
       console.log({e});
@@ -1215,11 +1208,6 @@ Again, because of the mount-observer being the "first point of contact" with the
    </tbody>
 </table>
 <script>
-   console.log(myTbody.group.dataParentName.by.group1);
-   // [tr.myTR1, tr.myTR2]
-   myTbody.group.dataParentName.by.group1.addEventListener('change', e => {
-      {addedMember, removedMember}
-   });
 
    console.log(myTR1.joinMatching.dataParentName.fromClosest.tbody);
    // [tr#myTR1, tr#myTR2]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.82",
+  "version": "0.0.84",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -61,7 +61,7 @@
       "default": "./refid/getAdjRefs.js",
       "types": "./refid/getAdjRefs.ts"
     },
-    "./refid/joinMatching.js":{
+    "./refid/joinMatching.js": {
       "default": "./refid/joinMatching.js",
       "types": "./refid/joinMatching.ts"
     },
@@ -77,7 +77,6 @@
       "default": "./refid/via.js",
       "types": "./refid/via.ts"
     },
-
     "./refid/splitRefs.js": {
       "default": "./refid/splitRefs.js",
       "types": "./refid/splitRefs.ts"

package/preloadContent.js

@@ -1,42 +1,43 @@
+import { upShadowSearch } from './upShadowSearch.js';
 const remoteTemplElSym = Symbol.for('du3y+tfsAUGFHMG/iHZiMQ');
-export async function preloadContent(templ, target) {
-    const templWithRemoteContent = templ;
-    if (templWithRemoteContent.remoteContent)
-        return templWithRemoteContent.remoteContent;
-    const src = templ.getAttribute('src');
-    if (!src)
-        throw 300; //no src attribute
-    const isIntraDoc = src[0] === '#';
-    if (!('remoteContent' in templWithRemoteContent)) {
-        //define a property on the template instance
-        Object.defineProperty(templWithRemoteContent, 'remoteContent', {
-            get() {
-                if (isIntraDoc) {
-                    const ref = this[remoteTemplElSym]?.deref();
-                    if (ref)
-                        return ref.content;
-                }
-                else {
-                    throw 'NI'; //not implemented
-                }
-            },
-            enumerable: true,
-            configurable: true,
-        });
-    }
-    else {
-        return;
-    }
-    if (isIntraDoc) {
-        const id = src.substring(1);
-        const { upShadowSearch } = await import('./upShadowSearch.js');
-        const remoteTempl = upShadowSearch(templ, id) || upShadowSearch((target || document), id);
-        if (!(remoteTempl instanceof HTMLTemplateElement))
-            throw 404; //not found
-        templWithRemoteContent[remoteTemplElSym] = new WeakRef(remoteTempl);
-        templWithRemoteContent.dispatchEvent(new Event('load'));
-    }
-    else {
-        throw 'NI'; //not implemented
+Object.defineProperty(HTMLTemplateElement.prototype, 'remoteContent', {
+    get() {
+        const templ = this;
+        const src = templ.getAttribute('src');
+        if (src === null) {
+            const head = document.head;
+            if (window[remoteTemplElSym] === undefined) {
+                window[remoteTemplElSym] = 0;
+            }
+            const id = templ.id || window[remoteTemplElSym]++;
+            const sourceTempl = document.createElement('template');
+            sourceTempl.id = '' + id;
+            sourceTempl.content.appendChild(templ.content);
+            head.append(sourceTempl);
+            templ.innerHTML = '';
+            templ.setAttribute('src', `#${id}`);
+            templ.setAttribute('rel', 'preload');
+            templ[remoteTemplElSym] = new WeakRef(sourceTempl);
+            return sourceTempl.content;
+        }
+        {
+            const test = templ[remoteTemplElSym]?.deref();
+            if (test !== undefined)
+                return test;
+            if (templ.getAttribute('rel') !== 'preload')
+                throw 'NI';
+            const isIntraDoc = src[0] === '#';
+            if (!isIntraDoc)
+                throw 'NI';
+            const id = src.substring(1);
+            const remoteTempl = upShadowSearch(templ, id);
+            if (!(remoteTempl instanceof HTMLTemplateElement))
+                throw 404; //not found
+            templ[remoteTemplElSym] = new WeakRef(remoteTempl);
+            //templ.dispatchEvent(new Event('load'));
+        }
     }
+});
+export function preloadContent(templ) {
+    const content = templ.remoteContent;
 }

package/preloadContent.ts

@@ -1,43 +1,46 @@
 import {TemplateWithRemoteContent} from './ts-refs/mount-observer/types.js';
+import {upShadowSearch} from './upShadowSearch.js';
 const remoteTemplElSym = Symbol.for('du3y+tfsAUGFHMG/iHZiMQ');
 
-export async function preloadContent(
-    templ: HTMLTemplateElement, 
-    target?: DocumentFragment | ShadowRoot | Document | Element
-) {
-    const templWithRemoteContent = templ as TemplateWithRemoteContent & { 
-        [remoteTemplElSym]?: WeakRef<HTMLTemplateElement>
-    };
-    if(templWithRemoteContent.remoteContent) return templWithRemoteContent.remoteContent;
-    const src = templ.getAttribute('src');
-    if(!src) throw 300; //no src attribute
-    const isIntraDoc = src[0] === '#';
-    if(!('remoteContent' in templWithRemoteContent)) {
-        //define a property on the template instance
-        Object.defineProperty(templWithRemoteContent, 'remoteContent', {
-            get(){
-                if(isIntraDoc){
-                    const ref = this[remoteTemplElSym]?.deref();
-                    if(ref) return ref.content;
-                }else{
-                    throw 'NI'; //not implemented
-                }
-            },
-            enumerable: true,
-            configurable: true,
+Object.defineProperty(HTMLTemplateElement.prototype, 'remoteContent', {
+    get(){
+        const templ = this as HTMLTemplateElement;
+        const src = templ.getAttribute('src');
+        if(src === null){
+            const head = document.head;
+            if((<any>window)[remoteTemplElSym] === undefined ){
+                (<any>window)[remoteTemplElSym] = 0;
+            }
+            const id = templ.id || (<any>window)[remoteTemplElSym]++;
+            const sourceTempl = document.createElement('template');
+            sourceTempl.id = '' + id;
+            sourceTempl.content.appendChild(templ.content);
+            head.append(sourceTempl);
+            templ.innerHTML = '';
+            templ.setAttribute('src', `#${id}`);
+            templ.setAttribute('rel', 'preload');
+            (<any>templ)[remoteTemplElSym] = new WeakRef(sourceTempl);
+            return sourceTempl.content;
+        }
+        {
+            const test = (<any>templ)[remoteTemplElSym]?.deref();
+            if(test !== undefined) return test;
+            if(templ.getAttribute('rel') !== 'preload') throw 'NI';
+            const isIntraDoc = src[0] === '#';
+            if(!isIntraDoc) throw 'NI';
+            const id = src.substring(1);
+            const remoteTempl = upShadowSearch(templ, id);
+            if(!(remoteTempl instanceof HTMLTemplateElement)) throw 404; //not found
+            (<any>templ)[remoteTemplElSym] = new WeakRef(remoteTempl);
+            //templ.dispatchEvent(new Event('load'));
+        }
 
-        });
-    }else{
-        return;
-    }
-    if(isIntraDoc){
-        const id = src.substring(1);
-        const {upShadowSearch} = await import('./upShadowSearch.js');
-        const remoteTempl = upShadowSearch(templ, id) || upShadowSearch((target || document) as Element, id);
-        if(!(remoteTempl instanceof HTMLTemplateElement)) throw 404; //not found
-        templWithRemoteContent[remoteTemplElSym] = new WeakRef(remoteTempl);
-        templWithRemoteContent.dispatchEvent(new Event('load'));
-    }else{
-        throw 'NI'; //not implemented
     }
+})
+
+export function preloadContent(
+    templ: HTMLTemplateElement,
+) {
+    const content = (<any>templ).remoteContent;
+    
 }

package/ts-refs/be-enhancing/types.d.ts

@@ -0,0 +1,31 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+import { Specifier } from "../trans-render/dss/types";
+
+export interface EndUserProps extends IEnhancement{
+}
+
+export interface AllProps extends EndUserProps{
+    parsedStatements: Array<ResolvingParameters>,
+    rawStatements?: Array<string>
+}
+
+export type AP = AllProps;
+
+export type PAP = Partial<AP>;
+
+export type ProPAP = Promise<PAP>;
+
+export type BAP = AP & BEAllProps;
+
+export interface Actions{
+    hydrate(self: BAP): ProPAP;
+}
+
+export interface ResolvingParameters{
+    remoteSpecifierString: string;
+    remoteSpecifier: Specifier;
+    enhancementBase: string;
+    localSpecifierString: string;
+    localSpecifier: Specifier;
+    remotePropertyPath: string;
+}

package/ts-refs/be-switched/types.d.ts

@@ -28,10 +28,11 @@ export interface EndUserProps extends IEnhancement<HTMLTemplateElement>{
     beOosoom?: string;
     js?: string;
     transitional: boolean;
+    idRefAttr: string;
     /**
      * Use comments rather a DOM element to wrap multiple elements
      */
-    cmtWrap?: boolean;
+    //cmtWrap?: boolean;
 }
 
 export interface AllProps extends EndUserProps{
@@ -49,6 +50,7 @@ export interface AllProps extends EndUserProps{
     rawStatements?: Array<string>,
     notProcessedJS?: boolean,
     emc: EMC<any, AllProps>,
+    
 }
 
 export type SwitchStatement = string;

package/ts-refs/trans-render/types.d.ts

@@ -313,6 +313,11 @@ export interface UnitOfWork<TProps, TMethods = TProps, TElement = {}>{
      */
     ss?: string,
 
+    /**
+     * two way bind the listed props to data- attributes
+     */
+    data?: Array<keyof TProp & string>
+
     /**
      * negate to
      */
@@ -395,7 +400,7 @@ export type UnitOfWorkRHS<TProps, TMethods, TElement = {}> =
     | XForm<any, any, any> & Info //unclear if this is necessary
 ;
 
-export type RHS<TProps, TMethods, TElements = Element> = UnitOfWorkRHS<TProps, TMethods, TElements> | Array<UnitOfWork<TProps, TMethods, TElements>>;
+export type RHS<TProps = any, TMethods = TProps, TElements = Element> = UnitOfWorkRHS<TProps, TMethods, TElements> | Array<UnitOfWork<TProps, TMethods, TElements>>;
 
 export interface AttrMap{
     type: PropAttrQueryType,