@webqit/oohtml 2.1.57 → 2.1.59

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; }
-}

package/src/html-bracelets/index.js

@@ -1,72 +0,0 @@
-
-/**
- * @imports
- */
-import { _, _init } from '../util.js';
-import AttrBracelet from './AttrBracelet.js';
-import TextBracelet from './TextBracelet.js';
-import HTMLBracelets from './HTMLBracelets.js';
-
-/**
- * Initializes DOM Parts.
- * 
- * @param $config  Object
- *
- * @return Void
- */
-export default function init( $config = {} ) {
-    const { config, realdom, window } = _init.call( this, 'html-bracelets', $config, {
-        api: { bracelets: 'bracelets' },
-        isomorphic: true,
-    } );
-    exposeAPIs.call( window, config );
-    realtime.call( window, config );
-}
-
-/**
- * Exposes DOM Parts with native APIs.
- *
- * @param Object        config
- *
- * @return Void
- */
-function exposeAPIs( config ) {
-    const window = this;
-    // Assertions
-    if ( config.api.bracelets in window.document ) { throw new Error( `document already has a "${ config.api.bracelets }" property!` ); }
-    if ( config.api.bracelets in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ config.api.bracelets }" property!` ); }
-    // Definitions
-    Object.defineProperty( window.document, config.api.bracelets, { get: function() {
-        return HTMLBracelets.instance( window.document );
-    } } );
-    Object.defineProperty( window.HTMLElement.prototype, config.api.bracelets, { get: function() {
-        return HTMLBracelets.instance( this );
-    } } );
-}
-
-/**
- * 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( `(${ TextBracelet.query })`, record => {
-        TextBracelet.cleanup( ...record.exits );
-        TextBracelet.mount( ...TextBracelet.parse( ...record.entrants.filter( node => !_( node ).has( 'text-bracelet' )/** generated text nodes during parse() */ ) ) );                
-    }, { live: true } );
-    realdom.realtime( window.document ).subtree( `(${ AttrBracelet.query })`, record => {
-        AttrBracelet.cleanup( ...record.exits );
-        AttrBracelet.mount( ...AttrBracelet.parse( ...record.entrants ) );
-    }, { live: true } );
-    realdom.realtime( window.document, 'attr' ).observe( records => {
-        for ( const record of records ) {
-            if ( _( record.target ).get( 'attr-bracelets' )?.active.some( p => p.attr.nodeName === record.name ) ) continue;
-            if ( [ ...( _( record.target ).get( 'attr-bracelets' )?.get( record.name ) || [] ) ].some( p => p.isBoolean ) ) continue;
-            if ( record.oldValue ) { AttrBracelet.cleanup( record.value ? record.target.attributes[ record.name ] : { ownerElement: record.target, nodeName: record.name } ); }
-            if ( record.value ) { AttrBracelet.mount( ...AttrBracelet.parse( record.target.attributes[ record.name ] ) ); }
-        }
-    }, { subtree: true, newValue: true, oldValue: true, timing: 'sync' } );
-}