@webqit/oohtml 2.1.4 → 2.1.6

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.4",
+  "version": "2.1.6",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
   "dependencies": {
     "@webqit/dom": "^2.0.0",
     "@webqit/observer": "^2.0.1",
-    "@webqit/subscript": "^2.1.35",
+    "@webqit/subscript": "^2.1.36",
     "@webqit/util": "^0.8.9"
   },
   "devDependencies": {

package/src/html-modules/index.js

@@ -18,6 +18,7 @@ import { _ } from '../util.js';
 export default function init( $params = {} ) {
     const window = this, dom = wqDom.call( window );
     if ( !window.wq ) { window.wq = {}; }
+    window.wq.Observer = Observer;
     window.wq.HTMLImportsContext = class extends _HTMLImportsContext {
         static get params() { return params; }
     };

package/src/html-modules/targets.browser.js

@@ -2,12 +2,9 @@
 /**
  * @imports
  */
-import init, { Observer } from './index.js';
+import init from './index.js';
 
 /**
  * @init
  */
 init.call( window );
-// As globals
-if ( !window.wq ) { window.wq = {}; }
-window.wq.Observer = Observer;

package/src/index.js

@@ -16,7 +16,7 @@ import ScopedJS from './scoped-js/index.js';
 export default function init( configs = {} ) {
     if ( !this.wq ) { this.wq = {}; }
     if ( this.wq.oohtml ) return;
-    this.wq.Observer = Observer;
+    this.wq.oohtml = {};
     // --------------
     StateAPI.call(this, ( configs.StateAPI || {} ) );
     ContextAPI.call( this, ( configs.ContextAPI || {} ) );
@@ -25,7 +25,6 @@ export default function init( configs = {} ) {
     NamespacedHTML.call(this, ( configs.NamespacedHTML || {} ) );
     ScopedJS.call( this, ( configs.ScopedJS || {} ) );
     // --------------
-    this.wq.oohtml = {};
 }
 
 /**

package/src/namespaced-html/index.js

@@ -13,6 +13,8 @@ import { _ } from '../util.js';
  */
 export default function init( $params = {} ) {
 	const window = this, dom = wqDom.call( window );
+    if ( !window.wq ) { window.wq = {}; }
+    window.wq.Observer = Observer;
     // -------
     const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
 		attr: { namespace: 'namespace',  id: ':id', },

package/src/namespaced-html/targets.browser.js

@@ -2,12 +2,9 @@
 /**
  * @imports
  */
-import init, { Observer } from './index.js';
+import init from './index.js';
 
 /**
  * @init
  */
 init.call( window );
-// As globals
-if ( !window.wq ) { window.wq = {}; }
-window.wq.Observer = Observer;

package/src/scoped-js/index.js

@@ -15,14 +15,17 @@ import wqDom from '@webqit/dom';
 export default function init( $params = {} ) {
 	const window = this, dom = wqDom.call( window );
     if ( !window.wq ) { window.wq = {}; }
-    window.wq.SubscriptFunction = SubscriptFunction;
+    if ( !window.wq.oohtml ) { window.wq.oohtml = {}; }
+    window.wq.oohtml.Script = { compileCache: [ new Map, new Map, ] };
+    window.wq.SubscriptFunction = $params.SubscriptFunction/* allow for injection, e.g. from test runner */ || SubscriptFunction;
+    window.wq.Observer = Observer;
     // -------
     const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
         script: { retention: 'retain', mimeType: '' },
         config: resolveParams( {
-            parserParams: { allowReturnOutsideFunction: false, allowSuperOutsideMethod: false },
-            compilerParams: { globalsNoObserve: [ 'alert' ] },
-            runtimeParams: { apiVersion: 2 },
+            parserParams: { allowReturnOutsideFunction: false, allowSuperOutsideMethod: false, ...( $params.parserParams || {} ) },
+            compilerParams: { globalsNoObserve: [ 'alert' ], ...( $params.compilerParams || {} ) },
+            runtimeParams: { apiVersion: 2, ...( $params.runtimeParams || {} ) },
         } ),
     } );
 	params.scriptSelector = ( Array.isArray( params.script.mimeType ) ? params.script.mimeType : [ params.script.mimeType ] ).reduce( ( selector, mm ) => {
@@ -47,10 +50,6 @@ export {
  */
 function realtime( params ) {
 	const window = this, { dom } = window.wq;
-    // ---
-    window.wq.transformCache = new Map;
-    window.wq.compileCache = [ new Map, new Map, ];
-    // ---
     const handled = () => {};
 	dom.realtime( window.document ).observe( params.scriptSelector, record => {
         record.entrants.forEach( script => {
@@ -64,7 +63,7 @@ function realtime( params ) {
         } );
 	}, { subtree: true, timing: 'intercept', generation: 'entrants' } );
     // ---
-    window.wq.exec = ( execHash ) => {
+    window.wq.oohtml.Script.run = ( execHash ) => {
         const exec = fromHash( execHash );
         if ( !exec ) throw new Error( `Argument must be a valid exec hash.` );
         const { script, compiledScript, thisContext } = exec;
@@ -126,7 +125,8 @@ export function execute( compiledScript, thisContext, script ) {
 // ------------------
 // JAVASCRIPT::[SCOPED|CONTRACT]
 export function compile( script, thisContext, params = {} ) {
-    const wq = this.wq, cache = wq.compileCache[ script.contract ? 0 : 1 ];
+    const { wq: { oohtml, SubscriptFunction } } = this;
+    const cache = oohtml.Script.compileCache[ script.contract ? 0 : 1 ];
     const sourceHash = toHash( script.textContent );
     // Script instances are parsed only once
     let source = script.textContent, compiledScript;
@@ -164,7 +164,7 @@ export function compile( script, thisContext, params = {} ) {
         cache.set( sourceHash, compiledScript );
     }
     const execHash = toHash( { script, compiledScript, thisContext } );
-    script.textContent = `wq.exec('${ execHash }');`;
+    script.textContent = `wq.oohtml.Script.run('${ execHash }');`;
 }
 
 // ------------------

package/src/scoped-js/targets.browser.js

@@ -2,13 +2,9 @@
 /**
  * @imports
  */
-import init, { Observer } from './index.js';
+import init from './index.js';
 
 /**
  * @init
  */
 init.call( window );
-
-// As globals
-if ( !self.wq ) { self.wq = {}; }
-self.wq.Observer = Observer;

package/src/state-api/index.js

@@ -13,6 +13,8 @@ import { _ } from '../util.js';
  */
 export default function init( $params = {} ) {
 	const window = this, dom = wqDom.call( window );
+    if ( !window.wq ) { window.wq = {}; }
+    window.wq.Observer = Observer;
     const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
         api: { state: 'state', },
     } );

package/src/state-api/targets.browser.js

@@ -2,12 +2,9 @@
 /**
  * @imports
  */
-import init, { Observer } from './index.js';
+import init from './index.js';
 
 /**
  * @init
  */
 init.call( window );
-// As globals
-if ( !window.wq ) { window.wq = {}; }
-window.wq.Observer = Observer;

package/test/index.js

@@ -6,6 +6,7 @@ import { _internals } from '@webqit/util/js/index.js';
 import { createContext, compileFunction, runInContext } from 'vm';
 import jsdom from 'jsdom';
 import init, { Observer } from '../src/index.js';
+import { SubscriptFunction } from '@webqit/subscript';
 import wqDom from '@webqit/dom';
 
 /**
@@ -14,10 +15,8 @@ import wqDom from '@webqit/dom';
  * -------
  */
 
- export { Observer };
-
+export { Observer };
 export const _ = ( el, ...args ) => _internals( el, 'oohtml', ...args );
-
 export function delay( duration, callback = undefined ) {
     return new Promise( res => {
         setTimeout( () => res( callback && callback() ), duration );
@@ -25,14 +24,12 @@ export function delay( duration, callback = undefined ) {
 }
 
 export function createDocument( head = '', body = '', callback = null, ) {
-    // -------
     const skeletonDoc = `
     <!DOCTYPE html>
     <html>
         <head>${ head }</head>
         <body>${ body }</body>
     </html>`;
-    // --------
     // TODO: Proper indentation for pretty-printing
     const instance  = new jsdom.JSDOM( skeletonDoc, {
         url: 'http://localhost',
@@ -41,51 +38,45 @@ export function createDocument( head = '', body = '', callback = null, ) {
             if ( callback ) callback( window, window.wq.dom );
         }
     } );
-    // --------
     return instance.window;
 }
 
 export function createDocumentForScopedJS( head = '', body = '', callback = null, params = {} ) {
-    // -------
     const skeletonDoc = `
     <!DOCTYPE html>
     <html>
         <head>${ head }</head>
         <body>${ body }</body>
     </html>`;
-    // --------
     const instance  = new jsdom.JSDOM( skeletonDoc, {
-        url: 'http://localhost',
         ...params,
+        url: 'http://localhost',
         beforeParse( window ) {
             window.testRecords = [];
             createContext( window );
-            // -----------------
             // Running advanced scripts
-            const subscriptParams = {
+            init.call( window, { ScopedJS: {
+                SubscriptFunction,
                 runtimeParams: {
                     compileFunction: ( code, parameters ) => compileFunction( code, parameters, {
                         parsingContext: window,
                     } ),
                 }
-            };
-            init.call( window, { ScopedJS: subscriptParams } );
-            // -----------------
+            } } );
             // Running basic scripts
             const dom = wqDom.call( window );
             if ( params.runScripts !== 'dangerously' ) {
                 dom.realtime( window.document ).observe( 'script', record => {
                     record.entrants.forEach( script => {
-                        //console.log( '-----------------------------------------', script.textContent );
+                        if ( !script.textContent.trim() ) return;
                         runInContext( script.textContent, window );
                     } );
                 }, { subtree: true } );
             }
-            // -----------------
+            // Sync callback?
             if ( callback ) callback( window, window.wq.dom );
         }
     } );
-    // --------
     return instance.window;
 };
 
@@ -101,19 +92,4 @@ export function mockRemoteFetch( window, contents, delay = 1000 ) {
             }, delay );
         } );
     };
-}
-
-export function printDocument( document, desc = '' ) {
-    return; new Promise( res => {
-        setTimeout( () => {
-            console.log( '' );
-            console.log( '-------------' );
-            console.log( desc );
-            console.log( '-------------' );
-            console.log( document.documentElement.outerHTML );
-            console.log( '-------------' );
-            console.log( '' );
-            res();
-        }, 0 );
-    } );
 }

package/test/modules.test.js

@@ -4,7 +4,7 @@
  */
 import { expect } from 'chai';
 import Observer from '@webqit/observer';
-import { delay, createDocument, mockRemoteFetch, printDocument, _ } from './index.js';
+import { delay, createDocument, mockRemoteFetch, _ } from './index.js';
 const getQueryPath = str => str.split( '/' ).join( '/modules/' ).split( '/' );
 
 describe(`HTML Modules`, function() {

package/test/{scoped-js.test2.js → scoped-js.test.js}

@@ -3,7 +3,7 @@
  * @imports
  */
 import { expect } from 'chai';
-import { delay, createDocumentForScopedJS, Observer } from './index.js';
+import { delay, createDocumentForScopedJS } from './index.js';
 
 describe(`Test: Scoped JS`, function() {
 
@@ -50,7 +50,7 @@ describe(`Test: Scoped JS`, function() {
             await delay( 60 );
             expect( window.testRecords ).to.have.length( 1 );
             expect( window.testRecords[ 0 ] ).to.eql( window.document.body );
-            //console.log('::::::::::::', window.document.documentElement.outerHTML);
+            //console.log('::::::::::::', window.testRecords );
         });
 
     });

package/test/test.html

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta name="oohtml" content="script.retention=hidden" />
-        <script src="/oohtml/dist/main.js"></script>
-        <script>
-            window.extVar = 'External variable initial value.';
-            window.Observer = wq.Observer;
-        </script>
-        <template exportid="temp0">
-            <input exportid="#input" />
-            <template exportid="temp1">
-                <textarea exportid="#input" placeholder="This is to be rendered"></textarea>
-                <template exportid="temp2">
-                    <select exportid="#input"></select>
-                </template>
-                <template exportid="temp2b" inherits="#input"></template>
-                <template exportid="temp2c">
-                    <textarea exportid="#input"></textarea>
-                </template>
-            </template>
-        </template>
-    </head>
-    <body>
-
-        <div importscontext="temp0/temp1">
-            <textarea exportid="#input" placeholder="This is server-rendered"></textarea>
-            <!--<import module="#input"></import>-->
-        </div>
-
-        <div id="div1">
-            [1]: Scoped contract script here! See the console.
-            <script type="module" scoped contract>
-                console.log( '[1]: Execution context: ' + this.tagName, this.someProp );
-                console.log( '[1]: Dependencies: ', ( await [ ...this.scripts ][ 0 ].properties ).dependencies );
-                console.log( `[1]: ${ extVar }` );
-                this.addEventListener( 'remove', e => { console.log( '[1]: Removing...' ); } );
-                setTimeout( () => { this.remove(); }, 10000 );
-            </script>
-        </div>
-
-        <div id="div2">
-            [2]: Scoped contract script here! See the console.
-            <script type="module" scoped contract>
-                console.log( '[2]: Execution context: ', this.tagName );
-                console.log( '[2]: Dependencies: ', ( await [ ...this.scripts ][ 0 ].properties ).dependencies );
-                console.log( `[2]: ${ extVar }` );
-                this.addEventListener( 'remove', e => { console.log( '[2]: Removing...' ); } );
-                setTimeout( () => { this.remove(); }, 10000 );
-            </script>
-        </div>
-
-        <script>
-            const div1 = document.querySelector( '#div1' );
-            setTimeout( () => {
-                Observer.set( globalThis, 'extVar', 'External variable updated value!' );
-                Observer.set( div1, 'someProp', 'someProp value!' );
-                setTimeout( () => {
-                    Observer.set( globalThis, 'extVar', 'External variable updated value again!' );
-                }, 6000 );
-                /*
-                extVar = 'External variable updated value!';
-                div1.scripts.forEach( script => {
-                    script.rerender( [ 'extVar' ] );
-                } );
-                */
-            }, 5000 );
-        </script>
-        
-    </body>
-</html>