@webqit/oohtml 2.1.57 → 2.1.59

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.57",
+  "version": "2.1.59",
   "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-bracelets=src/html-bracelets/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",
+    "build": "esbuild main=src/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 html-bindings=src/html-bindings/targets.browser.js html-namespaces=src/html-namespaces/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",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
     "@webqit/observer": "^2.2.9",
-    "@webqit/realdom": "^2.1.17",
-    "@webqit/stateful-js": "file:../stateful-js",
+    "@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.17",
     "chai": "^4.3.4",
     "coveralls": "^3.1.1",
     "esbuild": "^0.14.43",

package/src/html-bindings/index.js

@@ -0,0 +1,233 @@
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import _HTMLBindingsProvider from '../bindings-api/_HTMLBindingsProvider.js';
+import { StatefulAsyncFunction } from '@webqit/stateful-js/async';
+import { _, _init } from '../util.js';
+
+/**
+ * Initializes DOM Parts.
+ * 
+ * @param $config  Object
+ *
+ * @return Void
+ */
+export default function init( $config = {} ) {
+    const { config, window } = _init.call( this, 'html-bindings', $config, {
+        attr: { bindings: 'bindings', itemIndex: 'data-index' },
+        tokens: { nodeType: 'processing-instruction', tagStart: '?{', tagEnd: '}?', stateStart: '; [=', stateEnd: ']' },
+        staticsensitivity: true,
+        isomorphic: true,
+    } );
+    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.bindings ) }]`;
+    const discreteBindingsMatch = ( start, end ) => {
+        const starting = `starts-with(., "${ start }")`;
+        const ending = `substring(., string-length(.) - string-length("${ end }") + 1) = "${ end }"`;
+        return `${ starting } and ${ ending }`;
+    }
+    config.discreteBindingsSelector = `comment()[${ discreteBindingsMatch( config.tokens.tagStart, config.tokens.tagEnd ) }]`;
+    window.webqit.Observer = Observer;
+    realtime.call( window, config );
+}
+
+/**
+ * Performs realtime capture of elements and their attributes
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function realtime( config ) {
+    const window = this, { realdom } = window.webqit;
+	// ----------------
+    realdom.realtime( window.document ).subtree( `(${ config.discreteBindingsSelector })`, record => {
+        cleanup.call( this, ...record.exits );  
+        mountDiscreteBindings.call( this, config, ...record.entrants );  
+    }, { live: true } );
+    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 } );
+}
+
+function createDynamicScope( config, root ) {
+    if ( _( root ).has( 'htBindings' ) ) return _( root ).get( 'htBindings' );
+    const scope = {}, abortController = new AbortController;
+    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 } );
+                root[ config.CONTEXT_API.api.context ].request( request, value => {
+                    Observer.set( scope, e.key, value );
+                } );
+            }
+            return next( scope[ e.key ] ?? ( e.key in globalThis ? globalThis[ e.key ] : undefined ) );
+        },
+        has: ( e, recieved, next ) => { return next( true ); }
+    } );
+    const instance = { scope, abortController, htBindings: new Map };
+    _( root ).set( 'htBindings', instance );
+    return instance;
+}
+
+function cleanup( ...entries ) {
+    for ( const node of entries ) {
+        const root = node.nodeName  === '#text' ? node.parentNode : node;
+        const { htBindings, abortController } = _( root ).get( 'htBindings' ) || {};
+        if ( !htBindings?.has( node ) ) return;
+        htBindings.get( node ).state.dispose();
+        htBindings.get( node ).signals.forEach( s => s.abort() );
+        htBindings.delete( node );
+        if ( !htBindings.size ) {
+            abortController.abort();
+            _( root ).delete( 'htBindings' );
+        }
+    }
+}
+
+async function mountDiscreteBindings( config, ...entries ) {
+    const window = this;
+    const patternMatch = str => {
+        const tagStart = config.tokens.tagStart.split( '' ).map( x => `\\${ x }` ).join( '' );
+        const tagEnd = config.tokens.tagEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
+        const stateStart = config.tokens.stateStart.split( '' ).map( x => x === ' ' ? `(?:\\s+)?` : `\\${ x }` ).join( '' );
+        const stateEnd = config.tokens.stateEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
+        const pattern = `^${ tagStart }(.*?)(?:${ stateStart }(\\d+)${ stateEnd }(?:\\s+)?)?${ tagEnd }$`;
+        const [ /*raw*/, expr, span ] = str.match( new RegExp( pattern ) );
+        return { raw: str, expr, span: parseInt( span ?? 0 ) };
+    };
+
+    const instances = entries.reduce( ( instances, node ) => {
+        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 {
+            textNode = node.ownerDocument.createTextNode( '' );
+            node.after( textNode );
+        }
+        textNode.isBound = true;
+        let anchorNode = node;
+        if ( window.webqit.env !== 'server' ) {
+            anchorNode.remove();
+            anchorNode = null;
+        }
+        return instances.concat( { textNode, template, anchorNode } );
+    }, [] );
+
+    for ( const { textNode, template, anchorNode } of instances ) {
+        const { scope: env, htBindings } = createDynamicScope( config, textNode.parentNode );
+        let source = '';
+        source += `let content = ((${ template.expr }) ?? '') + '';`;
+        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 = [];
+        htBindings.set( textNode, { compiled, signals, state: await compiled.call( textNode, signals, anchorNode ), } );
+    }
+}
+
+async function mountInlineBindings( config, ...entries ) {
+    for ( const node of entries ) {
+        const source = parseInlineBindings( config, node.getAttribute( config.attr.bindings ) );
+        const { scope: env, htBindings } = createDynamicScope( config, node );
+        const compiled = new StatefulAsyncFunction( '$signals__', source, { env } );
+        const signals = [];
+        htBindings.set( node, { compiled, signals, state: await compiled.call( node, signals ), } );
+    }
+}
+
+const parseCache = new Map;
+function parseInlineBindings( config, str ) {
+    if ( parseCache.has( str ) ) return parseCache.get( str );
+    const validation = {};
+    const source = splitOuter( str, ';' ).map( str => {
+        const [ left, right ] = splitOuter( str, ':' ).map( x => x.trim() );
+        const token = left[ 0 ], param = left.slice( 1 ).trim();
+        const $expr = `(${ right })`, $$expr = `(${ $expr } ?? '')`;
+        if ( token === '&' ) return `this.style[\`${ param }\`] = ${ $$expr };`;
+        if ( token === '%' ) return `this.classList.toggle(\`${ param }\`, !!${ $expr });`;
+        if ( token === '~' ) {
+            if ( param.endsWith( '?' ) ) return `this.toggleAttribute(\`${ param.substring( 0, -1 ).trim() }\`, !!${ $expr });`;
+            return `this.setAttribute(\`${ param }\`, ${ $$expr });`;
+        }
+        if ( token === '@' ) {
+            if ( validation[ param ] ) throw new Error( `Duplicate binding: ${ left }.` );
+            validation[ param ] = true;
+            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( '(' ) ) {
+                    production = production.trim().slice( 1, -1 ).split( ',' ).map( x => x.trim() );
+                } else { production = [ production ]; }
+                if ( production.length > ( kind === 'in' ? 3 : 2 ) ) throw new Error( `Invalid ${ token }items spec: ${ 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 );
+                $signals__.push( $import__ );
+
+                if ( $import__.value && $iteratee__ ) {
+                    let $existing__ = new Map;
+                    this.querySelectorAll( '[${ config.attr.itemIndex }]' ).forEach( x => {
+                        $existing__.set( x.getAttribute( '${ config.attr.itemIndex }' ), x );
+                    } );
+                    ${ indices ? `let ${ indices } = -1;` : '' }
+                    for ( let ${ production[ 0 ] } ${ kind } $iteratee__ ) {
+                        ${ indices ? `${ indices } ++;` : '' }
+                        ${ kind === 'in' && production[ 1 ] ? `let ${ production[ 1 ] } = $iteratee__[ ${ production[ 0 ] } ];` : '' }
+                        const $itemBinding__ = { ${ production.join( ', ' ) } };
+                        
+                        const $key___ = ( ${ kind === 'in' ? production[ 0 ] : indices } ) + '';
+                        let $itemNode__ = $existing__.get( $key___ );
+                        if ( $itemNode__ ) {
+                            $existing__.delete( $key___ );
+                        } 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__ );
+                        }
+
+                        $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() );
+                    $existing__.clear();
+                }`;
+            }
+        }
+        if ( str.trim() ) throw new Error( `Invalid binding: ${ str }.` );
+    } ).join( `\n` );
+    parseCache.set( str, source );
+    return source;
+}
+
+export function splitOuter( str, delim ) {
+    return [ ...str ].reduce( ( [ quote, depth, splits, skip ], x ) => {
+        if ( !quote && depth === 0 && ( Array.isArray( delim ) ? delim : [ delim ] ).includes( x ) ) {
+            return [ quote, depth, [ '' ].concat( splits ) ];
+        }
+        if ( !quote && [ '(', '[', '{' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth++;
+        if ( !quote && [ ')', ']', '}' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth--;
+        if ( [ '"', "'", '`' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) {
+            quote = quote === x ? null : ( quote || x );
+        }
+        splits[ 0 ] += x;
+        return [ quote, depth, splits ]
+    }, [ null, 0, [ '' ] ] )[ 2 ].reverse();
+}

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;
+}

package/src/html-imports/_HTMLImportElement.js

@@ -2,7 +2,6 @@
 /**
  * @imports
  */
-import { HTMLContext } from '../context-api/index.js';
 import _HTMLImportsContext from './_HTMLImportsProvider.js';
 import { _ } from '../util.js';
 
@@ -46,12 +45,12 @@ export default function( config ) {
 
             priv.setAnchorNode = anchorNode => {
                 priv.anchorNode = anchorNode;
-                _( anchorNode ).set( 'anchoredNode@imports', this.el );
+                return anchorNode;
             };
 
             priv.importRequest = ( callback, signal = null ) => {
                 const request = _HTMLImportsContext.createRequest( { detail: priv.moduleRef && !priv.moduleRef.includes( '#' ) ? priv.moduleRef + '#' : priv.moduleRef, live: signal && true, signal } );
-                HTMLContext.instance( this.el.isConnected ? this.el.parentNode : priv.anchorNode.parentNode ).request( request, response => {
+                ( 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 ]
                     ) ) || [] );
@@ -61,7 +60,7 @@ export default function( config ) {
             priv.hydrate = ( anchorNode, slottedElements ) => {
                 // ----------------
                 priv.moduleRef = ( this.el.getAttribute( config.import.attr.moduleref ) || '' ).trim();
-                priv.setAnchorNode( anchorNode );
+                anchorNode.replaceWith( priv.setAnchorNode( this.createAnchorNode() ) );
                 priv.autoRestore( () => {
                     slottedElements.forEach( slottedElement => {
                         priv.slottedElements.add( slottedElement );
@@ -72,12 +71,13 @@ export default function( config ) {
                 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, } ) );
+                    const identifiersMap = fragments.map( ( fragment, i ) => ( { el: fragment, fragmentDef: fragment.getAttribute( config.template.attr.fragmentdef ) || '', tagName: fragment.tagName, i } ) );
+                    let i = -1;
                     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 );
+                        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 );
                     } );
                     priv.originalsRemapped = true;
                 }, priv.hydrationImportRequest.signal );
@@ -86,10 +86,12 @@ export default function( config ) {
             priv.autoRestore = ( callback = null ) => {
                 priv.autoRestoreRealtime?.disconnect();
                 if ( callback ) callback();
-                if ( !priv.slottedElements.size ) {
+                const restore = () => {
                     priv.anchorNode.replaceWith( this.el );
-                    return;
-                }
+                    priv.anchorNode = null;
+                    this.el.setAttribute( 'data-nodecount', 0 );
+                };
+                if ( !priv.slottedElements.size ) return restore();
                 const autoRestoreRealtime = realdom.realtime( window.document ).observe( [ ...priv.slottedElements ], record => {
                     record.exits.forEach( outgoingNode => {
                         _( outgoingNode ).delete( 'slot@imports' );
@@ -99,7 +101,7 @@ export default function( config ) {
                         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 );
+                        restore();
                     }
                 }, { subtree: true, timing: 'sync', generation: 'exits' } );
                 priv.autoRestoreRealtime = autoRestoreRealtime;
@@ -109,7 +111,6 @@ export default function( config ) {
                 // 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;
@@ -136,8 +137,12 @@ export default function( config ) {
          * @return Element
          */
         createAnchorNode() {
-            if ( !config.isomorphic ) { return window.document.createTextNode( '' ) }
-            return window.document.createComment( this.el.outerHTML );
+            if ( window.webqit.env !== 'server' ) { return window.document.createTextNode( '' ) }
+            const escapeElement = window.document.createElement( 'div' );
+            escapeElement.textContent = this.el.outerHTML;
+            const anchorNode = window.document.createComment( escapeElement.innerHTML );
+            _( anchorNode ).set( 'isAnchorNode', true );
+            return anchorNode;
         }
 
         /**
@@ -149,6 +154,8 @@ export default function( config ) {
          */
         fill( slottableElements ) {
             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 );
             this[ '#' ].autoRestore( () => {              
                 this[ '#' ].slottedElements.forEach( slottedElement => {
                     const slottedElementOriginal = _( slottedElement ).get( 'original@imports' );
@@ -164,8 +171,10 @@ export default function( config ) {
                 } );
                 // 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 );
+                if ( slottableElements.size ) {
+                    const currentAnchorNode = this[ '#' ].anchorNode;
+                    const anchorNode = this[ '#' ].setAnchorNode( this.createAnchorNode() );
+                    ( this.el.isConnected ? this.el : currentAnchorNode ).replaceWith( anchorNode );
                 }
                 // Insert slottables now
                 slottableElements.forEach( slottableElement => {

package/src/html-imports/_HTMLImportsProvider.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import Observer from '@webqit/observer';
-import { HTMLContext, HTMLContextProvider } from '../context-api/index.js';
+import { HTMLContextProvider } from '../context-api/index.js';
 import { getModulesObject } from './index.js';
 import { _ } from '../util.js';
 
@@ -87,7 +87,7 @@ export default class _HTMLImportsProvider extends HTMLContextProvider {
             }
             // 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.host[ $config.CONTEXT_API.api.context ].request( request, response => {
                 this.contextModules = !( response && Object.getPrototypeOf( response ) ) ? response : getModulesObject( response );
                 update();
             } );