@webqit/oohtml 5.0.7 → 5.0.8

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,12 +39,12 @@
     "version:next": "npm version prerelease --preid=next"
   },
   "dependencies": {
-    "@webqit/realdom": "^2.1.35",
+    "@webqit/realdom": "^2.1.36",
     "@webqit/use-live": "^0.5.49",
     "@webqit/util": "^0.8.16"
   },
   "devDependencies": {
-    "@webqit/oohtml-ssr": "^2.2.1",
+    "@webqit/oohtml-ssr": "^2.2.4",
     "chai": "^4.3.4",
     "coveralls": "^3.1.1",
     "esbuild": "^0.14.43",

package/src/bindings-api/index.js

@@ -2,6 +2,7 @@
 /**
  * @imports
  */
+import { isElement } from '@webqit/realdom';
 import DOMBindingsContext from './DOMBindingsContext.js';
 import { _wq, _init, _splitOuter } from '../util.js';
 
@@ -10,13 +11,13 @@ import { _wq, _init, _splitOuter } from '../util.js';
  * 
  * @param Object $config
  */
-export default function init( $config = {} ) {
-    const { config, window } = _init.call( this, 'bindings-api', $config, {
+export default function init($config = {}) {
+    const { config, window } = _init.call(this, 'bindings-api', $config, {
         attr: { bindingsreflection: 'bindings' },
         api: { bind: 'bind', bindings: 'bindings', },
-    } );
+    });
     window.webqit.DOMBindingsContext = DOMBindingsContext;
-    exposeAPIs.call( window, config );
+    exposeAPIs.call(window, config);
     realtime.call(window, config);
 }
 
@@ -26,38 +27,38 @@ export default function init( $config = {} ) {
  * The internal bindings object
  * within elements and the document object.
  */
-function getBindings( config, node ) {
+function getBindings(config, node) {
     const window = this, { webqit: { Observer, oohtml: { configs: { CONTEXT_API: ctxConfig } } } } = window;
-	if ( !_wq( node ).has( 'bindings' ) ) {
-		const bindingsObj = Object.create( null );
-		_wq( node ).set( 'bindings', bindingsObj );
-        Observer.observe( bindingsObj, mutations => {
-            if ( node instanceof window.Element ) {
-                const bindingsParse = parseBindingsAttr( node.getAttribute( config.attr.bindingsreflection ) || '' );
+    if (!_wq(node).has('bindings')) {
+        const bindingsObj = Object.create(null);
+        _wq(node).set('bindings', bindingsObj);
+        Observer.observe(bindingsObj, mutations => {
+            if (isElement(node)) {
+                const bindingsParse = parseBindingsAttr(node.getAttribute(config.attr.bindingsreflection) || '');
                 const bindingsParseBefore = new Map(bindingsParse);
-                for ( const m of mutations ) {
-                    if ( m.detail?.publish !== false ) {
-                        if ( m.type === 'delete' ) bindingsParse.delete( m.key );
-                        else bindingsParse.set( m.key, undefined );
+                for (const m of mutations) {
+                    if (m.detail?.publish !== false) {
+                        if (m.type === 'delete') bindingsParse.delete(m.key);
+                        else bindingsParse.set(m.key, undefined);
                     }
                 }
-                if ( bindingsParse.size && bindingsParse.size !== bindingsParseBefore.size ) {
-                    node.setAttribute( config.attr.bindingsreflection, `{ ${ [ ...bindingsParse.entries() ].map(([ key, value ]) => value === undefined ? key : `${ key }: ${ value }` ).join( ', ' ) } }` );
-                } else if ( !bindingsParse.size ) node.toggleAttribute( config.attr.bindingsreflection, false );
+                if (bindingsParse.size && bindingsParse.size !== bindingsParseBefore.size) {
+                    node.setAttribute(config.attr.bindingsreflection, `{ ${[...bindingsParse.entries()].map(([key, value]) => value === undefined ? key : `${key}: ${value}`).join(', ')} }`);
+                } else if (!bindingsParse.size) node.toggleAttribute(config.attr.bindingsreflection, false);
             } else {
-                const contextsApi = node[ ctxConfig.api.contexts ];
-                for ( const m of mutations ) {
-                    if ( m.type === 'delete' ) {
-                        const ctx = contextsApi.find( DOMBindingsContext.kind, m.key );
-                        if ( ctx ) contextsApi.detach( ctx );
-                    } else if ( !contextsApi.find( DOMBindingsContext.kind, m.key ) ) {
-                        contextsApi.attach( new DOMBindingsContext( m.key ) );
+                const contextsApi = node[ctxConfig.api.contexts];
+                for (const m of mutations) {
+                    if (m.type === 'delete') {
+                        const ctx = contextsApi.find(DOMBindingsContext.kind, m.key);
+                        if (ctx) contextsApi.detach(ctx);
+                    } else if (!contextsApi.find(DOMBindingsContext.kind, m.key)) {
+                        contextsApi.attach(new DOMBindingsContext(m.key));
                     }
                 }
             }
-        } );
-	}
-	return _wq( node ).get( 'bindings' );
+        });
+    }
+    return _wq(node).get('bindings');
 }
 
 /**
@@ -67,22 +68,26 @@ function getBindings( config, node ) {
  *
  * @return Void
  */
-function exposeAPIs( config ) {
-	const window = this, { webqit: { Observer } } = window;
+function exposeAPIs(config) {
+    const window = this, { webqit: { Observer } } = window;
     // The Bindings APIs
-    [ window.Document.prototype, window.Element.prototype, window.ShadowRoot.prototype ].forEach( prototype => {
+    [window.Document.prototype, window.Element.prototype, window.ShadowRoot.prototype].forEach(prototype => {
         // No-conflict assertions
-        const type = prototype === window.Document.prototype ? 'Document' : ( prototype === window.ShadowRoot.prototype ? 'ShadowRoot' : 'Element' );
-        if ( config.api.bind in prototype ) { throw new Error( `The ${ type } prototype already has a "${ config.api.bind }" API!` ); }
-        if ( config.api.bindings in prototype ) { throw new Error( `The ${ type } prototype already has a "${ config.api.bindings }" API!` ); }
+        const type = prototype === window.Document.prototype ? 'Document' : (prototype === window.ShadowRoot.prototype ? 'ShadowRoot' : 'Element');
+        if (config.api.bind in prototype) { throw new Error(`The ${type} prototype already has a "${config.api.bind}" API!`); }
+        if (config.api.bindings in prototype) { throw new Error(`The ${type} prototype already has a "${config.api.bindings}" API!`); }
         // Definitions
-        Object.defineProperty( prototype, config.api.bind, { value: function( bindings, options = {} ) {
-            return applyBindings.call( window, config, this, bindings, options );
-        } });
-        Object.defineProperty( prototype, config.api.bindings, { get: function() {
-            return Observer.proxy( getBindings.call( window, config, this ) );
-        } } );
-    } );
+        Object.defineProperty(prototype, config.api.bind, {
+            value: function (bindings, options = {}) {
+                return applyBindings.call(window, config, this, bindings, options);
+            }
+        });
+        Object.defineProperty(prototype, config.api.bindings, {
+            get: function () {
+                return Observer.proxy(getBindings.call(window, config, this));
+            }
+        });
+    });
 }
 
 /**
@@ -95,15 +100,15 @@ function exposeAPIs( config ) {
  *
  * @return Void
  */
-function applyBindings( config, target, bindings, { merge, diff, publish, namespace } = {} ) {
+function applyBindings(config, target, bindings, { merge, diff, publish, namespace } = {}) {
     const window = this, { webqit: { Observer } } = window;
-    const bindingsObj = getBindings.call( this, config, target );
+    const bindingsObj = getBindings.call(this, config, target);
     const $params = { diff, namespace, detail: { publish } };
-    const exitingKeys = merge ? [] : Object.keys( bindingsObj ).filter( key => !( key in bindings ) );
-    return Observer.batch( bindingsObj, () => {
-        if ( exitingKeys.length ) { Observer.deleteProperties( bindingsObj, exitingKeys, $params ); }
-        return Observer.set( bindingsObj, bindings, $params );
-    }, $params );
+    const exitingKeys = merge ? [] : Object.keys(bindingsObj).filter(key => !(key in bindings));
+    return Observer.batch(bindingsObj, () => {
+        if (exitingKeys.length) { Observer.deleteProperties(bindingsObj, exitingKeys, $params); }
+        return Observer.set(bindingsObj, bindings, $params);
+    }, $params);
 }
 
 /**
@@ -119,47 +124,47 @@ function realtime(config) {
     // ------------
     const attachBindingsContext = (host, key) => {
         const contextsApi = host[configs.CONTEXT_API.api.contexts];
-        if ( !contextsApi.find( DOMBindingsContext.kind, key ) ) {
-            contextsApi.attach( new DOMBindingsContext( key ) );
+        if (!contextsApi.find(DOMBindingsContext.kind, key)) {
+            contextsApi.attach(new DOMBindingsContext(key));
         }
     };
     const detachBindingsContext = (host, key) => {
         let ctx, contextsApi = host[configs.CONTEXT_API.api.contexts];
-        while( ctx = contextsApi.find( DOMBindingsContext.kind, key ) ) contextsApi.detach(ctx);
+        while (ctx = contextsApi.find(DOMBindingsContext.kind, key)) contextsApi.detach(ctx);
     };
     // ------------
-    realdom.realtime(window.document).query( `[${window.CSS.escape(config.attr.bindingsreflection)}]`, record => {
-        record.exits.forEach( entry => detachBindingsContext( entry ) );
+    realdom.realtime(window.document).query(`[${window.CSS.escape(config.attr.bindingsreflection)}]`, record => {
+        record.exits.forEach(entry => detachBindingsContext(entry));
         record.entrants.forEach(entry => {
-            const bindingsParse = parseBindingsAttr( entry.getAttribute( config.attr.bindingsreflection ) || '' );
-            const newData = [ ...bindingsParse.entries() ].filter(([ k, v ]) => v !== undefined );
-            if ( newData.length ) entry[ config.api.bind ]( Object.fromEntries( newData ), { merge: true, publish: false } );
-            for ( const [ key ] of bindingsParse ) {
-                attachBindingsContext( entry, key );
+            const bindingsParse = parseBindingsAttr(entry.getAttribute(config.attr.bindingsreflection) || '');
+            const newData = [...bindingsParse.entries()].filter(([k, v]) => v !== undefined);
+            if (newData.length) entry[config.api.bind](Object.fromEntries(newData), { merge: true, publish: false });
+            for (const [key] of bindingsParse) {
+                attachBindingsContext(entry, key);
             }
-        } );
+        });
     }, { id: 'bindings:dom', live: true, subtree: 'cross-roots', timing: 'sync', eventDetails: true });
-	realdom.realtime( window.document, 'attr' ).observe( config.attr.bindingsreflection, record => {
-        const bindingsObj = getBindings.call( window, config, record.target );
-        const bindingsParse = parseBindingsAttr( record.value || '' );
-        const oldBindings = parseBindingsAttr( record.oldValue || '' );
-        for ( const key of new Set([ ...bindingsParse.keys(), ...oldBindings.keys() ]) ) {
-            if ( !oldBindings.has( key ) ) {
-                if ( bindingsParse.get( key ) !== undefined ) Observer.set( bindingsObj, key, bindingsParse.get( key ), { detail: { publish: false } } );
-                attachBindingsContext( record.target, key );
-            } else if ( !bindingsParse.has( key ) ) {
-                if ( oldBindings.get( key ) !== undefined ) Observer.deleteProperty( bindingsObj, key, { detail: { publish: false } } );
-                detachBindingsContext( record.target, key );
-            } else if ( bindingsParse.get( key ) !== oldBindings.get( key ) ) {
-                Observer.set( bindingsObj, key, bindingsParse.get( key ), { detail: { publish: false } } );
+    realdom.realtime(window.document, 'attr').observe(config.attr.bindingsreflection, record => {
+        const bindingsObj = getBindings.call(window, config, record.target);
+        const bindingsParse = parseBindingsAttr(record.value || '');
+        const oldBindings = parseBindingsAttr(record.oldValue || '');
+        for (const key of new Set([...bindingsParse.keys(), ...oldBindings.keys()])) {
+            if (!oldBindings.has(key)) {
+                if (bindingsParse.get(key) !== undefined) Observer.set(bindingsObj, key, bindingsParse.get(key), { detail: { publish: false } });
+                attachBindingsContext(record.target, key);
+            } else if (!bindingsParse.has(key)) {
+                if (oldBindings.get(key) !== undefined) Observer.deleteProperty(bindingsObj, key, { detail: { publish: false } });
+                detachBindingsContext(record.target, key);
+            } else if (bindingsParse.get(key) !== oldBindings.get(key)) {
+                Observer.set(bindingsObj, key, bindingsParse.get(key), { detail: { publish: false } });
             }
         }
-	}, { id: 'bindings:attr', subtree: 'cross-roots', timing: 'sync', newValue: true, oldValue: true } );
+    }, { id: 'bindings:attr', subtree: 'cross-roots', timing: 'sync', newValue: true, oldValue: true });
 }
 
 const parseBindingsAttr = str => {
     str = str.trim();
-    return new Map(_splitOuter( str.slice(1, -1), ',' ).filter( s => s.trim() ).map( _str => {
-        return _splitOuter( _str, ':' ).map( s => s.trim() );
+    return new Map(_splitOuter(str.slice(1, -1), ',').filter(s => s.trim()).map(_str => {
+        return _splitOuter(_str, ':').map(s => s.trim());
     }));
 };

package/src/context-api/DOMContext.js

@@ -2,6 +2,7 @@
 /**
  * @imports
  */
+import { isDocument, isShadowRoot } from '@webqit/realdom';
 import DOMContexts from './DOMContexts.js';
 import { env } from '../util.js';
 
@@ -36,7 +37,7 @@ export default class DOMContext {
     /**
      * @name
      */
-    get name() { return [ env.window.Document, env.window.ShadowRoot ].some( x => this.host instanceof x ) ? Infinity : this.host.getAttribute( this.configs.CONTEXT_API.attr.contextname ); }
+    get name() { return isDocument(this.host) || isShadowRoot(this.host) ? Infinity : this.host.getAttribute( this.configs.CONTEXT_API.attr.contextname ); }
 
     /**
      * @subscribed()

package/src/data-binding/index.js

@@ -225,7 +225,7 @@ function compileInlineBindings( config, str ) {
                             $existing__.delete( $key___ );
                             $exec__($itemNode__, '${ config.BINDINGS_API.api.bind }', $itemBinding__ );
                         } else {
-                            $itemNode__ = ( Array.isArray( $import__.value ) ? $import__.value[ 0 ] : ( $import__.value instanceof window.HTMLTemplateElement ? $import__.value.content.firstElementChild : $import__.value ) ).cloneNode( true );
+                            $itemNode__ = ( Array.isArray( $import__.value ) ? $import__.value[ 0 ] : ( $import__.value?.nodeName === 'TEMPLATE' ? $import__.value.content.firstElementChild : $import__.value ) ).cloneNode( true );
                             $itemNode__.setAttribute( "${ config.attr.itemIndex }", $key___ );
                             $exec__($itemNode__, '${ config.BINDINGS_API.api.bind }', $itemBinding__ );
                             $exec__(this, 'appendChild', $itemNode__ );

package/src/html-imports/_HTMLImportElement.js

@@ -2,6 +2,7 @@
 /**
  * @imports
  */
+import { isNodeInterface } from '@webqit/realdom';
 import HTMLImportsContext from './HTMLImportsContext.js';
 import { _wq, env } from '../util.js';
 
@@ -26,7 +27,7 @@ export default function () {
          * @returns 
          */
         static instance(node) {
-            if (configs.HTML_IMPORTS.elements.import.includes('-') && (node instanceof this)) return node;
+            if (configs.HTML_IMPORTS.elements.import.includes('-') && (node.nodeName === this.nodeName)) return node;
             return _wq(node).get('import::instance') || new this(node);
         }
 
@@ -57,7 +58,7 @@ export default function () {
                     const moduleRef = priv.moduleRef.includes('#') ? priv.moduleRef : `${priv.moduleRef}#`/* for live children */;
                     const request = { ...HTMLImportsContext.createRequest(moduleRef), live: signal && true, signal, diff: !moduleRef.endsWith('#') };
                     parentNode[configs.CONTEXT_API.api.contexts].request(request, response => {
-                        callback((response instanceof window.HTMLTemplateElement ? [...response.content.children] : (
+                        callback((isNodeInterface(response, 'HTMLTemplateElement') ? [...response.content.children] : (
                             Array.isArray(response) ? response : response && [response]
                         )) || []);
                     });
@@ -88,6 +89,7 @@ export default function () {
                         priv.slottedElements.add(slottedElement);
                     });
                     priv.originalsRemapped = true;
+                    priv.autoRestore();
                 });
             };
 

package/src/namespaced-html/index.js

@@ -2,6 +2,7 @@
 /**
  * @imports
  */
+import { isDocument, isShadowRoot } from '@webqit/realdom';
 import DOMNamingContext from './DOMNamingContext.js';
 import { _wq, _init, _splitOuter, _fromHash, _toHash, getInternalAttrInteraction, internalAttrInteraction } from '../util.js';
 
@@ -122,7 +123,7 @@ export function getOwnNamespaceObject(node) {
 	if (!_wq(node).has('namespace')) {
 		const namespaceObj = Object.create(null);
 		_wq(node).set('namespace', namespaceObj);
-		const isDocumentRoot = [window.Document, window.ShadowRoot].some(x => node instanceof x);
+		const isDocumentRoot = isDocument(node) || isShadowRoot(node);
 		Object.defineProperty(namespaceObj, Symbol.toStringTag, {
 			get() {
 				return isDocumentRoot ? 'RootNamespaceRegistry' : 'NamespaceRegistry';
@@ -140,7 +141,7 @@ export function getOwnNamespaceObject(node) {
  */
 export function getOwnerNamespaceObject(node, forID = false) {
 	const window = this, { webqit: { oohtml: { configs: { NAMESPACED_HTML: config } } } } = window;
-	const isDocumentRoot = [window.Document, window.ShadowRoot].some(x => node instanceof x);
+	const isDocumentRoot = isDocument(node) || isShadowRoot(node);
 	return getOwnNamespaceObject.call(window, isDocumentRoot ? node : ((forID ? node.parentNode : node)?.closest/*can be documentFragment when Shadow DOM*/?.(config.namespaceSelector) || node.getRootNode()));
 }
 

package/src/scoped-css/index.js

@@ -2,6 +2,7 @@
 /**
  * @imports
  */
+import { isElement } from '@webqit/realdom';
 import { rewriteSelector, getOwnerNamespaceObject, getNamespaceUUID } from '../namespaced-html/index.js';
 import { _init, _toHash } from '../util.js';
 
@@ -76,7 +77,7 @@ function realtime( config ) {
             const scopeSelector = style.scoped && ( supportsHAS ? `:has(> style[rand-${ sourceHash }])` : `[rand-${ sourceHash }]` );
             const supportsScope = style.scoped && window.CSSScopeRule && false/* Disabled for buggy behaviour: rewriting selectorText within an @scope block invalidates the scoping */;
             const scopeRoot = style.scoped && style.parentNode || style.getRootNode();
-            if ( scopeRoot instanceof window.Element ) {
+            if ( isElement(scopeRoot) ) {
                 scopeRoot[ config.api.styleSheets ].push( style );
                 if ( !inBrowser ) return;
                 ( supportsHAS ? style : scopeRoot ).toggleAttribute( `rand-${ sourceHash }`, true );

package/src/scoped-js/index.js

@@ -1,37 +1,40 @@
+import { isElement } from '@webqit/realdom';
 import { resolveParams } from '@webqit/use-live/params';
 import { _wq, _init, _toHash, _fromHash } from '../util.js';
 
 export default function init({ advanced = {}, ...$config }) {
-    const { config, window } = _init.call( this, 'scoped-js', $config, {
+    const { config, window } = _init.call(this, 'scoped-js', $config, {
         script: { retention: 'retain', mimeTypes: 'module|text/javascript|application/javascript', timing: 'auto' },
         api: { scripts: 'scripts' },
         advanced: resolveParams(advanced),
-    } );
-    const customTypes = Array.isArray( config.script.mimeTypes ) ? config.script.mimeTypes : config.script.mimeTypes.split( '|' ).filter( t => t );
-    config.scriptSelector =  customTypes.map( t => `script[type="${ window.CSS.escape( t ) }"]:not([oohtmlignore])` ).concat(`script:not([type])`).join( ',' );
+    });
+    const customTypes = Array.isArray(config.script.mimeTypes) ? config.script.mimeTypes : config.script.mimeTypes.split('|').filter(t => t);
+    config.scriptSelector = customTypes.map(t => `script[type="${window.CSS.escape(t)}"]:not([oohtmlignore])`).concat(`script:not([type])`).join(',');
     window.webqit.oohtml.Script = {
-        compileCache: [ new Map, new Map, ],
-        execute: execute.bind( window, config ),
+        compileCache: [new Map, new Map,],
+        execute: execute.bind(window, config),
     };
-    exposeAPIs.call( window, config );
-    realtime.call( window, config );
+    exposeAPIs.call(window, config);
+    realtime.call(window, config);
 }
 
-function exposeAPIs( config ) {
+function exposeAPIs(config) {
     const window = this, { webqit: { nextKeyword, matchPrologDirective } } = window;
     const scriptsMap = new Map;
-    if ( config.api.scripts in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.scripts }" property!` ); }
-    [ window.ShadowRoot.prototype, window.Element.prototype ].forEach( proto => {
-        Object.defineProperty( proto, config.api.scripts, { get: function() {
-            if ( !scriptsMap.has( this ) ) { scriptsMap.set( this, [] ); }
-            return scriptsMap.get( this );
-        }, } );
-    } );
-    Object.defineProperties( window.HTMLScriptElement.prototype, {
+    if (config.api.scripts in window.Element.prototype) { throw new Error(`The "Element" class already has a "${config.api.scripts}" property!`); }
+    [window.ShadowRoot.prototype, window.Element.prototype].forEach(proto => {
+        Object.defineProperty(proto, config.api.scripts, {
+            get: function () {
+                if (!scriptsMap.has(this)) { scriptsMap.set(this, []); }
+                return scriptsMap.get(this);
+            },
+        });
+    });
+    Object.defineProperties(window.HTMLScriptElement.prototype, {
         scoped: {
             configurable: true,
-            get() { return this.hasAttribute( 'scoped' ); },
-            set( value ) { this.toggleAttribute( 'scoped', value ); },
+            get() { return this.hasAttribute('scoped'); },
+            set(value) { this.toggleAttribute('scoped', value); },
         },
         live: {
             configurable: true,
@@ -41,19 +44,19 @@ function exposeAPIs( config ) {
                 return matchPrologDirective(scriptContents, true);
             },
         },
-    } );
+    });
 }
 
 // Script runner
-async function execute( config, execHash ) {
+async function execute(config, execHash) {
     const window = this, { realdom } = window.webqit;
-    const exec = _fromHash( execHash );
-    if ( !exec ) throw new Error( `Argument must be a valid exec hash.` );
+    const exec = _fromHash(execHash);
+    if (!exec) throw new Error(`Argument must be a valid exec hash.`);
     const { script, compiledScript, thisContext } = exec;
     // Honour retention flag
-    if ( config.script.retention === 'dispose' ) {
+    if (config.script.retention === 'dispose') {
         script.remove();
-    } else if ( config.script.retention === 'hidden' ) {
+    } else if (config.script.retention === 'hidden') {
         script.textContent = `"source hidden"`;
     } else {
         setTimeout(async () => {
@@ -62,73 +65,73 @@ async function execute( config, execHash ) {
     }
     // Execute and save state
     const varScope = script.scoped ? thisContext : script.getRootNode();
-    if ( !_wq( varScope ).has( 'scriptEnv' ) ) {
-        _wq( varScope ).set( 'scriptEnv', Object.create( null ) );
+    if (!_wq(varScope).has('scriptEnv')) {
+        _wq(varScope).set('scriptEnv', Object.create(null));
     }
-    const liveProgramHandle = await ( await compiledScript.bind( thisContext, _wq( varScope ).get( 'scriptEnv' ) ) ).execute();
-    if ( script.live ) { Object.defineProperty( script, 'liveProgramHandle', { value: liveProgramHandle } ); }
-    realdom.realtime( window.document ).observe( script, () => {
-        if ( script.live ) { liveProgramHandle.abort(); }
-        if ( thisContext instanceof window.Element ) { thisContext[ config.api.scripts ]?.splice( thisContext[ config.api.scripts ].indexOf( script, 1 ) ); }
-    }, { id: 'scoped-js:script-exits', subtree: 'cross-roots', timing: 'sync', generation: 'exits' } );
+    const liveProgramHandle = await (await compiledScript.bind(thisContext, _wq(varScope).get('scriptEnv'))).execute();
+    if (script.live) { Object.defineProperty(script, 'liveProgramHandle', { value: liveProgramHandle }); }
+    realdom.realtime(window.document).observe(script, () => {
+        if (script.live) { liveProgramHandle.abort(); }
+        if (isElement(thisContext)) { thisContext[config.api.scripts]?.splice(thisContext[config.api.scripts].indexOf(script, 1)); }
+    }, { id: 'scoped-js:script-exits', subtree: 'cross-roots', timing: 'sync', generation: 'exits' });
 }
 
-function realtime( config ) {
-    const inBrowser = Object.getOwnPropertyDescriptor( globalThis, 'window' )?.get?.toString().includes( '[native code]' ) ?? false;
+function realtime(config) {
+    const inBrowser = Object.getOwnPropertyDescriptor(globalThis, 'window')?.get?.toString().includes('[native code]') ?? false;
     const window = this, { webqit: { oohtml, realdom } } = window;
-    if ( !window.HTMLScriptElement.supports ) { window.HTMLScriptElement.supports = type => [ 'text/javascript', 'application/javascript' ].includes( type ); }
+    if (!window.HTMLScriptElement.supports) { window.HTMLScriptElement.supports = type => ['text/javascript', 'application/javascript'].includes(type); }
     const handled = new WeakSet;
-    realdom.realtime( window.document ).query( config.scriptSelector, record => {
-        record.entrants.forEach( script => {
-            if ( handled.has( script ) || script.hasAttribute('oohtmlno') || (!inBrowser && !script.hasAttribute('ssr')) ) return;
+    realdom.realtime(window.document).query(config.scriptSelector, record => {
+        record.entrants.forEach(script => {
+            if (handled.has(script) || script.hasAttribute('oohtmlno') || (!inBrowser && !script.hasAttribute('ssr'))) return;
             // Do compilation
-            const compiledScript = compileScript.call( window, config, script );
-            if ( !compiledScript ) return;
-            handled.add( script );
+            const compiledScript = compileScript.call(window, config, script);
+            if (!compiledScript) return;
+            handled.add(script);
             // Run now!!!
-            const thisContext = script.scoped ? script.parentNode || record.target : ( script.type === 'module' ? undefined : window );
-            if ( script.scoped ) { thisContext[ config.api.scripts ].push( script ); }
-            const execHash = _toHash( { script, compiledScript, thisContext } );
-            const manualHandling = record.type === 'query' || ( script.type && !window.HTMLScriptElement.supports( script.type ) ) || script.getAttribute('data-handling') === 'manual';
-            if ( manualHandling || config.script.timing === 'manual' ) { oohtml.Script.execute( execHash ); } else {
-                script.textContent = `webqit.oohtml.Script.execute( '${ execHash }' );`;
+            const thisContext = script.scoped ? script.parentNode || record.target : (script.type === 'module' ? undefined : window);
+            if (script.scoped) { thisContext[config.api.scripts].push(script); }
+            const execHash = _toHash({ script, compiledScript, thisContext });
+            const manualHandling = record.type === 'query' || (script.type && !window.HTMLScriptElement.supports(script.type)) || script.getAttribute('data-handling') === 'manual';
+            if (manualHandling || config.script.timing === 'manual') { oohtml.Script.execute(execHash); } else {
+                script.textContent = `webqit.oohtml.Script.execute( '${execHash}' );`;
             }
-        } );
-    }, { id: 'scoped-js:script-entries', live: true, subtree: 'cross-roots', timing: 'intercept', generation: 'entrants', eventDetails: true } );
+        });
+    }, { id: 'scoped-js:script-entries', live: true, subtree: 'cross-roots', timing: 'intercept', generation: 'entrants', eventDetails: true });
     // ---
 }
 
-function compileScript( config, script ) {
+function compileScript(config, script) {
     const window = this, { webqit: { oohtml, LiveScript, AsyncLiveScript, LiveModule } } = window;
-    
+
     let textContent = script.textContent.trim();
-    if ( textContent.startsWith( '/*@oohtml*/if(false){' ) && textContent.endsWith( '}/*@oohtml*/' ) ) {
-        textContent = textContent.slice( 21, -12 );
-        Object.defineProperty( script, 'oohtml__textContent', { value: textContent } );
+    if (textContent.startsWith('/*@oohtml*/if(false){') && textContent.endsWith('}/*@oohtml*/')) {
+        textContent = textContent.slice(21, -12);
+        Object.defineProperty(script, 'oohtml__textContent', { value: textContent });
     }
-    if ( !textContent.trim().length ) return;
+    if (!textContent.trim().length) return;
 
-    const sourceHash = _toHash( textContent );
-    const compileCache = oohtml.Script.compileCache[ script.live ? 0 : 1 ];
+    const sourceHash = _toHash(textContent);
+    const compileCache = oohtml.Script.compileCache[script.live ? 0 : 1];
     let compiledScript;
-    if ( !( compiledScript = compileCache.get( sourceHash ) ) ) {
+    if (!(compiledScript = compileCache.get(sourceHash))) {
         const { parserParams, compilerParams, runtimeParams } = config.advanced;
-        compiledScript = new ( script.type === 'module' ? LiveModule : ( LiveScript || AsyncLiveScript ) )( textContent, {
+        compiledScript = new (script.type === 'module' ? LiveModule : (LiveScript || AsyncLiveScript))(textContent, {
             liveMode: script.live,
-            exportNamespace: `#${ script.id }`,
-            fileName: `${ window.document.url?.split( '#' )?.[ 0 ] || '' }#${ script.id }`,
+            exportNamespace: `#${script.id}`,
+            fileName: `${window.document.url?.split('#')?.[0] || ''}#${script.id}`,
             parserParams,
             compilerParams,
             runtimeParams,
-        } );
-        compileCache.set( sourceHash, compiledScript );
+        });
+        compileCache.set(sourceHash, compiledScript);
     }
     return compiledScript;
 }
 
-export function idleCompiler( node ) {
+export function idleCompiler(node) {
     const window = this, { webqit: { oohtml: { configs: { SCOPED_JS: config } } } } = window;
-    [ ...( node?.querySelectorAll( config.scriptSelector ) || [] ) ].forEach( script => {
-        compileScript.call( window, config, script );
-    } );
+    [...(node?.querySelectorAll(config.scriptSelector) || [])].forEach(script => {
+        compileScript.call(window, config, script);
+    });
 }

package/test/bindings-api.test.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import { expect } from 'chai';
-import { createDocument } from './index.js';
+import { createDocument, delay } from './index.js';
 
 describe(`Bindings API`, function() {
 
@@ -19,7 +19,9 @@ describe(`Bindings API`, function() {
         } );
 
         it ( `Bindings objects should be observable...`, async function() {
+            await delay( 200 );
             const { webqit: { Observer } } = window;
+            
             let idReceived = null;
             Observer.observe( document.bindings, records => {
                 idReceived = records[ 0 ].key;

package/test/imports.test.js

@@ -31,6 +31,8 @@ describe(`HTML Imports`, function() {
             const templateEl = document.querySelector( 'template' );
             let added = document.createElement( 'div' );
             templateEl.content.appendChild( added );
+
+            await delay( 0 );
             console.log('\n\n\n\n', document.body.outerHTML);
             expect( document.body.children ).to.have.length( 3 );
         } );
@@ -203,11 +205,17 @@ describe(`HTML Imports`, function() {
 
             const routingElement = document.body.firstElementChild;
             expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
+            
             routingElement.setAttribute( 'importscontext', 'temp0/temp1/temp2' );
+            await delay( 0 );
             expect( routingElement.firstElementChild.nodeName ).to.eq( 'SELECT' );
+            
             routingElement.removeChild( routingElement.firstElementChild );
+            await delay( 0 );
             expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+            
             routingElement.setAttribute( 'importscontext', 'temp0' );
+            await delay( 0 );
             expect( routingElement.firstElementChild.nodeName ).to.eq( 'INPUT' );
         } );