@webqit/oohtml 1.9.4 → 1.9.7

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "1.9.4",
+  "version": "1.9.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@webqit/browser-pie": "^0.0.17",
     "@webqit/observer": "^1.7.5",
-    "@webqit/subscript": "^2.0.10",
+    "@webqit/subscript": "^2.0.14",
     "@webqit/util": "^0.8.7",
     "acorn": "^8.7.0"
   },

package/src/html-imports/index.js

@@ -18,7 +18,7 @@ import { config, scopeQuery,
 
 /**
  * @init
- * 
+ *  
  * @param Object config
  */
 export default function init(_config = null, onDomReady = false) {
@@ -54,6 +54,7 @@ export default function init(_config = null, onDomReady = false) {
     // Capture slot elements
     // ----------------------
 
+    let prev;
     const Import = class/* extends window.HTMLElement*/ {
 
         /*
@@ -67,10 +68,11 @@ export default function init(_config = null, onDomReady = false) {
         */
 
         static create(el) {
-            return new Import(el);
+            return _internals(this.el, 'oohtml').get('instance') || new Import(el);
         }
         constructor(importEl) {
             this.el = importEl;
+            _internals(this.el, 'oohtml').set('instance', this);
             const [ importID, modifiers ] = parseScopeReferenceExpr(importEl.getAttribute(_meta.get('attr.importid')) || 'default');
             _internals(this.el, 'oohtml').set('importID', importID);
             _internals(this.el, 'oohtml').set('importModifiers', modifiers);
@@ -413,33 +415,35 @@ export default function init(_config = null, onDomReady = false) {
     const hydrateSlots = () => {
         _arrFrom(document.querySelectorAll(exportgroupSelector)).forEach(_export => {
             // Scan
-            if (!_internals(_export.parentNode, 'oohtml').get('importsCan')) {
-                var slottedElements = [];
-                _export.parentNode.childNodes.forEach(node => {
-                    var nodeValue;
-                    if (node.nodeType === 1/** ELEMENT_NODE */ && node.matches(exportgroupSelector)) {
-                        slottedElements.push(node);
-                    } else if (node.nodeType === 8/** COMMENT_NODE */ && (nodeValue = node.nodeValue.trim())
-                    && nodeValue.startsWith('<' + _meta.get('element.import'))
-                    && nodeValue.endsWith('</' + _meta.get('element.import') + '>')) {
-                        var importEl, reviver = document.createElement('div');
-                        reviver.innerHTML = nodeValue;
-                        if ((importEl = reviver.firstChild).matches(_meta.get('element.import'))) {
-                            // Belongs to a composition block?
-                            var compositionBlock = !importEl.hasAttribute(_meta.get('attr.moduleref'))
-                                ? node.parentNode.closest(modulerefSelector) : (
-                                    importEl.getAttribute(_meta.get('attr.moduleref')).trim().startsWith('~') ? node.parentNode.closest(exportgroupSelector) : null
-                                )
-                            var importElInstance = Import.create(importEl);
-                            importElInstance.hydrate(node, slottedElements, compositionBlock);
-                            // Empty basket
-                            slottedElements = [];
-                        }
+            if (_internals(_export.parentNode, 'oohtml').get('importsCan')) return;
+            // hydrateSlots() might be running AFTER certain <slots> have resolved
+            // and _export might be a just-resolved node
+            if (_export.importReference) return;
+            var slottedElements = [];
+            _export.parentNode.childNodes.forEach(node => {
+                var nodeValue;
+                if (node.nodeType === 1/** ELEMENT_NODE */ && node.matches(exportgroupSelector)) {
+                    slottedElements.push(node);
+                } else if (node.nodeType === 8/** COMMENT_NODE */ && (nodeValue = node.nodeValue.trim())
+                && nodeValue.startsWith('<' + _meta.get('element.import'))
+                && nodeValue.endsWith('</' + _meta.get('element.import') + '>')) {
+                    var importEl, reviver = document.createElement('div');
+                    reviver.innerHTML = nodeValue;
+                    if ((importEl = reviver.firstChild).matches(_meta.get('element.import'))) {
+                        // Belongs to a composition block?
+                        var compositionBlock = !importEl.hasAttribute(_meta.get('attr.moduleref'))
+                            ? node.parentNode.closest(modulerefSelector) : (
+                                importEl.getAttribute(_meta.get('attr.moduleref')).trim().startsWith('~') ? node.parentNode.closest(exportgroupSelector) : null
+                            )
+                        var importElInstance = Import.create(importEl);
+                        importElInstance.hydrate(node, slottedElements, compositionBlock);
+                        // Empty basket
+                        slottedElements = [];
                     }
-                });
-                // Scanning is once for every parent
-                _internals(_export.parentNode, 'oohtml').set('importsCan', true);
-            }
+                }
+            });
+            // Scanning is once for every parent
+            _internals(_export.parentNode, 'oohtml').set('importsCan', true);
         });
     };
 

package/src/subscript/Element.js

@@ -17,21 +17,21 @@ export const Element  = BaseElement => class extends BaseElement {
      * @subscript Element
      */
 
-    static get subscriptMethods() {
-        return [ 'render' ];
-    }
-
     static get subscriptParams() {
         return { globalsAutoObserve: [ 'document' ] };
     }
 
+    static get subscriptMethods() {
+        return [ 'render' ];
+    }
+
     static implement( element, subscriptFunction ) {
-        let subscriptConsole = _internals( element, 'oohtml', 'subscript', 'console' );
+        let subscripts = _internals( element, 'oohtml', 'subscripts' );
         let id = subscriptFunction.name;
         if ( !id ) {
-            id = [ ...subscriptConsole.keys() ].filter( k => _isNumeric( k ) ).length;
+            id = [ ...subscripts.keys() ].filter( k => _isNumeric( k ) ).length;
         }
-        subscriptConsole.set( id, subscriptFunction );
+        subscripts.set( id, subscriptFunction );
         return subscriptFunction;
     }
     
@@ -47,6 +47,40 @@ export const Element  = BaseElement => class extends BaseElement {
        return this.implement( element, Subscript.clone( method, element ) );
     }
 
+    /**
+     * @disconnectedCallback()
+     */
+    static doConnectedCallback( instance ) {
+        if ( ( typeof WebQit === 'undefined' ) || !WebQit.Observer ) return;
+        const subscripts = _internals( instance, 'oohtml', 'subscripts' );
+        const signals = ( mutations, evt, namespace = [] ) => {
+            subscripts.forEach( api => api.thread( ...mutations.map( mu => namespace.concat( mu.path ) ) ) );
+        };
+        ( this.subscriptParams.globalsAutoObserve || [] ).forEach( identifier => {
+            WebQit.Observer.observe( globalThis[ identifier ], mutations => signals( mutations, null, [ identifier ] ), { 
+                subtree: true, diff: true, tags: [ instance, 'subscript-element', identifier ], unique: true
+            } );
+        } );
+        WebQit.Observer.observe( instance, mutations => signals( mutations, null, [ 'this' ] ), { 
+            subtree: true, diff: true, tags: [ instance, 'subscript-element', 'this' ], unique: true
+        } );
+    }
+
+    /**
+     * @disconnectedCallback()
+     */
+    static doDisconnectedCallback( instance ) {
+        if ( ( typeof WebQit === 'undefined' ) || !WebQit.Observer ) return;
+        ( this.subscriptParams.globalsAutoObserve || [] ).forEach( identifier => {
+            WebQit.Observer.unobserve( globalThis[ identifier ], null, null, { 
+                subtree: true, tags: [ instance, 'subscript-element', identifier ]
+            } );
+        } );
+        WebQit.Observer.unobserve( instance, null, null, { 
+            subtree: true, tags: [ instance, 'subscript-element', 'this' ]
+        } );
+    }
+
     /**
      * @constructor()
      */
@@ -58,27 +92,13 @@ export const Element  = BaseElement => class extends BaseElement {
             let proxy = subscriptConstructor.implementMethod( this, this[ methodName ] );
             this[ methodName ] = proxy;
         } );
-        if ( ( typeof WebQit === 'undefined' ) || !WebQit.Observer ) return;
-        ( subscriptConstructor.subscriptParams.globalsAutoObserve || [] ).forEach( identifier => {
-            WebQit.Observer.link( globalThis, identifier, globalThis[ identifier ] );
-        } );
     }
 
     /**
      * @connectedCallback()
      */
     connectedCallback() {
-        if ( ( typeof WebQit === 'undefined' ) || !WebQit.Observer ) return;
-        const signals = ( mutations, evt, namespace = [] ) => {
-            let subscriptConsole = _internals( this, 'oohtml', 'subscript', 'console' );
-            subscriptConsole.forEach( api => api.thread( ...mutations.map( mu => namespace.concat( mu.path ) ) ) );
-        };
-        WebQit.Observer.observe( globalThis, signals, {
-            subtree: true, tags: [ this, 'subscript-element', 'globals' ], unique: true
-        } );
-        WebQit.Observer.observe( this, mutations => signals( mutations, null, [ 'this' ] ), { 
-            subtree: true, tags: [ this, 'subscript-element', 'this' ], unique: true
-        } );
+        this.constructor.doConnectedCallback( this );
         if ( super.connectedCallback ) {
             super.connectedCallback();
         }
@@ -88,22 +108,14 @@ export const Element  = BaseElement => class extends BaseElement {
      * @disconnectedCallback()
      */
     disconnectedCallback() {
-         let subscriptConsole = _internals( this, 'oohtml', 'subscript', 'console' );
-         subscriptConsole.forEach( api => api.dispose() );
-        if ( ( typeof WebQit === 'undefined' ) || !WebQit.Observer ) return;
-        WebQit.Observer.unobserve( globalThis, null, null, { 
-            subtree: true, tags: [ this, 'subscript-element', 'globals' ]
-        } );
-        WebQit.Observer.unobserve( this, null, null, { 
-            subtree: true, tags: [ this, 'subscript-element', 'this' ]
-        } );
+        this.constructor.doDisconnectedCallback( this );
         if ( super.disconnectedCallback ) {
             super.disconnectedCallback();
         }
     }
 
-    get subscriptConsole() {
-        return _internals( this, 'oohtml', 'subscript', 'console' );
+    get subscripts() {
+        return _internals( this, 'oohtml', 'subscripts' );
     }
 
     /**

package/src/subscript/index.js

@@ -30,7 +30,6 @@ export default function init( _config = null, onDomReady = false ) {
     }, _config );
 
     const subscriptElement = Element( class {} );
-    const $subscriptElement = new subscriptElement;
     mutations.onPresent( _meta.get('selectors.script'), scriptElement => {
 
         let ownerNode = scriptElement.parentNode;
@@ -43,11 +42,11 @@ export default function init( _config = null, onDomReady = false ) {
         if ( embeds.has( scriptElement ) ) return;
 
         subscriptElement.implementScript( ownerNode, scriptElement )();
-        $subscriptElement.connectedCallback.call( ownerNode );
+        subscriptElement.doConnectedCallback( ownerNode );
         embeds.add( scriptElement );
 
         let mo = mutations.onRemoved( ownerNode, () => {
-            $subscriptElement.disconnectedCallback.call( ownerNode );
+            subscriptElement.doDisconnectedCallback( ownerNode );
             embeds.delete( scriptElement );
             mo.disconnect();
         }, { ignoreTransients: true });