@webqit/oohtml 2.1.43 → 2.1.45

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.43",
+  "version": "2.1.45",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -33,14 +33,14 @@
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
     "build": "esbuild main=src/targets.browser.js bindings-api=src/bindings-api/targets.browser.js context-api=src/context-api/targets.browser.js namespace-api=src/namespace-api/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",
-    "preversion": "npm run build && git add -A dist",
+    "preversion": "npm run test && npm run build && git add -A dist",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
-    "@webqit/observer": "^2.0.7",
-    "@webqit/realdom": "^2.1.10",
-    "@webqit/subscript": "^2.1.40",
+    "@webqit/observer": "^2.1.4",
+    "@webqit/realdom": "^2.1.12",
+    "@webqit/subscript": "^2.1.41",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {

package/src/html-imports/_HTMLExportsManager.js

@@ -3,6 +3,7 @@
  * @imports
  */
 import Observer from '@webqit/observer';
+import { _isNumeric } from '@webqit/util/js/index.js';
 import { getModulesObject } from './index.js';
 import { _ } from '../util.js';
 
@@ -55,7 +56,7 @@ export default class _HTMLExportsManager {
      * @returns Void
      */
     validateExportId( exportId ) {
-        if ( [ '@', '/', '#' ].some( token => exportId.includes( token ) ) ) {
+        if ( [ '@', '/', '*', '#' ].some( token => exportId.includes( token ) ) ) {
             throw new Error( `The export ID "${ exportId }" contains an invalid character.` );
         }
     }
@@ -69,18 +70,32 @@ export default class _HTMLExportsManager {
      * @returns Void
      */
     export( entries, isConnected ) {
-        entries.forEach( entry => {
-            if ( entry.nodeType !== 1 ) return;
-            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;
-            if ( isConnected ) {
-                if ( isTemplate ) { new _HTMLExportsManager( this.window, entry, this.config, this.host, this.level + 1 ); }
-                Observer.set( this.modules, ( !isTemplate && '#' || '' ) + exportId, entry );
-            } else {
-                if ( isTemplate ) { _HTMLExportsManager.instance( this.window, entry ).dispose(); }
-                Observer.deleteProperty( this.modules, ( !isTemplate && '#' || '' ) + exportId );
-            }
+        let dirty, allFragments = Observer.get( this.modules, '#' ) || [];
+        Observer.batch( this.modules, () => {
+            entries.forEach( entry => {
+                if ( entry.nodeType !== 1 ) return;
+                const isTemplate = entry.matches( this.config.templateSelector );
+                const exportId = ( entry.getAttribute( isTemplate ? this.config.template.attr.moduledef : this.config.template.attr.fragmentdef ) || '' ).trim();
+                if ( isConnected ) {
+                    if ( isTemplate && exportId ) { new _HTMLExportsManager( this.window, entry, this.config, this.host, this.level + 1 ); }
+                    else {
+                        allFragments.push( entry );
+                        dirty = true;
+                    }
+                    if ( exportId ) {
+                        this.validateExportId( exportId );
+                        Observer.set( this.modules, ( !isTemplate && '#' || '' ) + exportId, entry );
+                    }
+                } else {
+                    if ( isTemplate && exportId ) { _HTMLExportsManager.instance( this.window, entry ).dispose(); }
+                    else {
+                        allFragments = allFragments.filter( x => x !== entry );
+                        dirty = true;
+                    }
+                    if ( exportId ) Observer.deleteProperty( this.modules, ( !isTemplate && '#' || '' ) + exportId );
+                }
+            } );
+            if ( dirty ) Observer.set( this.modules, '#', allFragments );
         } );
     }
 

package/src/html-imports/_HTMLImportElement.js

@@ -50,9 +50,11 @@ export default function( config ) {
             };
 
             priv.importRequest = ( callback, signal = null ) => {
-                const request = _HTMLImportsContext.createRequest( { detail: priv.moduleRef, live: signal && true, signal } );
+                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 => {
-                    callback( ( response instanceof window.HTMLTemplateElement ? [ ...response.content.children ] : response && [ response ] ) || [] );
+                    callback( ( response instanceof window.HTMLTemplateElement ? [ ...response.content.children ] : (
+                        Array.isArray( response ) ? response : response && [ response ]
+                    ) ) || [] );
                 } );
             };
 

package/src/html-imports/_HTMLImportsProvider.js

@@ -54,14 +54,16 @@ export default class _HTMLImportsProvider extends HTMLContextProvider {
         if ( !path.length ) return event.respondWith();
  
         // We'll now fulfill request
-        const options = { live: event.request.live, descripted: true, midwayResults: true };
+        const options = { live: event.request.live, descripted: true };
         // Find a way to resolve request against two sources
         event.request.controller = Observer.deep( this.localModules, path, Observer.get, ( result, { signal } = {} ) => {
-            if ( !result.value && this.host.isConnected === false ) return; // Subtree is being disposed
-            if ( result.value || !this.contextModules ) return event.respondWith( result.value );
+            const _result = Array.isArray( result ) ? result : result.value;
+            const _isValidResult = Array.isArray( result ) ? result.length : result.value;
+            if ( !_isValidResult && this.host.isConnected === false ) return; // Subtree is being disposed
+            if ( _isValidResult || !this.contextModules ) return event.respondWith( _result );
             // This superModules binding is automatically aborted by the injected control.signal; see below
             return Observer.deep( this.contextModules, path, Observer.get, result => {
-                return event.respondWith( result.value );
+                return event.respondWith( Array.isArray( result ) ? result : result.value );
             }, { signal, ...options } );
         }, options );
     }

package/src/scoped-js/index.js

@@ -51,28 +51,28 @@ export function execute( compiledScript, thisContext, script ) {
         // Rerending processes,,,
         Object.defineProperty( script, 'rerender', { value: ( ...args ) => _await( returnValue, ( [ , rerender ] ) => rerender( ...args ) ) } );
         _await( script.properties, properties => {
+            const _env = { 'this': thisContext };
+            const getPaths = ( base, record_s ) => ( Array.isArray( record_s ) ? record_s : [ record_s ] ).map( record => [ ...base, ...( record.path || [ record.key ] ) ] );
             properties.processes = properties.dependencies.map( path => {
-                const _env = { 'this': thisContext, 'globalThis': globalThis, 'window': globalThis.window, 'self': globalThis.self };
-                const getPaths = ( base, record_s ) => ( Array.isArray( record_s ) ? record_s : [ record_s ] ).map( record => [ ...base, ...( record.path || [ record.key ] ) ] );
-                properties.processes = properties.dependencies.map( path => {
-                    if ( _isTypeObject( _env[ path[ 0 ] ] ) ) {
-                        return Observer.deep( _env[ path[ 0 ] ], path.slice( 1 ), Observer.observe, record_s => {
-                            script.rerender( ...getPaths( [ path[ 0 ] ], record_s ) );
-                        } );
-                    }
-                    return Observer.deep( globalThis, path, Observer.observe, record_s => {
-                        script.rerender( ...getPaths( [], record_s ) );
+                if ( _isTypeObject( _env[ path[ 0 ] ] ) ) {
+                    if ( path.length === 1 ) return;
+                    return Observer.deep( _env[ path[ 0 ] ], path.slice( 1 ), Observer.observe, record_s => {
+                        script.rerender( ...getPaths( [ path[ 0 ] ], record_s ) );
                     } );
+                }
+                return Observer.deep( globalThis, path, Observer.observe, record_s => {
+                    script.rerender( ...getPaths( [], record_s ) );
                 } );
             } );
         } );
     }
     const window = this, { realdom } = window.webqit;
+    if ( !( thisContext instanceof window.Node ) ) return script;
     realdom.realtime( window.document ).observe( thisContext, () => {
         if ( script.contract ) {
             // Rerending processes,,,
             _await( script.properties, properties => {
-                properties.processes.forEach( process => process.abort() );
+                properties.processes.forEach( process => process?.abort() );
             } );
         }
         thisContext.dispatchEvent( new window.CustomEvent( 'remove' ) );

package/test/imports.test.js

@@ -10,17 +10,16 @@ describe(`HTML Imports`, function() {
     describe( `Basic...`, function() {
         
         const head = `
-        <template exportid="temp0">
+        <template def="temp0">
             <p>Hello world Export</p>
             <p>Hellort</p>
         </template>`;
         const body = `
-        <import module="temp0"></import>`;
+        <import ref="temp0"></import>`;
         const { document } = createDocument( head, body );
 
-        it ( `The document object and <template> elements should expose a "modules" property`, async function() {
-            expect( document ).to.have.property( 'modules' );
-            expect( document.modules.temp0 ).to.have.property( 'modules' );
+        it ( `The document object and <template> elements should expose an "import" property`, async function() {
+            expect( document ).to.have.property( 'import' );
         } );
 
         it ( `<import> element be automatically resolved: import default export...`, async function() {
@@ -39,41 +38,41 @@ describe(`HTML Imports`, function() {
     describe( `Dynamic...`, function() {
         
         const head = `
-        <template exportid="temp0">
+        <template def="temp0">
             <!-- ------- -->
             <p>Hello world Export</p>
             <p>Hellort</p>
-            <input exportid="#input" />
-            <template exportid="temp1">
-                <textarea exportid="#input"></textarea>
-                <template exportid="temp2">
-                    <select exportid="#input"></select>
+            <input def="input" />
+            <template def="temp1">
+                <textarea def="input"></textarea>
+                <template def="temp2">
+                    <select def="input"></select>
                 </template>
             </template>
             <!-- ------- -->
-            <template exportid="_landing1">
-                <div exportid="#main.html">a</div>
-                <template exportid="_landing2">
-                    <div exportid="#main.html">b</div>
-                    <template exportid="_docs">
-                        <div exportid="#main.html">c</div>
+            <template def="_landing1">
+                <div def="main.html">a</div>
+                <template def="_landing2">
+                    <div def="main.html">b</div>
+                    <template def="_docs">
+                        <div def="main.html">c</div>
                     </template>
                 </template>
             </template>
             <!-- ------- -->
-            <template exportid="landing1" extends="_landing1">
-                <div exportid="#README.md">1</div>
-                <template exportid="landing2" extends="_landing2">
-                    <div exportid="#README.md">2</div>
-                    <template exportid="docs" extends="_docs">
-                        <div exportid="#README.md">3</div>
+            <template def="landing1" extends="_landing1">
+                <div def="README.md">1</div>
+                <template def="landing2" extends="_landing2">
+                    <div def="README.md">2</div>
+                    <template def="docs" extends="_docs">
+                        <div def="README.md">3</div>
                     </template>
                 </template>
             </template>
             <!-- ------- -->
         </template>`;
         const body = `
-        <import module="temp0/uuu"></import>`;
+        <import ref="temp0/uuu"></import>`;
         const { document } = createDocument( head, body );
         const importEl = document.querySelector( 'import' );
 
@@ -82,17 +81,17 @@ describe(`HTML Imports`, function() {
         } );
 
         it ( `<import> element should be automatically resolved: new import ID is set...`, async function() {
-            importEl.setAttribute( 'module', 'temp0#input' );
+            importEl.setAttribute( 'ref', 'temp0#input' );
             expect( document.body.firstElementChild.nodeName ).to.eq( 'INPUT' );
         } );
 
         it ( `<import> element should be automatically resolved: new moduleref is set - nested...`, async function() {
-            importEl.setAttribute( 'module', 'temp0/temp1#input' );
+            importEl.setAttribute( 'ref', 'temp0/temp1#input' );
             expect( document.body.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
         } );
 
         it ( `<import> element should be automatically resolved: moduleref is unset - should now be inherited from <body>...`, async function() {
-            importEl.setAttribute( 'module', '#input' );
+            importEl.setAttribute( 'ref', '#input' );
             expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
             document.body.setAttribute( 'importscontext', 'temp0/temp1/temp2' );
             expect( document.body.firstElementChild.nodeName ).to.eq( 'SELECT' );
@@ -107,12 +106,6 @@ describe(`HTML Imports`, function() {
             document.body.querySelector( 'input' ).remove();
             expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
         } );
-
-        /*
-        it ( ``, async function() {
-            console.log('"""""""""""""""""""""""""""""""""""""""""""""', document.modules.temp0.modules.landing1.modules.landing2.modules.docs.modules);
-        } );
-        */
         
     } );
 
@@ -124,24 +117,24 @@ describe(`HTML Imports`, function() {
             const head = ``, body = ``, timeout = 2000;
             const window = createDocument( head, body, window => {
                 // Define a remote response
-                const temp0 = `
-                <template exportid="temp1" src="/temp1.html" loading="lazy"></template>`;
-                const temp1 = `
+                const contents0 = `
+                <template def="temp1" src="/temp1.html" loading="lazy"></template>`;
+                const contents1 = `
                 <p>Hello world Export</p>
                 <p>Hellort</p>
-                <template exportid="temp22">
+                <template def="temp22">
                 </template>`;
-                mockRemoteFetch( window, { '/temp0.html': temp0, '/temp1.html': temp1 }, timeout );
+                mockRemoteFetch( window, { '/temp0.html': contents0, '/temp1.html': contents1 }, timeout );
             } ), document = window.document;
 
             // Add a remote module
             const templateEl = document.createElement( 'template' );
-            templateEl.setAttribute( 'exportid', 'temp0' );
+            templateEl.setAttribute( 'def', 'temp0' );
             templateEl.setAttribute( 'src', '/temp0.html' );
             document.head.appendChild( templateEl );
             // Add the import element to with a view to waiting for the remote module
             const importEl = document.createElement( 'import' );
-            importEl.setAttribute( 'module', 'temp0/temp1' );
+            importEl.setAttribute( 'ref', 'temp0/temp1' );
             document.body.appendChild( importEl );
             // Should stil be waiting...
             expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
@@ -157,51 +150,52 @@ describe(`HTML Imports`, function() {
         it ( `Server-resolved <import> element should maintain relationship with slotted elements...`, async function() {
 
             const head = `
-            <template exportid="temp0">
-                <input exportid="#input" />
-                <template exportid="temp1">
-                    <textarea exportid="#input"></textarea>
-                    <template exportid="temp2">
-                        <select exportid="#input"></select>
+            <template def="temp0">
+                <input def="input" />
+                <template def="temp1">
+                    <textarea def="input"></textarea>
+                    <template def="temp2">
+                        <select def="input"></select>
                     </template>
                 </template>
             </template>`;
             const body = `
             <div importscontext="temp0/temp1">
-                <textarea exportid="#input"></textarea>
-                <!--<import module="#input"></import>-->
+                <textarea def="input"></textarea>
+                <!--<import ref="#input"></import>-->
             </div>`;
             const { document } = createDocument( head, body );
             await delay( 20 );
 
             const routingElement = document.body.firstElementChild;
             expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
-            const temp1 = document.modules.temp0.modules.temp1;
-            const textarea = [ ...temp1.modules[ '#input' ] ][ 0 ];
-            textarea.remove();
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
-            temp1.content.prepend( textarea );
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
-            routingElement.firstElementChild.remove();
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+            document.import( 'temp0/temp1', temp1 => {
+                const textarea = temp1.modules[ '#input' ];
+                textarea.remove();
+                expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+                temp1.content.prepend( textarea );
+                expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
+                routingElement.firstElementChild.remove();
+                expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+            } );
         } );
 
         it ( `Server-resolved <import> element should maintain relationship with slotted elements...`, async function() {
 
             const head = `
-            <template exportid="temp0">
-                <input exportid="#input" />
-                <template exportid="temp1">
-                    <textarea exportid="#input"></textarea>
-                    <template exportid="temp2">
-                        <select exportid="#input"></select>
+            <template def="temp0">
+                <input def="input" />
+                <template def="temp1">
+                    <textarea def="input"></textarea>
+                    <template def="temp2">
+                        <select def="input"></select>
                     </template>
                 </template>
             </template>`;
             const body = `
             <div importscontext="temp0/temp1">
-                <textarea exportid="#input"></textarea>
-                <!--<import module="#input"></import>-->
+                <textarea def="input"></textarea>
+                <!--<import ref="#input"></import>-->
             </div>`;
             const { document } = createDocument( head, body );
             await delay( 20 );

package/test/modules.test.js

@@ -13,35 +13,39 @@ describe(`HTML Modules`, function() {
         it ( `The document object and <template> elements should expose a "modules" property...`, async function() {
             
             const head = `
-            <template exportid="temp0">
+            <template def="temp0">
                 <p>Hello world Export</p>
                 <p>Hellort</p>
             </template>`;
             const body = `
-            <template exportid="temp1" scoped>
+            <template def="temp1" scoped>
                 <p>Hello world Export</p>
                 <p>Hellort</p>
             </template>`;
             const { document } = createDocument( head, body );
             await delay( 200 );
             // -------
-            expect( document ).to.have.property( 'modules' );
-            expect( document.modules[ 'temp0' ] ).to.have.property( 'modules' );
-            expect( document.modules[ 'temp0' ].exportid ).to.eq( 'temp0' );
+            expect( document ).to.have.property( 'import' );
+            document.import( 'temp0', temp0 => {
+                expect( temp0 ).to.have.property( 'modules' );
+                expect( temp0.def ).to.eq( 'temp0' );
+            } );
             // -------
-            expect( document.body ).to.have.property( 'modules' );
-            expect( document.body.modules[ 'temp1' ] ).to.have.property( 'modules' );
-            expect( document.body.modules[ 'temp1' ].exportid ).to.eq( 'temp1' );
-        } );
+            expect( document.body ).to.have.property( 'import' );
+            document.body.import( 'temp1', temp1 => {
+                expect( temp1 ).to.have.property( 'modules' );
+                expect( temp1.def ).to.eq( 'temp1' );
+            } );
+         } );
         
         it ( `The document object and <template> elements should expose a "modules" property...`, async function() {
             
             const body = '', head = `
-            <template exportid="temp0">
+            <template def="temp0">
                 <p>Hello world Export</p>
                 <p>Hellort</p>
-                <template exportid="temp1"></template>
-                <template exportid="temp2" inherits="temp1 temp3">
+                <template def="temp1"></template>
+                <template def="temp2" inherits="temp1 temp3">
                     <p>Hello world Export</p>
                     <p>Hellort</p>
                 </template>
@@ -50,31 +54,32 @@ describe(`HTML Modules`, function() {
             await delay( 20 );
             const { webqit: { Observer } } = window;
             // -------
-            const temp0 = Observer.deep( document.modules, getQueryPath( 'temp0' ), Observer.get );
-            expect( temp0 ).to.have.property( 'modules' );
-            expect( temp0.modules[ '#default' ] ).to.have.length( 2 );
-            const temp2 = Observer.deep( document.modules, getQueryPath( 'temp0/temp2' ), Observer.get );
-            expect( temp2 ).to.have.property( 'modules' );
-            // -------
-            const temp1Inherited = Observer.deep( document.modules, getQueryPath( 'temp0/temp2/temp1' ), Observer.get );
-            expect( temp1Inherited ).to.have.property( 'modules' );
-            // -------
-            const temp3Observed = [];
-            Observer.deep( document.modules, getQueryPath( 'temp0/temp2/temp3' ), Observer.observe, record => {
-                temp3Observed.push( record.value );
+            document.import( 'temp0', temp0 => {
+                expect( temp0 ).to.have.property( 'modules' );
+                expect( temp0.modules[ '#' ] ).to.have.length( 2 );
+                const temp2 = Observer.deep( temp0.modules, getQueryPath( 'temp2' ), Observer.get );
+                expect( temp2 ).to.have.property( 'modules' );
+                // -------
+                const temp1Inherited = Observer.deep( temp0.modules, getQueryPath( 'temp2/temp1' ), Observer.get );
+                expect( temp1Inherited ).to.have.property( 'modules' );
+                // -------
+                const temp3Observed = [];
+                Observer.deep( temp0.modules, getQueryPath( 'temp2/temp3' ), Observer.observe, record => {
+                    temp3Observed.push( record.value );
+                } );
+                // -------
+                const temp3 = document.createElement( 'template' );
+                temp3.setAttribute( 'def', 'temp3' );
+                temp0.content.appendChild( temp3 );
+                // -------
+                expect( temp3Observed ).to.be.an( 'array' ).with.length( 1 );
+                expect( temp3Observed[ 0 ] ).to.have.property( 'modules' );
+                // -------
+                const temp3Inherited = Observer.deep( temp0.modules, getQueryPath( 'temp2/temp3' ), Observer.get );
+                expect( temp3Inherited ).to.have.property( 'modules' );
+                // -------
             } );
-            // -------
-            const temp3 = document.createElement( 'template' );
-            temp3.setAttribute( 'exportid', 'temp3' );
-            temp0.content.appendChild( temp3 );
-            // -------
-            expect( temp3Observed ).to.be.an( 'array' ).with.length( 1 );
-            expect( temp3Observed[ 0 ] ).to.have.property( 'modules' );
-            // -------
-            const temp3Inherited = Observer.deep( document.modules, getQueryPath( 'temp0/temp2/temp3' ), Observer.get );
-            expect( temp3Inherited ).to.have.property( 'modules' );
-            // -------
-        } );
+       } );
 
     } );
 
@@ -86,49 +91,50 @@ describe(`HTML Modules`, function() {
             const head = ``, body = ``;
             const { document, window } = createDocument( head, body, window => {
                 // Define remote responses
-                const temp0 = `
-                <template exportid="temp1" src="/temp1.html" loading="lazy"></template>`;
-                const temp1 = `
-                <template exportid="temp2" src="/temp2.html"></template>`;
-                const temp2 = `
-                <template exportid="temp3"></template>
+                const contents0 = `
+                <template def="temp1" src="/temp1.html" loading="lazy"></template>`;
+                const contents1 = `
+                <template def="temp2" src="/temp2.html"></template>`;
+                const contents2 = `
+                <template def="temp3"></template>
                 <p>Hello world Export</p>
                 <p>Hellort</p>`;
                 const timeout = 1000;
-                mockRemoteFetch( window, { '/temp0.html': temp0, '/temp1.html': temp1, '/temp2.html': temp2 }, timeout );
+                mockRemoteFetch( window, { '/temp0.html': contents0, '/temp1.html': contents1, '/temp2.html': contents2 }, timeout );
             } );
             await delay( 20 );
             const { webqit: { Observer } } = window;
             // -------
             // Add a remote module
             const templateEl = document.createElement( 'template' );
-            templateEl.setAttribute( 'exportid', 'temp0' );
+            templateEl.setAttribute( 'def', 'temp0' );
             templateEl.setAttribute( 'loading', 'lazy' );
             templateEl.setAttribute( 'src', '/temp0.html' );
             document.head.appendChild( templateEl );
             // -------
             // Add the import element to with a view to waiting for the remote module
-            const temp0 = Observer.deep( document.modules, getQueryPath( 'temp0' ), Observer.get );
-            expect( temp0 ).to.have.property( 'modules' );
-            await delay( 2100 );
-            // temp1 shouldn't have been automatically loaded still
-            const hasTemp1 = Observer.deep( document.modules, getQueryPath( 'temp0/temp1' ), Observer.has );
-            expect( hasTemp1 ).to.be.false;
-            // Try access temp1 to trigger loading and await
-            const _temp1 = await Observer.deep( document.modules, getQueryPath( 'temp0/temp1' ), Observer.get );
-            expect( _temp1 ).to.have.property( 'modules' );
-            // -------
-            // Receive updates
-            const temp3Observed = [];
-            Observer.deep( document.modules, getQueryPath( 'temp0/temp1/temp2/temp3' ), Observer.observe, ( record, lifecycle ) => {
-                temp3Observed.push( record.value );
+            document.import( 'temp0', async temp0 => {
+                expect( temp0 ).to.have.property( 'modules' );
+                await delay( 2100 );
+                // temp1 shouldn't have been automatically loaded still
+                const hasTemp1 = Observer.deep( temp0.modules, getQueryPath( 'temp1' ), Observer.has );
+                expect( hasTemp1 ).to.be.false;
+                // Try access temp1 to trigger loading and await
+                const _temp1 = await Observer.deep( temp0.modules, getQueryPath( 'temp1' ), Observer.get );
+                expect( _temp1 ).to.have.property( 'modules' );
+                // -------
+                // Receive updates
+                const temp3Observed = [];
+                Observer.deep( temp0.modules, getQueryPath( 'temp1/temp2/temp3' ), Observer.observe, ( record, lifecycle ) => {
+                    temp3Observed.push( record.value );
+                } );
+                await delay( 2100 );
+                // -------
+                // temp2 should be loaded by now
+                expect( temp3Observed ).to.be.an( 'array' ).with.length( 1 );
+                expect( temp3Observed[ 0 ] ).to.have.property( 'modules' );
+                expect( temp3Observed[ 0 ].getAttribute( 'def' ) ).to.eq( 'temp3' );
             } );
-            await delay( 2100 );
-            // -------
-            // temp2 should be loaded by now
-            expect( temp3Observed ).to.be.an( 'array' ).with.length( 1 );
-            expect( temp3Observed[ 0 ] ).to.have.property( 'modules' );
-            expect( temp3Observed[ 0 ].getAttribute( 'exportid' ) ).to.eq( 'temp3' );
         } );
     } );
 
@@ -138,8 +144,8 @@ describe(`HTML Modules`, function() {
         it( `Use the context API to fire a scoped-request that is imitially resolved from the document and then from a scoped context.`, async function() {
 
             const head = `
-            <template exportid="temp0">
-                <template exportid="temp-head1">
+            <template def="temp0">
+                <template def="temp-head1">
                     <p>Hello world Export</p>
                     <p>Hellort</p>
                 </template>
@@ -152,7 +158,7 @@ describe(`HTML Modules`, function() {
             // -------
             const addScopedModules = () => {
                 const templateEl = document.createElement( 'template' );
-                templateEl.setAttribute( 'exportid', 'temp0' );
+                templateEl.setAttribute( 'def', 'temp0' );
                 templateEl.toggleAttribute( 'scoped', true );
                 const scoped = document.body.appendChild( templateEl );
                 document.body.setAttribute( 'importscontext', '/' );
@@ -160,7 +166,7 @@ describe(`HTML Modules`, function() {
             };
             // -------
             const contextRequest = ( el, params, callback ) => {
-                const request = { type: 'HTMLModules', live: true, ...params };
+                const request = { type: 'htmlimports', live: true, ...params };
                 const event = new document.context.ContextRequestEvent( request, callback, {
                     bubbles: true,
                 } );
@@ -189,11 +195,13 @@ describe(`HTML Modules`, function() {
             expect( modulesObjs ).to.have.length( 5 );
             expect( modulesObjs[ 4 ] ).to.have.property( 'scoped', true );
             // -------
-            const unscoped = document.modules.temp0;
-            unscoped.remove();
-            document.head.appendChild( unscoped );
-            document.body.remove();
-            expect( modulesObjs ).to.have.length( 5 );
+            document.import( 'temp0', temp0 => {
+                const unscoped = temp0;
+                unscoped.remove();
+                document.head.appendChild( unscoped );
+                document.body.remove();
+                expect( modulesObjs ).to.have.length( 5 );
+            } );
         } );
     } );