@webqit/oohtml 3.1.7 → 3.1.9

package/src/bindings-api/index.js

@@ -12,7 +12,7 @@ import { _, _init } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'bindings-api', $config, {
-        context: { attr: { bindingsreflection: 'bindings' }, },
+        attr: { bindingsreflection: 'bindings' },
         api: { bind: 'bind', bindings: 'bindings', },
     } );
     window.webqit.DOMBindingsContext = DOMBindingsContext;
@@ -34,11 +34,11 @@ function getBindings( config, node ) {
             // Reflection
             const props = Object.keys( bindingsObj );
             const targetNode = node === window.document ? window.document.documentElement : node;
-            const bindingsReflection = config.context.attr.bindingsreflection;
+            const bindingsReflection = config.attr.bindingsreflection;
             if ( props.length && bindingsReflection ) {
-                targetNode.setAttribute( config.context.attr.bindingsreflection, props.join( ' ') );
+                targetNode.setAttribute( config.attr.bindingsreflection, props.join( ' ') );
             } else if ( bindingsReflection ) {
-                targetNode.toggleAttribute( config.context.attr.bindingsreflection, false );
+                targetNode.toggleAttribute( config.attr.bindingsreflection, false );
             }
             // Re: DOMBindingsContext
             const contextsApi = node[ ctxConfig.api.contexts ];

package/src/context-api/DOMContext.js

@@ -101,7 +101,7 @@ export default class DOMContext {
         host.addEventListener( 'contextrequest', this );
         host.addEventListener( 'contextclaim', this );
         const { value: claims } = DOMContexts.instance( host ).request( 'contextclaim', { kind: this.constructor.kind, detail: this } );
-        claims.forEach( subscriptionEvent => {
+        claims?.forEach( subscriptionEvent => {
             this.subscriptions.add( subscriptionEvent );
             this.subscribed( subscriptionEvent );
             this.handle( subscriptionEvent );

package/src/data-binding/index.js

@@ -12,11 +12,9 @@ import { _, _init } from '../util.js';
  * @return Void
  */
 export default function init( $config = {} ) {
-    const { config, window } = _init.call( this, 'html-bindings', $config, {
+    const { config, window } = _init.call( this, 'data-binding', $config, {
         attr: { expr: 'expr', itemIndex: 'data-key' },
         tokens: { nodeType: 'processing-instruction', tagStart: '?{', tagEnd: '}?', stateStart: '; [=', stateEnd: ']' },
-        staticsensitivity: true,
-        isomorphic: true,
     } );
     ( { CONTEXT_API: config.CONTEXT_API, BINDINGS_API: config.BINDINGS_API, HTML_IMPORTS: config.HTML_IMPORTS } = window.webqit.oohtml.configs );
     config.attrSelector = `[${ window.CSS.escape( config.attr.expr ) }]`;
@@ -46,13 +44,19 @@ function realtime( config ) {
     realdom.realtime( window.document ).subtree( config.attrSelector, record => {
         cleanup.call( this, ...record.exits );  
         mountInlineBindings.call( this, config, ...record.entrants );  
-    }, { live: true, timing: 'sync', staticSensitivity: config.staticsensitivity } );
+    }, { live: true, timing: 'sync', staticSensitivity: true } );
 }
 
 function createDynamicScope( config, root ) {
-    const { webqit: { Observer, DOMBindingsContext } } = this;
+    const { webqit: { realdom, Observer, DOMBindingsContext } } = this;
     if ( _( root ).has( 'data-binding' ) ) return _( root ).get( 'data-binding' );
     const scope = Object.create( null ), abortController = new AbortController;
+    scope[ '$exec__' ] = ( target, prop, ...args ) => {
+        realdom.schedule( 'write', () => target[ prop ]( ...args ) );
+    };
+    scope[ '$assign__' ] = ( target, prop, val ) => {
+        realdom.schedule( 'write', () => (target[ prop ] = val) );
+    };
     Observer.intercept( scope, {
         get: ( e, recieved, next ) => {
             if ( !( e.key in scope ) ) {
@@ -130,10 +134,10 @@ const discreteParseCache = new Map;
 function compileDiscreteBindings( config, str ) {
     if ( discreteParseCache.has( str ) ) return discreteParseCache.get( str );
     let source = `let content = ((${ str }) ?? '') + '';`;
-    source += `this.nodeValue = content;`;
-    source += `if ( this.$oohtml_internal_databinding_anchorNode ) { this.$oohtml_internal_databinding_anchorNode.nodeValue = "${ config.tokens.tagStart }${ escDouble( str ) }${ config.tokens.stateStart }" + content.length + "${ config.tokens.stateEnd } ${ config.tokens.tagEnd }"; }`;
-    const { webqit: { QuantumAsyncScript } } = this;
-    const compiled = new QuantumAsyncScript( source );
+    source += `$assign__(this, 'nodeValue', content);`;
+    source += `if ( this.$oohtml_internal_databinding_anchorNode ) { $assign__(this.$oohtml_internal_databinding_anchorNode, 'nodeValue', "${ config.tokens.tagStart }${ escDouble( str ) }${ config.tokens.stateStart }" + content.length + "${ config.tokens.stateEnd } ${ config.tokens.tagEnd }"); }`;
+    const { webqit: { QuantumModule } } = this;
+    const compiled = new QuantumModule( source );
     discreteParseCache.set( str, compiled );
     return compiled;
 }
@@ -157,19 +161,19 @@ function compileInlineBindings( config, str ) {
         const directive = left[ 0 ], param = left.slice( 1 ).trim();
         const arg = `(${ right })`, $arg = `(${ arg } ?? '')`;
         if ( directive === '&' ) {
-            if ( param.startsWith( '--' ) ) return `this.style.setProperty("${ escDouble( param ) }", ${ $arg });`;
-            return `this.style["${ escDouble( param ) }"] = ${ $arg };`;
+            if ( param.startsWith( '--' ) ) return `$exec__(this.style, 'setProperty', "${ escDouble( param ) }", ${ $arg });`;
+            return `$assign__(this.style, "${ escDouble( param ) }", ${ $arg });`;
         }
-        if ( directive === '%' ) return `this.classList.toggle("${ escDouble( param ) }", !!${ arg });`;
+        if ( directive === '%' ) return `$exec__(this.classList, 'toggle', "${ escDouble( param ) }", !!${ arg });`;
         if ( directive === '~' ) {
-            if ( param.startsWith( '?' ) ) return `this.toggleAttribute("${ escDouble( param.substring( 1 ).trim() ) }", !!${ arg });`;
-            return `this.setAttribute("${ escDouble( param ) }", ${ $arg });`;
+            if ( param.startsWith( '?' ) ) return `$exec__(this, 'toggleAttribute', "${ escDouble( param.substring( 1 ).trim() ) }", !!${ arg });`;
+            return `$exec__(this, 'setAttribute', "${ escDouble( param ) }", ${ $arg });`;
         }
         if ( directive === '@' ) {
             if ( validation[ param ] ) throw new Error( `Duplicate binding: ${ left }.` );
             validation[ param ] = true;
-            if ( param === 'text' ) return `this.textContent = ${ $arg };`;
-            if ( param === 'html' ) return `this.setHTML(${ $arg });`;
+            if ( param === 'text' ) return `$assign__(this, 'textContent', ${ $arg });`;
+            if ( param === 'html' ) return `$exec__(this, 'setHTML', ${ $arg });`;
             if ( param === 'items' ) {
                 const [ iterationSpec, importSpec ] = splitOuter( right, '/' );
                 if ( !importSpec ) throw new Error( `Invalid ${ directive }items spec: ${ str }; no import specifier.` );
@@ -182,7 +186,7 @@ function compileInlineBindings( config, str ) {
                 const indices = kind === 'in' ? production[ 2 ] : ( production[ 1 ] || '$index__' );
                 return `
                 let $iteratee__ = ${ iteratee };
-                let $import__ = this.${ config.HTML_IMPORTS.context.api.import }( ${ importSpec.trim() }, true );
+                let $import__ = this.${ config.HTML_IMPORTS.api.import }( ${ importSpec.trim() }, true );
                 this.$oohtml_internal_databinding_signals?.push( $import__ );
 
                 if ( $import__.value && $iteratee__ ) {
@@ -200,13 +204,14 @@ function compileInlineBindings( config, str ) {
                         let $itemNode__ = $existing__.get( $key___ );
                         if ( $itemNode__ ) {
                             $existing__.delete( $key___ );
+                            $exec__($itemNode__, '${ config.BINDINGS_API.api.bind }', $itemBinding__ );
                         } else {
                             $itemNode__ = ( Array.isArray( $import__.value ) ? $import__.value[ 0 ] : ( $import__.value instanceof window.HTMLTemplateElement ? $import__.value.content.firstElementChild : $import__.value ) ).cloneNode( true );
                             $itemNode__.setAttribute( "${ config.attr.itemIndex }", $key___ );
-                            this.appendChild( $itemNode__ );
+                            $exec__($itemNode__, '${ config.BINDINGS_API.api.bind }', $itemBinding__ );
+                            $exec__(this, 'appendChild', $itemNode__ );
                         }
 
-                        $itemNode__.${ config.BINDINGS_API.api.bind }( $itemBinding__ );
                         if ( ${ kind === 'in' ? `!( ${ production[ 0 ] } in $iteratee__ )` : `typeof ${ production[ 0 ] } === 'undefined'` } ) { $itemNode__.remove(); }
                     }
                     $existing__.forEach( x => x.remove() );
@@ -216,8 +221,8 @@ function compileInlineBindings( config, str ) {
         }
         if ( str.trim() ) throw new Error( `Invalid binding: ${ str }.` );
     } ).join( `\n` );
-    const { webqit: { QuantumAsyncScript } } = this;
-    const compiled = new QuantumAsyncScript( source );
+    const { webqit: { QuantumModule } } = this;
+    const compiled = new QuantumModule( source );
     inlineParseCache.set( str, compiled );
     return compiled;
 }

package/src/html-imports/HTMLImportsContext.js

@@ -46,7 +46,7 @@ export default class HTMLImportsContext extends DOMContext {
         if ( ( event.detail || '' ).trim() === '/' ) return event.respondWith( this.localModules );
         const $config = this.configs.HTML_IMPORTS;
         let path = ( event.detail || '' ).split( /\/|(?<=\w)(?=#)/g ).map( x => x.trim() ).filter( x => x );
-        if ( path.length ) { path = path.join( `/${ $config.template.api.exports }/` )?.split( '/' ) || []; }
+        if ( path.length ) { path = path.join( `/${ $config.api.defs }/` )?.split( '/' ) || []; }
         // No detail?
         if ( !path.length ) return event.respondWith();
 
@@ -89,11 +89,11 @@ export default class HTMLImportsContext extends DOMContext {
         };
         // ----------------
         const $config = this.configs.HTML_IMPORTS;
-        if ( !this.host.matches || !$config.context.attr.importscontext ) return;
+        if ( !this.host.matches || !$config.attr.importscontext ) return;
         // Any existing this.refdSourceController? Abort!
         this.refdSourceController?.disconnect();
         const realdom = this.host.ownerDocument.defaultView.webqit.realdom;
-        this.refdSourceController = realdom.realtime( this.host ).attr( $config.context.attr.importscontext, ( record, { signal } ) => {
+        this.refdSourceController = realdom.realtime( this.host ).attr( $config.attr.importscontext, ( record, { signal } ) => {
             // No importscontext attr set. But we're still watching
             if ( !record.value ) {
                 this.contextModules = undefined;

package/src/html-imports/HTMLModule.js

@@ -12,7 +12,7 @@ export default class HTMLModule {
      * @instance
      */
     static instance( host ) {
-        return _( host ).get( 'exportsmanager::instance' ) || new this( host );
+        return _( host ).get( 'defsmanager::instance' ) || new this( host );
     }
 
     /**
@@ -20,14 +20,14 @@ export default class HTMLModule {
      */
     constructor( host, parent = null, level = 0 ) {
         const { window } = env, { webqit: { realdom, oohtml: { configs } } } = window;
-        _( host ).get( `exportsmanager::instance` )?.dispose();
-        _( host ).set( `exportsmanager::instance`, this );
+        _( host ).get( `defsmanager::instance` )?.dispose();
+        _( host ).set( `defsmanager::instance`, this );
         this.host = host;
         this.config = configs.HTML_IMPORTS;
         this.parent = parent;
         this.level = level;
-        this.exports = getExports( this.host );
-        this.defId = ( this.host.getAttribute( this.config.template?.attr.moduledef ) || '' ).trim();
+        this.defs = getExports( this.host );
+        this.defId = ( this.host.getAttribute( this.config.attr.def ) || '' ).trim();
         this.validateDefId( this.defId );
         // ----------
         this.realtimeA = realdom.realtime( this.host.content ).children( record => {
@@ -60,7 +60,7 @@ export default class HTMLModule {
     }
 
     /**
-     * Maps module contents as exports.
+     * Maps module contents as defs.
      * 
      * @param Array     entries
      * @param Bool      isConnected
@@ -69,12 +69,12 @@ export default class HTMLModule {
      */
     export( entries, isConnected ) {
         const { window } = env, { webqit: { Observer } } = window;
-        let dirty, allFragments = this.exports[ '#' ] || [];
-        Observer.batch( this.exports, () => {
+        let dirty, allFragments = this.defs[ '#' ] || [];
+        Observer.batch( this.defs, () => {
             entries.forEach( entry => {
                 if ( entry.nodeType !== 1 ) return;
                 const isTemplate = entry.matches( this.config.templateSelector );
-                const defId = ( entry.getAttribute( isTemplate ? this.config.template.attr.moduledef : this.config.template.attr.fragmentdef ) || '' ).trim();
+                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 {
@@ -83,7 +83,7 @@ export default class HTMLModule {
                     }
                     if ( defId ) {
                         this.validateDefId( defId );
-                        Observer.set( this.exports, ( !isTemplate && '#' || '' ) + defId, entry );
+                        Observer.set( this.defs, ( !isTemplate && '#' || '' ) + defId, entry );
                     }
                 } else {
                     if ( isTemplate && defId ) { HTMLModule.instance( entry ).dispose(); }
@@ -91,10 +91,10 @@ export default class HTMLModule {
                         allFragments = allFragments.filter( x => x !== entry );
                         dirty = true;
                     }
-                    if ( defId ) Observer.deleteProperty( this.exports, ( !isTemplate && '#' || '' ) + defId );
+                    if ( defId ) Observer.deleteProperty( this.defs, ( !isTemplate && '#' || '' ) + defId );
                 }
             } );
-            if ( dirty ) Observer.set( this.exports, '#', allFragments );
+            if ( dirty ) Observer.set( this.defs, '#', allFragments );
         } );
     }
 
@@ -114,7 +114,7 @@ export default class HTMLModule {
             $loadingPromise = promise.then( () => interception.remove() ); // Set
         };
         const loading = ( record2.value || '' ).trim();
-        const interception = Observer.intercept( this.exports, 'get', async ( descriptor, recieved, next ) => {
+        const interception = Observer.intercept( this.defs, 'get', async ( descriptor, recieved, next ) => {
             if ( loading === 'lazy' ) { loadingPromise( this.load( src, true ) ); }
             await loadingPromise();
             return next();
@@ -162,22 +162,22 @@ export default class HTMLModule {
     evalInheritance( ) {
         if ( !this.parent ) return [];
         const { window: { webqit: { Observer } } } = env;
-        let extendedId = ( this.host.getAttribute( this.config.template.attr.extends ) || '' ).trim();
-        let inheritedIds = ( this.host.getAttribute( this.config.template.attr.inherits ) || '' ).trim();
+        let extendedId = ( this.host.getAttribute( this.config.attr.extends ) || '' ).trim();
+        let inheritedIds = ( this.host.getAttribute( this.config.attr.inherits ) || '' ).trim();
         const handleInherited = records => {
             records.forEach( record => {
-                if ( Observer.get( this.exports, record.key ) !== record.oldValue ) return;
+                if ( Observer.get( this.defs, record.key ) !== record.oldValue ) return;
                 if ( [ 'get'/*initial get*/, 'set', 'def' ].includes( record.type ) ) {
-                    Observer[ record.type.replace( 'get', 'set' ) ]( this.exports, record.key, record.value );
+                    Observer[ record.type.replace( 'get', 'set' ) ]( this.defs, record.key, record.value );
                 } else if ( record.type === 'delete' ) {
-                    Observer.deleteProperty( this.exports, record.key );
+                    Observer.deleteProperty( this.defs, record.key );
                 }
             } );
         };
         const realtimes = [];
         const parentExportsObj = getExports( this.parent );
         if ( extendedId ) {
-            realtimes.push( Observer.reduce( parentExportsObj, [ extendedId, this.config.template.api.exports, Infinity ], Observer.get, handleInherited, { live: true } ) );
+            realtimes.push( Observer.reduce( parentExportsObj, [ extendedId, this.config.api.defs, Infinity ], Observer.get, handleInherited, { live: true } ) );
         }
         if ( ( inheritedIds = inheritedIds.split( ' ' ).map( id => id.trim() ).filter( x => x ) ).length ) {
             realtimes.push( Observer.get( parentExportsObj, inheritedIds, handleInherited, { live: true } ) );
@@ -194,7 +194,7 @@ export default class HTMLModule {
         this.realtimeA.disconnect();
         this.realtimeB.disconnect();
         this.realtimeC.forEach( r => ( r instanceof Promise ? r.then( r => r.abort() ) : r.abort() ) );
-        Object.entries( this.exports ).forEach( ( [ key, entry ] ) => {
+        Object.entries( this.defs ).forEach( ( [ key, entry ] ) => {
             if ( key.startsWith( '#' ) ) return;
             HTMLModule.instance( entry ).dispose();
         } );

package/src/html-imports/_HTMLImportElement.js

@@ -13,9 +13,9 @@ import { _, env } from '../util.js';
  * @return HTMLImportElement
  */
 export default function() {
-    const { window } = env, { webqit } = window, { Observer, realdom, oohtml: { configs } } = webqit;
+    const { window } = env, { webqit } = window, { realdom, oohtml: { configs } } = webqit;
     if ( webqit.HTMLImportElement ) return webqit.HTMLImportElement;
-    const BaseElement = configs.HTML_IMPORTS.import.tagName.includes( '-' ) ? window.HTMLElement : class {};
+    const BaseElement = configs.HTML_IMPORTS.elements.import.includes( '-' ) ? window.HTMLElement : class {};
     class HTMLImportElement extends BaseElement {
         
         /**
@@ -26,7 +26,7 @@ export default function() {
          * @returns 
          */
         static instance( node ) {
-            if ( configs.HTML_IMPORTS.import.tagName.includes( '-' ) && ( node instanceof this ) )  return node;
+            if ( configs.HTML_IMPORTS.elements.import.includes( '-' ) && ( node instanceof this ) )  return node;
             return _( node ).get( 'import::instance' ) || new this( node );
         }
 
@@ -60,7 +60,7 @@ export default function() {
 
             priv.hydrate = ( anchorNode, slottedElements ) => {
                 // ----------------
-                priv.moduleRef = ( this.el.getAttribute( configs.HTML_IMPORTS.import.attr.moduleref ) || '' ).trim();
+                priv.moduleRef = ( this.el.getAttribute( configs.HTML_IMPORTS.attr.ref ) || '' ).trim();
                 anchorNode.replaceWith( priv.setAnchorNode( this.createAnchorNode() ) );
                 priv.autoRestore( () => {
                     slottedElements.forEach( slottedElement => {
@@ -72,10 +72,10 @@ export default function() {
                 priv.hydrationImportRequest = new AbortController;
                 priv.importRequest( fragments => {
                     if ( priv.originalsRemapped ) { return this.fill( fragments ); }
-                    const identifiersMap = fragments.map( ( fragment, i ) => ( { el: fragment, fragmentDef: fragment.getAttribute( configs.HTML_IMPORTS.template.attr.fragmentdef ) || '', tagName: fragment.tagName, i } ) );
+                    const identifiersMap = fragments.map( ( fragment, i ) => ( { el: fragment, fragmentDef: fragment.getAttribute( configs.HTML_IMPORTS.attr.fragmentdef ) || '', tagName: fragment.tagName, i } ) );
                     let i = -1;
                     slottedElements.forEach( slottedElement => {
-                        const tagName = slottedElement.tagName, fragmentDef = slottedElement.getAttribute( configs.HTML_IMPORTS.template.attr.fragmentdef ) || '';
+                        const tagName = slottedElement.tagName, fragmentDef = slottedElement.getAttribute( configs.HTML_IMPORTS.attr.fragmentdef ) || '';
                         const originalsMatch = ( i ++, identifiersMap.find( fragmentIdentifiers => fragmentIdentifiers.tagName === tagName && fragmentIdentifiers.fragmentDef === fragmentDef && fragmentIdentifiers.i === i ) );
                         if ( !originalsMatch ) return; // Or should we throw integrity error?
                         _( slottedElement ).set( 'original@imports', originalsMatch.el );
@@ -113,7 +113,7 @@ export default function() {
                 if ( priv.slottedElements.size ) throw new Error( `Illegal reinsertion into the DOM; import slot is not empty!` );
                 // Totally initialize this instance?
                 if ( priv.moduleRefRealtime ) return;
-                priv.moduleRefRealtime = realdom.realtime( this.el ).attr( configs.HTML_IMPORTS.import.attr.moduleref, ( record, { signal } ) => {
+                priv.moduleRefRealtime = realdom.realtime( this.el ).attr( configs.HTML_IMPORTS.attr.ref, ( record, { signal } ) => {
                     priv.moduleRef = record.value;
                     // Below, we ignore first restore from hydration
                     priv.importRequest( fragments => !priv.hydrationImportRequest && this.fill( fragments ), signal );
@@ -182,8 +182,8 @@ export default function() {
                     // Clone each slottable element and give it a reference to its original
                     const slottableElementClone = slottableElement.cloneNode( true );
                     // The folllowing references must be set before adding to DODM
-                    if ( !slottableElementClone.hasAttribute( configs.HTML_IMPORTS.template.attr.fragmentdef ) ) {
-                        slottableElementClone.toggleAttribute( configs.HTML_IMPORTS.template.attr.fragmentdef, true );
+                    if ( !slottableElementClone.hasAttribute( configs.HTML_IMPORTS.attr.fragmentdef ) ) {
+                        slottableElementClone.toggleAttribute( configs.HTML_IMPORTS.attr.fragmentdef, true );
                     }
                     _( slottableElementClone ).set( 'original@imports', slottableElement );
                     _( slottableElementClone ).set( 'slot@imports', this.el );
@@ -221,7 +221,7 @@ export default function() {
          */
         get slottedElements() { return this[ '#' ].slottedElements; }
     }
-    if ( configs.HTML_IMPORTS.import.tagName.includes( '-' ) ) { customElements.define( configs.HTML_IMPORTS.import.tagName, HTMLImportElement ); }
+    if ( configs.HTML_IMPORTS.elements.import.includes( '-' ) ) { customElements.define( configs.HTML_IMPORTS.elements.import, HTMLImportElement ); }
     webqit.HTMLImportElement = HTMLImportElement;
     return HTMLImportElement;
 }

package/src/html-imports/index.js

@@ -15,22 +15,21 @@ import { _, _init } from '../util.js';
  * @return Void
  */
 export default function init( $config = {} ) {
-    const { config, realdom, window } = _init.call( this, 'html-imports', $config, {
-        template: { attr: { moduledef: 'def', fragmentdef: 'def', extends: 'extends', inherits: 'inherits' }, api: { exports: 'exports', moduledef: 'def' }, },
-        context: { attr: { importscontext: 'importscontext', }, api: { import: 'import' }, },
-        import: { tagName: 'import', attr: { moduleref: 'ref' }, },
-        staticsensitivity: true,
-        isomorphic: true,
+    const { config, window } = _init.call( this, 'html-imports', $config, {
+        elements: { import: 'import', },
+        attr: { def: 'def', extends: 'extends', inherits: 'inherits', ref: 'ref', importscontext: 'importscontext', },
+        api: { def: 'def', defs: 'defs', import: 'import' },
     } );
-    config.templateSelector = `template[${ window.CSS.escape( config.template.attr.moduledef ) }]`;
-    config.importsContextSelector = `[${ window.CSS.escape( config.context.attr.importscontext ) }]`;
-    config.slottedElementsSelector = `[${ window.CSS.escape( config.template.attr.fragmentdef ) }]:not(template)`;
+    if ( !config.attr.fragmentdef ) { config.attr.fragmentdef = config.attr.def; }
+    config.templateSelector = `template[${ window.CSS.escape( config.attr.def ) }]`;
+    config.importsContextSelector = `[${ window.CSS.escape( config.attr.importscontext ) }]`;
+    config.slottedElementsSelector = `[${ window.CSS.escape( config.attr.fragmentdef ) }]:not(template)`;
     const anchorNodeMatch = ( start, end ) => {
         const starting = `starts-with(., "${ start }")`;
         const ending = `substring(., string-length(.) - string-length("${ end }") + 1) = "${ end }"`;
         return `${ starting } and ${ ending }`;
     }
-    config.anchorNodeSelector = `comment()[${ anchorNodeMatch( `<${ config.import.tagName }`, `</${ config.import.tagName }>` ) }]`;
+    config.anchorNodeSelector = `comment()[${ anchorNodeMatch( `<${ config.elements.import }`, `</${ config.elements.import }>` ) }]`;
     window.webqit.HTMLImportsContext = HTMLImportsContext;
     window.webqit.HTMLImportElement = _HTMLImportElement();
     exposeAPIs.call( window, config );
@@ -38,7 +37,7 @@ export default function init( $config = {} ) {
 }
 
 /**
- * Returns the "exports" object associated with the given node.
+ * Returns the "defs" object associated with the given node.
  *
  * @param Element       node
  * @param Bool          autoCreate
@@ -46,11 +45,11 @@ export default function init( $config = {} ) {
  * @return Object
  */
 export function getExports( node, autoCreate = true ) {
-	if ( !_( node ).has( 'exports' ) && autoCreate ) {
-		const exports = Object.create( null );
-		_( node ).set( 'exports', exports );
+	if ( !_( node ).has( 'defs' ) && autoCreate ) {
+		const defs = Object.create( null );
+		_( node ).set( 'defs', defs );
 	}
-	return _( node ).get( 'exports' );
+	return _( node ).get( 'defs' );
 }
 
 /**
@@ -63,21 +62,21 @@ export function getExports( node, autoCreate = true ) {
 function exposeAPIs( config ) {
     const window = this, { webqit: { oohtml: { configs } } } = window;
     // Assertions
-    if ( config.template.api.exports in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.exports }" property!` ); }
-    if ( config.template.api.moduledef in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.moduledef }" property!` ); }
-    if ( config.context.api.import in window.document ) { throw new Error( `document already has a "${ config.context.api.import }" property!` ); }
-    if ( config.context.api.import in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.context.api.import }" property!` ); }
+    if ( config.api.defs in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.api.defs }" property!` ); }
+    if ( config.api.def in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.api.def }" property!` ); }
+    if ( config.api.import in window.document ) { throw new Error( `document already has a "${ config.api.import }" property!` ); }
+    if ( config.api.import in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.api.import }" property!` ); }
     // Definitions
-    Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.exports, { get: function() {
+    Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.defs, { get: function() {
         return getExports( this );
     } } );
-    Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.moduledef, { get: function() {
-        return this.getAttribute( config.template.attr.moduledef );
+    Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.def, { get: function() {
+        return this.getAttribute( config.attr.def );
     } } );
-    Object.defineProperty( window.document, config.context.api.import, { value: function( ref, live = false, callback = null ) {
+    Object.defineProperty( window.document, config.api.import, { value: function( ref, live = false, callback = null ) {
         return importRequest( window.document, ...arguments );
     } } );
-    Object.defineProperty( window.HTMLElement.prototype, config.context.api.import, { value: function( ref, live = false, callback = null ) {
+    Object.defineProperty( window.HTMLElement.prototype, config.api.import, { value: function( ref, live = false, callback = null ) {
         return importRequest( this, ...arguments );
     } } );
     function importRequest( context, ref, live = false, callback = null ) {
@@ -130,7 +129,7 @@ function realtime( config ) {
                 htmlModule.ownerContext = entry.scoped ? record.target : window.document;
                 const ownerContextModulesObj = getExports( htmlModule.ownerContext );
                 if ( htmlModule.defId ) { Observer.set( ownerContextModulesObj, htmlModule.defId, entry ); }
-                // The ownerContext's exports - ownerContextModulesObj - has to be populated
+                // The ownerContext's defs - ownerContextModulesObj - has to be populated
                 // Before attaching a context instance to it, to give the just created context something to use for
                 // fullfiling reclaimed requests.
                 attachImportsContext( htmlModule.ownerContext );
@@ -148,11 +147,11 @@ function realtime( config ) {
                 detachImportsContext( entry );
             }
         } );
-    }, { live: true, timing: 'sync', staticSensitivity: config.staticsensitivity } );
+    }, { live: true, timing: 'sync', staticSensitivity: true } );
     // ------------
     // IMPORTS
     // ------------
-    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.import.tagName, record => {
+    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.elements.import, record => {
         record.entrants.forEach( node => handleRealtime( node, true, record ) );
         record.exits.forEach( node => handleRealtime( node, false, record ) );
     }, { live: true, timing: 'sync' } );

package/src/namespaced-html/index.js

@@ -11,14 +11,12 @@ import { _, _init } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'namespaced-html', $config, {
-		id: { attr: 'id' },
-		namespace: { attr: 'namespace',  api: 'namespace', },
+		attr: { namespace: 'namespace', id: 'id', },
+		api: { namespace: 'namespace', eagermode: true, },
 		target: { attr: ':target', event: ':target', scrolling: true },
-		staticsensitivity: true,
-		eagermode: true,
     } );
-	config.idSelector = `[${ window.CSS.escape( config.id.attr ) }]`;
-	config.namespaceSelector = `[${ window.CSS.escape( config.namespace.attr ) }]`;
+	config.idSelector = `[${ window.CSS.escape( config.attr.id ) }]`;
+	config.namespaceSelector = `[${ window.CSS.escape( config.attr.namespace ) }]`;
     exposeAPIs.call( window, config );
     realtime.call( window, config );
 }
@@ -35,8 +33,8 @@ function getNamespaceObject( node, config ) {
 	if ( !_( node ).has( 'namespace' ) ) {
 		const namespaceObj = Object.create( null );
 		Observer.intercept( namespaceObj, 'get', ( event, receiver, next ) => {
-			if ( Observer.has( namespaceObj, event.key ) || !config.eagermode ) return next();
-			const selector = `[${ window.CSS.escape( config.id.attr ) }="${ event.key }"]`;
+			if ( Observer.has( namespaceObj, event.key ) || !config.api.eagermode ) return next();
+			const selector = `[${ window.CSS.escape( config.attr.id ) }="${ event.key }"]`;
 			const resultNode = Array.from( node.querySelectorAll( selector ) ).filter( idNode => {
 				const ownerRoot = idNode.parentNode.closest( config.namespaceSelector );
 				if ( node === window.document ) {
@@ -63,13 +61,13 @@ function getNamespaceObject( node, config ) {
 function exposeAPIs( config ) {
     const window = this, { webqit: { Observer } } = window;
     // Assertions
-    if ( config.namespace.api in window.document ) { throw new Error( `document already has a "${ config.namespace.api }" property!` ); }
-    if ( config.namespace.api in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.namespace.api }" property!` ); }
+    if ( config.api.namespace in window.document ) { throw new Error( `document already has a "${ config.api.namespace }" property!` ); }
+    if ( config.api.namespace in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.namespace }" property!` ); }
     // Definitions
-    Object.defineProperty( window.document, config.namespace.api, { get: function() {
+    Object.defineProperty( window.document, config.api.namespace, { get: function() {
         return Observer.proxy( getNamespaceObject.call( window, window.document, config ) );
     } });
-    Object.defineProperty( window.Element.prototype, config.namespace.api, { get: function() {
+    Object.defineProperty( window.Element.prototype, config.api.namespace, { get: function() {
         return Observer.proxy( getNamespaceObject.call( window, this, config ) );
     } } );
 }
@@ -85,7 +83,7 @@ function realtime( config ) {
 	const window = this, { webqit: { Observer, realdom } } = window;
 	// ----------------
 	const handle = ( target, entry, incoming ) => {
-		const identifier = entry.getAttribute( config.id.attr );
+		const identifier = entry.getAttribute( config.attr.id );
 		const ownerRoot = target.closest( config.namespaceSelector ) || _( entry ).get( 'ownerNamespace' ) || window.document;
 		const namespaceObj = getNamespaceObject.call( window, ownerRoot, config );
 		if ( incoming ) {
@@ -101,10 +99,10 @@ function realtime( config ) {
 	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.idSelector, record => {
         record.entrants.forEach( entry => handle( record.target, entry, true ) );
         record.exits.forEach( entry => handle( record.target, entry, false ) );
-	}, { live: true, timing: 'sync', staticSensitivity: config.staticsensitivity } );
+	}, { live: true, timing: 'sync', staticSensitivity: true } );
 	// ----------------
-	if ( config.staticsensitivity ) {
-		realdom.realtime( window.document, 'attr' ).observe( config.namespace.attr, record => {
+	if ( true/*config.staticsensitivity*/ ) {
+		realdom.realtime( window.document, 'attr' ).observe( config.attr.namespace, record => {
 			const ownerRoot = record.target.parentNode?.closest( config.namespaceSelector ) || _( record.target ).get( 'ownerNamespace' ) || window.document;
 			const ownerRootNamespaceObj = getNamespaceObject.call( window, ownerRoot, config );
 			const namespaceObj = getNamespaceObject.call( window, record.target, config );
@@ -126,7 +124,7 @@ function realtime( config ) {
 	let prevTarget;
 	const activateTarget = () => {
 		const path = window.location.hash?.substring( 1 ).split( '/' ).map( s => s.trim() ).filter( s => s ) || [];
-		const currTarget = path.reduce( ( prev, segment ) => prev && prev[ config.namespace.api ][ segment ], window.document );
+		const currTarget = path.reduce( ( prev, segment ) => prev && prev[ config.api.namespace ][ segment ], window.document );
 		if ( prevTarget && config.target.attr ) { prevTarget.toggleAttribute( config.target.attr, false ); }
 		if ( currTarget && currTarget !== window.document ) {
 			if ( config.target.attr ) { currTarget.toggleAttribute( config.target.attr, true ); }

package/src/util.js

@@ -5,6 +5,7 @@
 import realdomInit from '@webqit/realdom';
 import { _internals } from '@webqit/util/js/index.js';
 import { _merge } from '@webqit/util/obj/index.js';
+import { _toTitle } from '@webqit/util/str/index.js';
 
 export const _ = ( ...args ) => _internals( 'oohtml', ...args );
 
@@ -12,14 +13,31 @@ export const env = {};
 
 export function _init( name, $config, $defaults ) {
     const window = this, realdom = realdomInit.call( window );
+    env.window = window;
+    if ( !window.webqitConfig ) {
+        window.webqitConfig = realdom.meta( 'webqit' ).json();
+    }
     window.webqit || ( window.webqit = {} );
     window.webqit.oohtml || ( window.webqit.oohtml = {} );
     window.webqit.oohtml.configs || ( window.webqit.oohtml.configs = {} );
-    const configKey = name.toUpperCase().replace( '-', '_' );
-    window.webqit.oohtml.configs[ configKey ] || ( window.webqit.oohtml.configs[ configKey ] = {} );
-    env.window = window;
     // ---------------------
-    _merge( 2, window.webqit.oohtml.configs[ configKey ], $defaults, $config, realdom.meta( name ).json() );
+    const configKey = name.toUpperCase().replace( '-', '_' );
+    if ( !window.webqit.oohtml.configs[ configKey ] ) {
+        window.webqit.oohtml.configs[ configKey ] =  {};
+        const config = window.webqit.oohtml.configs[ configKey ];
+        _merge( 2, config, $defaults, $config, realdom.meta( name ).json() );
+        if ( window.webqitConfig.prefix ) {
+            Object.keys( config ).forEach( main => {
+                Object.keys( config[ main ] ).forEach( key => {
+                    if ( main === 'api' && typeof config[ main ][ key ] === 'string' ) {
+                        config[ main ][ key ] = `${ window.webqitConfig.prefix }${ _toTitle( config[ main ][ key ] ) }`
+                    } else if ( [ 'attr', 'elements' ].includes( main ) && config[ main ][ key ]?.startsWith( 'data-' ) === false ) {
+                        config[ main ][ key ] = `${ window.webqitConfig.prefix }-${ config[ main ][ key ] }`
+                    }
+                } );
+            } );
+        }
+    }
     // ---------------------
     return { config: window.webqit.oohtml.configs[ configKey ], realdom, window };
 }