@webqit/oohtml 4.5.8 → 4.5.10

package/package.json

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

package/src/data-binding/index.js

@@ -219,7 +219,6 @@ function compileInlineBindings( config, str ) {
                 let $iteratee__ = ${ iteratee };
                 let $import__ = this.${ config.HTML_IMPORTS.api.import }( ${ importSpec.trim() }, true );
                 this.$oohtml_internal_databinding_signals?.push( $import__ );
-
                 if ( $import__.value && $iteratee__ ) {
                     let $existing__ = new Map;
                     [ ...this.children ].filter( el => el.matches( '[${ config.attr.itemIndex }]' ) ).forEach( x => {

package/src/html-imports/HTMLImportsContext.js

@@ -16,60 +16,60 @@ export default class HTMLImportsContext extends DOMContext {
     /**
      * @createRequest
      */
-    static createRequest( detail = null ) {
+    static createRequest(detail = null) {
         const request = super.createRequest();
-        if ( detail?.startsWith( '/' ) ) {
+        if (detail?.startsWith('/')) {
             request.detail = detail;
             request.targetContext = Infinity;
-        } else if ( detail?.startsWith( '@' ) ) {
-            const [ targetContext, ..._detail ] = detail.slice( 1 ).split( /(?<=\w)(?=\/|#)/ ).map( s => s.trim() );
+        } else if (detail?.startsWith('@')) {
+            const [targetContext, ..._detail] = detail.slice(1).split(/(?<=\w)(?=\/|#)/).map(s => s.trim());
             request.targetContext = targetContext;
-            request.detail = _detail.join( '' );
+            request.detail = _detail.join('');
         } else { request.detail = detail; }
         return request;
     }
-     
+
     /**
      * @localModules
      */
-    get localModules() { return getDefs( this.host ); }
+    get localModules() { return getDefs(this.host); }
     get inheritedModules() { return this.#inheritedModules; }
     #inheritedModules = {};
 
     /**
      * @handle()
      */
-    
-    handle( event ) {
+
+    handle(event) {
         const { window: { webqit: { Observer } } } = env;
         // Any existing event.meta.controller? Abort!
         event.meta.controller?.abort();
         // Parse and translate detail
-        let path = ( event.detail || '' ).split( /\/|(?<=\w)(?=#)/g ).map( x => x.trim() ).filter( x => x );
-        if ( !path.length ) return event.respondWith();
-        path = path.join( `/${ this.configs.HTML_IMPORTS.api.defs }/` )?.split( '/' ).map( x => x === '*' ? Infinity : x ) || [];
+        let path = (event.detail || '').split(/\/|(?<=\w)(?=#)/g).map(x => x.trim()).filter(x => x);
+        if (!path.length) return event.respondWith();
+        path = path.join(`/${this.configs.HTML_IMPORTS.api.defs}/`)?.split('/').map(x => x === '*' ? Infinity : x) || [];
         // We'll now fulfill request
-        const options = { live: event.live, signal: event.signal, descripted: true };
-        event.meta.controller = Observer.reduce( this.#modules, path, Observer.get, ( m ) => {
-            if ( Array.isArray( m ) ) {
-                if ( !m.length ) {
+        const options = { live: event.live, sig_nal: event.signal, descripted: true };
+        event.meta.controller = Observer.reduce(this.#modules, path, Observer.get, (m) => {
+            if (Array.isArray(m)) {
+                if (!m.length) {
                     event.respondWith();
                     return;
                 }
                 // Paths with wildcard
-                for ( const n of m ) {
-                    event.respondWith( n );
+                for (const n of m) {
+                    event.respondWith(n);
                 }
             } else {
-                event.respondWith( m.value );
+                event.respondWith(m.value);
             }
-        }, options );
+        }, options);
     }
 
     /**
      * @unsubscribed()
      */
-    unsubscribed( event ) { event.meta.controller?.abort(); }
+    unsubscribed(event) { event.meta.controller?.abort(); }
 
     /**
      * @initialize()
@@ -77,21 +77,21 @@ export default class HTMLImportsContext extends DOMContext {
     #modules;
     #controller1;
     #controller2;
-    initialize( host ) {
+    initialize(host) {
         this.host = host;
         const { window: { webqit: { Observer } } } = env;
         // ----------------
         // Resolve
         const resolve = () => {
             for (const key of new Set([...Object.keys(this.localModules), ...Object.keys(this.inheritedModules), ...Object.keys(this.#modules)])) {
-                if ( !Observer.has( this.localModules, key ) && !Observer.has( this.inheritedModules, key ) ) {
-                    Observer.deleteProperty( this.#modules, key );
-                } else if (key === '#' && Observer.has( this.localModules, key ) && Observer.has( this.inheritedModules, key ) ) {
-                    Observer.set( this.#modules, key, [...Observer.get( this.localModules, key ), ...Observer.get( this.inheritedModules, key )] );
+                if (!Observer.has(this.localModules, key) && !Observer.has(this.inheritedModules, key)) {
+                    Observer.deleteProperty(this.#modules, key);
+                } else if (key === '#' && Observer.has(this.localModules, key) && Observer.has(this.inheritedModules, key)) {
+                    Observer.set(this.#modules, key, [...Observer.get(this.localModules, key), ...Observer.get(this.inheritedModules, key)]);
                 } else {
-                    const _module = Observer.get( this.localModules, key ) || Observer.get( this.inheritedModules, key );
-                    if ( Observer.get( this.#modules, key ) !== _module ) {
-                        Observer.set( this.#modules, key, _module );
+                    const _module = Observer.get(this.localModules, key) || Observer.get(this.inheritedModules, key);
+                    if (Observer.get(this.#modules, key) !== _module) {
+                        Observer.set(this.#modules, key, _module);
                     }
                 }
             }
@@ -100,53 +100,52 @@ export default class HTMLImportsContext extends DOMContext {
         // Observe local
         this.#modules = { ...this.localModules };
         this.#controller1?.abort();
-        this.#controller1 = Observer.observe( this.localModules, () => resolve('local'), { timing: 'sync' } );
+        this.#controller1 = Observer.observe(this.localModules, () => resolve('local'), { timing: 'sync' });
         // ----------------
         // If host has importscontext attr, compute that
         const $config = this.configs.HTML_IMPORTS;
-        if ( this.host.matches && $config.attr.importscontext ) {
+        if (this.host.matches && $config.attr.importscontext) {
             const realdom = this.host.ownerDocument.defaultView.webqit.realdom;
             let prevRef;
             this.#controller2?.disconnect();
-            this.#controller2 = realdom.realtime( this.host ).attr( $config.attr.importscontext, ( record, { signal } ) => { 
-                const moduleRef = ( record.value || '' ).trim();
-                if ( moduleRef === prevRef ) return;
+            this.#controller2 = realdom.realtime(this.host).attr($config.attr.importscontext, (record, { signal }) => {
+                const moduleRef = (record.value || '').trim();
                 prevRef = moduleRef;
                 // This superModules contextrequest is automatically aborted by the injected signal below
                 this.#inheritedModules = {};
-                const request = { ...this.constructor.createRequest( moduleRef ? `${moduleRef}/*` : '*' ), live: true, signal, diff: true };
-                this.host.parentNode[ this.configs.CONTEXT_API.api.contexts ].request( request, ( m ) => {
-                    if ( !m ) {
+                const request = { ...this.constructor.createRequest(moduleRef ? `${moduleRef}/*` : '*'), live: true, signal, diff: true };
+                this.host.parentNode[this.configs.CONTEXT_API.api.contexts].request(request, (m) => {
+                    if (!m) {
                         this.#inheritedModules = {};
                         resolve('inherited');
-                    } else if ( m.type === 'delete' ) {
+                    } else if (m.type === 'delete') {
                         delete this.#inheritedModules[m.key];
-                        if ( !Reflect.has( this.localModules, m.key ) ) {
-                            Observer.deleteProperty( this.#modules, m.key );
+                        if (!Reflect.has(this.localModules, m.key)) {
+                            Observer.deleteProperty(this.#modules, m.key);
                         }
                     } else {
                         this.#inheritedModules[m.key] = m.value;
-                        if ( !Reflect.has( this.localModules, m.key ) && Reflect.get( this.#modules, m.key ) !== m.value ) {
-                            Observer.set( this.#modules, m.key, m.value );
+                        if (!Reflect.has(this.localModules, m.key) && Reflect.get(this.#modules, m.key) !== m.value) {
+                            Observer.set(this.#modules, m.key, m.value);
                         }
                     }
-                } );
+                });
                 resolve('inherited');
-            }, { live: true, timing: 'sync', oldValue: true, lifecycleSignals: true } );
+            }, { live: true, timing: 'sync', oldValue: true, lifecycleSignals: true });
         }
         // ----------------
-        return super.initialize( host );
+        return super.initialize(host);
     }
-    
+
     /**
      * @dispose()
      */
-    dispose( host ) {
+    dispose(host) {
         // Stop listening for sources
         this.#controller1?.abort();
         this.#controller2?.disconnect();
         // Now, stop listening for contextrequest and contextclaim events
         // And relinquish own subscribers to owner context
-        return super.dispose( host );
+        return super.dispose(host);
     }
 }

package/src/html-imports/HTMLModule.js

@@ -10,37 +10,37 @@ export default class HTMLModule {
     /**
      * @instance
      */
-    static instance( host ) {
-        return _wq( host ).get( 'defsmanager::instance' ) || new this( host );
+    static instance(host) {
+        return _wq(host).get('defsmanager::instance') || new this(host);
     }
 
     /**
      * @constructor
      */
-    constructor( host, parent = null, level = 0 ) {
+    constructor(host, parent = null, level = 0) {
         const { window } = env, { webqit: { realdom, oohtml: { configs } } } = window;
-        _wq( host ).get( `defsmanager::instance` )?.dispose();
-        _wq( host ).set( `defsmanager::instance`, this );
+        _wq(host).get(`defsmanager::instance`)?.dispose();
+        _wq(host).set(`defsmanager::instance`, this);
         this.window = window;
         this.host = host;
         this.config = configs.HTML_IMPORTS;
         this.parent = parent;
         this.level = level;
-        this.defs = getDefs( this.host );
-        this.defId = ( this.host.getAttribute( this.config.attr.def ) || '' ).trim();
-        this.validateDefId( this.defId );
+        this.defs = getDefs(this.host);
+        this.defId = (this.host.getAttribute(this.config.attr.def) || '').trim();
+        this.validateDefId(this.defId);
         // ----------
-        this.realtimeA = realdom.realtime( this.host.content ).children( record => {
-            this.expose( record.entrants, true );
-            this.expose( record.exits, false );
-        }, { live: true, timing: 'sync' } );
+        this.realtimeA = realdom.realtime(this.host.content).children(record => {
+            this.expose(record.exits, false); // Must come first
+            this.expose(record.entrants, true);
+        }, { live: true, timing: 'sync' });
         // ----------
-        this.realtimeB = realdom.realtime( this.host ).attr( [ 'src', 'loading' ], ( ...args ) => this.evaluateLoading( ...args ), {
+        this.realtimeB = realdom.realtime(this.host).attr(['src', 'loading'], (...args) => this.evaluateLoading(...args), {
             live: true,
             atomic: true,
             timing: 'sync',
             lifecycleSignals: true
-        } );
+        });
         // ----------
         this.realtimeC = this.evalInheritance();
         // ----------
@@ -53,9 +53,9 @@ export default class HTMLModule {
      *
      * @returns Void
      */
-    validateDefId( defId ) {
-        if ( [ '@', '/', '*', '#' ].some( token => defId.includes( token ) ) ) {
-            throw new Error( `The export ID "${ defId }" contains an invalid character.` );
+    validateDefId(defId) {
+        if (['@', '/', '*', '#'].some(token => defId.includes(token))) {
+            throw new Error(`The export ID "${defId}" contains an invalid character.`);
         }
     }
 
@@ -67,39 +67,39 @@ export default class HTMLModule {
      *
      * @returns Void
      */
-    expose( entries, isConnected ) {
+    expose(entries, isConnected) {
         const { window } = env, { webqit: { Observer } } = window;
-        let dirty, allFragments = this.defs[ '#' ] || [];
-        entries.forEach( entry => {
-            if ( !entry || entry.nodeType !== 1 ) return;
-            const isTemplate = entry.matches( this.config.templateSelector );
-            const defId = ( entry.getAttribute( isTemplate ? this.config.attr.def : this.config.attr.fragmentdef ) || '' ).trim();
-            if ( isConnected ) {
-                if ( isTemplate && defId ) {
-                    new HTMLModule( entry, this.host, this.level + 1 );
+        let dirty, allFragments = this.defs['#'] || [];
+        entries.forEach(entry => {
+            if (!entry || entry.nodeType !== 1) return;
+            const isTemplate = entry.matches(this.config.templateSelector);
+            const defId = (entry.getAttribute(isTemplate ? this.config.attr.def : this.config.attr.fragmentdef) || '').trim();
+            if (isConnected) {
+                if (isTemplate && defId) {
+                    new HTMLModule(entry, this.host, this.level + 1);
                 } else {
-                    allFragments.push( entry );
+                    allFragments.push(entry);
                     dirty = true;
-                    if ( typeof requestIdleCallback === 'function' ) {
-                        requestIdleCallback( () => {
-                            this.config.idleCompilers?.forEach( callback => callback.call( this.window, entry ) );
-                        } );
+                    if (typeof requestIdleCallback === 'function') {
+                        requestIdleCallback(() => {
+                            this.config.idleCompilers?.forEach(callback => callback.call(this.window, entry));
+                        });
                     }
                 }
-                if ( defId ) {
-                    this.validateDefId( defId );
-                    Observer.set( this.defs, ( !isTemplate && '#' || '' ) + defId, entry );
+                if (defId) {
+                    this.validateDefId(defId);
+                    Observer.set(this.defs, (!isTemplate && '#' || '') + defId, entry);
                 }
             } else {
-                if ( isTemplate && defId ) { HTMLModule.instance( entry ).dispose(); }
+                if (isTemplate && defId) { HTMLModule.instance(entry).dispose(); }
                 else {
-                    allFragments = allFragments.filter( x => x !== entry );
+                    allFragments = allFragments.filter(x => x !== entry);
                     dirty = true;
                 }
-                if ( defId ) Observer.deleteProperty( this.defs, ( !isTemplate && '#' || '' ) + defId );
+                if (defId) Observer.deleteProperty(this.defs, (!isTemplate && '#' || '') + defId);
             }
-        } );
-        if ( dirty ) Observer.set( this.defs, '#', allFragments );
+        });
+        if (dirty) Observer.set(this.defs, '#', allFragments);
     }
 
     /**
@@ -109,23 +109,23 @@ export default class HTMLModule {
      * 
      * @returns Void
      */
-    evaluateLoading( [ record1, record2 ], { signal } ) {
+    evaluateLoading([record1, record2], { signal }) {
         const { window: { webqit: { Observer } } } = env;
-        const src = ( record1.value || '' ).trim();
-        if ( !src ) return;
+        const src = (record1.value || '').trim();
+        if (!src) return;
         let $loadingPromise, loadingPromise = promise => {
-            if ( !promise ) return $loadingPromise; // Get
-            $loadingPromise = promise.then( () => interception.remove() ); // Set
+            if (!promise) return $loadingPromise; // Get
+            $loadingPromise = promise.then(() => interception.remove()); // Set
         };
-        const loading = ( record2.value || '' ).trim();
-        const interception = Observer.intercept( this.defs, 'get', async ( descriptor, recieved, next ) => {
-            if ( loading === 'lazy' ) { loadingPromise( this.load( src, true ) ); }
+        const loading = (record2.value || '').trim();
+        const interception = Observer.intercept(this.defs, 'get', async (descriptor, recieved, next) => {
+            if (loading === 'lazy') { loadingPromise(this.load(src, true)); }
             await loadingPromise();
             return next();
-        }, { signal } );
-        if ( loading !== 'lazy' ) { loadingPromise( this.load( src ) ); }
+        }, { signal });
+        if (loading !== 'lazy') { loadingPromise(this.load(src)); }
     }
-    
+
     /**
      * Fetches a module's "src".
      *
@@ -135,33 +135,33 @@ export default class HTMLModule {
      */
     #fetchedURLs = new Set;
     #fetchInFlight;
-    load( src ) {
+    load(src) {
         const { window } = env;
-        if ( this.#fetchedURLs.has( src ) ) {
+        if (this.#fetchedURLs.has(src)) {
             // Cache busting is needed to 
             return Promise.resolve();
         }
-        this.#fetchedURLs.add( src );
-        if ( this.#fetchedURLs.size === 1 && this.host.content.children.length ) {
+        this.#fetchedURLs.add(src);
+        if (this.#fetchedURLs.size === 1 && this.host.content.children.length) {
             return Promise.resolve();
         }
         // Ongoing request?
         this.#fetchInFlight?.controller.abort();
         // The promise
         const controller = new AbortController();
-        const fire = ( type, detail ) => this.host.dispatchEvent( new window.CustomEvent( type, { detail } ) );
-        const request = window.fetch( src, { signal: controller.signal, element: this.host } ).then( response => {
-            return response.ok ? response.text() : Promise.reject( response.statusText );
-        } ).then( content => {
+        const fire = (type, detail) => this.host.dispatchEvent(new window.CustomEvent(type, { detail }));
+        const request = window.fetch(src, { signal: controller.signal, element: this.host }).then(response => {
+            return response.ok ? response.text() : Promise.reject(response.statusText);
+        }).then(content => {
             this.host.innerHTML = content.trim(); // IMPORTANT: .trim()
-            fire( 'load' );
+            fire('load');
             return this.host;
-        } ).catch( e => {
-            console.error( `Error fetching the bundle at "${ src }": ${ e.message }` );
+        }).catch(e => {
+            console.error(`Error fetching the bundle at "${src}": ${e.message}`);
             this.#fetchInFlight = null;
-            fire( 'loaderror' );
+            fire('loaderror');
             return this.host;
-        } );
+        });
         this.#fetchInFlight = { request, controller };
         return request;
     }
@@ -171,32 +171,32 @@ export default class HTMLModule {
      *
      * @returns Void|AbortController
      */
-    evalInheritance( ) {
-        if ( !this.parent ) return [];
+    evalInheritance() {
+        if (!this.parent) return [];
         const { window: { webqit: { Observer } } } = env;
-        let extendedId = ( this.host.getAttribute( this.config.attr.extends ) || '' ).trim();
-        let inheritedIds = ( this.host.getAttribute( this.config.attr.inherits ) || '' ).trim().split( ' ' ).map( id => id.trim() ).filter( x => x );
+        let extendedId = (this.host.getAttribute(this.config.attr.extends) || '').trim();
+        let inheritedIds = (this.host.getAttribute(this.config.attr.inherits) || '').trim().split(' ').map(id => id.trim()).filter(x => x);
         const handleInherited = records => {
-            records.forEach( record => {
-                if ( Observer.get( this.defs, record.key ) !== record.oldValue ) return;
-                if ( [ 'get'/*initial get*/, 'set', 'def' ].includes( record.type ) ) {
-                    Observer[ record.type.replace( 'get', 'set' ) ]( this.defs, record.key, record.value );
-                } else if ( record.type === 'delete' ) {
-                    Observer.deleteProperty( this.defs, record.key );
+            records.forEach(record => {
+                if (Observer.get(this.defs, record.key) !== record.oldValue) return;
+                if (['get'/*initial get*/, 'set', 'def'].includes(record.type)) {
+                    Observer[record.type.replace('get', 'set')](this.defs, record.key, record.value);
+                } else if (record.type === 'delete') {
+                    Observer.deleteProperty(this.defs, record.key);
                 }
-            } );
+            });
         };
         const realtimes = [];
-        const parentDefsObj = getDefs( this.parent );
-        if ( extendedId ) {
-            realtimes.push( Observer.reduce( parentDefsObj, [ extendedId, this.config.api.defs, Infinity ], Observer.get, handleInherited, { live: true } ) );
+        const parentDefsObj = getDefs(this.parent);
+        if (extendedId) {
+            realtimes.push(Observer.reduce(parentDefsObj, [extendedId, this.config.api.defs, Infinity], Observer.get, handleInherited, { live: true }));
         }
-        if ( inheritedIds.length ) {
-            realtimes.push( Observer.get( parentDefsObj, inheritedIds.includes( '*' ) ? Infinity : inheritedIds, handleInherited, { live: true } ) );
+        if (inheritedIds.length) {
+            realtimes.push(Observer.get(parentDefsObj, inheritedIds.includes('*') ? Infinity : inheritedIds, handleInherited, { live: true }));
         }
         return realtimes;
     }
-    
+
     /**
      * Disposes the instance and its processes.
      *
@@ -205,10 +205,10 @@ export default class HTMLModule {
     dispose() {
         this.realtimeA.disconnect();
         this.realtimeB.disconnect();
-        this.realtimeC.forEach( r => ( r instanceof Promise ? r.then( r => r.abort() ) : r.abort() ) );
-        Object.entries( this.defs ).forEach( ( [ key, entry ] ) => {
-            if ( key.startsWith( '#' ) ) return;
-            HTMLModule.instance( entry ).dispose();
-        } );
+        this.realtimeC.forEach(r => (r instanceof Promise ? r.then(r => r.abort()) : r.abort()));
+        Object.entries(this.defs).forEach(([key, entry]) => {
+            if (key.startsWith('#')) return;
+            HTMLModule.instance(entry).dispose();
+        });
     }
 }