@webqit/oohtml 2.1.39 → 2.1.41

package/package.json

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

package/src/html-imports/_HTMLExportsManager.js

@@ -27,7 +27,7 @@ export default class _HTMLExportsManager {
         this.parent = parent;
         this.level = level;
         this.modules = getModulesObject( this.host );
-        this.exportId = ( this.host.getAttribute( this.config.template?.attr.exportid ) || '' ).trim();
+        this.exportId = ( this.host.getAttribute( this.config.template?.attr.moduledef ) || '' ).trim();
         this.validateExportId( this.exportId );
         const realdom = this.window.webqit.realdom;
         // ----------
@@ -71,15 +71,15 @@ export default class _HTMLExportsManager {
     export( entries, isConnected ) {
         entries.forEach( entry => {
             if ( entry.nodeType !== 1 ) return;
-            const exportId = ( entry.getAttribute( this.config.export.attr.exportid ) || '' ).trim();
+            const isTemplate = entry.matches( this.config.templateSelector );
+            const exportId = ( entry.getAttribute( isTemplate ? this.config.template.attr.moduledef : this.config.template.attr.fragmentdef ) || '' ).trim();
             if ( !exportId ) return;
-            const isPackage = entry.matches( this.config.templateSelector );
             if ( isConnected ) {
-                if ( isPackage ) { new _HTMLExportsManager( this.window, entry, this.config, this.host, this.level + 1 ); }
-                Observer.set( this.modules, ( !isPackage && '#' || '' ) + exportId, entry );
+                if ( isTemplate ) { new _HTMLExportsManager( this.window, entry, this.config, this.host, this.level + 1 ); }
+                Observer.set( this.modules, ( !isTemplate && '#' || '' ) + exportId, entry );
             } else {
-                if ( isPackage ) { _HTMLExportsManager.instance( this.window, entry ).dispose(); }
-                Observer.deleteProperty( this.modules, ( !isPackage && '#' || '' ) + exportId );
+                if ( isTemplate ) { _HTMLExportsManager.instance( this.window, entry ).dispose(); }
+                Observer.deleteProperty( this.modules, ( !isTemplate && '#' || '' ) + exportId );
             }
         } );
     }

package/src/html-imports/_HTMLImportElement.js

@@ -68,12 +68,12 @@ export default function( config ) {
                 } );
                 // ----------------
                 priv.hydrationImportRequest = new AbortController;
-                priv.importRequest( modules => {
-                    if ( priv.originalsRemapped ) { return this.fill( modules ); }
-                    const identifiersMap = modules.map( module => ( { el: module, exportId: module.getAttribute( config.export.attr.exportid ), tagName: module.tagName, } ) );
+                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, exportId = slottedElement.getAttribute( config.export.attr.exportid );
-                        const originalsMatch = identifiersMap.filter( moduleIdentifiers => tagName === moduleIdentifiers.tagName && exportId === moduleIdentifiers.exportId );
+                        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 );
                     } );
@@ -112,7 +112,7 @@ export default function( config ) {
                 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( modules => !priv.hydrationImportRequest && this.fill( modules ), signal );
+                    priv.importRequest( fragments => !priv.hydrationImportRequest && this.fill( fragments ), signal );
                 }, { live: true, timing: 'sync', lifecycleSignals: true } );
                 // Must come after
                 priv.hydrationImportRequest?.abort();
@@ -170,8 +170,8 @@ export default function( config ) {
                     // 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.export.attr.exportid ) ) {
-                        slottableElementClone.toggleAttribute( config.export.attr.exportid, true );
+                    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 );

package/src/html-imports/index.js

@@ -18,16 +18,15 @@ import { _, _init } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, realdom, window } = _init.call( this, 'html-imports', $config, {
-        export: { attr: { exportid: 'def' }, },
-        template: { attr: { exportid: 'def', extends: 'extends', inherits: 'inherits' }, api: { modules: 'modules', exportid: 'exportid' }, },
-        context: { attr: { importscontext: 'importscontext', contextname: 'contextname' }, api: { modules: 'modules' }, },
+        template: { attr: { moduledef: 'def', fragmentdef: 'def', extends: 'extends', inherits: 'inherits' }, api: { modules: 'modules', moduledef: 'def' }, },
+        context: { attr: { importscontext: 'importscontext', contextname: 'contextname' }, api: { import: 'import' }, },
         import: { tagName: 'import', attr: { moduleref: 'ref' }, },
         staticsensitivity: true,
         isomorphic: true,
     } );
-    config.templateSelector = `template[${ window.CSS.escape( config.template.attr.exportid ) }]`;
+    config.templateSelector = `template[${ window.CSS.escape( config.template.attr.moduledef ) }]`;
     config.ownerContextSelector = [ config.context.attr.contextname, config.context.attr.importscontext ].map( a => `[${ window.CSS.escape( a ) }]` ).join( ',' );
-    config.slottedElementsSelector = `[${ window.CSS.escape( config.export.attr.exportid ) }]`;
+    config.slottedElementsSelector = `[${ window.CSS.escape( config.template.attr.fragmentdef ) }]`;
     window.webqit.HTMLImportElement = _HTMLImportElement.call( window, config );
     window.webqit.HTMLImportsProvider = class extends _HTMLImportsProvider {
         static get config() { return config; }
@@ -67,15 +66,15 @@ function exposeModulesObjects( config ) {
     const window = this;
     // Assertions
     if ( config.template.api.modules in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.modules }" property!` ); }
-    if ( config.template.api.exportid in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.exportid }" property!` ); }
+    if ( config.template.api.moduledef in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.moduledef }" property!` ); }
     if ( config.context.api.import in window.document ) { throw new Error( `document already has a "${ config.context.api.import }" property!` ); }
     if ( config.context.api.import in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.context.api.import }" property!` ); }
     // Definitions
     Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.modules, { get: function() {
         return getModulesObject( this );
     } } );
-    Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.exportid, { get: function() {
-        return this.getAttribute( config.template.attr.exportid );
+    Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.moduledef, { get: function() {
+        return this.getAttribute( config.template.attr.moduledef );
     } } );
     Object.defineProperty( window.document, config.context.api.import, { value: function( ref, callback, options = {} ) {
         return importRequest( window.document, ref, callback, options );