@webqit/oohtml 1.10.3 → 2.0.0

package/package.json

@@ -1,76 +1,76 @@
-{
-  "name": "@webqit/oohtml",
-  "title": "CHTML",
-  "description": "A suite of new DOM features that brings language support for modern UI development paradigms: a component-based architecture, data binding, and reactivity.",
-  "keywords": [
-    "namespaced-HTML",
-    "html-modules",
-    "ui-state",
-    "html-imports",
-    "reflex",
-    "subscript",
-    "scoped-js",
-    "UI",
-    "wicg-proposal"
-  ],
-  "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "1.10.3",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/webqit/oohtml.git"
-  },
-  "bugs": {
-    "url": "https://github.com/webqit/oohtml/issues"
-  },
-  "type": "module",
-  "sideEffects": false,
-  "browser": {
-    "fs": false
-  },
-  "main": "./src/index.js",
-  "scripts": {
-    "test": "mocha --extension .test.js --exit",
-    "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/browser-entry.js html-modules=src/html-modules/browser-entry.js html-imports=src/html-imports/browser-entry.js state-api=src/state-api/browser-entry.js namespaced-html=src/namespaced-html/browser-entry.js subscript=src/subscript/browser-entry.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/browser-pie": "^0.0.17",
-    "@webqit/observer": "^1.7.5",
-    "@webqit/subscript": "^2.1.27",
-    "@webqit/util": "^0.8.7",
-    "acorn": "^8.7.0"
-  },
-  "devDependencies": {
-    "chai": "^4.3.4",
-    "coveralls": "^3.1.1",
-    "esbuild": "^0.14.43",
-    "mocha": "^9.0.2",
-    "mocha-lcov-reporter": "^1.3.0"
-  },
-  "author": "Oxford Harrison <oxharris.dev@gmail.com>",
-  "maintainers": [
-    "Oxford Harrison <oxharris.dev@gmail.com>"
-  ],
-  "contributors": [],
-  "funding": {
-    "type": "patreon",
-    "url": "https://patreon.com/ox_harris"
-  },
-  "badges": {
-    "list": [
-      "npmversion",
-      "npmdownloads"
-    ],
-    "config": {
-      "patreonUsername": "ox_harris",
-      "githubUsername": "webqit",
-      "githubRepository": "oohtml",
-      "githubSlug": "webqit/oohtml",
-      "npmPackageName": "@webqit/oohtml"
-    }
-  }
-}
+{
+  "name": "@webqit/oohtml",
+  "title": "CHTML",
+  "description": "A suite of new DOM features that brings language support for modern UI development paradigms: a component-based architecture, data binding, and reactivity.",
+  "keywords": [
+    "namespaced-HTML",
+    "html-modules",
+    "ui-state",
+    "html-imports",
+    "reflex",
+    "subscript",
+    "scoped-js",
+    "UI",
+    "wicg-proposal"
+  ],
+  "homepage": "https://webqit.io/tooling/oohtml",
+  "version": "2.0.0",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/webqit/oohtml.git"
+  },
+  "bugs": {
+    "url": "https://github.com/webqit/oohtml/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "browser": {
+    "fs": false
+  },
+  "main": "./src/index.js",
+  "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",
+    "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.0",
+    "@webqit/subscript": "^2.1.34",
+    "@webqit/util": "^0.8.9"
+  },
+  "devDependencies": {
+    "chai": "^4.3.4",
+    "coveralls": "^3.1.1",
+    "esbuild": "^0.14.43",
+    "jsdom": "^20.0.0",
+    "mocha": "^10.0.0",
+    "mocha-lcov-reporter": "^1.3.0"
+  },
+  "author": "Oxford Harrison <oxharris.dev@gmail.com>",
+  "maintainers": [
+    "Oxford Harrison <oxharris.dev@gmail.com>"
+  ],
+  "contributors": [],
+  "funding": {
+    "type": "patreon",
+    "url": "https://patreon.com/ox_harris"
+  },
+  "badges": {
+    "list": [
+      "npmversion",
+      "npmdownloads"
+    ],
+    "config": {
+      "patreonUsername": "ox_harris",
+      "githubUsername": "webqit",
+      "githubRepository": "oohtml",
+      "githubSlug": "webqit/oohtml",
+      "npmPackageName": "@webqit/oohtml"
+    }
+  }
+}

package/src/context-api/HTMLContext.js

@@ -0,0 +1,158 @@
+
+/**
+ * @imports
+ */
+import { _compare } from '../util.js';
+import HTMLContextManager from './HTMLContextManager.js';
+
+export default class HTMLContext {
+
+    /**
+     * @params
+     */
+    static get params() {
+        return {};
+    }
+
+    /**
+     * @attachTo
+     */
+    static attachTo( host, Id, multiple = false ) {
+        let instance, contextMgr = HTMLContextManager.instance( host );
+        if ( !multiple && ( instance = contextMgr.find( cx => this.matchRequest( cx.id, Id, true ) ) ) ) return instance;
+        return contextMgr.attach( new this( Id ) );
+    }
+
+    /**
+     * @detachFrom
+     */
+    static detachFrom( host, Id, multiple = false ) {
+        let instance, contextMgr = HTMLContextManager.instance( host );
+        for ( instance of contextMgr[ '#' ].contexts ) {
+            if ( !this.matchRequest( instance.id, Id, true ) || ( typeof multiple === 'function' && !multiple( instance ) ) ) continue;
+            contextMgr.detach( instance );
+            if ( typeof multiple !== 'function' && !multiple ) return instance;
+        }
+    }
+ 
+    /**
+     * @createId
+     */
+    static createId( host, fields = {} ) {
+        const id = { type: 'HTMLModules', ...fields };
+        if ( id.name ) return id;
+        if ( host.getAttribute && !( id.name = ( host.getAttribute( this.params.context.attr.contextname ) || '' ).trim() ) ) {
+            delete id.name;
+        } else if ( !host.ownerDocument ) {
+            id.name = 'root';
+        }
+        return id;
+    }
+ 
+    /**
+     * @createRequest
+     */
+    static createRequest( fields = {} ) {
+        return { ...fields };
+    }
+
+    /**
+     * @matchesRequest
+     */
+    static matchRequest( id, request, strict = false ) {
+        if ( strict ) return _compare( id, request, 1, true );
+        return request.type === id.type && !request.name || request.name === id.name;
+    }
+
+    /**
+     * @constructor
+     */
+    constructor( id ) {
+        Object.defineProperty( this, 'id', { get: () => id } );
+        Object.defineProperty( this, 'subscriptions', { value: new Set } );
+    }
+
+    /**
+     * @length()
+     */
+    get length() {
+        this.subscriptions.size;
+    }
+
+    /**
+     * @handle()
+     */
+    handle( event ) {}
+
+    /**
+     * @subscribe()
+     */
+    subscribe( event ) {
+        this.subscriptions.add( event );
+        if ( !event.request.signal ) return;
+        event.request.signal.addEventListener( 'abort', () => {
+            this.unsubscribe( event );
+        } );
+    }
+
+    /**
+     * @unsubscribe()
+     */
+    unsubscribe( event ) {
+        this.subscriptions.delete( event );
+        event.request.controller?.abort();
+    }
+
+    /**
+     * @handleEvent()
+     */
+    handleEvent( event ) {
+        if ( this.disposed || ( event.target === this.host && !event.request?.selfScoped )
+        || !event.request || typeof event.callback !== 'function' || !this.constructor.matchRequest( this.id, event.request ) ) return;
+        event.stopPropagation();
+        if ( event.type === 'contextclaim' ) {
+            const claims = new Set;
+            this.subscriptions.forEach( subscriptionEvent => {
+                if ( !event.target.contains( subscriptionEvent.request.selfScoped ? subscriptionEvent.target : subscriptionEvent.target.parentNode ) 
+                || !this.constructor.matchRequest( event.request/*provider ID*/, subscriptionEvent.request/*request ID*/ ) ) return;
+                this.subscriptions.delete( subscriptionEvent );
+                claims.add( subscriptionEvent );
+            } );
+            event.respondWith( claims );
+        } else if ( event.type === 'contextrequest' ) {
+            if ( event.request.live ) { this.subscribe( event ); }
+            this.handle( event );
+        }
+    }
+
+    /**
+     * @initialize()
+     */
+    initialize( host ) {
+        this.host = host;
+        this.disposed = false;
+        host.addEventListener( 'contextrequest', this );
+        host.addEventListener( 'contextclaim', this );
+        HTMLContextManager.instance( host ).ask( this.id, claims => claims.forEach( subscriptionEvent => {
+            this.subscribe( subscriptionEvent );
+            this.handle( subscriptionEvent );
+        } ), { type: 'contextclaim' } );
+        return this;
+    }
+     
+    /**
+     * @dispose()
+     */
+    dispose( host ) {
+        this.disposed = true;
+        host.removeEventListener( 'contextrequest', this );
+        host.removeEventListener( 'contextclaim', this );
+        this.subscriptions.forEach( subscriptionEvent => {
+            this.unsubscribe( subscriptionEvent );
+            const { target, request, callback, params } = subscriptionEvent;
+            HTMLContextManager.instance( target ).ask( request, callback, params );
+        } );
+        return this;
+    }
+
+}

package/src/context-api/HTMLContextManager.js

@@ -0,0 +1,77 @@
+
+/**
+ * @imports
+ */
+import _ContextRequestEvent from './_ContextRequestEvent.js';
+import { _ } from '../util.js';
+
+export default class HTMLContextManager {
+
+    /**
+     * @instance
+     */
+    static instance( host ) {
+        return _( host ).get( 'contextsmanager::instance' ) || new this( host );;
+    }
+
+    /**
+     * @constructor
+     */
+    constructor( host ) {
+        _( host ).get( `contextsmanager::instance` )?.dispose();
+        _( host ).set( `contextsmanager::instance`, this );
+        const priv = { host, contexts: new Set };
+        Object.defineProperty( this, '#', { get: () => priv } );
+        const ContextRequestEvent = _ContextRequestEvent.call( host.ownerDocument?.defaultView || host.defaultView );
+        Object.defineProperty( this, 'ContextRequestEvent', { get: () => ContextRequestEvent } );
+        this[ Symbol.iterator ] = function*() {
+            const it = priv.contexts[ Symbol.iterator ]();
+            yield it.next().value;
+        }
+    }
+
+    /**
+     * @length()
+     */
+    get length() {
+        this[ '#' ].contexts.size;
+    }
+
+    /**
+     * @find()
+     */
+    find( callback ) {
+        return [ ...this[ '#' ].contexts ].find( callback );
+    }
+
+    /**
+     * @attach()
+     */
+    attach( context ) {
+        this[ '#' ].contexts.add( context );
+        context.initialize( this[ '#' ].host );
+    }
+
+    /**
+     * @detach()
+     */
+    detach( context ) {
+        context.dispose( this[ '#' ].host );
+        this[ '#' ].contexts.delete( context );
+    }
+
+    /**
+     * @ask()
+     */
+    ask( request, callback, params = {} ) {
+        return this[ '#' ].host.dispatchEvent(
+            new this.ContextRequestEvent( request, callback, { bubbles: true, ...params } )
+        );
+    }
+
+    /**
+     * @dispose()
+     */
+    dispose() {}
+
+}

package/src/context-api/_ContextRequestEvent.js

@@ -0,0 +1,26 @@
+
+export default function() {
+    const window = this;
+    return class ContextRequestEvent extends window.Event {
+
+        /**
+         * @constructor
+         */
+        constructor( request, callback, { type = 'contextrequest', ...params } = {} ) {
+            super( type, params );
+            Object.defineProperty( this, 'request', { get: () => request } );
+            Object.defineProperty( this, 'callback', { get: () => callback } );
+        }
+
+        /**
+         * @respondWith
+         */
+        respondWith( response, ...rest ) {
+            if ( this.request.diff ) {
+                if ( 'previousValue' in this && this.previousValue === response ) return;
+                this.previousValue = response;
+            }
+            return this.callback( response, ...rest );
+        }
+    };
+}

package/src/context-api/index.js

@@ -0,0 +1,53 @@
+
+/**
+ * @imports
+ */
+import wqDom from '@webqit/dom';
+import HTMLContextManager from './HTMLContextManager.js';
+import HTMLContext from './HTMLContext.js';
+
+/**
+ * Initializes HTML Modules.
+ * 
+ * @param $params  Object
+ *
+ * @return Void
+ */
+export default function init( $params = { }) {
+    const window = this, dom = wqDom.call( window );
+    // -------
+    const params = dom.meta( 'oohtml' ).copyWithDefaults( $params, {
+        api: { context: 'context', },
+    } );
+    // -------
+    exposeModulesObjects.call( this, params );
+}
+
+/**
+ * Exposes HTML Modules with native APIs.
+ *
+ * @param Object                    params
+ *
+ * @return Void
+ */
+function exposeModulesObjects( params ) {
+    const window = this;
+    // Assertions
+    if ( params.api.context in window.document ) { throw new Error( `document already has a "${ params.api.context }" property!` ); }
+    if ( params.api.context in window.HTMLElement.prototype ) { throw new Error( `The "HTMLElement" class already has a "${ params.api.context }" property!` ); }
+    // Definitions
+    Object.defineProperty( window.document, params.api.context, { get: function() {
+        return HTMLContextManager.instance( window.document );
+    } } );
+    Object.defineProperty( window.HTMLElement.prototype, params.api.context, { get: function() {
+        return HTMLContextManager.instance( this );
+    } } );
+}
+
+/**
+ * @exports
+ */
+export {
+    HTMLContextManager,
+    HTMLContext,
+}

package/src/{namespaced-html/browser-entry.js → context-api/targets.browser.js}

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