@webqit/oohtml 2.1.53 → 2.1.54

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.53",
+  "version": "2.1.54",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -25,9 +25,6 @@
   },
   "type": "module",
   "sideEffects": false,
-  "browser": {
-    "fs": false
-  },
   "main": "./src/index.js",
   "scripts": {
     "test": "mocha --extension .test.js --exit",
@@ -39,8 +36,8 @@
   },
   "dependencies": {
     "@webqit/observer": "^2.2.9",
-    "@webqit/realdom": "^2.1.17-0",
-    "@webqit/stateful-js": "^3.0.14-0",
+    "@webqit/realdom": "^2.1.17",
+    "@webqit/stateful-js": "^3.0.15",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {

package/src/context-api/ContextReturnValue.js

@@ -6,8 +6,8 @@ import Observer from "@webqit/observer";
 
 export default class ContextReturnValue {
     constructor( request, hostElement ) {
-        this.request = request;
-        this.hostElement = hostElement;
+        Object.defineProperty( this, 'request', { value: request } );
+        Object.defineProperty( this, 'hostElement', { value: hostElement } );
         if ( request.live && !request.signal ) {
             Object.defineProperty( this, 'abortController', { value: new AbortController } );
             request.signal = this.abortController.signal;

package/src/html-bracelets/AttrBracelet.js

@@ -7,12 +7,12 @@ import Bracelet from './Bracelet.js';
 import { _ } from '../util.js';
 
 export default class AttrBracelet extends Bracelet {
-    static get query() { return `*[@*[${ this.tokens.contains }]]`; }
+    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 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 );
@@ -55,25 +55,31 @@ export default class AttrBracelet extends Bracelet {
         }
     }
 
-    constructor( attr, _value, startIndex, expr ) {
+    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: () => attr.ownerElement },
+            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 ) {
@@ -97,7 +103,14 @@ export default class AttrBracelet extends Bracelet {
         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 ) );
+        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;

package/src/html-bracelets/Bracelet.js

@@ -65,13 +65,17 @@ export default class Bracelet {
     }
 
     render( bindings ) {
-        const value = this.renderExpr( this.expr, bindings );
+        let value = this.renderExpr( this.expr, bindings );
         if ( typeof value === 'undefined' ) {
-            if ( !this.dirty ) return;
-            this.value = this.originalValue;
+            value = this.originalValue;
+            if ( !this.dirty ) {
+                if ( this._booleanAble ) { value = false; }
+                else return;
+            }
+            this.value = value;
             return;
         }
-        this.value = value + '';
+        this.value = value;
     }
 
     disconnect() { this.disconnected = true; }

package/src/html-bracelets/HTMLBracelets.js

@@ -31,17 +31,17 @@ export default class HTMLBracelets extends Set {
         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( ref => {
-            const $ref = ref.join( '.' );
-            if ( !( $ref in bindings ) ) {
-                bindings[ $ref ] = { subs: new Set, controller: new AbortController };
-               const request = _HTMLBindingsProvider.createRequest( { detail: ref, live: true, signal: bindings[ $ref ].signal } );
+        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[ $ref ].value = value;
-                    bindings[ $ref ].subs.forEach( bracelet => bracelet.render( bindings ) );
+                    bindings[ $path ].value = value;
+                    bindings[ $path ].subs.forEach( bracelet => bracelet.render( bindings ) );
                 } );
             }
-            bindings[ $ref ].subs.add( bracelet );
+            bindings[ $path ].subs.add( bracelet );
         } );
         bracelet.render( bindings );
         return returnValue;
@@ -51,11 +51,12 @@ export default class HTMLBracelets extends Set {
         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( ref => {
-            bindings[ ref ].subs.delete( bracelet );
-            if ( !bindings[ ref ].subs.size ) {
-                bindings[ ref ].controller.abort();
-                delete bindings[ ref ];
+        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;

package/src/html-bracelets/TextBracelet.js

@@ -7,7 +7,7 @@ import Bracelet from './Bracelet.js';
 import { _ } from '../util.js';
 
 export default class TextBracelet extends Bracelet {
-    static get query() { return `text()[not(ancestor::script) and ${ this.tokens.contains }]`; }
+    static get query() { return `text()[not(ancestor::script) and not(ancestor::style) and ${ this.tokens.contains }]`; }
     
     static parse( ...nodes ) {
         return nodes.reduce( ( nodes, node ) => {

package/src/html-bracelets/index.js

@@ -53,19 +53,20 @@ function exposeAPIs( config ) {
  */
 function realtime( config ) {
     const window = this, { realdom } = window.webqit;
-    realdom.realtime( window.document ).observe( `(${ TextBracelet.query })`, record => {
+    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() */ ) ) );                
-    }, { subtree: true } );
+    }, { 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' } );
-    realdom.realtime( window.document ).observe( `(${ AttrBracelet.query })`, record => {
-        AttrBracelet.cleanup( ...record.exits.reduce( ( attrs, node ) => [ ...attrs, ...node.attributes ], [] ) );
-        AttrBracelet.mount( ...AttrBracelet.parse( ...record.entrants.reduce( ( attrs, node ) => [ ...attrs, ...node.attributes ], [] ) ) );
-    }, { subtree: true } );
 }

package/src/html-imports/index.js

@@ -76,14 +76,18 @@ function exposeAPIs( config ) {
     Object.defineProperty( window.HTMLTemplateElement.prototype, config.template.api.moduledef, { get: function() {
         return this.getAttribute( config.template.attr.moduledef );
     } } );
-    Object.defineProperty( window.document, config.context.api.import, { value: function( ref, callback = null ) {
+    Object.defineProperty( window.document, config.context.api.import, { value: function( ref, live = false, callback = null ) {
         return importRequest( window.document, ...arguments );
     } } );
-    Object.defineProperty( window.HTMLElement.prototype, config.context.api.import, { value: function( ref, callback = null ) {
+    Object.defineProperty( window.HTMLElement.prototype, config.context.api.import, { value: function( ref, live = false, callback = null ) {
         return importRequest( this, ...arguments );
     } } );
-    function importRequest( context, ref, callback = null ) {
-        const request = _HTMLImportsProvider.createRequest( { detail: ref } );
+    function importRequest( context, ref, live = false, callback = null ) {
+        if ( typeof live === 'function' ) {
+            callback = live;
+            live = false;
+        }
+        const request = _HTMLImportsProvider.createRequest( { detail: ref, live } );
         return HTMLContext.instance( context ).request( request, callback );
     }
 }

package/src/scoped-js/index.js

@@ -2,8 +2,8 @@
 /**
  * @imports
  */
-import { resolveParams } from '@webqit/stateful-js/src/params.js';
-import { StatefulAsyncFunction, StatefulAsyncScript, StatefulModule, State } from '@webqit/stateful-js/src/index.async.js';
+import { resolveParams } from '@webqit/stateful-js/params';
+import { StatefulAsyncFunction, StatefulAsyncScript, StatefulModule, State } from '@webqit/stateful-js/async';
 import Observer from '@webqit/observer';
 import Hash from './Hash.js';
 import { _init } from '../util.js';
@@ -54,16 +54,10 @@ async function execute( config, execHash ) {
     }
     // Execute and save state
     const state = ( await compiledScript.bind( thisContext ) ).execute();
-    if ( thisContext instanceof window.Element && script.scoped ) {
-        if ( !thisContext.scripts ) { Object.defineProperty( thisContext, 'scripts', { value: [] } ); }
-        thisContext.scripts.push( state );
-    }
-    // Observe DOM removal
-    if ( !( thisContext instanceof window.Node ) ) return script;
-    realdom.realtime( window.document ).observe( thisContext, () => {
-        thisContext.dispatchEvent( new window.CustomEvent( 'remove' ) );
-        state.dispose();
-        thisContext.scripts.splice( thisContext.scripts.indexOf( state, 1 ) );
+    if ( script.stateful ) { Object.defineProperty( script, 'state', { value: state } ); }
+    realdom.realtime( window.document ).observe( script, () => {
+        if ( script.stateful ) { state.dispose(); }
+        if ( script.scoped ) { thisContext.scripts.splice( thisContext.scripts.indexOf( script, 1 ) ); }
     }, { subtree: true, timing: 'sync', generation: 'exits' } );
 }
 
@@ -102,6 +96,10 @@ function realtime( config ) {
             }
             // Run now!!!
             const thisContext = script.scoped ? script.parentNode || record.target : ( script.type === 'module' ? undefined : window );
+            if ( script.scoped ) {
+                if ( !thisContext.scripts ) { Object.defineProperty( thisContext, 'scripts', { value: [] } ); }
+                thisContext.scripts.push( script );
+            }
             const execHash = Hash.toHash( { script, compiledScript, thisContext } );
             const manualHandling = record.type === 'query' || ( potentialManualTypes.includes( script.type ) && !window.HTMLScriptElement.supports( script.type ) );
             if ( manualHandling ) { oohtml.Script.execute( execHash ); } else {