@webqit/oohtml 1.9.24 → 1.10.1

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "1.9.24",
+  "version": "1.10.1",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/html-modules/index.js

@@ -109,7 +109,7 @@ export default function init( _config = {} ) {
         });
     };
 
-    const discoverContents = (contents, node, path, mutationType = null, fireEvents = true) => {
+    const discoverContents = (node, contentNode, path, mutationType = null, fireEvents = true) => {
 
         // -----------------------
         // Templates and exports
@@ -123,8 +123,8 @@ export default function init( _config = {} ) {
                 var _path = (path ? path + '/' : '') + templateName;
                 if (mutationType === 'removed') {
                     _internals(node, 'oohtml', 'templates').delete(templateName)
-                    if (_internals(node, 'oohtml').get('parentTemplate') === node) {
-                        _internals(node, 'oohtml').delete('parentTemplate');
+                    if (_internals(el, 'oohtml').get('parentTemplate') === node) {
+                        _internals(el, 'oohtml').delete('parentTemplate');
                     }
                     if (eventsObject) {
                         eventsObject.removedTemplates[templateName] = el;
@@ -137,7 +137,7 @@ export default function init( _config = {} ) {
                     }
                 }
                 // Recurse
-                discoverContents(el.content, el, _path, mutationType, fireEvents);
+                discoverContents(el, el.content, _path, mutationType, fireEvents);
             } else {
                 const manageExportItem = exportItem => {
                     var exportId = exportItem.getAttribute(_meta.get('attr.exportgroup')) || 'default';
@@ -183,7 +183,7 @@ export default function init( _config = {} ) {
         // Run...
         node.modulemutationsType = mutationType;
         const eventsObject = { addedTemplates: Object.create(null), removedTemplates: Object.create(null), addedExports: Object.create(null), removedExports: Object.create(null), }; 
-        _arrFrom(contents.children).forEach(el => manageComponent(el, eventsObject, mutationType, fireEvents));
+        _arrFrom(contentNode.children).forEach(el => manageComponent(el, eventsObject, mutationType, fireEvents));
         if (fireEvents) {
             fireDocumentTemplateEvent('templatemutation', eventsObject, path);
         }
@@ -192,14 +192,28 @@ export default function init( _config = {} ) {
         // Handle content loading
         if (mutationType === 'added' && !_internals(node, 'oohtml').get('onLiveMode')) {
             _internals(node, 'oohtml').set('onLiveMode', true);
-            if (node.getAttribute('src') && !node.content.children.length) {
-                loadingTemplates.push(loadTemplateContent(node, path));
+            const honourSrc = () => {
+                if (node.content.children.length) return;
+                _internals(node, 'oohtml').delete('queryCallback');
+                return loadTemplateContent(node, path);
+            };
+            if (node.getAttribute('src')) {
+                if (node.getAttribute('loading') === 'lazy') {
+                    _internals(node, 'oohtml').set('queryCallback', honourSrc);
+                } else {
+                    loadingTemplates.push(honourSrc());
+                }
             }
             mutations.onAttrChange(node, mr => {
-                if (mr[0].target.getAttribute(mr[0].attributeName) !== mr[0].oldValue) {
-                    loadTemplateContent(node, path);
+                if (mr[0].target.getAttribute(mr[0].attributeName) === mr[0].oldValue) return;
+                if (node.getAttribute('loading') === 'lazy') {
+                    _internals(node, 'oohtml').set('queryCallback', honourSrc);
+                } else if (mr[0].attributeName === 'loading') {
+                    _internals(node, 'oohtml').delete('queryCallback');
+                } else {
+                    honourSrc();
                 }
-            }, ['src']);
+            }, ['src', 'loading']);
                 
             // -----------------------
             // Watch mutations
@@ -211,7 +225,7 @@ export default function init( _config = {} ) {
                 });
                 fireDocumentTemplateEvent('templatemutation', eventsObject, path);
             });
-            mo.observe(contents, {childList: true});
+            mo.observe(contentNode, {childList: true});
         }
 
     };
@@ -239,6 +253,9 @@ export default function init( _config = {} ) {
     }
     Object.defineProperty(TemplateElementClass.prototype, _meta.get('api.templates'), {
         get: function() {
+            if (_internals(this, 'oohtml').has('queryCallback')) {
+                _internals(this, 'oohtml').get('queryCallback')();
+            }
             return mapToObject(_internals(this, 'oohtml', 'templates'));
         }
     });
@@ -247,6 +264,9 @@ export default function init( _config = {} ) {
     }
     Object.defineProperty(TemplateElementClass.prototype, _meta.get('api.exports'), {
         get: function() {
+            if (_internals(this, 'oohtml').has('queryCallback')) {
+                _internals(this, 'oohtml').get('queryCallback')();
+            }
             return mapToObject(_internals(this, 'oohtml', 'exports'));
         }
     });
@@ -293,25 +313,24 @@ export default function init( _config = {} ) {
         var name = el.getAttribute(_meta.get('attr.moduleid'));
         if (!el.closest(_meta.get('element.import')) && validateModuleName(name)) {
             _internals(document, 'oohtml', 'templates').set(name, el);
-            discoverContents(el.content, el, name, 'added', false);
+            discoverContents(el, el.content, name, 'added', false);
         }
     });
     mutations.onPresenceChange(templateSelector, async (els, presence) => {
         const eventsObject = { addedTemplates: Object.create(null), removedTemplates: Object.create(null), addedExports: Object.create(null), removedExports: Object.create(null), }; 
         els.forEach(el => {
             var name = el.getAttribute(_meta.get('attr.moduleid'));
-            if (!el.closest(_meta.get('element.import')) && validateModuleName(name)) {
-                if (presence) {
-                    _internals(document, 'oohtml', 'templates').set(name, el);
-                    discoverContents(el.content, el, name, 'added');
-                    eventsObject.addedTemplates[name] = el;
-                } else {
-                    if (_internals(document, 'oohtml', 'templates').get(name) === el) {
-                        _internals(document, 'oohtml', 'templates').delete(name);
-                    }
-                    discoverContents(el.content, el, name, 'removed');
-                    eventsObject.removedTemplates[name] = el;
+            if (el.closest(_meta.get('element.import')) || !validateModuleName(name)) return;
+            if (presence) {
+                _internals(document, 'oohtml', 'templates').set(name, el);
+                discoverContents(el, el.content, name, 'added');
+                eventsObject.addedTemplates[name] = el;
+            } else {
+                if (_internals(document, 'oohtml', 'templates').get(name) === el) {
+                    _internals(document, 'oohtml', 'templates').delete(name);
                 }
+                discoverContents(el, el.content, name, 'removed');
+                eventsObject.removedTemplates[name] = el;
             }
         });
         fireDocumentTemplateEvent('templatemutation', eventsObject, '');

package/src/util.js

@@ -116,7 +116,7 @@ const evalModuleExpr = (contexts, segment, collectionCallback) => {
         return contexts.reduce((list, context) => {
             var collection = collectionCallback(context);
             if (_reference === '*') {
-                    _reference = '(' + collection.keys().join('+') + ')';
+                _reference = '(' + collection.keys().join('+') + ')';
             }
             var itemArray = _wrapped(_reference, '(', ')') ? evalModuleExpr([context], _unwrap(_reference, '(', ')'), collectionCallback) : _arrFrom(collection.get(_reference), false);
             // ------------
@@ -151,20 +151,25 @@ const execScopeQuery = function(contexts, path, collectionCallback, advancementC
         return [];
     }
 
-    var segment = path.shift(), isStopSegmentIfCount;
+    let segment = path.shift(), isStopSegmentIfCount;
     if (segment.endsWith('.')) {
         isStopSegmentIfCount = true;
         segment = segment.substr(0, segment.length - 1).trim();
     }
     // -----------
-    var modules = evalModuleExpr(contexts, segment, collectionCallback);
+    let modules = evalModuleExpr(contexts, segment, collectionCallback);
+    modules.forEach(context => {
+        if (_internals(context, 'oohtml').has('queryCallback')) {
+            _internals(context, 'oohtml').get('queryCallback')();
+        }
+    });
     // -----------
     if (modules.length && isStopSegmentIfCount) {
         return modules;
     }
     // -----------
     if (path.length) {
-        var submodules = execScopeQuery(modules, path.slice(), collectionCallback, advancementCallback, level + 1);
+        let submodules = execScopeQuery(modules, path.slice(), collectionCallback, advancementCallback, level + 1);
         if (submodules === -1) {
             return advancementCallback(modules, level, true);
         }