@webqit/oohtml 3.2.0 → 4.0.0

package/src/scoped-css/index.js

@@ -2,8 +2,8 @@
 /**
  * @imports
  */
-import { rewriteSelector } from '../namespaced-html/index.js';
-import { _init, _toHash, _splitOuter } from '../util.js';
+import { rewriteSelector, getOwnerNamespaceObject, getNamespaceUUID } from '../namespaced-html/index.js';
+import { _init, _toHash } from '../util.js';
 
 /**
  * @init
@@ -13,11 +13,11 @@ import { _init, _toHash, _splitOuter } from '../util.js';
 export default function init({ advanced = {}, ...$config }) {
     const { config, window } = _init.call( this, 'scoped-css', $config, {
         api: { styleSheets: 'styleSheets' },
-        style: { retention: 'retain', mimeType: '', strategy: null },
+        style: { retention: 'retain', mimeTypes: 'text/css', strategy: null },
     } );
-    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]` );
+    config.styleSelector = (Array.isArray( config.style.mimeTypes ) ? config.style.mimeTypes : config.style.mimeTypes.split( '|' ) ).concat( '' ).reduce( ( selector, mm ) => {
+        const qualifier = mm ? `[type="${ window.CSS.escape( mm ) }"]` : ':not([type])';
+        return selector.concat( `style${ qualifier }` );
     }, [] ).join( ',' );
     window.webqit.oohtml.Style = {
         compileCache: new Map,
@@ -62,80 +62,91 @@ function realtime( config ) {
         record.entrants.forEach( style => {
             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 );
+            const supportsHAS = CSS.supports( 'selector(:has(a,b))' );
+            const scopeSelector = style.scoped && ( supportsHAS ? `:has(> style[rand-${ sourceHash }])` : `[rand-${ sourceHash }]` );
+            const supportsScope = style.scoped && window.CSSScopeRule && false/* Disabled for buggy behaviour: rewriting selectorText within an @scope block invalidates the scoping */;
+            if ( style.scoped ) {
+                style.parentNode[ config.api.styleSheets ].push( style );
+                ( supportsHAS ? style : style.parentNode ).toggleAttribute( `rand-${ sourceHash }`, true );
+            }
+            if ( style.scoped && style.hasAttribute( 'shared' ) ) {
+                let compiledSheet;
+                if ( !( compiledSheet = oohtml.Style.compileCache.get( sourceHash ) ) ) {
+                    compiledSheet = createAdoptableStylesheet.call( window, style, null, supportsScope, scopeSelector );
+                    oohtml.Style.compileCache.set( sourceHash, compiledSheet );
+                }
+                // Run now!!!
+                Object.defineProperty( style, 'sheet', { value: compiledSheet, configurable: true } );
+                style.textContent = '\n/*[ Shared style sheet ]*/\n';
+            } else {
+                const transform = () => {
+                    const namespaceUUID = getNamespaceUUID( getOwnerNamespaceObject.call( window, style.scoped ? style : window.document ) );
+                    upgradeSheet.call( this, style.sheet, namespaceUUID, !supportsScope && scopeSelector );
+                };
+                if ( style.isConnected ) { transform(); }
+                else { setTimeout( () => { transform(); }, 0 ); }
             }
-            // 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' } );
     // ---
 }
 
-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();
+function createAdoptableStylesheet( style, namespaceUUID, supportsScope, scopeSelector ) {
+    const window = this, textContent = style.textContent;
+    let styleSheet, cssText = supportsScope && scopeSelector ? `@scope (${ scopeSelector }) {\n${ textContent.trim() }\n}` : textContent.trim();
     try {
         styleSheet = new window.CSSStyleSheet;
         styleSheet.replaceSync( cssText );
-        upgradeSheet( styleSheet, !supportsScope && scopeSelector );
+        upgradeSheet.call( this, styleSheet, namespaceUUID, !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 );
+        upgradeSheet.call( this, styleSheet, namespaceUUID, !supportsScope && scopeSelector );
     }
     return styleSheet;
 }
 
-function upgradeSheet( styleSheet, scopeSelector = null ) {
+function upgradeSheet( styleSheet, namespaceUUID, 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 );
+            //upgradeSheet( cssRule.styleSheet, namespaceUUID, scopeSelector );
             continue;
         }
-        upgradeRule( cssRule, scopeSelector );
+        upgradeRule.call( this, cssRule, namespaceUUID, scopeSelector );
     }
 }
 
-function upgradeRule( cssRule, scopeSelector = null ) {
+function upgradeRule( cssRule, namespaceUUID, scopeSelector = null ) {
     if ( cssRule instanceof CSSStyleRule ) {
         // Resolve relative IDs and scoping (for non-@scope browsers)
-        upgradeSelector( cssRule, scopeSelector );
+        upgradeSelector.call( this, cssRule, namespaceUUID, 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 );
+            upgradeRule.call( this, cssRule.cssRules[ i ], namespaceUUID, scopeSelector );
         }
     }
 }
 
-function upgradeSelector( cssRule, scopeSelector = null ) {
-    const newSelectorText = rewriteSelector( cssRule.selectorText, scopeSelector, true );
+function upgradeSelector( cssRule, namespaceUUID, scopeSelector = null ) {
+    const newSelectorText = rewriteSelector.call( this, cssRule.selectorText, namespaceUUID, scopeSelector, 1 );
     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 */ );
+            upgradeSelector.call( this, cssRule.cssRules[ i ], namespaceUUID, /* Nesting has nothing to do with scopeSelector */ );
         }
     }
 }

package/src/scoped-js/index.js

@@ -12,13 +12,13 @@ import { _init, _toHash, _fromHash } from '../util.js';
  */
 export default function init({ advanced = {}, ...$config }) {
     const { config, window } = _init.call( this, 'scoped-js', $config, {
-        script: { retention: 'retain', mimeType: '' },
+        script: { retention: 'retain', mimeTypes: 'module|text/javascript|application/javascript' },
         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 ) } ]` : '';
-        return selector.concat( `script${ qualifier }[scoped],script${ qualifier }[quantum]` );
+    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( ',' );
     window.webqit.oohtml.Script = {
         compileCache: [ new Map, new Map, ],
@@ -88,24 +88,25 @@ async function execute( config, execHash ) {
  */
 function realtime( config ) {
     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 || [] ), handled = new WeakSet;
+    if ( !window.HTMLScriptElement.supports ) { window.HTMLScriptElement.supports = type => [ 'text/javascript', 'application/javascript' ].includes( type ); }
+    const handled = new WeakSet;
     realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( 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 textContent = ( script._ = script.textContent.trim() ) && script._.startsWith( '/*@oohtml*/if(false){' ) && script._.endsWith( '}/*@oohtml*/' ) ? script._.slice( 21, -12 ) : script.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 }`,
-                    parserParams,
-                    compilerParams: { ...compilerParams, startStatic: !script.quantum },
+                    parserParams: { ...parserParams, quantumMode: script.quantum },
+                    compilerParams,
                     runtimeParams,
                 } );
                 compileCache.set( sourceHash, compiledScript );
@@ -114,7 +115,7 @@ 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' || ( potentialManualTypes.includes( script.type ) && !window.HTMLScriptElement.supports( script.type ) );
+            const manualHandling = record.type === 'query' || ( script.type && !window.HTMLScriptElement.supports( script.type ) );
             if ( manualHandling ) { oohtml.Script.execute( execHash ); } else {
                 script.textContent = `webqit.oohtml.Script.execute( '${ execHash }' );`;
             }

package/src/util.js

@@ -42,6 +42,17 @@ export function _init( name, $config, $defaults ) {
     return { config: window.webqit.oohtml.configs[ configKey ], realdom, window };
 }
 
+export function getInternalAttrInteraction( node, attrName ) {
+	return _internals( node, 'internalAttrInteractions' ).get( attrName );
+}
+export function internalAttrInteraction( node, attrName, callback ) {
+	const savedAttrLocking = _internals( node, 'internalAttrInteractions' ).get( attrName );
+	_internals( node, 'internalAttrInteractions' ).set( attrName, true );
+	const value = callback();
+	_internals( node, 'internalAttrInteractions' ).set( attrName, savedAttrLocking );
+	return value;
+}
+
 export function _compare( a, b, depth = 1, objectSizing = false ) {
     if ( depth && typeof a === 'object' && a && typeof b === 'object' && b && ( !objectSizing || Object.keys( a ).length === Object.keys( b ).length ) ) {
         for ( let key in a ) {