@webqit/oohtml 2.1.56 → 2.1.58

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.56",
+  "version": "2.1.58",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
   "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-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",
+    "build": "esbuild main=src/targets.browser.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js html-bindings=src/html-bindings/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"
@@ -37,7 +37,7 @@
   "dependencies": {
     "@webqit/observer": "^2.2.9",
     "@webqit/realdom": "^2.1.17",
-    "@webqit/stateful-js": "file:../stateful-js",
+    "@webqit/stateful-js": "^3.0.27",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {

package/src/html-bindings/index.js

@@ -0,0 +1,233 @@
+
+/**
+ * @imports
+ */
+import Observer from '@webqit/observer';
+import { HTMLContext } from '../context-api/index.js';
+import _HTMLBindingsProvider from '../bindings-api/_HTMLBindingsProvider.js';
+import { StatefulAsyncFunction } from '@webqit/stateful-js/async';
+import { _, _init } from '../util.js';
+
+/**
+ * Initializes DOM Parts.
+ * 
+ * @param $config  Object
+ *
+ * @return Void
+ */
+export default function init( $config = {} ) {
+    const { config, window } = _init.call( this, 'html-bindings', $config, {
+        attr: { bind: 'bind', itemIndex: 'data-index' },
+        tokens: { nodeType: 'processing-instruction', tagStart: '?{', tagEnd: '}?', stateStart: '; [=', stateEnd: ']' },
+        staticsensitivity: true,
+        isomorphic: true,
+    } );
+    config.api = {
+        bind: window.webqit.oohtml.configs.BINDINGS_API.api.bind,
+        import: window.webqit.oohtml.configs.HTML_IMPORTS.context.api.import,
+    };
+    config.attrSelector = `[${ window.CSS.escape( config.attr.bind ) }]`;
+    const braceletMatch = ( start, end ) => {
+        const starting = `starts-with(., "${ start }")`;
+        const ending = `substring(., string-length(.) - string-length("${ end }") + 1) = "${ end }"`;
+        return `${ starting } and ${ ending }`;
+    }
+    config.braceletSelector = `comment()[${ braceletMatch( config.tokens.tagStart, config.tokens.tagEnd ) }]`;
+    window.webqit.Observer = Observer;
+    realtime.call( window, config );
+}
+
+/**
+ * Performs realtime capture of elements and their attributes
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function realtime( config ) {
+    const window = this, { realdom } = window.webqit;
+	// ----------------
+    realdom.realtime( window.document ).subtree( `(${ config.braceletSelector })`, record => {
+        cleanup.call( this, ...record.exits );  
+        mountBracelets.call( this, config, ...record.entrants );  
+    }, { live: true } );
+    realdom.realtime( window.document ).subtree( config.attrSelector, record => {
+        cleanup.call( this, ...record.exits );  
+        mountInlineSubscript.call( this, config, ...record.entrants );  
+    }, { live: true, timing: 'sync', staticSensitivity: config.staticsensitivity } );
+}
+
+function createDynamicScope( root ) {
+    if ( _( root ).has( 'subscripts' ) ) return _( root ).get( 'subscripts' );
+    const scope = {}, abortController = new AbortController;
+    scope.$set = function( node, prop, val ) {
+        node && ( node[ prop ] = val );
+    }
+    Observer.intercept( scope, {
+        get: ( e, recieved, next ) => {
+            if ( !( e.key in scope ) ) {
+                const request = _HTMLBindingsProvider.createRequest( { detail: e.key, live: true, signal: abortController.signal } );
+                HTMLContext.instance( root ).request( request, value => {
+                    Observer.set( scope, e.key, value );
+                } );
+            }
+            return next( scope[ e.key ] ?? ( e.key in globalThis ? globalThis[ e.key ] : undefined ) );
+        },
+        has: ( e, recieved, next ) => { return next( true ); }
+    } );
+    const instance = { scope, abortController, subscripts: new Map };
+    _( root ).set( 'subscripts', instance );
+    return instance;
+}
+
+function cleanup( ...entries ) {
+    for ( const node of entries ) {
+        const root = node.nodeName  === '#text' ? node.parentNode : node;
+        const { subscripts, abortController } = _( root ).get( 'subscripts' ) || {};
+        if ( !subscripts?.has( node ) ) return;
+        subscripts.get( node ).state.dispose();
+        subscripts.get( node ).signals.forEach( s => s.abort() );
+        subscripts.delete( node );
+        if ( !subscripts.size ) {
+            abortController.abort();
+            _( root ).delete( 'subscripts' );
+        }
+    }
+}
+
+async function mountBracelets( config, ...entries ) {
+    const window = this;
+    const patternMatch = str => {
+        const tagStart = config.tokens.tagStart.split( '' ).map( x => `\\${ x }` ).join( '' );
+        const tagEnd = config.tokens.tagEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
+        const stateStart = config.tokens.stateStart.split( '' ).map( x => x === ' ' ? `(?:\\s+)?` : `\\${ x }` ).join( '' );
+        const stateEnd = config.tokens.stateEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
+        const pattern = `^${ tagStart }(.*?)(?:${ stateStart }(\\d+)${ stateEnd }(?:\\s+)?)?${ tagEnd }$`;
+        const [ /*raw*/, expr, span ] = str.match( new RegExp( pattern ) );
+        return { raw: str, expr, span: parseInt( span ?? 0 ) };
+    };
+
+    const instances = entries.reduce( ( instances, node ) => {
+        if ( node.isBracelet ) return instances;
+        const template = patternMatch( node.nodeValue );
+        let textNode = node;
+        if ( template.span ) {
+            textNode = node.nextSibling;
+            if ( textNode?.nodeName !== '#text' || textNode.nodeValue.length < template.span ) return instances;
+            if ( textNode.nodeValue.length > template.span ) { textNode.splitText( template.span ); }
+        } else if ( node.nextSibling ) {
+            textNode = node.parentNode.insertBefore( node.ownerDocument.createTextNode( '' ), node.nextSibling );
+        } else { textNode = node.parentNode.appendChild( node.ownerDocument.createTextNode( '' ) ); }
+        textNode.isBracelet = true;
+        let stateNode = node;
+        if ( window.webqit.env !== 'server' ) {
+            stateNode.remove();
+            stateNode = null;
+        }
+        return instances.concat( { textNode, template, stateNode } );
+    }, [] );
+
+    for ( const { textNode, template, stateNode } of instances ) {
+        const { scope: env, subscripts } = createDynamicScope( textNode.parentNode );
+        let source = '';
+        source += `let content = ((${ template.expr }) ?? '') + '';`;
+        source += `$set(this, 'nodeValue', content);`;
+        if ( stateNode ) { source += `$set($stateNode__, 'nodeValue', \`${ config.tokens.tagStart }${ template.expr }${ config.tokens.stateStart }\` + content.length + \`${ config.tokens.stateEnd } ${ config.tokens.tagEnd }\`);`; }
+        const compiled = new StatefulAsyncFunction( '$signals__', `$stateNode__`, source, { env } );
+        const signals = [];
+        subscripts.set( textNode, { compiled, signals, state: await compiled.call( textNode, signals, stateNode ), } );
+    }
+}
+
+async function mountInlineSubscript( config, ...entries ) {
+    for ( const node of entries ) {
+        const source = parseInlineBindings( config, node.getAttribute( config.attr.bind ) );
+        const { scope: env, subscripts } = createDynamicScope( node );
+        const compiled = new StatefulAsyncFunction( '$signals__', source, { env } );
+        const signals = [];
+        subscripts.set( node, { compiled, signals, state: await compiled.call( node, signals ), } );
+    }
+}
+
+const parseCache = new Map;
+function parseInlineBindings( config, str ) {
+    if ( parseCache.has( str ) ) return parseCache.get( str );
+    const validation = {};
+    const source = splitOuter( str, ';' ).map( str => {
+        const [ left, right ] = splitOuter( str, ':' ).map( x => x.trim() );
+        const token = left[ 0 ], param = left.slice( 1 ).trim();
+        const $expr = `(${ right })`, $$expr = `(${ $expr } ?? '')`;
+        if ( token === '&' ) return `this.style[\`${ param }\`] = ${ $$expr };`;
+        if ( token === '%' ) return `this.classList.toggle(\`${ param }\`, !!${ $expr });`;
+        if ( token === '@' ) {
+            if ( param.endsWith( '?' ) ) return `this.toggleAttribute(\`${ param.substring( 0, -1 ).trim() }\`, !!${ $expr });`;
+            return `this.setAttribute(\`${ param }\`, ${ $$expr });`;
+        }
+        if ( token === '~' ) {
+            if ( validation[ param ] ) throw new Error( `Duplicate binding: ${ left }.` );
+            validation[ param ] = true;
+            if ( param === 'text' ) return `$set(this, 'textContent', ${ $$expr });`;
+            if ( param === 'html' ) return `this.setHTML(${ $$expr });`;
+            if ( param === 'items' ) {
+                const [ iterationSpec, importSpec ] = splitOuter( right, '/' );
+                let [ raw, production, kind, iteratee ] = iterationSpec.trim().match( /(.*?[\)\s+])(of|in)([\(\{\[\s+].*)/i ) || [];
+                if ( !raw ) throw new Error( `Invalid ${ token }items spec: ${ str }.` );
+                if ( production.startsWith( '(' ) ) {
+                    production = production.trim().slice( 1, -1 ).split( ',' ).map( x => x.trim() );
+                } else { production = [ production ]; }
+                if ( production.length > ( kind === 'in' ? 3 : 2 ) ) throw new Error( `Invalid ${ token }items spec: ${ str }.` );
+                const indices = kind === 'in' ? production[ 2 ] : ( production[ 1 ] || '$index__' );
+                return `
+                let $iteratee__ = ${ iteratee };
+                let $import__ = this.${ config.api.import }( ${ importSpec.trim() }, true );
+                $signals__.push( $import__ );
+
+                if ( $import__.value && $iteratee__ ) {
+                    let $existing__ = new Map;
+                    this.querySelectorAll( '[${ config.attr.itemIndex }]' ).forEach( x => {
+                        $existing__.set( x.getAttribute( '${ config.attr.itemIndex }' ), x );
+                    } );
+                    ${ indices ? `let ${ indices } = -1;` : '' }
+                    for ( let ${ production[ 0 ] } ${ kind } $iteratee__ ) {
+                        ${ indices ? `${ indices } ++;` : '' }
+                        ${ kind === 'in' && production[ 1 ] ? `let ${ production[ 1 ] } = $iteratee__[ ${ production[ 0 ] } ];` : '' }
+                        const $itemBinding__ = { ${ production.join( ', ' ) } };
+                        
+                        const $key___ = ( ${ kind === 'in' ? production[ 0 ] : indices } ) + '';
+                        let $itemNode__ = $existing__.get( $key___ );
+                        if ( $itemNode__ ) {
+                            $existing__.delete( $key___ );
+                        } else {
+                            $itemNode__ = ( Array.isArray( $import__.value ) ? $import__.value[ 0 ] : ( $import__.value.content ? $import__.value.content.firstElementChild : $import__.value ) ).cloneNode( true );
+                            $itemNode__.setAttribute( "${ config.attr.itemIndex }", $key___ );
+                            this.appendChild( $itemNode__ );
+                        }
+                        
+                        $itemNode__.${ config.api.bind }( $itemBinding__ );
+                        if ( ${ kind === 'in' ? `!( ${ production[ 0 ] } in $iteratee__ )` : `typeof ${ production[ 0 ] } === 'undefined'` } ) { $itemNode__.remove(); }
+                    }
+                    $existing__.forEach( x => x.remove() );
+                    $existing__.clear();
+                }`;
+            }
+        }
+        if ( str.trim() ) throw new Error( `Invalid binding: ${ str }.` );
+    } ).join( `\n` );
+    parseCache.set( str, source );
+    return source;
+}
+
+export function splitOuter( str, delim ) {
+    return [ ...str ].reduce( ( [ quote, depth, splits, skip ], x ) => {
+        if ( !quote && depth === 0 && ( Array.isArray( delim ) ? delim : [ delim ] ).includes( x ) ) {
+            return [ quote, depth, [ '' ].concat( splits ) ];
+        }
+        if ( !quote && [ '(', '[', '{' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth++;
+        if ( !quote && [ ')', ']', '}' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) depth--;
+        if ( [ '"', "'", '`' ].includes( x ) && !splits[ 0 ].endsWith( '\\' ) ) {
+            quote = quote === x ? null : ( quote || x );
+        }
+        splits[ 0 ] += x;
+        return [ quote, depth, splits ]
+    }, [ null, 0, [ '' ] ] )[ 2 ].reverse();
+}

package/src/index.js

@@ -5,7 +5,7 @@
 import Observer from '@webqit/observer';
 import ContextAPI from './context-api/index.js';
 import BindingsAPI from './bindings-api/index.js';
-import HTMLBracelets from './html-bracelets/index.js';
+import HTMLBindings from './html-bindings/index.js';
 import HTMLNamespaces from './html-namespaces/index.js';
 import HTMLImports from './html-imports/index.js';
 import ScopedCSS from './scoped-css/index.js';
@@ -24,9 +24,9 @@ export default function init( configs = {} ) {
     // --------------
     ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
     BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) );
-    HTMLBracelets.call( this, ( configs.HTML_BRACELETS || {} ) );
+    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) ); // Depends ContextAPI
+    HTMLBindings.call( this, ( configs.HTML_BRACELETS || {} ) ); // Depends ContextAPI, BindingsAPI, HTMLImports
     HTMLNamespaces.call( this, ( configs.HTML_NAMESPACES || {} ) );
-    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) );
     ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) );
     ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
     // --------------

package/src/html-bracelets/AttrBracelet.js

@@ -1,122 +0,0 @@
-
-/**
- * @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(), attr.nodeName === 'class' || match[ 0 ] === attr.nodeValue.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, booleanAble ) {
-        super();
-        const $refs = [], $expr = this.parseExpr( expr, $refs );
-        const ownerElement = attr.ownerElement; // Hard save. Deleted attributes don't retain .ownerElement
-        Object.defineProperties( this, {
-            type: { get: () => 'attr' },
-            expr: { get: () => $expr },
-            refs: { get: () => $refs },
-            attr: { get: () => attr },
-            ownerElement: { get: () => 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 },
-            _booleanAble: { value: booleanAble, writable: true },
-            _nested: { value: new Set },
-        } );
-        if ( this.attr.nodeName === 'class' && ( this.expr.length !== 1 || this.expr[ 0 ].type !== 'ref' ) ) {
-            throw new Error( `Invalid bracelet for the class attribute: "${ this.originalValue }"` );
-        }
-        this.startIndex = startIndex;
-    }
-    get isBoolean() { return this._booleanAble && typeof this._value === 'boolean'; }
-
-    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 );
-        if ( this.isBoolean && this.attr.nodeName !== 'class' ) {
-            this.ownerElement.toggleAttribute( this.attr.nodeName, value );
-        } else {
-            if ( this.isBoolean && this.attr.nodeName === 'class' ) {
-                value = value ? this.expr[ 0 ].value.join( '' ) : '';
-            }
-            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

@@ -1,82 +0,0 @@
-
-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 ) {
-        let value = this.renderExpr( this.expr, bindings );
-        if ( typeof value === 'undefined' ) {
-            value = this.originalValue;
-            if ( !this.dirty ) {
-                if ( this._booleanAble ) { value = false; }
-                else return;
-            }
-            this.value = value;
-            return;
-        }
-        this.value = value;
-    }
-
-    disconnect() { this.disconnected = true; }
-}

package/src/html-bracelets/HTMLBracelets.js

@@ -1,68 +0,0 @@
-
-/**
- * @imports
- */
-import { HTMLContext } from '../context-api/index.js';
-import _HTMLBindingsProvider from '../bindings-api/_HTMLBindingsProvider.js';
-import Bracelet from './Bracelet.js';
-import { _ } from '../util.js';
-
-export default class HTMLBracelets extends Set {
- 
-    /**
-     * @instance
-     */
-    static instance( host ) {
-        return _( host ).get( 'bracelets::instance' ) || new this( host );
-    }
-
-    /**
-     * @constructor
-     */
-    constructor( host ) {
-        super();
-        _( host ).get( `bracelets::instance` )?.dispose();
-        _( host ).set( `bracelets::instance`, this );
-        const priv = { host, bindings: Object.create( null ) };
-        Object.defineProperty( this, '#', { get: () => priv } );
-    }
-
-    add( bracelet ) {
-        if ( !( bracelet instanceof Bracelet ) ) throw new Error( `Argument must be instance of Bracelet.` );
-        const returnValue = super.add( bracelet );
-        const bindings = this[ '#' ].bindings;
-        bracelet.refs.forEach( path => {
-            const $path = path.join( '.' );
-            if ( !( $path in bindings ) ) {
-                bindings[ $path ] = { subs: new Set, controller: new AbortController };
-               const request = _HTMLBindingsProvider.createRequest( { detail: path, live: true, signal: bindings[ $path ].signal } );
-                HTMLContext.instance( this[ '#' ].host ).request( request, value => {
-                    bindings[ $path ].value = value;
-                    bindings[ $path ].subs.forEach( bracelet => bracelet.render( bindings ) );
-                } );
-            }
-            bindings[ $path ].subs.add( bracelet );
-        } );
-        bracelet.render( bindings );
-        return returnValue;
-    }
-
-    delete( bracelet ) {
-        if ( !( bracelet instanceof Bracelet ) ) throw new Error( `Argument must be instance of Bracelet.` );
-        const returnValue = super.delete( bracelet );
-        const bindings = this[ '#' ].bindings;
-        bracelet.refs.forEach( path => {
-            const $path = path.join( '.' );
-            bindings[ $path ].subs.delete( bracelet );
-            if ( !bindings[ $path ].subs.size ) {
-                bindings[ $path ].controller.abort();
-                delete bindings[ $path ];
-            }
-        } );
-        return returnValue;
-    }
-
-    clear() {
-        for ( const bracelet of this ) { this.delete( bracelet ); }
-    }
-}

package/src/html-bracelets/TextBracelet.js

@@ -1,69 +0,0 @@
-
-/**
- * @imports
- */
-import HTMLBracelets from './HTMLBracelets.js';
-import Bracelet from './Bracelet.js';
-import { _ } from '../util.js';
-
-export default class TextBracelet extends Bracelet {
-    static get query() { return `text()[not(ancestor::script) and not(ancestor::style) and ${ this.tokens.contains }]`; }
-    
-    static parse( ...nodes ) {
-        return nodes.reduce( ( nodes, node ) => {
-            let $node = node, $rest = node, startIndex, endIndex;
-            while ( $rest && ( startIndex = $rest.nodeValue.indexOf( this.tokens.startTag ) ) > -1 ) {
-                if ( startIndex > 0 ) { $node = $rest.splitText( startIndex ); }
-                if ( ( endIndex = $node.nodeValue.indexOf( this.tokens.endTag ) + this.tokens.endTag.length ) !== $node.nodeValue.length ) {
-                    $rest = $node.splitText( endIndex );
-                } else { $rest = null; }
-                nodes.push( new this( $node ) );
-            }
-            return nodes;
-        }, [] );
-    }
-
-    static mount( ...bracelets ) {
-        for ( const bracelet of bracelets ) {
-            _( bracelet.node ).set( 'text-bracelet', bracelet );
-            HTMLBracelets.instance( bracelet.ownerElement ).add( bracelet );
-        }
-    }
-
-    static cleanup( ...nodes ) {
-        for ( const node of nodes ) {
-            const bracelet = _( node ).get( 'text-bracelet' );
-            if ( !bracelet ) continue;
-            bracelet.disconnect();
-            HTMLBracelets.instance( bracelet.ownerElement ).delete( bracelet );
-            _( node ).delete( 'text-bracelet' );
-        }
-    }
-
-    constructor( node ) {
-        super();
-        const expr = [ ...node.nodeValue.match( new RegExp( this.constructor.tokens.regex ) ) ][ 1 ].trim();
-        const $refs = [], $expr = this.parseExpr( expr, $refs );
-        Object.defineProperties( this, {
-            _value: { value: node.nodeValue, writable: true },
-            _dirty: { value: false, writable: true },
-            type: { get: () => 'text' },
-            expr: { get: () => $expr },
-            refs: { get: () => $refs },
-            node: { get: () => node },
-            ownerElement: { get: () => node.parentNode },
-            originalValue: { value: node.nodeValue },
-        } );
-    }
-
-    get value() { return this._value; }
-    set value( value ) {
-        if ( this.disconnected || value === this._value ) return;
-        this._value = value;
-        this._dirty = true;
-        this.node.nodeValue = value;
-    }
-
-    get nextSibling() { return this.node.nextSibling; }
-    get dirty() { return this._dirty; }
-}