@webqit/oohtml 3.1.13 → 3.1.15

package/src/scoped-js/index.js

@@ -3,34 +3,63 @@
  * @imports
  */
 import { resolveParams } from '@webqit/quantum-js/params';
-import { _init } from '../util.js';
-import Hash from './Hash.js';
+import { _init, _toHash, _fromHash } from '../util.js';
 
 /**
  * @init
  * 
  * @param Object $config
  */
-export default function init( { advanced = {}, ...$config } ) {
+export default function init({ advanced = {}, ...$config }) {
     const { config, window } = _init.call( this, 'scoped-js', $config, {
         script: { retention: 'retain', mimeType: '' },
-        advanced: resolveParams( advanced ),
+        api: { scripts: 'scripts' },
+        advanced: resolveParams(advanced),
     } );
-	config.scriptSelector = ( Array.isArray( config.script.mimeType ) ? config.script.mimeType : [ config.script.mimeType ] ).reduce( ( selector, mm ) => {
-        const qualifier = mm ? `[type=${ window.CSS.escape( mm ) }]` : '';
+    config.scriptSelector = ( Array.isArray( config.script.mimeType ) ? config.script.mimeType : [ config.script.mimeType ] ).reduce( ( selector, mm ) => {
+        const qualifier = mm ? `[type=${ window.CSS.escape( mm ) } ]` : '';
         return selector.concat( `script${ qualifier }[scoped],script${ qualifier }[quantum]` );
     }, [] ).join( ',' );
     window.webqit.oohtml.Script = {
         compileCache: [ new Map, new Map, ],
         execute: execute.bind( window, config ),
     };
+    exposeAPIs.call( window, config );
     realtime.call( window, config );
 }
 
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+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.HTMLElement.prototype, config.api.scripts, { get: function() {
+        if ( !scriptsMap.has( this ) ) { scriptsMap.set( this, [] ); }
+        return scriptsMap.get( this );
+    }, } );
+    Object.defineProperties( window.HTMLScriptElement.prototype, {
+        scoped: {
+            configurable: true,
+            get() { return this.hasAttribute( 'scoped' ); },
+            set( value ) { this.toggleAttribute( 'scoped', value ); },
+        },
+        quantum: {
+            configurable: true,
+            get() { return this.hasAttribute( 'quantum' ); },
+            set( value ) { this.toggleAttribute( 'quantum', value ); },
+        },
+    } );
+}
+
 // Script runner
 async function execute( config, execHash ) {
     const window = this, { realdom } = window.webqit;
-    const exec = Hash.fromHash( execHash );
+    const exec = _fromHash( execHash );
     if ( !exec ) throw new Error( `Argument must be a valid exec hash.` );
     const { script, compiledScript, thisContext } = exec;
     // Honour retention flag
@@ -46,7 +75,7 @@ async function execute( config, execHash ) {
     if ( script.quantum ) { Object.defineProperty( script, 'state', { value: state } ); }
     realdom.realtime( window.document ).observe( script, () => {
         if ( script.quantum ) { state.dispose(); }
-        if ( script.scoped ) { thisContext.scripts.splice( thisContext.scripts.indexOf( script, 1 ) ); }
+        if ( script.scoped ) { thisContext[ config.api.scripts ].splice( thisContext[ config.api.scripts ].indexOf( script, 1 ) ); }
     }, { subtree: true, timing: 'sync', generation: 'exits' } );
 }
 
@@ -58,26 +87,23 @@ async function execute( config, execHash ) {
  * @return Void
  */
 function realtime( config ) {
-	const window = this, { webqit: { oohtml, realdom, QuantumScript, QuantumAsyncScript, QuantumModule } } = window;
+    const window = this, { webqit: { oohtml, realdom, QuantumScript, QuantumAsyncScript, QuantumModule } } = window;
     if ( !window.HTMLScriptElement.supports ) { window.HTMLScriptElement.supports = () => false; }
-    const potentialManualTypes = [ 'module' ].concat( config.script.mimeType || [] );
-	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.scriptSelector, record => {
+    const potentialManualTypes = [ 'module' ].concat( config.script.mimeType || [] ), handled = new WeakSet;
+    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.scriptSelector, record => {
         record.entrants.forEach( script => {
-            if ( script.cloned ) return;
-            if ( 'quantum' in script ) return handled( script );
-            Object.defineProperty( script, 'quantum', { value: script.hasAttribute( 'quantum' ) } ); 
-            if ( 'scoped' in script ) return handled( script );
-            Object.defineProperty( script, 'scoped', { value: script.hasAttribute( 'scoped' ) } ); 
+            if ( handled.has( script ) ) return;
+            handled.add( script );
             // Do compilation
             const textContent = ( script._ = script.textContent.trim() ) && script._.startsWith( '/*@oohtml*/if(false){' ) && script._.endsWith( '}/*@oohtml*/' ) ? script._.slice( 21, -12 ) : script.textContent;
-            const sourceHash = Hash.toHash( textContent );
+            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 || QuantumAsyncScript ) )( textContent, {
+                compiledScript = new ( script.type === 'module' ? QuantumModule : (QuantumScript || QuantumAsyncScript) )( textContent, {
                     exportNamespace: `#${ script.id }`,
-                    fileName:`${ window.document.url?.split( '#' )?.[ 0 ] || '' }#${ script.id }`,
+                    fileName: `${ window.document.url?.split( '#' )?.[ 0 ] || '' }#${ script.id }`,
                     parserParams,
                     compilerParams: { ...compilerParams, startStatic: !script.quantum },
                     runtimeParams,
@@ -86,16 +112,13 @@ function realtime( config ) {
             }
             // Run now!!!
             const thisContext = script.scoped ? script.parentNode || record.target : ( script.type === 'module' ? undefined : window );
-            if ( script.scoped ) {
-                if ( !thisContext.scripts ) { Object.defineProperty( thisContext, 'scripts', { value: [] } ); }
-                thisContext.scripts.push( script );
-            }
-            const execHash = Hash.toHash( { script, compiledScript, thisContext } );
+            if ( script.scoped ) { thisContext[ config.api.scripts ].push( script ); }
+            const execHash = _toHash( { script, compiledScript, thisContext } );
             const manualHandling = record.type === 'query' || ( potentialManualTypes.includes( script.type ) && !window.HTMLScriptElement.supports( script.type ) );
             if ( manualHandling ) { oohtml.Script.execute( execHash ); } else {
                 script.textContent = `webqit.oohtml.Script.execute( '${ execHash }' );`;
             }
         } );
-	}, { live: true, timing: 'intercept', generation: 'entrants', eventDetails: true } );
+    }, { live: true, timing: 'intercept', generation: 'entrants', eventDetails: true } );
     // ---
 }

package/src/util.js

@@ -53,4 +53,42 @@ export function _compare( a, b, depth = 1, objectSizing = false ) {
         return ( b = b.slice( 0 ).sort() ) && a.slice( 0 ).sort().every( ( valueA, i ) => valueA === b[ i ] );
     }
     return a === b;
+}
+
+export function _splitOuter( str, delim ) {
+    return [ ...str ].reduce( ( [ quote, depth, splits ], x ) => {
+        if ( !quote && depth === 0 && ( Array.isArray( delim ) ? delim : [ delim ] ).includes( x ) ) {
+            return [ quote, depth, [ '' ].concat( splits ) ];
+        }
+        if ( !quote && [ '(', '[', '{' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth++;
+        if ( !quote && [ ')', ']', '}' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth--;
+        if ( [ '"', "'", '`' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) {
+            quote = quote === x ? null : ( quote || x );
+        }
+        splits[ 0 ] += x;
+        return [ quote, depth, splits ]
+    }, [ null, 0, [ '' ] ] )[ 2 ].reverse();
+}
+
+// Unique ID generator
+export const _uniqId = () => ( 0 | Math.random() * 9e6 ).toString( 36 );
+
+// Hash of anything generator
+const hashTable = new Map;
+export function _toHash( val ) {
+    let hash;
+    if ( !( hash = hashTable.get( val ) ) ) {
+        hash = _uniqId();
+        hashTable.set( val, hash );
+    }
+    return hash;
+}
+
+// Value of any hash
+export function _fromHash( hash ) {
+    let val;
+    hashTable.forEach( ( _hash, _val ) => {
+        if ( _hash === hash ) val = _val;
+    } );
+    return val;
 }

package/test/scoped-css.test.js

@@ -10,7 +10,7 @@ describe(`Test: Scoped CSS`, function() {
     describe(`Styles`, function() {
 
         it(`Should do basic rewrite`, async function() {
-            const head = '<meta name="scoped-css" content="style.strategy=@scope">', body = `
+            const head = '', body = `
             <div>
               <h1>Hello World!</h1>
               <style scoped>
@@ -24,7 +24,7 @@ describe(`Test: Scoped CSS`, function() {
             await delay( 160 ); // Takes time to dynamically load Reflex compiler
             const styleElement = window.document.querySelector( 'style' );
 
-            expect( styleElement.textContent.substring( 0, 13 ) ).to.eq( '@scope from (' );
+            //expect( styleElement.textContent.substring( 0, 13 ) ).to.eq( '@scope (' );
         });
 
     });

package/src/scoped-js/Hash.js

@@ -1,26 +0,0 @@
-
-export default class Hash {
-
-    // Unique ID generator
-    static hashTable = new Map;
-    static uniqId = () => (0|Math.random()*9e6).toString(36);
-
-    // Hash of anything generator
-    static toHash( val ) {
-        let hash;
-        if ( !( hash = this.hashTable.get( val ) ) ) {
-            hash = this.uniqId();
-            this.hashTable.set( val, hash );
-        }
-        return hash;
-    }
-
-    // Value of any hash
-    static fromHash( hash ) {
-        let val;
-        this.hashTable.forEach( ( _hash, _val ) => {
-            if ( _hash === hash ) val = _val;
-        } );
-        return val;
-    }
-}