@webqit/oohtml 4.0.2 → 4.1.0

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,6 +26,10 @@
   "type": "module",
   "sideEffects": true,
   "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./lite": "./src/index.lite.js"
+  },
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
@@ -35,8 +39,8 @@
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
-    "@webqit/quantum-js": "^4.5.2",
-    "@webqit/realdom": "^2.1.23",
+    "@webqit/quantum-js": "^4.5.5",
+    "@webqit/realdom": "^2.1.24",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {

package/src/bindings-api/DOMBindingsContext.js

@@ -39,11 +39,11 @@ export default class DOMBindingsContext extends DOMContext {
      * @handle()
      */
     handle( event ) {
-        // Any existing event._controller? Abort!
-        event._controller?.abort();
+        // Any existing event.meta.controller? Abort!
+        event.meta.controller?.abort();
         if ( !( event.detail + '' ).trim() ) return event.respondWith( this.bindingsObj );
         const { window: { webqit: { Observer } } } = env;
-        event._controller = Observer.reduce( this.bindingsObj, Array.isArray( event.detail ) ? event.detail : [ event.detail ], Observer.get, descriptor => {
+        event.meta.controller = Observer.reduce( this.bindingsObj, Array.isArray( event.detail ) ? event.detail : [ event.detail ], Observer.get, descriptor => {
             if ( this.disposed ) return; // If already scheduled but aborted as in provider unmounting
             event.respondWith( descriptor.value );
         }, { live: event.live, signal: event.signal, descripted: true } );
@@ -52,5 +52,5 @@ export default class DOMBindingsContext extends DOMContext {
     /**
      * @unsubscribed()
      */
-    unsubscribed( event ) { event._controller?.abort(); }
+    unsubscribed( event ) { event.meta.controller?.abort(); }
 }

package/src/bindings-api/index.js

@@ -33,12 +33,12 @@ function getBindings( config, node ) {
         Observer.observe( bindingsObj, mutations => {
             // Reflection
             const props = Object.keys( bindingsObj );
-            const targetNode = node === window.document ? window.document.documentElement : node;
+            const reflectionTargetNode = node instanceof window.Document ? node.documentElement : node;
             const bindingsReflection = config.attr.bindingsreflection;
-            if ( props.length && bindingsReflection ) {
-                targetNode.setAttribute( config.attr.bindingsreflection, props.join( ' ') );
-            } else if ( bindingsReflection ) {
-                targetNode.toggleAttribute( config.attr.bindingsreflection, false );
+            if ( props.length && bindingsReflection && reflectionTargetNode.setAttribute ) {
+                reflectionTargetNode.setAttribute( config.attr.bindingsreflection, props.join( ' ') );
+            } else if ( bindingsReflection && reflectionTargetNode.setAttribute ) {
+                reflectionTargetNode.toggleAttribute( config.attr.bindingsreflection, false );
             }
             // Re: DOMBindingsContext
             const contextsApi = node[ ctxConfig.api.contexts ];
@@ -64,24 +64,20 @@ function getBindings( config, node ) {
  */
 function exposeAPIs( config ) {
 	const window = this, { webqit: { Observer } } = window;
-    // Assertions
-    if ( config.api.bind in window.document ) { throw new Error( `document already has a "${ config.api.bind }" property!` ); }
-    if ( config.api.bindings in window.document ) { throw new Error( `document already has a "${ config.api.bindings }" property!` ); }
-    if ( config.api.bind in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.bind }" property!` ); }
-    if ( config.api.bindings in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.bindings }" property!` ); }
-    // Definitions
-    Object.defineProperty( window.document, config.api.bind, { value: function( bindings, options = {} ) {
-        return applyBindings.call( window, config, window.document, bindings, options );
-    } });
-    Object.defineProperty( window.document, config.api.bindings, { get: function() {
-        return Observer.proxy( getBindings.call( window, config, window.document ) );
-    } });
-    Object.defineProperty( window.Element.prototype, config.api.bind, { value: function( bindings, options = {} ) {
-        return applyBindings.call( window, config, this, bindings, options );
-    } });
-    Object.defineProperty( window.Element.prototype, config.api.bindings, { get: function() {
-        return Observer.proxy( getBindings.call( window, config, this ) );
-    } } );
+    // The Bindings APIs
+    [ window.Document.prototype, window.Element.prototype, window.ShadowRoot.prototype ].forEach( prototype => {
+        // No-conflict assertions
+        const type = prototype === window.Document.prototype ? 'Document' : ( prototype === window.ShadowRoot.prototype ? 'ShadowRoot' : 'Element' );
+        if ( config.api.bind in prototype ) { throw new Error( `The ${ type } prototype already has a "${ config.api.bind }" API!` ); }
+        if ( config.api.bindings in prototype ) { throw new Error( `The ${ type } prototype already has a "${ config.api.bindings }" API!` ); }
+        // Definitions
+        Object.defineProperty( prototype, config.api.bind, { value: function( bindings, options = {} ) {
+            return applyBindings.call( window, config, this, bindings, options );
+        } });
+        Object.defineProperty( prototype, config.api.bindings, { get: function() {
+            return Observer.proxy( getBindings.call( window, config, this ) );
+        } } );
+    } );
 }
 
 /**

package/src/context-api/DOMContext.js

@@ -36,7 +36,7 @@ export default class DOMContext {
     /**
      * @name
      */
-    get name() { return this.host === env.window.document ? Infinity : this.host.getAttribute( this.configs.CONTEXT_API.attr.contextname ); }
+    get name() { return [ env.window.Document, env.window.ShadowRoot ].some( x => this.host instanceof x ) ? Infinity : this.host.getAttribute( this.configs.CONTEXT_API.attr.contextname ); }
 
     /**
      * @subscribed()
@@ -67,15 +67,15 @@ export default class DOMContext {
     handleEvent( event ) {
         if ( this.disposed || typeof event.respondWith !== 'function'  ) return;
         if ( event.type === 'contextclaim' ) {
-            if ( event.target === this.host || !( event.detail instanceof DOMContext ) ) return;
+            if ( !( event.detail instanceof DOMContext ) || event.target === this.host ) return;
             const claims = new Set;
             this.subscriptions.forEach( subscriptionEvent => {
                 if ( !event.target.contains( subscriptionEvent.target ) || !event.detail.matchEvent( subscriptionEvent ) ) return;
-                event.stopPropagation();
                 this.subscriptions.delete( subscriptionEvent );
+                this.unsubscribed( subscriptionEvent );
                 claims.add( subscriptionEvent );
             } );
-            return event.respondWith( claims );
+            if ( claims.size ) { return event.respondWith( claims ); }
         }
         if ( event.type === 'contextrequest' ) {
             if ( !this.matchEvent( event ) ) return;

package/src/context-api/DOMContexts.js

@@ -8,6 +8,7 @@ import DOMContext from './DOMContext.js';
 import DuplicateContextError from './DuplicateContextError.js';
 import { _ } from '../util.js';
 
+const waitListMappings = new Map;
 export default class DOMContexts {
 
     /**
@@ -76,13 +77,35 @@ export default class DOMContexts {
                 if ( !args[ args.length - 1 ] ) { args[ args.length - 1 ] = emitter; }
                 else { args.push( emitter ); }
             }
+
             let options;
             if ( ( options = args.find( arg => typeof arg === 'object' && arg ) ) && options.live ) {
                 if ( options.signal ) options.signal.addEventListener( 'abort', () => responseInstance.abort() );
                 args[ args.indexOf( options ) ] = { ...options, signal: responseInstance.signal };
             }
             const event = new ( _DOMContextRequestEvent() )( ...args );
-            this[ '#' ].host.dispatchEvent( event );
+
+            const rootNode = this[ '#' ].host.getRootNode();
+            const temp = event => {
+                if ( event.answered ) return;
+                event.meta.target = event.target;
+                if ( !waitListMappings.get( rootNode ) ) { waitListMappings.set( rootNode, new Set ); }
+                if ( event.type === 'contextrequest' && event.live ) {
+                    waitListMappings.get( rootNode ).add( event );
+                } else if ( event.type === 'contextclaim' ) {
+                    const claims = new Set;
+                    waitListMappings.get( rootNode ).forEach( subscriptionEvent => {
+                        if ( !this[ '#' ].host.contains( subscriptionEvent.target ) || !event.detail.matchEvent( subscriptionEvent ) ) return;
+                        waitListMappings.get( rootNode ).delete( subscriptionEvent );
+                        claims.add( subscriptionEvent );
+                    } );
+                    return event.respondWith( claims );
+                }
+            };
+
+            rootNode.addEventListener( event.type, temp );
+            this[ '#' ].host.dispatchEvent( event );            
+            rootNode.removeEventListener( event.type, temp );
         } );
     }
 

package/src/context-api/_DOMContextRequestEvent.js

@@ -31,12 +31,17 @@ export default function() {
             Object.defineProperty( this, 'signal', { get: () => signal } );
             Object.defineProperty( this, 'diff', { get: () => diff } );
             Object.defineProperty( this, 'options', { get: () => otherOpts } );
+            Object.defineProperty( this, 'meta', { value: {} } );
         }
 
+        get target() { return super.target || this.meta.target; }
+        get answered() { return this.meta.answered || false; }
+
         /**
          * @respondWith
          */
         respondWith( response ) {
+            this.meta.answered = true;
             if ( this.diff ) {
                 if ( '_prevValue' in this && this._prevValue === response ) return;
                 Object.defineProperty( this, '_prevValue', { value: response, configurable: true } );

package/src/context-api/index.js

@@ -38,30 +38,13 @@ export default function init( $config = {} ) {
  */
 function exposeAPIs( config ) {
     const window = this;
-    // Assertions
-    if ( config.api.contexts in window.document ) { throw new Error( `document already has a "${ config.api.contexts }" property!` ); }
-    if ( config.api.contexts in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.api.contexts }" property!` ); }
-    // Definitions
-    Object.defineProperty( window.document, config.api.contexts, { get: function() {
-        return DOMContexts.instance( window.document );
-    } } );
-    Object.defineProperty( window.HTMLElement.prototype, config.api.contexts, { get: function() {
-        return DOMContexts.instance( this );
-    } } );
-    const waitlist = new Set;
-    window.addEventListener( 'contextrequest', event => {
-        if ( typeof event.respondWith !== 'function' ) return;
-        waitlist.add( event );
-        event.respondWith();
-    } );
-    window.addEventListener( 'contextclaim', event => {
-        if ( typeof event.detail !== 'object' || typeof event.detail.matchEvent !== 'function' || typeof event.respondWith !== 'function' ) return;
-        const claims = new Set;
-        waitlist.forEach( subscriptionEvent => {
-            if ( !event.target.contains( subscriptionEvent.target ) || !event.detail.matchEvent( subscriptionEvent ) ) return;
-            waitlist.delete( subscriptionEvent );
-            claims.add( subscriptionEvent );
-        } );
-        event.respondWith( claims );
+    [ window.Document.prototype, window.Element.prototype, window.ShadowRoot.prototype ].forEach( prototype => {
+        // No-conflict assertions
+        const type = prototype === window.Document.prototype ? 'Document' : ( prototype === window.ShadowRoot.prototype ? 'ShadowRoot' : 'Element' );
+        if ( config.api.contexts in prototype ) { throw new Error( `The ${ type } prototype already has a "${ config.api.contexts }" API!` ); }
+        // Definitions
+        Object.defineProperty( prototype, config.api.contexts, { get: function() {
+            return DOMContexts.instance( this );
+        } } );
     } );
 }

package/src/data-binding/index.js

@@ -37,14 +37,14 @@ export default function init( $config = {} ) {
 function realtime( config ) {
     const window = this, { webqit: { realdom } } = window;
 	// ----------------
-    realdom.realtime( window.document ).subtree( `(${ config.discreteBindingsSelector })`, record => {
+    realdom.realtime( window.document ).query( `(${ config.discreteBindingsSelector })`, record => {
         cleanup.call( this, ...record.exits );  
         mountDiscreteBindings.call( this, config, ...record.entrants );  
-    }, { live: true } );
-    realdom.realtime( window.document ).subtree( config.attrSelector, record => {
+    }, { live: true, subtree: 'cross-roots', timing: 'sync' } );
+    realdom.realtime( window.document ).query( config.attrSelector, record => {
         cleanup.call( this, ...record.exits );  
         mountInlineBindings.call( this, config, ...record.entrants );  
-    }, { live: true, timing: 'sync', staticSensitivity: true } );
+    }, { live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true } );
 }
 
 function createDynamicScope( config, root ) {

package/src/html-imports/HTMLImportsContext.js

@@ -39,8 +39,8 @@ export default class HTMLImportsContext extends DOMContext {
      */
     handle( event ) {
         const { window: { webqit: { Observer } } } = env;
-        // Any existing event._controller? Abort!
-        event._controller?.abort();
+        // Any existing event.meta.controller? Abort!
+        event.meta.controller?.abort();
 
         // Parse and translate detail
         if ( ( event.detail || '' ).trim() === '/' ) return event.respondWith( this.localModules );
@@ -48,11 +48,10 @@ export default class HTMLImportsContext extends DOMContext {
         if ( !path.length ) return event.respondWith();
         path = path.join( `/${ this.configs.HTML_IMPORTS.api.defs }/` )?.split( '/' ) || [];
 
-
         // We'll now fulfill request
         const options = { live: event.live, signal: event.signal, descripted: true };
         // Find a way to resolve request against two sources
-        event._controller = Observer.reduce( this.localModules, path, Observer.get, ( result, { signal } = {} ) => {
+        event.meta.controller = Observer.reduce( this.localModules, path, Observer.get, ( result, { signal } = {} ) => {
             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
@@ -71,7 +70,7 @@ export default class HTMLImportsContext extends DOMContext {
     /**
      * @unsubscribed()
      */
-    unsubscribed( event ) { event._controller?.abort(); }
+    unsubscribed( event ) { event.meta.controller?.abort(); }
 
     /**
      * @startRealtime()

package/src/html-imports/HTMLModule.js

@@ -135,6 +135,7 @@ export default class HTMLModule {
         // Ongoing request?
         if ( this.fetchInFlight?.src === src ) return this.fetchInFlight.request;
         this.fetchInFlight?.controller.abort();
+
         // The promise
         const controller = new AbortController();
         const fire = ( type, detail ) => this.host.dispatchEvent( new window.CustomEvent( type, { detail } ) );

package/src/html-imports/_HTMLImportElement.js

@@ -104,7 +104,7 @@ export default function() {
                         if ( !record.target.isConnected ) return;
                         restore();
                     }
-                }, { subtree: true, timing: 'sync', generation: 'exits' } );
+                }, { subtree: 'cross-roots', timing: 'sync', generation: 'exits' } );
                 priv.autoRestoreRealtime = autoRestoreRealtime;
             };
 

package/src/html-imports/index.js

@@ -61,29 +61,32 @@ export function getDefs( node, autoCreate = true ) {
  */
 function exposeAPIs( config ) {
     const window = this, { webqit: { oohtml: { configs } } } = window;
-    // Assertions
-    if ( config.api.defs in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.api.defs }" property!` ); }
-    if ( config.api.def in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.api.def }" property!` ); }
-    if ( config.api.import in window.document ) { throw new Error( `document already has a "${ config.api.import }" property!` ); }
-    if ( config.api.import in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.api.import }" property!` ); }
-    // Definitions
-    Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.defs, { get: function() {
-        return getDefs( this );
-    } } );
+    // The "def" & "defs" properties
+    if ( config.api.def in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" prototype already has a "${ config.api.def }" API!` ); }
+    if ( config.api.defs in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" prototype already has a "${ config.api.defs }" API!` ); }
+    // No-conflict assertions
     Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.def, { get: function() {
         return this.getAttribute( config.attr.def );
     } } );
+    Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.defs, { get: function() {
+        return getDefs( this );
+    } } );
+    // The "scoped" property
     Object.defineProperty( window.HTMLTemplateElement.prototype, 'scoped', {
         configurable: true,
         get() { return this.hasAttribute( 'scoped' ); },
         set( value ) { this.toggleAttribute( 'scoped', value ); },
     } );
-    Object.defineProperty( window.document, config.api.import, { value: function( ref, live = false, callback = null ) {
-        return importRequest( window.document, ...arguments );
-    } } );
-    Object.defineProperty( window.HTMLElement.prototype, config.api.import, { value: function( ref, live = false, callback = null ) {
-        return importRequest( this, ...arguments );
-    } } );
+    // The Import API
+    [ window.Document.prototype, window.Element.prototype, window.ShadowRoot.prototype ].forEach( prototype => {
+        // No-conflict assertions
+        const type = prototype === window.Document.prototype ? 'Document' : ( prototype === window.ShadowRoot.prototype ? 'ShadowRoot' : 'Element' );
+        if ( config.api.import in prototype ) { throw new Error( `The ${ type } prototype already has a "${ config.api.import }" API!` ); }
+        // Definitions
+        Object.defineProperty( prototype, config.api.import, { value: function( ref, live = false, callback = null ) {
+            return importRequest( this, ...arguments );
+        } });
+    } );
     function importRequest( context, ref, live = false, callback = null ) {
         let options = {};
         if ( typeof live === 'function' ) {
@@ -127,11 +130,11 @@ function realtime( config ) {
         }
     };
     // ------------
-    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( [ config.templateSelector, config.importsContextSelector ], record => {
+    realdom.realtime( window.document ).query( [ config.templateSelector, config.importsContextSelector ], record => {
         record.entrants.forEach( entry => {
             if ( entry.matches( config.templateSelector ) ) {
                 const htmlModule = HTMLModule.instance( entry );
-                htmlModule.ownerContext = entry.scoped ? record.target : window.document;
+                htmlModule.ownerContext = entry.scoped ? record.target : record.target.getRootNode();
                 const ownerContextModulesObj = getDefs( htmlModule.ownerContext );
                 if ( htmlModule.defId ) { Observer.set( ownerContextModulesObj, htmlModule.defId, entry ); }
                 // The ownerContext's defs - ownerContextModulesObj - has to be populated
@@ -152,15 +155,15 @@ function realtime( config ) {
                 detachImportsContext( entry );
             }
         } );
-    }, { live: true, timing: 'sync', staticSensitivity: true } );
+    }, { live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true } );
     
     // ------------
     // IMPORTS
     // ------------
-    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.elements.import, record => {
+    realdom.realtime( window.document ).query( config.elements.import, record => {
         record.entrants.forEach( node => handleRealtime( node, true, record ) );
         record.exits.forEach( node => handleRealtime( node, false, record ) );
-    }, { live: true, timing: 'sync' } );
+    }, { live: true, subtree: 'cross-roots', timing: 'sync' } );
     function handleRealtime( entry, connectedState ) {
         const elInstance = HTMLImportElement.instance( entry );
         if ( connectedState ) { elInstance[ '#' ].connectedCallback(); }
@@ -168,7 +171,7 @@ function realtime( config ) {
     }
     // Hydration
     if ( window.webqit.env === 'server' ) return;
-    realdom.realtime( window.document ).subtree( `(${ config.anchorNodeSelector })`, record => {
+    realdom.realtime( window.document ).query( `(${ config.anchorNodeSelector })`, record => {
         record.entrants.forEach( anchorNode => {
             if ( _( anchorNode ).get( 'isAnchorNode' ) ) return; // Doubling up on the early return above! Ignoring every just created anchorNode
             const reviver = window.document.createElement( 'div' );
@@ -183,5 +186,5 @@ function realtime( config ) {
             }
             HTMLImportElement.instance( importEl )[ '#' ].hydrate( anchorNode, slottedElements );
         } );
-    }, { live: true } );
+    }, { live: true, subtree: 'cross-roots', timing: 'sync' } );
 }

package/src/index.js

@@ -1,7 +1,7 @@
 /**
  * @imports
  */
-import * as QuantumJS from `@webqit/quantum-js`;
+import * as QuantumJS from '@webqit/quantum-js';
 import init from './init.js';
 
 /**

package/src/index.lite.js

@@ -2,7 +2,7 @@
 /**
  * @imports
  */
-import * as QuantumJS from `@webqit/quantum-js/lite`;
+import * as QuantumJS from '@webqit/quantum-js/lite';
 import init from './init.js';
 
 /**

package/src/namespaced-html/DOMNamingContext.js

@@ -32,8 +32,8 @@ export default class DOMNamingContext extends DOMContext {
      */
     handle( event ) {
         const { window: { webqit: { Observer } } } = env;
-        // Any existing event._controller? Abort!
-        event._controller?.abort();
+        // Any existing event.meta.controller? Abort!
+        event.meta.controller?.abort();
 
         // Parse and translate detail
         if ( !( event.detail || '' ).trim() ) return event.respondWith( Observer.unproxy( this.namespaceObj ) );
@@ -41,7 +41,7 @@ export default class DOMNamingContext extends DOMContext {
         if ( !path.length ) return event.respondWith();
         path = path.join( `/${ this.configs.NAMESPACED_HTML.api.namespace }/` )?.split( '/' ) || [];
 
-        event._controller = Observer.reduce( this.namespaceObj, path, Observer.get, descriptor => {
+        event.meta.controller = Observer.reduce( this.namespaceObj, path, Observer.get, descriptor => {
             if ( this.disposed ) return; // If already scheduled but aborted as in provider unmounting
             event.respondWith( descriptor.value );
         }, { live: event.live, signal: event.signal, descripted: true } );
@@ -50,5 +50,5 @@ export default class DOMNamingContext extends DOMContext {
     /**
      * @unsubscribed()
      */
-    unsubscribed( event ) { event._controller?.abort(); }
+    unsubscribed( event ) { event.meta.controller?.abort(); }
 }