@webqit/oohtml 2.1.8 → 2.1.10

package/src/html-modules/index.js

@@ -2,39 +2,33 @@
 /**
  * @imports
  */
-import wqDom from '@webqit/dom';
 import Observer from '@webqit/observer';
 import _HTMLImportsContext from './_HTMLImportsContext.js';
 import HTMLExportsManager from './HTMLExportsManager.js';
-import { _ } from '../util.js';
+import { _, _init } from '../util.js';
 
 /**
  * Initializes HTML Modules.
  * 
- * @param Object        $params 
+ * @param Object        $config 
  *
  * @return Void
  */
-export default function init( $params = {} ) {
-    const window = this, dom = wqDom.call( window );
-    if ( !window.wq ) { window.wq = {}; }
-    window.wq.Observer = Observer;
-    window.wq.HTMLImportsContext = class extends _HTMLImportsContext {
-        static get params() { return params; }
-    };
-    // -------
-    const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
+export default function init( $config = {} ) {
+    const { config, window } = _init.call( this, 'html-modules', $config, {
         template: { attr: { exportid: 'exportid', extends: 'extends', inherits: 'inherits' }, api: { modules: 'modules', exportid: 'exportid' }, },
         context: { attr: { importscontext: 'importscontext', contextname: 'contextname' }, api: { modules: 'modules' }, },
         export: { attr: { exportid: 'exportid' }, },
         staticsensitivity: true,
     } );
-    params.window = window;
-    params.templateSelector = `template[${ window.CSS.escape( params.template.attr.exportid ) }]`;
-    params.ownerContextSelector = [ params.context.attr.contextname, params.context.attr.importscontext ].map( a => `[${ window.CSS.escape( a ) }]` ).join( ',' );
-    // -------
-    exposeModulesObjects.call( this, params );
-    realtime.call( this, params );
+    config.templateSelector = `template[${ window.CSS.escape( config.template.attr.exportid ) }]`;
+    config.ownerContextSelector = [ config.context.attr.contextname, config.context.attr.importscontext ].map( a => `[${ window.CSS.escape( a ) }]` ).join( ',' );
+    window.webqit.HTMLImportsContext = class extends _HTMLImportsContext {
+        static get config() { return config; }
+    };
+    window.webqit.Observer = Observer;
+    exposeModulesObjects.call( window, config );
+    realtime.call( window, config );
 }
 
 export { Observer }
@@ -64,37 +58,37 @@ export function getModulesObject( node, autoCreate = true ) {
 /**
  * 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.context.api.modules in window.document ) { throw new Error( `document already has a "${ params.context.api.modules }" property!` ); }
-    if ( params.template.api.modules in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ params.template.api.modules }" property!` ); }
-    if ( params.template.api.exportid in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ params.template.api.exportid }" property!` ); }
+    if ( config.context.api.modules in window.document ) { throw new Error( `document already has a "${ config.context.api.modules }" property!` ); }
+    if ( config.template.api.modules in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.template.api.modules }" property!` ); }
+    if ( config.template.api.exportid in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.exportid }" property!` ); }
     // Definitions
-    Object.defineProperty( window.document, params.context.api.modules, { get: function() {
+    Object.defineProperty( window.document, config.context.api.modules, { get: function() {
         return getModulesObject( window.document );
     } } );
-    Object.defineProperty( window.HTMLElement.prototype, params.template.api.modules, { get: function() {
+    Object.defineProperty( window.HTMLElement.prototype, config.template.api.modules, { get: function() {
         return getModulesObject( this );
     } } );
-    Object.defineProperty( window.HTMLTemplateElement.prototype, params.template.api.exportid, { get: function() {
-        return this.isConnected ? HTMLExportsManager.instance( this, params ).exportId : this.getAttribute( params.template.attr.exportid );
+    Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.exportid, { get: function() {
+        return this.getAttribute( config.template.attr.exportid );
     } } );
 }
 
 /**
  * Performs realtime capture of elements and builds their contents graph.
  *
- * @param Object	    params
+ * @param Object	    config
  *
  * @return Void
  */
-function realtime( params ) {
-    const window = this, { dom, HTMLImportsContext } = window.wq;
+function realtime( config ) {
+    const window = this, { dom, HTMLImportsContext } = window.webqit;
     // ------------
     const attachImportsContext = host => {
         const contextId = HTMLImportsContext.createId( host );
@@ -103,15 +97,15 @@ function realtime( params ) {
     const detachImportsContext = ( host, force ) => {
         const contextId = HTMLImportsContext.createId( host );
         HTMLImportsContext.detachFrom( host, contextId, cx => {
-            return force || host.matches && !host.matches( params.ownerContextSelector ) && !Object.keys( cx.modules ).length;
+            return force || host.matches && !host.matches( config.ownerContextSelector ) && !Object.keys( cx.modules ).length;
         } );
     };
     // ------------
-    dom.realtime( window.document ).observe( [ params.templateSelector, params.ownerContextSelector ], record => {
+    dom.realtime( window.document ).observe( [ config.templateSelector, config.ownerContextSelector ], record => {
         record.entrants.forEach( entry => {
-            if ( entry.matches( params.templateSelector ) ) {
+            if ( entry.matches( config.templateSelector ) ) {
                 Object.defineProperty( entry, 'scoped', { value: entry.hasAttribute( 'scoped' ) } ); 
-                const moduleExport = new HTMLExportsManager( entry, params );
+                const moduleExport = new HTMLExportsManager( window, entry, config );
                 moduleExport.ownerContext = entry.scoped ? record.target : window.document;
                 const ownerContextModulesObj = getModulesObject( moduleExport.ownerContext );
                 if ( moduleExport.exportId ) { Observer.set( ownerContextModulesObj, moduleExport.exportId, entry ); }
@@ -124,8 +118,8 @@ function realtime( params ) {
             }
         } );
         record.exits.forEach( entry => {
-            if ( entry.matches( params.templateSelector ) ) {
-                const moduleExport = HTMLExportsManager.instance( entry, params );
+            if ( entry.matches( config.templateSelector ) ) {
+                const moduleExport = HTMLExportsManager.instance( window, entry, config );
                 const ownerContextModulesObj = getModulesObject( moduleExport.ownerContext );
                 if ( moduleExport.exportId ) { Observer.deleteProperty( ownerContextModulesObj, moduleExport.exportId ); }
                 detachImportsContext( moduleExport.ownerContext );
@@ -133,5 +127,5 @@ function realtime( params ) {
                 detachImportsContext( entry, true );
             }
         } );
-    }, { subtree: true, timing: 'sync', staticSensitivity: params.staticsensitivity } );
+    }, { subtree: true, timing: 'sync', staticSensitivity: config.staticsensitivity } );
 }

package/src/index.js

@@ -3,27 +3,25 @@
  * @imports
  */
 import Observer from '@webqit/observer';
-import StateAPI from './state-api/index.js';
+import BindingsAPI from './bindings-api/index.js';
 import ContextAPI from './context-api/index.js';
+import NamespaceAPI from './namespace-api/index.js';
 import HTMLModules from './html-modules/index.js';
 import HTMLImports from './html-imports/index.js';
-import NamespacedHTML from './namespaced-html/index.js';
 import ScopedJS from './scoped-js/index.js';
 
 /**
  * @init
  */
 export default function init( configs = {} ) {
-    if ( !this.wq ) { this.wq = {}; }
-    if ( this.wq.oohtml ) return;
-    this.wq.oohtml = {};
+    if ( !this.webqit ) { this.webqit = {}; }
     // --------------
-    StateAPI.call(this, ( configs.StateAPI || {} ) );
-    ContextAPI.call( this, ( configs.ContextAPI || {} ) );
-    HTMLModules.call( this, ( configs.HTMLModules || {} ) );
-    HTMLImports.call( this, ( configs.HTMLImports || {} ) );
-    NamespacedHTML.call(this, ( configs.NamespacedHTML || {} ) );
-    ScopedJS.call( this, ( configs.ScopedJS || {} ) );
+    BindingsAPI.call(this, ( configs.BINDINGS_API || {} ) );
+    ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
+    NamespaceAPI.call(this, ( configs.NAMESPACE_API || {} ) );
+    HTMLModules.call( this, ( configs.HTML_MODULES || {} ) );
+    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) );
+    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
     // --------------
 }
 

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

@@ -3,30 +3,25 @@
  * @imports
  */
 import Observer from '@webqit/observer';
-import wqDom from '@webqit/dom';
-import { _ } from '../util.js';
+import { _, _init } from '../util.js';
 
 /**
  * @init
  * 
- * @param Object $params
+ * @param Object $config
  */
-export default function init( $params = {} ) {
-	const window = this, dom = wqDom.call( window );
-    if ( !window.wq ) { window.wq = {}; }
-    window.wq.Observer = Observer;
-    // -------
-    const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
+export default function init( $config = {} ) {
+    const { config, window } = _init.call( this, 'namespace-api', $config, {
 		attr: { namespace: 'namespace',  id: ':id', },
         api: { namespace: 'namespace', },
 		staticsensitivity: true,
 		eagermode: true,
     } );
-	params.idSelector = `[${ window.CSS.escape( params.attr.id ) }]`;
-	params.namespaceSelector = `[${ window.CSS.escape( params.attr.namespace ) }]`;
-    // -------
-    exposeNamespaceObjects.call( this, params );
-    realtime.call( this, params );
+	config.idSelector = `[${ window.CSS.escape( config.attr.id ) }]`;
+	config.namespaceSelector = `[${ window.CSS.escape( config.attr.namespace ) }]`;
+    window.webqit.Observer = Observer;
+    exposeNamespaceObjects.call( window, config );
+    realtime.call( window, config );
 }
 
 export { Observer }
@@ -34,21 +29,21 @@ export { Observer }
 /**
  * Exposes Namespaced HTML with native APIs.
  *
- * @param Object params
+ * @param Object config
  *
  * @return Void
  */
-function exposeNamespaceObjects( params ) {
+function exposeNamespaceObjects( config ) {
 	const window = this;
     // Assertions
-    if ( params.api.namespace in window.document ) { throw new Error( `document already has a "${ params.api.namespace }" property!` ); }
-    if ( params.api.namespace in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ params.api.namespace }" property!` ); }
+    if ( config.api.namespace in window.document ) { throw new Error( `document already has a "${ config.api.namespace }" property!` ); }
+    if ( config.api.namespace in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.namespace }" property!` ); }
     // Definitions
-    Object.defineProperty( window.document, params.api.namespace, { get: function() {
-        return Observer.proxy( getNamespaceObject.call( window, window.document, params ) );
+    Object.defineProperty( window.document, config.api.namespace, { get: function() {
+        return Observer.proxy( getNamespaceObject.call( window, window.document, config ) );
     } });
-    Object.defineProperty( window.Element.prototype, params.api.namespace, { get: function() {
-        return Observer.proxy( getNamespaceObject.call( window, this, params ) );
+    Object.defineProperty( window.Element.prototype, config.api.namespace, { get: function() {
+        return Observer.proxy( getNamespaceObject.call( window, this, config ) );
     } } );
 }
 
@@ -59,15 +54,15 @@ function exposeNamespaceObjects( params ) {
  *
  * @return Object
  */
-function getNamespaceObject( node, params ) {
+function getNamespaceObject( node, config ) {
 	const window = this;
 	if ( !_( node ).has( 'namespace' ) ) {
 		const namespaceObj = Object.create( null );
 		Observer.intercept( namespaceObj, 'get', ( event, receiver, next ) => {
-			if ( Observer.has( namespaceObj, event.key ) || !params.eagermode ) return next();
-			const selector = `[${ window.CSS.escape( params.attr.id ) }="${ event.key }"]`;
+			if ( Observer.has( namespaceObj, event.key ) || !config.eagermode ) return next();
+			const selector = `[${ window.CSS.escape( config.attr.id ) }="${ event.key }"]`;
 			const resultNode = Array.from( node.querySelectorAll( selector ) ).filter( idNode => {
-				const ownerRoot = idNode.parentNode.closest( params.namespaceSelector );
+				const ownerRoot = idNode.parentNode.closest( config.namespaceSelector );
 				if ( node === window.document ) {
 					// Only IDs without a scope actually belong to the document scope
 					return !ownerRoot;
@@ -85,17 +80,17 @@ function getNamespaceObject( node, params ) {
 /**
  * Performs realtime capture of elements and builds their relationships.
  *
- * @param Object params
+ * @param Object config
  *
  * @return Void
  */
-function realtime( params ) {
-	const window = this, { dom } = window.wq;
+function realtime( config ) {
+	const window = this, { dom } = window.webqit;
 	// ----------------
 	const handle = ( target, entry, incoming ) => {
-		const identifier = entry.getAttribute( params.attr.id );
-		const ownerRoot = target.closest( params.namespaceSelector ) || _( entry ).get( 'ownerNamespace' ) || window.document;
-		const namespaceObj = getNamespaceObject.call( window, ownerRoot, params );
+		const identifier = entry.getAttribute( config.attr.id );
+		const ownerRoot = target.closest( config.namespaceSelector ) || _( entry ).get( 'ownerNamespace' ) || window.document;
+		const namespaceObj = getNamespaceObject.call( window, ownerRoot, config );
 		if ( incoming ) {
 			if ( Observer.get( namespaceObj, identifier ) !== entry ) {
 				_( entry ).set( 'ownerNamespace', ownerRoot );
@@ -106,17 +101,17 @@ function realtime( params ) {
 			Observer.deleteProperty( namespaceObj, identifier );
 		}
 	};
-	dom.realtime( window.document ).observe( params.idSelector, record => {
+	dom.realtime( window.document ).observe( config.idSelector, record => {
         record.entrants.forEach( entry => handle( record.target, entry, true ) );
         record.exits.forEach( entry => handle( record.target, entry, false ) );
-	}, { subtree: true, timing: 'sync', staticSensitivity: params.staticsensitivity } );
+	}, { subtree: true, timing: 'sync', staticSensitivity: config.staticsensitivity } );
 	// ----------------
-	if ( params.staticsensitivity ) {
-		dom.realtime( window.document, 'attr' ).observe( params.namespaceSelector, record => {
-			const ownerRoot = record.target.parentNode?.closest( params.namespaceSelector ) || _( record.target ).get( 'ownerNamespace' ) || window.document;
-			const ownerRootNamespaceObj = getNamespaceObject.call( window, ownerRoot, params );
-			const namespaceObj = getNamespaceObject.call( window, record.target, params );
-			if ( record.target.matches( params.namespaceSelector ) ) {
+	if ( config.staticsensitivity ) {
+		dom.realtime( window.document, 'attr' ).observe( config.namespaceSelector, record => {
+			const ownerRoot = record.target.parentNode?.closest( config.namespaceSelector ) || _( record.target ).get( 'ownerNamespace' ) || window.document;
+			const ownerRootNamespaceObj = getNamespaceObject.call( window, ownerRoot, config );
+			const namespaceObj = getNamespaceObject.call( window, record.target, config );
+			if ( record.target.matches( config.namespaceSelector ) ) {
 				for ( const [ key, entry ] of Object.entries( ownerRootNamespaceObj ) ) {
 					if ( !record.target.contains( entry.parentNode ) ) continue;
 					Observer.deleteProperty( ownerRootNamespaceObj, key );

package/src/scoped-js/Compiler.js

@@ -25,11 +25,11 @@ export default class Compiler {
     }
 
     // Set window property
-    constructor( window, params, executeCallback ) {
+    constructor( window, config, executeCallback ) {
         this.window = window;
-        this.params = params;
+        this.config = config;
         // This is a global function
-        window.wq.oohtml.Script.run = ( execHash ) => {
+        window.webqit.oohtml.Script.run = ( execHash ) => {
             const exec = this.constructor.fromHash( execHash );
             if ( !exec ) throw new Error( `Argument must be a valid exec hash.` );
             const { script, compiledScript, thisContext } = exec;
@@ -37,7 +37,7 @@ export default class Compiler {
                 if ( !thisContext.scripts ) { Object.defineProperty( thisContext, 'scripts', { value: new Set } ); }
                 thisContext.scripts.add( script );
             }
-            switch ( params.script.retention ) {
+            switch ( config.script.retention ) {
                 case 'dispose':
                     script.remove();
                     break;
@@ -54,7 +54,7 @@ export default class Compiler {
     // Compile scipt
     compile( script, thisContext ) {
         const _static = this.constructor;
-        const { wq: { oohtml, SubscriptFunction } } = this.window;
+        const { webqit: { oohtml, SubscriptFunction } } = this.window;
         const cache = oohtml.Script.compileCache[ script.contract ? 0 : 1 ];
         const sourceHash = _static.toHash( script.textContent );
         // Script instances are parsed only once
@@ -72,7 +72,7 @@ export default class Compiler {
                 }
             }
             // Let's obtain a material functions
-            let _Function, { parserParams, compilerParams, runtimeParams } = this.params.config;
+            let _Function, { parserParams, compilerParams, runtimeParams } = this.config.advanced;
             if ( script.contract ) {
                 parserParams = { ...parserParams, allowAwaitOutsideFunction: script.type === 'module' };
                 runtimeParams = { ...runtimeParams, async: script.type === 'module' };
@@ -93,7 +93,7 @@ export default class Compiler {
             cache.set( sourceHash, compiledScript );
         }
         const execHash = _static.toHash( { script, compiledScript, thisContext } );
-        script.textContent = `wq.oohtml.Script.run('${ execHash }');`;
+        script.textContent = `webqit.oohtml.Script.run('${ execHash }');`;
     }
 
     // Match import statements

package/src/scoped-js/index.js

@@ -6,35 +6,30 @@ import { resolveParams } from '@webqit/subscript/src/params.js';
 import SubscriptFunction from '@webqit/subscript/src/SubscriptFunctionLite.js';
 import Observer from '@webqit/observer';
 import Compiler from './Compiler.js';
-import wqDom from '@webqit/dom';
+import { _init } from '../util.js';
 
 /**
  * @init
  * 
- * @param Object $params
+ * @param Object $config
  */
-export default function init( $params = {} ) {
-	const window = this, dom = wqDom.call( window );
-    if ( !window.wq ) { window.wq = {}; }
-    if ( !window.wq.oohtml ) { window.wq.oohtml = {}; }
-    window.wq.oohtml.Script = { compileCache: [ new Map, new Map, ] };
-    window.wq.SubscriptFunction = $params.SubscriptFunction/* allow for injection, e.g. from test runner */ || SubscriptFunction;
-    window.wq.Observer = Observer;
-    // -------
-    const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
+export default function init( { advanced = {}, ...$config } ) {
+    const { config, window } = _init.call( this, 'scoped-js', $config, {
         script: { retention: 'retain', mimeType: '' },
-        config: resolveParams( {
-            parserParams: { allowReturnOutsideFunction: false, allowSuperOutsideMethod: false, ...( $params.parserParams || {} ) },
-            compilerParams: { globalsNoObserve: [ 'alert' ], ...( $params.compilerParams || {} ) },
-            runtimeParams: { apiVersion: 2, ...( $params.runtimeParams || {} ) },
+        advanced: resolveParams( advanced, {
+            parserParams: { allowReturnOutsideFunction: false, allowSuperOutsideMethod: false },
+            compilerParams: { globalsNoObserve: [ 'alert' ] },
+            runtimeParams: { apiVersion: 2 },
         } ),
     } );
-	params.scriptSelector = ( Array.isArray( params.script.mimeType ) ? params.script.mimeType : [ params.script.mimeType ] ).reduce( ( selector, mm ) => {
+	config.scriptSelector = ( Array.isArray( config.script.mimeType ) ? config.script.mimeType : [ config.script.mimeType ] ).reduce( ( selector, mm ) => {
         const qualifier = mm ? `[type=${ window.CSS.escape( mm ) }]` : '';
         return selector.concat( `script${ qualifier }[scoped],script${ qualifier }[contract]` );
     }, [] ).join( ',' );
-    // -------
-    realtime.call( this, params );
+    window.webqit.oohtml.Script = { compileCache: [ new Map, new Map, ] };
+    window.webqit.SubscriptFunction = $config.SubscriptFunction/* allow for injection, e.g. from test runner */ || SubscriptFunction;
+    window.webqit.Observer = Observer;
+    realtime.call( window, config );
 }
 
 export {
@@ -65,7 +60,7 @@ export function execute( compiledScript, thisContext, script ) {
             } );
         } );
     }
-    const window = this, { dom } = window.wq;
+    const window = this, { dom } = window.webqit;
     dom.realtime( window.document ).observe( thisContext, () => {
         if ( script.contract ) {
             // Rerending processes,,,
@@ -82,14 +77,14 @@ export function execute( compiledScript, thisContext, script ) {
 /**
  * Performs realtime capture of elements and builds their relationships.
  *
- * @param Object params
+ * @param Object config
  *
  * @return Void
  */
-function realtime( params ) {
-	const window = this, { dom } = window.wq;
-    const compiler = new Compiler( window, params, execute ), handled = () => {};
-	dom.realtime( window.document ).observe( params.scriptSelector, record => {
+function realtime( config ) {
+	const window = this, { dom } = window.webqit;
+    const compiler = new Compiler( window, config, execute ), handled = () => {};
+	dom.realtime( window.document ).observe( config.scriptSelector, record => {
         record.entrants.forEach( script => {
             if ( 'contract' in script ) return handled( script );
             Object.defineProperty( script, 'contract', { value: script.hasAttribute( 'contract' ) } ); 

package/src/targets.browser.js

@@ -10,5 +10,5 @@ import init, { Observer } from './index.js';
 init.call( window );
 
 // As globals
-if ( !self.wq ) { self.wq = {}; }
-self.wq.Observer = Observer;
+if ( !self.webqit ) { self.webqit = {}; }
+self.webqit.Observer = Observer;

package/src/util.js

@@ -2,11 +2,23 @@
 /**
  * @imports
  */
+import webqitDom from '@webqit/dom';
 import { _internals } from '@webqit/util/js/index.js';
+import { _inherit } from '@webqit/util/obj/index.js';
 
 export const _ = ( node, ...args ) => _internals( node, 'oohtml', ...args );
 
-export  const _compare = ( a, b, depth = 1, objectSizing = false ) => {
+export function _init( name, $config, $defaults ) {
+    const window = this, dom = webqitDom.call( window );
+    window.webqit || ( window.webqit = {} );
+    window.webqit.oohtml || ( window.webqit.oohtml = {} );
+    window.webqit.oohtml.configs || ( window.webqit.oohtml.configs = {} );
+    const config = _inherit( 1, dom.meta( name ).json(), $config, $defaults );
+    window.webqit.oohtml.configs[ name.toUpperCase().replace( '-', '_' ) ] = config;
+    return { config, dom, window };
+}
+
+export function _compare( a, b, depth = 1, objectSizing = false ) {
     if ( depth && typeof a === 'object' && a && typeof b === 'object' && b && ( !objectSizing || Object.keys( a ).length === Object.keys( b ).length ) ) {
         for ( let key in a ) {
             if ( !_compare( a[ key ], b[ key ], depth - 1, objectSizing ) ) return false;

package/test/bindings-api.test.js

@@ -0,0 +1,42 @@
+
+/**
+ * @imports
+ */
+import { expect } from 'chai';
+import { createDocument } from './index.js';
+import Observer from '@webqit/observer';
+
+describe(`Bindings API`, function() {
+
+    describe( `Basic...`, function() {
+        
+        const head = ``;
+        const body = ``;
+        const { document } = createDocument( head, body );
+
+        it ( `The document object and elements should expose a "bindings" property each...`, async function() {
+            expect( document ).to.have.property( 'bindings' );
+            expect( document.body ).to.have.property( 'bindings' );
+        } );
+
+        it ( `Bindings objects should be observable...`, async function() {
+            let idReceived = null;
+            Observer.observe( document.bindings, records => {
+                idReceived = records[ 0 ].key;
+            } );
+            document.bindings.someKey = 'someValue'; // new
+            expect( idReceived ).to.eq( 'someKey' );
+            // -------------
+            let changes = [];
+            Observer.observe( document.bindings, records => {
+                changes.push( ...records );
+            } );
+            document.bindings.someKey2 = 'someValue2'; // new
+            document.bind( { someKey: 'someValue'/* update */, someKey3: 'someValue3'/* new */ } );
+            expect( changes ).to.an( 'array' ).with.length( 4 ); // (1) sets: someKey2, (2) deletes: someKey2, (3) updates: someKey, (4) sets: someKey3;
+        } );
+
+    } );
+
+} );
+

package/test/index.js

@@ -7,7 +7,7 @@ import { createContext, compileFunction, runInContext } from 'vm';
 import jsdom from 'jsdom';
 import init, { Observer } from '../src/index.js';
 import { SubscriptFunction } from '@webqit/subscript';
-import wqDom from '@webqit/dom';
+import webqitDom from '@webqit/dom';
 
 /**
  * -------
@@ -35,7 +35,7 @@ export function createDocument( head = '', body = '', callback = null, ) {
         url: 'http://localhost',
         beforeParse( window ) {
             init.call( window );
-            if ( callback ) callback( window, window.wq.dom );
+            if ( callback ) callback( window, window.webqit.dom );
         }
     } );
     return instance.window;
@@ -55,16 +55,18 @@ export function createDocumentForScopedJS( head = '', body = '', callback = null
             window.testRecords = [];
             createContext( window );
             // Running advanced scripts
-            init.call( window, { ScopedJS: {
+            init.call( window, { SCOPED_JS: {
                 SubscriptFunction,
-                runtimeParams: {
-                    compileFunction: ( code, parameters ) => compileFunction( code, parameters, {
-                        parsingContext: window,
-                    } ),
+                advanced: {
+                    runtimeParams: {
+                        compileFunction: ( code, parameters ) => compileFunction( code, parameters, {
+                            parsingContext: window,
+                        } ),
+                    }
                 }
             } } );
             // Running basic scripts
-            const dom = wqDom.call( window );
+            const dom = webqitDom.call( window );
             if ( params.runScripts !== 'dangerously' ) {
                 dom.realtime( window.document ).observe( 'script', record => {
                     record.entrants.forEach( script => {
@@ -74,7 +76,7 @@ export function createDocumentForScopedJS( head = '', body = '', callback = null
                 }, { subtree: true } );
             }
             // Sync callback?
-            if ( callback ) callback( window, window.wq.dom );
+            if ( callback ) callback( window, window.webqit.dom );
         }
     } );
     return instance.window;