@webqit/oohtml 3.1.12 → 3.1.14

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "3.1.12",
+  "version": "3.1.14",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,13 +29,13 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/api.global.js main.lite=src/api.global.lite.js namespaced-html=src/namespaced-html/targets.browser.js scoped-css=src/scoped-css/targets.browser.js scoped-js=src/scoped-js/targets.browser.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js html-imports=src/html-imports/targets.browser.js data-binding=src/data-binding/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
+    "build": "esbuild main=src/api.global.js main.lite=src/api.global.lite.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js namespaced-html=src/namespaced-html/targets.browser.js html-imports=src/html-imports/targets.browser.js data-binding=src/data-binding/targets.browser.js scoped-css=src/scoped-css/targets.browser.js scoped-js=src/scoped-js/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
     "preversion": "npm run test && npm run build && git add -A dist",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
-    "@webqit/quantum-js": "^4.2.6",
+    "@webqit/quantum-js": "^4.2.11",
     "@webqit/realdom": "^2.1.22",
     "@webqit/util": "^0.8.11"
   },

package/src/bindings-api/DOMBindingsContext.js

@@ -52,5 +52,5 @@ export default class DOMBindingsContext extends DOMContext {
     /**
      * @unsubscribed()
      */
-     unsubscribed( event ) { event._controller?.abort(); }
+    unsubscribed( event ) { event._controller?.abort(); }
 }

package/src/bindings-api/index.js

@@ -20,7 +20,7 @@ export default function init( $config = {} ) {
 }
 
 /**
- * @Exports
+ * @Defs
  * 
  * The internal bindings object
  * within elements and the document object.
@@ -55,27 +55,6 @@ function getBindings( config, node ) {
 	return _( node ).get( 'bindings' );
 }
 
-/**
- * Exposes Bindings with native APIs.
- *
- * @param Object            config
- * @param document|Element  target
- * @param Object            bindings
- * @param Object            params
- *
- * @return Void
- */
-function applyBindings( config, target, bindings, { merge, diff, namespace } = {} ) {
-    const window = this, { webqit: { Observer } } = window;
-    const bindingsObj = getBindings.call( this, config, target );
-    const $params = { diff, namespace };
-    const exitingKeys = merge ? [] : Observer.ownKeys( bindingsObj, $params ).filter( key => !( key in bindings ) );
-    return Observer.batch( bindingsObj, () => {
-        if ( exitingKeys.length ) { Observer.deleteProperties( bindingsObj, exitingKeys, $params ); }
-        return Observer.set( bindingsObj, bindings, $params );
-    }, $params );
-}
-
 /**
  * Exposes Bindings with native APIs.
  *
@@ -104,3 +83,24 @@ function exposeAPIs( config ) {
         return Observer.proxy( getBindings.call( window, config, this ) );
     } } );
 }
+
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param Object            config
+ * @param document|Element  target
+ * @param Object            bindings
+ * @param Object            params
+ *
+ * @return Void
+ */
+function applyBindings( config, target, bindings, { merge, diff, namespace } = {} ) {
+    const window = this, { webqit: { Observer } } = window;
+    const bindingsObj = getBindings.call( this, config, target );
+    const $params = { diff, namespace };
+    const exitingKeys = merge ? [] : Observer.ownKeys( bindingsObj, $params ).filter( key => !( key in bindings ) );
+    return Observer.batch( bindingsObj, () => {
+        if ( exitingKeys.length ) { Observer.deleteProperties( bindingsObj, exitingKeys, $params ); }
+        return Observer.set( bindingsObj, bindings, $params );
+    }, $params );
+}

package/src/data-binding/index.js

@@ -2,7 +2,7 @@
 /**
  * @imports
  */
-import { _, _init } from '../util.js';
+import { _, _init, _splitOuter } from '../util.js';
 
 /**
  * Initializes DOM Parts.
@@ -156,8 +156,8 @@ const inlineParseCache = new Map;
 function compileInlineBindings( config, str ) {
     if ( inlineParseCache.has( str ) ) return inlineParseCache.get( str );
     const validation = {};
-    const source = splitOuter( str, ';' ).map( str => {
-        const [ left, right ] = splitOuter( str, ':' ).map( x => x.trim() );
+    const source = _splitOuter( str, ';' ).map( str => {
+        const [ left, right ] = _splitOuter( str, ':' ).map( x => x.trim() );
         const directive = left[ 0 ], param = left.slice( 1 ).trim();
         const arg = `(${ right })`, $arg = `(${ arg } ?? '')`;
         if ( directive === '&' ) {
@@ -175,7 +175,7 @@ function compileInlineBindings( config, str ) {
             if ( param === 'text' ) return `$assign__(this, 'textContent', ${ $arg });`;
             if ( param === 'html' ) return `$exec__(this, 'setHTML', ${ $arg });`;
             if ( param === 'items' ) {
-                const [ iterationSpec, importSpec ] = splitOuter( right, '/' );
+                const [ iterationSpec, importSpec ] = _splitOuter( right, '/' );
                 if ( !importSpec ) throw new Error( `Invalid ${ directive }items spec: ${ str }; no import specifier.` );
                 let [ raw, production, kind, iteratee ] = iterationSpec.trim().match( /(.*?[\)\s+])(of|in)([\(\{\[\s+].*)/i ) || [];
                 if ( !raw ) throw new Error( `Invalid ${ directive }items spec: ${ str }.` );
@@ -227,19 +227,4 @@ function compileInlineBindings( config, str ) {
     return compiled;
 }
 
-export function splitOuter( str, delim ) {
-    return [ ...str ].reduce( ( [ quote, depth, splits, skip ], x ) => {
-        if ( !quote && depth === 0 && ( Array.isArray( delim ) ? delim : [ delim ] ).includes( x ) ) {
-            return [ quote, depth, [ '' ].concat( splits ) ];
-        }
-        if ( !quote && [ '(', '[', '{' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth++;
-        if ( !quote && [ ')', ']', '}' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth--;
-        if ( [ '"', "'", '`' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) {
-            quote = quote === x ? null : ( quote || x );
-        }
-        splits[ 0 ] += x;
-        return [ quote, depth, splits ]
-    }, [ null, 0, [ '' ] ] )[ 2 ].reverse();
-}
-
 const escDouble = str => str.replace(/"/g, '\\"');

package/src/html-imports/HTMLImportsContext.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import DOMContext from '../context-api/DOMContext.js';
-import { getExports } from './index.js';
+import { getDefs } from './index.js';
 import { _, env } from '../util.js';
 
 export default class HTMLImportsContext extends DOMContext {
@@ -32,7 +32,7 @@ export default class HTMLImportsContext extends DOMContext {
     /**
      * @localModules
      */
-    get localModules() { return getExports( this.host ); }
+    get localModules() { return getDefs( this.host ); }
 
     /**
      * @handle()
@@ -44,11 +44,9 @@ export default class HTMLImportsContext extends DOMContext {
 
         // Parse and translate detail
         if ( ( event.detail || '' ).trim() === '/' ) return event.respondWith( this.localModules );
-        const $config = this.configs.HTML_IMPORTS;
         let path = ( event.detail || '' ).split( /\/|(?<=\w)(?=#)/g ).map( x => x.trim() ).filter( x => x );
-        if ( path.length ) { path = path.join( `/${ $config.api.defs }/` )?.split( '/' ) || []; }
-        // No detail?
         if ( !path.length ) return event.respondWith();
+        path = path.join( `/${ this.configs.HTML_IMPORTS.api.defs }/` )?.split( '/' ) || [];
 
 
         // We'll now fulfill request
@@ -102,7 +100,7 @@ export default class HTMLImportsContext extends DOMContext {
             // This superModules contextrequest is automatically aborted by the injected signal below
             const request = { ...this.constructor.createRequest( record.value.trim() ), live: true, signal };
             this.host.parentNode[ this.configs.CONTEXT_API.api.contexts ].request( request, response => {
-                this.contextModules = !( response && Object.getPrototypeOf( response ) ) ? response : getExports( response );
+                this.contextModules = !( response && Object.getPrototypeOf( response ) ) ? response : getDefs( response );
                 update();
             } );
         }, { live: true, timing: 'sync', lifecycleSignals: true } );

package/src/html-imports/HTMLModule.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import { _isNumeric } from '@webqit/util/js/index.js';
-import { getExports } from './index.js';
+import { getDefs } from './index.js';
 import { _, env } from '../util.js';
 
 export default class HTMLModule {
@@ -26,7 +26,7 @@ export default class HTMLModule {
         this.config = configs.HTML_IMPORTS;
         this.parent = parent;
         this.level = level;
-        this.defs = getExports( this.host );
+        this.defs = getDefs( this.host );
         this.defId = ( this.host.getAttribute( this.config.attr.def ) || '' ).trim();
         this.validateDefId( this.defId );
         // ----------
@@ -175,12 +175,12 @@ export default class HTMLModule {
             } );
         };
         const realtimes = [];
-        const parentExportsObj = getExports( this.parent );
+        const parentDefsObj = getDefs( this.parent );
         if ( extendedId ) {
-            realtimes.push( Observer.reduce( parentExportsObj, [ extendedId, this.config.api.defs, Infinity ], Observer.get, handleInherited, { live: true } ) );
+            realtimes.push( Observer.reduce( parentDefsObj, [ extendedId, this.config.api.defs, 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 } ) );
+            realtimes.push( Observer.get( parentDefsObj, inheritedIds, handleInherited, { live: true } ) );
         }
         return realtimes;
     }

package/src/html-imports/index.js

@@ -44,7 +44,7 @@ export default function init( $config = {} ) {
  *
  * @return Object
  */
-export function getExports( node, autoCreate = true ) {
+export function getDefs( node, autoCreate = true ) {
 	if ( !_( node ).has( 'defs' ) && autoCreate ) {
 		const defs = Object.create( null );
 		_( node ).set( 'defs', defs );
@@ -68,11 +68,16 @@ function exposeAPIs( config ) {
     if ( config.api.import in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.api.import }" property!` ); }
     // Definitions
     Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.defs, { get: function() {
-        return getExports( this );
+        return getDefs( this );
     } } );
     Object.defineProperty( window.HTMLTemplateElement.prototype, config.api.def, { get: function() {
         return this.getAttribute( config.attr.def );
     } } );
+    Object.defineProperty( window.HTMLTemplateElement.prototype, 'scoped', {
+        configurable: true,
+        get() { return this.hasAttribute( 'scoped' ); },
+        set( value ) { this.toggleAttribute( 'scoped', value ); },
+    } );
     Object.defineProperty( window.document, config.api.import, { value: function( ref, live = false, callback = null ) {
         return importRequest( window.document, ...arguments );
     } } );
@@ -102,6 +107,7 @@ function exposeAPIs( config ) {
  */
 function realtime( config ) {
     const window = this, { webqit: { Observer, realdom, oohtml: { configs }, HTMLImportElement, HTMLImportsContext } } = window;
+    
     // ------------
     // MODULES
     // ------------
@@ -124,10 +130,9 @@ function realtime( config ) {
     realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( [ config.templateSelector, config.importsContextSelector ], record => {
         record.entrants.forEach( entry => {
             if ( entry.matches( config.templateSelector ) ) {
-                Object.defineProperty( entry, 'scoped', { value: entry.hasAttribute( 'scoped' ) } ); 
                 const htmlModule = HTMLModule.instance( entry );
                 htmlModule.ownerContext = entry.scoped ? record.target : window.document;
-                const ownerContextModulesObj = getExports( htmlModule.ownerContext );
+                const ownerContextModulesObj = getDefs( htmlModule.ownerContext );
                 if ( htmlModule.defId ) { Observer.set( ownerContextModulesObj, htmlModule.defId, entry ); }
                 // The ownerContext's defs - ownerContextModulesObj - has to be populated
                 // Before attaching a context instance to it, to give the just created context something to use for
@@ -140,7 +145,7 @@ function realtime( config ) {
         record.exits.forEach( entry => {
             if ( entry.matches( config.templateSelector ) ) {
                 const htmlModule = HTMLModule.instance( entry );
-                const ownerContextModulesObj = getExports( htmlModule.ownerContext );
+                const ownerContextModulesObj = getDefs( htmlModule.ownerContext );
                 if ( htmlModule.defId ) { Observer.deleteProperty( ownerContextModulesObj, htmlModule.defId ); }
                 detachImportsContext( htmlModule.ownerContext );
             } else {
@@ -148,6 +153,7 @@ function realtime( config ) {
             }
         } );
     }, { live: true, timing: 'sync', staticSensitivity: true } );
+    
     // ------------
     // IMPORTS
     // ------------

package/src/index.js

@@ -17,12 +17,12 @@ export default function init( QuantumJS, configs = {} ) {
     if ( !this.webqit ) { this.webqit = {}; }
     Object.assign( this.webqit, QuantumJS );
     // --------------
-    NamespacedHTML.call( this, ( configs.NAMESPACED_HTML || {} ) );
-    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) );
-    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
     ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
     BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) ); // Depends on ContextAPI
+    NamespacedHTML.call( this, ( configs.NAMESPACED_HTML || {} ) ); // Depends on ContextAPI
     HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) ); // Depends on ContextAPI
     DataBinding.call( this, ( configs.DATA_BINDING || {} ) ); // Depends on ContextAPI, BindingsAPI, HTMLImports
+    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) ); // Depends on NamespacedHTML
+    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
     // --------------
 }

package/src/namespaced-html/DOMNamingContext.js

@@ -0,0 +1,54 @@
+
+/**
+ * @imports
+ */
+import DOMContext from '../context-api/DOMContext.js';
+import { env } from '../util.js';
+
+export default class DOMNamingContext extends DOMContext {
+
+    static kind = 'namespace';
+
+    /**
+     * @createRequest
+     */
+    static createRequest( detail = null ) {
+        const request = super.createRequest();
+        if ( detail?.startsWith( '@' ) ) {
+            const [ targetContext, ...detail ] = detail.slice( 1 ).split( '/' ).map( s => s.trim() );
+            request.targetContext = targetContext;
+            request.detail = detail.join( '/' );
+        } else { request.detail = detail; }
+        return request;
+    }
+
+    /**
+     * @namespaceObj
+     */
+    get namespaceObj() { return this.host[ this.configs.NAMESPACED_HTML.api.namespace ]; }
+
+    /**
+     * @handle()
+     */
+    handle( event ) {
+        const { window: { webqit: { Observer } } } = env;
+        // Any existing event._controller? Abort!
+        event._controller?.abort();
+
+        // Parse and translate detail
+        if ( !( event.detail || '' ).trim() ) return event.respondWith( Observer.unproxy( this.namespaceObj ) );
+        let path = ( event.detail || '' ).split( '/' ).map( x => x.trim() ).filter( x => x );
+        if ( !path.length ) return event.respondWith();
+        path = path.join( `/${ this.configs.NAMESPACED_HTML.api.namespace }/` )?.split( '/' ) || [];
+
+        event._controller = Observer.reduce( this.namespaceObj, path, Observer.get, descriptor => {
+            if ( this.disposed ) return; // If already scheduled but aborted as in provider unmounting
+            event.respondWith( descriptor.value );
+        }, { live: event.live, signal: event.signal, descripted: true } );
+    }
+
+    /**
+     * @unsubscribed()
+     */
+    unsubscribed( event ) { event._controller?.abort(); }
+}