@webqit/oohtml 4.3.0 → 4.3.2

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "4.3.0",
+  "version": "4.3.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@webqit/quantum-js": "^4.5.11",
-    "@webqit/realdom": "^2.1.30",
+    "@webqit/realdom": "^2.1.31",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {

package/src/data-binding/index.js

@@ -38,14 +38,20 @@ export default function init( $config = {} ) {
 function realtime( config ) {
     const window = this, { webqit: { realdom } } = window;
 	// ----------------
-    realdom.realtime( window.document ).query( `(${ config.discreteBindingsSelector })`, record => {
-        cleanup.call( this, ...record.exits );
-        mountDiscreteBindings.call( window, config, ...record.entrants );
-    }, { live: true, subtree: 'cross-roots', timing: 'sync' } );
+    /**
+     * For an element, render should happen first
+    <div render="">
+        <?{ content }?>
+    </div>
+     */
     realdom.realtime( window.document ).query( config.attrSelector, record => {
         cleanup.call( this, ...record.exits );
         mountInlineBindings.call( window, config, ...record.entrants );
-    }, { live: true, subtree: 'cross-roots', timing: 'sync', eventDetails: true, staticSensitivity: true } );
+    }, { id: 'data-binding:attr', live: true, subtree: 'cross-roots', timing: 'sync', eventDetails: true, staticSensitivity: true } );
+    realdom.realtime( window.document ).query( `(${ config.discreteBindingsSelector })`, record => {
+        cleanup.call( this, ...record.exits );
+        mountDiscreteBindings.call( window, config, ...record.entrants );
+    }, { id: 'data-binding:descrete', live: true, subtree: 'cross-roots', timing: 'sync' } );
 }
 
 function createDynamicScope( config, root ) {
@@ -54,16 +60,17 @@ function createDynamicScope( config, root ) {
     const scope = Object.create( null ), abortController = new AbortController;
     scope[ '$exec__' ] = ( target, prop, ...args ) => {
         const exec = () => {
-            try { target[ prop ]( ...args ); } catch( e ) { console.error( `Error executing "${ prop }": ${ e.message } at ${ e.cause }` ); }
+            try { target[ prop ]( ...args ); }
+            catch( e ) { console.error( `Error executing "${ prop }": ${ e.message } at ${ e.cause }` ); }
         };
-        realdom.schedule( 'write', exec );
+        exec();
     };
     scope[ '$assign__' ] = ( target, prop, val ) => {
         const exec = () => {
             try { target[ prop ] = val; }
             catch( e ) { console.error( `${ e.message } at ${ e.cause }` ); }
         };
-        realdom.schedule( 'write', exec );
+        exec();
     };
     Observer.intercept( scope, {
         get: ( e, recieved, next ) => {
@@ -172,6 +179,7 @@ const inlineParseCache = new Map;
 function compileInlineBindings( config, str ) {
     if ( inlineParseCache.has( str ) ) return inlineParseCache.get( str );
     const validation = {};
+    let $event_i = -1;
     const source = _splitOuter( str, ';' ).map( str => {
         const [ left, right ] = _splitOuter( str, ':' ).map( x => x.trim() );
         const directive = left[ 0 ], param = left.slice( 1 ).trim();
@@ -241,11 +249,12 @@ function compileInlineBindings( config, str ) {
         }
         // Events
         if ( directive === '@' ) {
+            $event_i++;
             return `
-                const handler = event => ${ right.startsWith('{') ? right : arg };
-                this.addEventListener( '${ param }', handler );
-                const abort = () => this.removeEventListener( '${ param }', handler );
-                this.$oohtml_internal_databinding_signals?.push( { abort } );
+                const handler${ $event_i } = event => ${ right.startsWith('{') ? right : arg };
+                this.addEventListener( '${ param }', handler${ $event_i } );
+                const abort${ $event_i } = () => this.removeEventListener( '${ param }', handler${ $event_i } );
+                this.$oohtml_internal_databinding_signals?.push( { abort: abort${ $event_i } } );
             `;
         }
         // Functions
@@ -264,11 +273,12 @@ const escDouble = str => str.replace(/"/g, '\\"');
 
 export function idleCompiler( node ) {
     const window = this, { webqit: { oohtml: { configs: { DATA_BINDING: config } } } } = window;
+    // Attr selector must also come first, as in above
+    ( node?.matches( config.attrSelector ) ? [ node ] : [] ).concat([ ...( node?.querySelectorAll( config.attrSelector ) || [] ) ]).forEach( node => {
+        compileInlineBindings.call( window, config, node.getAttribute( config.attr.render ) );
+    } );
     xpathQuery( window, node, `(${ config.discreteBindingsSelector })` ).forEach( node => {
         const template = patternMatch( config, node.nodeValue );
         compileDiscreteBindings.call( window, config, template.expr );
     } );
-    ( node?.matches( config.attrSelector ) ? [ node ] : [] ).concat([ ...( node?.querySelectorAll( config.attrSelector ) || [] ) ]).forEach( node => {
-        compileInlineBindings.call( window, config, node.getAttribute( config.attr.render ) );
-    } );
 }

package/src/html-imports/_HTMLImportElement.js

@@ -63,6 +63,7 @@ export default function() {
                     } );
                 }, { live: true, timing: 'sync', lifecycleSignals: true } );
                 priv.autoDestroyRealtime = realdom.realtime( window.document ).track( parentNode, () => {
+                    this.state = null;
                     priv.die();
                 }, { subtree: 'cross-roots', timing: 'sync', generation: 'exits' } );
             };
@@ -97,9 +98,8 @@ export default function() {
                 const restore = () => {
                     if (this.el.isConnected) return;
                     this.el.setAttribute( 'data-nodecount', 0 );
-                    this.el.slottingAction = true;
+                    this.state = 'restored';
                     priv.anchorNode.replaceWith( this.el );
-                    this.el.slottingAction = false;
                     priv.setAnchorNode( null );
                 };
                 if ( !priv.slottedElements.size ) return restore();
@@ -119,12 +119,12 @@ export default function() {
             };
 
             priv.connectedCallback = () => {
-                if ( this.el.slottingAction ) return;
+                if ( this.state === 'restored' ) return;
                 priv.live( fragments => this.fill( fragments ) );
             };
 
             priv.disconnectedCallback = () => {
-                if ( this.el.slottingAction ) return;
+                if ( this.state === 'resolved' ) return;
                 priv.die();
             };
         }
@@ -175,9 +175,8 @@ export default function() {
                 // not the import element itslef - but all only when we have slottableElements.size
                 if ( slottableElements.size && this.el.isConnected ) {
                     const newAnchorNode = this[ '#' ].setAnchorNode( this.createAnchorNode() );
-                    this.el.slottingAction = true;
+                    this.state = 'resolved';
                     this.el.replaceWith( newAnchorNode );
-                    this.el.slottingAction = false;
                 }
                 // Insert slottables now
                 slottableElements.forEach( slottableElement => {

package/src/html-imports/index.js

@@ -154,6 +154,7 @@ function realtime(config) {
         record.exits.forEach(entry => {
             if (entry.matches(config.templateSelector)) {
                 const htmlModule = HTMLModule.instance(entry);
+                //if (!htmlModule.ownerContext) return; // JSDOM sometimes
                 const ownerContextModulesObj = getDefs(htmlModule.ownerContext);
                 if (htmlModule.defId && htmlModule.ownerContext.isConnected) { Observer.deleteProperty(ownerContextModulesObj, htmlModule.defId); }
                 detachImportsContext(htmlModule.ownerContext);
@@ -161,7 +162,7 @@ function realtime(config) {
                 detachImportsContext(entry);
             }
         });
-    }, { live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true, eventDetails: true });
+    }, { id: 'imports:template/importscontext', live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true, recursiveOk: true, eventDetails: true });
 
     // ------------
     // IMPORTS
@@ -169,7 +170,7 @@ function realtime(config) {
     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, subtree: 'cross-roots', timing: 'sync' });
+    }, { id: 'imports:import', live: true, subtree: 'cross-roots', timing: 'sync', recursiveOk: true });
     function handleRealtime(entry, connectedState) {
         const elInstance = HTMLImportElement.instance(entry);
         if (connectedState) { elInstance['#'].connectedCallback(); }
@@ -192,5 +193,5 @@ function realtime(config) {
             }
             HTMLImportElement.instance(importEl)['#'].hydrate(anchorNode, slottedElements);
         });
-    }, { live: true, subtree: 'cross-roots', timing: 'sync' });
+    }, { id: 'imports:hydration', live: true, subtree: 'cross-roots', timing: 'sync', recursiveOk: true });
 }

package/src/init.js

@@ -19,10 +19,10 @@ export default function init( QuantumJS, configs = {} ) {
     // --------------
     ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
     BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) ); // Depends on ContextAPI
-    NamespacedHTML.call( this, ( configs.NAMESPACED_HTML || {} ) ); // Depends on ContextAPI
+    // Imports must happen before the rest... structure must be flattened before the other things below which query the DOM
     HTMLImports.call( this, { ...( configs.HTML_IMPORTS || {} ), idleCompilers: [ idleCompiler1, idleCompiler2 ] } ); // Depends on ContextAPI
+    NamespacedHTML.call( this, ( configs.NAMESPACED_HTML || {} ) ); // Depends on ContextAPI
     DataBinding.call( this, ( configs.DATA_BINDING || {} ) ); // Depends on ContextAPI, BindingsAPI, HTMLImports
     ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) ); // Depends on NamespacedHTML
     ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
-    // --------------
 }

package/src/namespaced-html/index.js

@@ -38,7 +38,7 @@ function lidUtil( config ) {
 		lidrefPrefix( escapeMode = 0 ) { return escapeMode ? this.escape( lidrefPrefix, escapeMode ) : lidrefPrefix; },
 		lidrefSeparator( escapeMode = 0 ) { return escapeMode ? this.escape( lidrefSeparator, escapeMode ) : lidrefSeparator; },
 		isUuid( str, escapeMode = 0 ) { return str.startsWith( this.lidrefPrefix( escapeMode ) ) && str.includes( this.lidrefSeparator( escapeMode ) ); },
-		isLidref( str, escapeMode = 0 ) { return str.startsWith( this.lidrefPrefix( escapeMode ) ) && !str.includes( this.lidrefSeparator( escapeMode ) ); },
+		//isLidref( str, escapeMode = 0 ) { return str.startsWith( this.lidrefPrefix( escapeMode ) ) && !str.includes( this.lidrefSeparator( escapeMode ) ); },
 		toUuid( hash, lid, escapeMode = 0 ) { return hash.endsWith( '-root' ) ? lid : `${ this.lidrefPrefix( escapeMode ) }${ hash }${ this.lidrefSeparator( escapeMode ) }${ lid }`; },
 		uuidToId( str, escapeMode = 0 ) { return this.isUuid( str ) ? str.split( this.lidrefSeparator( escapeMode ) )[ 1 ] : str; },
 		uuidToLidref( str, escapeMode = 0 ) { return this.isUuid( str ) ? `${ this.lidrefPrefix( escapeMode ) }${ str.split( this.lidrefSeparator( escapeMode ) )[ 1 ] }` : str; },
@@ -278,7 +278,7 @@ function realtime( config ) {
 				}
 			} else {
 				_( entry, 'attrOriginals' ).set( attrName, value ); // Save original before rewrite
-				const newAttrValue = value.split( ' ' ).map( idref => ( idref = idref.trim() ) && !$lidUtil.isLidref( idref ) ? idref : $lidUtil.toUuid( namespaceUUID, idref.replace( $lidUtil.lidrefPrefix(), '' ) ) ).join( ' ' );
+				const newAttrValue = value.split( ' ' ).map( idref => ( idref = idref.trim() ) && $lidUtil.isUuid( idref ) ? idref : $lidUtil.toUuid( namespaceUUID, idref ) ).join( ' ' );
 				entry.setAttribute( attrName, newAttrValue );
 				_( namespaceObj ).set( 'idrefs', _( namespaceObj ).get( 'idrefs' ) || new Set );
 				_( namespaceObj ).get( 'idrefs' ).add( entry );
@@ -296,7 +296,7 @@ function realtime( config ) {
 				}
 			} else {
 				const newAttrValue = _( entry, 'attrOriginals' ).get( attrName );// oldValue.split( ' ' ).map( lid => ( lid = lid.trim() ) && $lidUtil.uuidToLidref( lid ) ).join( ' ' );
-				entry.setAttribute( attrName, newAttrValue );
+				if ( entry.hasAttribute( attrName ) ) entry.setAttribute( attrName, newAttrValue );
 				_( namespaceObj ).get( 'idrefs' )?.delete( entry );
 			}
 		} );
@@ -338,9 +338,10 @@ function realtime( config ) {
 			const contextsApi = entry[ configs.CONTEXT_API.api.contexts ];
 			if ( !contextsApi.find( DOMNamingContext.kind ) ) { contextsApi.attach( new DOMNamingContext ); }
         } );
-    }, { live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true, eventDetails: true } );
+    }, { id: 'namespace-html:namespace', live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true, eventDetails: true } );
 
 	// DOM realtime
+	// ISSUE implied elements that are direct chidren of shadow roots not caught. Maybe try testing with params.recursiveOk to see.
 	realdom.realtime( window.document ).query( `[${ attrList.map( attrName => window.CSS.escape( attrName ) ).join( '],[' ) }]`, record => {
 		// We do some caching to prevent redundanct lookups
 		const namespaceNodesToTest = { forID: new Map, forOther: new Map, };
@@ -365,14 +366,14 @@ function realtime( config ) {
 		}
 		namespaceNodesToTest.forID.clear();
 		namespaceNodesToTest.forOther.clear();
-	}, { live: true, subtree: 'cross-roots', timing: 'sync' } );
+	}, { id: 'namespace-html:attrs', live: true, subtree: 'cross-roots', timing: 'sync' } );
 	// Attr realtime
 	realdom.realtime( window.document, 'attr' ).observe( attrList, records => {
 		for ( const record of records ) {
 			if ( record.oldValue ) { cleanupBinding( record.target, record.name, record.oldValue/* Current resolved value as-is */ ); }
 			if ( record.value ) { setupBinding( record.target, record.name, record.value/* Raw value (as-is) that will be saved as original */ ); }
 		}
-	}, { subtree: 'cross-roots', timing: 'sync', newValue: true, oldValue: true } );
+	}, { id: 'namespace-html:attr(attrs)', subtree: 'cross-roots', timing: 'sync', newValue: true, oldValue: true } );
 
     // ------------
 	// TARGETS

package/src/scoped-css/index.js

@@ -100,7 +100,7 @@ function realtime( config ) {
                 else { setTimeout( () => { transform(); }, 0 ); }
             }
         } );
-    }, { live: true, subtree: 'cross-roots', timing: 'intercept', generation: 'entrants' } );
+    }, { id: 'scoped-css', live: true, subtree: 'cross-roots', timing: 'intercept', generation: 'entrants' } );
     // ---
 }
 

package/src/scoped-js/index.js

@@ -16,10 +16,8 @@ export default function init({ advanced = {}, ...$config }) {
         api: { scripts: 'scripts' },
         advanced: resolveParams(advanced),
     } );
-    config.scriptSelector = ( Array.isArray( config.script.mimeTypes ) ? config.script.mimeTypes : config.script.mimeTypes.split( '|' ) ).concat( '' ).reduce( ( selector, mm ) => {
-        const qualifier = mm ? `[type="${ window.CSS.escape( mm ) }"]` : ':not([type])';
-        return selector.concat( `script${ qualifier }` );
-    }, [] ).join( ',' );
+    const customTypes = Array.isArray( config.script.mimeTypes ) ? config.script.mimeTypes : config.script.mimeTypes.split( '|' ).filter( t => t );
+    config.scriptSelector =  customTypes.map( t => `script[type="${ window.CSS.escape( t ) }"]`).concat(`script:not([type])`).join( ',' );
     window.webqit.oohtml.Script = {
         compileCache: [ new Map, new Map, ],
         execute: execute.bind( window, config ),
@@ -38,10 +36,12 @@ export default function init({ advanced = {}, ...$config }) {
 function exposeAPIs( config ) {
     const window = this, scriptsMap = new Map;
     if ( config.api.scripts in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.scripts }" property!` ); }
-    Object.defineProperty( window.Element.prototype, config.api.scripts, { get: function() {
-        if ( !scriptsMap.has( this ) ) { scriptsMap.set( this, [] ); }
-        return scriptsMap.get( this );
-    }, } );
+    [ window.ShadowRoot.prototype, window.Element.prototype ].forEach( proto => {
+        Object.defineProperty( proto, config.api.scripts, { get: function() {
+            if ( !scriptsMap.has( this ) ) { scriptsMap.set( this, [] ); }
+            return scriptsMap.get( this );
+        }, } );
+    } );
     Object.defineProperties( window.HTMLScriptElement.prototype, {
         scoped: {
             configurable: true,
@@ -80,7 +80,7 @@ async function execute( config, execHash ) {
     realdom.realtime( window.document ).observe( script, () => {
         if ( script.quantum ) { state.dispose(); }
         if ( thisContext instanceof window.Element ) { thisContext[ config.api.scripts ]?.splice( thisContext[ config.api.scripts ].indexOf( script, 1 ) ); }
-    }, { subtree: 'cross-roots', timing: 'sync', generation: 'exits' } );
+    }, { id: 'scoped-js:script-exits', subtree: 'cross-roots', timing: 'sync', generation: 'exits' } );
 }
 
 /**
@@ -105,12 +105,12 @@ function realtime( config ) {
             const thisContext = script.scoped ? script.parentNode || record.target : ( script.type === 'module' ? undefined : window );
             if ( script.scoped ) { thisContext[ config.api.scripts ].push( script ); }
             const execHash = _toHash( { script, compiledScript, thisContext } );
-            const manualHandling = record.type === 'query' || ( script.type && !window.HTMLScriptElement.supports( script.type ) );
+            const manualHandling = record.type === 'query' || ( script.type && !window.HTMLScriptElement.supports( script.type ) ) || script.getAttribute('data-handling') === 'manual';
             if ( manualHandling || config.script.timing === 'manual' ) { oohtml.Script.execute( execHash ); } else {
                 script.textContent = `webqit.oohtml.Script.execute( '${ execHash }' );`;
             }
         } );
-    }, { live: true, subtree: 'cross-roots', timing: 'intercept', generation: 'entrants', eventDetails: true } );
+    }, { id: 'scoped-js:script-entries', live: true, subtree: 'cross-roots', timing: 'intercept', generation: 'entrants', eventDetails: true } );
     // ---
 }