@webqit/oohtml 2.1.52 → 2.1.53

package/src/html-bracelets/HTMLBracelets.js

@@ -0,0 +1,67 @@
+
+/**
+ * @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( 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 } );
+                HTMLContext.instance( this[ '#' ].host ).request( request, value => {
+                    bindings[ $ref ].value = value;
+                    bindings[ $ref ].subs.forEach( bracelet => bracelet.render( bindings ) );
+                } );
+            }
+            bindings[ $ref ].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( ref => {
+            bindings[ ref ].subs.delete( bracelet );
+            if ( !bindings[ ref ].subs.size ) {
+                bindings[ ref ].controller.abort();
+                delete bindings[ ref ];
+            }
+        } );
+        return returnValue;
+    }
+
+    clear() {
+        for ( const bracelet of this ) { this.delete( bracelet ); }
+    }
+}

package/src/html-bracelets/TextBracelet.js

@@ -0,0 +1,69 @@
+
+/**
+ * @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 ${ 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

@@ -0,0 +1,71 @@
+
+/**
+ * @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 ).observe( `(${ 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 } );
+    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.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-bracelets/targets.browser.js

@@ -0,0 +1,10 @@
+
+/**
+ * @imports
+ */
+import init from './index.js';
+
+/**
+ * @init
+ */
+init.call( window );

package/src/html-imports/_HTMLExportsManager.js

@@ -165,9 +165,9 @@ export default class _HTMLExportsManager {
         const handleInherited = records => {
             records.forEach( record => {
                 if ( Observer.get( this.modules, record.key ) !== record.oldValue ) return;
-                if ( [ 'get'/*initial get*/, 'set', 'defineProperty' ].includes( record.type ) ) {
+                if ( [ 'get'/*initial get*/, 'set', 'def' ].includes( record.type ) ) {
                     Observer[ record.type.replace( 'get', 'set' ) ]( this.modules, record.key, record.value );
-                } else if ( record.type === 'deleteProperty' ) {
+                } else if ( record.type === 'delete' ) {
                     Observer.deleteProperty( this.modules, record.key );
                 }
             } );

package/src/html-imports/_HTMLImportsProvider.js

@@ -9,19 +9,13 @@ import { _ } from '../util.js';
 
 export default class _HTMLImportsProvider extends HTMLContextProvider {
 
-    /**
-     * @createId
-     */
-    static createId( host, fields = {} ) {
-        if ( !( 'type' in fields ) ) fields = { type: 'htmlimports', ...fields };
-        return super.createId( host, fields );
-    }
+    static type = 'html-imports';
 
     /**
      * @createRequest
      */
     static createRequest( fields = {} ) {
-        const request = { type: 'htmlimports', ...fields };
+        const request = super.createRequest( fields );
         if ( !request.contextName && request.detail?.startsWith( '/' ) ) { request.contextName = 'root'; }
         else if ( request.detail?.startsWith( '@' ) ) {
             const [ contextName, ...detail ] = request.detail.slice( 1 ).split( /(?<=\w)(?=\/|#)/ ).map( s => s.trim() );
@@ -65,7 +59,7 @@ export default class _HTMLImportsProvider extends HTMLContextProvider {
             return Observer.reduce( this.contextModules, path, Observer.get, result => {
                 return event.respondWith( Array.isArray( result ) ? result : result.value );
             }, { signal, ...options } );
-        }, options );
+        }, { lifecycleSignals: true, ...options } );
     }
 
     /**

package/src/html-imports/index.js

@@ -32,7 +32,7 @@ export default function init( $config = {} ) {
         static get config() { return config; }
     };
     window.webqit.Observer = Observer;
-    exposeModulesObjects.call( window, config );
+    exposeAPIs.call( window, config );
     realdom.ready( () => hydration.call( window, config ) );
     realtime.call( window, config );
 }
@@ -62,7 +62,7 @@ export function getModulesObject( node, autoCreate = true ) {
  *
  * @return Void
  */
-function exposeModulesObjects( config ) {
+function exposeAPIs( config ) {
     const window = this;
     // Assertions
     if ( config.template.api.modules in window.HTMLTemplateElement.prototype ) { throw new Error( `The "HTMLTemplateElement" class already has a "${ config.template.api.modules }" property!` ); }
@@ -76,14 +76,14 @@ function exposeModulesObjects( 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, options = {} ) {
-        return importRequest( window.document, ref, callback, options );
+    Object.defineProperty( window.document, config.context.api.import, { value: function( ref, callback = null ) {
+        return importRequest( window.document, ...arguments );
     } } );
-    Object.defineProperty( window.HTMLElement.prototype, config.context.api.import, { value: function( ref, callback, options = {} ) {
-        return importRequest( this, ref, callback, options );
+    Object.defineProperty( window.HTMLElement.prototype, config.context.api.import, { value: function( ref, callback = null ) {
+        return importRequest( this, ...arguments );
     } } );
-    function importRequest( context, ref, callback, options ) {
-        const request = _HTMLImportsProvider.createRequest( { detail: ref, ...options } );
+    function importRequest( context, ref, callback = null ) {
+        const request = _HTMLImportsProvider.createRequest( { detail: ref } );
         return HTMLContext.instance( context ).request( request, callback );
     }
 }

package/src/{namespace-api → html-namespaces}/index.js

@@ -5,13 +5,15 @@
 import Observer from '@webqit/observer';
 import { _, _init } from '../util.js';
 
+export { Observer }
+
 /**
  * @init
  * 
  * @param Object $config
  */
 export default function init( $config = {} ) {
-    const { config, window } = _init.call( this, 'namespace-api', $config, {
+    const { config, window } = _init.call( this, 'html-namespaces', $config, {
 		id: { attr: 'id' },
 		namespace: { attr: 'namespace',  api: 'namespace', },
 		target: { attr: ':target', event: ':target', scrolling: true },
@@ -21,33 +23,10 @@ export default function init( $config = {} ) {
 	config.idSelector = `[${ window.CSS.escape( config.id.attr ) }]`;
 	config.namespaceSelector = `[${ window.CSS.escape( config.namespace.attr ) }]`;
     window.webqit.Observer = Observer;
-    exposeNamespaceObjects.call( window, config );
+    exposeAPIs.call( window, config );
     realtime.call( window, config );
 }
 
-export { Observer }
-
-/**
- * Exposes Namespaced HTML with native APIs.
- *
- * @param Object config
- *
- * @return Void
- */
-function exposeNamespaceObjects( config ) {
-	const window = this;
-    // Assertions
-    if ( config.namespace.api in window.document ) { throw new Error( `document already has a "${ config.namespace.api }" property!` ); }
-    if ( config.namespace.api in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.namespace.api }" property!` ); }
-    // Definitions
-    Object.defineProperty( window.document, config.namespace.api, { get: function() {
-        return Observer.proxy( getNamespaceObject.call( window, window.document, config ) );
-    } });
-    Object.defineProperty( window.Element.prototype, config.namespace.api, { get: function() {
-        return Observer.proxy( getNamespaceObject.call( window, this, config ) );
-    } } );
-}
-
 /**
  * Returns the "namespace" object associated with the given node.
  *
@@ -78,6 +57,27 @@ function getNamespaceObject( node, config ) {
 	return _( node ).get( 'namespace' );
 }
 
+/**
+ * Exposes Namespaced HTML with native APIs.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function exposeAPIs( config ) {
+	const window = this;
+    // Assertions
+    if ( config.namespace.api in window.document ) { throw new Error( `document already has a "${ config.namespace.api }" property!` ); }
+    if ( config.namespace.api in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.namespace.api }" property!` ); }
+    // Definitions
+    Object.defineProperty( window.document, config.namespace.api, { get: function() {
+        return Observer.proxy( getNamespaceObject.call( window, window.document, config ) );
+    } });
+    Object.defineProperty( window.Element.prototype, config.namespace.api, { get: function() {
+        return Observer.proxy( getNamespaceObject.call( window, this, config ) );
+    } } );
+}
+
 /**
  * Performs realtime capture of elements and builds their relationships.
  *

package/src/index.js

@@ -3,12 +3,18 @@
  * @imports
  */
 import Observer from '@webqit/observer';
-import BindingsAPI from './bindings-api/index.js';
 import ContextAPI from './context-api/index.js';
+import BindingsAPI from './bindings-api/index.js';
+import HTMLBracelets from './html-bracelets/index.js';
+import HTMLNamespaces from './html-namespaces/index.js';
+import HTMLImports from './html-imports/index.js';
 import ScopedCSS from './scoped-css/index.js';
 import ScopedJS from './scoped-js/index.js';
-import NamespaceAPI from './namespace-api/index.js';
-import HTMLImports from './html-imports/index.js';
+
+/**
+ * @exports
+ */
+export { Observer }
 
 /**
  * @init
@@ -16,16 +22,12 @@ import HTMLImports from './html-imports/index.js';
 export default function init( configs = {} ) {
     if ( !this.webqit ) { this.webqit = {}; }
     // --------------
-    BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) );
     ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
-    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
-    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) );
-    NamespaceAPI.call( this, ( configs.NAMESPACE_API || {} ) );
+    BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) );
+    HTMLBracelets.call( this, ( configs.HTML_BRACELETS || {} ) );
+    HTMLNamespaces.call( this, ( configs.HTML_NAMESPACES || {} ) );
     HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) );
+    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) );
+    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
     // --------------
 }
-
-/**
- * @exports
- */
-export { Observer }

package/src/scoped-js/Hash.js

@@ -0,0 +1,26 @@
+
+export default class Hash {
+
+    // Unique ID generator
+    static hashTable = new Map;
+    static uniqId = () => (0|Math.random()*9e6).toString(36);
+
+    // Hash of anything generator
+    static toHash( val ) {
+        let hash;
+        if ( !( hash = this.hashTable.get( val ) ) ) {
+            hash = this.uniqId();
+            this.hashTable.set( val, hash );
+        }
+        return hash;
+    }
+
+    // Value of any hash
+    static fromHash( hash ) {
+        let val;
+        this.hashTable.forEach( ( _hash, _val ) => {
+            if ( _hash === hash ) val = _val;
+        } );
+        return val;
+    }
+}

package/src/scoped-js/index.js

@@ -2,13 +2,20 @@
 /**
  * @imports
  */
-import { _isTypeObject } from '@webqit/util/js/index.js';
-import { resolveParams } from '@webqit/reflex-functions/src/params.js';
-import ReflexFunction from '@webqit/reflex-functions/src/ReflexFunctionLite.js';
+import { resolveParams } from '@webqit/stateful-js/src/params.js';
+import { StatefulAsyncFunction, StatefulAsyncScript, StatefulModule, State } from '@webqit/stateful-js/src/index.async.js';
 import Observer from '@webqit/observer';
-import Compiler from './Compiler.js';
+import Hash from './Hash.js';
 import { _init } from '../util.js';
 
+export {
+    StatefulAsyncFunction,
+    StatefulAsyncScript,
+    StatefulModule,
+    State,
+    Observer,
+}
+
 /**
  * @init
  * 
@@ -17,68 +24,47 @@ import { _init } from '../util.js';
 export default function init( { advanced = {}, ...$config } ) {
     const { config, window } = _init.call( this, 'scoped-js', $config, {
         script: { retention: 'retain', mimeType: '' },
-        advanced: resolveParams( advanced, {
-            parserParams: { allowReturnOutsideFunction: false, allowSuperOutsideMethod: false },
-            compilerParams: { globalsNoObserve: [ 'alert' ] },
-            runtimeParams: { apiVersion: 2 },
-        } ),
+        advanced: resolveParams( advanced ),
     } );
 	config.scriptSelector = ( Array.isArray( config.script.mimeType ) ? config.script.mimeType : [ config.script.mimeType ] ).reduce( ( selector, mm ) => {
         const qualifier = mm ? `[type=${ window.CSS.escape( mm ) }]` : '';
-        return selector.concat( `script${ qualifier }[scoped],script${ qualifier }[reflex]` );
+        return selector.concat( `script${ qualifier }[scoped],script${ qualifier }[stateful]` );
     }, [] ).join( ',' );
-    window.webqit.oohtml.Script = { compileCache: [ new Map, new Map, ] };
-    window.webqit.ReflexFunction = ReflexFunction;
-    window.webqit.Observer = Observer;
+    Object.assign( window.webqit, { StatefulAsyncFunction, StatefulAsyncScript, StatefulModule, State, Observer } );
+    window.webqit.oohtml.Script = {
+        compileCache: [ new Map, new Map, ],
+        execute: execute.bind( window, config ),
+    };
     realtime.call( window, config );
 }
 
-export {
-    ReflexFunction,
-    Observer,
-}
-
-// ------------------
 // Script runner
-export function execute( compiledScript, thisContext, script ) {
-    if ( !compiledScript.function ) throw new Error( `Input script must already be compiled!` );
-    const _try = ( callback, isRerender = false ) => {
-        return callback();
-    };
-    // Execute...
-    const returnValue = compiledScript.function.call( thisContext );
-    if ( script.reflex ) {
-        // Rerending processes,,,
-        Object.defineProperty( script, 'reflect', { value: ( ...args ) => _await( returnValue, ( [ , reflect ] ) => reflect( ...args ) ) } );
-        _await( script.properties, properties => {
-            const _env = { 'this': thisContext };
-            const getPaths = ( base, record_s ) => ( Array.isArray( record_s ) ? record_s : [ record_s ] ).map( record => [ ...base, ...( record.path || [ record.key ] ) ] );
-            properties.processes = properties.dependencies.map( path => {
-                if ( _isTypeObject( _env[ path[ 0 ] ] ) ) {
-                    if ( path.length === 1 ) return;
-                    return Observer.reduce( _env[ path[ 0 ] ], path.slice( 1 ), Observer.observe, record_s => {
-                        script.reflect( ...getPaths( [ path[ 0 ] ], record_s ) );
-                    } );
-                }
-                return Observer.reduce( globalThis, path, Observer.observe, record_s => {
-                    script.reflect( ...getPaths( [], record_s ) );
-                } );
-            } );
-        } );
-    }
+async function execute( config, execHash ) {
     const window = this, { realdom } = window.webqit;
+    const exec = Hash.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' ) {
+        script.remove();
+    } else if ( config.script.retention === 'dispose' ) {
+        script.textContent = `"source hidden"`;
+    } else {
+        script.textContent = await compiledScript.toString();
+    }
+    // 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, () => {
-        if ( script.reflex ) {
-            // Rerending processes,,,
-            _await( script.properties, properties => {
-                properties.processes.forEach( process => process?.abort() );
-            } );
-        }
         thisContext.dispatchEvent( new window.CustomEvent( 'remove' ) );
-        thisContext.scripts.delete( script );
+        state.dispose();
+        thisContext.scripts.splice( thisContext.scripts.indexOf( state, 1 ) );
     }, { subtree: true, timing: 'sync', generation: 'exits' } );
-    return script;
 }
 
 /**
@@ -89,25 +75,39 @@ export function execute( compiledScript, thisContext, script ) {
  * @return Void
  */
 function realtime( config ) {
-	const window = this, { realdom } = window.webqit;
+	const window = this, { oohtml, realdom } = window.webqit;
     if ( !window.HTMLScriptElement.supports ) { window.HTMLScriptElement.supports = () => false; }
     const potentialManualTypes = [ 'module' ].concat( config.script.mimeType || [] );
-    const compiler = new Compiler( window, config, execute ), handled = () => {};
 	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.scriptSelector, record => {
         record.entrants.forEach( script => {
             if ( script.cloned ) return;
-            if ( 'reflex' in script ) return handled( script );
-            Object.defineProperty( script, 'reflex', { value: script.hasAttribute( 'reflex' ) } ); 
+            if ( 'stateful' in script ) return handled( script );
+            Object.defineProperty( script, 'stateful', { value: script.hasAttribute( 'stateful' ) } ); 
             if ( 'scoped' in script ) return handled( script );
             Object.defineProperty( script, 'scoped', { value: script.hasAttribute( 'scoped' ) } ); 
-            if ( /*record.type === 'query' ||*/ ( potentialManualTypes.includes( script.type ) && !window.HTMLScriptElement.supports( script.type ) ) ) {
-                Object.defineProperty( script, 'handling', { value: 'manual' } ); 
+            // Do compilation
+            const textContent = ( script._ = script.textContent.trim() ) && script._.startsWith( '/*@oohtml*/if(false){' ) && script._.endsWith( '}/*@oohtml*/' ) ? script._.slice( 21, -12 ) : script.textContent;
+            const sourceHash = Hash.toHash( textContent );
+            const compileCache = oohtml.Script.compileCache[ script.stateful ? 0 : 1 ];
+            let compiledScript;
+            if ( !( compiledScript = compileCache.get( sourceHash ) ) ) {
+                const { parserParams, compilerParams, runtimeParams } = config.advanced;
+                compiledScript = new ( script.type === 'module' ? StatefulModule : StatefulAsyncScript )( textContent, {
+                    packageName: script.id,
+                    parserParams,
+                    compilerParams: { ...compilerParams, startStatic: !script.stateful },
+                    runtimeParams,
+                } );
+                compileCache.set( sourceHash, compiledScript );
             }
+            // Run now!!!
             const thisContext = script.scoped ? script.parentNode || record.target : ( script.type === 'module' ? undefined : window );
-            compiler.compile( script, thisContext );
+            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 {
+                script.textContent = `webqit.oohtml.Script.execute( '${ execHash }' );`;
+            }
         } );
 	}, { live: true, timing: 'intercept', generation: 'entrants', eventDetails: true } );
     // ---
-}
-
-const _await = ( value, callback ) => value instanceof Promise ? value.then( callback ) : callback( value );
+}

package/test/index.js

@@ -21,7 +21,7 @@ export function createDocument( head = '', body = '', callback = null, ) {
     <!DOCTYPE html>
     <html>
         <head>
-        <meta name="reflex-compiler-url" content="../reflex-functions/dist/compiler.js">
+        <meta name="stateful-compiler-url" content="../stateful-js/dist/compiler.js">
         <script ssr src="/dist/main.js"></script>
         ${ head }
         </head>

package/test/modules.test.js

@@ -166,7 +166,7 @@ describe(`HTML Modules`, function() {
             };
             // -------
             const contextRequest = ( el, params, callback ) => {
-                const request = { type: 'htmlimports', live: true, ...params };
+                const request = { type: 'html-imports', live: true, ...params };
                 const event = new document.context.ContextRequestEvent( request, callback, {
                     bubbles: true,
                 } );

package/test/scoped-js.test.js

@@ -12,7 +12,7 @@ describe(`Test: Scoped JS`, function() {
         it(`Should do basic observe`, async function() {
             const head = '', body = `            
             <h1>Hello World!</h1>
-            <script scoped reflex>
+            <script scoped stateful>
                 testRecords.push( this );
                 console.log('-------scoped JS here.');
             </script>`;