@webqit/oohtml 3.1.13 → 3.1.15

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "3.1.13",
+  "version": "3.1.15",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
   "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"

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

@@ -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

@@ -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

package/src/html-imports/index.js

@@ -73,6 +73,11 @@ function exposeAPIs( config ) {
     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,7 +130,6 @@ 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 = getDefs( htmlModule.ownerContext );
@@ -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(); }
+}