@webqit/oohtml 2.1.19 → 2.1.21

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.19",
+  "version": "2.1.21",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -40,14 +40,14 @@
   "dependencies": {
     "@webqit/dom": "^2.0.8",
     "@webqit/observer": "^2.0.7",
-    "@webqit/subscript": "^2.1.39",
+    "@webqit/subscript": "^2.1.40",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {
+    "@webqit/oohtml-ssr": "^1.2.4",
     "chai": "^4.3.4",
     "coveralls": "^3.1.1",
     "esbuild": "^0.14.43",
-    "jsdom": "^20.0.0",
     "mocha": "^10.0.0",
     "mocha-lcov-reporter": "^1.3.0"
   },

package/src/scoped-js/index.js

@@ -27,7 +27,7 @@ export default function init( { advanced = {}, ...$config } ) {
         return selector.concat( `script${ qualifier }[scoped],script${ qualifier }[contract]` );
     }, [] ).join( ',' );
     window.webqit.oohtml.Script = { compileCache: [ new Map, new Map, ] };
-    window.webqit.SubscriptFunction = config.SubscriptFunction/* allow for injection, e.g. from test runner */ || SubscriptFunction;
+    window.webqit.SubscriptFunction = SubscriptFunction;
     window.webqit.Observer = Observer;
     realtime.call( window, config );
 }
@@ -41,21 +41,27 @@ export {
 // 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.contract ) {
         // Rerending processes,,,
         Object.defineProperty( script, 'rerender', { value: ( ...args ) => _await( returnValue, ( [ , rerender ] ) => rerender( ...args ) ) } );
         _await( script.properties, properties => {
-            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 ( path[ 0 ] === 'this' ) {
-                    return Observer.deep( thisContext, path.slice( 1 ), Observer.observe, record_s => {
-                        script.rerender( ...getPaths( [ 'this' ], record_s ) );
+                const _env = { 'this': thisContext, 'globalThis': globalThis };
+                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 ] ] ) ) {
+                        return Observer.deep( _env[ path[ 0 ] ], path.slice( 1 ), Observer.observe, record_s => {
+                            script.rerender( ...getPaths( [ path[ 0 ] ], record_s ) );
+                        } );
+                    }
+                    return Observer.deep( globalThis, path, Observer.observe, record_s => {
+                        script.rerender( ...getPaths( [], record_s ) );
                     } );
-                }
-                return Observer.deep( globalThis, path, Observer.observe, record_s => {
-                    script.rerender( ...getPaths( [], record_s ) );
                 } );
             } );
         } );

package/test/bindings-api.test.js

@@ -4,7 +4,6 @@
  */
 import { expect } from 'chai';
 import { createDocument } from './index.js';
-import Observer from '@webqit/observer';
 
 describe(`Bindings API`, function() {
 
@@ -12,7 +11,7 @@ describe(`Bindings API`, function() {
         
         const head = ``;
         const body = ``;
-        const { document } = createDocument( head, body );
+        const { document, window } = createDocument( head, body );
 
         it ( `The document object and elements should expose a "bindings" property each...`, async function() {
             expect( document ).to.have.property( 'bindings' );
@@ -20,6 +19,7 @@ describe(`Bindings API`, function() {
         } );
 
         it ( `Bindings objects should be observable...`, async function() {
+            const { webqit: { Observer } } = window;
             let idReceived = null;
             Observer.observe( document.bindings, records => {
                 idReceived = records[ 0 ].key;

package/test/imports.test.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import { expect } from 'chai';
-import { delay, createDocument, mockRemoteFetch, _ } from './index.js';
+import { createDocument, mockRemoteFetch, delay } from './index.js';
 
 describe(`HTML Imports`, function() {
 
@@ -25,8 +25,7 @@ describe(`HTML Imports`, function() {
 
         it ( `<import> element be automatically resolved: import default export...`, async function() {
             expect( document.body.children ).to.have.length( 2 );
-            const importElement = _( document.body.firstElementChild ).get( 'slot@imports' );
-            expect( importElement.nodeName ).to.eq( 'IMPORT' );
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'P' );
         } );
 
         it( `<import> element be resolved again: after having mutated an export right at its module.`, async function() {
@@ -147,7 +146,7 @@ describe(`HTML Imports`, function() {
             // Should stil be waiting...
             expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
             // When remote request must have completed
-            await delay( ( timeout * 2 ) + 100 );
+            await delay( ( timeout * 2 ) + 150 );
             expect( document.body.firstElementChild.nodeName ).to.eq( 'P' );
             expect( document.body.lastElementChild.nodeName ).to.eq( 'P' );
         } );
@@ -173,7 +172,7 @@ describe(`HTML Imports`, function() {
                 <!--<import module="#input"></import>-->
             </div>`;
             const { document } = createDocument( head, body );
-            await true;
+            await delay( 20 );
 
             const routingElement = document.body.firstElementChild;
             expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
@@ -205,7 +204,7 @@ describe(`HTML Imports`, function() {
                 <!--<import module="#input"></import>-->
             </div>`;
             const { document } = createDocument( head, body );
-            await true;
+            await delay( 20 );
 
             const routingElement = document.body.firstElementChild;
             expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );

package/test/index.js

@@ -2,12 +2,7 @@
 /**
  * @imports
  */
-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 webqitDom from '@webqit/dom';
+import { createWindow } from '@webqit/oohtml-ssr';
 
 /**
  * -------
@@ -15,8 +10,6 @@ import webqitDom from '@webqit/dom';
  * -------
  */
 
-export { Observer };
-export const _ = ( ...args ) => _internals( 'oohtml', ...args );
 export function delay( duration, callback = undefined ) {
     return new Promise( res => {
         setTimeout( () => res( callback && callback() ), duration );
@@ -27,62 +20,23 @@ export function createDocument( head = '', body = '', callback = null, ) {
     const skeletonDoc = `
     <!DOCTYPE html>
     <html>
-        <head>${ head }</head>
+        <head>
+        <meta name="subscript-compiler-url" content="../subscript/dist/compiler.js">
+        <script ssr src="/dist/main.js"></script>
+        ${ head }
+        </head>
         <body>${ body }</body>
     </html>`;
-    // TODO: Proper indentation for pretty-printing
-    const instance  = new jsdom.JSDOM( skeletonDoc, {
-        url: 'http://localhost',
+    return createWindow( skeletonDoc, {
+        // Notice we do not want to use the Path utility here.
+        // Destroys the file:/// url convention especially in windows
+        url: import.meta.url.substring( 0, import.meta.url.lastIndexOf( '/test/' ) ),
         beforeParse( window ) {
-            init.call( window );
-            if ( callback ) callback( window, window.webqit.dom );
+            if ( callback ) callback( window );
         }
     } );
-    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, {
-        ...params,
-        url: 'http://localhost',
-        beforeParse( window ) {
-            window.testRecords = [];
-            createContext( window );
-            // Running advanced scripts
-            init.call( window, { SCOPED_JS: {
-                SubscriptFunction,
-                advanced: {
-                    runtimeParams: {
-                        compileFunction: ( code, parameters ) => compileFunction( code, parameters, {
-                            parsingContext: window,
-                        } ),
-                    }
-                }
-            } } );
-            // Running basic scripts
-            const dom = webqitDom.call( window );
-            if ( params.runScripts !== 'dangerously' ) {
-                dom.realtime( window.document ).observe( 'script', record => {
-                    record.entrants.forEach( script => {
-                        if ( !script.textContent.trim() ) return;
-                        runInContext( script.textContent, window );
-                    } );
-                }, { subtree: true } );
-            }
-            // Sync callback?
-            if ( callback ) callback( window, window.webqit.dom );
-        }
-    } );
-    return instance.window;
-};
-
-
 export function mockRemoteFetch( window, contents, delay = 1000 ) {
     window.fetch = url => {
         console.info( 'Fetching .......... ', url );

package/test/modules.test.js

@@ -3,8 +3,7 @@
  * @imports
  */
 import { expect } from 'chai';
-import Observer from '@webqit/observer';
-import { delay, createDocument, mockRemoteFetch, _ } from './index.js';
+import { createDocument, mockRemoteFetch, delay } from './index.js';
 const getQueryPath = str => str.split( '/' ).join( '/modules/' ).split( '/' );
 
 describe(`HTML Modules`, function() {
@@ -47,8 +46,9 @@ describe(`HTML Modules`, function() {
                     <p>Hellort</p>
                 </template>
             </template>`;
-            const { document } = createDocument( head, body );
-            await delay( 200 );
+            const { document, window } = createDocument( head, body );
+            await delay( 20 );
+            const { webqit: { Observer } } = window;
             // -------
             const temp0 = Observer.deep( document.modules, getQueryPath( 'temp0' ), Observer.get );
             expect( temp0 ).to.have.property( 'modules' );
@@ -79,13 +79,12 @@ describe(`HTML Modules`, function() {
     } );
 
     describe( `Remote...`, function() {
-        //return;
         this.timeout( 10000 );
 
         it( `Add remote lazy module, with a nested remote lazy module, then resolve.`, async function() {
 
             const head = ``, body = ``;
-            const window = createDocument( head, body, window => {
+            const { document, window } = createDocument( head, body, window => {
                 // Define remote responses
                 const temp0 = `
                 <template exportid="temp1" src="/temp1.html" loading="lazy"></template>`;
@@ -97,7 +96,9 @@ describe(`HTML Modules`, function() {
                 <p>Hellort</p>`;
                 const timeout = 1000;
                 mockRemoteFetch( window, { '/temp0.html': temp0, '/temp1.html': temp1, '/temp2.html': temp2 }, timeout );
-            } ), document = window.document;
+            } );
+            await delay( 20 );
+            const { webqit: { Observer } } = window;
             // -------
             // Add a remote module
             const templateEl = document.createElement( 'template' );
@@ -132,7 +133,6 @@ describe(`HTML Modules`, function() {
     } );
 
     describe( `Context...`, function() {
-        //return;
         this.timeout( 10000 );
 
         it( `Use the context API to fire a scoped-request that is imitially resolved from the document and then from a scoped context.`, async function() {
@@ -146,7 +146,9 @@ describe(`HTML Modules`, function() {
             </template>`;
             const body = `
             <div></div>`;
-            const window = createDocument( head, body ), document = window.document;
+            const { document, window } = createDocument( head, body );
+            await delay( 20 );
+
             // -------
             const addScopedModules = () => {
                 const templateEl = document.createElement( 'template' );

package/test/namespace-api.test.js

@@ -3,12 +3,11 @@
  * @imports
  */
 import { expect } from 'chai';
-import { createDocument } from './index.js';
-import Observer from '@webqit/observer';
+import { createDocument, delay } from './index.js';
 
 describe(`Namespaced HTML`, function() {
 
-    describe( `Basic...`, function() {
+    describe( `Basic...`, async function() {
         
         const head = `
         <meta name="oohtml" content="attr.id=:id" />`;
@@ -16,7 +15,9 @@ describe(`Namespaced HTML`, function() {
         <div :id="main" namespace>
             <div :id="child"></div>
         </div>`;
-        const { document } = createDocument( head, body );
+        const { document, window } = createDocument( head, body );
+        await delay( 60 );
+        const { webqit: { Observer } } = window;
 
         it ( `The document object and elements should expose a "namespace" property each...`, async function() {
             expect( document ).to.have.property( 'namespace' );

package/test/scoped-js.test.js

@@ -3,38 +3,10 @@
  * @imports
  */
 import { expect } from 'chai';
-import { delay, createDocumentForScopedJS } from './index.js';
+import { createDocument, delay } from './index.js';
 
 describe(`Test: Scoped JS`, function() {
 
-    describe(`Scripts`, function() {
-
-        it(`Should do basic observe`, async function() {
-            const head = '', body = `            
-            <h1>Hello World!</h1>
-            <script>
-            let ul = document.createElement( 'ul' );
-            let li = document.createElement( 'li' );
-            ul.appendChild(li);
-            document.body.appendChild(ul);
-            </script>
-            <div><p>Hello World!</p></div>`;
-
-            const window = createDocumentForScopedJS( head, body, ( window, dom ) => {
-                // Observer is bound before document is parsed.
-                // Elements are going to show up as they are being parsed.
-                dom.realtime( window.document ).observe( 'h1,p,li', record => {
-                    window.testRecords.push( record.entrants[ 0 ] );
-                }, { subtree: true } );
-            }, { runScripts: 'dangerously' } );
-
-            await delay( 60 );
-            expect( window.testRecords ).to.have.length( 3 );
-        });
-
-
-    });
-
     describe(`Scripts`, function() {
 
         it(`Should do basic observe`, async function() {
@@ -45,12 +17,12 @@ describe(`Test: Scoped JS`, function() {
                 console.log('-------scoped JS here.');
             </script>`;
 
-            const window = createDocumentForScopedJS( head, body );
+            const window = createDocument( head, body );
+            window.testRecords = [];
+            await delay( 160 ); // Takes time to dynamically load Subscript compiler
 
-            await delay( 60 );
             expect( window.testRecords ).to.have.length( 1 );
             expect( window.testRecords[ 0 ] ).to.eql( window.document.body );
-            //console.log('::::::::::::', window.testRecords );
         });
 
     });