@webqit/oohtml 2.1.59 → 2.1.60

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.59",
+  "version": "2.1.60",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,8 +29,8 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/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 html-bindings=src/html-bindings/targets.browser.js html-namespaces=src/html-namespaces/targets.browser.js scoped-js=src/scoped-js/targets.browser.js scoped-css=src/scoped-css/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
-    "preversion": "npm run build && git add -A dist",
+    "build": "esbuild main=src/targets.browser.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",
+    "preversion": "npm run test && npm run build && git add -A dist",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },
@@ -41,7 +41,7 @@
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {
-    "@webqit/oohtml-ssr": "^1.2.17",
+    "@webqit/oohtml-ssr": "^1.2.19",
     "chai": "^4.3.4",
     "coveralls": "^3.1.1",
     "esbuild": "^0.14.43",

package/src/bindings-api/_HTMLBindingsProvider.js

@@ -9,6 +9,19 @@ export default class _HTMLBindingsProvider extends HTMLContextProvider {
 
     static type = 'bindings';
 
+    /**
+     * @createRequest
+     */
+    static createRequest( fields = {} ) {
+        const request = super.createRequest( fields );
+        if ( request.detail?.startsWith( '@' ) ) {
+            const [ contextName, ...detail ] = request.detail.slice( 1 ).split( '.' ).map( s => s.trim() );
+            request.contextName = contextName;
+            request.detail = detail.join( '.' );
+        }
+        return request;
+    }
+
     /**
      * @matchesRequest
      */

package/src/bindings-api/index.js

@@ -15,9 +15,11 @@ export { Observer }
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'bindings-api', $config, {
-        context: { attr: { contextname: 'contextname' }, },
+        context: { attr: { bindingscontext: 'bindings' }, },
         api: { bind: 'bind', bindings: 'bindings', },
     } );
+    config.CONTEXT_API = window.webqit.oohtml.configs.CONTEXT_API;
+    config.context.attr.contextname = config.CONTEXT_API.attr.contextname; // Inherit this
     window.webqit.HTMLBindingsProvider = class extends _HTMLBindingsProvider {
         static get config() { return config; }
     };
@@ -31,7 +33,8 @@ export default function init( $config = {} ) {
  * The internal bindings object
  * within elements and the document object.
  */
-function getBindingsObject( node ) {
+function getBindingsObject( config, node ) {
+    const window = this;
 	if ( !_( node ).has( 'bindings' ) ) {
 		const bindingsObj = Object.create( null );
 		_( node ).set( 'bindings', bindingsObj );
@@ -41,6 +44,13 @@ function getBindingsObject( node ) {
                     detachBindingsContext.call( this, node, mutation.key );
                 } else { attachBindingsContext.call( this, node, mutation.key ); }
             }
+            const props = Object.keys( bindingsObj );
+            const targetNode = node === window.document ? window.document.documentElement : node;
+            if ( props.length ) {
+                targetNode.setAttribute( config.context.attr.bindingscontext, props.join( ' ') );
+            } else {
+                targetNode.toggleAttribute( config.context.attr.bindingscontext, false );
+            }
         } );
 	}
 	return _( node ).get( 'bindings' );
@@ -61,14 +71,15 @@ function detachBindingsContext( host, key ) {
 /**
  * Exposes Bindings with native APIs.
  *
+ * @param Object            config
  * @param document|Element  target
  * @param Object            bindings
  * @param Object            params
  *
  * @return Void
  */
-function applyBindings( target, bindings, { merge, diff, namespace } = {} ) {
-    const bindingsObj = getBindingsObject.call( this, target );
+function applyBindings( config, target, bindings, { merge, diff, namespace } = {} ) {
+    const bindingsObj = getBindingsObject.call( this, config, target );
     const $params = { diff, namespace };
     const exitingKeys = merge ? [] : Observer.ownKeys( bindingsObj, $params ).filter( key => !( key in bindings ) );
     return Observer.batch( bindingsObj, () => {
@@ -93,15 +104,15 @@ function exposeAPIs( config ) {
     if ( config.api.bindings in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.bindings }" property!` ); }
     // Definitions
     Object.defineProperty( window.document, config.api.bind, { value: function( bindings, config = {} ) {
-        return applyBindings.call( window, window.document, bindings, config );
+        return applyBindings.call( window, config, window.document, bindings );
     } });
     Object.defineProperty( window.document, config.api.bindings, { get: function() {
-        return Observer.proxy( getBindingsObject.call( window, window.document ) );
+        return Observer.proxy( getBindingsObject.call( window, config, window.document ) );
     } });
     Object.defineProperty( window.Element.prototype, config.api.bind, { value: function( bindings, config = {} ) {
-        return applyBindings.call( window, this, bindings, config );
+        return applyBindings.call( window, config, this, bindings );
     } });
     Object.defineProperty( window.Element.prototype, config.api.bindings, { get: function() {
-        return Observer.proxy( getBindingsObject.call( window, this ) );
+        return Observer.proxy( getBindingsObject.call( window, config, this ) );
     } } );
 }

package/src/context-api/index.js

@@ -23,6 +23,7 @@ export {
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'context-api', $config, {
+        attr: { contextname: 'contextname', },
         api: { context: 'context', },
     } );
     window.webqit.HTMLContextProvider = HTMLContextProvider;

package/src/{html-bindings → data-binding}/index.js

@@ -16,7 +16,7 @@ import { _, _init } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'html-bindings', $config, {
-        attr: { bindings: 'bindings', itemIndex: 'data-index' },
+        attr: { binding: 'binding', itemIndex: 'data-index' },
         tokens: { nodeType: 'processing-instruction', tagStart: '?{', tagEnd: '}?', stateStart: '; [=', stateEnd: ']' },
         staticsensitivity: true,
         isomorphic: true,
@@ -24,7 +24,7 @@ export default function init( $config = {} ) {
     config.CONTEXT_API = window.webqit.oohtml.configs.CONTEXT_API;
     config.BINDINGS_API = window.webqit.oohtml.configs.BINDINGS_API;
     config.HTML_IMPORTS = window.webqit.oohtml.configs.HTML_IMPORTS;
-    config.attrSelector = `[${ window.CSS.escape( config.attr.bindings ) }]`;
+    config.attrSelector = `[${ window.CSS.escape( config.attr.binding ) }]`;
     const discreteBindingsMatch = ( start, end ) => {
         const starting = `starts-with(., "${ start }")`;
         const ending = `substring(., string-length(.) - string-length("${ end }") + 1) = "${ end }"`;
@@ -56,7 +56,7 @@ function realtime( config ) {
 }
 
 function createDynamicScope( config, root ) {
-    if ( _( root ).has( 'htBindings' ) ) return _( root ).get( 'htBindings' );
+    if ( _( root ).has( 'data-binding' ) ) return _( root ).get( 'data-binding' );
     const scope = {}, abortController = new AbortController;
     scope.$set__ = function( node, prop, val ) {
         node && ( node[ prop ] = val );
@@ -73,22 +73,22 @@ function createDynamicScope( config, root ) {
         },
         has: ( e, recieved, next ) => { return next( true ); }
     } );
-    const instance = { scope, abortController, htBindings: new Map };
-    _( root ).set( 'htBindings', instance );
+    const instance = { scope, abortController, bindings: new Map };
+    _( root ).set( 'data-binding', instance );
     return instance;
 }
 
 function cleanup( ...entries ) {
     for ( const node of entries ) {
         const root = node.nodeName  === '#text' ? node.parentNode : node;
-        const { htBindings, abortController } = _( root ).get( 'htBindings' ) || {};
-        if ( !htBindings?.has( node ) ) return;
-        htBindings.get( node ).state.dispose();
-        htBindings.get( node ).signals.forEach( s => s.abort() );
-        htBindings.delete( node );
-        if ( !htBindings.size ) {
+        const { bindings, abortController } = _( root ).get( 'data-binding' ) || {};
+        if ( !bindings?.has( node ) ) return;
+        bindings.get( node ).state.dispose();
+        bindings.get( node ).signals.forEach( s => s.abort() );
+        bindings.delete( node );
+        if ( !bindings.size ) {
             abortController.abort();
-            _( root ).delete( 'htBindings' );
+            _( root ).delete( 'data-binding' );
         }
     }
 }
@@ -127,24 +127,24 @@ async function mountDiscreteBindings( config, ...entries ) {
     }, [] );
 
     for ( const { textNode, template, anchorNode } of instances ) {
-        const { scope: env, htBindings } = createDynamicScope( config, textNode.parentNode );
+        const { scope: env, bindings } = createDynamicScope( config, textNode.parentNode );
         let source = '';
         source += `let content = ((${ template.expr }) ?? '') + '';`;
         source += `$set__(this, 'nodeValue', content);`;
         if ( anchorNode ) { source += `$set__($anchorNode__, 'nodeValue', \`${ config.tokens.tagStart }${ template.expr }${ config.tokens.stateStart }\` + content.length + \`${ config.tokens.stateEnd } ${ config.tokens.tagEnd }\`);`; }
         const compiled = new StatefulAsyncFunction( '$signals__', `$anchorNode__`, source, { env } );
         const signals = [];
-        htBindings.set( textNode, { compiled, signals, state: await compiled.call( textNode, signals, anchorNode ), } );
+        bindings.set( textNode, { compiled, signals, state: await compiled.call( textNode, signals, anchorNode ), } );
     }
 }
 
 async function mountInlineBindings( config, ...entries ) {
     for ( const node of entries ) {
-        const source = parseInlineBindings( config, node.getAttribute( config.attr.bindings ) );
-        const { scope: env, htBindings } = createDynamicScope( config, node );
+        const source = parseInlineBindings( config, node.getAttribute( config.attr.binding ) );
+        const { scope: env, bindings } = createDynamicScope( config, node );
         const compiled = new StatefulAsyncFunction( '$signals__', source, { env } );
         const signals = [];
-        htBindings.set( node, { compiled, signals, state: await compiled.call( node, signals ), } );
+        bindings.set( node, { compiled, signals, state: await compiled.call( node, signals ), } );
     }
 }
 

package/src/html-imports/_HTMLImportElement.js

@@ -87,7 +87,7 @@ export default function( config ) {
                 priv.autoRestoreRealtime?.disconnect();
                 if ( callback ) callback();
                 const restore = () => {
-                    priv.anchorNode.replaceWith( this.el );
+                    priv.anchorNode?.replaceWith( this.el );
                     priv.anchorNode = null;
                     this.el.setAttribute( 'data-nodecount', 0 );
                 };

package/src/html-imports/index.js

@@ -18,12 +18,13 @@ import { _, _init } from '../util.js';
 export default function init( $config = {} ) {
     const { config, realdom, window } = _init.call( this, 'html-imports', $config, {
         template: { attr: { moduledef: 'def', fragmentdef: 'def', extends: 'extends', inherits: 'inherits' }, api: { modules: 'modules', moduledef: 'def' }, },
-        context: { attr: { importscontext: 'importscontext', contextname: 'contextname' }, api: { import: 'import' }, },
+        context: { attr: { importscontext: 'importscontext', }, api: { import: 'import' }, },
         import: { tagName: 'import', attr: { moduleref: 'ref' }, },
         staticsensitivity: true,
         isomorphic: true,
     } );
     config.CONTEXT_API = window.webqit.oohtml.configs.CONTEXT_API;
+    config.context.attr.contextname = config.CONTEXT_API.attr.contextname; // Inherit this
     config.templateSelector = `template[${ window.CSS.escape( config.template.attr.moduledef ) }]`;
     config.ownerContextSelector = [ config.context.attr.contextname, config.context.attr.importscontext ].map( a => `[${ window.CSS.escape( a ) }]` ).join( ',' );
     config.slottedElementsSelector = `[${ window.CSS.escape( config.template.attr.fragmentdef ) }]`;

package/src/index.js

@@ -3,13 +3,13 @@
  * @imports
  */
 import Observer from '@webqit/observer';
+import NamespacedHTML from './namespaced-html/index.js';
+import ScopedCSS from './scoped-css/index.js';
+import ScopedJS from './scoped-js/index.js';
 import ContextAPI from './context-api/index.js';
 import BindingsAPI from './bindings-api/index.js';
 import HTMLImports from './html-imports/index.js';
-import HTMLBindings from './html-bindings/index.js';
-import HTMLNamespaces from './html-namespaces/index.js';
-import ScopedCSS from './scoped-css/index.js';
-import ScopedJS from './scoped-js/index.js';
+import DataBinding from './data-binding/index.js';
 
 /**
  * @exports
@@ -22,12 +22,12 @@ export { Observer }
 export default function init( configs = {} ) {
     if ( !this.webqit ) { this.webqit = {}; }
     // --------------
-    ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
-    BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) );
-    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) ); // Depends ContextAPI
-    HTMLBindings.call( this, ( configs.HTML_BRACELETS || {} ) ); // Depends ContextAPI, BindingsAPI, HTMLImports
-    HTMLNamespaces.call( this, ( configs.HTML_NAMESPACES || {} ) );
+    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
+    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) ); // Depends on ContextAPI
+    DataBinding.call( this, ( configs.DATA_BINDING || {} ) ); // Depends on ContextAPI, BindingsAPI, HTMLImports
     // --------------
 }

package/src/{html-namespaces → namespaced-html}/index.js

@@ -13,7 +13,7 @@ export { Observer }
  * @param Object $config
  */
 export default function init( $config = {} ) {
-    const { config, window } = _init.call( this, 'html-namespaces', $config, {
+    const { config, window } = _init.call( this, 'namespaced-html', $config, {
 		id: { attr: 'id' },
 		namespace: { attr: 'namespace',  api: 'namespace', },
 		target: { attr: ':target', event: ':target', scrolling: true },

package/test/imports.test.js

@@ -162,9 +162,9 @@ describe(`HTML Imports`, function() {
             const body = `
             <div importscontext="temp0/temp1">
                 <textarea def="input"></textarea>
-                <!--<import ref="#input"></import>-->
+                <!--&lt;import ref="#input" data-nodecount="1"&gt;&lt;/import&gt;-->
             </div>`;
-            const { document } = createDocument( head, body );
+            const { document } = createDocument( head, body, window => window.webqit.env = 'client' );
             await delay( 20 );
 
             const routingElement = document.body.firstElementChild;
@@ -195,10 +195,12 @@ describe(`HTML Imports`, function() {
             const body = `
             <div importscontext="temp0/temp1">
                 <textarea def="input"></textarea>
-                <!--<import ref="#input"></import>-->
+                <!--&lt;import ref="#input" data-nodecount="1"&gt;&lt;/import&gt;-->
             </div>`;
-            const { document } = createDocument( head, body );
+            const { document } = createDocument( head, body, window => window.webqit.env = 'client' );
+            console.log('-----------1');
             await delay( 20 );
+            console.log('-----------2');
 
             const routingElement = document.body.firstElementChild;
             expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );

package/test/index.js

@@ -21,7 +21,7 @@ export function createDocument( head = '', body = '', callback = null, ) {
     <!DOCTYPE html>
     <html>
         <head>
-        <meta name="stateful-compiler-url" content="../stateful-js/dist/compiler.js">
+        <meta name="$f-compiler-url" content="../stateful-js/dist/compiler.js">
         <script ssr src="/dist/main.js"></script>
         ${ head }
         </head>

package/test/scoped-js.test.js

@@ -14,12 +14,12 @@ describe(`Test: Scoped JS`, function() {
             <h1>Hello World!</h1>
             <script scoped stateful>
                 testRecords.push( this );
-                console.log('-------scoped JS here.');
+                console.log('-------scoped JS here.', this);
             </script>`;
 
             const window = createDocument( head, body );
             window.testRecords = [];
-            await delay( 160 ); // Takes time to dynamically load Reflex compiler
+            await delay( 300 ); // Takes time to dynamically load Reflex compiler
 
             expect( window.testRecords ).to.have.length( 1 );
             expect( window.testRecords[ 0 ] ).to.eql( window.document.body );