@webqit/oohtml 2.0.2 → 2.1.1

package/package.json

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

package/src/context-api/HTMLContext.js

@@ -107,13 +107,13 @@ export default class HTMLContext {
      * @handleEvent()
      */
     handleEvent( event ) {
-        if ( this.disposed || ( event.target === this.host && !event.request?.selfScoped )
+        if ( this.disposed || ( event.target === this.host && event.request?.superContextOnly )
         || !event.request || typeof event.callback !== 'function' || !this.constructor.matchRequest( this.id, event.request ) ) return;
         event.stopPropagation();
         if ( event.type === 'contextclaim' ) {
             const claims = new Set;
             this.subscriptions.forEach( subscriptionEvent => {
-                if ( !event.target.contains( subscriptionEvent.request.selfScoped ? subscriptionEvent.target : subscriptionEvent.target.parentNode ) 
+                if ( !event.target.contains( subscriptionEvent.request.superContextOnly ? subscriptionEvent.target.parentNode : subscriptionEvent.target ) 
                 || !this.constructor.matchRequest( event.request/*provider ID*/, subscriptionEvent.request/*request ID*/ ) ) return;
                 this.subscriptions.delete( subscriptionEvent );
                 claims.add( subscriptionEvent );
@@ -133,7 +133,7 @@ export default class HTMLContext {
         this.disposed = false;
         host.addEventListener( 'contextrequest', this );
         host.addEventListener( 'contextclaim', this );
-        HTMLContextManager.instance( host ).ask( this.id, claims => claims.forEach( subscriptionEvent => {
+        HTMLContextManager.instance( host ).ask( { ...this.id, superContextOnly: true }, claims => claims.forEach( subscriptionEvent => {
             this.subscribe( subscriptionEvent );
             this.handle( subscriptionEvent );
         } ), { type: 'contextclaim' } );

package/src/html-imports/_HTMLImportElement.js

@@ -53,7 +53,7 @@ export default function( params ) {
 
             priv.importRequest = ( callback, signal = null ) => {
                 const detail = priv.moduleRef && !priv.moduleRef.includes( '#' ) ? `${ priv.moduleRef }#default` : priv.moduleRef;
-                const request = _HTMLImportsContext.createRequest( { detail, live: signal && true, signal, selfScoped: true } );
+                const request = _HTMLImportsContext.createRequest( { detail, live: signal && true, signal } );
                 HTMLContextManager.instance( this.el.isConnected ? this.el.parentNode : priv.anchorNode.parentNode ).ask( request, response => {
                     callback( ( response instanceof Set ? new Set( response ) : response ) || [] );
                 } );
@@ -73,9 +73,9 @@ export default function( params ) {
                 priv.hydrationImportRequest = new AbortController;
                 priv.importRequest( modules => {
                     if ( priv.originalsRemapped ) { return this.fill( modules ); }
-                    const identifiersMap = [ ...modules ].map( module => ( { el: module, exportId: module.getAttribute( params.export.attr.exportid ) || 'default', tagName: module.tagName, } ) );
+                    const identifiersMap = [ ...modules ].map( module => ( { el: module, exportId: module.getAttribute( params.export.attr.exportid ) || '#default', tagName: module.tagName, } ) );
                     slottedElements.forEach( slottedElement => {
-                        const tagName = slottedElement.tagName, exportId = slottedElement.getAttribute( params.export.attr.exportid ) || 'default';
+                        const tagName = slottedElement.tagName, exportId = slottedElement.getAttribute( params.export.attr.exportid ) || '#default';
                         const originalsMatch = identifiersMap.filter( moduleIdentifiers => tagName === moduleIdentifiers.tagName && exportId === moduleIdentifiers.exportId );
                         if ( originalsMatch.length !== 1 ) return;
                         _( slottedElement ).set( 'original@imports', originalsMatch[ 0 ].el );

package/src/html-modules/HTMLExportsManager.js

@@ -71,32 +71,32 @@ export default class HTMLExportsManager {
         const fragmentsExports = new Map;
         entries.forEach( entry => {
             if ( entry.nodeType !== 1 ) return;
-            if ( entry.matches( this.params.templateSelector ) ) {
+            const exportId = ( entry.getAttribute( this.params.export.attr.exportid ) || '' ).trim() || '#default';
+            const isPackage = entry.matches( this.params.templateSelector );
+            if ( exportId.startsWith( '#' ) ) {
+                this.validateExportId( exportId.substring( 1 ) );
+                if ( !fragmentsExports.has( exportId ) ) { fragmentsExports.set( exportId, [] ); }
+                fragmentsExports.get( exportId ).push( entry );
+            } else {
                 if ( isConnected ) {
-                    const moduleExport = new HTMLExportsManager( entry, this.params, this.host, this.level + 1 );
-                    if ( moduleExport.exportId ) { Observer.set( this.modules, moduleExport.exportId, entry ); }
+                    if ( isPackage ) { new HTMLExportsManager( entry, this.params, this.host, this.level + 1 ); }
+                    Observer.set( this.modules, exportId, entry );
                 } else {
-                    const moduleExport = HTMLModulesGraph.instance( entry, this.params );
-                    if ( moduleExport.exportId ) { Observer.deleteProperty( this.modules, moduleExport.exportId ); }
-                    moduleExport.dispose();
+                    if ( isPackage ) { HTMLModulesGraph.instance( entry, this.params ).dispose(); }
+                    Observer.deleteProperty( this.modules, exportId );
                 }
-            } else {
-                const exportId = ( entry.getAttribute( this.params.export.attr.exportid ) || '' ).trim() || 'default';
-                this.validateExportId( exportId );
-                if ( !fragmentsExports.has( exportId ) ) { fragmentsExports.set( exportId, [] ); }
-                fragmentsExports.get( exportId ).push( entry );
             }
         } );
         // ----------------
         fragmentsExports.forEach( ( fragments, exportId ) => {
-            let existingFragments = Observer.get( this.modules, `#${ exportId }` );
+            let existingFragments = Observer.get( this.modules, exportId );
             if ( isConnected ) {
                 existingFragments = new Set( ( existingFragments ? [ ...existingFragments ] : [] ).concat( fragments ) );
             } else if ( existingFragments ) {
                 fragments.forEach( el => existingFragments.delete( el ) );
             }
-            if ( !isConnected && !existingFragments.size ) { Observer.deleteProperty( this.modules, `#${ exportId }` ); }
-            else { Observer.set( this.modules, `#${ exportId }`, existingFragments ) }
+            if ( !isConnected && !existingFragments.size ) { Observer.deleteProperty( this.modules, exportId ); }
+            else { Observer.set( this.modules, exportId, existingFragments ) }
         } );
     }
 
@@ -158,20 +158,28 @@ export default class HTMLExportsManager {
      * @returns Void|AbortController
      */
     evalInheritance( ) {
-        let inheritedIds;
-        if ( this.parent && ( inheritedIds = ( this.host.getAttribute( this.params.template.attr.inherits ) || '' ).trim() ) 
-        && ( inheritedIds = inheritedIds.split( ' ' ).map( id => id.trim() ) ).length ) {
-            const parentExportsObj = getModulesObject( this.parent );
-            return Observer.get( parentExportsObj, inheritedIds, records => {
-                records.forEach( record => {
-                    if ( [ 'get'/*initial get*/, 'set', 'defineProperty' ].includes( record.type ) ) {
-                        Observer[ record.type.replace( 'get', 'set' ) ]( this.modules, record.key, record.value );
-                    } else if ( record.type === 'deleteProperty' ) {
-                        Observer.deleteProperty( this.modules, record.key );
-                    }
-                } );
-            }, { live: true } );
+        if ( !this.parent ) return [];
+        let extendedId = ( this.host.getAttribute( this.params.template.attr.extends ) || '' ).trim();
+        let inheritedIds = ( this.host.getAttribute( this.params.template.attr.inherits ) || '' ).trim();
+        const handleInherited = records => {
+            records.forEach( record => {
+                if ( Observer.get( this.modules, record.key ) !== record.oldValue ) return;
+                if ( [ 'get'/*initial get*/, 'set', 'defineProperty' ].includes( record.type ) ) {
+                    Observer[ record.type.replace( 'get', 'set' ) ]( this.modules, record.key, record.value );
+                } else if ( record.type === 'deleteProperty' ) {
+                    Observer.deleteProperty( this.modules, record.key );
+                }
+            } );
+        };
+        const realtimes = [];
+        const parentExportsObj = getModulesObject( this.parent );
+        if ( extendedId ) {
+            realtimes.push( Observer.deep( parentExportsObj, [ extendedId, this.params.template.api.modules, Infinity ], Observer.get, handleInherited, { live: true } ) );
+        }
+        if ( ( inheritedIds = inheritedIds.split( ' ' ).map( id => id.trim() ).filter( x => x ) ).length ) {
+            realtimes.push( Observer.get( parentExportsObj, inheritedIds, handleInherited, { live: true } ) );
         }
+        return realtimes;
     }
     
     /**
@@ -182,7 +190,7 @@ export default class HTMLExportsManager {
     dispose() {
         this.realtimeA.disconnect();
         this.realtimeB.disconnect();
-        this.realtimeC?.abort();
+        this.realtimeC.forEach( r => r.abort() );
         Object.entries( this.modules ).forEach( ( [ key, entry ] ) => {
             if ( key.startsWith( '#' ) ) return;
             HTMLExportsManager.instance( entry ).dispose();

package/src/html-modules/_HTMLImportsContext.js

@@ -82,7 +82,7 @@ export default class _HTMLImportsContext extends HTMLContext {
                 return update();
             }
             // This superModules contextrequest is automatically aborted by the injected signal below
-            const request = this.constructor.createRequest( { detail: record.value.trim(), live: true, signal } );
+            const request = this.constructor.createRequest( { detail: record.value.trim(), live: true, signal, superContextOnly: true } );
             HTMLContextManager.instance( this.host ).ask( request, response => {
                 this.altModules = !( response && Object.getPrototypeOf( response ) ) ? response : getModulesObject( response );
                 update();

package/src/html-modules/index.js

@@ -19,7 +19,7 @@ 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' }, },
+        template: { attr: { exportid: 'exportid', extends: 'extends', inherits: 'inherits' }, api: { modules: 'modules', exportid: 'exportid' }, },
         context: { attr: { importscontext: 'importscontext', contextname: 'contextname' }, api: { modules: 'modules' }, },
         export: { attr: { exportid: 'exportid' }, },
         staticsensitivity: true,
@@ -49,7 +49,7 @@ 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 ( !event.value || !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();

package/test/imports.test.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import { expect } from 'chai';
-import { delay, createDocument, mockRemoteFetch, printDocument, _ } from './index.js';
+import { delay, createDocument, mockRemoteFetch, _ } from './index.js';
 
 describe(`HTML Imports`, function() {
 
@@ -41,15 +41,37 @@ describe(`HTML Imports`, function() {
         
         const head = `
         <template exportid="temp0">
+            <!-- ------- -->
             <p>Hello world Export</p>
             <p>Hellort</p>
-            <input exportid="input" />
+            <input exportid="#input" />
             <template exportid="temp1">
-                <textarea exportid="input"></textarea>
+                <textarea exportid="#input"></textarea>
                 <template exportid="temp2">
-                    <select exportid="input"></select>
+                    <select exportid="#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>
+                </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>
+                </template>
+            </template>
+            <!-- ------- -->
         </template>`;
         const body = `
         <import module="temp0/uuu"></import>`;
@@ -86,6 +108,12 @@ 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);
+        } );
+        */
         
     } );
 
@@ -131,17 +159,17 @@ describe(`HTML Imports`, function() {
 
             const head = `
             <template exportid="temp0">
-                <input exportid="input" />
+                <input exportid="#input" />
                 <template exportid="temp1">
-                    <textarea exportid="input"></textarea>
+                    <textarea exportid="#input"></textarea>
                     <template exportid="temp2">
-                        <select exportid="input"></select>
+                        <select exportid="#input"></select>
                     </template>
                 </template>
             </template>`;
             const body = `
             <div importscontext="temp0/temp1">
-                <textarea exportid="input"></textarea>
+                <textarea exportid="#input"></textarea>
                 <!--<import module="#input"></import>-->
             </div>`;
             const { document } = createDocument( head, body );
@@ -163,17 +191,17 @@ describe(`HTML Imports`, function() {
 
             const head = `
             <template exportid="temp0">
-                <input exportid="input" />
+                <input exportid="#input" />
                 <template exportid="temp1">
-                    <textarea exportid="input"></textarea>
+                    <textarea exportid="#input"></textarea>
                     <template exportid="temp2">
-                        <select exportid="input"></select>
+                        <select exportid="#input"></select>
                     </template>
                 </template>
             </template>`;
             const body = `
             <div importscontext="temp0/temp1">
-                <textarea exportid="input"></textarea>
+                <textarea exportid="#input"></textarea>
                 <!--<import module="#input"></import>-->
             </div>`;
             const { document } = createDocument( head, body );

package/test/test.html

@@ -2,21 +2,21 @@
 <html>
     <head>
         <meta name="oohtml" content="script.retention=hidden" />
-        <script src="https://unpkg.com/@webqit/oohtml/dist/main.js"></script>
+        <script src="/oohtml/dist/main.js"></script>
         <script>
             window.extVar = 'External variable initial value.';
             window.Observer = wq.Observer;
         </script>
         <template exportid="temp0">
-            <input exportid="input" />
+            <input exportid="#input" />
             <template exportid="temp1">
-                <textarea exportid="input"></textarea>
+                <textarea exportid="#input" placeholder="This is to be rendered"></textarea>
                 <template exportid="temp2">
-                    <select exportid="input"></select>
+                    <select exportid="#input"></select>
                 </template>
                 <template exportid="temp2b" inherits="#input"></template>
                 <template exportid="temp2c">
-                    <textarea exportid="input"></textarea>
+                    <textarea exportid="#input"></textarea>
                 </template>
             </template>
         </template>
@@ -24,7 +24,7 @@
     <body>
 
         <div importscontext="temp0/temp1">
-            <textarea exportid="input"></textarea>
+            <textarea exportid="#input" placeholder="This is server-rendered"></textarea>
             <!--<import module="#input"></import>-->
         </div>