@webqit/oohtml 4.3.8 → 4.3.9

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "4.3.8",
+  "version": "4.3.9",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/html-imports/HTMLImportsContext.js

@@ -22,9 +22,9 @@ export default class HTMLImportsContext extends DOMContext {
             request.detail = detail;
             request.targetContext = Infinity;
         } else if ( detail?.startsWith( '@' ) ) {
-            const [ targetContext, ...detail ] = detail.slice( 1 ).split( /(?<=\w)(?=\/|#)/ ).map( s => s.trim() );
+            const [ targetContext, ..._detail ] = detail.slice( 1 ).split( /(?<=\w)(?=\/|#)/ ).map( s => s.trim() );
             request.targetContext = targetContext;
-            request.detail = detail.join( '' );
+            request.detail = _detail.join( '' );
         } else { request.detail = detail; }
         return request;
     }
@@ -33,11 +33,14 @@ export default class HTMLImportsContext extends DOMContext {
      * @localModules
      */
     get localModules() { return getDefs( this.host ); }
+    get inheritedModules() { return this.#inheritedModules; }
+    #inheritedModules = {};
+
 
     /**
      * @handle()
      */
-    handle( event ) {
+    handle__( event ) {
         const { window: { webqit: { Observer } } } = env;
         // Any existing event.meta.controller? Abort!
         event.meta.controller?.abort();
@@ -55,27 +58,22 @@ export default class HTMLImportsContext extends DOMContext {
             const _result = Array.isArray( result ) ? result : result.value;
             const _isValidLocalResult = Array.isArray( result ) ? result.length : result.value;
             if ( !_isValidLocalResult && this.host.isConnected === false ) return; // Subtree is being disposed
-            if ( _isValidLocalResult || !this.contextModules ) {
+            if ( _isValidLocalResult || !this.#inheritedModules ) {
                 event._isValidLocalResult = _isValidLocalResult;
                 return event.respondWith( _result );
             }
             // This superModules binding is automatically aborted by the injected control.signal; see below
-            return Observer.reduce( this.contextModules, path, Observer.get, result => {
+            return Observer.reduce( this.#inheritedModules, path, Observer.get, result => {
                 event._currentSource = 'context';
                 return event.respondWith( Array.isArray( result ) ? result : result.value );
             }, { ...options, signal } );
         }, { lifecycleSignals: true, ...options } );
     }
 
-    /**
-     * @unsubscribed()
-     */
-    unsubscribed( event ) { event.meta.controller?.abort(); }
-
     /**
      * @startRealtime()
      */
-    realtimeSources( host ) {
+    realtimeSources__( host ) {
         this.host = host;
         // ----------------
         const update = () => {
@@ -87,35 +85,100 @@ export default class HTMLImportsContext extends DOMContext {
         // ----------------
         const $config = this.configs.HTML_IMPORTS;
         if ( !this.host.matches || !$config.attr.importscontext ) return;
-        // Any existing this.refdSourceController? Abort!
-        this.refdSourceController?.disconnect();
         const realdom = this.host.ownerDocument.defaultView.webqit.realdom;
         let prevRef;
-        this.refdSourceController = realdom.realtime( this.host ).attr( $config.attr.importscontext, ( record, { signal } ) => {
+        this.controller3 = realdom.realtime( this.host ).attr( $config.attr.importscontext, ( record, { signal } ) => {
             if (record.value === prevRef) return;
             prevRef = record.value;
-            // No importscontext attr set. But we're still watching
-            if ( !record.value ) {
-                this.contextModules = undefined;
-                return update();
-            }
             // This superModules contextrequest is automatically aborted by the injected signal below
-            const request = { ...this.constructor.createRequest( record.value.trim() ), live: true, signal, diff: true };
+            const request = { ...this.constructor.createRequest( record.value?.trim() ), live: true, signal, diff: true };
             this.host.parentNode[ this.configs.CONTEXT_API.api.contexts ].request( request, response => {
-                this.contextModules = !( response && Object.getPrototypeOf( response ) ) ? response : getDefs( response );
+                this.#inheritedModules = !( response && Object.getPrototypeOf( response ) ) ? response : getDefs( response );
                 update();
             } );
         }, { live: true, timing: 'sync', lifecycleSignals: true } );
     }
 
+    /**
+     * @handle()
+     */
+    
+    handle( event ) {
+        const { window: { webqit: { Observer } } } = env;
+        // Any existing event.meta.controller? Abort!
+        event.meta.controller?.abort();
+        // Parse and translate detail
+        let path = ( event.detail || '' ).split( /\/|(?<=\w)(?=#)/g ).map( x => x.trim() ).filter( x => x );
+        if ( !path.length ) return event.respondWith();
+        path = path.join( `/${ this.configs.HTML_IMPORTS.api.defs }/` )?.split( '/' ).map( x => x === '*' ? Infinity : x ) || [];
+        // We'll now fulfill request
+        const options = { live: event.live, signal: event.signal, descripted: true };
+        event.meta.controller = Observer.reduce( this.#modules, path, Observer.get, ( m ) => {
+            if ( Array.isArray( m ) ) {
+                // Paths with wildcard
+                for ( const n of m ) {
+                    event.respondWith( n );
+                }
+            } else event.respondWith( m.value );
+        }, options );
+    }
+
+    /**
+     * @unsubscribed()
+     */
+    unsubscribed( event ) { event.meta.controller?.abort(); }
+
     /**
      * @initialize()
      */
+    #modules;
+    #controller1;
+    #controller2;
     initialize( host ) {
+        this.host = host;
+        const { window: { webqit: { Observer } } } = env;
+        // ----------------
+        // Observe local
+        this.#modules = Object.assign( {}, this.localModules );
+        this.#controller1?.abort();
+        this.#controller1 = Observer.observe( this.localModules, ( mutations ) => {
+            for ( const m of mutations ) {
+                if ( m.type === 'delete' ) {
+                    if ( this.inheritedModules && Observer.has( this.inheritedModules, m.key ) ) {
+                        Observer.set( this.#modules, m.key, Observer.get( this.inheritedModules, m.key ) );
+                    } else Observer.deleteProperty( this.#modules, m.key );
+                } else Observer.set( this.#modules, m.key, m.value );
+            }
+        }, { timing: 'sync' } );
+        // ----------------
         // If host has importscontext attr, compute that
-        this.realtimeSources( host );
-        // Now, listen for contextrequest and contextclaim events
-        // And process own claim
+        const $config = this.configs.HTML_IMPORTS;
+        if ( this.host.matches && $config.attr.importscontext ) {
+            const realdom = this.host.ownerDocument.defaultView.webqit.realdom;
+            let prevRef;
+            this.#controller2?.disconnect();
+            this.#controller2 = realdom.realtime( this.host ).attr( $config.attr.importscontext, ( record, { signal } ) => {            
+                const moduleRef = ( record.value || '' ).trim();
+                if ( moduleRef === prevRef ) return;
+                prevRef = moduleRef;
+                // This superModules contextrequest is automatically aborted by the injected signal below
+                const request = { ...this.constructor.createRequest( moduleRef ? `${moduleRef}/*` : '*' ), live: true, signal, diff: true };
+                this.host.parentNode[ this.configs.CONTEXT_API.api.contexts ].request( request, ( m ) => {
+                    if ( m.type === 'delete' ) {
+                        Reflect.deleteProperty( this.inheritedModules, m.key );
+                        if ( !Observer.has( this.localModules, m.key ) ) {
+                            Observer.deleteProperty( this.#modules, m.key );
+                        }
+                    } else {
+                        Reflect.set( this.inheritedModules, m.key, m.value );
+                        if ( !Observer.has( this.localModules, m.key ) ) {
+                            Observer.set( this.#modules, m.key, m.value );
+                        }
+                    }
+                } );
+            }, { live: true, timing: 'sync', lifecycleSignals: true } );
+        }
+        // ----------------
         return super.initialize( host );
     }
     
@@ -124,7 +187,8 @@ export default class HTMLImportsContext extends DOMContext {
      */
     dispose( host ) {
         // Stop listening for sources
-        this.refdSourceController?.disconnect();
+        this.#controller1?.abort();
+        this.#controller2?.disconnect();
         // Now, stop listening for contextrequest and contextclaim events
         // And relinquish own subscribers to owner context
         return super.dispose( host );

package/test/modules.test.js

@@ -186,6 +186,7 @@ describe(`HTML Modules`, function() {
             // -------
             scoped.remove();
             expect( defsObjs ).to.have.length( 3 );
+
             expect( defsObjs[ 2 ] ).to.have.property( 'scoped', false );
             // -------
             document.body.appendChild( scoped );