@webqit/oohtml 2.1.34 → 2.1.35

package/src/{html-modules/_HTMLImportsContext.js → html-imports/_HTMLImportsProvider.js}

@@ -1,114 +1,122 @@
-
-/**
- * @imports
- */
-import Observer from '@webqit/observer';
-import { HTMLContextManager, HTMLContext } from '../context-api/index.js';
-import { getModulesObject } from './index.js';
-import { _ } from '../util.js';
-
-export default class _HTMLImportsContext extends HTMLContext {
- 
-    /**
-     * @createRequest
-     */
-    static createRequest( fields = {} ) {
-        const request = { type: 'HTMLModules', ...fields };
-        if ( !request.name && request.detail?.startsWith( '/' ) ) { request.name = 'root'; }
-        else if ( request.detail?.startsWith( '@' ) ) {
-            const [ contextName, detail ] = request.detail.split( ':' ).map( s => s.trim() );
-            request.name = contextName.slice( 1 );
-            request.detail = detail;
-        }
-        return request;
-    }
-
-    /**
-     * @modules
-     */
-    get modules() {
-        return getModulesObject( this.host );
-    }
-
-    /**
-     * @handle()
-     */
-    handle( event ) {
-        // Any existing event.request.controller? Abort!
-        event.request.controller?.abort();
-
-        // Parse and translate detail
-        if ( ( event.request.detail || '' ).trim() === '/' ) return event.respondWith( this.modules );
-        const $config = this.constructor.config;
-        let path = ( event.request.detail || '' ).split( /\/|(?<=\w)(?=#)/g ).map( x => x.trim() ).filter( x => x );
-        if ( path.length ) { path = path.join( `/${ $config.template.api.modules }/` )?.split( '/' ) || []; }
-        // No detail?
-        if ( !path.length ) return event.respondWith();
-
-        // We'll now fulfill request
-        const params = { live: event.request.live, descripted: true, midwayResults: true };
-        // Find a way to resolve request against two sources
-        event.request.controller = Observer.deep( this.modules, path, Observer.get, ( result, { signal } = {} ) => {
-            if ( !result.value && this.host.isConnected === false ) return; // Subtree is being disposed
-            if ( result.value || !this.altModules ) return event.respondWith( result.value );
-            // This superModules binding is automatically aborted by the injected control.signal; see below
-            return Observer.deep( this.altModules, path, Observer.get, result => {
-                return event.respondWith( result.value );
-            }, { signal, ...params } );
-        }, params );
-    }
-
-    /**
-     * @startRealtime()
-     */
-    realtimeSources( host ) {
-        this.host = host;
-        // ----------------
-        const update = () => {
-            for ( const subscriptionEvent of this.subscriptions ) {
-                this.handle( subscriptionEvent );
-            }
-        };
-        // ----------------
-        const $config = this.constructor.config;
-        if ( !this.host.matches || !$config.context.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 } ) => {
-            // No importscontext attr set. But we're still watching
-            if ( !record.value ) {
-                this.altModules = undefined;
-                return update();
-            }
-            // This superModules contextrequest is automatically aborted by the injected signal below
-            const request = this.constructor.createRequest( { detail: record.value.trim(), live: true, signal, superContextOnly: true } );
-            HTMLContextManager.instance( this.host ).ask( request, response => {
-                this.altModules = !( response && Object.getPrototypeOf( response ) ) ? response : getModulesObject( response );
-                update();
-            } );
-        }, { live: true, timing: 'sync', lifecycleSignals: true } );
-    }
-
-    /**
-     * @initialize()
-     */
-    initialize( host ) {
-        // If host has importscontext attr, compute that
-        this.realtimeSources( host );
-        // Now, listen for contextrequest and contextclaim events
-        // And process own claim
-        return super.initialize( host );
-    }
-    
-    /**
-     * @dispose()
-     */
-    dispose( host ) {
-        // Stop listening for sources
-        this.refdSourceController?.disconnect();
-        // Now, stop listening for contextrequest and contextclaim events
-        // And relinquish own subscribers to owner context
-        return super.dispose( host );
-    }
-}
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import { HTMLContext, HTMLContextProvider } from '../context-api/index.js';
+import { getModulesObject } from './index.js';
+import { _ } from '../util.js';
+
+export default class _HTMLImportsProvider extends HTMLContextProvider {
+
+    /**
+     * @createId
+     */
+    static createId( host, fields = {} ) {
+        if ( !( 'type' in fields ) ) fields = { type: 'htmlimports', ...fields };
+        return super.createId( host, fields );
+    }
+
+    /**
+     * @createRequest
+     */
+    static createRequest( fields = {} ) {
+        const request = { type: 'htmlimports', ...fields };
+        if ( !request.contextName && request.detail?.startsWith( '/' ) ) { request.contextName = 'root'; }
+        else if ( request.detail?.startsWith( '@' ) ) {
+            const [ contextName, ...detail ] = request.detail.slice( 1 ).split( /(?<=\w)(?=\/|#)/ ).map( s => s.trim() );
+            request.contextName = contextName;
+            request.detail = detail.join( '' );
+        }
+        return request;
+    }
+     
+    /**
+     * @localModules
+     */
+    get localModules() {
+        return getModulesObject( this.host );
+    }
+
+    /**
+     * @handle()
+     */
+    handle( event ) {
+        // Any existing event.request.controller? Abort!
+        event.request.controller?.abort();
+
+        // Parse and translate detail
+        if ( ( event.request.detail || '' ).trim() === '/' ) return event.respondWith( this.localModules );
+        const $config = this.constructor.config;
+        let path = ( event.request.detail || '' ).split( /\/|(?<=\w)(?=#)/g ).map( x => x.trim() ).filter( x => x );
+        if ( path.length ) { path = path.join( `/${ $config.template.api.modules }/` )?.split( '/' ) || []; }
+        // No detail?
+        if ( !path.length ) return event.respondWith();
+ 
+        // We'll now fulfill request
+        const options = { live: event.request.live, descripted: true, midwayResults: true };
+        // Find a way to resolve request against two sources
+        event.request.controller = Observer.deep( this.localModules, path, Observer.get, ( result, { signal } = {} ) => {
+            if ( !result.value && this.host.isConnected === false ) return; // Subtree is being disposed
+            if ( result.value || !this.contextModules ) return event.respondWith( result.value );
+            // This superModules binding is automatically aborted by the injected control.signal; see below
+            return Observer.deep( this.contextModules, path, Observer.get, result => {
+                return event.respondWith( result.value );
+            }, { signal, ...options } );
+        }, options );
+    }
+
+    /**
+     * @startRealtime()
+     */
+    realtimeSources( host ) {
+        this.host = host;
+        // ----------------
+        const update = () => {
+            for ( const subscriptionEvent of this.subscriptions ) {
+                this.handle( subscriptionEvent );
+            }
+        };
+        // ----------------
+        const $config = this.constructor.config;
+        if ( !this.host.matches || !$config.context.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 } ) => {
+            // No importscontext attr set. But we're still watching
+            if ( !record.value ) {
+                this.contextModules = undefined;
+                return update();
+            }
+            // This superModules contextrequest is automatically aborted by the injected signal below
+            const request = this.constructor.createRequest( { detail: record.value.trim(), live: true, signal, superContextOnly: true } );
+            HTMLContext.instance( this.host ).request( request, response => {
+                this.contextModules = !( response && Object.getPrototypeOf( response ) ) ? response : getModulesObject( response );
+                update();
+            } );
+        }, { live: true, timing: 'sync', lifecycleSignals: true } );
+    }
+
+    /**
+     * @initialize()
+     */
+    initialize( host ) {
+        // If host has importscontext attr, compute that
+        this.realtimeSources( host );
+        // Now, listen for contextrequest and contextclaim events
+        // And process own claim
+        return super.initialize( host );
+    }
+    
+    /**
+     * @dispose()
+     */
+    dispose( host ) {
+        // Stop listening for sources
+        this.refdSourceController?.disconnect();
+        // Now, stop listening for contextrequest and contextclaim events
+        // And relinquish own subscribers to owner context
+        return super.dispose( host );
+    }
+}

package/src/html-imports/index.js

@@ -1,88 +1,197 @@
-
-/**
- * @imports
- */
-import _HTMLImportElement from './_HTMLImportElement.js';
-import { _, _init } from '../util.js';
-
-/**
- * Initializes HTML Modules.
- * 
- * @param $config  Object
- *
- * @return Void
- */
-export default function init( $config = {} ) {
-    const { config, realdom, window } = _init.call( this, 'html-imports', $config, {
-        import: { tagName: 'import', attr: { moduleref: 'module' }, },
-        export: { attr: { exportid: 'exportid' }, },
-        isomorphic: true,
-    } );
-    config.slottedElementsSelector = `[${ window.CSS.escape( config.export.attr.exportid ) }]`;
-    window.webqit.HTMLImportElement = _HTMLImportElement.call( window, config );
-    realdom.ready( () => hydration.call( window, config ) );
-    realtime.call( window, config );
-}
-
-/**
- * Performs realtime capture of elements and their attributes
- * and their module query results; then resolves the respective import elements.
- *
- * @param Object config
- *
- * @return Void
- */
-function realtime( config ) {
-    const window = this, { realdom, HTMLImportElement } = window.webqit;
-    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.import.tagName, record => {
-        record.entrants.forEach( node => handleRealtime( node, true, record ) );
-        record.exits.forEach( node => handleRealtime( node, false, record ) );
-    }, { live: true, timing: 'sync' } );
-    function handleRealtime( entry, connectedState, record ) {
-        const elInstance = HTMLImportElement.instance( entry );
-        if ( connectedState ) { elInstance[ '#' ].connectedCallback(); }
-        else { elInstance[ '#' ].disconnectedCallback(); }
-    }
-}
-
-/**
- * Performs hydration for server-slotted elements.
- *
- * @param Object config
- *
- * @return Void
- */
-function hydration( config ) {
-    const window = this, { HTMLImportElement } = window.webqit;
-    function scan( context ) {
-        const slottedElements = new Set;
-        context.childNodes.forEach( node => {
-            if ( node.nodeType === 1/** ELEMENT_NODE */ ) {
-                if ( !node.matches( config.slottedElementsSelector ) ) return;
-                if ( _( node ).get( 'slot@imports' ) ) return;
-                slottedElements.add( node );
-            } else if ( node.nodeType === 8/** COMMENT_NODE */ ) {
-                const nodeValue = node.nodeValue.trim();
-                if ( !nodeValue.startsWith( '<' + config.import.tagName ) ) return;
-                if ( !nodeValue.endsWith( '</' + config.import.tagName + '>' ) ) return;
-                const reviver = window.document.createElement( 'div' );
-                reviver.innerHTML = nodeValue;
-                const importEl = reviver.firstChild;
-                if ( !importEl.matches( config.import.tagName ) ) return;
-                HTMLImportElement.instance( importEl )[ '#' ].hydrate(
-                    node/* the comment node */, slottedElements
-                );
-                slottedElements.clear();
-            }
-        } );
-    }
-    Array.from( window.document.querySelectorAll( config.slottedElementsSelector ) ).forEach( slottedElement => {
-        // hydration() might be running AFTER certain <slots> have resolved
-        // and slottedElement might be a just-resolved node
-        if ( _( slottedElement ).get( 'slot@imports' ) ) return;
-        if ( _( slottedElement.parentNode ).get( 'alreadyscanned@imports' ) ) return;
-        scan( slottedElement.parentNode );
-        // Scanning is once for every parent
-        _( slottedElement.parentNode ).set( 'alreadyscanned@imports', true );
-    } );
-}
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import { HTMLContext } from '../context-api/index.js';
+import _HTMLExportsManager from './_HTMLExportsManager.js';
+import _HTMLImportElement from './_HTMLImportElement.js';
+import _HTMLImportsProvider from './_HTMLImportsProvider.js';
+import { _, _init } from '../util.js';
+
+/**
+ * Initializes HTML Modules.
+ * 
+ * @param $config  Object
+ *
+ * @return Void
+ */
+export default function init( $config = {} ) {
+    const { config, realdom, window } = _init.call( this, 'html-imports', $config, {
+        export: { attr: { exportid: 'as' }, },
+        template: { attr: { exportid: 'as', extends: 'extends', inherits: 'inherits' }, api: { modules: 'modules', exportid: 'exportid' }, },
+        context: { attr: { importscontext: 'importscontext', contextname: 'contextname' }, api: { modules: 'modules' }, },
+        import: { tagName: 'import', attr: { moduleref: 'ref' }, },
+        staticsensitivity: true,
+        isomorphic: true,
+    } );
+    config.templateSelector = `template[${ window.CSS.escape( config.template.attr.exportid ) }]`;
+    config.ownerContextSelector = [ config.context.attr.contextname, config.context.attr.importscontext ].map( a => `[${ window.CSS.escape( a ) }]` ).join( ',' );
+    config.slottedElementsSelector = `[${ window.CSS.escape( config.export.attr.exportid ) }]`;
+    window.webqit.HTMLImportElement = _HTMLImportElement.call( window, config );
+    window.webqit.HTMLImportsProvider = class extends _HTMLImportsProvider {
+        static get config() { return config; }
+    };
+    window.webqit.Observer = Observer;
+    exposeModulesObjects.call( window, config );
+    realdom.ready( () => hydration.call( window, config ) );
+    realtime.call( window, config );
+}
+
+export { Observer }
+
+/**
+ * Returns the "exports" object associated with the given node.
+ *
+ * @param Element       node
+ * @param Bool          autoCreate
+ *
+ * @return Object
+ */
+export function getModulesObject( node, autoCreate = true ) {
+	if ( !_( node ).has( 'modules' ) && autoCreate ) {
+		const modulesObj = Object.create( null );
+		_( node ).set( 'modules', modulesObj );
+	}
+	return _( node ).get( 'modules' );
+}
+
+/**
+ * Exposes HTML Modules with native APIs.
+ *
+ * @param Object        config
+ *
+ * @return Void
+ */
+function exposeModulesObjects( config ) {
+    const window = this;
+    // Assertions
+    if ( config.template.api.modules in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.modules }" property!` ); }
+    if ( config.template.api.exportid in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.exportid }" 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!` ); }
+    // Definitions
+    Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.modules, { get: function() {
+        return getModulesObject( this );
+    } } );
+    Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.exportid, { get: function() {
+        return this.getAttribute( config.template.attr.exportid );
+    } } );
+    Object.defineProperty( window.document, config.context.api.import, { value: function( ref, callback, options = {} ) {
+        return importRequest( window.document, ref, callback, options );
+    } } );
+    Object.defineProperty( window.HTMLElement.prototype, config.context.api.import, { value: function( ref, callback, options = {} ) {
+        return importRequest( this, ref, callback, options );
+    } } );
+    function importRequest( context, ref, callback, options ) {
+        const request = _HTMLImportsProvider.createRequest( { detail: ref, ...options } );
+        return HTMLContext.instance( context ).request( request, callback );
+    }
+}
+
+/**
+ * Performs realtime capture of elements and their attributes
+ * and their module query results; then resolves the respective import elements.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function realtime( config ) {
+    const window = this, { realdom, HTMLImportElement, HTMLImportsProvider } = window.webqit;
+    // ------------
+    // MODULES
+    // ------------
+    const attachImportsContext = host => {
+        const contextId = HTMLImportsProvider.createId( host );
+        HTMLImportsProvider.attachTo( host, contextId );
+    };
+    const detachImportsContext = ( host, force ) => {
+        const contextId = HTMLImportsProvider.createId( host );
+        HTMLImportsProvider.detachFrom( host, contextId, cx => {
+            return force || host.matches && !host.matches( config.ownerContextSelector ) && !Object.keys( cx.localModules ).length;
+        } );
+    };
+    // ------------
+    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( [ config.templateSelector, config.ownerContextSelector ], record => {
+        record.entrants.forEach( entry => {
+            if ( entry.matches( config.templateSelector ) ) {
+                Object.defineProperty( entry, 'scoped', { value: entry.hasAttribute( 'scoped' ) } ); 
+                const moduleExport = new _HTMLExportsManager( window, entry, config );
+                moduleExport.ownerContext = entry.scoped ? record.target : window.document;
+                const ownerContextModulesObj = getModulesObject( moduleExport.ownerContext );
+                if ( moduleExport.exportId ) { Observer.set( ownerContextModulesObj, moduleExport.exportId, entry ); }
+                // The ownerContext's modulesObj - 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( moduleExport.ownerContext );
+            } else {
+                attachImportsContext( entry );
+            }
+        } );
+        record.exits.forEach( entry => {
+            if ( entry.matches( config.templateSelector ) ) {
+                const moduleExport = _HTMLExportsManager.instance( window, entry, config );
+                const ownerContextModulesObj = getModulesObject( moduleExport.ownerContext );
+                if ( moduleExport.exportId ) { Observer.deleteProperty( ownerContextModulesObj, moduleExport.exportId ); }
+                detachImportsContext( moduleExport.ownerContext );
+            } else {
+                detachImportsContext( entry, true );
+            }
+        } );
+    }, { live: true, timing: 'sync', staticSensitivity: config.staticsensitivity } );
+    // ------------
+    // IMPORTS
+    // ------------
+    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.import.tagName, record => {
+        record.entrants.forEach( node => handleRealtime( node, true, record ) );
+        record.exits.forEach( node => handleRealtime( node, false, record ) );
+    }, { live: true, timing: 'sync' } );
+    function handleRealtime( entry, connectedState, record ) {
+        const elInstance = HTMLImportElement.instance( entry );
+        if ( connectedState ) { elInstance[ '#' ].connectedCallback(); }
+        else { elInstance[ '#' ].disconnectedCallback(); }
+    }
+}
+
+/**
+ * Performs hydration for server-slotted elements.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function hydration( config ) {
+    const window = this, { HTMLImportElement } = window.webqit;
+    function scan( context ) {
+        const slottedElements = new Set;
+        context.childNodes.forEach( node => {
+            if ( node.nodeType === 1/** ELEMENT_NODE */ ) {
+                if ( !node.matches( config.slottedElementsSelector ) ) return;
+                if ( _( node ).get( 'slot@imports' ) ) return;
+                slottedElements.add( node );
+            } else if ( node.nodeType === 8/** COMMENT_NODE */ ) {
+                const nodeValue = node.nodeValue.trim();
+                if ( !nodeValue.startsWith( '<' + config.import.tagName ) ) return;
+                if ( !nodeValue.endsWith( '</' + config.import.tagName + '>' ) ) return;
+                const reviver = window.document.createElement( 'div' );
+                reviver.innerHTML = nodeValue;
+                const importEl = reviver.firstChild;
+                if ( !importEl.matches( config.import.tagName ) ) return;
+                HTMLImportElement.instance( importEl )[ '#' ].hydrate(
+                    node/* the comment node */, slottedElements
+                );
+                slottedElements.clear();
+            }
+        } );
+    }
+    Array.from( window.document.querySelectorAll( config.slottedElementsSelector ) ).forEach( slottedElement => {
+        // hydration() might be running AFTER certain <slots> have resolved
+        // and slottedElement might be a just-resolved node
+        if ( _( slottedElement ).get( 'slot@imports' ) ) return;
+        if ( _( slottedElement.parentNode ).get( 'alreadyscanned@imports' ) ) return;
+        scan( slottedElement.parentNode );
+        // Scanning is once for every parent
+        _( slottedElement.parentNode ).set( 'alreadyscanned@imports', true );
+    } );
+}

package/src/html-imports/targets.browser.js

@@ -1,10 +1,10 @@
-
-/**
- * @imports
- */
-import init from './index.js';
-
-/**
- * @init
- */
+
+/**
+ * @imports
+ */
+import init from './index.js';
+
+/**
+ * @init
+ */
 init.call( window );

package/src/index.js

@@ -1,33 +1,31 @@
-
-/**
- * @imports
- */
-import Observer from '@webqit/observer';
-import BindingsAPI from './bindings-api/index.js';
-import ContextAPI from './context-api/index.js';
-import NamespaceAPI from './namespace-api/index.js';
-import HTMLModules from './html-modules/index.js';
-import HTMLImports from './html-imports/index.js';
-import ScopedCSS from './scoped-css/index.js';
-import ScopedJS from './scoped-js/index.js';
-
-/**
- * @init
- */
-export default function init( configs = {} ) {
-    if ( !this.webqit ) { this.webqit = {}; }
-    // --------------
-    BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) );
-    ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
-    NamespaceAPI.call( this, ( configs.NAMESPACE_API || {} ) );
-    HTMLModules.call( this, ( configs.HTML_MODULES || {} ) );
-    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) );
-    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) );
-    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
-    // --------------
-}
-
-/**
- * @exports
- */
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import BindingsAPI from './bindings-api/index.js';
+import ContextAPI from './context-api/index.js';
+import ScopedCSS from './scoped-css/index.js';
+import ScopedJS from './scoped-js/index.js';
+import NamespaceAPI from './namespace-api/index.js';
+import HTMLImports from './html-imports/index.js';
+
+/**
+ * @init
+ */
+export default function init( configs = {} ) {
+    if ( !this.webqit ) { this.webqit = {}; }
+    // --------------
+    BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) );
+    ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
+    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
+    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) );
+    NamespaceAPI.call( this, ( configs.NAMESPACE_API || {} ) );
+    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) );
+    // --------------
+}
+
+/**
+ * @exports
+ */
 export { Observer }