@webqit/oohtml 2.1.29 → 2.1.31

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "2.1.29",
+  "version": "2.1.31",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -32,7 +32,7 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/targets.browser.js bindings-api=src/bindings-api/targets.browser.js context-api=src/context-api/targets.browser.js namespace-api=src/namespace-api/targets.browser.js html-modules=src/html-modules/targets.browser.js html-imports=src/html-imports/targets.browser.js scoped-js=src/scoped-js/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
+    "build": "esbuild main=src/targets.browser.js bindings-api=src/bindings-api/targets.browser.js context-api=src/context-api/targets.browser.js namespace-api=src/namespace-api/targets.browser.js html-modules=src/html-modules/targets.browser.js html-imports=src/html-imports/targets.browser.js scoped-js=src/scoped-js/targets.browser.js scoped-css=src/scoped-css/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
     "preversion": "npm run test && npm run build && git add -A dist",
     "postversion": "npm publish --tag next",
     "postpublish": "git push && git push --tags"

package/src/index.js

@@ -8,6 +8,7 @@ import ContextAPI from './context-api/index.js';
 import NamespaceAPI from './namespace-api/index.js';
 import HTMLModules from './html-modules/index.js';
 import HTMLImports from './html-imports/index.js';
+import ScopedCSS from './scoped-css/index.js';
 import ScopedJS from './scoped-js/index.js';
 
 /**
@@ -21,6 +22,7 @@ export default function init( configs = {} ) {
     NamespaceAPI.call( this, ( configs.NAMESPACE_API || {} ) );
     HTMLModules.call( this, ( configs.HTML_MODULES || {} ) );
     HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) );
+    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) );
     ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
     // --------------
 }

package/src/namespace-api/index.js

@@ -12,7 +12,7 @@ import { _, _init } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'namespace-api', $config, {
-		attr: { namespace: 'namespace',  id: ':id', },
+		attr: { namespace: 'namespace',  id: 'id', },
         api: { namespace: 'namespace', },
 		staticsensitivity: true,
 		eagermode: true,

package/src/scoped-css/index.js

@@ -0,0 +1,45 @@
+
+/**
+ * @imports
+ */
+import { _init } from '../util.js';
+
+/**
+ * @init
+ * 
+ * @param Object $config
+ */
+export default function init( { advanced = {}, ...$config } ) {
+    const { config, window } = _init.call( this, 'scoped-css', $config, {
+        style: { retention: 'retain', mimeType: '' },
+    } );
+	config.styleSelector = ( Array.isArray( config.style.mimeType ) ? config.style.mimeType : [ config.style.mimeType ] ).reduce( ( selector, mm ) => {
+        const qualifier = mm ? `[type=${ window.CSS.escape( mm ) }]` : '';
+        return selector.concat( `style${ qualifier }[scoped]` );
+    }, [] ).join( ',' );
+    realtime.call( window, config );
+}
+
+/**
+ * Performs realtime capture of elements and builds their relationships.
+ *
+ * @param Object config
+ *
+ * @return Void
+ */
+function realtime( config ) {
+	const window = this, { realdom } = window.webqit;
+    if ( !window.HTMLScriptElement.supports ) { window.HTMLScriptElement.supports = () => false; }
+	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.styleSelector, record => {
+        record.entrants.forEach( style => {
+            if ( 'scoped' in style ) return handled( style );
+            Object.defineProperty( style, 'scoped', { value: style.hasAttribute( 'scoped' ) } );
+            const uuid = `scoped${ uniqId() }`;
+            style.setAttribute( 'ref', uuid );
+            style.textContent = `@scope from (:has(> style[ref="${ uuid }"])) {\n${ style.textContent }\n}`;
+        } );
+	}, { live: true, timing: 'intercept', generation: 'entrants' } );
+    // ---
+}
+
+const uniqId = () => (0|Math.random()*9e6).toString(36);

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

@@ -0,0 +1,10 @@
+
+/**
+ * @imports
+ */
+import init from './index.js';
+
+/**
+ * @init
+ */
+init.call( window );

package/src/scoped-js/index.js

@@ -52,7 +52,7 @@ export function execute( compiledScript, thisContext, script ) {
         Object.defineProperty( script, 'rerender', { value: ( ...args ) => _await( returnValue, ( [ , rerender ] ) => rerender( ...args ) ) } );
         _await( script.properties, properties => {
             properties.processes = properties.dependencies.map( path => {
-                const _env = { 'this': thisContext, 'globalThis': globalThis };
+                const _env = { 'this': thisContext, 'globalThis': globalThis, 'window': globalThis.window, 'self': globalThis.self };
                 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 ( _isTypeObject( _env[ path[ 0 ] ] ) ) {

package/test/namespace-api.test.js

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

package/test/scoped-css.test.js

@@ -0,0 +1,32 @@
+
+/**
+ * @imports
+ */
+import { expect } from 'chai';
+import { createDocument, delay } from './index.js';
+
+describe(`Test: Scoped CSS`, function() {
+
+    describe(`Styles`, function() {
+
+        it(`Should do basic rewrite`, async function() {
+            const head = '', body = `
+            <div>
+              <h1>Hello World!</h1>
+              <style scoped>
+                h1 {
+                    color: red;
+                }
+              </style>
+            </div>`;
+
+            const window = createDocument( head, body );
+            await delay( 160 ); // Takes time to dynamically load Subscript compiler
+            const styleElement = window.document.querySelector( 'style' );
+
+            expect( styleElement.textContent.substring( 0, 13 ) ).to.eq( '@scope from (' );
+        });
+
+    });
+
+});