npm - @webqit/oohtml - Versions diffs - 2.1.34 → 2.1.35 - Mend

@webqit/oohtml 2.1.34 → 2.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (52) hide show

package/.gitignore +3 -3
package/LICENSE +20 -20
package/README.md +733 -67
package/dist/bindings-api.js +1 -1
package/dist/bindings-api.js.map +3 -3
package/dist/context-api.js +1 -1
package/dist/context-api.js.map +3 -3
package/dist/html-imports.js +1 -1
package/dist/html-imports.js.map +3 -3
package/dist/main.js +12 -12
package/dist/main.js.map +3 -3
package/dist/namespace-api.js +1 -1
package/dist/namespace-api.js.map +3 -3
package/dist/scoped-css.js +2 -2
package/dist/scoped-css.js.map +3 -3
package/dist/scoped-js.js +7 -7
package/dist/scoped-js.js.map +3 -3
package/package.json +76 -76
package/src/bindings-api/index.js +83 -83
package/src/bindings-api/targets.browser.js +10 -10
package/src/context-api/HTMLContext.js +76 -157
package/src/context-api/HTMLContextProvider.js +158 -0
package/src/context-api/_ContextRequestEvent.js +25 -25
package/src/context-api/index.js +51 -51
package/src/context-api/targets.browser.js +9 -9
package/src/{html-modules/HTMLExportsManager.js → html-imports/_HTMLExportsManager.js} +185 -199
package/src/html-imports/_HTMLImportElement.js +211 -213
package/src/{html-modules/_HTMLImportsContext.js → html-imports/_HTMLImportsProvider.js} +122 -114
package/src/html-imports/index.js +197 -88
package/src/html-imports/targets.browser.js +9 -9
package/src/index.js +30 -32
package/src/namespace-api/index.js +144 -144
package/src/namespace-api/targets.browser.js +10 -10
package/src/scoped-css/index.js +45 -45
package/src/scoped-css/targets.browser.js +10 -10
package/src/scoped-js/Compiler.js +297 -297
package/src/scoped-js/index.js +112 -112
package/src/scoped-js/targets.browser.js +10 -10
package/src/targets.browser.js +9 -9
package/src/util.js +34 -34
package/test/bindings-api.test.js +42 -42
package/test/imports.test.js +221 -221
package/test/index.js +50 -50
package/test/modules.test.js +200 -200
package/test/namespace-api.test.js +51 -51
package/test/scoped-css.test.js +31 -31
package/test/scoped-js.test.js +29 -29
package/dist/html-modules.js +0 -2
package/dist/html-modules.js.map +0 -7
package/src/context-api/HTMLContextManager.js +0 -77
package/src/html-modules/index.js +0 -131
package/src/html-modules/targets.browser.js +0 -10

package/test/imports.test.js CHANGED Viewed

@@ -1,221 +1,221 @@
-/**
- * @imports
- */
-import { expect } from 'chai';
-import { createDocument, mockRemoteFetch, delay } from './index.js';
-describe(`HTML Imports`, function() {
-    describe( `Basic...`, function() {
-        const head = `
-        <template exportid="temp0">
-            <p>Hello world Export</p>
-            <p>Hellort</p>
-        </template>`;
-        const body = `
-        <import module="temp0"></import>`;
-        const { document } = createDocument( head, body );
-        it ( `The document object and <template> elements should expose a "modules" property`, async function() {
-            expect( document ).to.have.property( 'modules' );
-            expect( document.modules.temp0 ).to.have.property( 'modules' );
-        } );
-        it ( `<import> element be automatically resolved: import default export...`, async function() {
-            expect( document.body.children ).to.have.length( 2 );
-            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() {
-            const templateEl = document.querySelector( 'template' );
-            let added = document.createElement( 'div' );
-            templateEl.content.appendChild( added );
-            expect( document.body.children ).to.have.length( 3 );
-        } );
-    } );
-    describe( `Dynamic...`, function() {
-        const head = `
-        <template exportid="temp0">
-            <!-- ------- -->
-            <p>Hello world Export</p>
-            <p>Hellort</p>
-            <input exportid="#input" />
-            <template exportid="temp1">
-                <textarea exportid="#input"></textarea>
-                <template exportid="temp2">
-                    <select exportid="#input"></select>
-                </template>
-            </template>
-            <!-- ------- -->
-            <template exportid="_landing1">
-                <div exportid="#main.html">a</div>
-                <template exportid="_landing2">
-                    <div exportid="#main.html">b</div>
-                    <template exportid="_docs">
-                        <div exportid="#main.html">c</div>
-                    </template>
-                </template>
-            </template>
-            <!-- ------- -->
-            <template exportid="landing1" extends="_landing1">
-                <div exportid="#README.md">1</div>
-                <template exportid="landing2" extends="_landing2">
-                    <div exportid="#README.md">2</div>
-                    <template exportid="docs" extends="_docs">
-                        <div exportid="#README.md">3</div>
-                    </template>
-                </template>
-            </template>
-            <!-- ------- -->
-        </template>`;
-        const body = `
-        <import module="temp0/uuu"></import>`;
-        const { document } = createDocument( head, body );
-        const importEl = document.querySelector( 'import' );
-        it ( `<import> element should not be resolved: no match for given import ID...`, async function() {
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
-        } );
-        it ( `<import> element should be automatically resolved: new import ID is set...`, async function() {
-            importEl.setAttribute( 'module', 'temp0#input' );
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'INPUT' );
-        } );
-        it ( `<import> element should be automatically resolved: new moduleref is set - nested...`, async function() {
-            importEl.setAttribute( 'module', 'temp0/temp1#input' );
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
-        } );
-        it ( `<import> element should be automatically resolved: moduleref is unset - should now be inherited from <body>...`, async function() {
-            importEl.setAttribute( 'module', '#input' );
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
-            document.body.setAttribute( 'importscontext', 'temp0/temp1/temp2' );
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'SELECT' );
-        } );
-        it ( `<import> element should be automatically resolved: moduleref at <body> is changed...`, async function() {
-            document.body.setAttribute( 'importscontext', 'temp0' );
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'INPUT' );
-        } );
-        it ( `<import> element should be automatically RESTORED: slotted element is removed from DOM...`, async function() {
-            document.body.querySelector( 'input' ).remove();
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
-        } );
-        /*
-        it ( ``, async function() {
-            console.log('"""""""""""""""""""""""""""""""""""""""""""""', document.modules.temp0.modules.landing1.modules.landing2.modules.docs.modules);
-        } );
-        */
-    } );
-    describe( `Remote...`, function() {
-        it( `<import> element from nested remote modules.`, async function() {
-            this.timeout( 10000 );
-            const head = ``, body = ``, timeout = 2000;
-            const window = createDocument( head, body, window => {
-                // Define a remote response
-                const temp0 = `
-                <template exportid="temp1" src="/temp1.html" loading="lazy"></template>`;
-                const temp1 = `
-                <p>Hello world Export</p>
-                <p>Hellort</p>
-                <template exportid="temp22">
-                </template>`;
-                mockRemoteFetch( window, { '/temp0.html': temp0, '/temp1.html': temp1 }, timeout );
-            } ), document = window.document;
-            // Add a remote module
-            const templateEl = document.createElement( 'template' );
-            templateEl.setAttribute( 'exportid', 'temp0' );
-            templateEl.setAttribute( 'src', '/temp0.html' );
-            document.head.appendChild( templateEl );
-            // Add the import element to with a view to waiting for the remote module
-            const importEl = document.createElement( 'import' );
-            importEl.setAttribute( 'module', 'temp0/temp1' );
-            document.body.appendChild( importEl );
-            // Should stil be waiting...
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
-            // When remote request must have completed
-            await delay( ( timeout * 2 ) + 150 );
-            expect( document.body.firstElementChild.nodeName ).to.eq( 'P' );
-            expect( document.body.lastElementChild.nodeName ).to.eq( 'P' );
-        } );
-    } );
-    describe( `Hydration...`, function() {
-        it ( `Server-resolved <import> element should maintain relationship with slotted elements...`, async function() {
-            const head = `
-            <template exportid="temp0">
-                <input exportid="#input" />
-                <template exportid="temp1">
-                    <textarea exportid="#input"></textarea>
-                    <template exportid="temp2">
-                        <select exportid="#input"></select>
-                    </template>
-                </template>
-            </template>`;
-            const body = `
-            <div importscontext="temp0/temp1">
-                <textarea exportid="#input"></textarea>
-                <!--<import module="#input"></import>-->
-            </div>`;
-            const { document } = createDocument( head, body );
-            await delay( 20 );
-            const routingElement = document.body.firstElementChild;
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
-            const temp1 = document.modules.temp0.modules.temp1;
-            const textarea = [ ...temp1.modules[ '#input' ] ][ 0 ];
-            textarea.remove();
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
-            temp1.content.prepend( textarea );
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
-            routingElement.firstElementChild.remove();
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
-        } );
-        it ( `Server-resolved <import> element should maintain relationship with slotted elements...`, async function() {
-            const head = `
-            <template exportid="temp0">
-                <input exportid="#input" />
-                <template exportid="temp1">
-                    <textarea exportid="#input"></textarea>
-                    <template exportid="temp2">
-                        <select exportid="#input"></select>
-                    </template>
-                </template>
-            </template>`;
-            const body = `
-            <div importscontext="temp0/temp1">
-                <textarea exportid="#input"></textarea>
-                <!--<import module="#input"></import>-->
-            </div>`;
-            const { document } = createDocument( head, body );
-            await delay( 20 );
-            const routingElement = document.body.firstElementChild;
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
-            routingElement.setAttribute( 'importscontext', 'temp0/temp1/temp2' );
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'SELECT' );
-            routingElement.removeChild( routingElement.firstElementChild );
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
-            routingElement.setAttribute( 'importscontext', 'temp0' );
-            expect( routingElement.firstElementChild.nodeName ).to.eq( 'INPUT' );
-        } );
-    } );
-} );
+/**
+ * @imports
+ */
+import { expect } from 'chai';
+import { createDocument, mockRemoteFetch, delay } from './index.js';
+describe(`HTML Imports`, function() {
+    describe( `Basic...`, function() {
+        const head = `
+        <template exportid="temp0">
+            <p>Hello world Export</p>
+            <p>Hellort</p>
+        </template>`;
+        const body = `
+        <import module="temp0"></import>`;
+        const { document } = createDocument( head, body );
+        it ( `The document object and <template> elements should expose a "modules" property`, async function() {
+            expect( document ).to.have.property( 'modules' );
+            expect( document.modules.temp0 ).to.have.property( 'modules' );
+        } );
+        it ( `<import> element be automatically resolved: import default export...`, async function() {
+            expect( document.body.children ).to.have.length( 2 );
+            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() {
+            const templateEl = document.querySelector( 'template' );
+            let added = document.createElement( 'div' );
+            templateEl.content.appendChild( added );
+            expect( document.body.children ).to.have.length( 3 );
+        } );
+    } );
+    describe( `Dynamic...`, function() {
+        const head = `
+        <template exportid="temp0">
+            <!-- ------- -->
+            <p>Hello world Export</p>
+            <p>Hellort</p>
+            <input exportid="#input" />
+            <template exportid="temp1">
+                <textarea exportid="#input"></textarea>
+                <template exportid="temp2">
+                    <select exportid="#input"></select>
+                </template>
+            </template>
+            <!-- ------- -->
+            <template exportid="_landing1">
+                <div exportid="#main.html">a</div>
+                <template exportid="_landing2">
+                    <div exportid="#main.html">b</div>
+                    <template exportid="_docs">
+                        <div exportid="#main.html">c</div>
+                    </template>
+                </template>
+            </template>
+            <!-- ------- -->
+            <template exportid="landing1" extends="_landing1">
+                <div exportid="#README.md">1</div>
+                <template exportid="landing2" extends="_landing2">
+                    <div exportid="#README.md">2</div>
+                    <template exportid="docs" extends="_docs">
+                        <div exportid="#README.md">3</div>
+                    </template>
+                </template>
+            </template>
+            <!-- ------- -->
+        </template>`;
+        const body = `
+        <import module="temp0/uuu"></import>`;
+        const { document } = createDocument( head, body );
+        const importEl = document.querySelector( 'import' );
+        it ( `<import> element should not be resolved: no match for given import ID...`, async function() {
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+        } );
+        it ( `<import> element should be automatically resolved: new import ID is set...`, async function() {
+            importEl.setAttribute( 'module', 'temp0#input' );
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'INPUT' );
+        } );
+        it ( `<import> element should be automatically resolved: new moduleref is set - nested...`, async function() {
+            importEl.setAttribute( 'module', 'temp0/temp1#input' );
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
+        } );
+        it ( `<import> element should be automatically resolved: moduleref is unset - should now be inherited from <body>...`, async function() {
+            importEl.setAttribute( 'module', '#input' );
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+            document.body.setAttribute( 'importscontext', 'temp0/temp1/temp2' );
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'SELECT' );
+        } );
+        it ( `<import> element should be automatically resolved: moduleref at <body> is changed...`, async function() {
+            document.body.setAttribute( 'importscontext', 'temp0' );
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'INPUT' );
+        } );
+        it ( `<import> element should be automatically RESTORED: slotted element is removed from DOM...`, async function() {
+            document.body.querySelector( 'input' ).remove();
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+        } );
+        /*
+        it ( ``, async function() {
+            console.log('"""""""""""""""""""""""""""""""""""""""""""""', document.modules.temp0.modules.landing1.modules.landing2.modules.docs.modules);
+        } );
+        */
+    } );
+    describe( `Remote...`, function() {
+        it( `<import> element from nested remote modules.`, async function() {
+            this.timeout( 10000 );
+            const head = ``, body = ``, timeout = 2000;
+            const window = createDocument( head, body, window => {
+                // Define a remote response
+                const temp0 = `
+                <template exportid="temp1" src="/temp1.html" loading="lazy"></template>`;
+                const temp1 = `
+                <p>Hello world Export</p>
+                <p>Hellort</p>
+                <template exportid="temp22">
+                </template>`;
+                mockRemoteFetch( window, { '/temp0.html': temp0, '/temp1.html': temp1 }, timeout );
+            } ), document = window.document;
+            // Add a remote module
+            const templateEl = document.createElement( 'template' );
+            templateEl.setAttribute( 'exportid', 'temp0' );
+            templateEl.setAttribute( 'src', '/temp0.html' );
+            document.head.appendChild( templateEl );
+            // Add the import element to with a view to waiting for the remote module
+            const importEl = document.createElement( 'import' );
+            importEl.setAttribute( 'module', 'temp0/temp1' );
+            document.body.appendChild( importEl );
+            // Should stil be waiting...
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+            // When remote request must have completed
+            await delay( ( timeout * 2 ) + 150 );
+            expect( document.body.firstElementChild.nodeName ).to.eq( 'P' );
+            expect( document.body.lastElementChild.nodeName ).to.eq( 'P' );
+        } );
+    } );
+    describe( `Hydration...`, function() {
+        it ( `Server-resolved <import> element should maintain relationship with slotted elements...`, async function() {
+            const head = `
+            <template exportid="temp0">
+                <input exportid="#input" />
+                <template exportid="temp1">
+                    <textarea exportid="#input"></textarea>
+                    <template exportid="temp2">
+                        <select exportid="#input"></select>
+                    </template>
+                </template>
+            </template>`;
+            const body = `
+            <div importscontext="temp0/temp1">
+                <textarea exportid="#input"></textarea>
+                <!--<import module="#input"></import>-->
+            </div>`;
+            const { document } = createDocument( head, body );
+            await delay( 20 );
+            const routingElement = document.body.firstElementChild;
+            expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
+            const temp1 = document.modules.temp0.modules.temp1;
+            const textarea = [ ...temp1.modules[ '#input' ] ][ 0 ];
+            textarea.remove();
+            expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+            temp1.content.prepend( textarea );
+            expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
+            routingElement.firstElementChild.remove();
+            expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+        } );
+        it ( `Server-resolved <import> element should maintain relationship with slotted elements...`, async function() {
+            const head = `
+            <template exportid="temp0">
+                <input exportid="#input" />
+                <template exportid="temp1">
+                    <textarea exportid="#input"></textarea>
+                    <template exportid="temp2">
+                        <select exportid="#input"></select>
+                    </template>
+                </template>
+            </template>`;
+            const body = `
+            <div importscontext="temp0/temp1">
+                <textarea exportid="#input"></textarea>
+                <!--<import module="#input"></import>-->
+            </div>`;
+            const { document } = createDocument( head, body );
+            await delay( 20 );
+            const routingElement = document.body.firstElementChild;
+            expect( routingElement.firstElementChild.nodeName ).to.eq( 'TEXTAREA' );
+            routingElement.setAttribute( 'importscontext', 'temp0/temp1/temp2' );
+            expect( routingElement.firstElementChild.nodeName ).to.eq( 'SELECT' );
+            routingElement.removeChild( routingElement.firstElementChild );
+            expect( routingElement.firstElementChild.nodeName ).to.eq( 'IMPORT' );
+            routingElement.setAttribute( 'importscontext', 'temp0' );
+            expect( routingElement.firstElementChild.nodeName ).to.eq( 'INPUT' );
+        } );
+    } );
+} );

package/test/index.js CHANGED Viewed

@@ -1,51 +1,51 @@
-/**
- * @imports
- */
-import { createWindow } from '@webqit/oohtml-ssr';
-/**
- * -------
- * HELPERS
- * -------
- */
-export function delay( duration, callback = undefined ) {
-    return new Promise( res => {
-        setTimeout( () => res( callback && callback() ), duration );
-    } );
-}
-export function createDocument( head = '', body = '', callback = null, ) {
-    const skeletonDoc = `
-    <!DOCTYPE html>
-    <html>
-        <head>
-        <meta name="subscript-compiler-url" content="../subscript/dist/compiler.js">
-        <script ssr src="/dist/main.js"></script>
-        ${ head }
-        </head>
-        <body>${ body }</body>
-    </html>`;
-    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/index.js' ) ),
-        beforeParse( window ) {
-            if ( callback ) callback( window );
-        }
-    } );
-}
-export function mockRemoteFetch( window, contents, delay = 1000 ) {
-    window.fetch = url => {
-        console.info( 'Fetching .......... ', url );
-        const successResponse = () => ( { ok: true, text: () => Promise.resolve( contents[ url ] ), } );
-        return new Promise( ( res, rej ) => {
-            setTimeout( () => {
-                if ( contents[ url ] ) res( successResponse() )
-                else rej( { message: 'Not found.' } );
-            }, delay );
-        } );
-    };
+/**
+ * @imports
+ */
+import { createWindow } from '@webqit/oohtml-ssr';
+/**
+ * -------
+ * HELPERS
+ * -------
+ */
+export function delay( duration, callback = undefined ) {
+    return new Promise( res => {
+        setTimeout( () => res( callback && callback() ), duration );
+    } );
+}
+export function createDocument( head = '', body = '', callback = null, ) {
+    const skeletonDoc = `
+    <!DOCTYPE html>
+    <html>
+        <head>
+        <meta name="subscript-compiler-url" content="../subscript/dist/compiler.js">
+        <script ssr src="/dist/main.js"></script>
+        ${ head }
+        </head>
+        <body>${ body }</body>
+    </html>`;
+    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/index.js' ) ),
+        beforeParse( window ) {
+            if ( callback ) callback( window );
+        }
+    } );
+}
+export function mockRemoteFetch( window, contents, delay = 1000 ) {
+    window.fetch = url => {
+        console.info( 'Fetching .......... ', url );
+        const successResponse = () => ( { ok: true, text: () => Promise.resolve( contents[ url ] ), } );
+        return new Promise( ( res, rej ) => {
+            setTimeout( () => {
+                if ( contents[ url ] ) res( successResponse() )
+                else rej( { message: 'Not found.' } );
+            }, delay );
+        } );
+    };
 }