@webqit/oohtml 4.1.6 → 4.1.9

package/package.json

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

package/src/data-binding/index.js

@@ -2,6 +2,7 @@
 /**
  * @imports
  */
+import { xpathQuery } from '@webqit/realdom/src/realtime/Util.js';
 import { _, _init, _splitOuter } from '../util.js';
 
 /**
@@ -38,12 +39,12 @@ function realtime( config ) {
     const window = this, { webqit: { realdom } } = window;
 	// ----------------
     realdom.realtime( window.document ).query( `(${ config.discreteBindingsSelector })`, record => {
-        cleanup.call( this, ...record.exits );  
-        mountDiscreteBindings.call( this, config, ...record.entrants );  
+        cleanup.call( this, ...record.exits );
+        mountDiscreteBindings.call( window, config, ...record.entrants );
     }, { 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 );  
+        cleanup.call( this, ...record.exits );
+        mountInlineBindings.call( window, config, ...record.entrants );
     }, { live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true } );
 }
 
@@ -97,21 +98,21 @@ function cleanup( ...entries ) {
     }
 }
 
+function patternMatch( config, str ) {
+    const tagStart = config.tokens.tagStart.split( '' ).map( x => `\\${ x }` ).join( '' );
+    const tagEnd = config.tokens.tagEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
+    const stateStart = config.tokens.stateStart.split( '' ).map( x => x === ' ' ? `(?:\\s+)?` : `\\${ x }` ).join( '' );
+    const stateEnd = config.tokens.stateEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
+    const pattern = `^${ tagStart }(.*?)(?:${ stateStart }(\\d+)${ stateEnd }(?:\\s+)?)?${ tagEnd }$`;
+    const [ /*raw*/, expr, span ] = str.match( new RegExp( pattern ) );
+    return { raw: str, expr, span: parseInt( span ?? 0 ) };
+}
+
 async function mountDiscreteBindings( config, ...entries ) {
     const window = this;
-    const patternMatch = str => {
-        const tagStart = config.tokens.tagStart.split( '' ).map( x => `\\${ x }` ).join( '' );
-        const tagEnd = config.tokens.tagEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
-        const stateStart = config.tokens.stateStart.split( '' ).map( x => x === ' ' ? `(?:\\s+)?` : `\\${ x }` ).join( '' );
-        const stateEnd = config.tokens.stateEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
-        const pattern = `^${ tagStart }(.*?)(?:${ stateStart }(\\d+)${ stateEnd }(?:\\s+)?)?${ tagEnd }$`;
-        const [ /*raw*/, expr, span ] = str.match( new RegExp( pattern ) );
-        return { raw: str, expr, span: parseInt( span ?? 0 ) };
-    };
-
     const instances = entries.reduce( ( instances, node ) => {
         if ( node.isBound ) return instances;
-        const template = patternMatch( node.nodeValue );
+        const template = patternMatch( config, node.nodeValue );
         let textNode = node;
         if ( template.span ) {
             textNode = node.nextSibling;
@@ -131,7 +132,7 @@ async function mountDiscreteBindings( config, ...entries ) {
     }, [] );
 
     for ( const { textNode, template, anchorNode } of instances ) {
-        const compiled = compileDiscreteBindings( config, template.expr );
+        const compiled = compileDiscreteBindings.call( window, config, template.expr );
         const { scope, bindings } = createDynamicScope.call( this, config, textNode.parentNode );
         Object.defineProperty( textNode, '$oohtml_internal_databinding_anchorNode', { value: anchorNode, configurable: true } );
         try {
@@ -156,7 +157,7 @@ function compileDiscreteBindings( config, str ) {
 
 async function mountInlineBindings( config, ...entries ) {
     for ( const node of entries ) {
-        const compiled = compileInlineBindings( config, node.getAttribute( config.attr.render ) );
+        const compiled = compileInlineBindings.call( this, config, node.getAttribute( config.attr.render ) );
         const { scope, bindings } = createDynamicScope.call( this, config, node );
         const signals = [];
         Object.defineProperty( node, '$oohtml_internal_databinding_signals', { value: signals, configurable: true } );
@@ -234,6 +235,13 @@ function compileInlineBindings( config, str ) {
                     $existing__.clear();
                 }`;
             }
+            // Treat other "@" directives as events
+            return `
+                const handler = () => ${ arg };
+                this.addEventListener( '${ param }', handler );
+                const abort = () => this.removeEventListener( '${ param }', handler );
+                this.$oohtml_internal_databinding_signals?.push( { abort } );
+            `;
         }
         if ( str.trim() ) throw new Error( `Invalid binding: ${ str }.` );
     } ).join( `\n` );
@@ -244,3 +252,14 @@ function compileInlineBindings( config, str ) {
 }
 
 const escDouble = str => str.replace(/"/g, '\\"');
+
+export function idleCompiler( node ) {
+    const window = this, { webqit: { oohtml: { configs: { DATA_BINDING: config } } } } = window;
+    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/HTMLModule.js

@@ -2,7 +2,6 @@
 /**
  * @imports
  */
-import { _isNumeric } from '@webqit/util/js/index.js';
 import { getDefs } from './index.js';
 import { _, env } from '../util.js';
 
@@ -22,6 +21,7 @@ export default class HTMLModule {
         const { window } = env, { webqit: { realdom, oohtml: { configs } } } = window;
         _( host ).get( `defsmanager::instance` )?.dispose();
         _( host ).set( `defsmanager::instance`, this );
+        this.window = window;
         this.host = host;
         this.config = configs.HTML_IMPORTS;
         this.parent = parent;
@@ -31,8 +31,8 @@ export default class HTMLModule {
         this.validateDefId( this.defId );
         // ----------
         this.realtimeA = realdom.realtime( this.host.content ).children( record => {
-            this.export( record.entrants, true );
-            this.export( record.exits, false );
+            this.expose( record.entrants, true );
+            this.expose( record.exits, false );
         }, { live: true, timing: 'sync' } );
         // ----------
         this.realtimeB = realdom.realtime( this.host ).attr( [ 'src', 'loading' ], ( ...args ) => this.evaluateLoading( ...args ), {
@@ -67,7 +67,7 @@ export default class HTMLModule {
      *
      * @returns Void
      */
-    export( entries, isConnected ) {
+    expose( entries, isConnected ) {
         const { window } = env, { webqit: { Observer } } = window;
         let dirty, allFragments = this.defs[ '#' ] || [];
         Observer.batch( this.defs, () => {
@@ -76,10 +76,16 @@ export default class HTMLModule {
                 const isTemplate = entry.matches( this.config.templateSelector );
                 const defId = ( entry.getAttribute( isTemplate ? this.config.attr.def : this.config.attr.fragmentdef ) || '' ).trim();
                 if ( isConnected ) {
-                    if ( isTemplate && defId ) { new HTMLModule( entry, this.host, this.level + 1 ); }
-                    else {
+                    if ( isTemplate && defId ) {
+                        new HTMLModule( entry, this.host, this.level + 1 );
+                    } else {
                         allFragments.push( entry );
                         dirty = true;
+                        if ( typeof requestIdleCallback === 'function' ) {
+                            requestIdleCallback( () => {
+                                this.config.idleCompilers?.forEach( callback => callback.call( this.window, entry ) );
+                            } );
+                        }
                     }
                     if ( defId ) {
                         this.validateDefId( defId );

package/src/html-imports/_HTMLImportElement.js

@@ -126,7 +126,7 @@ export default function() {
             priv.disconnectedCallback = () => {
                 priv.hydrationImportRequest?.abort();
                 priv.hydrationImportRequest = null;
-                if ( priv.anchorNode.isConnected ) return;
+                if ( priv.anchorNode?.isConnected ) return;
                 priv.moduleRefRealtime?.disconnect();
                 priv.moduleRefRealtime = null;
             };

package/src/init.js

@@ -3,12 +3,12 @@
  * @imports
  */
 import NamespacedHTML from './namespaced-html/index.js';
-import ScopedCSS from './scoped-css/index.js';
-import ScopedJS from './scoped-js/index.js';
-import ContextAPI from './context-api/index.js';
+import ScopedJS, { idleCompiler as idleCompiler1 } from './scoped-js/index.js';
+import DataBinding, { idleCompiler as idleCompiler2 } from './data-binding/index.js';
 import BindingsAPI from './bindings-api/index.js';
 import HTMLImports from './html-imports/index.js';
-import DataBinding from './data-binding/index.js';
+import ContextAPI from './context-api/index.js';
+import ScopedCSS from './scoped-css/index.js';
 
 /**
  * @init
@@ -20,7 +20,7 @@ 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
-    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) ); // Depends on ContextAPI
+    HTMLImports.call( this, { ...( configs.HTML_IMPORTS || {} ), idleCompilers: [ idleCompiler1, idleCompiler2 ] } ); // 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/scoped-js/index.js

@@ -91,30 +91,16 @@ async function execute( config, execHash ) {
  * @return Void
  */
 function realtime( config ) {
-    const window = this, { webqit: { oohtml, realdom, QuantumScript, AsyncQuantumScript, QuantumModule } } = window;
+    const window = this, { webqit: { oohtml, realdom } } = window;
     if ( !window.HTMLScriptElement.supports ) { window.HTMLScriptElement.supports = type => [ 'text/javascript', 'application/javascript' ].includes( type ); }
     const handled = new WeakSet;
     realdom.realtime( window.document ).query( config.scriptSelector, record => {
         record.entrants.forEach( script => {
             if ( handled.has( script ) ) return;
-            const textContent = ( script._ = script.textContent.trim() ) && script._.startsWith( '/*@oohtml*/if(false){' ) && script._.endsWith( '}/*@oohtml*/' ) ? script._.slice( 21, -12 ) : script.textContent;
-            if ( !script.scoped && !script.quantum && !textContent.includes( 'quantum' ) ) return;
-            handled.add( script );
             // Do compilation
-            const sourceHash = _toHash( textContent );
-            const compileCache = oohtml.Script.compileCache[ script.quantum ? 0 : 1 ];
-            let compiledScript;
-            if ( !( compiledScript = compileCache.get( sourceHash ) ) ) {
-                const { parserParams, compilerParams, runtimeParams } = config.advanced;
-                compiledScript = new ( script.type === 'module' ? QuantumModule : ( QuantumScript || AsyncQuantumScript ) )( textContent, {
-                    exportNamespace: `#${ script.id }`,
-                    fileName: `${ window.document.url?.split( '#' )?.[ 0 ] || '' }#${ script.id }`,
-                    parserParams: { ...parserParams, quantumMode: script.quantum },
-                    compilerParams,
-                    runtimeParams,
-                } );
-                compileCache.set( sourceHash, compiledScript );
-            }
+            const compiledScript = compileScript.call( window, config, script );
+            if ( !compiledScript ) return;
+            handled.add( script );
             // Run now!!!
             const thisContext = script.scoped ? script.parentNode || record.target : ( script.type === 'module' ? undefined : window );
             if ( script.scoped ) { thisContext[ config.api.scripts ].push( script ); }
@@ -126,4 +112,32 @@ function realtime( config ) {
         } );
     }, { live: true, subtree: 'cross-roots', timing: 'intercept', generation: 'entrants', eventDetails: true } );
     // ---
+}
+
+function compileScript( config, script ) {
+    const window = this, { webqit: { oohtml, QuantumScript, AsyncQuantumScript, QuantumModule } } = window;
+    const textContent = ( script._ = script.textContent.trim() ) && script._.startsWith( '/*@oohtml*/if(false){' ) && script._.endsWith( '}/*@oohtml*/' ) ? script._.slice( 21, -12 ) : script.textContent;
+    if ( !script.scoped && !script.quantum && !textContent.includes( 'quantum' ) ) return;
+    const sourceHash = _toHash( textContent );
+    const compileCache = oohtml.Script.compileCache[ script.quantum ? 0 : 1 ];
+    let compiledScript;
+    if ( !( compiledScript = compileCache.get( sourceHash ) ) ) {
+        const { parserParams, compilerParams, runtimeParams } = config.advanced;
+        compiledScript = new ( script.type === 'module' ? QuantumModule : ( QuantumScript || AsyncQuantumScript ) )( textContent, {
+            exportNamespace: `#${ script.id }`,
+            fileName: `${ window.document.url?.split( '#' )?.[ 0 ] || '' }#${ script.id }`,
+            parserParams: { ...parserParams, quantumMode: script.quantum },
+            compilerParams,
+            runtimeParams,
+        } );
+        compileCache.set( sourceHash, compiledScript );
+    }
+    return compiledScript;
+}
+
+export function idleCompiler( node ) {
+    const window = this, { webqit: { oohtml: { configs: { SCOPED_JS: config } } } } = window;
+    [ ...( node?.querySelectorAll( config.scriptSelector ) || [] ) ].forEach( script => {
+        compileScript.call( window, config, script );
+    } );
 }

package/test/index.js

@@ -27,8 +27,8 @@ export function createDocumentPrefixed( prefix, head = '', body = '', callback =
         <head>
         <meta name="$q-compiler-url" content="../quantum-js/dist/compiler.js">
         ${ prefix ? `<meta name="webqit" content="prefix=${ prefix };">` : `` }
-        <script ssr src="/dist/main.lite.js"></script>
         ${ head }
+        <script ssr src="/dist/main.lite.js"></script>
         </head>
         <body>${ body }</body>
     </html>`;

package/test/scoped-js.test.js

@@ -10,7 +10,8 @@ describe(`Test: Scoped JS`, function() {
     describe(`Scripts`, function() {
 
         it(`Should do basic observe`, async function() {
-            const head = '', body = `            
+            const head = ``;
+            const body = `            
             <h1>Hello World!</h1>
             <script scoped quantum>
                 testRecords.push( this );
@@ -19,7 +20,7 @@ describe(`Test: Scoped JS`, function() {
 
             const window = createDocument( head, body );
             window.testRecords = [];
-            await delay( 300 ); // Takes time to dynamically load Reflex compiler
+            await delay( 500 ); // Takes time to dynamically load Reflex compiler
 
             expect( window.testRecords ).to.have.length( 1 );
             expect( window.testRecords[ 0 ] ).to.eql( window.document.body );