@webqit/oohtml 1.10.3 → 2.0.0

package/src/html-modules/index.js

@@ -1,384 +1,133 @@
-
-/**
- * @imports
- */
-import { _isEmpty, _internals } from '@webqit/util/js/index.js';
-import { _remove, _from as _arrFrom } from '@webqit/util/arr/index.js';
-import { _each } from '@webqit/util/obj/index.js';
-import domInit from '@webqit/browser-pie/src/dom/index.js';
-import { config, scopeQuery } from '../util.js';
-
-/**
- * ---------------------------
- * Named Templates
- * ---------------------------
- */
-
-/**
- * @init
- * 
- * @param Object config
- */
-export default function init( _config = {} ) {
-
-    const WebQit = domInit.call( this );
-    if ( _config.onDomReady ) {
-        WebQit.DOM.ready( () => {
-            init.call( this, { ..._config, onDomReady: false } );
-        } );
-        return;
-    }
-
-    const window = WebQit.window;
-    const document = WebQit.window.document;
-    const mutations = WebQit.DOM.mutations;
-
-    const _meta = config.call(this, {
-        element: {
-            template: '',
-            export: 'export',
-            import: 'import',
-        },
-        attr: {
-            moduleid: 'name',
-            moduleref: 'template',
-            exportid: 'name',
-            exportgroup: 'exportgroup',
-        },
-        api: {
-            templateClass: '',
-            templates: 'templates',
-            exports: 'exports',
-            moduleref: 'template',
-        },
-    }, _config.params );
-
-    const templateSelector = 'template' + (_meta.get('element.template') ? '[is="' + _meta.get('element.template') + '"]' : '') + '[' + window.CSS.escape(_meta.get('attr.moduleid')) + ']';
-    var TemplateElementClass = window.HTMLTemplateElement;
-    if (_meta.get('api.templateClass')) {
-        if (!window[_meta.get('api.templateClass')]) {
-            throw new Error('The custom element class "' + _meta.get('api.templateClass') + '" is not defined!');
-        }
-        TemplateElementClass = window[_meta.get('api.templateClass')];
-    }
-
-    // ----------------------
-    // Capture template elements
-    // ----------------------
-
-    const fireDocumentTemplateEvent = (type, value, path) => {
-        if (type === 'templatemutation') {
-            ['addedExports', 'removedExports'].forEach(listType => {
-                Object.defineProperty(value, listType, {value: Object.keys(value[listType]).map(name => ({name, items: value[listType][name]}))});
-            });
-            ['addedTemplates', 'removedTemplates'].forEach(listType => {
-                Object.defineProperty(value, listType, {value: Object.keys(value[listType]).map(name => ({name, item: value[listType][name]}))});
-            });
-        }
-        Object.defineProperty(value, 'path', {value: path});
-        document.dispatchEvent(new window.CustomEvent(type, {detail: value}));
-    };
-
-    const loadTemplateContent = (template, path) => {
-        const fireTemplateEvent = type => {
-            template.dispatchEvent(new window.CustomEvent(type, {detail: {path}}));
-        };
-        var src = template.getAttribute('src');
-        return new Promise((resolve, reject) => {
-            // Missing in jsdom
-            if (window.fetch) {
-                window.fetch(src).then(response => {
-                    return response.ok ? response.text() : Promise.reject(response.statusText);
-                }).then(content => {
-                    template.innerHTML = content;
-                    fireTemplateEvent('load');
-                    fireDocumentTemplateEvent('templatecontentloaded', {template}, path);
-                    resolve(template);
-                }).catch(error => {
-                    console.error('Error fetching the bundle at ' + src + '. (' + error + ')');
-                    // Dispatch the event.
-                    template.innerHTML = '';
-                    fireTemplateEvent('loaderror');
-                    fireDocumentTemplateEvent('templatecontentloaderror', {template}, path);
-                    resolve(template);
-                });
-            } else {
-                resolve();
-                console.error('Error fetching the bundle at ' + src + '. (window.fetch() not supported by browser.)');
-            }
-        });
-    };
-
-    const discoverContents = (node, contentNode, path, mutationType = null, fireEvents = true) => {
-
-        // -----------------------
-        // Templates and exports
-        const manageComponent = (el, eventsObject, mutationType, fireEvents) => {
-            if (!el.matches) {
-                // Not an element child
-                return;
-            }
-            var templateName, exportId;
-            if (el.matches(templateSelector) && (templateName = el.getAttribute(_meta.get('attr.moduleid'))) && validateModuleName(templateName)) {
-                var _path = (path ? path + '/' : '') + templateName;
-                if (mutationType === 'removed') {
-                    _internals(node, 'oohtml', 'templates').delete(templateName)
-                    if (_internals(el, 'oohtml').get('parentTemplate') === node) {
-                        _internals(el, 'oohtml').delete('parentTemplate');
-                    }
-                    if (eventsObject) {
-                        eventsObject.removedTemplates[templateName] = el;
-                    }
-                } else if (mutationType === 'added') {
-                    _internals(node, 'oohtml', 'templates').set(templateName, el);
-                    _internals(el, 'oohtml').set('parentTemplate', node);
-                    if (eventsObject) {
-                        eventsObject.addedTemplates[templateName] = el;
-                    }
-                }
-                // Recurse
-                discoverContents(el, el.content, _path, mutationType, fireEvents);
-            } else {
-                const manageExportItem = exportItem => {
-                    var exportId = exportItem.getAttribute(_meta.get('attr.exportgroup')) || 'default';
-                    if (mutationType === 'removed') {
-                        if (_internals(node, 'oohtml', 'exports').has(exportId)) {
-                            _remove(_internals(node, 'oohtml', 'exports').get(exportId), exportItem);
-                            if (!_internals(node, 'oohtml', 'exports').has(exportId).length) {
-                                _internals(node, 'oohtml', 'exports').delete(exportId);
-                            }
-                            if (eventsObject) {
-                                if (!eventsObject.removedExports[exportId]) {
-                                    eventsObject.removedExports[exportId] = [];
-                                }
-                                eventsObject.removedExports[exportId].push(exportItem);
-                            }
-                        }
-                    } else if (mutationType === 'added') {
-                        if (!_internals(node, 'oohtml', 'exports').has(exportId)) {
-                            _internals(node, 'oohtml', 'exports').set(exportId, []);
-                        }
-                        _internals(node, 'oohtml', 'exports').get(exportId).push(exportItem);
-                        if (eventsObject) {
-                            if (!eventsObject.addedExports[exportId]) {
-                                eventsObject.addedExports[exportId] = [];
-                            }
-                            eventsObject.addedExports[exportId].push(exportItem);
-                        }
-                    }
-                };
-                if (el.matches(_meta.get('element.export'))) {
-                    var exportId = el.getAttribute(_meta.get('attr.exportid')) || 'default';
-                    _arrFrom(el.children).forEach(exportItem => {
-                        exportItem.setAttribute(_meta.get('attr.exportgroup'), exportId);
-                        manageExportItem(exportItem);
-                    });
-                } else {
-                    manageExportItem(el);
-                }
-            }
-        };
-
-        // -----------------------
-        // Run...
-        node.modulemutationsType = mutationType;
-        const eventsObject = { addedTemplates: Object.create(null), removedTemplates: Object.create(null), addedExports: Object.create(null), removedExports: Object.create(null), }; 
-        _arrFrom(contentNode.children).forEach(el => manageComponent(el, eventsObject, mutationType, fireEvents));
-        if (fireEvents) {
-            fireDocumentTemplateEvent('templatemutation', eventsObject, path);
-        }
-
-        // -----------------------
-        // Handle content loading
-        if (mutationType === 'added' && !_internals(node, 'oohtml').get('onLiveMode')) {
-            _internals(node, 'oohtml').set('onLiveMode', true);
-            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) 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', 'loading']);
-                
-            // -----------------------
-            // Watch mutations
-            var mo = new window.MutationObserver(mutations => {
-                const eventsObject = { addedTemplates: Object.create(null), removedTemplates: Object.create(null), addedExports: Object.create(null), removedExports: Object.create(null), };    
-                mutations.forEach(mutation => {
-                    mutation.addedNodes.forEach(el => manageComponent(el, eventsObject, 'added', true));
-                    mutation.removedNodes.forEach(el => manageComponent(el, eventsObject, 'removed', true));
-                });
-                fireDocumentTemplateEvent('templatemutation', eventsObject, path);
-            });
-            mo.observe(contentNode, {childList: true});
-        }
-
-    };
-
-    // ----------------------
-    // Define the global "templates" object
-    // ----------------------
-
-    if (_meta.get('api.templates') in document) {
-        throw new Error('document already has a "' + _meta.get('api.templates') + '" property!');
-    }
-    const loadingTemplates = [];
-    Object.defineProperty(document, _meta.get('api.templates'), {
-        get: function() {
-            return mapToObject(_internals(document, 'oohtml', 'templates'));
-        }
-    });
-
-    // ----------------------
-    // Define the "templates" and "exports" properties on HTMLTemplateElement.prototype
-    // ----------------------
-
-    if (_meta.get('api.templates') in TemplateElementClass.prototype) {
-        throw new Error('The "HTMLTemplateElement" class already has a "' + _meta.get('api.templates') + '" property!');
-    }
-    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'));
-        }
-    });
-    if (_meta.get('api.exports') in TemplateElementClass.prototype) {
-        throw new Error('The "HTMLTemplateElement" class already has a "' + _meta.get('api.exports') + '" property!');
-    }
-    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'));
-        }
-    });
-
-    const mapToObject = map => {
-        return Object.defineProperties({}, Array.from(map.keys()).reduce((desc, name) => {
-            desc[name] = {get: () => map.get(name)};
-            return desc;
-        }, {}));
-    };
-
-    const validateModuleName = name => {
-        var invalidCharacterMatch;
-        if (invalidCharacterMatch = name.match(/([^a-zA-Z0-9\_\-\@])/)) {
-            console.error(`Invalid character "${invalidCharacterMatch}" in the module name: ${name}.`);
-            return false;
-        }
-        return true;
-    };
-
-    const templatesQuery = query => {
-        var _module = document.createElement('template');
-        // -----------------
-        scopeQuery([document], query, function(host, prop) {
-            var collection = _internals(host, 'oohtml', 'templates');
-            if (arguments.length === 1) return collection;
-            if (prop.startsWith(':')) return _internals(host, 'oohtml', 'exports').get(prop.substr(1));
-            return collection.get(prop);
-        }).forEach($module => {
-            _internals($module, 'oohtml', 'templates').forEach((template, moduleId) => {
-                _internals(_module, 'oohtml', 'templates').set(moduleId, template);
-            });
-            _internals($module, 'oohtml', 'exports').forEach((exports, exportId) => {
-                if (!_internals(_module, 'oohtml', 'exports').has(exportId)) {
-                    _internals(_module, 'oohtml', 'exports').set(exportId, []);
-                }
-                _internals(_module, 'oohtml', 'exports').get(exportId).push(...exports);
-            });
-        });
-        return _module;
-    };
-
-    _arrFrom(document.querySelectorAll(templateSelector)).forEach(async el => {
-        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, 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)) 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, '');
-    });
-
-    // ----------------------
-    // Capture import elements
-    // ----------------------
-
-    mutations.onPresent(_meta.get('element.import'), el => {
-        discoverContents(el, el, '', 'added', false);
-    });
-
-    // ----------------------
-    // Define the "template" property on Element.prototype
-    // ----------------------
-
-    if (_meta.get('api.moduleref') in window.Element.prototype) {
-        throw new Error('The "Element" class already has a "' + _meta.get('api.moduleref') + '" property!');
-    }
-    Object.defineProperty(window.Element.prototype, _meta.get('api.moduleref'), {
-        get: function() {
-            var templateId;
-            if (!_internals(this, 'oohtml').has('module') 
-            && (templateId = this.getAttribute(_meta.get('attr.moduleref')))) {
-                var _module = templatesQuery(templateId);
-                _internals(this, 'oohtml').set('module', _module)
-            }
-            return _internals(this, 'oohtml').get('module');
-        },
-    });
-
-    // ----------------------
-    // Hydrate
-    // ----------------------
-
-    //Object.defineProperty(document, 'templatesQuery', { value: templatesQuery });
-    var templatesReadyState = loadingTemplates.length ? 'loading' : 'indeterminate';
-    Object.defineProperty(document, 'templatesReadyState', { get: () => templatesReadyState });
-    WebQit.DOM.ready.call(WebQit, () => {
-        loadingTemplates.forEach(promise => {
-            promise && promise.catch(error => {
-                console.warn(error);
-            });
-        });
-        return Promise.all(loadingTemplates).then(() => {
-            templatesReadyState = 'complete';
-            document.dispatchEvent(new window.Event('templatesreadystatechange'));
-        });
-    });
-}
+
+/**
+ * @imports
+ */
+import wqDom from '@webqit/dom';
+import Observer from '@webqit/observer';
+import _HTMLImportsContext from './_HTMLImportsContext.js';
+import HTMLExportsManager from './HTMLExportsManager.js';
+import { _ } from '../util.js';
+
+/**
+ * Initializes HTML Modules.
+ * 
+ * @param Object        $params 
+ *
+ * @return Void
+ */
+export default function init( $params = {} ) {
+    const window = this, dom = wqDom.call( window );
+    // -------
+    const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
+        template: { attr: { exportid: 'exportid', inherits: 'inherits' }, api: { modules: 'modules', exportid: 'exportid' }, },
+        context: { attr: { importscontext: 'importscontext', contextname: 'contextname' }, api: { modules: 'modules' }, },
+        export: { attr: { exportid: 'exportid' }, },
+        staticsensitivity: true,
+    } );
+    params.window = window;
+    params.templateSelector = `template[${ window.CSS.escape( params.template.attr.exportid ) }]`;
+    params.ownerContextSelector = [ params.context.attr.contextname, params.context.attr.importscontext ].map( a => `[${ window.CSS.escape( a ) }]` ).join( ',' );
+    params.HTMLImportsContext = class extends _HTMLImportsContext {
+        static get params() { return params; }
+    }
+    // -------
+    exposeModulesObjects.call( this, params );
+    realtime.call( this, params );
+}
+
+/**
+ * Returns the "exports" object associated with the given node.
+ *
+ * @param Element       node
+ * @param Bool          autoCreate
+ *
+ * @return Object
+ */
+export function getModulesObject( node, autoCreate = true ) {
+	if ( !_( node ).has( 'modules' ) && autoCreate ) {
+		const modulesObj = Object.create( null );
+		Observer.intercept( modulesObj, 'set', ( event, receiver, next ) => {
+			if ( !event.key.startsWith( '#' ) || event.value instanceof Set ) return next();
+            if ( !Array.isArray( event.value ) ) { event.value = [ event.value ]; }
+            event.value = new Set( event.value );
+			return next();
+		} );
+		_( node ).set( 'modules', modulesObj );
+	}
+	return _( node ).get( 'modules' );
+}
+
+/**
+ * Exposes HTML Modules with native APIs.
+ *
+ * @param Object        params
+ *
+ * @return Void
+ */
+function exposeModulesObjects( params ) {
+    const window = this;
+    // Assertions
+    if ( params.context.api.modules in window.document ) { throw new Error( `document already has a "${ params.context.api.modules }" property!` ); }
+    if ( params.template.api.modules in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ params.template.api.modules }" property!` ); }
+    if ( params.template.api.exportid in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ params.template.api.exportid }" property!` ); }
+    // Definitions
+    Object.defineProperty( window.document, params.context.api.modules, { get: function() {
+        return getModulesObject( window.document );
+    } } );
+    Object.defineProperty( window.HTMLElement.prototype, params.template.api.modules, { get: function() {
+        return getModulesObject( this );
+    } } );
+    Object.defineProperty( window.HTMLTemplateElement.prototype, params.template.api.exportid, { get: function() {
+        return this.isConnected ? HTMLExportsManager.instance( this, params ).exportId : this.getAttribute( params.template.attr.exportid );
+    } } );
+}
+
+/**
+ * Performs realtime capture of elements and builds their contents graph.
+ *
+ * @param Object	    params
+ *
+ * @return Void
+ */
+function realtime( params ) {
+    const window = this, { dom } = window.wq;
+    // ------------
+    const attachImportsContext = host => {
+        const contextId = params.HTMLImportsContext.createId( host );
+        params.HTMLImportsContext.attachTo( host, contextId );
+    };
+    const detachImportsContext = ( host, force ) => {
+        const contextId = params.HTMLImportsContext.createId( host );
+        params.HTMLImportsContext.detachFrom( host, contextId, cx => {
+            return force || host.matches && !host.matches( params.ownerContextSelector ) && !Object.keys( cx.modules ).length;
+        } );
+    };
+    // ------------
+    dom.realtime( window.document ).observe( [ params.templateSelector, params.ownerContextSelector ], record => {
+        record.entrants.forEach( entry => {
+            if ( entry.matches( params.templateSelector ) ) {
+                Object.defineProperty( entry, 'scoped', { value: entry.hasAttribute( 'scoped' ) } ); 
+                const moduleExport = new HTMLExportsManager( entry, params );
+                moduleExport.ownerContext = entry.scoped ? record.target : window.document;
+                const ownerContextModulesObj = getModulesObject( moduleExport.ownerContext );
+                if ( moduleExport.exportId ) { Observer.set( ownerContextModulesObj, moduleExport.exportId, entry ); }
+                // The ownerContext's modulesObj - 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( moduleExport.ownerContext );
+            } else {
+                attachImportsContext( entry );
+            }
+        } );
+        record.exits.forEach( entry => {
+            if ( entry.matches( params.templateSelector ) ) {
+                const moduleExport = HTMLExportsManager.instance( entry, params );
+                const ownerContextModulesObj = getModulesObject( moduleExport.ownerContext );
+                if ( moduleExport.exportId ) { Observer.deleteProperty( ownerContextModulesObj, moduleExport.exportId ); }
+                detachImportsContext( moduleExport.ownerContext );
+            } else {
+                detachImportsContext( entry, true );
+            }
+        } );
+    }, { subtree: true, timing: 'sync', staticSensitivity: params.staticsensitivity } );
+}

package/src/{html-imports/browser-entry.js → html-modules/targets.browser.js}

@@ -1,10 +1,10 @@
-
-/**
- * @imports
- */
-import init from './index.js';
-
-/**
- * @init
- */
+
+/**
+ * @imports
+ */
+import init from './index.js';
+
+/**
+ * @init
+ */
 init.call( window );

package/src/index.js

@@ -1,39 +1,34 @@
-
-/**
- * @imports
- */
-import Observer from '@webqit/observer';
-import domInit from '@webqit/browser-pie/src/dom/index.js';
-import HTMLModules from './html-modules/index.js';
-import HTMLImports from './html-imports/index.js';
-import NamespacedHTML from './namespaced-html/index.js';
-import StateAPI from './state-api/index.js';
-import Subscript from './subscript/index.js';
-
-/**
- * @init
- */
-export default function init(configs = {}) {
-
-    const WebQit = domInit.call(this);
-    if (WebQit.OOHTML) {
-        return;
-    }
-    // --------------
-    WebQit.OOHTML = {};
-    WebQit.Observer = Observer;
-    // --------------
-    HTMLModules.call(this, (configs.HTMLModules || {}));
-    HTMLImports.call(this, (configs.HTMLImports || {}));
-    NamespacedHTML.call(this, (configs.NamespacedHTML || {}));
-    StateAPI.call(this, (configs.StateAPI || {}));
-    Subscript.call(this, (configs.Subscript || {}));
-
-}
-
-/**
- * @exports
- */
-export {
-    Observer,
-}
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import StateAPI from './state-api/index.js';
+import ContextAPI from './context-api/index.js';
+import HTMLModules from './html-modules/index.js';
+import HTMLImports from './html-imports/index.js';
+import NamespacedHTML from './namespaced-html/index.js';
+import ScopedJS from './scoped-js/index.js';
+
+/**
+ * @init
+ */
+export default function init( configs = {} ) {
+    if ( !this.wq ) { this.wq = {}; }
+    if ( this.wq.oohtml ) return;
+    this.wq.Observer = Observer;
+    // --------------
+    StateAPI.call(this, ( configs.StateAPI || {} ) );
+    ContextAPI.call( this, ( configs.ContextAPI || {} ) );
+    HTMLModules.call( this, ( configs.HTMLModules || {} ) );
+    HTMLImports.call( this, ( configs.HTMLImports || {} ) );
+    NamespacedHTML.call(this, ( configs.NamespacedHTML || {} ) );
+    ScopedJS.call( this, ( configs.ScopedJS || {} ) );
+    // --------------
+    this.wq.oohtml = {};
+}
+
+/**
+ * @exports
+ */
+export { Observer }