@webqit/oohtml 4.1.10 → 4.1.12

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "4.1.10",
+  "version": "4.1.12",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
   },
   "dependencies": {
     "@webqit/quantum-js": "^4.5.8",
-    "@webqit/realdom": "^2.1.24",
+    "@webqit/realdom": "^2.1.25",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {

package/src/context-api/DOMContexts.js

@@ -84,6 +84,8 @@ export default class DOMContexts {
                 args[ args.indexOf( options ) ] = { ...options, signal: responseInstance.signal };
             }
             const event = new ( _DOMContextRequestEvent() )( ...args );
+            // Initally
+            event.meta.target = this[ '#' ].host;
 
             const rootNode = this[ '#' ].host.getRootNode();
             const temp = event => {

package/src/data-binding/index.js

@@ -45,7 +45,7 @@ function realtime( config ) {
     realdom.realtime( window.document ).query( config.attrSelector, record => {
         cleanup.call( this, ...record.exits );
         mountInlineBindings.call( window, config, ...record.entrants );
-    }, { live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true } );
+    }, { live: true, subtree: 'cross-roots', timing: 'sync', eventDetails: true, staticSensitivity: true } );
 }
 
 function createDynamicScope( config, root ) {

package/src/html-imports/HTMLImportsContext.js

@@ -90,14 +90,17 @@ export default class HTMLImportsContext extends DOMContext {
         // Any existing this.refdSourceController? Abort!
         this.refdSourceController?.disconnect();
         const realdom = this.host.ownerDocument.defaultView.webqit.realdom;
+        let prevRef;
         this.refdSourceController = realdom.realtime( this.host ).attr( $config.attr.importscontext, ( record, { signal } ) => {
+            if (record.value === prevRef) return;
+            prevRef = record.value;
             // 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( record.value.trim() ), live: true, signal };
+            const request = { ...this.constructor.createRequest( record.value.trim() ), live: true, signal, diff: true };
             this.host.parentNode[ this.configs.CONTEXT_API.api.contexts ].request( request, response => {
                 this.contextModules = !( response && Object.getPrototypeOf( response ) ) ? response : getDefs( response );
                 update();

package/src/html-imports/HTMLModule.js

@@ -70,38 +70,36 @@ export default class HTMLModule {
     expose( entries, isConnected ) {
         const { window } = env, { webqit: { Observer } } = window;
         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.attr.def : this.config.attr.fragmentdef ) || '' ).trim();
-                if ( isConnected ) {
-                    if ( isTemplate && defId ) {
-                        new HTMLModule( entry, this.host, this.level + 1 );
-                    } else {
-                        allFragments.push( entry );
-                        dirty = true;
-                        if ( typeof requestIdleCallback === 'function' ) {
-                            requestIdleCallback( () => {
-                                this.config.idleCompilers?.forEach( callback => callback.call( this.window, entry ) );
-                            } );
-                        }
-                    }
-                    if ( defId ) {
-                        this.validateDefId( defId );
-                        Observer.set( this.defs, ( !isTemplate && '#' || '' ) + defId, entry );
-                    }
+        entries.forEach( entry => {
+            if ( entry.nodeType !== 1 ) return;
+            const isTemplate = entry.matches( this.config.templateSelector );
+            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 {
-                    if ( isTemplate && defId ) { HTMLModule.instance( entry ).dispose(); }
-                    else {
-                        allFragments = allFragments.filter( x => x !== entry );
-                        dirty = true;
+                    allFragments.push( entry );
+                    dirty = true;
+                    if ( typeof requestIdleCallback === 'function' ) {
+                        requestIdleCallback( () => {
+                            this.config.idleCompilers?.forEach( callback => callback.call( this.window, entry ) );
+                        } );
                     }
-                    if ( defId ) Observer.deleteProperty( this.defs, ( !isTemplate && '#' || '' ) + defId );
                 }
-            } );
-            if ( dirty ) Observer.set( this.defs, '#', allFragments );
+                if ( defId ) {
+                    this.validateDefId( defId );
+                    Observer.set( this.defs, ( !isTemplate && '#' || '' ) + defId, entry );
+                }
+            } else {
+                if ( isTemplate && defId ) { HTMLModule.instance( entry ).dispose(); }
+                else {
+                    allFragments = allFragments.filter( x => x !== entry );
+                    dirty = true;
+                }
+                if ( defId ) Observer.deleteProperty( this.defs, ( !isTemplate && '#' || '' ) + defId );
+            }
         } );
+        if ( dirty ) Observer.set( this.defs, '#', allFragments );
     }
 
     /**

package/src/html-imports/_HTMLImportElement.js

@@ -49,51 +49,61 @@ export default function() {
                 return anchorNode;
             };
 
-            priv.importRequest = ( callback, signal = null ) => {
-                const request = { ...HTMLImportsContext.createRequest( priv.moduleRef?.includes( '#' ) ? priv.moduleRef : `${ priv.moduleRef }#`/* for live children */ ), live: signal && true, signal };
-                ( this.el.isConnected ? this.el.parentNode : priv.anchorNode.parentNode )[ configs.CONTEXT_API.api.contexts ].request( request, response => {
-                    callback( ( response instanceof window.HTMLTemplateElement ? [ ...response.content.children ] : (
-                        Array.isArray( response ) ? response : response && [ response ]
-                    ) ) || [] );
-                } );
+            priv.live = callback => {
+                if ( priv.liveImportsRealtime ) throw new Error(`Import element already in live mode.`);
+                const parentNode = this.el.isConnected ? this.el.parentNode : priv.anchorNode.parentNode;
+                priv.liveImportsRealtime = realdom.realtime( this.el ).attr( configs.HTML_IMPORTS.attr.ref, ( record, { signal } ) => {
+                    priv.moduleRef = record.value;
+                    const moduleRef = priv.moduleRef.includes( '#' ) ? priv.moduleRef : `${ priv.moduleRef }#`/* for live children */;
+                    const request = { ...HTMLImportsContext.createRequest( moduleRef ), live: signal && true, signal, diff: !moduleRef.endsWith('#') };
+                    parentNode[ configs.CONTEXT_API.api.contexts ].request( request, response => {
+                        callback( ( response instanceof window.HTMLTemplateElement ? [ ...response.content.children ] : (
+                            Array.isArray( response ) ? response : response && [ response ]
+                        ) ) || [] );
+                    } );
+                }, { live: true, timing: 'sync', lifecycleSignals: true } );
+                priv.autoDestroyRealtime = realdom.realtime( window.document ).track( parentNode, () => {
+                    priv.die();
+                }, { subtree: 'cross-roots', timing: 'sync', generation: 'exits' } );
+            };
+
+            priv.die = () => {
+                priv.autoDestroyRealtime?.disconnect();
+                priv.liveImportsRealtime?.disconnect();
+                priv.liveImportsRealtime = null;
             };
 
             priv.hydrate = ( anchorNode, slottedElements ) => {
-                // ----------------
-                priv.moduleRef = ( this.el.getAttribute( configs.HTML_IMPORTS.attr.ref ) || '' ).trim();
                 anchorNode.replaceWith( priv.setAnchorNode( this.createAnchorNode() ) );
-                priv.autoRestore( () => {
-                    slottedElements.forEach( slottedElement => {
-                        priv.slottedElements.add( slottedElement );
-                        _( slottedElement ).set( 'slot@imports', this.el );
-                    } );
-                } );
-                // ----------------
-                priv.hydrationImportRequest = new AbortController;
-                priv.importRequest( fragments => {
-                    if ( priv.originalsRemapped ) { return this.fill( fragments ); }
+                priv.live( fragments => {
+                    // The default action
+                    if ( priv.originalsRemapped ) return this.fill( fragments );
+                    // Initial remap action
                     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 => {
+                    slottedElements.forEach( ( slottedElement, i ) => {
                         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 );
+                        if ( originalsMatch ) _( slottedElement ).set( 'original@imports', originalsMatch.el ); // Or should we throw integrity error here?
+                        _( slottedElement ).set( 'slot@imports', this.el );
+                        priv.slottedElements.add( slottedElement );
                     } );
                     priv.originalsRemapped = true;
-                }, priv.hydrationImportRequest.signal );
+                });
             };
 
             priv.autoRestore = ( callback = null ) => {
                 priv.autoRestoreRealtime?.disconnect();
                 if ( callback ) callback();
                 const restore = () => {
-                    priv.anchorNode?.replaceWith( this.el );
-                    priv.anchorNode = null;
+                    if (this.el.isConnected) return;
                     this.el.setAttribute( 'data-nodecount', 0 );
+                    this.el.slottingAction = true;
+                    priv.anchorNode.replaceWith( this.el );
+                    this.el.slottingAction = false;
+                    priv.setAnchorNode( null );
                 };
                 if ( !priv.slottedElements.size ) return restore();
-                const autoRestoreRealtime = realdom.realtime( window.document ).observe( [ ...priv.slottedElements ], record => {
+                const autoRestoreRealtime = realdom.realtime( priv.anchorNode.parentNode ).observe( [ ...priv.slottedElements ], record => {
                     record.exits.forEach( outgoingNode => {
                         _( outgoingNode ).delete( 'slot@imports' );
                         priv.slottedElements.delete( outgoingNode );
@@ -109,26 +119,13 @@ export default function() {
             };
 
             priv.connectedCallback = () => {
-                // In case this is DOM node relocation or induced reinsertion into the DOM
-                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.attr.ref, ( record, { signal } ) => {
-                    priv.moduleRef = record.value;
-                    // Below, we ignore first restore from hydration
-                    priv.importRequest( fragments => !priv.hydrationImportRequest && this.fill( fragments ), signal );
-                }, { live: true, timing: 'sync', lifecycleSignals: true } );
-                // Must come after
-                priv.hydrationImportRequest?.abort();
-                priv.hydrationImportRequest = null;
+                if ( this.el.slottingAction ) return;
+                priv.live( fragments => this.fill( fragments ) );
             };
 
             priv.disconnectedCallback = () => {
-                priv.hydrationImportRequest?.abort();
-                priv.hydrationImportRequest = null;
-                if ( priv.anchorNode?.isConnected ) return;
-                priv.moduleRefRealtime?.disconnect();
-                priv.moduleRefRealtime = null;
+                if ( this.el.slottingAction ) return;
+                priv.die();
             };
         }
 
@@ -153,7 +150,11 @@ export default function() {
          *
          * @return void
          */
-        fill( slottableElements ) {
+        fill( slottableElements, r ) {
+            if (!this.el.isConnected && (!this[ '#' ].anchorNode || !this[ '#' ].anchorNode.isConnected)) {
+                // LiveImports must be responding to an event that just removed the subtree from DOM
+                return;
+            }
             if ( Array.isArray( slottableElements ) ) { slottableElements = new Set( slottableElements ) }
             // This state must be set before the diffing below and the serialization done at createAnchorNode()
             this.el.setAttribute( 'data-nodecount', slottableElements.size );
@@ -172,10 +173,11 @@ export default function() {
                 } );
                 // Make sure anchor node is what's in place...
                 // not the import element itslef - but all only when we have slottableElements.size
-                if ( slottableElements.size ) {
-                    const currentAnchorNode = this[ '#' ].anchorNode;
-                    const anchorNode = this[ '#' ].setAnchorNode( this.createAnchorNode() );
-                    ( this.el.isConnected ? this.el : currentAnchorNode ).replaceWith( anchorNode );
+                if ( slottableElements.size && this.el.isConnected ) {
+                    const newAnchorNode = this[ '#' ].setAnchorNode( this.createAnchorNode() );
+                    this.el.slottingAction = true;
+                    this.el.replaceWith( newAnchorNode );
+                    this.el.slottingAction = false;
                 }
                 // Insert slottables now
                 slottableElements.forEach( slottableElement => {

package/src/html-imports/index.js

@@ -14,26 +14,26 @@ import { _, _init } from '../util.js';
  *
  * @return Void
  */
-export default function init( $config = {} ) {
-    const { config, window } = _init.call( this, 'html-imports', $config, {
+export default function init($config = {}) {
+    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' },
-    } );
-    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 }`;
+    });
+    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.elements.import }`, `</${ config.elements.import }>` ) }]`;
+    config.anchorNodeSelector = `comment()[${anchorNodeMatch(`<${config.elements.import}`, `</${config.elements.import}>`)}]`;
     window.webqit.HTMLImportsContext = HTMLImportsContext;
     window.webqit.HTMLImportElement = _HTMLImportElement();
-    exposeAPIs.call( window, config );
-    realtime.call( window, config );
+    exposeAPIs.call(window, config);
+    realtime.call(window, config);
 }
 
 /**
@@ -44,12 +44,12 @@ export default function init( $config = {} ) {
  *
  * @return Object
  */
-export function getDefs( node, autoCreate = true ) {
-	if ( !_( node ).has( 'defs' ) && autoCreate ) {
-		const defs = Object.create( null );
-		_( node ).set( 'defs', defs );
-	}
-	return _( node ).get( 'defs' );
+export function getDefs(node, autoCreate = true) {
+    if (!_(node).has('defs') && autoCreate) {
+        const defs = Object.create(null);
+        _(node).set('defs', defs);
+    }
+    return _(node).get('defs');
 }
 
 /**
@@ -59,44 +59,50 @@ export function getDefs( node, autoCreate = true ) {
  *
  * @return Void
  */
-function exposeAPIs( config ) {
+function exposeAPIs(config) {
     const window = this, { webqit: { oohtml: { configs } } } = window;
     // The "def" & "defs" properties
-    if ( config.api.def in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" prototype already has a "${ config.api.def }" API!` ); }
-    if ( config.api.defs in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" prototype already has a "${ config.api.defs }" API!` ); }
+    if (config.api.def in window.HTMLTemplateElement.prototype) { throw new Error(`The "HTMLTemplateElement" prototype already has a "${config.api.def}" API!`); }
+    if (config.api.defs in window.HTMLTemplateElement.prototype) { throw new Error(`The "HTMLTemplateElement" prototype already has a "${config.api.defs}" API!`); }
     // No-conflict assertions
-    Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.def, { get: function() {
-        return this.getAttribute( config.attr.def );
-    } } );
-    Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.defs, { get: function() {
-        return getDefs( this );
-    } } );
+    Object.defineProperty(window.HTMLTemplateElement.prototype, config.api.def, {
+        get: function () {
+            return this.getAttribute(config.attr.def);
+        }
+    });
+    Object.defineProperty(window.HTMLTemplateElement.prototype, config.api.defs, {
+        get: function () {
+            return getDefs(this);
+        }
+    });
     // The "scoped" property
-    Object.defineProperty( window.HTMLTemplateElement.prototype, 'scoped', {
+    Object.defineProperty(window.HTMLTemplateElement.prototype, 'scoped', {
         configurable: true,
-        get() { return this.hasAttribute( 'scoped' ); },
-        set( value ) { this.toggleAttribute( 'scoped', value ); },
-    } );
+        get() { return this.hasAttribute('scoped'); },
+        set(value) { this.toggleAttribute('scoped', value); },
+    });
     // The Import API
-    [ window.Document.prototype, window.Element.prototype, window.ShadowRoot.prototype ].forEach( prototype => {
+    [window.Document.prototype, window.Element.prototype, window.ShadowRoot.prototype].forEach(prototype => {
         // No-conflict assertions
-        const type = prototype === window.Document.prototype ? 'Document' : ( prototype === window.ShadowRoot.prototype ? 'ShadowRoot' : 'Element' );
-        if ( config.api.import in prototype ) { throw new Error( `The ${ type } prototype already has a "${ config.api.import }" API!` ); }
+        const type = prototype === window.Document.prototype ? 'Document' : (prototype === window.ShadowRoot.prototype ? 'ShadowRoot' : 'Element');
+        if (config.api.import in prototype) { throw new Error(`The ${type} prototype already has a "${config.api.import}" API!`); }
         // Definitions
-        Object.defineProperty( prototype, config.api.import, { value: function( ref, live = false, callback = null ) {
-            return importRequest( this, ...arguments );
-        } });
-    } );
-    function importRequest( context, ref, live = false, callback = null ) {
+        Object.defineProperty(prototype, config.api.import, {
+            value: function (ref, live = false, callback = null) {
+                return importRequest(this, ...arguments);
+            }
+        });
+    });
+    function importRequest(context, ref, live = false, callback = null) {
         let options = {};
-        if ( typeof live === 'function' ) {
+        if (typeof live === 'function') {
             callback = live;
             live = false;
-        } else if ( typeof live === 'object' && live ) {
+        } else if (typeof live === 'object' && live) {
             options = { ...live, ...options };
         } else { options = { live }; }
-        const request = { ...HTMLImportsContext.createRequest( ref ), ...options };
-        return context[ configs.CONTEXT_API.api.contexts ].request( request, callback );
+        const request = { ...HTMLImportsContext.createRequest(ref), ...options };
+        return context[configs.CONTEXT_API.api.contexts].request(request, callback);
     }
 }
 
@@ -108,83 +114,83 @@ function exposeAPIs( config ) {
  *
  * @return Void
  */
-function realtime( config ) {
+function realtime(config) {
     const window = this, { webqit: { Observer, realdom, oohtml: { configs }, HTMLImportElement, HTMLImportsContext } } = window;
-    
+
     // ------------
     // MODULES
     // ------------
     const attachImportsContext = host => {
-        const contextsApi = host[ configs.CONTEXT_API.api.contexts ];
-        if ( !contextsApi.find( HTMLImportsContext.kind ) ) {
-            contextsApi.attach( new HTMLImportsContext );
+        const contextsApi = host[configs.CONTEXT_API.api.contexts];
+        if (!contextsApi.find(HTMLImportsContext.kind)) {
+            contextsApi.attach(new HTMLImportsContext);
         }
     };
     const detachImportsContext = host => {
-        const contextsApi = host[ configs.CONTEXT_API.api.contexts ];
-        const ctx = contextsApi.find( HTMLImportsContext.kind );
-        if ( ctx && ( /* disconnect? */!host.isConnected || /* not inheriting && no localModules? */(
-            !host.matches?.( config.importsContextSelector ) && !Object.keys( ctx.localModules ).length
-        ) ) ) {
-            contextsApi.detach( ctx );
+        const contextsApi = host[configs.CONTEXT_API.api.contexts];
+        const ctx = contextsApi.find(HTMLImportsContext.kind);
+        if (ctx && ( /* disconnect? */!host.isConnected || /* not inheriting && no localModules? */(
+            !host.matches?.(config.importsContextSelector) && !Object.keys(ctx.localModules).length
+        ))) {
+            contextsApi.detach(ctx);
         }
     };
     // ------------
-    realdom.realtime( window.document ).query( [ config.templateSelector, config.importsContextSelector ], record => {
-        record.entrants.forEach( entry => {
-            if ( entry.matches( config.templateSelector ) ) {
-                const htmlModule = HTMLModule.instance( entry );
+    realdom.realtime(window.document).query([config.templateSelector, config.importsContextSelector], record => {
+        record.entrants.forEach(entry => {
+            if (entry.matches(config.templateSelector)) {
+                const htmlModule = HTMLModule.instance(entry);
                 htmlModule.ownerContext = entry.scoped ? entry.parentNode : entry.getRootNode();
-                const ownerContextModulesObj = getDefs( htmlModule.ownerContext );
-                if ( htmlModule.defId ) { Observer.set( ownerContextModulesObj, htmlModule.defId, entry ); }
+                const ownerContextModulesObj = getDefs(htmlModule.ownerContext);
+                if (htmlModule.defId) { Observer.set(ownerContextModulesObj, htmlModule.defId, entry); }
                 // 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 );
+                attachImportsContext(htmlModule.ownerContext);
             } else {
-                attachImportsContext( entry );
+                attachImportsContext(entry);
             }
-        } );
-        record.exits.forEach( entry => {
-            if ( entry.matches( config.templateSelector ) ) {
-                const htmlModule = HTMLModule.instance( entry );
-                const ownerContextModulesObj = getDefs( htmlModule.ownerContext );
-                if ( htmlModule.defId && htmlModule.ownerContext.isConnected ) { Observer.deleteProperty( ownerContextModulesObj, htmlModule.defId ); }
-                detachImportsContext( htmlModule.ownerContext );
+        });
+        record.exits.forEach(entry => {
+            if (entry.matches(config.templateSelector)) {
+                const htmlModule = HTMLModule.instance(entry);
+                const ownerContextModulesObj = getDefs(htmlModule.ownerContext);
+                if (htmlModule.defId && htmlModule.ownerContext.isConnected) { Observer.deleteProperty(ownerContextModulesObj, htmlModule.defId); }
+                detachImportsContext(htmlModule.ownerContext);
             } else {
-                detachImportsContext( entry );
+                detachImportsContext(entry);
             }
-        } );
-    }, { live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true, eventDetails: true } );
-    
+        });
+    }, { live: true, subtree: 'cross-roots', timing: 'sync', staticSensitivity: true, eventDetails: true });
+
     // ------------
     // IMPORTS
     // ------------
-    realdom.realtime( window.document ).query( config.elements.import, record => {
-        record.entrants.forEach( node => handleRealtime( node, true, record ) );
-        record.exits.forEach( node => handleRealtime( node, false, record ) );
-    }, { live: true, subtree: 'cross-roots', timing: 'sync' } );
-    function handleRealtime( entry, connectedState ) {
-        const elInstance = HTMLImportElement.instance( entry );
-        if ( connectedState ) { elInstance[ '#' ].connectedCallback(); }
-        else { elInstance[ '#' ].disconnectedCallback(); }
+    realdom.realtime(window.document).query(config.elements.import, record => {
+        record.entrants.forEach(node => handleRealtime(node, true, record));
+        record.exits.forEach(node => handleRealtime(node, false, record));
+    }, { live: true, subtree: 'cross-roots', timing: 'sync' });
+    function handleRealtime(entry, connectedState) {
+        const elInstance = HTMLImportElement.instance(entry);
+        if (connectedState) { elInstance['#'].connectedCallback(); }
+        else { elInstance['#'].disconnectedCallback(); }
     }
     // Hydration
-    if ( window.webqit.env === 'server' ) return;
-    realdom.realtime( window.document ).query( `(${ config.anchorNodeSelector })`, record => {
-        record.entrants.forEach( anchorNode => {
-            if ( _( anchorNode ).get( 'isAnchorNode' ) ) return; // Doubling up on the early return above! Ignoring every just created anchorNode
-            const reviver = window.document.createElement( 'div' );
+    if (window.webqit.env === 'server') return;
+    realdom.realtime(window.document).query(`(${config.anchorNodeSelector})`, record => {
+        record.entrants.forEach(anchorNode => {
+            if (_(anchorNode).get('isAnchorNode')) return; // Doubling up on the early return above! Ignoring every just created anchorNode
+            const reviver = window.document.createElement('div');
             reviver.innerHTML = anchorNode.nodeValue;
             reviver.innerHTML = reviver.firstChild.textContent;
             const importEl = reviver.firstChild;
-            let nodecount = parseInt( importEl.getAttribute( 'data-nodecount' ) );
+            let nodecount = parseInt(importEl.getAttribute('data-nodecount'));
             const slottedElements = new Set;
             let slottedElement = anchorNode;
-            while ( ( slottedElement = slottedElement.previousElementSibling ) && slottedElement.matches( config.slottedElementsSelector ) && nodecount -- ) {
-                slottedElements.add( slottedElement );
+            while ((slottedElement = slottedElement.previousElementSibling) && slottedElement.matches(config.slottedElementsSelector) && nodecount--) {
+                slottedElements.add(slottedElement);
             }
-            HTMLImportElement.instance( importEl )[ '#' ].hydrate( anchorNode, slottedElements );
-        } );
-    }, { live: true, subtree: 'cross-roots', timing: 'sync' } );
+            HTMLImportElement.instance(importEl)['#'].hydrate(anchorNode, slottedElements);
+        });
+    }, { live: true, subtree: 'cross-roots', timing: 'sync' });
 }

package/test/imports.test.js

@@ -15,7 +15,7 @@ describe(`HTML Imports`, function() {
             <p>Hellort</p>
         </template>`;
         const body = `
-        <import ref="temp0"></import>`;
+        <import ref="temp0#"></import>`;
         const { document } = createDocument( head, body );
 
         it ( `The document object and <template> elements should expose an "import" property`, async function() {
@@ -31,6 +31,7 @@ describe(`HTML Imports`, function() {
             const templateEl = document.querySelector( 'template' );
             let added = document.createElement( 'div' );
             templateEl.content.appendChild( added );
+            console.log('\n\n\n\n', document.body.outerHTML);
             expect( document.body.children ).to.have.length( 3 );
         } );
     } );