@webqit/oohtml 4.3.4 → 4.3.6

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "4.3.4",
+  "version": "4.3.6",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,7 +39,7 @@
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
-    "@webqit/quantum-js": "^4.5.11",
+    "@webqit/quantum-js": "^4.5.25",
     "@webqit/realdom": "^2.1.32",
     "@webqit/util": "^0.8.11"
   },

package/src/bindings-api/index.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import DOMBindingsContext from './DOMBindingsContext.js';
-import { _, _init } from '../util.js';
+import { _, _init, _splitOuter } from '../util.js';
 
 /**
  * @init
@@ -17,6 +17,7 @@ export default function init( $config = {} ) {
     } );
     window.webqit.DOMBindingsContext = DOMBindingsContext;
     exposeAPIs.call( window, config );
+    realtime.call(window, config);
 }
 
 /**
@@ -31,23 +32,27 @@ function getBindings( config, node ) {
 		const bindingsObj = Object.create( null );
 		_( node ).set( 'bindings', bindingsObj );
         Observer.observe( bindingsObj, mutations => {
-            // Reflection
-            const props = Object.keys( bindingsObj );
-            const reflectionTargetNode = node instanceof window.Document ? node.documentElement : node;
-            const bindingsReflection = config.attr.bindingsreflection;
-            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 ];
-            for ( const mutation of mutations ) {
-                if ( mutation.type === 'delete' ) {
-                    const ctx = contextsApi.find( DOMBindingsContext.kind, mutation.key );
-                    if ( ctx ) contextsApi.detach( ctx );
-                } else if ( !contextsApi.find( DOMBindingsContext.kind, mutation.key ) ) {
-                    contextsApi.attach( new DOMBindingsContext( mutation.key ) );
+            if ( node instanceof window.Element ) {
+                const bindingsParse = parseBindingsAttr( node.getAttribute( config.attr.bindingsreflection ) || '' );
+                const bindingsParseBefore = new Map(bindingsParse);
+                for ( const m of mutations ) {
+                    if ( m.detail?.publish !== false ) {
+                        if ( m.type === 'delete' ) bindingsParse.delete( m.key );
+                        else bindingsParse.set( m.key, undefined );
+                    }
+                }
+                if ( bindingsParse.size && bindingsParse.size !== bindingsParseBefore.size ) {
+                    node.setAttribute( config.attr.bindingsreflection, `{ ${ [ ...bindingsParse.entries() ].map(([ key, value ]) => value === undefined ? key : `${ key }: ${ value }` ).join( ', ' ) } }` );
+                } else if ( !bindingsParse.size ) node.toggleAttribute( config.attr.bindingsreflection, false );
+            } else {
+                const contextsApi = node[ ctxConfig.api.contexts ];
+                for ( const m of mutations ) {
+                    if ( m.type === 'delete' ) {
+                        const ctx = contextsApi.find( DOMBindingsContext.kind, m.key );
+                        if ( ctx ) contextsApi.detach( ctx );
+                    } else if ( !contextsApi.find( DOMBindingsContext.kind, m.key ) ) {
+                        contextsApi.attach( new DOMBindingsContext( m.key ) );
+                    }
                 }
             }
         } );
@@ -90,13 +95,71 @@ function exposeAPIs( config ) {
  *
  * @return Void
  */
-function applyBindings( config, target, bindings, { merge, diff, namespace } = {} ) {
+function applyBindings( config, target, bindings, { merge, diff, publish, namespace } = {} ) {
     const window = this, { webqit: { Observer } } = window;
     const bindingsObj = getBindings.call( this, config, target );
-    const $params = { diff, namespace };
+    const $params = { diff, namespace, detail: { publish } };
     const exitingKeys = merge ? [] : Observer.ownKeys( bindingsObj, $params ).filter( key => !( key in bindings ) );
     return Observer.batch( bindingsObj, () => {
         if ( exitingKeys.length ) { Observer.deleteProperties( bindingsObj, exitingKeys, $params ); }
         return Observer.set( bindingsObj, bindings, $params );
     }, $params );
 }
+
+/**
+ * Performs realtime capture of elements and their attributes
+ * and their module query results; then resolves the respective import elements.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function realtime(config) {
+    const window = this, { webqit: { realdom, Observer, oohtml: { configs } } } = window;
+    // ------------
+    const attachBindingsContext = (host, key) => {
+        const contextsApi = host[configs.CONTEXT_API.api.contexts];
+        if ( !contextsApi.find( DOMBindingsContext.kind, key ) ) {
+            contextsApi.attach( new DOMBindingsContext( key ) );
+        }
+    };
+    const detachBindingsContext = (host, key) => {
+        let ctx, contextsApi = host[configs.CONTEXT_API.api.contexts];
+        while( ctx = contextsApi.find( DOMBindingsContext.kind, key ) ) contextsApi.detach(ctx);
+    };
+    // ------------
+    realdom.realtime(window.document).query( `[${window.CSS.escape(config.attr.bindingsreflection)}]`, record => {
+        record.exits.forEach( entry => detachBindingsContext( entry ) );
+        record.entrants.forEach(entry => {
+            const bindingsParse = parseBindingsAttr( entry.getAttribute( config.attr.bindingsreflection ) || '' );
+            const newData = [ ...bindingsParse.entries() ].filter(([ k, v ]) => v !== undefined );
+            if ( newData.length ) entry[ config.api.bind ]( Object.fromEntries( newData ), { merge: true, publish: false } );
+            for ( const [ key ] of bindingsParse ) {
+                attachBindingsContext( entry, key );
+            }
+        } );
+    }, { id: 'bindings:dom', live: true, subtree: 'cross-roots', timing: 'sync', eventDetails: true });
+	realdom.realtime( window.document, 'attr' ).observe( config.attr.bindingsreflection, record => {
+        const bindingsObj = getBindings.call( window, config, record.target );
+        const bindingsParse = parseBindingsAttr( record.value || '' );
+        const oldBindings = parseBindingsAttr( record.oldValue || '' );
+        for ( const key of new Set([ ...bindingsParse.keys(), ...oldBindings.keys() ]) ) {
+            if ( !oldBindings.has( key ) ) {
+                if ( bindingsParse.get( key ) !== undefined ) Observer.set( bindingsObj, key, bindingsParse.get( key ), { detail: { publish: false } } );
+                attachBindingsContext( record.target, key );
+            } else if ( !bindingsParse.has( key ) ) {
+                if ( oldBindings.get( key ) !== undefined ) Observer.deleteProperty( bindingsObj, key, { detail: { publish: false } } );
+                detachBindingsContext( record.target, key );
+            } else if ( bindingsParse.get( key ) !== oldBindings.get( key ) ) {
+                Observer.set( bindingsObj, key, bindingsParse.get( key ), { detail: { publish: false } } );
+            }
+        }
+	}, { id: 'bindings:attr', subtree: 'cross-roots', timing: 'sync', newValue: true, oldValue: true } );
+}
+
+const parseBindingsAttr = str => {
+    str = str.trim();
+    return new Map(_splitOuter( str.slice(1, -1), ',' ).filter( s => s.trim() ).map( _str => {
+        return _splitOuter( _str, ':' ).map( s => s.trim() );
+    }));
+};

package/src/context-api/DOMContext.js

@@ -120,6 +120,7 @@ export default class DOMContext {
             this.subscriptions.delete( subscriptionEvent );
             this.unsubscribed( subscriptionEvent );
             const { target } = subscriptionEvent;
+            subscriptionEvent.meta.answered = false;
             target.dispatchEvent( subscriptionEvent );
         } );
         return this;

package/src/context-api/DOMContexts.js

@@ -44,7 +44,7 @@ export default class DOMContexts {
     find( ...args ) {
         return [ ...this[ '#' ].contexts ].find( ctx => {
             if ( typeof args[ 0 ] === 'function' ) return args[ 0 ]( ctx );
-            return ctx.constructor.kind === args[ 0 ] && ( args.length === 1 || ctx.detail === args[ 1 ] );
+            return ctx.constructor.kind === args[ 0 ] && ( !args[ 1 ] || ctx.detail === args[ 1 ] );
         } );
     }
 
@@ -84,32 +84,7 @@ export default class DOMContexts {
                 args[ args.indexOf( options ) ] = { ...options, signal: responseInstance.signal };
             }
             const event = new ( _DOMContextRequestEvent() )( ...args );
-            // Initally
-            event.meta.target = this[ '#' ].host;
-
-            const rootNode = this[ '#' ].host.getRootNode();
-            const temp = event => {
-                event.stopImmediatePropagation();
-                // Always set thus whether answered or not
-                event.meta.target = event.target;
-                if ( event.answered ) return;
-                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 );
+            this[ '#' ].host.dispatchEvent( event );
         } );
     }
 

package/src/context-api/index.js

@@ -21,6 +21,37 @@ export default function init( $config = {} ) {
         attr: { contextname: 'contextname', },
         api: { contexts: 'contexts', },
     } );
+    const waitListMappings = new Map, dispatchEvent = window.EventTarget.prototype.dispatchEvent;
+    Object.defineProperty( window.EventTarget.prototype, 'dispatchEvent', { value: function( ...args ) {
+        const event = args[0], rootNode = this.getRootNode?.();
+        if ( [ 'contextclaim', 'contextrequest' ].includes( event.type ) && rootNode ) {
+            if ( event.meta ) event.meta.target = this;
+            const temp = event => {
+                event.stopImmediatePropagation();
+                // Always set this whether answered or not
+                if ( event.meta ) event.meta.target = event.target;
+                if ( event.answered ) return;
+                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 ( !event.target.contains( subscriptionEvent.target ) || !event.detail?.matchEvent?.( subscriptionEvent ) ) return;
+                        waitListMappings.get( rootNode ).delete( subscriptionEvent );
+                        claims.add( subscriptionEvent );
+                    } );
+                    if ( !waitListMappings.get( rootNode ).size ) waitListMappings.delete( rootNode );
+                    return event.respondWith?.( claims );
+                }
+            };
+            rootNode.addEventListener( event.type, temp );
+            const returnValue = dispatchEvent.call( this, ...args );
+            rootNode.removeEventListener( event.type, temp );
+            return returnValue;
+        }
+        return dispatchEvent.call( this, ...args );
+    } } );
     window.webqit.DOMContexts = DOMContexts;
     window.webqit.DOMContext = DOMContext;
     window.webqit.DOMContextRequestEvent = _DOMContextRequestEvent();

package/src/data-binding/index.js

@@ -219,7 +219,7 @@ function compileInlineBindings( config, str ) {
 
                 if ( $import__.value && $iteratee__ ) {
                     let $existing__ = new Map;
-                    this.querySelectorAll( '[${ config.attr.itemIndex }]' ).forEach( x => {
+                    [ ...this.children ].filter( el => el.matches( '[${ config.attr.itemIndex }]' ) ).forEach( x => {
                         $existing__.set( x.getAttribute( '${ config.attr.itemIndex }' ), x );
                     } );
                     ${ indices ? `let ${ indices } = -1;` : '' }