@webqit/oohtml 2.1.8 → 2.1.10

package/package.json

@@ -5,7 +5,7 @@
   "keywords": [
     "namespaced-HTML",
     "html-modules",
-    "ui-state",
+    "ui-bindings",
     "html-imports",
     "reflex",
     "subscript",
@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,15 +32,15 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/targets.browser.js html-modules=src/html-modules/targets.browser.js html-imports=src/html-imports/targets.browser.js namespaced-html=src/namespaced-html/targets.browser.js scoped-js=src/scoped-js/targets.browser.js state-api=src/state-api/targets.browser.js context-api=src/context-api/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
+    "build": "esbuild main=src/targets.browser.js bindings-api=src/bindings-api/targets.browser.js context-api=src/context-api/targets.browser.js namespace-api=src/namespace-api/targets.browser.js html-modules=src/html-modules/targets.browser.js html-imports=src/html-imports/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/dom": "^2.0.2",
-    "@webqit/observer": "^2.0.1",
-    "@webqit/subscript": "^2.1.36",
+    "@webqit/dom": "^2.0.4",
+    "@webqit/observer": "^2.0.4",
+    "@webqit/subscript": "^2.1.39",
     "@webqit/util": "^0.8.9"
   },
   "devDependencies": {

package/src/bindings-api/index.js

@@ -0,0 +1,84 @@
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import { _, _init } from '../util.js';
+
+/**
+ * @init
+ * 
+ * @param Object $config
+ */
+export default function init( $config = {} ) {
+    const { config, window } = _init.call( this, 'bindings-api', $config, {
+        api: { bind: 'bind', bindings: 'bindings', },
+    } );
+    window.webqit.Observer = Observer;
+    exposeAPIs.call( window, config );
+}
+
+export { Observer }
+
+/**
+ * @Exports
+ * 
+ * The internal bindings object
+ * within elements and the document object.
+ */
+function getBindingsObject( node ) {
+	if ( !_( node ).has( 'bindings' ) ) {
+		const bindingsObj = Object.create( null );
+		_( node ).set( 'bindings', bindingsObj );
+	}
+	return _( node ).get( 'bindings' );
+}
+
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function exposeAPIs( config ) {
+	const window = this;
+    // Assertions
+    if ( config.api.bind in window.document ) { throw new Error( `document already has a "${ config.api.bind }" property!` ); }
+    if ( config.api.bindings in window.document ) { throw new Error( `document already has a "${ config.api.bindings }" property!` ); }
+    if ( config.api.bind in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.bind }" property!` ); }
+    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( window.document, bindings, config );
+    } });
+    Object.defineProperty( window.document, config.api.bindings, { get: function() {
+        return Observer.proxy( getBindingsObject( window.document ) );
+    } });
+    Object.defineProperty( window.Element.prototype, config.api.bind, { value: function( bindings, config = {} ) {
+        return applyBindings( this, bindings, config );
+    } });
+    Object.defineProperty( window.Element.prototype, config.api.bindings, { get: function() {
+        return Observer.proxy( getBindingsObject( this ) );
+    } } );
+}
+
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param document|Element  target
+ * @param Object            bindings
+ * @param Object            params
+ *
+ * @return Void
+ */
+function applyBindings( target, bindings, { merge, namespace } = {} ) {
+    const bindingsObj = getBindingsObject( target );
+    const $params = { namespace };
+    if ( merge ) return Observer.set( bindingsObj, bindings, $params );;
+    const exitingKeys = Observer.ownKeys( bindingsObj, $params ).filter( key => !( key in bindings ) );
+    return Observer.batch( bindingsObj, () => {
+        if ( exitingKeys.length ) { Observer.deleteProperty( bindingsObj, exitingKeys, $params ); }
+        return Observer.set( bindingsObj, bindings, $params );
+    }, $params );
+}

package/src/context-api/HTMLContext.js

@@ -8,9 +8,9 @@ import HTMLContextManager from './HTMLContextManager.js';
 export default class HTMLContext {
 
     /**
-     * @params
+     * @config
      */
-    static get params() {
+    static get config() {
         return {};
     }
 
@@ -41,7 +41,7 @@ export default class HTMLContext {
     static createId( host, fields = {} ) {
         const id = { type: 'HTMLModules', ...fields };
         if ( id.name ) return id;
-        if ( host.getAttribute && !( id.name = ( host.getAttribute( this.params.context.attr.contextname ) || '' ).trim() ) ) {
+        if ( host.getAttribute && !( id.name = ( host.getAttribute( this.config.context.attr.contextname ) || '' ).trim() ) ) {
             delete id.name;
         } else if ( !host.ownerDocument ) {
             id.name = 'root';

package/src/context-api/index.js

@@ -2,47 +2,43 @@
 /**
  * @imports
  */
-import wqDom from '@webqit/dom';
+import { _init } from '../util.js';
 import HTMLContextManager from './HTMLContextManager.js';
 import HTMLContext from './HTMLContext.js';
 
 /**
  * Initializes HTML Modules.
  * 
- * @param $params  Object
+ * @param $config  Object
  *
  * @return Void
  */
-export default function init( $params = { }) {
-    const window = this, dom = wqDom.call( window );
-    if ( !window.wq ) { window.wq = {}; }
-    window.wq.HTMLContextManager = HTMLContextManager;
-    window.wq.HTMLContext = HTMLContext;
-    // -------
-    const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
+export default function init( $config = {} ) {
+    const { config, window } = _init.call( this, 'context-api', $config, {
         api: { context: 'context', },
     } );
-    // -------
-    exposeModulesObjects.call( this, params );
+    window.webqit.HTMLContextManager = HTMLContextManager;
+    window.webqit.HTMLContext = HTMLContext;
+    exposeModulesObjects.call( window, config );
 }
 
 /**
  * Exposes HTML Modules with native APIs.
  *
- * @param Object                    params
+ * @param Object                    config
  *
  * @return Void
  */
-function exposeModulesObjects( params ) {
+function exposeModulesObjects( config ) {
     const window = this;
     // Assertions
-    if ( params.api.context in window.document ) { throw new Error( `document already has a "${ params.api.context }" property!` ); }
-    if ( params.api.context in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ params.api.context }" property!` ); }
+    if ( config.api.context in window.document ) { throw new Error( `document already has a "${ config.api.context }" property!` ); }
+    if ( config.api.context in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.api.context }" property!` ); }
     // Definitions
-    Object.defineProperty( window.document, params.api.context, { get: function() {
+    Object.defineProperty( window.document, config.api.context, { get: function() {
         return HTMLContextManager.instance( window.document );
     } } );
-    Object.defineProperty( window.HTMLElement.prototype, params.api.context, { get: function() {
+    Object.defineProperty( window.HTMLElement.prototype, config.api.context, { get: function() {
         return HTMLContextManager.instance( this );
     } } );
 }

package/src/html-imports/_HTMLImportElement.js

@@ -9,16 +9,14 @@ import { _ } from '../util.js';
 /**
  * Creates the HTMLImportElement class.
  * 
- * @param Object params 
+ * @param Object config 
  * 
  * @return HTMLImportElement
  */
-export default function( params ) {
-    const window = this, { dom } = window.wq;
-    const BaseExportElement = params.import.tagName.includes( '-' )
-        ? ( params.HTMLImportBaseElement || window.HTMLElement )
-        : class {};
-    return class HTMLImportElement extends BaseExportElement {
+export default function( config ) {
+    const window = this, { dom } = window.webqit;
+    const BaseElement = config.import.tagName.includes( '-' ) ? window.HTMLElement : class {};
+    return class HTMLImportElement extends BaseElement {
         
         /**
          * @instance
@@ -28,7 +26,7 @@ export default function( params ) {
          * @returns 
          */
         static instance( node ) {
-            if ( params.import.tagName.includes( '-' ) && ( node instanceof this ) )  return node;
+            if ( config.import.tagName.includes( '-' ) && ( node instanceof this ) )  return node;
             return _( node ).get( 'import::instance' ) || new this( node );;
         }
 
@@ -61,7 +59,7 @@ export default function( params ) {
 
             priv.hydrate = ( anchorNode, slottedElements ) => {
                 // ----------------
-                priv.moduleRef = ( this.el.getAttribute( params.import.attr.moduleref ) || '' ).trim();
+                priv.moduleRef = ( this.el.getAttribute( config.import.attr.moduleref ) || '' ).trim();
                 priv.setAnchorNode( anchorNode );
                 priv.autoRestore( () => {
                     slottedElements.forEach( slottedElement => {
@@ -73,9 +71,9 @@ export default function( params ) {
                 priv.hydrationImportRequest = new AbortController;
                 priv.importRequest( modules => {
                     if ( priv.originalsRemapped ) { return this.fill( modules ); }
-                    const identifiersMap = [ ...modules ].map( module => ( { el: module, exportId: module.getAttribute( params.export.attr.exportid ) || '#default', tagName: module.tagName, } ) );
+                    const identifiersMap = [ ...modules ].map( module => ( { el: module, exportId: module.getAttribute( config.export.attr.exportid ) || '#default', tagName: module.tagName, } ) );
                     slottedElements.forEach( slottedElement => {
-                        const tagName = slottedElement.tagName, exportId = slottedElement.getAttribute( params.export.attr.exportid ) || '#default';
+                        const tagName = slottedElement.tagName, exportId = slottedElement.getAttribute( config.export.attr.exportid ) || '#default';
                         const originalsMatch = identifiersMap.filter( moduleIdentifiers => tagName === moduleIdentifiers.tagName && exportId === moduleIdentifiers.exportId );
                         if ( originalsMatch.length !== 1 ) return;
                         _( slottedElement ).set( 'original@imports', originalsMatch[ 0 ].el );
@@ -112,7 +110,7 @@ export default function( params ) {
                 // Totally initialize this instance?
                 if ( !priv.anchorNode ) { priv.setAnchorNode( this.createAnchorNode() ); }
                 if ( priv.moduleRefRealtime ) return;
-                priv.moduleRefRealtime = dom.realtime( this.el ).attr( params.import.attr.moduleref, ( record, { signal } ) => {
+                priv.moduleRefRealtime = dom.realtime( this.el ).attr( config.import.attr.moduleref, ( record, { signal } ) => {
                     priv.moduleRef = record.value;
                     ;
                     // Below, we ignore first restore from hydration
@@ -138,7 +136,7 @@ export default function( params ) {
          * @return Element
          */
         createAnchorNode() {
-            if ( !params.isomorphic ) { return window.document.createTextNode( '' ) }
+            if ( !config.isomorphic ) { return window.document.createTextNode( '' ) }
             return window.document.createComment( this.el.outerHTML );
         }
 
@@ -174,8 +172,8 @@ export default function( params ) {
                     // Clone each slottable element and give it a reference to its original
                     const slottableElementClone = slottableElement.cloneNode( true );
                     // The folllowing references must be set before adding to DODM
-                    if ( !slottableElementClone.hasAttribute( params.export.attr.exportid ) ) {
-                        slottableElementClone.toggleAttribute( params.export.attr.exportid, true );
+                    if ( !slottableElementClone.hasAttribute( config.export.attr.exportid ) ) {
+                        slottableElementClone.toggleAttribute( config.export.attr.exportid, true );
                     }
                     _( slottableElementClone ).set( 'original@imports', slottableElement );
                     _( slottableElementClone ).set( 'slot@imports', this.el );

package/src/html-imports/index.js

@@ -2,45 +2,39 @@
 /**
  * @imports
  */
-import wqDom from '@webqit/dom';
 import _HTMLImportElement from './_HTMLImportElement.js';
-import { _ } from '../util.js';
+import { _, _init } from '../util.js';
 
 /**
  * Initializes HTML Modules.
  * 
- * @param $params  Object
+ * @param $config  Object
  *
  * @return Void
  */
-export default function init( $params = { }) {
-    const window = this, dom = wqDom.call( window );
-    if ( !window.wq ) { window.wq = {}; }
-    // -------
-    const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
+export default function init( $config = {} ) {
+    const { config, dom, window } = _init.call( this, 'html-imports', $config, {
         import: { tagName: 'import', attr: { moduleref: 'module' }, },
         export: { attr: { exportid: 'exportid' }, },
         isomorphic: true,
     } );
-    params.slottedElementsSelector = `[${ window.CSS.escape( params.export.attr.exportid ) }]`;
-    // -------
-    window.wq.HTMLImportElement = _HTMLImportElement.call( this, params );
-    // -------
-    dom.ready( () => hydration.call( this, params ) );
-    realtime.call( this, params );
+    config.slottedElementsSelector = `[${ window.CSS.escape( config.export.attr.exportid ) }]`;
+    window.webqit.HTMLImportElement = _HTMLImportElement.call( window, config );
+    dom.ready( () => hydration.call( window, config ) );
+    realtime.call( window, config );
 }
 
 /**
  * Performs realtime capture of elements and their attributes
  * and their module query results; then resolves the respective import elements.
  *
- * @param Object params
+ * @param Object config
  *
  * @return Void
  */
-function realtime( params ) {
-    const window = this, { dom, HTMLImportElement } = window.wq;
-    dom.realtime( window.document ).observe( params.import.tagName, record => {
+function realtime( config ) {
+    const window = this, { dom, HTMLImportElement } = window.webqit;
+    dom.realtime( window.document ).observe( config.import.tagName, record => {
         record.entrants.forEach( node => handleRealtime( node, true, record ) );
         record.exits.forEach( node => handleRealtime( node, false, record ) );
     }, { subtree: true, timing: 'sync' } );
@@ -54,27 +48,27 @@ function realtime( params ) {
 /**
  * Performs hydration for server-slotted elements.
  *
- * @param Object params
+ * @param Object config
  *
  * @return Void
  */
-function hydration( params ) {
-    const window = this, { HTMLImportElement } = window.wq;
+function hydration( config ) {
+    const window = this, { HTMLImportElement } = window.webqit;
     function scan( context ) {
         const slottedElements = new Set;
         context.childNodes.forEach( node => {
             if ( node.nodeType === 1/** ELEMENT_NODE */ ) {
-                if ( !node.matches( params.slottedElementsSelector ) ) return;
+                if ( !node.matches( config.slottedElementsSelector ) ) return;
                 if ( _( node ).get( 'slot@imports' ) ) return;
                 slottedElements.add( node );
             } else if ( node.nodeType === 8/** COMMENT_NODE */ ) {
                 const nodeValue = node.nodeValue.trim();
-                if ( !nodeValue.startsWith( '<' + params.import.tagName ) ) return;
-                if ( !nodeValue.endsWith( '</' + params.import.tagName + '>' ) ) return;
+                if ( !nodeValue.startsWith( '<' + config.import.tagName ) ) return;
+                if ( !nodeValue.endsWith( '</' + config.import.tagName + '>' ) ) return;
                 const reviver = window.document.createElement( 'div' );
                 reviver.innerHTML = nodeValue;
                 const importEl = reviver.firstChild;
-                if ( !importEl.matches( params.import.tagName ) ) return;
+                if ( !importEl.matches( config.import.tagName ) ) return;
                 HTMLImportElement.instance( importEl )[ '#' ].hydrate(
                     node/* the comment node */, slottedElements
                 );
@@ -82,7 +76,7 @@ function hydration( params ) {
             }
         } );
     }
-    Array.from( window.document.querySelectorAll( params.slottedElementsSelector ) ).forEach( slottedElement => {
+    Array.from( window.document.querySelectorAll( config.slottedElementsSelector ) ).forEach( slottedElement => {
         // hydration() might be running AFTER certain <slots> have resolved
         // and slottedElement might be a just-resolved node
         if ( _( slottedElement ).get( 'slot@imports' ) ) return;

package/src/html-modules/HTMLExportsManager.js

@@ -11,24 +11,25 @@ export default class HTMLExportsManager {
     /**
      * @instance
      */
-    static instance( host, params ) {
-        return _( host ).get( 'exportsmanager::instance' ) || new this( host, params );;
+    static instance( window, host, config ) {
+        return _( host ).get( 'exportsmanager::instance' ) || new this( window, host, config );
     }
 
     /**
      * @constructor
      */
-    constructor( host, params, parent = null, level = 0 ) {
+    constructor( window, host, config = {}, parent = null, level = 0 ) {
         _( host ).get( `exportsmanager::instance` )?.dispose();
         _( host ).set( `exportsmanager::instance`, this );
         this.host = host;
-        this.params = params;
+        this.window = window;
+        this.config = config;
         this.parent = parent;
         this.level = level;
         this.modules = getModulesObject( this.host );
-        this.exportId = ( this.host.getAttribute( this.params.template.attr.exportid ) || '' ).trim();
+        this.exportId = ( this.host.getAttribute( this.config.template?.attr.exportid ) || '' ).trim();
         this.validateExportId( this.exportId );
-        const dom = params.window.wq.dom;
+        const dom = this.window.webqit.dom;
         // ----------
         this.realtimeA = dom.realtime( this.host.content ).children( record => {
             this.export( record.entrants, true );
@@ -71,18 +72,18 @@ export default class HTMLExportsManager {
         const fragmentsExports = new Map;
         entries.forEach( entry => {
             if ( entry.nodeType !== 1 ) return;
-            const exportId = ( entry.getAttribute( this.params.export.attr.exportid ) || '' ).trim() || '#default';
-            const isPackage = entry.matches( this.params.templateSelector );
+            const exportId = ( entry.getAttribute( this.config.export.attr.exportid ) || '' ).trim() || '#default';
+            const isPackage = entry.matches( this.config.templateSelector );
             if ( exportId.startsWith( '#' ) ) {
                 this.validateExportId( exportId.substring( 1 ) );
                 if ( !fragmentsExports.has( exportId ) ) { fragmentsExports.set( exportId, [] ); }
                 fragmentsExports.get( exportId ).push( entry );
             } else {
                 if ( isConnected ) {
-                    if ( isPackage ) { new HTMLExportsManager( entry, this.params, this.host, this.level + 1 ); }
+                    if ( isPackage ) { new HTMLExportsManager( this.window, entry, this.config, this.host, this.level + 1 ); }
                     Observer.set( this.modules, exportId, entry );
                 } else {
-                    if ( isPackage ) { HTMLModulesGraph.instance( entry, this.params ).dispose(); }
+                    if ( isPackage ) { HTMLExportsManager.instance( this.window, entry ).dispose(); }
                     Observer.deleteProperty( this.modules, exportId );
                 }
             }
@@ -128,15 +129,14 @@ export default class HTMLExportsManager {
      * @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 => {
+        const fire = ( type, detail ) => this.host.dispatchEvent( new this.window.CustomEvent( type, { detail } ) );
+        const request = this.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()
@@ -159,8 +159,8 @@ export default class HTMLExportsManager {
      */
     evalInheritance( ) {
         if ( !this.parent ) return [];
-        let extendedId = ( this.host.getAttribute( this.params.template.attr.extends ) || '' ).trim();
-        let inheritedIds = ( this.host.getAttribute( this.params.template.attr.inherits ) || '' ).trim();
+        let extendedId = ( this.host.getAttribute( this.config.template.attr.extends ) || '' ).trim();
+        let inheritedIds = ( this.host.getAttribute( this.config.template.attr.inherits ) || '' ).trim();
         const handleInherited = records => {
             records.forEach( record => {
                 if ( Observer.get( this.modules, record.key ) !== record.oldValue ) return;
@@ -174,7 +174,7 @@ export default class HTMLExportsManager {
         const realtimes = [];
         const parentExportsObj = getModulesObject( this.parent );
         if ( extendedId ) {
-            realtimes.push( Observer.deep( parentExportsObj, [ extendedId, this.params.template.api.modules, Infinity ], Observer.get, handleInherited, { live: true } ) );
+            realtimes.push( Observer.deep( parentExportsObj, [ extendedId, this.config.template.api.modules, 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 } ) );
@@ -193,7 +193,7 @@ export default class HTMLExportsManager {
         this.realtimeC.forEach( r => r.abort() );
         Object.entries( this.modules ).forEach( ( [ key, entry ] ) => {
             if ( key.startsWith( '#' ) ) return;
-            HTMLExportsManager.instance( entry ).dispose();
+            HTMLExportsManager.instance( this.window, entry ).dispose();
         } );
     }
 }

package/src/html-modules/_HTMLImportsContext.js

@@ -39,9 +39,9 @@ export default class _HTMLImportsContext extends HTMLContext {
 
         // Parse and translate detail
         if ( ( event.request.detail || '' ).trim() === '/' ) return event.respondWith( this.modules );
-        const $params = this.constructor.params;
+        const $config = this.constructor.config;
         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( '/' ) || []; }
+        if ( path.length ) { path = path.join( `/${ $config.template.api.modules }/` )?.split( '/' ) || []; }
         // No detail?
         if ( !path.length ) return event.respondWith();
 
@@ -70,12 +70,12 @@ export default class _HTMLImportsContext extends HTMLContext {
             }
         };
         // ----------------
-        const $params = this.constructor.params;
-        if ( !this.host.matches || !$params.context.attr.importscontext ) return;
+        const $config = this.constructor.config;
+        if ( !this.host.matches || !$config.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 } ) => {
+        const dom = this.host.ownerDocument.defaultView.webqit.dom;
+        this.refdSourceController = dom.realtime( this.host ).attr( $config.context.attr.importscontext, ( record, { signal } ) => {
             // No importscontext attr set. But we're still watching
             if ( !record.value ) {
                 this.altModules = undefined;