@webqit/oohtml 1.10.3 → 2.0.0

package/src/util.js

@@ -1,180 +1,20 @@
-
-/**
- * @imports
- */
-import domInit from '@webqit/browser-pie/src/dom/index.js';
-import { _wrapped, _unwrap, _before, _after } from '@webqit/util/str/index.js';
-import { _from as _arrFrom } from '@webqit/util/arr/index.js';
-import { _internals }from '@webqit/util/js/index.js';
-import { _merge } from '@webqit/util/obj/index.js';
-import Lexer from '@webqit/util/str/Lexer.js';
-
-/**
- * A OOHTML's meta tag props reader.
- *  
- * @param Object defaults
- * 
- * @return Object
- */
-export function config(defaults, overrides = {}) {
-    const WebQit = domInit.call(this);
-    if (!WebQit.OOHTML) {
-        // For feature modules that will call outside of ./index.js module
-        WebQit.OOHTML = {};
-    }
-    if (!WebQit.OOHTML.meta) {
-        WebQit.OOHTML.meta = WebQit.DOM.meta('oohtml', true/* readWrite */);
-    }
-    WebQit.OOHTML.meta.defaults(_merge(3, defaults, overrides));
-    return WebQit.OOHTML.meta;
-}
-
-/**
- * Runs a "scope-query" against a context.
- *
- * @param Array	    contexts
- * @param String	query
- * @param Function	collectionCallback
- * @param Function	advancementCallback
- *
- * @return Array
- */
-export function scopeQuery(contexts, query, collectionCallback, advancementCallback = null) {
-    var queryPath = query.split('#')[0].split('/').map(n => n.trim()).filter(n => n);
-    return execScopeQuery(contexts, queryPath, collectionCallback, advancementCallback);
-}
-
-/**
- * Parses a "scope-query" reference expression to seperate the "reference" and its "modifiers".
- *
- * @param String	expr
- *
- * @return Array
- */
-export function parseScopeReferenceExpr(reference) {
-    var split = Lexer.split(reference.trim(), [':']);
-    reference = split.shift();
-    var modifiers = split.reduce((_modifiers, _modifier) => {
-        var [ name, parentheses ] = Lexer.split(_modifier.trim(), []);
-        _modifiers[name] = _unwrap(parentheses, '(', ')');
-        return _modifiers;
-    }, {});
-    return [ reference, modifiers ];
-}
-
-/**
- * Determines if a given path matches a "scope-query".
- *
- * @param String	query
- * @param String	path
- *
- * @return Bool
- */
-export function queryMatchPath(query, path) {
-    path = path.split('#')[0].split('/').map(n => n.trim()).filter(n => n);
-    query = query.split('#')[0].split('/').map(n => n.trim()).filter(n => n);
-    return !query.length ? false : query.reduce((prev, segment, i) => {
-        if (!prev) return false;
-        return Lexer.split(segment.trim(), ['|', '+']).reduce((_prev, _reference) => {
-            var [ _reference, modifiers ] = parseScopeReferenceExpr(_reference);
-            _reference = _reference.trim();
-            var sementIsMatch = _reference === path[i];
-            if (!sementIsMatch && (('deep' in modifiers) || ('deepest' in modifiers))) {
-                var _sementIsMatch = path.slice(i + 1).reduce((prev, s, i) => {
-                    return prev > -1 && ('deep' in modifiers) ? prev : (s === _reference ? i : prev);
-                }, -1);
-                if (_sementIsMatch > -1) {
-                    var e = path.splice(i, _sementIsMatch + 1);
-                    sementIsMatch = true;
-                }
-            }
-            return _prev || sementIsMatch;
-        }, false);
-    }, true);
-}
-
-const evalAssertExpr = (segment, callback) => {
-    return Lexer.split(segment.trim(), ['|', '+'], { preserveDelims: true }).reduce((_result, _reference) => {
-        var operator;
-        if (_reference.startsWith('|') || _reference.startsWith('+')) {
-            operator = _reference.substr(0, 1);
-            _reference = _reference.substr(1).trim();
-        }
-        if (_result.theEnd || (operator === '|' && _result.length)) {
-            _result.theEnd = true;
-            return _result;
-        }
-        return _result.concat(callback(_reference.trim()));
-    }, []).filter(t => t);
-};
-
-const evalModuleExpr = (contexts, segment, collectionCallback) => {
-    const lookAhead = contexts => contexts.reduce((_list, _module) => _list.concat(...collectionCallback(_module).values()), []);
-    return evalAssertExpr(segment, _reference => {
-        var [ _reference, modifiers ] = parseScopeReferenceExpr(_reference);
-         // ------------
-        return contexts.reduce((list, context) => {
-            var collection = collectionCallback(context);
-            if (_reference === '*') {
-                _reference = '(' + collection.keys().join('+') + ')';
-            }
-            var itemArray = _wrapped(_reference, '(', ')') ? evalModuleExpr([context], _unwrap(_reference, '(', ')'), collectionCallback) : _arrFrom(collection.get(_reference), false);
-            // ------------
-            var appliedModifiers = [], reapplyAppliedModifiers = expr => `${expr}${appliedModifiers.map(m => `:${m}(${modifiers[m]})`).join('')}`;
-            Object.keys(modifiers).forEach(modifier => {
-                if (modifier === 'deep' || modifier === 'deepest') {
-                    var nextLevel = [context];
-                    while ((modifier === 'deepest' || !itemArray.length) && (nextLevel = lookAhead(nextLevel)).length) {
-                        var _itemArray = evalModuleExpr(nextLevel, reapplyAppliedModifiers(_reference), collectionCallback);
-                        if (_itemArray.length) {
-                            itemArray = _itemArray;
-                        }
-                    }
-                } else {
-                    if (modifier === 'having' || modifier === 'not-having') {
-                        itemArray = itemArray.filter(module => {
-                            var filterHavingsResult = evalAssertExpr(modifiers[modifier], _filterHavings => collectionCallback(module, _filterHavings));
-                            return modifier === 'not-having' ? !filterHavingsResult.length : filterHavingsResult.length;
-                        });    
-                    }
-                    appliedModifiers.push(modifier);
-                }
-            });
-            return list.concat(itemArray);
-        }, []);
-    });
-};
-
-const execScopeQuery = function(contexts, path, collectionCallback, advancementCallback = null, level = 0) {
-
-    if (!path.length) {
-        return [];
-    }
-
-    let segment = path.shift(), isStopSegmentIfCount;
-    if (segment.endsWith('.')) {
-        isStopSegmentIfCount = true;
-        segment = segment.substr(0, segment.length - 1).trim();
-    }
-    // -----------
-    let modules = evalModuleExpr(contexts, segment, collectionCallback);
-    modules.forEach(context => {
-        if (_internals(context, 'oohtml').has('queryCallback')) {
-            _internals(context, 'oohtml').get('queryCallback')();
-        }
-    });
-    // -----------
-    if (modules.length && isStopSegmentIfCount) {
-        return modules;
-    }
-    // -----------
-    if (path.length) {
-        let submodules = execScopeQuery(modules, path.slice(), collectionCallback, advancementCallback, level + 1);
-        if (submodules === -1) {
-            return advancementCallback(modules, level, true);
-        }
-        return submodules;
-    }
-
-    return advancementCallback ? advancementCallback(modules, level) : modules;
-};
+
+/**
+ * @imports
+ */
+import { _internals } from '@webqit/util/js/index.js';
+
+export const _ = ( node, ...args ) => _internals( node, 'oohtml', ...args );
+
+export  const _compare = ( a, b, depth = 1, objectSizing = false ) => {
+    if ( depth && typeof a === 'object' && a && typeof b === 'object' && b && ( !objectSizing || Object.keys( a ).length === Object.keys( b ).length ) ) {
+        for ( let key in a ) {
+            if ( !_compare( a[ key ], b[ key ], depth - 1, objectSizing ) ) return false;
+        }
+        return true;
+    }
+    if ( Array.isArray( a ) && Array.isArray( b ) && a.length === b.length ) {
+        return ( b = b.slice( 0 ).sort() ) && a.slice( 0 ).sort().every( ( valueA, i ) => valueA === b[ i ] );
+    }
+    return a === b;
+};

package/test/imports.test.js

@@ -0,0 +1,194 @@
+
+/**
+ * @imports
+ */
+import { expect } from 'chai';
+import { delay, createDocument, mockRemoteFetch, printDocument, _ } 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 );
+            const importElement = _( document.body.firstElementChild ).get( 'slot@imports' );
+            expect( importElement.nodeName ).to.eq( 'IMPORT' );
+        } );
+
+        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>`;
+        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' );
+        } );
+        
+    } );
+
+    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 ) + 100 );
+            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 true;
+
+            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 true;
+
+            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

@@ -0,0 +1,119 @@
+
+/**
+ * @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 wqDom from '@webqit/dom';
+
+/**
+ * -------
+ * HELPERS
+ * -------
+ */
+
+ 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 );
+    } );
+}
+
+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',
+        beforeParse( window ) {
+            init.call( window );
+            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,
+        beforeParse( window ) {
+            window.testRecords = [];
+            createContext( window );
+            // -----------------
+            // Running advanced scripts
+            const subscriptParams = {
+                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 );
+                        runInContext( script.textContent, window );
+                    } );
+                }, { subtree: true } );
+            }
+            // -----------------
+            if ( callback ) callback( window, window.wq.dom );
+        }
+    } );
+    // --------
+    return instance.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 );
+        } );
+    };
+}
+
+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 );
+    } );
+}