@webqit/oohtml 1.10.2 → 2.0.0

package/test/modules.test.js

@@ -0,0 +1,198 @@
+
+/**
+ * @imports
+ */
+import { expect } from 'chai';
+import Observer from '@webqit/observer';
+import { delay, createDocument, mockRemoteFetch, printDocument, _ } from './index.js';
+const getQueryPath = str => str.split( '/' ).join( '/modules/' ).split( '/' );
+
+describe(`HTML Modules`, function() {
+
+    describe( `APIs...`, function() {
+
+        it ( `The document object and <template> elements should expose a "modules" property...`, async function() {
+            
+            const head = `
+            <template exportid="temp0">
+                <p>Hello world Export</p>
+                <p>Hellort</p>
+            </template>`;
+            const body = `
+            <template exportid="temp1" scoped>
+                <p>Hello world Export</p>
+                <p>Hellort</p>
+            </template>`;
+            const { document } = createDocument( head, body );
+            await delay( 200 );
+            // -------
+            expect( document ).to.have.property( 'modules' );
+            expect( document.modules[ 'temp0' ] ).to.have.property( 'modules' );
+            expect( document.modules[ 'temp0' ].exportid ).to.eq( 'temp0' );
+            // -------
+            expect( document.body ).to.have.property( 'modules' );
+            expect( document.body.modules[ 'temp1' ] ).to.have.property( 'modules' );
+            expect( document.body.modules[ 'temp1' ].exportid ).to.eq( 'temp1' );
+        } );
+        
+        it ( `The document object and <template> elements should expose a "modules" property...`, async function() {
+            
+            const body = '', head = `
+            <template exportid="temp0">
+                <p>Hello world Export</p>
+                <p>Hellort</p>
+                <template exportid="temp1"></template>
+                <template exportid="temp2" inherits="temp1 temp3">
+                    <p>Hello world Export</p>
+                    <p>Hellort</p>
+                </template>
+            </template>`;
+            const { document } = createDocument( head, body );
+            await delay( 200 );
+            // -------
+            const temp0 = Observer.deep( document.modules, getQueryPath( 'temp0' ), Observer.get );
+            expect( temp0 ).to.have.property( 'modules' );
+            expect( temp0.modules[ '#default' ] ).to.have.length( 2 );
+            const temp2 = Observer.deep( document.modules, getQueryPath( 'temp0/temp2' ), Observer.get );
+            expect( temp2 ).to.have.property( 'modules' );
+            // -------
+            const temp1Inherited = Observer.deep( document.modules, getQueryPath( 'temp0/temp2/temp1' ), Observer.get );
+            expect( temp1Inherited ).to.have.property( 'modules' );
+            // -------
+            const temp3Observed = [];
+            Observer.deep( document.modules, getQueryPath( 'temp0/temp2/temp3' ), Observer.observe, record => {
+                temp3Observed.push( record.value );
+            } );
+            // -------
+            const temp3 = document.createElement( 'template' );
+            temp3.setAttribute( 'exportid', 'temp3' );
+            temp0.content.appendChild( temp3 );
+            // -------
+            expect( temp3Observed ).to.be.an( 'array' ).with.length( 1 );
+            expect( temp3Observed[ 0 ] ).to.have.property( 'modules' );
+            // -------
+            const temp3Inherited = Observer.deep( document.modules, getQueryPath( 'temp0/temp2/temp3' ), Observer.get );
+            expect( temp3Inherited ).to.have.property( 'modules' );
+            // -------
+        } );
+
+    } );
+
+    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 => {
+                // Define remote responses
+                const temp0 = `
+                <template exportid="temp1" src="/temp1.html" loading="lazy"></template>`;
+                const temp1 = `
+                <template exportid="temp2" src="/temp2.html"></template>`;
+                const temp2 = `
+                <template exportid="temp3"></template>
+                <p>Hello world Export</p>
+                <p>Hellort</p>`;
+                const timeout = 1000;
+                mockRemoteFetch( window, { '/temp0.html': temp0, '/temp1.html': temp1, '/temp2.html': temp2 }, timeout );
+            } ), document = window.document;
+            // -------
+            // Add a remote module
+            const templateEl = document.createElement( 'template' );
+            templateEl.setAttribute( 'exportid', 'temp0' );
+            templateEl.setAttribute( 'loading', 'lazy' );
+            templateEl.setAttribute( 'src', '/temp0.html' );
+            document.head.appendChild( templateEl );
+            // -------
+            // Add the import element to with a view to waiting for the remote module
+            const temp0 = Observer.deep( document.modules, getQueryPath( 'temp0' ), Observer.get );
+            expect( temp0 ).to.have.property( 'modules' );
+            await delay( 2100 );
+            // temp1 shouldn't have been automatically loaded still
+            const hasTemp1 = Observer.deep( document.modules, getQueryPath( 'temp0/temp1' ), Observer.has );
+            expect( hasTemp1 ).to.be.false;
+            // Try access temp1 to trigger loading and await
+            const _temp1 = await Observer.deep( document.modules, getQueryPath( 'temp0/temp1' ), Observer.get );
+            expect( _temp1 ).to.have.property( 'modules' );
+            // -------
+            // Receive updates
+            const temp3Observed = [];
+            Observer.deep( document.modules, getQueryPath( 'temp0/temp1/temp2/temp3' ), Observer.observe, ( record, lifecycle ) => {
+                temp3Observed.push( record.value );
+            } );
+            await delay( 2100 );
+            // -------
+            // temp2 should be loaded by now
+            expect( temp3Observed ).to.be.an( 'array' ).with.length( 1 );
+            expect( temp3Observed[ 0 ] ).to.have.property( 'modules' );
+            expect( temp3Observed[ 0 ].getAttribute( 'exportid' ) ).to.eq( 'temp3' );
+        } );
+    } );
+
+    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() {
+
+            const head = `
+            <template exportid="temp0">
+                <template exportid="temp-head1">
+                    <p>Hello world Export</p>
+                    <p>Hellort</p>
+                </template>
+            </template>`;
+            const body = `
+            <div></div>`;
+            const window = createDocument( head, body ), document = window.document;
+            // -------
+            const addScopedModules = () => {
+                const templateEl = document.createElement( 'template' );
+                templateEl.setAttribute( 'exportid', 'temp0' );
+                templateEl.toggleAttribute( 'scoped', true );
+                const scoped = document.body.appendChild( templateEl );
+                document.body.setAttribute( 'importscontext', '/' );
+                return scoped;
+            };
+            // -------
+            const contextRequest = ( el, params, callback ) => {
+                const request = { type: 'HTMLModules', live: true, ...params };
+                const event = new document.context.ContextRequestEvent( request, callback, {
+                    bubbles: true,
+                } );
+                return el.dispatchEvent( event );
+            };
+            // -------
+            await 'For some reason, the <template> element in the head needs to show up in the document modulesObj';
+            const modulesObjs = [], div = document.querySelector( 'div' );
+            // -------
+            contextRequest( div, { detail: '/temp0', diff: false }, response => {
+                modulesObjs.push( response );
+            } );
+            expect( modulesObjs ).to.have.length( 1 );
+            expect( modulesObjs[ 0 ] ).to.have.property( 'scoped', false );
+            // -------
+            const scoped = addScopedModules();
+            expect( modulesObjs ).to.have.length( 3 );
+            expect( modulesObjs[ 1 ] ).to.have.property( 'scoped', true );
+            expect( modulesObjs[ 2 ] ).to.have.property( 'scoped', true );
+            // -------
+            scoped.remove();
+            expect( modulesObjs ).to.have.length( 4 );
+            expect( modulesObjs[ 3 ] ).to.have.property( 'scoped', false );
+            // -------
+            document.body.appendChild( scoped );
+            expect( modulesObjs ).to.have.length( 5 );
+            expect( modulesObjs[ 4 ] ).to.have.property( 'scoped', true );
+            // -------
+            const unscoped = document.modules.temp0;
+            unscoped.remove();
+            document.head.appendChild( unscoped );
+            document.body.remove();
+            expect( modulesObjs ).to.have.length( 5 );
+        } );
+    } );
+
+} );

package/test/namespaced-html.test.js

@@ -0,0 +1,50 @@
+
+/**
+ * @imports
+ */
+import { expect } from 'chai';
+import { createDocument } from './index.js';
+import Observer from '@webqit/observer';
+
+describe(`Namespaced HTML`, function() {
+
+    describe( `Basic...`, function() {
+        
+        const head = `
+        <meta name="oohtml" content="attr.id=data-id" />`;
+        const body = `
+        <div data-id="main" namespace>
+            <div data-id="child"></div>
+        </div>`;
+        const { document } = createDocument( head, body );
+
+        it ( `The document object and elements should expose a "namespace" property each...`, async function() {
+            expect( document ).to.have.property( 'namespace' );
+            expect( document.namespace.main ).to.have.property( 'namespace' ).that.have.property( 'child' );
+        } );
+
+        it ( `Namespace objects should be observable...`, async function() {
+            let idReceived = null;
+            Observer.observe( document.namespace, records => {
+                idReceived = records[ 0 ].key;
+            } );
+            const item = document.createElement( 'div' );
+            item.setAttribute( 'data-id', 'some-id' );
+            document.body.appendChild( item );
+            expect( idReceived ).to.eq( 'some-id' );
+        } );
+
+        it ( `Namespace attributes should be applicable dynamically...`, async function() {
+            expect( Object.keys( document.namespace ).length ).to.eq( 2 );
+            document.body.toggleAttribute( 'namespace', true );
+            expect( Object.keys( document.namespace ).length ).to.eq( 0 );
+            expect( Object.keys( document.body.namespace ).length ).to.eq( 2 );
+            document.body.toggleAttribute( 'namespace', false );
+            expect( Object.keys( document.namespace ).length ).to.eq( 2 );
+            expect( Object.keys( document.body.namespace ).length ).to.eq( 0 );
+        } );
+
+    } );
+
+} );
+

package/test/scoped-js.js

@@ -0,0 +1,57 @@
+
+/**
+ * @imports
+ */
+import { expect } from 'chai';
+import { delay, createDocumentForScopedJS, Observer } 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() {
+            const head = '', body = `            
+            <h1>Hello World!</h1>
+            <script scoped contract>
+                testRecords.push( this );
+            </script>`;
+
+            const window = createDocumentForScopedJS( head, body );
+
+            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);
+        });
+
+    });
+
+});

package/test/state-api.test.js

@@ -0,0 +1,34 @@
+
+/**
+ * @imports
+ */
+import { expect } from 'chai';
+import { createDocument } from './index.js';
+import Observer from '@webqit/observer';
+
+describe(`State API`, function() {
+
+    describe( `Basic...`, function() {
+        
+        const head = ``;
+        const body = ``;
+        const { document } = createDocument( head, body );
+
+        it ( `The document object and elements should expose a "state" property each...`, async function() {
+            expect( document ).to.have.property( 'state' );
+            expect( document.body ).to.have.property( 'state' );
+        } );
+
+        it ( `State objects should be observable...`, async function() {
+            let idReceived = null;
+            Observer.observe( document.state, records => {
+                idReceived = records[ 0 ].key;
+            } );
+            document.state.someKey = 'someValue';
+            expect( idReceived ).to.eq( 'someKey' );
+        } );
+
+    } );
+
+} );
+

package/test/test.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta name="subscript-compiler-url" content="http://127.0.0.1:5500/subscript/dist/compiler.js" />
+        <script src="/oohtml/dist/main.js"></script>
+        <script>
+            window.extVar = 'External variable initial value.';
+        </script>
+        <template exportid="temp0">
+            <input exportid="input" />
+            <template exportid="temp1">
+                <textarea exportid="input"></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"></textarea>
+            <!--<import module="#input"></import>-->
+        </div>
+
+        <div id="diiiiv">
+            DIV
+            <script scoped contract>
+                console.log( 'Execution context: ' + this.tagName );
+                console.log( extVar );
+                this.addEventListener( 'remove', e => {
+                    console.log('removing...');
+                } );
+                setTimeout( () => {
+                    this.remove();
+                }, 10000 );
+            </script>
+        </div>
+
+        <div id="diiiiv2">
+            DIV
+            <script scoped contract>
+                console.log( 'Execution context: ' + this.tagName );
+                console.log( extVar );
+                this.addEventListener( 'beforeremove', e => {
+                    console.log('removing...');
+                } );
+                setTimeout( () => {
+                    this.remove();
+                }, 10000 );
+            </script>
+        </div>
+
+        <script>
+            const diiiiv = document.querySelector( '#diiiiv' );
+            setTimeout( () => {
+                extVar = 'External variable updated value!';
+                diiiiv.scripts.forEach( script => {
+                    script.rerender( [ 'extVar' ] );
+                } );
+            }, 5000 );
+        </script>
+        
+    </body>
+</html>