@webqit/oohtml 1.10.3 → 2.0.0

package/src/html-modules/HTMLExportsManager.js

@@ -0,0 +1,191 @@
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import { getModulesObject } from './index.js';
+import { _ } from '../util.js';
+
+export default class HTMLExportsManager {
+
+    /**
+     * @instance
+     */
+    static instance( host, params ) {
+        return _( host ).get( 'exportsmanager::instance' ) || new this( host, params );;
+    }
+
+    /**
+     * @constructor
+     */
+    constructor( host, params, parent = null, level = 0 ) {
+        _( host ).get( `exportsmanager::instance` )?.dispose();
+        _( host ).set( `exportsmanager::instance`, this );
+        this.host = host;
+        this.params = params;
+        this.parent = parent;
+        this.level = level;
+        this.modules = getModulesObject( this.host );
+        this.exportId = ( this.host.getAttribute( this.params.template.attr.exportid ) || '' ).trim();
+        this.validateExportId( this.exportId );
+        const dom = params.window.wq.dom;
+        // ----------
+        this.realtimeA = dom.realtime( this.host.content ).children( record => {
+            this.export( record.entrants, true );
+            this.export( record.exits, false );
+        }, { live: true, timing: 'sync' } );
+        // ----------
+        this.realtimeB = dom.realtime( this.host ).attr( [ 'src', 'loading' ], ( ...args ) => this.evaluateLoading( ...args ), {
+            live: true,
+            atomic: true,
+            timing: 'sync',
+            lifecycleSignals: true
+        } );
+        // ----------
+        this.realtimeC = this.evalInheritance();
+        // ----------
+    }
+
+    /**
+     * Validates export ID.
+     * 
+     * @param String     exportId
+     *
+     * @returns Void
+     */
+    validateExportId( exportId ) {
+        if ( [ '@', '#', ':' ].some( token => exportId.includes( token ) ) ) {
+            throw new Error( `The export ID "${ exportId }" contains an invalid character.` );
+        }
+    }
+
+    /**
+     * Maps module contents as exports.
+     * 
+     * @param Array     entries
+     * @param Bool      isConnected
+     *
+     * @returns Void
+     */
+    export( entries, isConnected ) {
+        const fragmentsExports = new Map;
+        entries.forEach( entry => {
+            if ( entry.nodeType !== 1 ) return;
+            if ( entry.matches( this.params.templateSelector ) ) {
+                if ( isConnected ) {
+                    const moduleExport = new HTMLExportsManager( entry, this.params, this.host, this.level + 1 );
+                    if ( moduleExport.exportId ) { Observer.set( this.modules, moduleExport.exportId, entry ); }
+                } else {
+                    const moduleExport = HTMLModulesGraph.instance( entry, this.params );
+                    if ( moduleExport.exportId ) { Observer.deleteProperty( this.modules, moduleExport.exportId ); }
+                    moduleExport.dispose();
+                }
+            } 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 }` );
+            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 ) }
+        } );
+    }
+
+    /**
+     * Evaluates remote content loading.
+     *
+     * @param AbortSignal   signal
+     * 
+     * @returns Void
+     */
+    evaluateLoading( [ record1, record2 ], { signal } ) {
+        const src = ( record1.value || '' ).trim();
+        if ( !src ) return;
+        const loading = ( record2.value || '' ).trim();
+        if ( loading === 'lazy' ) {
+            const interception = Observer.intercept( this.modules, 'get', async ( descriptor, recieved, next ) => {
+                await this.load( src, true );
+                interception.remove();
+                return next();
+            }, { signal } );
+        } else { this.load( src ); }
+    }
+    
+    /**
+     * Fetches a module's "src".
+     *
+     * @param String src
+     *
+     * @return Promise
+     */
+    load( src ) {
+        const window = this.params.window;
+        if ( this.host.content.children.length ) return;
+        // Ongoing request?
+        if ( this.fetchInFlight?.src === src ) return this.fetchInFlight.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 } ).then( response => {
+            return response.ok ? response.text() : Promise.reject( response.statusText );
+        }).then( content => {
+            this.host.innerHTML = content.trim(); // IMPORTANT: .trim()
+            fire( 'load' );
+            return this.host;
+        } ).catch( e => {
+            console.error( `Error fetching the bundle at "${ src }": ${ e.message }` );
+            this.fetchInFlight = null;
+            fire( 'loaderror' );
+            return this.host;
+        } );
+        this.fetchInFlight = { src, request, controller };
+        return request;
+    }
+
+    /**
+     * Evaluates module inheritance.
+     *
+     * @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 } );
+        }
+    }
+    
+    /**
+     * Disposes the instance and its processes.
+     *
+     * @returns Void
+     */
+    dispose() {
+        this.realtimeA.disconnect();
+        this.realtimeB.disconnect();
+        this.realtimeC?.abort();
+        Object.entries( this.modules ).forEach( ( [ key, entry ] ) => {
+            if ( key.startsWith( '#' ) ) return;
+            HTMLExportsManager.instance( entry ).dispose();
+        } );
+    }
+}

package/src/html-modules/_HTMLImportsContext.js

@@ -0,0 +1,114 @@
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import { HTMLContextManager, HTMLContext } from '../context-api/index.js';
+import { getModulesObject } from './index.js';
+import { _ } from '../util.js';
+
+export default class _HTMLImportsContext extends HTMLContext {
+ 
+    /**
+     * @createRequest
+     */
+    static createRequest( fields = {} ) {
+        const request = { type: 'HTMLModules', ...fields };
+        if ( !request.name && request.detail?.startsWith( '/' ) ) { request.name = 'root'; }
+        else if ( request.detail?.startsWith( '@' ) ) {
+            const [ contextName, detail ] = request.detail.split( ':' ).map( s => s.trim() );
+            request.name = contextName.slice( 1 );
+            request.detail = detail;
+        }
+        return request;
+    }
+
+    /**
+     * @modules
+     */
+    get modules() {
+        return getModulesObject( this.host );
+    }
+
+    /**
+     * @handle()
+     */
+    handle( event ) {
+        // Any existing event.request.controller? Abort!
+        event.request.controller?.abort();
+
+        // Parse and translate detail
+        if ( ( event.request.detail || '' ).trim() === '/' ) return event.respondWith( this.modules );
+        const $params = this.constructor.params;
+        let path = ( event.request.detail || '' ).split( /\/|(?<=\w)(?=\W)/g ).map( x => x.trim() ).filter( x => x );
+        if ( path.length ) { path = path.join( `/${ $params.template.api.modules }/` )?.split( '/' ) || []; }
+        // No detail?
+        if ( !path.length ) return event.respondWith();
+
+        // We'll now fulfill request
+        const params = { live: event.request.live, descripted: true, midwayResults: true };
+        // Find a way to resolve request against two sources
+        event.request.controller = Observer.deep( this.modules, path, Observer.get, ( result, { signal } = {} ) => {
+            if ( !result.value && this.host.isConnected === false ) return; // Subtree is being disposed
+            if ( result.value || !this.altModules ) return event.respondWith( result.value );
+            // This superModules binding is automatically aborted by the injected control.signal; see below
+            return Observer.deep( this.altModules, path, Observer.get, result => {
+                return event.respondWith( result.value );
+            }, { signal, ...params } );
+        }, params );
+    }
+
+    /**
+     * @startRealtime()
+     */
+    realtimeSources( host ) {
+        this.host = host;
+        // ----------------
+        const update = () => {
+            for ( const subscriptionEvent of this.subscriptions ) {
+                this.handle( subscriptionEvent );
+            }
+        };
+        // ----------------
+        const $params = this.constructor.params;
+        if ( !this.host.matches || !$params.context.attr.importscontext ) return;
+        // Any existing this.refdSourceController? Abort!
+        this.refdSourceController?.disconnect();
+        const dom = this.host.ownerDocument.defaultView.wq.dom;
+        this.refdSourceController = dom.realtime( this.host ).attr( $params.context.attr.importscontext, ( record, { signal } ) => {
+            // No importscontext attr set. But we're still watching
+            if ( !record.value ) {
+                this.altModules = undefined;
+                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 } );
+            HTMLContextManager.instance( this.host ).ask( request, response => {
+                this.altModules = !( response && Object.getPrototypeOf( response ) ) ? response : getModulesObject( response );
+                update();
+            } );
+        }, { live: true, timing: 'sync', lifecycleSignals: true } );
+    }
+
+    /**
+     * @initialize()
+     */
+    initialize( host ) {
+        // If host has importscontext attr, compute that
+        this.realtimeSources( host );
+        // Now, listen for contextrequest and contextclaim events
+        // And process own claim
+        return super.initialize( host );
+    }
+    
+    /**
+     * @dispose()
+     */
+    dispose( host ) {
+        // Stop listening for sources
+        this.refdSourceController?.disconnect();
+        // Now, stop listening for contextrequest and contextclaim events
+        // And relinquish own subscribers to owner context
+        return super.dispose( host );
+    }
+}