@webqit/oohtml 2.1.6 → 2.1.9

package/package.json

@@ -5,7 +5,7 @@
   "keywords": [
     "namespaced-HTML",
     "html-modules",
-    "ui-state",
+    "ui-bindings",
     "html-imports",
     "reflex",
     "subscript",
@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.6",
+  "version": "2.1.9",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,14 +32,14 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/targets.browser.js html-modules=src/html-modules/targets.browser.js html-imports=src/html-imports/targets.browser.js namespaced-html=src/namespaced-html/targets.browser.js scoped-js=src/scoped-js/targets.browser.js state-api=src/state-api/targets.browser.js context-api=src/context-api/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
+    "build": "esbuild main=src/targets.browser.js html-modules=src/html-modules/targets.browser.js html-imports=src/html-imports/targets.browser.js namespaced-html=src/namespaced-html/targets.browser.js scoped-js=src/scoped-js/targets.browser.js bindings-api=src/bindings-api/targets.browser.js context-api=src/context-api/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
     "preversion": "npm run test && npm run build && git add -A dist",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
-    "@webqit/dom": "^2.0.0",
-    "@webqit/observer": "^2.0.1",
+    "@webqit/dom": "^2.0.2",
+    "@webqit/observer": "^2.0.2",
     "@webqit/subscript": "^2.1.36",
     "@webqit/util": "^0.8.9"
   },

package/src/bindings-api/index.js

@@ -0,0 +1,85 @@
+
+/**
+ * @imports
+ */
+import wqDom from '@webqit/dom';
+import Observer from '@webqit/observer';
+import { _ } from '../util.js';
+
+/**
+ * @init
+ * 
+ * @param Object $params
+ */
+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: { bind: 'bind', bindings: 'bindings', },
+    } );
+    exposeAPIs.call( this, params );
+}
+
+export { Observer }
+
+/**
+ * @Exports
+ * 
+ * The internal bindings object
+ * within elements and the document object.
+ */
+function getBindingsObject( node ) {
+	if ( !_( node ).has( 'bindings' ) ) {
+		const bindingsObj = Object.create( null );
+		_( node ).set( 'bindings', bindingsObj );
+	}
+	return _( node ).get( 'bindings' );
+}
+
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param Object params
+ *
+ * @return Void
+ */
+function exposeAPIs( params ) {
+	const window = this;
+    // Assertions
+    if ( params.api.bind in window.document ) { throw new Error( `document already has a "${ params.api.bind }" property!` ); }
+    if ( params.api.bindings in window.document ) { throw new Error( `document already has a "${ params.api.bindings }" property!` ); }
+    if ( params.api.bind in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ params.api.bind }" property!` ); }
+    if ( params.api.bindings in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ params.api.bindings }" property!` ); }
+    // Definitions
+    Object.defineProperty( window.document, params.api.bind, { value: function( bindings, params = {} ) {
+        return applyBindings( window.document, bindings, params );
+    } });
+    Object.defineProperty( window.document, params.api.bindings, { get: function() {
+        return Observer.proxy( getBindingsObject( window.document ) );
+    } });
+    Object.defineProperty( window.Element.prototype, params.api.bind, { value: function( bindings, params = {} ) {
+        return applyBindings( this, bindings, params );
+    } });
+    Object.defineProperty( window.Element.prototype, params.api.bindings, { get: function() {
+        return Observer.proxy( getBindingsObject( this ) );
+    } } );
+}
+
+/**
+ * Exposes Bindings with native APIs.
+ *
+ * @param document|Element  target
+ * @param Object            bindings
+ * @param Object            params
+ *
+ * @return Void
+ */
+function applyBindings( target, bindings, params ) {
+    const bindingsObj = getBindingsObject( target );
+    const exitingKeys = Observer.ownKeys( bindingsObj, params ).filter( key => !( key in bindings ) );
+    return Observer.batch( bindingsObj, () => {
+        if ( exitingKeys.length ) { Observer.deleteProperty( bindingsObj, exitingKeys, params ); }
+        Observer.set( bindingsObj, bindings, params );
+    } );
+}

package/src/index.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import Observer from '@webqit/observer';
-import StateAPI from './state-api/index.js';
+import BindingsAPI from './bindings-api/index.js';
 import ContextAPI from './context-api/index.js';
 import HTMLModules from './html-modules/index.js';
 import HTMLImports from './html-imports/index.js';
@@ -18,7 +18,7 @@ export default function init( configs = {} ) {
     if ( this.wq.oohtml ) return;
     this.wq.oohtml = {};
     // --------------
-    StateAPI.call(this, ( configs.StateAPI || {} ) );
+    BindingsAPI.call(this, ( configs.BindingsAPI || {} ) );
     ContextAPI.call( this, ( configs.ContextAPI || {} ) );
     HTMLModules.call( this, ( configs.HTMLModules || {} ) );
     HTMLImports.call( this, ( configs.HTMLImports || {} ) );

package/src/scoped-js/Compiler.js

@@ -0,0 +1,294 @@
+
+export default class Compiler {
+
+    // Unique ID generator
+    static hashTable = new Map;
+    static uniqId = () => (0|Math.random()*9e6).toString(36);
+
+    // Hash of anything generator
+    static toHash( val ) {
+        let hash;
+        if ( !( hash = this.hashTable.get( val ) ) ) {
+            hash = this.uniqId();
+            this.hashTable.set( val, hash );
+        }
+        return hash;
+    }
+
+    // Value of any hash
+    static fromHash( hash ) {
+        let val;
+        this.hashTable.forEach( ( _hash, _val ) => {
+            if ( _hash === hash ) val = _val;
+        } );
+        return val;
+    }
+
+    // Set window property
+    constructor( window, params, executeCallback ) {
+        this.window = window;
+        this.params = params;
+        // This is a global function
+        window.wq.oohtml.Script.run = ( execHash ) => {
+            const exec = this.constructor.fromHash( execHash );
+            if ( !exec ) throw new Error( `Argument must be a valid exec hash.` );
+            const { script, compiledScript, thisContext } = exec;
+            if ( thisContext instanceof window.Element && script.scoped ) {
+                if ( !thisContext.scripts ) { Object.defineProperty( thisContext, 'scripts', { value: new Set } ); }
+                thisContext.scripts.add( script );
+            }
+            switch ( params.script.retention ) {
+                case 'dispose':
+                    script.remove();
+                    break;
+                case 'hidden':
+                    script.textContent = `"source hidden"`;
+                    break;
+                default:
+                    script.textContent = compiledScript.function.originalSource;
+            }
+            return executeCallback.call( window, compiledScript, thisContext, script );
+        };    
+    }
+
+    // Compile scipt
+    compile( script, thisContext ) {
+        const _static = this.constructor;
+        const { wq: { oohtml, SubscriptFunction } } = this.window;
+        const cache = oohtml.Script.compileCache[ script.contract ? 0 : 1 ];
+        const sourceHash = _static.toHash( script.textContent );
+        // Script instances are parsed only once
+        let source = script.textContent, compiledScript;
+        if ( !( compiledScript = cache.get( sourceHash ) ) ) {
+            // Are there "import" (and "await") statements? Then, we need to rewrite that
+            let imports = [], meta = {};
+            let targetKeywords = [];
+            if ( script.type === 'module' ) targetKeywords.push( 'import ' );
+            if ( script.type === 'module' && !script.contract ) targetKeywords.push( 'await ' );
+            if ( targetKeywords.length && ( new RegExp( targetKeywords.join( '|' ) ) ).test( source ) ) {
+                [ imports, source, meta ] = this.parse( source );
+                if ( imports.length ) {
+                    source = `\n\t${ this.rewriteImportStmts( imports ).join( `\n\t` ) }\n\t${ source }\n`;
+                }
+            }
+            // Let's obtain a material functions
+            let _Function, { parserParams, compilerParams, runtimeParams } = this.params.config;
+            if ( script.contract ) {
+                parserParams = { ...parserParams, allowAwaitOutsideFunction: script.type === 'module' };
+                runtimeParams = { ...runtimeParams, async: script.type === 'module' };
+                _Function = SubscriptFunction( source, { compilerParams, parserParams, runtimeParams, } );
+                Object.defineProperty( script, 'properties', { configurable: true, value: SubscriptFunction.inspect( _Function, 'properties' ) } );
+            } else {
+                const isAsync = script.type === 'module'//meta.topLevelAwait || imports.length;
+                const _FunctionConstructor = isAsync ? Object.getPrototypeOf( async function() {} ).constructor : Function;
+                _Function = runtimeParams?.compileFunction 
+                    ? runtimeParams.compileFunction( source )
+                    : new _FunctionConstructor( source );
+                Object.defineProperty( _Function, 'originalSource', { configurable: true, value: script.textContent } );
+            }
+            // Save material function to compile cache
+            compiledScript = Object.defineProperty( script.cloneNode(), 'function', { value: _Function } );
+            script.scoped && Object.defineProperty( compiledScript, 'scoped', Object.getOwnPropertyDescriptor( script, 'scoped') );
+            script.contract && Object.defineProperty( compiledScript, 'contract', Object.getOwnPropertyDescriptor( script, 'contract') );
+            cache.set( sourceHash, compiledScript );
+        }
+        const execHash = _static.toHash( { script, compiledScript, thisContext } );
+        script.textContent = `wq.oohtml.Script.run('${ execHash }');`;
+    }
+
+    // Match import statements
+    // and detect top-level await
+    parse( source ) {
+        const [ tokens, meta ] = this.tokenize( source, ( $tokens, event, char, meta, i, isLastChar ) => {
+            
+            if ( event === 'start-enclosure' && char === '{' && !meta.openAsync?.type && meta.openEnclosures.length === meta.openAsync?.scopeId ) {
+                meta.openAsync.type = 'block';
+            } else if ( event === 'end-enclosure' && char === '}' && meta.openAsync?.type === 'block' && meta.openEnclosures.length === meta.openAsync.scopeId ) {
+                meta.openAsync = null;
+            } else if ( event === 'start-quote' && !meta.openEnclosures.length && [ 'starting', 'from' ].includes( meta.openImport ) ) {
+                meta.openImport = 'url';
+            } else if ( event === 'end-quote' && meta.openImport === 'url' ) {
+                meta.openImport = 'closing';
+            } else if ( event === 'char' ) {
+
+                if ( meta.openImport === 'closing' && (
+                    char === ';'/* explicit */ || ![ ' ', `\n` ].includes( char )/* implicit */ || isLastChar
+                ) ) {
+                    if ( char === ';' || isLastChar ) {
+                        $tokens[ 0 ] += char;
+                        $tokens.unshift( '' );
+                    } else { $tokens.unshift( char ); }
+                    meta.openImport = null;
+                    return false;
+                }
+
+                let remainder = source.substring( i - 1 );
+
+                if ( !meta.openImport && /^[\W]?import[ ]*[^\(]/.test( remainder ) ) {
+                    meta.openImport = 'starting';
+                    $tokens.unshift( '' );
+                    return 6;
+                }
+                if ( meta.openImport === 'starting' && /^[\W]?from /.test( remainder ) ) {
+                    meta.openImport = 'from';
+                    return 4;
+                }
+                if ( !meta.openAsync ) {
+                    if ( /^[\W]?async /.test( remainder ) ) {
+                        meta.openAsync = { scopeId: meta.openEnclosures.length };
+                        return 5;
+                    }
+                    if ( /^[\W]?await /.test( remainder ) ) {
+                        meta.topLevelAwait = true;
+                        return 5;
+                    }
+                }
+                if ( meta.openAsync ) {
+                    if ( !meta.openAsync.type && /.?\=\>[ ]*?\{/.test( remainder ) ) {
+                        meta.openAsync.type = 'inline-arrow';
+                    } else if ( meta.openAsync.type === 'inline-arrow' && [ `\n`, ';' ].includes( char ) && meta.openEnclosures.length === meta.openAsync.scopeId ) {
+                        meta.openAsync = null;
+                    }
+                }
+
+            }
+
+        } );
+        // Hoist all import statements
+        let imports = [], body = '', _str;
+        for ( const str of tokens.reverse() ) {
+            if ( ( _str = str.trim() ).startsWith( 'import ' ) ) {
+                imports.push( str );
+            } else if ( _str ) { body += str; }
+        }
+
+        return [ imports, body, meta ];
+    }
+
+    // Rewrite import statements
+    rewriteImportStmts( imports ) {
+        const importSpecs = [], importPromises = [];
+        imports.forEach( ( $import, i ) => {
+            $import = parseImportStmt( $import );
+            // Identify whole imports and individual imports
+            const [ wholeImport, individualImports ] = $import.items.reduce( ( [ whole, parts ], item ) => {
+                return item.id === '*' ? [ item.alias, parts ] : [ whole, parts.concat( item ) ];
+            }, [ null, [] ] );
+            if ( wholeImport ) {
+                // const main = await import("url");
+                importSpecs.push( `const ${ wholeImport } = __$imports$__[${ i }];` );
+            }
+            if ( individualImports.length ) {
+                // const { aa: bb, cc } = await import("url");
+                const individualImportsSpec = individualImports.map( item => `${ item.id }${ item.id !== item.alias ? `: ${ item.alias }` : '' }` ).join( ', ' );
+                importSpecs.push( `const { ${ individualImportsSpec } } = __$imports$__[${ i }];` );
+            }
+            importPromises.push( `import("${ $import.url }")` );
+        } );
+        return [
+            `\n\tconst __$imports$__ = await Promise.all([\n\t\t${ importPromises.join( `,\n\t\t` ) }\n\t]);`,
+            importSpecs.join( `\n\t` ),
+        ];
+    }
+
+    // Parse import statements
+    parseImportStmt( str ) {
+        const getUrl = str => {
+            let quo = /^[`'"]/.exec( str );
+            return quo && str.substring( 1, str.lastIndexOf( quo[ 0 ] ) );
+        }
+        let $import = { items: [ { id: '' } ] }, _str = str.replace( 'import', '' ).trim();
+        if ( !( $import.url = getUrl( _str ) ) ) {
+            this.tokenize( _str, ( $tokens, event, char, meta, i, isLastChar ) => {
+                if ( [ 'start-quote', 'ongoing-quote', 'end-quote', 'char' ].includes( event ) ) {
+                    if ( $import.url ) return;
+                    if ( !meta.openQuote ) {
+                        let remainder = _str.substring( i );
+                        if ( char === ',' ) {
+                            $import.items.unshift( { id: '' } );
+                            return;
+                        }
+                        if ( remainder.startsWith( ' as ' ) ) {
+                            $import.items[ 0 ].alias = '';
+                            return 3;
+                        }
+                        if ( remainder.startsWith( ' from ' ) ) {
+                            $import.url = getUrl( remainder.replace( 'from', '' ).trim() );
+                            return remainder.length;
+                        }
+                    }
+                    if ( 'alias' in $import.items[ 0 ] ) {
+                        $import.items[ 0 ].alias += char;
+                    } else {
+                        $import.items[ 0 ].id += char;
+                        if ( meta.openEnclosures.length ) {
+                            $import.items[ 0 ].enclosed = true;
+                        }
+                    }
+                }
+            } );
+        }
+        $import.items = $import.items
+            .map( item => ( {
+                id: item.id && !item.alias && !item.enclosed ? 'default' : item.id.trim(),
+                alias: item.alias ? item.alias.trim() : item.id.trim(),
+            } ) )
+            .filter( item => item.id )
+            .reverse();
+        return $import;
+    }
+
+    // Token JavaScript source
+    tokenize( source, _callback ) {
+        const lastI = source.length - 1;
+        return [ ...source ].reduce( ( [ $tokens, meta, skip ], char, i ) => {
+            
+            if ( skip ) {
+                $tokens[ 0 ] += char;
+                return [ $tokens, meta, --skip ];
+            }
+            let callbackReturn;
+
+            if ( meta.openQuote || meta.openComment ) {
+                if ( char === meta.openQuote ) {
+                    meta.openQuote = null;
+                    callbackReturn = _callback( $tokens, 'end-quote', char, meta, i, i === lastI );
+                } else if ( meta.openQuote ) {
+                    callbackReturn = _callback( $tokens, 'ongoing-quote', char, meta, i, i === lastI );
+                } else if ( meta.openComment ) {
+                    if ( ( meta.openComment === '//' && char === `\n` ) || ( meta.openComment === '/*' && $tokens[ 0 ].substr( -1 ) === '*' && char === '/' ) ) {
+                        meta.openComment = null;
+                        callbackReturn = _callback( $tokens, 'end-comment', char, meta, i, i === lastI );
+                    }
+                }
+                if ( callbackReturn !== false ) {
+                    $tokens[ 0 ] += char;
+                }
+                return [ $tokens, meta, typeof callbackReturn === 'number' ? callbackReturn : skip ];
+            }
+
+            let enclosure;
+            if ( enclosure = [ '()', '{}', '[]' ].filter( pair => char === pair[ 0 ] )[ 0 ] ) {
+                callbackReturn = _callback( $tokens, 'start-enclosure', char, meta, i, i === lastI );
+                meta.openEnclosures.unshift( enclosure );
+            } else if ( meta.openEnclosures.length && char === meta.openEnclosures[ 0 ][ 1 ] ) {
+                meta.openEnclosures.shift();
+                callbackReturn = _callback( $tokens, 'end-enclosure', char, meta, i, i === lastI );
+            } else if ( [ '"', "'", "`" ].includes( char ) ) {
+                callbackReturn = _callback( $tokens, 'start-quote', char, meta, i, i === lastI );
+                meta.openQuote = char;
+            } else if ( !meta.openComment && [ '/*', '//' ].includes( source.substr( i, 2 ) ) ) {
+                callbackReturn = _callback( $tokens, 'start-comment', char, meta, i, i === lastI );
+                meta.openComment = source.substr( i, 2 );
+            } else {
+                callbackReturn = _callback( $tokens, 'char', char, meta, i, i === lastI );
+            }
+
+            if ( callbackReturn !== false ) {
+                $tokens[ 0 ] += char;
+            }
+            return [ $tokens, meta, typeof callbackReturn === 'number' ? callbackReturn : skip ];
+
+        }, [ [ '' ], { openEnclosures: [], }, 0 ] );
+    }
+}