mount-observer 0.0.78 → 0.0.79

package/MountObserver.js

@@ -63,7 +63,12 @@ export class MountObserver extends EventTarget {
     async composeFragment(fragment, level) {
         const bis = fragment.querySelectorAll(`${inclTemplQry}`);
         for (const bi of bis) {
-            await this.#compose(bi, level);
+            if (bi.getAttribute('rel') === 'preload') {
+                (await import('./preloadContent.js')).preloadContent(bi, this.#mountInit.withTargetShadowRoot);
+            }
+            else {
+                await this.#compose(bi, level);
+            }
         }
     }
     async #compose(el, level) {
@@ -480,7 +485,12 @@ export class MountObserver extends EventTarget {
         });
         for (const elToMount of elsToMount) {
             if (elToMount.matches(inclTemplQry)) {
-                await this.#compose(elToMount, 0);
+                if (elToMount instanceof HTMLTemplateElement && elToMount.getAttribute('rel') === 'preload') {
+                    (await import('./preloadContent.js')).preloadContent(elToMount, this.#mountInit.withTargetShadowRoot);
+                }
+                else {
+                    await this.#compose(elToMount, 0);
+                }
             }
         }
         await bindishIt(els, target, { assigner });

package/MountObserver.ts

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

package/README.md

@@ -819,6 +819,15 @@ For example:
 <div>Strawberry Fields Forever</div>
 ```
 
+Optionally, a rel=stream attribute can be specified.  Other values of the attribute will result in different behavior from what is described below:
+
+```html
+<template rel=stream src=#id-of-source-template>
+   <span part=greeting>hello</span>
+   <span part=parting>goodbye<span>
+</template>
+```
+
 When it encounters such a thing, it searches "upwardly" through the chain of ShadowRoots for a template with id=id-of-source-template (in this case), and caches them as it finds them. 
 
 Let's say the source template looks as follows:
@@ -862,8 +871,8 @@ What we end up with is:
 Some significant differences with slot support as used with (ShadowDOM'd) custom elements
 
 1.  The mechanism to weave DOM together is more flexible here:  We are searching for DOM elements that match all the attributes of the children of the *target* template, that template that is pulling in the intra document source template.  The "part" attribute was used just as an example.
-2.  There is no mechanism for updating the slots.  That is something under investigation with this userland [custom enhancement](https://github.com/bahrus/be-inclusive) that allows for updating the existing DOM tree based on identical syntax.
-2.  ShadowDOM's slots act on a "many to one" basis.  Multiple light children with identical slot identifiers all get merged into a single (first?) matching slot within the Shadow DOM.  These "birtual" (birth-only, virtual) inclusions, instead, follow the opposite approach -- a single element can get cloned into multiple slot targets as it weaves itself into the templates as they get merged together.
+2.  There is no mechanism for updating slots.  That is something under investigation with this userland [custom enhancement](https://github.com/bahrus/be-inclusive) that allows for updating the existing DOM tree based on identical syntax.
+2.  ShadowDOM's slots act on a "many to one" basis.  Multiple light children with identical slot identifiers all get merged into a single (first?) matching slot within the Shadow DOM.  These "birtual" (birth-only, virtual) streaming inclusions, instead, follow the opposite approach -- a single element can get cloned into multiple slot targets as it weaves itself into the templates as they get merged together.
 
 ## Intra document html imports with Shadow DOM support
 
@@ -925,7 +934,7 @@ The [add src attribute to template to load a template from file](https://github.
 Just as it is useful to be able lazy load external imports when needed, it would also be useful to do the same for intra document HTML imports.  The most straightforward way this could be done seems to be as follows, either introducing some attribute like "type=conditional", or defining a new element that inherits from the HTMLTemplateElement, for example:
 
 ```html
-<template id=source-template type=conditional>
+<template id=source-template rel=conditional-stream>
 
    <template mount='{
       "on": ":not([defer-loading])",
@@ -961,6 +970,45 @@ Just as it is useful to be able lazy load external imports when needed, it would
 </compose>
 ```
 
+## Applying DRY to templates. [WIP]
+
+Recall that with the previous examples, there was an implicit value of the rel attribute:
+
+```html
+<template src=#source-template rel=stream>
+   <span slot=slot1>hello</span>
+   <span slot=slot2>goodbye<span>
+</template>
+```
+
+Now we provide another scenario where we want to specify a different kind of use of the src attribute adorning the template element -- simply as a way of saying "here is a template to be used within this context as templates are traditionally used (for cloning reusable HTML), but the actual contents for the template is defined remotely (intra document or via http).
+
+My timing experiments indicate that it is faster to extract out all the needed template elements defined within a repeating template -- keep the contents that need repeated cloning lighter, and only clone fragments as needed from an external reference.
+
+```html
+<html>
+   <head>
+      <template id=directory>
+         My Shared Content
+      </template>
+   </head>
+   <body>
+      <div itemscope>
+         <template id=directoryConsumer rel=preload src=#directory></template>
+      </div>
+   </body>
+   <script type=module>
+      import {waitForEvent} from 'mount-observer/waitForEvent.js'
+      async function getContent(){
+         if(directoryConsumer.remoteContent) return directoryConsumer.remoteContents;
+         await waitForEvent(directoryConsumer, 'load');
+         return directoryConsumer.remoteContents;
+      }
+      await getContent(directoryConsumer)
+   </script>
+</html>
+```
+
 
 
 ## Creating "frameworks" that revolve around MOSEs.

package/getContent.ts

@@ -0,0 +1,10 @@
+import {waitForEvent} from './waitForEvent.js';
+import {TemplateWithRemoteContent} from './ts-refs/mount-observer/types.js';
+
+export async function getContent(templ: HTMLTemplateElement, target?: DocumentFragment | ShadowRoot | Document | Element) {
+    const templWithRemoteContent = templ as TemplateWithRemoteContent;
+    if(templWithRemoteContent.remoteContent) return templWithRemoteContent.remoteContent;
+    await waitForEvent(templ, 'load');
+    if(templWithRemoteContent.remoteContent) return templWithRemoteContent.remoteContent;
+    throw 500; //remote content not loaded
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mount-observer",
-  "version": "0.0.78",
+  "version": "0.0.79",
   "description": "Observe and act on css matches.",
   "main": "MountObserver.js",
   "module": "MountObserver.js",
@@ -41,6 +41,10 @@
       "default": "./doCleanup.js",
       "types": "./doCleanup.ts"
     },
+    "./getContent.js": {
+      "default": "./getContent.js",
+      "types": "./getContent.ts"
+    },
     "./waitForEvent.js": {
       "default": "./waitForEvent.js",
       "types": "./waitForEvent.ts"

package/preloadContent.js

@@ -0,0 +1,42 @@
+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
+    }
+}

package/preloadContent.ts

@@ -0,0 +1,40 @@
+import {TemplateWithRemoteContent} from './ts-refs/mount-observer/types.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,
+
+        });
+    }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
+    }
+}

package/ts-refs/folder-picker/types.d.ts

@@ -0,0 +1,43 @@
+import {IEnhancement, BEAllProps} from '../trans-render/be/types';
+
+/**
+ * 
+ */
+export interface DirectoryPickerOptions {
+    /**
+     * By specifying an ID, the browser can remember different directories for different IDs. If the same ID is used for another picker, the picker opens in the same directory.
+     */
+    id?: string;
+
+    /**
+     * A string that defaults to "read" for read-only access or "readwrite" for read and write access to the directory.
+     */
+    mode?: 'read' | 'readwrite';
+
+    /**
+     * A FileSystemHandle or a well known directory ("desktop", "documents", "downloads", "music", "pictures", or "videos") to open the dialog in.
+     * 
+     */
+    startIn?: 'documents' | 'downloads' | 'music' | 'pictures' | 'videos' | 'home' | 'desktop' | File;
+}
+export interface EndUserProps extends IEnhancement{
+    options: DirectoryPickerOptions;
+    noNudge: boolean;
+}
+
+export interface AllProps extends EndUserProps{
+    directoryHandle?: FileSystemDirectoryHandle;
+}
+
+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;
+}
+

package/ts-refs/mount-observer/types.d.ts

@@ -240,5 +240,9 @@ export type IshCtr = ({new() : Ishcycle}) | (() => Promise<{new() : Ishcycle}>);
 
 export type RefType = '#' | '!';
 
+export interface TemplateWithRemoteContent extends HTMLTemplateElement {
+    remoteContent?: DocumentFragment,
+}
+
 
 

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

@@ -219,7 +219,7 @@ export interface UnitOfWork<TProps, TMethods = TProps, TElement = {}>{
     /**
      * abbrev. for addEventListener
      */
-    a?:  AddEventListenerType<TProps, TMethods> | Array<AddEventListenerType<TProps, TMethods>>,
+    a?:  0 | AddEventListenerType<TProps, TMethods> | Array<AddEventListenerType<TProps, TMethods>>,
 
     /**
      * Specify how the value we want to apply to the target element should be derived from the observed props.
@@ -434,7 +434,7 @@ export interface AddEventListener<TProps, TMethods>{
 }
 
 export type XForm<TProps, TMethods, TElement = {}> = Partial<{
-    [key in LHS<TProps, TElement>]: RHS<TProps, TMethods, TElement>;
+    [key in LHS<TProps & TMethods, TElement>]: RHS<TProps, TMethods, TElement>;
 }>;
 
 export interface Info  {

package/upShadowSearch.js

@@ -0,0 +1,18 @@
+export function upShadowSearch(ref, id) {
+    let rn = ref.getRootNode();
+    while (rn) {
+        let test = rn.getElementById(id);
+        if (test)
+            return test;
+        if (rn.host) {
+            test = rn.host[id];
+            if (test instanceof HTMLElement)
+                return test;
+            rn = rn.host.getRootNode();
+        }
+        else if (rn === document) {
+            return null;
+        }
+        throw 'NI';
+    }
+}

package/upShadowSearch.ts

@@ -0,0 +1,16 @@
+export function upShadowSearch(ref: Element, id: string){
+    let rn = ref.getRootNode() as (Document | DocumentFragment | ShadowRoot) & { host?: Element };
+    while(rn){
+        let test = rn.getElementById(id);
+        if(test) return test;
+        if(rn.host){
+            test = rn.host[id];
+            if(test instanceof HTMLElement) return test;
+            rn = rn.host.getRootNode() as (DocumentFragment | ShadowRoot) & { host?: Element };
+        }else if(rn === document){
+            return null;
+        }
+        throw 'NI';
+    }
+}
+