@webqit/oohtml 3.1.13 → 3.2.0

package/src/scoped-css/index.js

@@ -2,24 +2,51 @@
 /**
  * @imports
  */
-import { _init } from '../util.js';
+import { rewriteSelector } from '../namespaced-html/index.js';
+import { _init, _toHash, _splitOuter } 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-css', $config, {
+        api: { styleSheets: 'styleSheets' },
         style: { retention: 'retain', mimeType: '', strategy: null },
     } );
-	config.styleSelector = ( Array.isArray( config.style.mimeType ) ? config.style.mimeType : [ config.style.mimeType ] ).reduce( ( selector, mm ) => {
+    config.styleSelector = (Array.isArray( config.style.mimeType ) ? config.style.mimeType : [ config.style.mimeType ] ).reduce( ( selector, mm ) => {
         const qualifier = mm ? `[type=${ window.CSS.escape( mm ) }]` : '';
         return selector.concat( `style${ qualifier }[scoped]` );
     }, [] ).join( ',' );
+    window.webqit.oohtml.Style = {
+        compileCache: new Map,
+    };
+    exposeAPIs.call( window, config );
     realtime.call( window, config );
 }
 
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function exposeAPIs( config ) {
+    const window = this, styleSheetsMap = new Map;
+    if ( config.api.styleSheets in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.styleSheets }" property!` ); }
+    Object.defineProperty( window.HTMLElement.prototype, config.api.styleSheets, { get: function() {
+        if ( !styleSheetsMap.has( this ) ) { styleSheetsMap.set( this, [] ); }
+        return styleSheetsMap.get( this );
+    }, } );
+    Object.defineProperty( window.HTMLStyleElement.prototype, 'scoped', {
+        configurable: true,
+        get() { return this.hasAttribute( 'scoped' ); },
+        set( value ) { this.toggleAttribute( 'scoped', value ); },
+    } );
+}
+
 /**
  * Performs realtime capture of elements and builds their relationships.
  *
@@ -28,22 +55,87 @@ export default function init( { advanced = {}, ...$config } ) {
  * @return Void
  */
 function realtime( config ) {
-	const window = this, { webqit: { realdom } } = window;
-    if ( !window.HTMLScriptElement.supports ) { window.HTMLScriptElement.supports = () => false; }
-    const handled = () => {};
-	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.styleSelector, record => {
+    const window = this, { webqit: { oohtml, realdom } } = window;
+    if ( !window.CSS.supports ) { window.CSS.supports = () => false; }
+    const handled = new WeakSet;
+    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.styleSelector, record => {
         record.entrants.forEach( style => {
-            if ( 'scoped' in style ) return handled( style );
-            if ( config.style.strategy === '@scope' ) {
-                Object.defineProperty( style, 'scoped', { value: style.hasAttribute( 'scoped' ) } );
-                if ( style.hasAttribute( 'ref' ) ) return; // Server-rendered
-                const uuid = `scoped${ uniqId() }`;
-                style.setAttribute( 'ref', uuid );
-                style.textContent = `@scope from (:has(> style[ref="${ uuid }"])) {\n${ style.textContent }\n}`;
+            if ( handled.has( style ) ) return;
+            handled.add( style );
+            if ( !style.scoped ) return;
+            // Do compilation
+            const sourceHash = _toHash( style.textContent );
+            let compiledSheet, supportsHAS = CSS.supports( 'selector(:has(a,b))' );
+            if ( !( compiledSheet = oohtml.Style.compileCache.get( sourceHash ) ) ) {
+                const scopeSelector = supportsHAS ? `:has(> style[rand-${ sourceHash }])` : `[rand-${ sourceHash }]`;
+                compiledSheet = createAdoptableStylesheet.call( window, style, scopeSelector );
+                //compiledSheet = style.sheet; upgradeSheet( style.sheet, /*!window.CSSScopeRule &&*/ scopeSelector );
+                oohtml.Style.compileCache.set( sourceHash, compiledSheet );
             }
+            // Run now!!!
+            style.parentNode[ config.api.styleSheets ].push( style );
+            Object.defineProperty( style, 'sheet', { value: compiledSheet, configurable: true } );
+            ( supportsHAS ? style : style.parentNode ).toggleAttribute( `rand-${ sourceHash }`, true );
+            style.textContent = '\n/*[ Shared style sheet ]*/\n';
         } );
-	}, { live: true, timing: 'intercept', generation: 'entrants' } );
+    }, { live: true, timing: 'intercept', generation: 'entrants' } );
     // ---
 }
 
-const uniqId = () => (0|Math.random()*9e6).toString(36);
+function createAdoptableStylesheet( style, scopeSelector ) {
+    const window = this, textContent = style.textContent, supportsScope = window.CSSScopeRule && false/* Disabled for buggy behaviour: rewriting selectorText within an @scope block invalidates the scoping */;
+    let styleSheet, cssText = supportsScope ? `@scope (${ scopeSelector }) {\n${ textContent.trim() }\n}` : textContent.trim();
+    try {
+        styleSheet = new window.CSSStyleSheet;
+        styleSheet.replaceSync( cssText );
+        upgradeSheet( styleSheet, !supportsScope && scopeSelector );
+        document.adoptedStyleSheets.push( styleSheet );
+    } catch( e ) {
+        const style = window.document.createElement( 'style' );
+        window.document.body.appendChild( style );
+        style.textContent = cssText;
+        styleSheet = style.sheet;
+        upgradeSheet( styleSheet, !supportsScope && scopeSelector );
+    }
+    return styleSheet;
+}
+
+function upgradeSheet( styleSheet, scopeSelector = null ) {
+    const l = styleSheet?.cssRules.length || -1;
+    for ( let i = 0; i < l; ++i ) {
+        const cssRule = styleSheet.cssRules[ i ];
+        if ( cssRule instanceof CSSImportRule ) {
+            // Handle imported stylesheets
+            //upgradeSheet( cssRule.styleSheet, scopeSelector );
+            continue;
+        }
+        upgradeRule( cssRule, scopeSelector );
+    }
+}
+
+function upgradeRule( cssRule, scopeSelector = null ) {
+    if ( cssRule instanceof CSSStyleRule ) {
+        // Resolve relative IDs and scoping (for non-@scope browsers)
+        upgradeSelector( cssRule, scopeSelector );
+        return;
+    }
+    if ( [ window.CSSScopeRule, window.CSSMediaRule, window.CSSContainerRule, window.CSSSupportsRule, window.CSSLayerBlockRule ].some( type => type && cssRule instanceof type ) ) {
+        // Parse @rule blocks
+        const l = cssRule.cssRules.length;
+        for ( let i = 0; i < l; ++i ) {
+            upgradeRule( cssRule.cssRules[ i ], scopeSelector );
+        }
+    }
+}
+
+function upgradeSelector( cssRule, scopeSelector = null ) {
+    const newSelectorText = rewriteSelector( cssRule.selectorText, scopeSelector, true );
+    cssRule.selectorText = newSelectorText;
+    // Parse nested blocks. (CSS nesting)
+    if ( cssRule.cssRules ) {
+        const l = cssRule.cssRules.length;
+        for ( let i = 0; i < l; ++i ) {
+            upgradeSelector( cssRule.cssRules[ i ], /* Nesting has nothing to do with scopeSelector */ );
+        }
+    }
+}

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;
-    }
-}