@webqit/oohtml 3.2.0 → 4.0.1

package/package.json

@@ -14,7 +14,7 @@
     "wicg-proposal"
   ],
   "homepage": "https://webqit.io/tooling/oohtml",
-  "version": "3.2.0",
+  "version": "4.0.1",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -29,14 +29,14 @@
   "scripts": {
     "test": "mocha --extension .test.js --exit",
     "test:coverage": "c8 --reporter=text-lcov npm run test | coveralls",
-    "build": "esbuild main=src/api.global.js main.lite=src/api.global.lite.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js namespaced-html=src/namespaced-html/targets.browser.js html-imports=src/html-imports/targets.browser.js data-binding=src/data-binding/targets.browser.js scoped-css=src/scoped-css/targets.browser.js scoped-js=src/scoped-js/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
-    "preversion": "npm run build && git add -A dist",
+    "build": "esbuild main=src/index.js main.lite=src/index.lite.js context-api=src/context-api/targets.browser.js bindings-api=src/bindings-api/targets.browser.js namespaced-html=src/namespaced-html/targets.browser.js html-imports=src/html-imports/targets.browser.js data-binding=src/data-binding/targets.browser.js scoped-css=src/scoped-css/targets.browser.js scoped-js=src/scoped-js/targets.browser.js --bundle --minify --sourcemap --outdir=dist",
+    "preversion": "npm test && npm run build && git add -A dist",
     "postversion": "npm publish",
     "postpublish": "git push && git push --tags"
   },
   "dependencies": {
-    "@webqit/quantum-js": "^4.2.11",
-    "@webqit/realdom": "^2.1.22",
+    "@webqit/quantum-js": "^4.5.0",
+    "@webqit/realdom": "^2.1.23",
     "@webqit/util": "^0.8.11"
   },
   "devDependencies": {

package/src/data-binding/index.js

@@ -13,11 +13,11 @@ import { _, _init, _splitOuter } from '../util.js';
  */
 export default function init( $config = {} ) {
     const { config, window } = _init.call( this, 'data-binding', $config, {
-        attr: { expr: 'expr', itemIndex: 'data-key' },
+        attr: { render: 'render', itemIndex: 'data-key' },
         tokens: { nodeType: 'processing-instruction', tagStart: '?{', tagEnd: '}?', stateStart: '; [=', stateEnd: ']' },
     } );
     ( { CONTEXT_API: config.CONTEXT_API, BINDINGS_API: config.BINDINGS_API, HTML_IMPORTS: config.HTML_IMPORTS } = window.webqit.oohtml.configs );
-    config.attrSelector = `[${ window.CSS.escape( config.attr.expr ) }]`;
+    config.attrSelector = `[${ window.CSS.escape( config.attr.render ) }]`;
     const discreteBindingsMatch = ( start, end ) => {
         const starting = `starts-with(., "${ start }")`;
         const ending = `substring(., string-length(.) - string-length("${ end }") + 1) = "${ end }"`;
@@ -90,7 +90,7 @@ function cleanup( ...entries ) {
 }
 
 async function mountDiscreteBindings( config, ...entries ) {
-    const window = this, { webqit: { QuantumAsyncFunction } } = window;
+    const window = this;
     const patternMatch = str => {
         const tagStart = config.tokens.tagStart.split( '' ).map( x => `\\${ x }` ).join( '' );
         const tagEnd = config.tokens.tagEnd.split( '' ).map( x => `\\${ x }` ).join( '' );
@@ -144,7 +144,7 @@ function compileDiscreteBindings( config, str ) {
 
 async function mountInlineBindings( config, ...entries ) {
     for ( const node of entries ) {
-        const compiled = compileInlineBindings( config, node.getAttribute( config.attr.expr ) );
+        const compiled = compileInlineBindings( config, node.getAttribute( config.attr.render ) );
         const { scope, bindings } = createDynamicScope.call( this, config, node );
         const signals = [];
         Object.defineProperty( node, '$oohtml_internal_databinding_signals', { value: signals, configurable: true } );

package/src/index.js

@@ -1,28 +1,10 @@
-
 /**
  * @imports
  */
-import NamespacedHTML from './namespaced-html/index.js';
-import ScopedCSS from './scoped-css/index.js';
-import ScopedJS from './scoped-js/index.js';
-import ContextAPI from './context-api/index.js';
-import BindingsAPI from './bindings-api/index.js';
-import HTMLImports from './html-imports/index.js';
-import DataBinding from './data-binding/index.js';
+import * as QuantumJS from `@webqit/quantum-js`;
+import init from './init.js';
 
 /**
  * @init
  */
-export default function init( QuantumJS, configs = {} ) {
-    if ( !this.webqit ) { this.webqit = {}; }
-    Object.assign( this.webqit, QuantumJS );
-    // --------------
-    ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
-    BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) ); // Depends on ContextAPI
-    NamespacedHTML.call( this, ( configs.NAMESPACED_HTML || {} ) ); // Depends on ContextAPI
-    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) ); // Depends on ContextAPI
-    DataBinding.call( this, ( configs.DATA_BINDING || {} ) ); // Depends on ContextAPI, BindingsAPI, HTMLImports
-    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) ); // Depends on NamespacedHTML
-    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
-    // --------------
-}
+init.call( window, QuantumJS );

package/src/{api.global.lite.js → index.lite.js}

@@ -3,7 +3,7 @@
  * @imports
  */
 import * as QuantumJS from `@webqit/quantum-js/lite`;
-import init from './index.js';
+import init from './init.js';
 
 /**
  * @init

package/src/init.js

@@ -0,0 +1,28 @@
+
+/**
+ * @imports
+ */
+import NamespacedHTML from './namespaced-html/index.js';
+import ScopedCSS from './scoped-css/index.js';
+import ScopedJS from './scoped-js/index.js';
+import ContextAPI from './context-api/index.js';
+import BindingsAPI from './bindings-api/index.js';
+import HTMLImports from './html-imports/index.js';
+import DataBinding from './data-binding/index.js';
+
+/**
+ * @init
+ */
+export default function init( QuantumJS, configs = {} ) {
+    if ( !this.webqit ) { this.webqit = {}; }
+    Object.assign( this.webqit, QuantumJS );
+    // --------------
+    ContextAPI.call( this, ( configs.CONTEXT_API || {} ) );
+    BindingsAPI.call( this, ( configs.BINDINGS_API || {} ) ); // Depends on ContextAPI
+    NamespacedHTML.call( this, ( configs.NAMESPACED_HTML || {} ) ); // Depends on ContextAPI
+    HTMLImports.call( this, ( configs.HTML_IMPORTS || {} ) ); // Depends on ContextAPI
+    DataBinding.call( this, ( configs.DATA_BINDING || {} ) ); // Depends on ContextAPI, BindingsAPI, HTMLImports
+    ScopedCSS.call( this, ( configs.SCOPED_CSS || {} ) ); // Depends on NamespacedHTML
+    ScopedJS.call( this, ( configs.SCOPED_JS || {} ) );
+    // --------------
+}

package/src/namespaced-html/index.js

@@ -3,7 +3,7 @@
  * @imports
  */
 import DOMNamingContext from './DOMNamingContext.js';
-import { _, _init, _splitOuter, _fromHash, _toHash } from '../util.js';
+import { _, _init, _splitOuter, _fromHash, _toHash, getInternalAttrInteraction, internalAttrInteraction } from '../util.js';
 
 /**
  * @init
@@ -15,52 +15,91 @@ export default function init( $config = {} ) {
 		attr: { namespace: 'namespace', lid: 'id', },
 		api: { namespace: 'namespace', },
 		tokens: { lidrefPrefix: '~', lidrefSeparator: ':' },
-		target: { attr: ':target', event: ':target', scrolling: true },
+		target: { className: ':target', eventName: ':target', scrolling: true },
     } );
 	config.lidSelector = `[${ window.CSS.escape( config.attr.lid ) }]`;
 	config.namespaceSelector = `[${ window.CSS.escape( config.attr.namespace ) }]`;
+	config.documentNamespaceUUID = getNamespaceUUID( getOwnNamespaceObject.call( window, window.document ) );
     window.webqit.DOMNamingContext = DOMNamingContext;
     exposeAPIs.call( window, config );
     realtime.call( window, config );
 }
 
+/**
+ * @init
+ * 
+ * @param Object config
+ * 
+ * @return String
+ */
+function lidUtil( config ) {
+	const { lidrefPrefix, lidrefSeparator, } = config.tokens;
+	return {
+		escape( str, mode = 1 ) { return [ ...str ].map( x => !/\w/.test( x ) ? ( mode === 2 ? `\\\\${ x }` : `\\${ x }` ) : x ).join( '' ); },
+		lidrefPrefix( escapeMode = 0 ) { return escapeMode ? this.escape( lidrefPrefix, escapeMode ) : lidrefPrefix; },
+		lidrefSeparator( escapeMode = 0 ) { return escapeMode ? this.escape( lidrefSeparator, escapeMode ) : lidrefSeparator; },
+		isUuid( str, escapeMode = 0 ) { return str.startsWith( this.lidrefPrefix( escapeMode ) ) && str.includes( this.lidrefSeparator( escapeMode ) ); },
+		isLidref( str, escapeMode = 0 ) { return str.startsWith( this.lidrefPrefix( escapeMode ) ) && !str.includes( this.lidrefSeparator( escapeMode ) ); },
+		toUuid( hash, lid, escapeMode = 0 ) { return hash === config.documentNamespaceUUID ? lid : `${ this.lidrefPrefix( escapeMode ) }${ hash }${ this.lidrefSeparator( escapeMode ) }${ lid }`; },
+		uuidToId( str, escapeMode = 0 ) { return this.isUuid( str ) ? str.split( this.lidrefSeparator( escapeMode ) )[ 1 ] : str; },
+		uuidToLidref( str, escapeMode = 0 ) { return this.isUuid( str ) ? `${ this.lidrefPrefix( escapeMode ) }${ str.split( this.lidrefSeparator( escapeMode ) )[ 1 ] }` : str; },
+	}
+}
+
 /**
  * @rewriteSelector
  * 
  * @param String selectorText
+ * @param String namespaceUUID
  * @param String scopeSelector
- * @param Bool isCssSelector
+ * @param Bool escapeMode
+ * 
+ * @return String
  */
-export function rewriteSelector( selectorText, scopeSelector = null, isCssSelector = false ) {
+export function rewriteSelector( selectorText, namespaceUUID, scopeSelector = null, escapeMode = 0 ) {
 	const window = this, { webqit: { oohtml: { configs: { NAMESPACED_HTML: config } } } } = window;
-	const { lidrefPrefix, lidrefSeparator } = config.tokens;
+	const $lidUtil = lidUtil( config );
 	// Match :scope and relative ID selector
-	const regex = new RegExp( `${ scopeSelector ? `:scope|` : '' }#${ [ ...lidrefPrefix ].map( x => !/\w/.test( x ) ? ( !isCssSelector ? `\\${ x }` : `\\\\${ x }` ) : x ).join( '' ) }([\\w-]|\\\\.)+`, 'g' );
+	const regex = new RegExp( `${ scopeSelector ? `:scope|` : '' }#(${ $lidUtil.lidrefPrefix( escapeMode + 1 ) })?([\\w]+${ $lidUtil.lidrefSeparator( escapeMode + 1 ) })?((?:[\\w-]|\\\\.)+)`, 'g' );
 	// Parse potentially combined selectors individually and categorise into categories per whether they have :scope or not
 	const [ cat1, cat2 ] = _splitOuter( selectorText, ',' ).reduce( ( [ cat1, cat2 ], selector ) => {
 		// The deal: match and replace
 		let quotesMatch, hadScopeSelector;
-		selector = selector.replace( regex, ( match, unused/**/, index ) => {
+		selector = selector.replace( regex, ( match, lidrefPrefixMatch, lidrefSeparatorMatch, id, index ) => {
 			if ( !quotesMatch ) { // Lazy: stuff
 				// Match strings between quotes (single or double) and use that qualify matches above
 				// The string: String.raw`She said, "Hello, John. I\"m your friend." or "you're he're" 'f\'"j\'"f'jfjf`;
 				// Should yield: `"Hello, John. I\\"m your friend."`, `"you're he're"`, `'f\\'"j\\'"f'`
 				quotesMatch = [ ...selector.matchAll( /(["'])(?:(?=(\\?))\2.)*?\1/g ) ];
 			}
+			if ( quotesMatch[ 0 ] )
 			// Qualify match
-			if ( quotesMatch.some( q => index > q.index && index + match.length < q.index + match.length ) ) return match;
+			if ( quotesMatch.some( q => index > q.index && index + match.length < q.index + q[ 0 ].length ) ) return match;
 			// Replace :scope
 			if ( match === ':scope' ) {
 				hadScopeSelector = true;
 				return scopeSelector;
 			}
-			// Replace relative ID selector
-			const lidref = match.replace( `#${ !isCssSelector ? lidrefPrefix : [ ...lidrefPrefix ].map( x => !/\w/.test( x ) ? `\\${ x }` : x ).join( '' ) }`, '' );
+			const isLidref = lidrefPrefixMatch && !lidrefSeparatorMatch;
+			const isUuid = lidrefPrefixMatch && lidrefSeparatorMatch;			
+			if ( isUuid ) {
+				return `#${ $lidUtil.escape( match.replace( '#', '' ), 1 ) }`;
+			}
+			// Rewrite relative ID selector
+			if ( isLidref ) {
+				if ( config.attr.lid === 'id' && namespaceUUID && namespaceUUID !== config.documentNamespaceUUID ) {
+					return `#${ $lidUtil.toUuid( namespaceUUID, id, 1 ) }`;
+				}
+				// Fallback to attr-based
+			}
+			// Rewrite absolute ID selector
+			let rewrite;
 			if ( config.attr.lid === 'id' ) {
-				return `[id^="${ lidrefPrefix }"][id$="${ lidrefSeparator }${ lidref }"]`;
+				rewrite = `:is(#${ id },[id^="${ $lidUtil.lidrefPrefix( escapeMode ) }"][id$="${ $lidUtil.lidrefSeparator( escapeMode ) }${ id }"])`;
 			} else {
-				return `[${ window.CSS.escape( config.attr.lid ) }="${ lidref }"]`;
+				rewrite = `:is(#${ id },[${ window.CSS.escape( config.attr.lid ) }="${ id }"])`;
 			}
+			return isLidref ? `:is(${ rewrite }):not(${ scopeSelector ? scopeSelector + ' ' : '' }[${ config.attr.namespace }] *)` : rewrite;
 		} );
 		// Category 2 has :scope and category 1 does not
 		return hadScopeSelector ? [ cat1, cat2.concat( selector ) ] : [ cat1.concat( selector ), cat2 ];
@@ -76,13 +115,11 @@ export function rewriteSelector( selectorText, scopeSelector = null, isCssSelect
 }
 
 /**
- * Returns the "namespace" object associated with the given node.
- *
  * @param Element node
  *
  * @return Object
  */
-function getNamespaceObject( node ) {
+export function getOwnNamespaceObject( node ) {
 	if ( !_( node ).has( 'namespace' ) ) {
 		const namespaceObj = Object.create( null );
 		_( node ).set( 'namespace', namespaceObj );
@@ -90,6 +127,26 @@ function getNamespaceObject( node ) {
 	return _( node ).get( 'namespace' );
 }
 
+/**
+ * @param Element node
+ * @param Bool forID
+ *
+ * @return Object
+ */
+export function getOwnerNamespaceObject( node, forID = false ) {
+	const window = this, { webqit: { oohtml: { configs: { NAMESPACED_HTML: config } } } } = window;
+	return getOwnNamespaceObject( node instanceof window.Document ? node : ( ( forID ? node.parentNode : node )?.closest( `[${ config.attr.namespace }]` ) || node.ownerDocument ) );
+}
+
+/**
+ * @param Object namespaceObj
+ *
+ * @return String
+ */
+export function getNamespaceUUID( namespaceObj ) {
+    return _fromHash( namespaceObj ) || _toHash( namespaceObj );
+}
+
 /**
  * Exposes Namespaced HTML with native APIs.
  *
@@ -104,10 +161,10 @@ function exposeAPIs( config ) {
     if ( config.api.namespace in window.Element.prototype ) { throw new Error( `The "Element" class already has a "${ config.api.namespace }" property!` ); }
     // Definitions
     Object.defineProperty( window.document, config.api.namespace, { get: function() {
-        return Observer.proxy( getNamespaceObject.call( window, window.document ) );
+        return Observer.proxy( getOwnNamespaceObject.call( window, window.document ) );
     } });
     Object.defineProperty( window.Element.prototype, config.api.namespace, { get: function() {
-        return Observer.proxy( getNamespaceObject.call( window, this ) );
+        return Observer.proxy( getOwnNamespaceObject.call( window, this ) );
     } } );
 }
 
@@ -120,25 +177,6 @@ function exposeAPIs( config ) {
  */
 function realtime( config ) {
     const window = this, { webqit: { Observer, realdom, oohtml: { configs }, DOMNamingContext } } = window;
-	const { lidrefPrefix, lidrefSeparator } = config.tokens;
-
-    // ------------
-    // NAMESPACE
-    // ------------
-	window.document[ configs.CONTEXT_API.api.contexts ].attach( new DOMNamingContext );
-    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.namespaceSelector, record => {
-        record.exits.forEach( entry => {
-			const contextsApi = entry[ configs.CONTEXT_API.api.contexts ];
-			const ctx = contextsApi.find( DOMNamingContext.kind );
-			if ( ctx ) { contextsApi.detach( ctx ); }
-        } );
-        record.entrants.forEach( entry => {
-			const contextsApi = entry[ configs.CONTEXT_API.api.contexts ];
-			if ( !contextsApi.find( DOMNamingContext.kind ) ) {
-				contextsApi.attach( new DOMNamingContext );
-			}
-        } );
-    }, { live: true, timing: 'sync', staticSensitivity: true } );
 	
 	// ------------
 	// APIS
@@ -149,48 +187,62 @@ function realtime( config ) {
 	const idRefAttrs = [ 'for', 'list', 'form', 'aria-activedescendant', 'aria-details', 'aria-errormessage', ];
 	const attrList = [ config.attr.lid, ...idRefsAttrs, ...idRefAttrs ];
 	const relMap = { id: 'id'/* just in case it's in attrList */, for: 'htmlFor', 'aria-owns': 'ariaOwns', 'aria-controls': 'ariaControls', 'aria-labelledby': 'ariaLabelledBy', 'aria-describedby': 'ariaDescribedBy', 'aria-flowto': 'ariaFlowto', 'aria-activedescendant': 'ariaActiveDescendant', 'aria-details': 'ariaDetails', 'aria-errormessage': 'ariaErrorMessage' };
-	const isUuid = str => str.startsWith( lidrefPrefix ) && str.includes( lidrefSeparator );
-	const isLidref = str => str.startsWith( lidrefPrefix ) && !str.includes( lidrefSeparator );
-	const toUuid = ( hash, lid ) => `${ lidrefPrefix }${ hash }${ lidrefSeparator }${ lid }`;
-	const uuidToLid = str => isUuid( str ) ? str.split( lidrefSeparator )[ 1 ] : str;
-	const uuidToLidref = str => isUuid( str ) ? `${ lidrefPrefix }${ str.split( lidrefSeparator )[ 1 ] }` : str;
+	const $lidUtil = lidUtil( config );
+	const uuidsToLidrefs = ( node, attrName, getter ) => {
+		if ( !getInternalAttrInteraction( node, attrName ) && _( node, 'attrOriginals' ).has( attrName ) ) {
+			return _( node, 'attrOriginals' ).get( attrName );
+		}
+		const value = getter();
+		if ( getInternalAttrInteraction( node, attrName ) ) return value;
+		return value && value.split( ' ' ).map( x => ( x = x.trim() ) && ( attrName === config.attr.lid ? $lidUtil.uuidToId : $lidUtil.uuidToLidref ).call( $lidUtil, x ) ).join( ' ' );
+	};
 
-	// Intercept getAttribute()
-	const getAttribute = Object.getOwnPropertyDescriptor( window.Element.prototype, 'getAttribute' );
-	Object.defineProperty( window.Element.prototype, 'getAttribute', { ...getAttribute, value( attrName ) {
-		const value = getAttribute.value.call( this, attrName );
-		return !_( this, 'lock' ).get( attrName ) && attrList.includes( attrName ) ? ( attrName === 'id' ? uuidToLid : uuidToLidref )( value ) : value;
-	} } );
 	// Intercept getElementById()
-	const getElementById = Object.getOwnPropertyDescriptor( window.Document.prototype, 'getElementById' );
-	Object.defineProperty( window.Document.prototype, 'getElementById', { ...getElementById, value( id ) {
-		if ( !isLidref( id ) ) return getElementById.value.call( this, id );
-		const node = this.querySelector( rewriteSelector.call( window, `#${ id }` ) );
-		return node;// !node?.closest( config.namespaceSelector ) ? node : null; // Cool, but not consistent with querySelector(All)() results
+	const getElementByIdDescr = Object.getOwnPropertyDescriptor( window.Document.prototype, 'getElementById' );
+	Object.defineProperty( window.Document.prototype, 'getElementById', { ...getElementByIdDescr, value( id ) {
+		return this.querySelector( `#${ id }` ); // To be rewritten at querySelector()
 	} } );
 	// Intercept querySelector() and querySelectorAll()
 	for ( const queryApi of [ 'querySelector', 'querySelectorAll' ] ) {
 		for ( nodeApi of [ window.Document, window.Element ] ) {
-			const querySelector = Object.getOwnPropertyDescriptor( nodeApi.prototype, queryApi );
-			Object.defineProperty( nodeApi.prototype, queryApi, { ...querySelector, value( selector ) {
-				return querySelector.value.call( this, rewriteSelector.call( window, selector ) );
+			const querySelectorDescr = Object.getOwnPropertyDescriptor( nodeApi.prototype, queryApi );
+			Object.defineProperty( nodeApi.prototype, queryApi, { ...querySelectorDescr, value( selector ) {
+				return querySelectorDescr.value.call( this, rewriteSelector.call( window, selector, getNamespaceUUID( getOwnNamespaceObject.call( window, this ) ) ) );
 			} } );
 		}
 	}
+	// Intercept getAttribute()
+	const getAttributeDescr = Object.getOwnPropertyDescriptor( window.Element.prototype, 'getAttribute' );
+	Object.defineProperty( window.Element.prototype, 'getAttribute', { ...getAttributeDescr, value( attrName ) {
+		const getter = () => getAttributeDescr.value.call( this, attrName );
+		return attrList.includes( attrName ) && !_( this, 'lock' ).get( attrName ) ? uuidsToLidrefs( this, attrName, getter ) : getter();
+	} } );
+	// Hide implementation details on the Attr node too.
+	const propertyDescr = Object.getOwnPropertyDescriptor( window.Attr.prototype, 'value' );
+	Object.defineProperty( window.Attr.prototype, 'value', { ...propertyDescr, get() {
+		const getter = () => propertyDescr.get.call( this );
+		return attrList.includes( this.name ) ? uuidsToLidrefs( this.ownerElement, this.name, getter ) : getter();
+	} } );
+	const propertyDescr2 = Object.getOwnPropertyDescriptor( window.Node.prototype, 'nodeValue' );
+	Object.defineProperty( window.Node.prototype, 'nodeValue', { ...propertyDescr2, get() {
+		const getter = () => propertyDescr2.get.call( this );
+		return this instanceof window.Attr && attrList.includes( this.name ) ? uuidsToLidrefs( this.ownerElement, this.name, getter ) : getter();
+	} } );
 	// These APIs should return LIDREFS minus the hash part
 	for ( const attrName of attrList ) {
 		if ( !( attrName in relMap ) ) continue;
 		const domApis = attrName === 'for' ? [ window.HTMLLabelElement, window.HTMLOutputElement ] : [ window.Element ];
 		for ( const domApi of domApis ) {
-			const idReflection = Object.getOwnPropertyDescriptor( domApi.prototype, relMap[ attrName ] );
-			if ( !idReflection ) continue;
-			Object.defineProperty( domApi.prototype, relMap[ attrName ], { ...idReflection, get() {
-				return ( attrName === 'id' ? uuidToLid : uuidToLidref )( idReflection.get.call( this, attrName ) || '' );
+			const propertyDescr = Object.getOwnPropertyDescriptor( domApi.prototype, relMap[ attrName ] );
+			if ( !propertyDescr ) continue;
+			Object.defineProperty( domApi.prototype, relMap[ attrName ], { ...propertyDescr, get() {
+				const getter = () => propertyDescr.get.call( this, attrName );
+				return uuidsToLidrefs( this, attrName, getter );
 			} } );
 		}
 	}
-	// Reflect the custom [config.attr.lid] attribute
 	if ( config.attr.lid !== 'id' ) {
+		// Reflect the custom [config.attr.lid] attribute
 		Object.defineProperty( window.Element.prototype, config.attr.lid, { configurable: true, enumerable: true, get() {
 			return this.getAttribute( config.attr.lid );
 		}, set( value ) {
@@ -201,94 +253,105 @@ function realtime( config ) {
 	// ------------
     // LOCAL IDS & IDREFS
     // ------------
-	const cleanupBinding = ( entry, attrName, oldValue ) => {
-		// Create or honour locking
-		if ( _( entry, 'lock' ).get( attrName ) ) return;
-		_( entry, 'lock' ).set( attrName, true );
-		// A function can be passed in to be called after having done the _( entry, 'lock' ).set( attrName, true ); flag
-		if ( typeof oldValue === 'function' ) oldValue = oldValue();
-		// Get down to work
-		const namespaceObj = _( entry ).get( 'ownerNamespace' );
-		if ( attrName === config.attr.lid ) {
-			const lid = uuidToLid( oldValue );
-			if ( Observer.get( namespaceObj, lid ) === entry ) { Observer.deleteProperty( namespaceObj, lid ); }
-		} else {
-			const newAttrValue = oldValue.split( ' ' ).map( lid => ( lid = lid.trim() ) && uuidToLidref( lid ) ).join( ' ' );
-			entry.setAttribute( attrName, newAttrValue );
-		}
-		// Release locking
-		_( entry, 'lock' ).delete( attrName );
+	const attrChange = ( entry, attrName, value, callback ) => {
+		return internalAttrInteraction( entry, attrName, () => {
+			if ( typeof value === 'function' ) value = value();
+			return callback( value );
+		} );
 	};
-	const setupBinding = ( entry, attrName, value ) => {
-		// Create or honour locking
-		if ( _( entry, 'lock' ).get( attrName ) ) return;
-		_( entry, 'lock' ).set( attrName, true );
-		// A function can be passed in to be called after having done the _( entry, 'lock' ).set( attrName, true ); flag
-		if ( typeof value === 'function' ) value = value();
-		// Get down to work
-		const namespaceObj = _( entry ).get( 'ownerNamespace' );
-		const namespaceUUID = _( entry ).get( 'namespaceUUID' );
-		if ( attrName === config.attr.lid ) {
-			const lid = uuidToLid( value );
-			if ( Observer.get( namespaceObj, lid ) !== entry ) {
-				// Setup new namespace relationships
-				entry.setAttribute( 'id', toUuid( namespaceUUID, lid ) );
-				Observer.set( namespaceObj, lid, entry );
+	const setupBinding = ( entry, attrName, value, newNamespaceObj = null ) => {
+		attrChange( entry, attrName, value, value => {
+			const isLidAttr = attrName === config.attr.lid;
+			const namespaceObj = newNamespaceObj || getOwnerNamespaceObject( entry, isLidAttr );
+			const namespaceUUID = getNamespaceUUID( namespaceObj );
+			if ( isLidAttr ) {
+				const id = $lidUtil.uuidToId( value );
+				if ( Observer.get( namespaceObj, id ) !== entry ) {
+					const uuid = $lidUtil.toUuid( namespaceUUID, id );
+					if ( uuid !== value ) { entry.setAttribute( 'id', uuid ); }
+					Observer.set( namespaceObj, id, entry );
+				}
+			} else {
+				_( entry, 'attrOriginals' ).set( attrName, value ); // Save original before rewrite
+				const newAttrValue = value.split( ' ' ).map( idref => ( idref = idref.trim() ) && !$lidUtil.isLidref( idref ) ? idref : $lidUtil.toUuid( namespaceUUID, idref.replace( $lidUtil.lidrefPrefix(), '' ) ) ).join( ' ' );
+				entry.setAttribute( attrName, newAttrValue );
+				_( namespaceObj ).set( 'idrefs', _( namespaceObj ).get( 'idrefs' ) || new Set );
+				_( namespaceObj ).get( 'idrefs' ).add( entry );
 			}
-		} else {
-			const newAttrValue = value.split( ' ' ).map( lid => ( lid = lid.trim() ) && !isLidref( lid ) ? lid : toUuid( namespaceUUID, lid.replace( lidrefPrefix, '' ) ) ).join( ' ' );
-			entry.setAttribute( attrName, newAttrValue );
-		}
-		// Release locking
-		_( entry, 'lock' ).delete( attrName );
-	};
-
-	const cleanupAllBindings = ( entry, total = true ) => {
-		for ( const attrName of attrList ) {
-			if ( !entry.hasAttribute( attrName ) ) continue;
-			cleanupBinding( entry, attrName, () => entry.getAttribute( attrName ) );
-		}
-		_( entry ).delete( 'ownerNamespace' );
-		_( entry ).delete( 'namespaceUUID' );
-		if ( total ) {
-			_( entry ).get( 'namespaceBinding' ).abort();
-			_( entry ).delete( 'namespaceBinding' );
-		}
+		} );
 	};
-	const setupAllBindings = ( entry ) => {
-		if ( !_( entry ).get( 'ownerNamespace' ) ) {
-			const request = { ...DOMNamingContext.createRequest(), live: true };
-			const binding = entry.parentNode[ configs.CONTEXT_API.api.contexts ].request( request, namespaceObj => {
-				// Cleanup of previous namespace?
-				if ( _( entry ).get( 'namespaceUUID' ) ) {
-					cleanupAllBindings( entry, false );
+	const cleanupBinding = ( entry, attrName, oldValue, prevNamespaceObj = null ) => {
+		attrChange( entry, attrName, oldValue, oldValue => {
+			const isLidAttr = attrName === config.attr.lid;
+			const namespaceObj = prevNamespaceObj || getOwnerNamespaceObject( entry, isLidAttr );
+			if ( isLidAttr ) {
+				const id = $lidUtil.uuidToId( oldValue );
+				if ( Observer.get( namespaceObj, id ) === entry ) {
+					Observer.deleteProperty( namespaceObj, id );
 				}
-				// Setup new namespace
-				_( entry ).set( 'ownerNamespace', namespaceObj );
-				_( entry ).set( 'namespaceUUID', _fromHash( namespaceObj ) || _toHash( namespaceObj ) );
-				setupAllBindings( entry );
-			} );
-			_( entry ).set( 'namespaceBinding', binding );
-			return;
-		}
-		for ( const attrName of attrList ) {
-			if ( !entry.hasAttribute( attrName ) ) continue;
-			setupBinding( entry, attrName, () => entry.getAttribute( attrName ) );
-		}
+			} else {
+				const newAttrValue = _( entry, 'attrOriginals' ).get( attrName );// oldValue.split( ' ' ).map( lid => ( lid = lid.trim() ) && $lidUtil.uuidToLidref( lid ) ).join( ' ' );
+				entry.setAttribute( attrName, newAttrValue );
+				_( namespaceObj ).get( 'idrefs' ).delete( entry );
+			}
+		} );
 	};
 
+    // ------------
+    // NAMESPACE
+    // ------------
+	window.document[ configs.CONTEXT_API.api.contexts ].attach( new DOMNamingContext );
+    realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( config.namespaceSelector, record => {
+		const reAssociate = ( entry, attrName, oldNamespaceObj, newNamespaceObj ) => {
+			if ( !entry.hasAttribute( attrName ) ) return;
+			const attrValue = () => entry.getAttribute( attrName );
+			cleanupBinding( entry, attrName, attrValue/* Current resolved value as-is */, oldNamespaceObj );
+			if ( entry.isConnected ) { setupBinding( entry, attrName, _( entry, 'attrOriginals' ).get( attrName )/* Saved original value */ || attrValue/* Lest it's ID */, newNamespaceObj ); }
+		};
+        record.exits.forEach( entry => {
+			const namespaceObj = getOwnNamespaceObject( entry );
+			// Detach ID and IDREF associations
+			for ( const node of new Set( [ ...Object.values( namespaceObj ), ..._( namespaceObj ).get( 'idrefs' ) ] ) ) {
+				for ( const attrName of attrList ) { reAssociate( node, attrName, namespaceObj ); }
+			}
+			// Detach ID associations
+			const contextsApi = entry[ configs.CONTEXT_API.api.contexts ];
+			const ctx = contextsApi.find( DOMNamingContext.kind );
+			// Detach namespace instance
+			if ( ctx ) { contextsApi.detach( ctx ); }
+        } );
+        record.entrants.forEach( entry => {
+			// Claim ID and IDREF associations
+			let newSuperNamespaceObj;
+			const superNamespaceObj = getOwnerNamespaceObject( entry, true );
+			for ( const node of new Set( [ ...Object.values( superNamespaceObj ), ...( _( superNamespaceObj ).get( 'idrefs' ) || [] ) ] ) ) {
+				if ( ( newSuperNamespaceObj = getOwnerNamespaceObject( node, true ) ) === superNamespaceObj ) continue;
+				for ( const attrName of attrList ) { reAssociate( node, attrName, superNamespaceObj, newSuperNamespaceObj ); }
+			}
+			// Attach namespace instance
+			const contextsApi = entry[ configs.CONTEXT_API.api.contexts ];
+			if ( !contextsApi.find( DOMNamingContext.kind ) ) { contextsApi.attach( new DOMNamingContext ); }
+        } );
+    }, { live: true, timing: 'sync', staticSensitivity: true } );
+
 	// DOM realtime
 	realdom.realtime( window.document ).subtree/*instead of observe(); reason: jsdom timing*/( `[${ attrList.map( attrName => window.CSS.escape( attrName ) ).join( '],[' ) }]`, record => {
-		record.exits.forEach( cleanupAllBindings );
-		record.entrants.forEach( setupAllBindings );
+		for ( const attrName of attrList ) {
+			record.exits.forEach( entry => {
+				if ( !entry.hasAttribute( attrName ) ) return;
+				cleanupBinding( entry, attrName, () => entry.getAttribute( attrName )/* Current resolved value as-is */ );
+			} );
+			record.entrants.forEach( entry => {
+				if ( !entry.hasAttribute( attrName ) ) return;
+				setupBinding( entry, attrName, () => entry.getAttribute( attrName )/* Raw value (as-is) that will be saved as original */ );
+			} );
+		}
 	}, { live: true, timing: 'sync' } );
 	// Attr realtime
 	realdom.realtime( window.document, 'attr' ).observe( attrList, records => {
 		for ( const record of records ) {
-			if ( record.oldValue ) {
-				cleanupBinding( record.target, record.name, record.oldValue );
-				if ( record.value ) { setupBinding( record.target, record.name, record.value ); }
-			} else { setupAllBindings( entry ); }
+			if ( record.oldValue ) { cleanupBinding( record.target, record.name, record.oldValue/* Current resolved value as-is */ ); }
+			if ( record.value ) { setupBinding( record.target, record.name, record.value/* Raw value (as-is) that will be saved as original */ ); }
 		}
 	}, { subtree: true, timing: 'sync', newValue: true, oldValue: true } );
 
@@ -297,13 +360,13 @@ function realtime( config ) {
     // ------------
 	let prevTarget;
 	const activateTarget = () => {
-		if ( !window.location.hash?.startsWith( `#${ lidrefPrefix }` ) ) return;
-		const path = window.location.hash?.substring( `#${ lidrefPrefix }`.length ).split( '/' ).map( s => s.trim() ).filter( s => s ) || [];
+		if ( !window.location.hash?.startsWith( `#${ $lidUtil.lidrefPrefix() }` ) ) return;
+		const path = window.location.hash?.substring( `#${ $lidUtil.lidrefPrefix() }`.length ).split( '/' ).map( s => s.trim() ).filter( s => s ) || [];
 		const currTarget = path.reduce( ( prev, segment ) => prev && prev[ config.api.namespace ][ segment ], window.document );
-		if ( prevTarget && config.target.attr ) { prevTarget.toggleAttribute( config.target.attr, false ); }
+		if ( prevTarget && config.target.className ) { prevTarget.classList.toggle( config.target.className, false ); }
 		if ( currTarget && currTarget !== window.document ) {
-			if ( config.target.attr ) { currTarget.toggleAttribute( config.target.attr, true ); }
-			if ( config.target.event ) { currTarget.dispatchEvent( new window.CustomEvent( config.target.event ) ); }
+			if ( config.target.className ) { currTarget.classList.toggle( config.target.className, true ); }
+			if ( config.target.eventName ) { currTarget.dispatchEvent( new window.CustomEvent( config.target.eventName ) ); }
 			if ( config.target.scrolling && path.length > 1 ) { currTarget.scrollIntoView(); }
 			prevTarget = currTarget;
 		}