@webqit/oohtml 2.1.8 → 2.1.9

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.9",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,14 +32,14 @@
   "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 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 bindings-api=src/bindings-api/targets.browser.js context-api=src/context-api/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/observer": "^2.0.2",
     "@webqit/subscript": "^2.1.36",
     "@webqit/util": "^0.8.9"
   },

package/src/bindings-api/index.js

@@ -0,0 +1,85 @@
+
+/**
+ * @imports
+ */
+import wqDom from '@webqit/dom';
+import Observer from '@webqit/observer';
+import { _ } from '../util.js';
+
+/**
+ * @init
+ * 
+ * @param Object $params
+ */
+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, {
+        api: { bind: 'bind', bindings: 'bindings', },
+    } );
+    exposeAPIs.call( this, params );
+}
+
+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 params
+ *
+ * @return Void
+ */
+function exposeAPIs( params ) {
+	const window = this;
+    // Assertions
+    if ( params.api.bind in window.document ) { throw new Error( `document already has a "${ params.api.bind }" property!` ); }
+    if ( params.api.bindings in window.document ) { throw new Error( `document already has a "${ params.api.bindings }" property!` ); }
+    if ( params.api.bind in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ params.api.bind }" property!` ); }
+    if ( params.api.bindings in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ params.api.bindings }" property!` ); }
+    // Definitions
+    Object.defineProperty( window.document, params.api.bind, { value: function( bindings, params = {} ) {
+        return applyBindings( window.document, bindings, params );
+    } });
+    Object.defineProperty( window.document, params.api.bindings, { get: function() {
+        return Observer.proxy( getBindingsObject( window.document ) );
+    } });
+    Object.defineProperty( window.Element.prototype, params.api.bind, { value: function( bindings, params = {} ) {
+        return applyBindings( this, bindings, params );
+    } });
+    Object.defineProperty( window.Element.prototype, params.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, params ) {
+    const bindingsObj = getBindingsObject( target );
+    const exitingKeys = Observer.ownKeys( bindingsObj, params ).filter( key => !( key in bindings ) );
+    return Observer.batch( bindingsObj, () => {
+        if ( exitingKeys.length ) { Observer.deleteProperty( bindingsObj, exitingKeys, params ); }
+        Observer.set( bindingsObj, bindings, params );
+    } );
+}

package/src/index.js

@@ -3,7 +3,7 @@
  * @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 HTMLModules from './html-modules/index.js';
 import HTMLImports from './html-imports/index.js';
@@ -18,7 +18,7 @@ export default function init( configs = {} ) {
     if ( this.wq.oohtml ) return;
     this.wq.oohtml = {};
     // --------------
-    StateAPI.call(this, ( configs.StateAPI || {} ) );
+    BindingsAPI.call(this, ( configs.BindingsAPI || {} ) );
     ContextAPI.call( this, ( configs.ContextAPI || {} ) );
     HTMLModules.call( this, ( configs.HTMLModules || {} ) );
     HTMLImports.call( this, ( configs.HTMLImports || {} ) );

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/src/state-api/index.js

@@ -1,59 +0,0 @@
-
-/**
- * @imports
- */
-import wqDom from '@webqit/dom';
-import Observer from '@webqit/observer';
-import { _ } from '../util.js';
-
-/**
- * @init
- * 
- * @param Object $params
- */
-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, {
-        api: { state: 'state', },
-    } );
-    exposeAPIs.call( this, params );
-}
-
-export { Observer }
-
-/**
- * @Exports
- * 
- * The internal state object
- * within elements and the document object.
- */
-function getStateObject( node ) {
-	if ( !_( node ).has( 'state' ) ) {
-		const stateObj = Object.create( null );
-		_( node ).set( 'state', stateObj );
-	}
-	return _( node ).get( 'state' );
-}
-
-/**
- * Exposes State with native APIs.
- *
- * @param Object params
- *
- * @return Void
- */
-function exposeAPIs( params ) {
-	const window = this;
-    // Assertions
-    if ( params.api.state in window.document ) { throw new Error( `document already has a "${ params.api.state }" property!` ); }
-    if ( params.api.state in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ params.api.state }" property!` ); }
-    // Definitions
-    Object.defineProperty( window.document, params.api.state, { get: function() {
-        return Observer.proxy( getStateObject( window.document ) );
-    } });
-    Object.defineProperty( window.Element.prototype, params.api.state, { get: function() {
-        return Observer.proxy( getStateObject( this ) );
-    } } );
-}

package/test/state-api.test.js

@@ -1,34 +0,0 @@
-
-/**
- * @imports
- */
-import { expect } from 'chai';
-import { createDocument } from './index.js';
-import Observer from '@webqit/observer';
-
-describe(`State API`, function() {
-
-    describe( `Basic...`, function() {
-        
-        const head = ``;
-        const body = ``;
-        const { document } = createDocument( head, body );
-
-        it ( `The document object and elements should expose a "state" property each...`, async function() {
-            expect( document ).to.have.property( 'state' );
-            expect( document.body ).to.have.property( 'state' );
-        } );
-
-        it ( `State objects should be observable...`, async function() {
-            let idReceived = null;
-            Observer.observe( document.state, records => {
-                idReceived = records[ 0 ].key;
-            } );
-            document.state.someKey = 'someValue';
-            expect( idReceived ).to.eq( 'someKey' );
-        } );
-
-    } );
-
-} );
-