@webqit/oohtml 2.1.52 → 2.1.53

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.52",
+  "version": "2.1.53",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,19 +32,19 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "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-imports=src/html-imports/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 test && npm run build && git add -A dist",
+    "build": "esbuild main=src/targets.browser.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js html-bracelets=src/html-bracelets/targets.browser.js html-namespaces=src/html-namespaces/targets.browser.js html-imports=src/html-imports/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",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
-    "@webqit/observer": "^2.1.5",
-    "@webqit/realdom": "^2.1.13",
-    "@webqit/reflex-functions": "^2.1.50",
+    "@webqit/observer": "^2.2.9",
+    "@webqit/realdom": "^2.1.17-0",
+    "@webqit/stateful-js": "^3.0.14-0",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {
-    "@webqit/oohtml-ssr": "^1.2.15",
+    "@webqit/oohtml-ssr": "^1.2.16",
     "chai": "^4.3.4",
     "coveralls": "^3.1.1",
     "esbuild": "^0.14.43",

package/src/bindings-api/_HTMLBindingsProvider.js

@@ -0,0 +1,38 @@
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import { HTMLContextProvider } from '../context-api/index.js';
+
+export default class _HTMLBindingsProvider extends HTMLContextProvider {
+
+    static type = 'bindings';
+
+    /**
+     * @matchesRequest
+     */
+    static matchRequest( id, request ) {
+        return super.matchRequest( id, request ) && ( !request.detail || !id.detail || ( Array.isArray( request.detail ) ? request.detail[ 0 ] === id.detail : request.detail === id.detail ) );
+    }
+
+    /**
+     * @bindingsObj
+     */
+    get bindingsObj() {
+        return this.host[ this.constructor.config.api.bindings ];
+    }
+
+    /**
+     * @handle()
+     */
+    handle( event ) {
+        // Any existing event.request.controller? Abort!
+        event.request.controller?.abort();
+        if ( !( event.request.detail + '' ).trim() ) return event.respondWith( this.bindingsObj ); 
+        event.request.controller = Observer.reduce( this.bindingsObj, Array.isArray( event.request.detail ) ? event.request.detail : [ event.request.detail ], Observer.get, descriptor => {
+            if ( this.disposed ) return; // If already scheduled but aborted as in provider unmounting
+            event.respondWith( descriptor.value );
+        }, { live: event.request.live, descripted: true } );
+    }
+}

package/src/bindings-api/index.js

@@ -3,8 +3,11 @@
  * @imports
  */
 import Observer from '@webqit/observer';
+import _HTMLBindingsProvider from './_HTMLBindingsProvider.js';
 import { _, _init } from '../util.js';
 
+export { Observer }
+
 /**
  * @init
  * 
@@ -12,14 +15,16 @@ import { _, _init } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'bindings-api', $config, {
+        context: { attr: { contextname: 'contextname' }, },
         api: { bind: 'bind', bindings: 'bindings', },
     } );
+    window.webqit.HTMLBindingsProvider = class extends _HTMLBindingsProvider {
+        static get config() { return config; }
+    };
     window.webqit.Observer = Observer;
     exposeAPIs.call( window, config );
 }
 
-export { Observer }
-
 /**
  * @Exports
  * 
@@ -30,10 +35,48 @@ function getBindingsObject( node ) {
 	if ( !_( node ).has( 'bindings' ) ) {
 		const bindingsObj = Object.create( null );
 		_( node ).set( 'bindings', bindingsObj );
+        Observer.observe( bindingsObj, mutations => {
+            for ( const mutation of mutations ) {
+                if ( mutation.type === 'delete' ) {
+                    detachBindingsContext.call( this, node, mutation.key );
+                } else { attachBindingsContext.call( this, node, mutation.key ); }
+            }
+        } );
 	}
 	return _( node ).get( 'bindings' );
 }
 
+function attachBindingsContext( host, key ) {
+    const window = this, { HTMLBindingsProvider } = window.webqit;
+    const contextId = HTMLBindingsProvider.createId( host, { detail: key } );
+    HTMLBindingsProvider.attachTo( host, contextId );
+}
+
+function detachBindingsContext( host, key ) {
+    const window = this, { HTMLBindingsProvider } = window.webqit;
+    const contextId = HTMLBindingsProvider.createId( host, { detail: key } );
+    HTMLBindingsProvider.detachFrom( host, contextId );
+}
+
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @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 );
+    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.
  *
@@ -50,35 +93,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( window.document, bindings, config );
+        return applyBindings.call( window, window.document, bindings, config );
     } });
     Object.defineProperty( window.document, config.api.bindings, { get: function() {
-        return Observer.proxy( getBindingsObject( window.document ) );
+        return Observer.proxy( getBindingsObject.call( window, window.document ) );
     } });
     Object.defineProperty( window.Element.prototype, config.api.bind, { value: function( bindings, config = {} ) {
-        return applyBindings( this, bindings, config );
+        return applyBindings.call( window, this, bindings, config );
     } });
     Object.defineProperty( window.Element.prototype, config.api.bindings, { get: function() {
-        return Observer.proxy( getBindingsObject( this ) );
+        return Observer.proxy( getBindingsObject.call( window, this ) );
     } } );
 }
-
-/**
- * Exposes Bindings with native APIs.
- *
- * @param document|Element  target
- * @param Object            bindings
- * @param Object            params
- *
- * @return Void
- */
-function applyBindings( target, bindings, { merge, diff, namespace } = {} ) {
-    const bindingsObj = getBindingsObject( target );
-    const $params = { diff, 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/ContextReturnValue.js

@@ -0,0 +1,22 @@
+
+/**
+ * @imports
+ */
+import Observer from "@webqit/observer";
+
+export default class ContextReturnValue {
+    constructor( request, hostElement ) {
+        this.request = request;
+        this.hostElement = hostElement;
+        if ( request.live && !request.signal ) {
+            Object.defineProperty( this, 'abortController', { value: new AbortController } );
+            request.signal = this.abortController.signal;
+        }
+    }
+    callback( response ) { Observer.defineProperty( this, 'value', { value: response, configurable: true, enumerable: true } ); }
+    abort() {
+        if ( this.abortController ) { return this.abortController.abort(); }
+        const window = this.hostElement.ownerDocument?.defaultView || this.hostElement.defaultView;
+        if ( this.request.signal ) { return this.request.signal.dispatchEvent( new window.Event( 'abort' ) ); }
+    }
+}

package/src/context-api/HTMLContext.js

@@ -2,6 +2,7 @@
 /**
  * @imports
  */
+import ContextReturnValue from './ContextReturnValue.js';
 import _ContextRequestEvent from './_ContextRequestEvent.js';
 import { _ } from '../util.js';
 
@@ -25,8 +26,7 @@ export default class HTMLContext {
         const ContextRequestEvent = _ContextRequestEvent.call( host.ownerDocument?.defaultView || host.defaultView );
         Object.defineProperty( this, 'ContextRequestEvent', { get: () => ContextRequestEvent } );
         this[ Symbol.iterator ] = function*() {
-            const it = priv.contexts[ Symbol.iterator ]();
-            yield it.next().value;
+            yield* priv.contexts;
         }
     }
 
@@ -63,10 +63,18 @@ export default class HTMLContext {
     /**
      * @request()
      */
-    request( request, callback, options = {} ) {
-        return this[ '#' ].host.dispatchEvent(
-            new this.ContextRequestEvent( request, callback, { bubbles: true, ...options } )
-        );
+    request( request, callback = null, options = {} ) {
+        if ( typeof callback === 'object' ) {
+            options = callback;
+            callback = null;
+        }
+        let contextReturnValue;
+        if ( !callback ) {
+            contextReturnValue = new ContextReturnValue( request, this[ '#' ].host );
+            callback = contextReturnValue.callback.bind( contextReturnValue );
+        }
+        const returnValue = this[ '#' ].host.dispatchEvent( new this.ContextRequestEvent( request, callback, { bubbles: true, ...options } ) );
+        return contextReturnValue ?? returnValue;
     }
 
     /**

package/src/context-api/HTMLContextProvider.js

@@ -7,6 +7,16 @@ import HTMLContext from './HTMLContext.js';
 
 export default class HTMLContextProvider {
 
+    /**
+     * For reference purposes
+     */
+    static providers = new Map;
+
+    /**
+     * To be implemented by subclasses
+     */
+    static type;
+
     /**
      * @config
      */
@@ -18,20 +28,21 @@ export default class HTMLContextProvider {
      * @attachTo
      */
     static attachTo( host, Id, multiple = false ) {
+        this.providers.set( this.type, this );
         let provider, contextMgr = HTMLContext.instance( host );
-        if ( !multiple && ( provider = contextMgr.findProvider( cx => this.matchRequest( cx.id, Id, true ) ) ) ) return provider;
+        if ( !multiple && ( provider = contextMgr.findProvider( provider => this.matchId( provider.id, Id ) ) ) ) return provider;
         return contextMgr.attachProvider( new this( Id ) );
     }
 
     /**
      * @detachFrom
      */
-    static detachFrom( host, Id, multiple = false ) {
+    static detachFrom( host, Id, multipleOrFilter = false ) {
         let provider, contextMgr = HTMLContext.instance( host );
         for ( provider of contextMgr[ '#' ].contexts ) {
-            if ( !this.matchRequest( provider.id, Id, true ) || ( typeof multiple === 'function' && !multiple( provider ) ) ) continue;
+            if ( !this.matchId( provider.id, Id ) || ( typeof multipleOrFilter === 'function' && !multipleOrFilter( provider ) ) ) continue;
             contextMgr.detachProvider( provider );
-            if ( typeof multiple !== 'function' && !multiple ) return provider;
+            if ( typeof multiple !== 'function' && !multipleOrFilter ) return provider;
         }
     }
  
@@ -39,7 +50,7 @@ export default class HTMLContextProvider {
      * @createId
      */
     static createId( host, fields = {} ) {
-        const id = { ...fields };
+        const id = { type: this.type, ...fields };
         if ( id.contextName ) return id;
         if ( host.getAttribute && !( id.contextName = ( host.getAttribute( this.config.context.attr.contextname ) || '' ).trim() ) ) {
             delete id.contextName;
@@ -48,20 +59,26 @@ export default class HTMLContextProvider {
         }
         return id;
     }
+
+    /**
+     * @matchId
+     */
+    static matchId( a, b ) {
+        return _compare( a, b, 1, true );
+    }
  
     /**
      * @createRequest
      */
     static createRequest( fields = {} ) {
-        return { ...fields };
+        return { type: this.type, ...fields };
     }
 
     /**
      * @matchesRequest
      */
-    static matchRequest( id, request, strict = false ) {
-        if ( strict ) return _compare( id, request, 1, true );
-        return request.type === id.type && !request.contextName || request.contextName === id.contextName;
+    static matchRequest( id, request ) {
+        return request.type === id.type && ( !request.contextName || request.contextName === id.contextName );
     }
 
     /**
@@ -108,7 +125,7 @@ export default class HTMLContextProvider {
      */
     handleEvent( event ) {
         if ( this.disposed || ( event.target === this.host && event.request?.superContextOnly )
-        || !event.request || typeof event.callback !== 'function' || !this.constructor.matchRequest( this.id, event.request ) ) return;
+        || !( typeof event.request === 'object' && event.request ) || typeof event.respondWith !== 'function' || !this.constructor.matchRequest( this.id, event.request ) ) return;
         event.stopPropagation();
         if ( event.type === 'contextclaim' ) {
             const claims = new Set;

package/src/context-api/_ContextRequestEvent.js

@@ -17,8 +17,8 @@ export default function() {
          */
         respondWith( response, ...rest ) {
             if ( this.request.diff ) {
-                if ( 'previousValue' in this && this.previousValue === response ) return;
-                this.previousValue = response;
+                if ( 'prevValue' in this && this.prevValue === response ) return;
+                Object.defineProperty( this, 'prevValue', { value: response, configurable: true } );
             }
             return this.callback( response, ...rest );
         }

package/src/context-api/index.js

@@ -6,6 +6,14 @@ import { _init } from '../util.js';
 import HTMLContext from './HTMLContext.js';
 import HTMLContextProvider from './HTMLContextProvider.js';
 
+/**
+ * @exports
+ */
+export {
+    HTMLContextProvider,
+    HTMLContext,
+}
+
 /**
  * Initializes HTML Modules.
  * 
@@ -19,7 +27,7 @@ export default function init( $config = {} ) {
     } );
     window.webqit.HTMLContextProvider = HTMLContextProvider;
     window.webqit.HTMLContext = HTMLContext;
-    exposeModulesObjects.call( window, config );
+    exposeAPIs.call( window, config );
 }
 
 /**
@@ -29,7 +37,7 @@ export default function init( $config = {} ) {
  *
  * @return Void
  */
-function exposeModulesObjects( config ) {
+function exposeAPIs( config ) {
     const window = this;
     // Assertions
     if ( config.api.context in window.document ) { throw new Error( `document already has a "${ config.api.context }" property!` ); }
@@ -41,12 +49,20 @@ function exposeModulesObjects( config ) {
     Object.defineProperty( window.HTMLElement.prototype, config.api.context, { get: function() {
         return HTMLContext.instance( this );
     } } );
+    const waitlist = new Set;
+    window.addEventListener( 'contextrequest', event => {
+        if ( !( typeof event.request === 'object' && event.request ) || typeof event.respondWith !== 'function' ) return;
+        waitlist.add( event );
+        event.respondWith();
+    } );
+    window.addEventListener( 'contextclaim', event => {
+        if ( !( typeof event.request === 'object' && event.request ) || typeof event.respondWith !== 'function' ) return;
+        const claims = new Set;
+        waitlist.forEach( subscriptionEvent => {
+            if ( !HTMLContextProvider.providers.get( event.request.type ).matchRequest( event.request/*provider ID*/, subscriptionEvent.request/*request ID*/ ) ) return;
+            waitlist.delete( subscriptionEvent );
+            claims.add( subscriptionEvent );
+        } );
+        event.respondWith( claims );
+    } );
 }
-
-/**
- * @exports
- */
-export {
-    HTMLContextProvider,
-    HTMLContext,
-}

package/src/html-bracelets/AttrBracelet.js

@@ -0,0 +1,109 @@
+
+/**
+ * @imports
+ */
+import HTMLBracelets from './HTMLBracelets.js';
+import Bracelet from './Bracelet.js';
+import { _ } from '../util.js';
+
+export default class AttrBracelet extends Bracelet {
+    static get query() { return `*[@*[${ this.tokens.contains }]]`; }
+    
+    static parse( ...attrs ) {
+        return attrs.reduce( ( attrs, attr ) => {
+            return attrs.concat( [ ...attr.nodeValue.matchAll( new RegExp( this.tokens.regex, 'g' ) ) ].reduce( ( bracelets, match ) => {
+                const bracelet = new this( attr, match[ 0 ], match.index, match[ 1 ].trim() );
+                const prev = bracelets.slice( -1 )[ 0 ];
+                if ( prev ) { prev._nextSibling = bracelet; }
+                return bracelets.concat( bracelet );
+            }, [] ) );
+        }, [] );
+    }
+
+    static mount( ...bracelets ) {
+        for ( const bracelet of bracelets ) {
+            // Add to attr-specific registry
+            let attrBraceletsRegistry = _( bracelet.ownerElement ).get( 'attr-bracelets' );
+            if ( !attrBraceletsRegistry ) {
+                attrBraceletsRegistry = new Map;
+                attrBraceletsRegistry.active = [];
+                _( bracelet.ownerElement ).set( 'attr-bracelets', attrBraceletsRegistry );
+            }
+            let attrBracelets = attrBraceletsRegistry.get( bracelet.attr.nodeName );
+            if ( !attrBracelets ) {
+                attrBracelets = new Set;
+                attrBraceletsRegistry.set( bracelet.attr.nodeName, attrBracelets );
+            }
+            attrBracelets.add( bracelet );
+            attrBraceletsRegistry.active[ 0 ]?._nested.add( bracelet );
+            // Add to general registry
+            HTMLBracelets.instance( bracelet.ownerElement ).add( bracelet );
+        }
+    }
+
+    static cleanup( ...attrs ) {
+        for ( const attr of attrs ) {
+            // Remove from attr-specific registry
+            const attrBraceletsRegistry = _( attr.ownerElement ).get( 'attr-bracelets' );
+            attrBraceletsRegistry?.get( attr.nodeName )?.forEach( bracelet => {
+                bracelet.disconnect();
+                // Remove from general registry
+                HTMLBracelets.instance( bracelet.ownerElement ).delete( bracelet );
+            } );
+            attrBraceletsRegistry?.delete( attr.nodeName );
+            if ( attrBraceletsRegistry && !attrBraceletsRegistry.size ) { _( attr.ownerElement ).delete( 'attr-bracelets' ); }
+        }
+    }
+
+    constructor( attr, _value, startIndex, expr ) {
+        super();
+        const $refs = [], $expr = this.parseExpr( expr, $refs );
+        Object.defineProperties( this, {
+            type: { get: () => 'attr' },
+            expr: { get: () => $expr },
+            refs: { get: () => $refs },
+            attr: { get: () => attr },
+            ownerElement: { get: () => attr.ownerElement },
+            originalValue: { value: _value },
+            _value: { value: _value, writable: true },
+            _dirty: { value: false, writable: true },
+            _startIndex: { value: undefined, writable: true },
+            _endIndex: { value: undefined, writable: true },
+            _nextSibling: { value: undefined, writable: true },
+            _nested: { value: new Set },
+        } );
+        this.startIndex = startIndex;
+    }
+
+    get startIndex() { return this._startIndex; }
+    set startIndex( value ) {
+        this._startIndex = value;
+        this.endIndex = this._startIndex + this.value.length;
+    }
+
+    get endIndex() { return this._endIndex; }
+    set endIndex( value ) {
+        if ( value === this._endIndex ) return;
+        if ( this.nextSibling ) { this.nextSibling.startIndex += value - this._endIndex; }
+        this._endIndex = value;
+    }
+
+    get value() { return this._value; }
+    set value( value ) {
+        if ( this.disconnected || value === this._value ) return;
+        this._value = value;
+        this._dirty = true;
+        // Set attribute; but first disconnect any "nested"
+        this._nested.forEach( p => p.disconnect() );
+        const attrBraceletsRegistry = _( this.ownerElement ).get( 'attr-bracelets' );
+        attrBraceletsRegistry.active.unshift( this );
+        this.ownerElement.setAttribute( this.attr.nodeName, this.attr.nodeValue.substring( 0, this.startIndex ) + value + this.attr.nodeValue.substring( this.endIndex ) );
+        attrBraceletsRegistry.active.shift();
+        // Reindex
+        const newEndIndex = this.startIndex + value.length;
+        if ( newEndIndex !== this.endIndex ) { this.endIndex = newEndIndex; }
+    }
+
+    get nextSibling() { return this._nextSibling; }
+    get dirty() { return this._dirty; }
+}

package/src/html-bracelets/Bracelet.js

@@ -0,0 +1,78 @@
+
+export default class Bracelet {
+    static tokens = {
+        startTag: `{`, endTag: `}`,
+        get contains () { return `contains(., "${ this.startTag }") and contains(substring-after(., "${ this.startTag }"), "${ this.endTag }")`; },
+        get startsAndEnds() { return `starts-with(., "${ this.startTag }") and substring(., string-length(.) - string-length("${ this.endTag }") + 1) = "${ this.endTag }"`; },
+        get regex() {
+            const startTag = this.startTag.split( '' ).map( s => '\\' + s );
+            const endTag = this.endTag.split( '' ).map( s => '\\' + s );
+            return `${ startTag.join( '' ) }([^${ startTag[ 0 ] }]+)${ endTag.join( '' ) }`;
+        }
+    }
+
+    parseExpr( expr, refs ) {
+        const tokens = expr.match( /[\+\-\*\/&|\?\:\=\<\>\%]+|(['"])[^'"]*\1|\[[^\]]*\]|\([^)]*\)|\S+/g ).map( s => s.trim() );
+        return tokens.map( s => {
+            let meta = {};
+            if ( s[ 0 ] === '!' ) { meta = { negation: true }; s = s.slice( 1 ); }
+            if ( /^\(.*\)$/.test( s ) ) return { type: 'expr', value: this.parseExpr( s.slice( 1, -1 ), refs ), ...meta }; // must be before the operator test
+            if ( [ '"', "'" ].includes( s[ 0 ] ) ) return { type: 'literal', value: /(['"])(.*?)\1/g.exec( s )[ 2 ], ...meta }; // must be before the operator test
+            if ( /[\+\-\*\/&|\?\:\=\<\>\%]/.test( s ) ) return { type: 'operator', value: s, ...meta };
+            if ( !isNaN( s ) ) return { type: 'literal', value: parseFloat( s ), ...meta };
+            const ref = s.match( /[^\.\[\]]+/g );
+            refs.push( ref );
+            return { type: 'ref', value: ref, ...meta };
+        } );
+    }
+
+    renderExpr( expr, bindings ) {
+        return expr.reduce( ( [ prev, operator, state ], token ) => {
+            // No further evaluations allowed?
+            if ( state === 'end' ) return [ prev, null, 'end' ];
+            // Mode has been consequent and we've now hit the alternate block?
+            if ( state === 'consequent' && token.type === 'operator' && token.value === ':' ) return [ prev, null, 'end' ];
+            // Always return operators at this level
+            if ( token.type === 'operator' ) return [ prev, token, state ];
+            // Still expecting to hit the alternate block?
+            if ( state === 'alternate' && operator?.value !== ':' ) return [ null, null, 'alternate' ];
+            // Main...
+            let value, render = ( token, val ) => token.negation ? !val : val;
+            switch ( token.type ) {
+                case 'ref': value = render( token, bindings[ token.value.join( '.' ) ].value ); break;
+                case 'expr': value = render( token, this.renderExpr( token.value, bindings ) ); break;
+                default: value = render( token, token.value );
+            }
+            switch ( operator?.value ) {
+                case '-': return [ prev - value, null, state ];
+                case '+': return [ prev + value, null, state ];
+                case '/': return [ prev / value, null, state ];
+                case '*': return [ prev * value, null, state ];
+                case '%': return [ prev % value, null, state ];
+                case '===': return [ prev === value, null, state ];
+                case '==': return [ render( operator, prev == value ), null, state ];
+                case '>=': return [ prev >= value, null, state ];
+                case '<=': return [ prev <= value, null, state ];
+                case '>': return [ prev > value, null, state ];
+                case '<': return [ prev < value, null, state ];
+                case '||': return [ prev || value, null, state ];
+                case '&&': return [ prev && value, null, state ];
+                case '?': return prev ? [ value, null, 'consequent' ] : [ null, null, 'alternate' ];
+                case '??': return [ prev ?? value, null, state ];
+                default: return [ value ];
+            }
+        }, [ null, null ] )[ 0 ];
+    }
+
+    render( bindings ) {
+        const value = this.renderExpr( this.expr, bindings );
+        if ( typeof value === 'undefined' ) {
+            if ( !this.dirty ) return;
+            this.value = this.originalValue;
+            return;
+        }
+        this.value = value + '';
+    }
+
+    disconnect() { this.disconnected = true; }
+}