@webqit/oohtml 2.1.5 → 2.1.8

package/src/scoped-js/index.js

@@ -5,6 +5,7 @@
 import { resolveParams } from '@webqit/subscript/src/params.js';
 import SubscriptFunction from '@webqit/subscript/src/SubscriptFunctionLite.js';
 import Observer from '@webqit/observer';
+import Compiler from './Compiler.js';
 import wqDom from '@webqit/dom';
 
 /**
@@ -15,14 +16,17 @@ import wqDom from '@webqit/dom';
 export default function init( $params = {} ) {
 	const window = this, dom = wqDom.call( window );
     if ( !window.wq ) { window.wq = {}; }
-    window.wq.SubscriptFunction = SubscriptFunction;
+    if ( !window.wq.oohtml ) { window.wq.oohtml = {}; }
+    window.wq.oohtml.Script = { compileCache: [ new Map, new Map, ] };
+    window.wq.SubscriptFunction = $params.SubscriptFunction/* allow for injection, e.g. from test runner */ || SubscriptFunction;
+    window.wq.Observer = Observer;
     // -------
     const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
         script: { retention: 'retain', mimeType: '' },
         config: resolveParams( {
-            parserParams: { allowReturnOutsideFunction: false, allowSuperOutsideMethod: false },
-            compilerParams: { globalsNoObserve: [ 'alert' ] },
-            runtimeParams: { apiVersion: 2 },
+            parserParams: { allowReturnOutsideFunction: false, allowSuperOutsideMethod: false, ...( $params.parserParams || {} ) },
+            compilerParams: { globalsNoObserve: [ 'alert' ], ...( $params.compilerParams || {} ) },
+            runtimeParams: { apiVersion: 2, ...( $params.runtimeParams || {} ) },
         } ),
     } );
 	params.scriptSelector = ( Array.isArray( params.script.mimeType ) ? params.script.mimeType : [ params.script.mimeType ] ).reduce( ( selector, mm ) => {
@@ -38,54 +42,6 @@ export {
     Observer,
 }
 
-/**
- * Performs realtime capture of elements and builds their relationships.
- *
- * @param Object params
- *
- * @return Void
- */
-function realtime( params ) {
-	const window = this, { dom } = window.wq;
-    // ---
-    window.wq.transformCache = new Map;
-    window.wq.compileCache = [ new Map, new Map, ];
-    // ---
-    const handled = () => {};
-	dom.realtime( window.document ).observe( params.scriptSelector, record => {
-        record.entrants.forEach( script => {
-            if ( 'contract' in script ) return handled( script );
-            Object.defineProperty( script, 'contract', { value: script.hasAttribute( 'contract' ) } ); 
-            if ( 'scoped' in script ) return handled( script );
-            Object.defineProperty( script, 'scoped', { value: script.hasAttribute( 'scoped' ) } ); 
-            // ---
-            const thisContext = script.scoped ? record.target : ( script.type === 'module' ? undefined : window );
-            compile.call( this, script, thisContext, params );
-        } );
-	}, { subtree: true, timing: 'intercept', generation: 'entrants' } );
-    // ---
-    window.wq.exec = ( execHash ) => {
-        const exec = 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 execute.call( this, compiledScript, thisContext, script );
-    };
-}
-
 // ------------------
 // Script runner
 export function execute( compiledScript, thisContext, script ) {
@@ -123,273 +79,28 @@ export function execute( compiledScript, thisContext, script ) {
     return script;
 }
 
-// ------------------
-// JAVASCRIPT::[SCOPED|CONTRACT]
-export function compile( script, thisContext, params = {} ) {
-    const wq = this.wq, cache = wq.compileCache[ script.contract ? 0 : 1 ];
-    const sourceHash = 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 ] = parse( source );
-            if ( imports.length ) {
-                source = `\n\t${ rewriteImportStmts( imports ).join( `\n\t` ) }\n\t${ source }\n`;
-            }
-        }
-        // Let's obtain a material functions
-        let _Function, { parserParams, compilerParams, runtimeParams } = 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 = toHash( { script, compiledScript, thisContext } );
-    script.textContent = `wq.exec('${ execHash }');`;
-}
-
-// ------------------
-// Match import statements
-// and detect top-level await
-export function parse( source ) {
-    const [ tokens, meta ] = 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
-export function 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
-export function 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 ) ) ) {
-        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;
-                    }
-                }
-            }
+/**
+ * Performs realtime capture of elements and builds their relationships.
+ *
+ * @param Object params
+ *
+ * @return Void
+ */
+function realtime( params ) {
+	const window = this, { dom } = window.wq;
+    const compiler = new Compiler( window, params, execute ), handled = () => {};
+	dom.realtime( window.document ).observe( params.scriptSelector, record => {
+        record.entrants.forEach( script => {
+            if ( 'contract' in script ) return handled( script );
+            Object.defineProperty( script, 'contract', { value: script.hasAttribute( 'contract' ) } ); 
+            if ( 'scoped' in script ) return handled( script );
+            Object.defineProperty( script, 'scoped', { value: script.hasAttribute( 'scoped' ) } ); 
+            // ---
+            const thisContext = script.scoped ? record.target : ( script.type === 'module' ? undefined : window );
+            compiler.compile( script, thisContext );
         } );
-    }
-    $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
-export function 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 ] );
+	}, { subtree: true, timing: 'intercept', generation: 'entrants' } );
+    // ---
 }
 
-// ------------------
-// Unique ID generator
-const hashTable = new Map;
-const uniqId = () => (0|Math.random()*9e6).toString(36);
 const _await = ( value, callback ) => value instanceof Promise ? value.then( callback ) : callback( value );
-
-// ------------------
-// Hash of anything generator
-export function toHash( val ) {
-    let hash;
-    if ( !( hash = hashTable.get( val ) ) ) {
-        hash = uniqId();
-        hashTable.set( val, hash );
-    }
-    return hash;
-}
-
-// ------------------
-// Value of any hash
-export function fromHash( hash ) {
-    let val;
-    hashTable.forEach( ( _hash, _val ) => {
-        if ( _hash === hash ) val = _val;
-    } );
-    return val;
-}

package/src/scoped-js/targets.browser.js

@@ -2,13 +2,9 @@
 /**
  * @imports
  */
-import init, { Observer } from './index.js';
+import init from './index.js';
 
 /**
  * @init
  */
 init.call( window );
-
-// As globals
-if ( !self.wq ) { self.wq = {}; }
-self.wq.Observer = Observer;

package/src/state-api/index.js

@@ -13,6 +13,8 @@ import { _ } from '../util.js';
  */
 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: { state: 'state', },
     } );

package/src/state-api/targets.browser.js

@@ -2,12 +2,9 @@
 /**
  * @imports
  */
-import init, { Observer } from './index.js';
+import init from './index.js';
 
 /**
  * @init
  */
 init.call( window );
-// As globals
-if ( !window.wq ) { window.wq = {}; }
-window.wq.Observer = Observer;

package/test/index.js

@@ -6,6 +6,7 @@ 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 wqDom from '@webqit/dom';
 
 /**
@@ -14,10 +15,8 @@ import wqDom from '@webqit/dom';
  * -------
  */
 
- export { Observer };
-
+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 );
@@ -25,14 +24,12 @@ export function delay( duration, callback = undefined ) {
 }
 
 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',
@@ -41,51 +38,45 @@ export function createDocument( head = '', body = '', callback = null, ) {
             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,
+        url: 'http://localhost',
         beforeParse( window ) {
             window.testRecords = [];
             createContext( window );
-            // -----------------
             // Running advanced scripts
-            const subscriptParams = {
+            init.call( window, { ScopedJS: {
+                SubscriptFunction,
                 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 );
+                        if ( !script.textContent.trim() ) return;
                         runInContext( script.textContent, window );
                     } );
                 }, { subtree: true } );
             }
-            // -----------------
+            // Sync callback?
             if ( callback ) callback( window, window.wq.dom );
         }
     } );
-    // --------
     return instance.window;
 };
 
@@ -101,19 +92,4 @@ export function mockRemoteFetch( window, contents, delay = 1000 ) {
             }, 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 );
-    } );
 }

package/test/modules.test.js

@@ -4,7 +4,7 @@
  */
 import { expect } from 'chai';
 import Observer from '@webqit/observer';
-import { delay, createDocument, mockRemoteFetch, printDocument, _ } from './index.js';
+import { delay, createDocument, mockRemoteFetch, _ } from './index.js';
 const getQueryPath = str => str.split( '/' ).join( '/modules/' ).split( '/' );
 
 describe(`HTML Modules`, function() {

package/test/{scoped-js.test2.js → scoped-js.test.js}

@@ -3,7 +3,7 @@
  * @imports
  */
 import { expect } from 'chai';
-import { delay, createDocumentForScopedJS, Observer } from './index.js';
+import { delay, createDocumentForScopedJS } from './index.js';
 
 describe(`Test: Scoped JS`, function() {
 
@@ -50,7 +50,7 @@ describe(`Test: Scoped JS`, function() {
             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);
+            //console.log('::::::::::::', window.testRecords );
         });
 
     });

package/test/test.html

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta name="oohtml" content="script.retention=hidden" />
-        <script src="/oohtml/dist/main.js"></script>
-        <script>
-            window.extVar = 'External variable initial value.';
-            window.Observer = wq.Observer;
-        </script>
-        <template exportid="temp0">
-            <input exportid="#input" />
-            <template exportid="temp1">
-                <textarea exportid="#input" placeholder="This is to be rendered"></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" placeholder="This is server-rendered"></textarea>
-            <!--<import module="#input"></import>-->
-        </div>
-
-        <div id="div1">
-            [1]: Scoped contract script here! See the console.
-            <script type="module" scoped contract>
-                console.log( '[1]: Execution context: ' + this.tagName, this.someProp );
-                console.log( '[1]: Dependencies: ', ( await [ ...this.scripts ][ 0 ].properties ).dependencies );
-                console.log( `[1]: ${ extVar }` );
-                this.addEventListener( 'remove', e => { console.log( '[1]: Removing...' ); } );
-                setTimeout( () => { this.remove(); }, 10000 );
-            </script>
-        </div>
-
-        <div id="div2">
-            [2]: Scoped contract script here! See the console.
-            <script type="module" scoped contract>
-                console.log( '[2]: Execution context: ', this.tagName );
-                console.log( '[2]: Dependencies: ', ( await [ ...this.scripts ][ 0 ].properties ).dependencies );
-                console.log( `[2]: ${ extVar }` );
-                this.addEventListener( 'remove', e => { console.log( '[2]: Removing...' ); } );
-                setTimeout( () => { this.remove(); }, 10000 );
-            </script>
-        </div>
-
-        <script>
-            const div1 = document.querySelector( '#div1' );
-            setTimeout( () => {
-                Observer.set( globalThis, 'extVar', 'External variable updated value!' );
-                Observer.set( div1, 'someProp', 'someProp value!' );
-                setTimeout( () => {
-                    Observer.set( globalThis, 'extVar', 'External variable updated value again!' );
-                }, 6000 );
-                /*
-                extVar = 'External variable updated value!';
-                div1.scripts.forEach( script => {
-                    script.rerender( [ 'extVar' ] );
-                } );
-                */
-            }, 5000 );
-        </script>
-        
-    </body>
-</html>