@webqit/oohtml 3.1.6 → 3.1.8

package/src/data-binding/index.js

@@ -50,9 +50,15 @@ function realtime( config ) {
 }
 
 function createDynamicScope( config, root ) {
-    const { webqit: { Observer, DOMBindingsContext } } = this;
+    const { webqit: { realdom, Observer, DOMBindingsContext } } = this;
     if ( _( root ).has( 'data-binding' ) ) return _( root ).get( 'data-binding' );
-    const scope = {}, abortController = new AbortController;
+    const scope = Object.create( null ), abortController = new AbortController;
+    scope[ '$exec__' ] = ( target, prop, ...args ) => {
+        realdom.schedule( 'write', () => target[ prop ]( ...args ) );
+    };
+    scope[ '$assign__' ] = ( target, prop, val ) => {
+        realdom.schedule( 'write', () => (target[ prop ] = val) );
+    };
     Observer.intercept( scope, {
         get: ( e, recieved, next ) => {
             if ( !( e.key in scope ) ) {
@@ -76,7 +82,7 @@ function cleanup( ...entries ) {
         const { bindings, abortController } = _( root ).get( 'data-binding' ) || {};
         if ( !bindings?.has( node ) ) return;
         bindings.get( node ).state.dispose();
-        bindings.get( node ).signals.forEach( s => s.abort() );
+        bindings.get( node ).signals?.forEach( s => s.abort() );
         bindings.delete( node );
         if ( !bindings.size ) {
             abortController.abort();
@@ -119,51 +125,57 @@ async function mountDiscreteBindings( config, ...entries ) {
     }, [] );
 
     for ( const { textNode, template, anchorNode } of instances ) {
-        const { scope: env, bindings } = createDynamicScope.call( this, config, textNode.parentNode );
-        let source = '';
-        source += `let content = ((${ template.expr }) ?? '') + '';`;
-        source += `this.nodeValue = content;`;
-        if ( anchorNode ) { source += `$anchorNode__.nodeValue = "${ config.tokens.tagStart }${ escDouble( template.expr ) }${ config.tokens.stateStart }" + content.length + "${ config.tokens.stateEnd } ${ config.tokens.tagEnd }";`; }
-        const compiled = new QuantumAsyncFunction( '$signals__', `$anchorNode__`, source, { env } );
-        const signals = [];
-        bindings.set( textNode, { compiled, signals, state: await compiled.call( textNode, signals, anchorNode ), } );
+        const compiled = compileDiscreteBindings( config, template.expr );
+        const { scope, bindings } = createDynamicScope.call( this, config, textNode.parentNode );
+        Object.defineProperty( textNode, '$oohtml_internal_databinding_anchorNode', { value: anchorNode, configurable: true } );
+        bindings.set( textNode, { state: await ( await compiled.bind( textNode, scope ) ).execute(), } );
     }
 }
 
+const discreteParseCache = new Map;
+function compileDiscreteBindings( config, str ) {
+    if ( discreteParseCache.has( str ) ) return discreteParseCache.get( str );
+    let source = `let content = ((${ str }) ?? '') + '';`;
+    source += `$assign__(this, 'nodeValue', content);`;
+    source += `if ( this.$oohtml_internal_databinding_anchorNode ) { $assign__(this.$oohtml_internal_databinding_anchorNode, 'nodeValue', "${ config.tokens.tagStart }${ escDouble( str ) }${ config.tokens.stateStart }" + content.length + "${ config.tokens.stateEnd } ${ config.tokens.tagEnd }"); }`;
+    const { webqit: { QuantumModule } } = this;
+    const compiled = new QuantumModule( source );
+    discreteParseCache.set( str, compiled );
+    return compiled;
+}
+
 async function mountInlineBindings( config, ...entries ) {
-    const { webqit: { QuantumAsyncFunction } } = this;
     for ( const node of entries ) {
-        const source = parseInlineBindings( config, node.getAttribute( config.attr.expr ) );
-        const { scope: env, bindings } = createDynamicScope.call( this, config, node );
-        const compiled = new QuantumAsyncFunction( '$signals__', source, { env } );
+        const compiled = compileInlineBindings( config, node.getAttribute( config.attr.expr ) );
+        const { scope, bindings } = createDynamicScope.call( this, config, node );
         const signals = [];
-        bindings.set( node, { compiled, signals, state: await compiled.call( node, signals ), } );
+        Object.defineProperty( node, '$oohtml_internal_databinding_signals', { value: signals, configurable: true } );
+        bindings.set( node, { signals, state: await ( await compiled.bind( node, scope ) ).execute(), } );
     }
 }
 
-const parseCache = new Map;
-function parseInlineBindings( config, str ) {
-    if ( parseCache.has( str ) ) return parseCache.get( str );
+const inlineParseCache = new Map;
+function compileInlineBindings( config, str ) {
+    if ( inlineParseCache.has( str ) ) return inlineParseCache.get( str );
     const validation = {};
-    const escDouble = str => str.replace(/"/g, '\\"');
     const source = splitOuter( str, ';' ).map( str => {
         const [ left, right ] = splitOuter( str, ':' ).map( x => x.trim() );
         const directive = left[ 0 ], param = left.slice( 1 ).trim();
         const arg = `(${ right })`, $arg = `(${ arg } ?? '')`;
         if ( directive === '&' ) {
-            if ( param.startsWith( '--' ) ) return `this.style.setProperty("${ escDouble( param ) }", ${ $arg });`;
-            return `this.style["${ escDouble( param ) }"] = ${ $arg };`;
+            if ( param.startsWith( '--' ) ) return `$exec__(this.style, 'setProperty', "${ escDouble( param ) }", ${ $arg });`;
+            return `$assign__(this.style, "${ escDouble( param ) }", ${ $arg });`;
         }
-        if ( directive === '%' ) return `this.classList.toggle("${ escDouble( param ) }", !!${ arg });`;
+        if ( directive === '%' ) return `$exec__(this.classList, 'toggle', "${ escDouble( param ) }", !!${ arg });`;
         if ( directive === '~' ) {
-            if ( param.startsWith( '?' ) ) return `this.toggleAttribute("${ escDouble( param.substring( 1 ).trim() ) }", !!${ arg });`;
-            return `this.setAttribute("${ escDouble( param ) }", ${ $arg });`;
+            if ( param.startsWith( '?' ) ) return `$exec__(this, 'toggleAttribute', "${ escDouble( param.substring( 1 ).trim() ) }", !!${ arg });`;
+            return `$exec__(this, 'setAttribute', "${ escDouble( param ) }", ${ $arg });`;
         }
         if ( directive === '@' ) {
             if ( validation[ param ] ) throw new Error( `Duplicate binding: ${ left }.` );
             validation[ param ] = true;
-            if ( param === 'text' ) return `this.textContent = ${ $arg };`;
-            if ( param === 'html' ) return `this.setHTML(${ $arg });`;
+            if ( param === 'text' ) return `$assign__(this, 'textContent', ${ $arg });`;
+            if ( param === 'html' ) return `$exec__(this, 'setHTML', ${ $arg });`;
             if ( param === 'items' ) {
                 const [ iterationSpec, importSpec ] = splitOuter( right, '/' );
                 if ( !importSpec ) throw new Error( `Invalid ${ directive }items spec: ${ str }; no import specifier.` );
@@ -177,7 +189,7 @@ function parseInlineBindings( config, str ) {
                 return `
                 let $iteratee__ = ${ iteratee };
                 let $import__ = this.${ config.HTML_IMPORTS.context.api.import }( ${ importSpec.trim() }, true );
-                $signals__.push( $import__ );
+                this.$oohtml_internal_databinding_signals?.push( $import__ );
 
                 if ( $import__.value && $iteratee__ ) {
                     let $existing__ = new Map;
@@ -194,13 +206,14 @@ function parseInlineBindings( config, str ) {
                         let $itemNode__ = $existing__.get( $key___ );
                         if ( $itemNode__ ) {
                             $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__.setAttribute( "${ config.attr.itemIndex }", $key___ );
-                            this.appendChild( $itemNode__ );
+                            $exec__($itemNode__, '${ config.BINDINGS_API.api.bind }', $itemBinding__ );
+                            $exec__(this, 'appendChild', $itemNode__ );
                         }
 
-                        $itemNode__.${ config.BINDINGS_API.api.bind }( $itemBinding__ );
                         if ( ${ kind === 'in' ? `!( ${ production[ 0 ] } in $iteratee__ )` : `typeof ${ production[ 0 ] } === 'undefined'` } ) { $itemNode__.remove(); }
                     }
                     $existing__.forEach( x => x.remove() );
@@ -210,8 +223,10 @@ function parseInlineBindings( config, str ) {
         }
         if ( str.trim() ) throw new Error( `Invalid binding: ${ str }.` );
     } ).join( `\n` );
-    parseCache.set( str, source );
-    return source;
+    const { webqit: { QuantumModule } } = this;
+    const compiled = new QuantumModule( source );
+    inlineParseCache.set( str, compiled );
+    return compiled;
 }
 
 export function splitOuter( str, delim ) {
@@ -227,4 +242,6 @@ export function splitOuter( str, delim ) {
         splits[ 0 ] += x;
         return [ quote, depth, splits ]
     }, [ null, 0, [ '' ] ] )[ 2 ].reverse();
-}
+}
+
+const escDouble = str => str.replace(/"/g, '\\"');

package/src/scoped-js/index.js

@@ -77,7 +77,7 @@ function realtime( config ) {
                 const { parserParams, compilerParams, runtimeParams } = config.advanced;
                 compiledScript = new ( script.type === 'module' ? QuantumModule : ( QuantumScript || QuantumAsyncScript ) )( textContent, {
                     exportNamespace: `#${ script.id }`,
-                    fileName: window.document.url,
+                    fileName:`${ window.document.url?.split( '#' )?.[ 0 ] || '' }#${ script.id }`,
                     parserParams,
                     compilerParams: { ...compilerParams, startStatic: !script.quantum },
                     runtimeParams,