@webqit/oohtml 2.1.58 → 2.1.60

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.58",
+  "version": "2.1.60",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,19 +29,19 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/targets.browser.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js html-bindings=src/html-bindings/targets.browser.js html-namespaces=src/html-namespaces/targets.browser.js html-imports=src/html-imports/targets.browser.js scoped-js=src/scoped-js/targets.browser.js scoped-css=src/scoped-css/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
-    "preversion": "npm run build && git add -A dist",
+    "build": "esbuild main=src/targets.browser.js namespaced-html=src/namespaced-html/targets.browser.js scoped-css=src/scoped-css/targets.browser.js scoped-js=src/scoped-js/targets.browser.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js html-imports=src/html-imports/targets.browser.js data-binding=src/data-binding/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
+    "preversion": "npm run test && npm run build && git add -A dist",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
     "@webqit/observer": "^2.2.9",
-    "@webqit/realdom": "^2.1.17",
+    "@webqit/realdom": "^2.1.19",
     "@webqit/stateful-js": "^3.0.27",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {
-    "@webqit/oohtml-ssr": "^1.2.16",
+    "@webqit/oohtml-ssr": "^1.2.19",
     "chai": "^4.3.4",
     "coveralls": "^3.1.1",
     "esbuild": "^0.14.43",

package/src/bindings-api/_HTMLBindingsProvider.js

@@ -9,6 +9,19 @@ export default class _HTMLBindingsProvider extends HTMLContextProvider {
 
     static type = 'bindings';
 
+    /**
+     * @createRequest
+     */
+    static createRequest( fields = {} ) {
+        const request = super.createRequest( fields );
+        if ( request.detail?.startsWith( '@' ) ) {
+            const [ contextName, ...detail ] = request.detail.slice( 1 ).split( '.' ).map( s => s.trim() );
+            request.contextName = contextName;
+            request.detail = detail.join( '.' );
+        }
+        return request;
+    }
+
     /**
      * @matchesRequest
      */

package/src/bindings-api/index.js

@@ -15,9 +15,11 @@ export { Observer }
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'bindings-api', $config, {
-        context: { attr: { contextname: 'contextname' }, },
+        context: { attr: { bindingscontext: 'bindings' }, },
         api: { bind: 'bind', bindings: 'bindings', },
     } );
+    config.CONTEXT_API = window.webqit.oohtml.configs.CONTEXT_API;
+    config.context.attr.contextname = config.CONTEXT_API.attr.contextname; // Inherit this
     window.webqit.HTMLBindingsProvider = class extends _HTMLBindingsProvider {
         static get config() { return config; }
     };
@@ -31,7 +33,8 @@ export default function init( $config = {} ) {
  * The internal bindings object
  * within elements and the document object.
  */
-function getBindingsObject( node ) {
+function getBindingsObject( config, node ) {
+    const window = this;
 	if ( !_( node ).has( 'bindings' ) ) {
 		const bindingsObj = Object.create( null );
 		_( node ).set( 'bindings', bindingsObj );
@@ -41,6 +44,13 @@ function getBindingsObject( node ) {
                     detachBindingsContext.call( this, node, mutation.key );
                 } else { attachBindingsContext.call( this, node, mutation.key ); }
             }
+            const props = Object.keys( bindingsObj );
+            const targetNode = node === window.document ? window.document.documentElement : node;
+            if ( props.length ) {
+                targetNode.setAttribute( config.context.attr.bindingscontext, props.join( ' ') );
+            } else {
+                targetNode.toggleAttribute( config.context.attr.bindingscontext, false );
+            }
         } );
 	}
 	return _( node ).get( 'bindings' );
@@ -61,14 +71,15 @@ function detachBindingsContext( host, key ) {
 /**
  * Exposes Bindings with native APIs.
  *
+ * @param Object            config
  * @param document|Element  target
  * @param Object            bindings
  * @param Object            params
  *
  * @return Void
  */
-function applyBindings( target, bindings, { merge, diff, namespace } = {} ) {
-    const bindingsObj = getBindingsObject.call( this, target );
+function applyBindings( config, target, bindings, { merge, diff, namespace } = {} ) {
+    const bindingsObj = getBindingsObject.call( this, config, target );
     const $params = { diff, namespace };
     const exitingKeys = merge ? [] : Observer.ownKeys( bindingsObj, $params ).filter( key => !( key in bindings ) );
     return Observer.batch( bindingsObj, () => {
@@ -93,15 +104,15 @@ function exposeAPIs( config ) {
     if ( config.api.bindings in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.bindings }" property!` ); }
     // Definitions
     Object.defineProperty( window.document, config.api.bind, { value: function( bindings, config = {} ) {
-        return applyBindings.call( window, window.document, bindings, config );
+        return applyBindings.call( window, config, window.document, bindings );
     } });
     Object.defineProperty( window.document, config.api.bindings, { get: function() {
-        return Observer.proxy( getBindingsObject.call( window, window.document ) );
+        return Observer.proxy( getBindingsObject.call( window, config, window.document ) );
     } });
     Object.defineProperty( window.Element.prototype, config.api.bind, { value: function( bindings, config = {} ) {
-        return applyBindings.call( window, this, bindings, config );
+        return applyBindings.call( window, config, this, bindings );
     } });
     Object.defineProperty( window.Element.prototype, config.api.bindings, { get: function() {
-        return Observer.proxy( getBindingsObject.call( window, this ) );
+        return Observer.proxy( getBindingsObject.call( window, config, this ) );
     } } );
 }

package/src/context-api/index.js

@@ -23,6 +23,7 @@ export {
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'context-api', $config, {
+        attr: { contextname: 'contextname', },
         api: { context: 'context', },
     } );
     window.webqit.HTMLContextProvider = HTMLContextProvider;

package/src/{html-bindings → data-binding}/index.js

@@ -3,7 +3,6 @@
  * @imports
  */
 import Observer from '@webqit/observer';
-import { HTMLContext } from '../context-api/index.js';
 import _HTMLBindingsProvider from '../bindings-api/_HTMLBindingsProvider.js';
 import { StatefulAsyncFunction } from '@webqit/stateful-js/async';
 import { _, _init } from '../util.js';
@@ -17,22 +16,21 @@ import { _, _init } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'html-bindings', $config, {
-        attr: { bind: 'bind', itemIndex: 'data-index' },
+        attr: { binding: 'binding', itemIndex: 'data-index' },
         tokens: { nodeType: 'processing-instruction', tagStart: '?{', tagEnd: '}?', stateStart: '; [=', stateEnd: ']' },
         staticsensitivity: true,
         isomorphic: true,
     } );
-    config.api = {
-        bind: window.webqit.oohtml.configs.BINDINGS_API.api.bind,
-        import: window.webqit.oohtml.configs.HTML_IMPORTS.context.api.import,
-    };
-    config.attrSelector = `[${ window.CSS.escape( config.attr.bind ) }]`;
-    const braceletMatch = ( start, end ) => {
+    config.CONTEXT_API = window.webqit.oohtml.configs.CONTEXT_API;
+    config.BINDINGS_API = window.webqit.oohtml.configs.BINDINGS_API;
+    config.HTML_IMPORTS = window.webqit.oohtml.configs.HTML_IMPORTS;
+    config.attrSelector = `[${ window.CSS.escape( config.attr.binding ) }]`;
+    const discreteBindingsMatch = ( start, end ) => {
         const starting = `starts-with(., "${ start }")`;
         const ending = `substring(., string-length(.) - string-length("${ end }") + 1) = "${ end }"`;
         return `${ starting } and ${ ending }`;
     }
-    config.braceletSelector = `comment()[${ braceletMatch( config.tokens.tagStart, config.tokens.tagEnd ) }]`;
+    config.discreteBindingsSelector = `comment()[${ discreteBindingsMatch( config.tokens.tagStart, config.tokens.tagEnd ) }]`;
     window.webqit.Observer = Observer;
     realtime.call( window, config );
 }
@@ -47,27 +45,27 @@ export default function init( $config = {} ) {
 function realtime( config ) {
     const window = this, { realdom } = window.webqit;
 	// ----------------
-    realdom.realtime( window.document ).subtree( `(${ config.braceletSelector })`, record => {
+    realdom.realtime( window.document ).subtree( `(${ config.discreteBindingsSelector })`, record => {
         cleanup.call( this, ...record.exits );  
-        mountBracelets.call( this, config, ...record.entrants );  
+        mountDiscreteBindings.call( this, config, ...record.entrants );  
     }, { live: true } );
     realdom.realtime( window.document ).subtree( config.attrSelector, record => {
         cleanup.call( this, ...record.exits );  
-        mountInlineSubscript.call( this, config, ...record.entrants );  
+        mountInlineBindings.call( this, config, ...record.entrants );  
     }, { live: true, timing: 'sync', staticSensitivity: config.staticsensitivity } );
 }
 
-function createDynamicScope( root ) {
-    if ( _( root ).has( 'subscripts' ) ) return _( root ).get( 'subscripts' );
+function createDynamicScope( config, root ) {
+    if ( _( root ).has( 'data-binding' ) ) return _( root ).get( 'data-binding' );
     const scope = {}, abortController = new AbortController;
-    scope.$set = function( node, prop, val ) {
+    scope.$set__ = function( node, prop, val ) {
         node && ( node[ prop ] = val );
     }
     Observer.intercept( scope, {
         get: ( e, recieved, next ) => {
             if ( !( e.key in scope ) ) {
                 const request = _HTMLBindingsProvider.createRequest( { detail: e.key, live: true, signal: abortController.signal } );
-                HTMLContext.instance( root ).request( request, value => {
+                root[ config.CONTEXT_API.api.context ].request( request, value => {
                     Observer.set( scope, e.key, value );
                 } );
             }
@@ -75,27 +73,27 @@ function createDynamicScope( root ) {
         },
         has: ( e, recieved, next ) => { return next( true ); }
     } );
-    const instance = { scope, abortController, subscripts: new Map };
-    _( root ).set( 'subscripts', instance );
+    const instance = { scope, abortController, bindings: new Map };
+    _( root ).set( 'data-binding', instance );
     return instance;
 }
 
 function cleanup( ...entries ) {
     for ( const node of entries ) {
         const root = node.nodeName  === '#text' ? node.parentNode : node;
-        const { subscripts, abortController } = _( root ).get( 'subscripts' ) || {};
-        if ( !subscripts?.has( node ) ) return;
-        subscripts.get( node ).state.dispose();
-        subscripts.get( node ).signals.forEach( s => s.abort() );
-        subscripts.delete( node );
-        if ( !subscripts.size ) {
+        const { bindings, abortController } = _( root ).get( 'data-binding' ) || {};
+        if ( !bindings?.has( node ) ) return;
+        bindings.get( node ).state.dispose();
+        bindings.get( node ).signals.forEach( s => s.abort() );
+        bindings.delete( node );
+        if ( !bindings.size ) {
             abortController.abort();
-            _( root ).delete( 'subscripts' );
+            _( root ).delete( 'data-binding' );
         }
     }
 }
 
-async function mountBracelets( config, ...entries ) {
+async function mountDiscreteBindings( config, ...entries ) {
     const window = this;
     const patternMatch = str => {
         const tagStart = config.tokens.tagStart.split( '' ).map( x => `\\${ x }` ).join( '' );
@@ -108,44 +106,45 @@ async function mountBracelets( config, ...entries ) {
     };
 
     const instances = entries.reduce( ( instances, node ) => {
-        if ( node.isBracelet ) return instances;
+        if ( node.isBound ) return instances;
         const template = patternMatch( node.nodeValue );
         let textNode = node;
         if ( template.span ) {
             textNode = node.nextSibling;
             if ( textNode?.nodeName !== '#text' || textNode.nodeValue.length < template.span ) return instances;
             if ( textNode.nodeValue.length > template.span ) { textNode.splitText( template.span ); }
-        } else if ( node.nextSibling ) {
-            textNode = node.parentNode.insertBefore( node.ownerDocument.createTextNode( '' ), node.nextSibling );
-        } else { textNode = node.parentNode.appendChild( node.ownerDocument.createTextNode( '' ) ); }
-        textNode.isBracelet = true;
-        let stateNode = node;
+        } else {
+            textNode = node.ownerDocument.createTextNode( '' );
+            node.after( textNode );
+        }
+        textNode.isBound = true;
+        let anchorNode = node;
         if ( window.webqit.env !== 'server' ) {
-            stateNode.remove();
-            stateNode = null;
+            anchorNode.remove();
+            anchorNode = null;
         }
-        return instances.concat( { textNode, template, stateNode } );
+        return instances.concat( { textNode, template, anchorNode } );
     }, [] );
 
-    for ( const { textNode, template, stateNode } of instances ) {
-        const { scope: env, subscripts } = createDynamicScope( textNode.parentNode );
+    for ( const { textNode, template, anchorNode } of instances ) {
+        const { scope: env, bindings } = createDynamicScope( config, textNode.parentNode );
         let source = '';
         source += `let content = ((${ template.expr }) ?? '') + '';`;
-        source += `$set(this, 'nodeValue', content);`;
-        if ( stateNode ) { source += `$set($stateNode__, 'nodeValue', \`${ config.tokens.tagStart }${ template.expr }${ config.tokens.stateStart }\` + content.length + \`${ config.tokens.stateEnd } ${ config.tokens.tagEnd }\`);`; }
-        const compiled = new StatefulAsyncFunction( '$signals__', `$stateNode__`, source, { env } );
+        source += `$set__(this, 'nodeValue', content);`;
+        if ( anchorNode ) { source += `$set__($anchorNode__, 'nodeValue', \`${ config.tokens.tagStart }${ template.expr }${ config.tokens.stateStart }\` + content.length + \`${ config.tokens.stateEnd } ${ config.tokens.tagEnd }\`);`; }
+        const compiled = new StatefulAsyncFunction( '$signals__', `$anchorNode__`, source, { env } );
         const signals = [];
-        subscripts.set( textNode, { compiled, signals, state: await compiled.call( textNode, signals, stateNode ), } );
+        bindings.set( textNode, { compiled, signals, state: await compiled.call( textNode, signals, anchorNode ), } );
     }
 }
 
-async function mountInlineSubscript( config, ...entries ) {
+async function mountInlineBindings( config, ...entries ) {
     for ( const node of entries ) {
-        const source = parseInlineBindings( config, node.getAttribute( config.attr.bind ) );
-        const { scope: env, subscripts } = createDynamicScope( node );
+        const source = parseInlineBindings( config, node.getAttribute( config.attr.binding ) );
+        const { scope: env, bindings } = createDynamicScope( config, node );
         const compiled = new StatefulAsyncFunction( '$signals__', source, { env } );
         const signals = [];
-        subscripts.set( node, { compiled, signals, state: await compiled.call( node, signals ), } );
+        bindings.set( node, { compiled, signals, state: await compiled.call( node, signals ), } );
     }
 }
 
@@ -159,17 +158,18 @@ function parseInlineBindings( config, str ) {
         const $expr = `(${ right })`, $$expr = `(${ $expr } ?? '')`;
         if ( token === '&' ) return `this.style[\`${ param }\`] = ${ $$expr };`;
         if ( token === '%' ) return `this.classList.toggle(\`${ param }\`, !!${ $expr });`;
-        if ( token === '@' ) {
+        if ( token === '~' ) {
             if ( param.endsWith( '?' ) ) return `this.toggleAttribute(\`${ param.substring( 0, -1 ).trim() }\`, !!${ $expr });`;
             return `this.setAttribute(\`${ param }\`, ${ $$expr });`;
         }
-        if ( token === '~' ) {
+        if ( token === '@' ) {
             if ( validation[ param ] ) throw new Error( `Duplicate binding: ${ left }.` );
             validation[ param ] = true;
-            if ( param === 'text' ) return `$set(this, 'textContent', ${ $$expr });`;
+            if ( param === 'text' ) return `$set__(this, 'textContent', ${ $$expr });`;
             if ( param === 'html' ) return `this.setHTML(${ $$expr });`;
             if ( param === 'items' ) {
                 const [ iterationSpec, importSpec ] = splitOuter( right, '/' );
+                if ( !importSpec ) throw new Error( `Invalid ${ token }items spec: ${ str }; no import specifier.` );
                 let [ raw, production, kind, iteratee ] = iterationSpec.trim().match( /(.*?[\)\s+])(of|in)([\(\{\[\s+].*)/i ) || [];
                 if ( !raw ) throw new Error( `Invalid ${ token }items spec: ${ str }.` );
                 if ( production.startsWith( '(' ) ) {
@@ -179,7 +179,7 @@ function parseInlineBindings( config, str ) {
                 const indices = kind === 'in' ? production[ 2 ] : ( production[ 1 ] || '$index__' );
                 return `
                 let $iteratee__ = ${ iteratee };
-                let $import__ = this.${ config.api.import }( ${ importSpec.trim() }, true );
+                let $import__ = this.${ config.HTML_IMPORTS.context.api.import }( ${ importSpec.trim() }, true );
                 $signals__.push( $import__ );
 
                 if ( $import__.value && $iteratee__ ) {
@@ -198,12 +198,12 @@ function parseInlineBindings( config, str ) {
                         if ( $itemNode__ ) {
                             $existing__.delete( $key___ );
                         } else {
-                            $itemNode__ = ( Array.isArray( $import__.value ) ? $import__.value[ 0 ] : ( $import__.value.content ? $import__.value.content.firstElementChild : $import__.value ) ).cloneNode( true );
+                            $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__ );
                         }
-                        
-                        $itemNode__.${ config.api.bind }( $itemBinding__ );
+
+                        $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() );

package/src/html-imports/_HTMLImportElement copy.js

@@ -0,0 +1,217 @@
+
+/**
+ * @imports
+ */
+import _HTMLImportsContext from './_HTMLImportsProvider.js';
+import { _ } from '../util.js';
+
+/**
+ * Creates the HTMLImportElement class.
+ * 
+ * @param Object config 
+ * 
+ * @return HTMLImportElement
+ */
+export default function( config ) {
+    const window = this, { realdom } = window.webqit;
+    const BaseElement = config.import.tagName.includes( '-' ) ? window.HTMLElement : class {};
+    class HTMLImportElement extends BaseElement {
+        
+        /**
+         * @instance
+         * 
+         * @param HTMLElement node
+         * 
+         * @returns 
+         */
+        static instance( node ) {
+            if ( config.import.tagName.includes( '-' ) && ( node instanceof this ) )  return node;
+            return _( node ).get( 'import::instance' ) || new this( node );
+        }
+
+        /**
+         * @constructor
+         */
+        constructor( ...args ) {
+            super();
+            // --------
+            const el = args[ 0 ] || this;
+            _( el ).set( 'import::instance', this );
+            Object.defineProperty( this, 'el', { get: () => el, configurable: false } );
+
+            const priv = {};
+            Object.defineProperty( this, '#', { get: () => priv, configurable: false } );
+            priv.slottedElements = new Set;
+
+            priv.setAnchorNode = anchorNode => {
+                priv.anchorNode = anchorNode;
+                _( anchorNode ).set( 'anchoredNode@imports', this.el );
+            };
+
+            priv.importRequest = ( callback, signal = null ) => {
+                const request = _HTMLImportsContext.createRequest( { detail: priv.moduleRef && !priv.moduleRef.includes( '#' ) ? priv.moduleRef + '#' : priv.moduleRef, live: signal && true, signal } );
+                ( this.el.isConnected ? this.el.parentNode : priv.anchorNode.parentNode )[ config.CONTEXT_API.api.context ].request( request, response => {
+                    callback( ( response instanceof window.HTMLTemplateElement ? [ ...response.content.children ] : (
+                        Array.isArray( response ) ? response : response && [ response ]
+                    ) ) || [] );
+                } );
+            };
+
+            priv.hydrate = ( anchorNode, slottedElements ) => {
+                // ----------------
+                priv.moduleRef = ( this.el.getAttribute( config.import.attr.moduleref ) || '' ).trim();
+                priv.setAnchorNode( anchorNode );
+                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 ); }
+                    const identifiersMap = fragments.map( fragment => ( { el: fragment, fragmentDef: fragment.getAttribute( config.template.attr.fragmentdef ) || '', tagName: fragment.tagName, } ) );
+                    slottedElements.forEach( slottedElement => {
+                        const tagName = slottedElement.tagName, fragmentDef = slottedElement.getAttribute( config.template.attr.fragmentdef ) || '';
+                        const originalsMatch = identifiersMap.filter( fragmentIdentifiers => tagName === fragmentIdentifiers.tagName && fragmentDef === fragmentIdentifiers.fragmentDef );
+                        if ( originalsMatch.length !== 1 ) return;
+                        _( slottedElement ).set( 'original@imports', originalsMatch[ 0 ].el );
+                    } );
+                    priv.originalsRemapped = true;
+                }, priv.hydrationImportRequest.signal );
+            };
+
+            priv.autoRestore = ( callback = null ) => {
+                priv.autoRestoreRealtime?.disconnect();
+                if ( callback ) callback();
+                if ( !priv.slottedElements.size ) {
+                    priv.anchorNode.replaceWith( this.el );
+                    return;
+                }
+                const autoRestoreRealtime = realdom.realtime( window.document ).observe( [ ...priv.slottedElements ], record => {
+                    record.exits.forEach( outgoingNode => {
+                        _( outgoingNode ).delete( 'slot@imports' );
+                        priv.slottedElements.delete( outgoingNode );
+                    } );
+                    if ( !priv.slottedElements.size ) {
+                        autoRestoreRealtime.disconnect();
+                        // At this point, ignore if this is a removal involving the whole parent node
+                        if ( !record.target.isConnected ) return;
+                        priv.anchorNode.replaceWith( this.el );
+                    }
+                }, { subtree: true, timing: 'sync', generation: 'exits' } );
+                priv.autoRestoreRealtime = autoRestoreRealtime;
+            };
+
+            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.anchorNode ) { priv.setAnchorNode( this.createAnchorNode() ); }
+                if ( priv.moduleRefRealtime ) return;
+                priv.moduleRefRealtime = realdom.realtime( this.el ).attr( config.import.attr.moduleref, ( 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;
+            };
+
+            priv.disconnectedCallback = () => {
+                priv.hydrationImportRequest?.abort();
+                priv.hydrationImportRequest = null;
+                if ( priv.anchorNode.isConnected ) return;
+                priv.moduleRefRealtime?.disconnect();
+                priv.moduleRefRealtime = null;
+            };
+        }
+
+        /**
+         * Creates the slot's anchor node.
+         *
+         * @return Element
+         */
+        createAnchorNode() {
+            if ( !config.isomorphic ) { return window.document.createTextNode( '' ) }
+            return window.document.createComment( this.el.outerHTML );
+        }
+
+        /**
+         * Fills the slot with slottableElements
+         *
+         * @param Iterable  slottableElements
+         *
+         * @return void
+         */
+        fill( slottableElements ) {
+            if ( Array.isArray( slottableElements ) ) { slottableElements = new Set( slottableElements ) }
+            this[ '#' ].autoRestore( () => {              
+                this[ '#' ].slottedElements.forEach( slottedElement => {
+                    const slottedElementOriginal = _( slottedElement ).get( 'original@imports' );
+                    // If still available in source, simply leave unchanged
+                    // otherwise remove it from slot... to reflect this change
+                    if ( slottableElements.has( slottedElementOriginal ) ) {
+                        slottableElements.delete( slottedElementOriginal );
+                    } else {
+                        this[ '#' ].slottedElements.delete( slottedElement );
+                        // This removal will not be caught
+                        slottedElement.remove();
+                    }
+                } );
+                // Make sure anchor node is what's in place...
+                // not the import element itslef - but all only when we have slottableElements.size
+                if ( this.el.isConnected && slottableElements.size ) {
+                    this.el.replaceWith( this[ '#' ].anchorNode );
+                }
+                // Insert slottables now
+                slottableElements.forEach( slottableElement => {
+                    // 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( config.template.attr.fragmentdef ) ) {
+                        slottableElementClone.toggleAttribute( config.template.attr.fragmentdef, true );
+                    }
+                    _( slottableElementClone ).set( 'original@imports', slottableElement );
+                    _( slottableElementClone ).set( 'slot@imports', this.el );
+                    this[ '#' ].slottedElements.add( slottableElementClone );
+                    this[ '#' ].anchorNode.before( slottableElementClone );
+                } );
+            } );
+        }
+
+        /**
+         * Empty slot.
+         *
+         * @return void
+         */
+        empty() { this[ '#' ].slottedElements.forEach( slottedElement => slottedElement.remove() ); }
+
+        /**
+         * Returns the slot's anchorNode.
+         *
+         * @return array
+         */
+        get anchorNode() { return this[ '#' ].anchorNode; }
+
+        /**
+         * Returns the slot's module reference, if any.
+         *
+         * @return string
+         */
+        get moduleRef() { return this[ '#' ].moduleRef; }
+
+        /**
+         * Returns the slot's slotted elements.
+         *
+         * @return array
+         */
+        get slottedElements() { return this[ '#' ].slottedElements; }
+    }
+    if ( config.import.tagName.includes( '-' ) ) {
+        customElements.define( config.import.tagName, HTMLImportElement );
+    }
+    return HTMLImportElement;
+}