@webqit/oohtml 2.0.0 → 2.0.2

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -39,8 +39,8 @@
   },
   "dependencies": {
     "@webqit/dom": "^2.0.0",
-    "@webqit/observer": "^2.0.0",
-    "@webqit/subscript": "^2.1.34",
+    "@webqit/observer": "^2.0.1",
+    "@webqit/subscript": "^2.1.35",
     "@webqit/util": "^0.8.9"
   },
   "devDependencies": {

package/src/html-modules/index.js

@@ -35,6 +35,8 @@ export default function init( $params = {} ) {
     realtime.call( this, params );
 }
 
+export { Observer }
+
 /**
  * Returns the "exports" object associated with the given node.
  *

package/src/html-modules/targets.browser.js

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

package/src/namespaced-html/index.js

@@ -15,7 +15,7 @@ export default function init( $params = {} ) {
 	const window = this, dom = wqDom.call( window );
     // -------
     const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
-		attr: { namespace: 'namespace',  id: 'data-id', },
+		attr: { namespace: 'namespace',  id: ':id', },
         api: { namespace: 'namespace', },
 		staticsensitivity: true,
 		eagermode: true,
@@ -27,6 +27,8 @@ export default function init( $params = {} ) {
     realtime.call( this, params );
 }
 
+export { Observer }
+
 /**
  * Exposes Namespaced HTML with native APIs.
  *

package/src/namespaced-html/targets.browser.js

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

package/src/scoped-js/index.js

@@ -2,7 +2,9 @@
 /**
  * @imports
  */
-import SubscriptFunctionLite from '@webqit/subscript/src/SubscriptFunctionLite.js';
+import { parserParams, compilerParams, runtimeParams } from '@webqit/subscript/src/params.js';
+import SubscriptFunction from '@webqit/subscript/src/SubscriptFunctionLite.js';
+import Observer from '@webqit/observer';
 import wqDom from '@webqit/dom';
 
 /**
@@ -14,10 +16,12 @@ export default function init( $params = {} ) {
 	const window = this, dom = wqDom.call( window );
     // -------
     const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
-        retention: 'retain',
-        mimeType: '',
+        script: { retention: 'retain', mimeType: '' },
+        parserParams: { ...parserParams, allowReturnOutsideFunction: false, allowSuperOutsideMethod: false, },
+        compilerParams: { ...compilerParams, globalsNoObserve: [ ...compilerParams.globalsNoObserve, 'alert' ] },
+        runtimeParams: { ...runtimeParams, apiVersion: 2, },
     } );
-	params.scriptSelector = ( Array.isArray( params.mimeType ) ? params.mimeType : [ params.mimeType ] ).reduce( ( selector, mm ) => {
+	params.scriptSelector = ( Array.isArray( params.script.mimeType ) ? params.script.mimeType : [ params.script.mimeType ] ).reduce( ( selector, mm ) => {
         const qualifier = mm ? `[type=${ window.CSS.escape( mm ) }]` : '';
         return selector.concat( `script${ qualifier }[scoped],script${ qualifier }[contract]` );
     }, [] ).join( ',' );
@@ -25,6 +29,8 @@ export default function init( $params = {} ) {
     realtime.call( this, params );
 }
 
+export { Observer }
+
 /**
  * Performs realtime capture of elements and builds their relationships.
  *
@@ -59,12 +65,12 @@ function realtime( params ) {
             if ( !thisContext.scripts ) { Object.defineProperty( thisContext, 'scripts', { value: new Set } ); }
             thisContext.scripts.add( script );
         }
-        switch ( params.retention ) {
+        switch ( params.script.retention ) {
             case 'dispose':
                 script.remove();
                 break;
             case 'hidden':
-                script.textContent = `"hidden"`;
+                script.textContent = `"source hidden"`;
                 break;
             default:
                 script.textContent = compiledScript.function.originalSource;
@@ -79,22 +85,30 @@ export function execute( compiledScript, thisContext, script ) {
     if ( !compiledScript.function ) throw new Error( `Input script must already be compiled!` );
     // Execute...
     const returnValue = compiledScript.function.call( thisContext );
-    if ( compiledScript.contract ) {
+    if ( script.contract ) {
+        // Rerending processes,,,
         Object.defineProperty( script, 'rerender', { value: ( ...args ) => _await( returnValue, ( [ , rerender ] ) => rerender( ...args ) ) } );
+        _await( script.properties, properties => {
+            const getPaths = ( base, record_s ) => ( Array.isArray( record_s ) ? record_s : [ record_s ] ).map( record => [ ...base, ...( record.path || [ record.key ] ) ] );
+            properties.processes = properties.dependencies.map( path => {
+                if ( path[ 0 ] === 'this' ) {
+                    return Observer.deep( thisContext, path.slice( 1 ), Observer.observe, record_s => {
+                        script.rerender( ...getPaths( [ 'this' ], record_s ) );
+                    } );
+                }
+                return Observer.deep( globalThis, path, Observer.observe, record_s => {
+                    script.rerender( ...getPaths( [], record_s ) );
+                } );
+            } );
+        } );
     }
-    // Observe,,,
     const window = this, { dom } = window.wq;
-    if ( !( thisContext instanceof window.EventTarget ) ) return returnValue;
-    let changeHandler;
-    if ( script.contract ) {
-        changeHandler = e => { script.rerender( ( e.detail || { paths: [] } ).paths ); };
-        thisContext.addEventListener( 'namespacechange', changeHandler );
-        thisContext.addEventListener( 'statechange', changeHandler );
-    }
     dom.realtime( window.document ).observe( thisContext, () => {
         if ( script.contract ) {
-            thisContext.removeEventListener( 'namespacechange', changeHandler );
-            thisContext.removeEventListener( 'statechange', changeHandler );
+            // Rerending processes,,,
+            _await( script.properties, properties => {
+                properties.processes.forEach( process => process.abort() );
+            } );
         }
         thisContext.dispatchEvent( new window.CustomEvent( 'remove' ) );
         thisContext.scripts.delete( script );
@@ -124,18 +138,11 @@ export function compile( script, thisContext, params = {} ) {
         // Let's obtain a material functions
         let _Function;
         if ( script.contract ) {
-            const parserParams = {
-                ...( params.parserParams || {} ),
-                allowReturnOutsideFunction: false,
-                allowAwaitOutsideFunction: script.type === 'module',
-                allowSuperOutsideMethod: false,
-            }
-            const runtimeParams = {
-                ...( params.runtimeParams || {} ),
-                async: script.type === 'module',
-                apiVersion: 2,
-            };
-            _Function = SubscriptFunctionLite( source, { ...params, parserParams, runtimeParams, } );
+            let { parserParams, compilerParams, runtimeParams } = params;
+            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;

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

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

package/src/state-api/index.js

@@ -19,6 +19,8 @@ export default function init( $params = {} ) {
     exposeAPIs.call( this, params );
 }
 
+export { Observer }
+
 /**
  * @Exports
  * 

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

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

package/src/targets.browser.js

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

package/test/namespaced-html.test.js

@@ -11,10 +11,10 @@ describe(`Namespaced HTML`, function() {
     describe( `Basic...`, function() {
         
         const head = `
-        <meta name="oohtml" content="attr.id=data-id" />`;
+        <meta name="oohtml" content="attr.id=:id" />`;
         const body = `
-        <div data-id="main" namespace>
-            <div data-id="child"></div>
+        <div :id="main" namespace>
+            <div :id="child"></div>
         </div>`;
         const { document } = createDocument( head, body );
 
@@ -29,7 +29,7 @@ describe(`Namespaced HTML`, function() {
                 idReceived = records[ 0 ].key;
             } );
             const item = document.createElement( 'div' );
-            item.setAttribute( 'data-id', 'some-id' );
+            item.setAttribute( ':id', 'some-id' );
             document.body.appendChild( item );
             expect( idReceived ).to.eq( 'some-id' );
         } );

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

@@ -42,6 +42,7 @@ describe(`Test: Scoped JS`, function() {
             <h1>Hello World!</h1>
             <script scoped contract>
                 testRecords.push( this );
+                console.log('-------scoped JS here.');
             </script>`;
 
             const window = createDocumentForScopedJS( head, body );

package/test/test.html

@@ -1,10 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <meta name="subscript-compiler-url" content="http://127.0.0.1:5500/subscript/dist/compiler.js" />
-        <script src="/oohtml/dist/main.js"></script>
+        <meta name="oohtml" content="script.retention=hidden" />
+        <script src="https://unpkg.com/@webqit/oohtml/dist/main.js"></script>
         <script>
             window.extVar = 'External variable initial value.';
+            window.Observer = wq.Observer;
         </script>
         <template exportid="temp0">
             <input exportid="input" />
@@ -27,41 +28,42 @@
             <!--<import module="#input"></import>-->
         </div>
 
-        <div id="diiiiv">
-            DIV
-            <script scoped contract>
-                console.log( 'Execution context: ' + this.tagName );
-                console.log( extVar );
-                this.addEventListener( 'remove', e => {
-                    console.log('removing...');
-                } );
-                setTimeout( () => {
-                    this.remove();
-                }, 10000 );
+        <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="diiiiv2">
-            DIV
-            <script scoped contract>
-                console.log( 'Execution context: ' + this.tagName );
-                console.log( extVar );
-                this.addEventListener( 'beforeremove', e => {
-                    console.log('removing...');
-                } );
-                setTimeout( () => {
-                    this.remove();
-                }, 10000 );
+        <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 diiiiv = document.querySelector( '#diiiiv' );
+            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!';
-                diiiiv.scripts.forEach( script => {
+                div1.scripts.forEach( script => {
                     script.rerender( [ 'extVar' ] );
                 } );
+                */
             }, 5000 );
         </script>