@webqit/oohtml 2.1.81 → 3.0.0

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.81",
+  "version": "3.0.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -36,12 +36,13 @@
   },
   "dependencies": {
     "@webqit/observer": "^2.2.9",
+    "@webqit/quantum-js": "^4.0.0",
     "@webqit/realdom": "^2.1.19",
     "@webqit/stateful-js": "^3.0.27",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {
-    "@webqit/oohtml-ssr": "^1.2.19",
+    "@webqit/oohtml-ssr": "^2.0.0",
     "chai": "^4.3.4",
     "coveralls": "^3.1.1",
     "esbuild": "^0.14.43",

package/src/data-binding/index.js

@@ -4,7 +4,7 @@
  */
 import Observer from '@webqit/observer';
 import _HTMLBindingsProvider from '../bindings-api/_HTMLBindingsProvider.js';
-import { StatefulAsyncFunction } from '@webqit/stateful-js/async';
+import { QuantumAsyncFunction } from '@webqit/quantum-js/async';
 import { _, _init } from '../util.js';
 
 /**
@@ -132,7 +132,7 @@ async function mountDiscreteBindings( config, ...entries ) {
         source += `let content = ((${ template.expr }) ?? '') + '';`;
         source += `$set__(this, 'nodeValue', content);`;
         if ( anchorNode ) { source += `$set__($anchorNode__, 'nodeValue', \`${ config.tokens.tagStart }${ template.expr }${ config.tokens.stateStart }\` + content.length + \`${ config.tokens.stateEnd } ${ config.tokens.tagEnd }\`);`; }
-        const compiled = new StatefulAsyncFunction( '$signals__', `$anchorNode__`, source, { env } );
+        const compiled = new QuantumAsyncFunction( '$signals__', `$anchorNode__`, source, { env } );
         const signals = [];
         bindings.set( textNode, { compiled, signals, state: await compiled.call( textNode, signals, anchorNode ), } );
     }
@@ -142,7 +142,7 @@ async function mountInlineBindings( config, ...entries ) {
     for ( const node of entries ) {
         const source = parseInlineBindings( config, node.getAttribute( config.attr.binding ) );
         const { scope: env, bindings } = createDynamicScope( config, node );
-        const compiled = new StatefulAsyncFunction( '$signals__', source, { env } );
+        const compiled = new QuantumAsyncFunction( '$signals__', source, { env } );
         const signals = [];
         bindings.set( node, { compiled, signals, state: await compiled.call( node, signals ), } );
     }
@@ -154,28 +154,28 @@ function parseInlineBindings( config, str ) {
     const validation = {};
     const source = splitOuter( str, ';' ).map( str => {
         const [ left, right ] = splitOuter( str, ':' ).map( x => x.trim() );
-        const token = left[ 0 ], param = left.slice( 1 ).trim();
-        const $expr = `(${ right })`, $$expr = `(${ $expr } ?? '')`;
-        if ( token === '&' ) return `this.style[\`${ param }\`] = ${ $$expr };`;
-        if ( token === '%' ) return `this.classList.toggle(\`${ param }\`, !!${ $expr });`;
-        if ( token === '~' ) {
-            if ( param.endsWith( '?' ) ) return `this.toggleAttribute(\`${ param.substring( 0, -1 ).trim() }\`, !!${ $expr });`;
-            return `this.setAttribute(\`${ param }\`, ${ $$expr });`;
+        const directive = left[ 0 ], param = left.slice( 1 ).trim();
+        const arg = `(${ right })`, $arg = `(${ arg } ?? '')`;
+        if ( directive === '&' ) return `this.style[\`${ param }\`] = ${ $arg };`;
+        if ( directive === '%' ) return `this.classList.toggle(\`${ param }\`, !!${ arg });`;
+        if ( directive === '~' ) {
+            if ( param.startsWith( '?' ) ) return `this.toggleAttribute(\`${ param.substring( 1 ).trim() }\`, !!${ arg });`;
+            return `this.setAttribute(\`${ param }\`, ${ $arg });`;
         }
-        if ( token === '@' ) {
+        if ( directive === '@' ) {
             if ( validation[ param ] ) throw new Error( `Duplicate binding: ${ left }.` );
             validation[ param ] = true;
-            if ( param === 'text' ) return `$set__(this, 'textContent', ${ $$expr });`;
-            if ( param === 'html' ) return `this.setHTML(${ $$expr });`;
+            if ( param === 'text' ) return `$set__(this, 'textContent', ${ $arg });`;
+            if ( param === 'html' ) return `this.setHTML(${ $arg });`;
             if ( param === 'items' ) {
                 const [ iterationSpec, importSpec ] = splitOuter( right, '/' );
-                if ( !importSpec ) throw new Error( `Invalid ${ token }items spec: ${ str }; no import specifier.` );
+                if ( !importSpec ) throw new Error( `Invalid ${ directive }items spec: ${ str }; no import specifier.` );
                 let [ raw, production, kind, iteratee ] = iterationSpec.trim().match( /(.*?[\)\s+])(of|in)([\(\{\[\s+].*)/i ) || [];
-                if ( !raw ) throw new Error( `Invalid ${ token }items spec: ${ str }.` );
+                if ( !raw ) throw new Error( `Invalid ${ directive }items spec: ${ str }.` );
                 if ( production.startsWith( '(' ) ) {
                     production = production.trim().slice( 1, -1 ).split( ',' ).map( x => x.trim() );
                 } else { production = [ production ]; }
-                if ( production.length > ( kind === 'in' ? 3 : 2 ) ) throw new Error( `Invalid ${ token }items spec: ${ str }.` );
+                if ( production.length > ( kind === 'in' ? 3 : 2 ) ) throw new Error( `Invalid ${ directive }items spec: ${ str }.` );
                 const indices = kind === 'in' ? production[ 2 ] : ( production[ 1 ] || '$index__' );
                 return `
                 let $iteratee__ = ${ iteratee };

package/src/scoped-js/index.js

@@ -3,15 +3,15 @@
  * @imports
  */
 import Observer from '@webqit/observer';
-import { resolveParams } from '@webqit/stateful-js/params';
-import { StatefulAsyncFunction, StatefulAsyncScript, StatefulModule, State } from '@webqit/stateful-js/async';
+import { resolveParams } from '@webqit/quantum-js/params';
+import { QuantumAsyncFunction, QuantumAsyncScript, QuantumModule, State } from '@webqit/quantum-js/async';
 import { _init } from '../util.js';
 import Hash from './Hash.js';
 
 export {
-    StatefulAsyncFunction,
-    StatefulAsyncScript,
-    StatefulModule,
+    QuantumAsyncFunction,
+    QuantumAsyncScript,
+    QuantumModule,
     State,
     Observer,
 }
@@ -28,9 +28,9 @@ export default function init( { advanced = {}, ...$config } ) {
     } );
 	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 }[stateful]` );
+        return selector.concat( `script${ qualifier }[scoped],script${ qualifier }[quantum]` );
     }, [] ).join( ',' );
-    Object.assign( window.webqit, { StatefulAsyncFunction, StatefulAsyncScript, StatefulModule, State, Observer } );
+    Object.assign( window.webqit, { QuantumAsyncFunction, QuantumAsyncScript, QuantumModule, State, Observer } );
     window.webqit.oohtml.Script = {
         compileCache: [ new Map, new Map, ],
         execute: execute.bind( window, config ),
@@ -54,9 +54,9 @@ async function execute( config, execHash ) {
     }
     // Execute and save state
     const state = ( await compiledScript.bind( thisContext ) ).execute();
-    if ( script.stateful ) { Object.defineProperty( script, 'state', { value: state } ); }
+    if ( script.quantum ) { Object.defineProperty( script, 'state', { value: state } ); }
     realdom.realtime( window.document ).observe( script, () => {
-        if ( script.stateful ) { state.dispose(); }
+        if ( script.quantum ) { state.dispose(); }
         if ( script.scoped ) { thisContext.scripts.splice( thisContext.scripts.indexOf( script, 1 ) ); }
     }, { subtree: true, timing: 'sync', generation: 'exits' } );
 }
@@ -75,22 +75,22 @@ function realtime( config ) {
 	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.scriptSelector, record => {
         record.entrants.forEach( script => {
             if ( script.cloned ) return;
-            if ( 'stateful' in script ) return handled( script );
-            Object.defineProperty( script, 'stateful', { value: script.hasAttribute( 'stateful' ) } ); 
+            if ( 'quantum' in script ) return handled( script );
+            Object.defineProperty( script, 'quantum', { value: script.hasAttribute( 'quantum' ) } ); 
             if ( 'scoped' in script ) return handled( script );
             Object.defineProperty( script, 'scoped', { value: script.hasAttribute( 'scoped' ) } ); 
             // 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 ];
+            const compileCache = oohtml.Script.compileCache[ script.quantum ? 0 : 1 ];
             let compiledScript;
             if ( !( compiledScript = compileCache.get( sourceHash ) ) ) {
                 const { parserParams, compilerParams, runtimeParams } = config.advanced;
-                compiledScript = new ( script.type === 'module' ? StatefulModule : StatefulAsyncScript )( textContent, {
+                compiledScript = new ( script.type === 'module' ? QuantumModule : QuantumAsyncScript )( textContent, {
                     exportNamespace: `#${ script.id }`,
                     fileName: window.document.url,
                     parserParams,
-                    compilerParams: { ...compilerParams, startStatic: !script.stateful },
+                    compilerParams: { ...compilerParams, startStatic: !script.quantum },
                     runtimeParams,
                 } );
                 compileCache.set( sourceHash, compiledScript );

package/test/index.js

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

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 stateful>
+            <script scoped quantum>
                 testRecords.push( this );
                 console.log('-------scoped JS here.', this);
             </script>`;