typed-dom - npm Package Compare versions

Comparing version 0.0.348 to 0.0.349

dist/src/proxy.d.ts

@@ -36,5 +36,2 @@ import { symbols, Listeners } from './internal';
     constructor(tag: T, element: E, children: C, container?: Element | ShadowRoot);
-    private readonly $selector;
-    private get selector();
-    private format;
     private isInternalUpdate;
@@ -41,0 +38,0 @@ private observe;

dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.348 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.349 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -16,3 +16,3 @@ if(typeof exports === 'object' && typeof module === 'object')
 
-/***/ 5406:
+/***/ 5413:
 /***/ ((__unused_webpack_module, exports) => {
@@ -40,3 +40,3 @@
 
-/***/ 5529:
+/***/ 1934:
 /***/ ((__unused_webpack_module, exports) => {
@@ -57,3 +57,3 @@
 
-/***/ 1808:
+/***/ 6925:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -67,4 +67,4 @@
 exports.reduce = exports.memoize = void 0;
-const alias_1 = __webpack_require__(5406);
-const compare_1 = __webpack_require__(5529);
+const alias_1 = __webpack_require__(5413);
+const compare_1 = __webpack_require__(1934);
 function memoize(f, identify, memory) {
@@ -136,3 +136,3 @@ if (typeof identify === 'object') {
 
-/***/ 7521:
+/***/ 5761:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -146,4 +146,4 @@
 exports.defrag = exports.prepend = exports.append = exports.isChildren = exports.define = exports.element = exports.text = exports.math = exports.svg = exports.html = exports.frag = exports.shadow = void 0;
-const alias_1 = __webpack_require__(5406);
-const memoize_1 = __webpack_require__(1808);
+const alias_1 = __webpack_require__(5413);
+const memoize_1 = __webpack_require__(6925);
 var caches;
@@ -368,3 +368,3 @@ (function (caches) {
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__(7521);
+/******/ 	var __webpack_exports__ = __webpack_require__(5761);
 /******/ 	
@@ -371,0 +371,0 @@ /******/ 	return __webpack_exports__;

index.d.ts

@@ -7,2 +7,2 @@ export type { El } from './src/proxy';
 export { querySelectorAll, querySelectorWith, querySelectorAllWith } from './src/util/query';
-export { identity } from './src/util/identity';
+export { scope } from './src/util/css';

index.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.348 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.349 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -16,3 +16,3 @@ if(typeof exports === 'object' && typeof module === 'object')
 
-/***/ 5406:
+/***/ 5413:
 /***/ ((__unused_webpack_module, exports) => {
@@ -40,3 +40,3 @@
 
-/***/ 8112:
+/***/ 6876:
 /***/ ((__unused_webpack_module, exports) => {
@@ -136,3 +136,3 @@
 
-/***/ 5529:
+/***/ 1934:
 /***/ ((__unused_webpack_module, exports) => {
@@ -153,3 +153,3 @@
 
-/***/ 7731:
+/***/ 1825:
 /***/ ((__unused_webpack_module, exports) => {
@@ -162,44 +162,2 @@
 }));
-exports.counter = void 0;
-const dict = [...[...Array(10)].map((_, i) => i), ...[...Array(26)].map((_, i) => String.fromCharCode(0x61 + i)), ...[...Array(26)].map((_, i) => String.fromCharCode(0x41 + i))].join('');
-function counter(radix = 10, pad = '', numbers = dict) {
-  return format(pad, counter$(radix, numbers));
-}
-exports.counter = counter;
-function counter$(radix, numbers) {
-  let cnt = 0;
-  if (radix === 10 && numbers.slice(0, 10) === dict.slice(0, 10)) return () => `${++cnt}`;
-  let carry;
-  let str = '';
-  return () => {
-    cnt = ++cnt % radix;
-    if (cnt !== 0) return `${str}${numbers[cnt]}`;
-    carry ??= counter$(radix, numbers);
-    str = carry();
-    return `${str}${numbers[cnt]}`;
-  };
-}
-function format(pad, counter) {
-  if (pad === '') return counter;
-  let len = 0;
-  let str = '';
-  return () => {
-    const count = counter();
-    if (count.length === len) return `${str}${count}`;
-    len = count.length;
-    str = pad.length > len ? pad.slice(0, pad.length - len) : '';
-    return `${str}${count}`;
-  };
-}
-
-/***/ }),
-
-/***/ 6288:
-/***/ ((__unused_webpack_module, exports) => {
-
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
 exports.noop = exports.fix = exports.id = exports.clear = exports.singleton = void 0;
@@ -236,3 +194,3 @@ function singleton(f) {
 
-/***/ 4128:
+/***/ 6925:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -245,30 +203,5 @@
 }));
-__webpack_require__(6921);
-const global = globalThis;
-global.global = global;
-exports["default"] = global;
-
-/***/ }),
-
-/***/ 6921:
-/***/ (() => {
-
-
-
-// @ts-ignore
-var global = (/* unused pure expression or super */ null && (globalThis));
-
-/***/ }),
-
-/***/ 1808:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
 exports.reduce = exports.memoize = void 0;
-const alias_1 = __webpack_require__(5406);
-const compare_1 = __webpack_require__(5529);
+const alias_1 = __webpack_require__(5413);
+const compare_1 = __webpack_require__(1934);
 function memoize(f, identify, memory) {
@@ -340,3 +273,3 @@ if (typeof identify === 'object') {
 
-/***/ 4879:
+/***/ 8312:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -351,4 +284,4 @@
 exports.never = exports.isPromiseLike = exports.Internal = exports.AtomicPromise = exports.internal = void 0;
-const alias_1 = __webpack_require__(5406);
-const function_1 = __webpack_require__(6288);
+const alias_1 = __webpack_require__(5413);
+const function_1 = __webpack_require__(1825);
 exports.internal = Symbol.for('spica/promise::internal');
@@ -566,3 +499,2 @@ class AtomicPromise {
   }
-
   resolve(value) {
@@ -680,3 +612,3 @@ if (!this.isPending()) return;
 function isPromiseLike(value) {
-  return value != null && typeof value === 'object' && typeof value.then === 'function';
+  return value != null && typeof value === 'object' && 'then' in value && typeof value.then === 'function';
 }
@@ -707,3 +639,3 @@ exports.isPromiseLike = isPromiseLike;
 
-/***/ 9048:
+/***/ 4119:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -717,4 +649,4 @@
 exports.Math = exports.SVG = exports.HTML = exports.Shadow = exports.API = void 0;
-const proxy_1 = __webpack_require__(3965);
-const dom_1 = __webpack_require__(7521);
+const proxy_1 = __webpack_require__(3624);
+const dom_1 = __webpack_require__(5761);
 function API(baseFactory, container) {
@@ -769,3 +701,3 @@ return new Proxy(() => 0, handle(baseFactory, container));
 
-/***/ 6927:
+/***/ 2423:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -779,3 +711,3 @@
 exports.Listeners = exports.symbols = void 0;
-const array_1 = __webpack_require__(8112);
+const array_1 = __webpack_require__(6876);
 var symbols;
@@ -854,3 +786,3 @@ (function (symbols) {
 
-/***/ 3965:
+/***/ 3624:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -865,5 +797,4 @@
 exports.ElementProxy = void 0;
-const alias_1 = __webpack_require__(5406);
-const internal_1 = __webpack_require__(6927);
-const identity_1 = __webpack_require__(9670);
+const alias_1 = __webpack_require__(5413);
+const internal_1 = __webpack_require__(2423);
 class ElementProxy {
@@ -874,3 +805,2 @@ constructor(tag, element, children, container = element) {
     this.container = container;
-    this.$selector = this.element === this.container ? new Selector(this.element) : undefined;
     this.isInternalUpdate = false;
@@ -922,20 +852,2 @@ this.isInit = true;
   }
-  get selector() {
-    return this.$selector?.selector ?? ':host';
-  }
-  format(child) {
-    switch (child.tag) {
-      case 'style':
-      case 'STYLE':
-        {
-          let changed = '';
-          const style = child.element.innerHTML.replace(/(?<![\w\-$[])\$scope(?![\w\-$])|"(?:\\.|[^\\"])+"?|'(?:\\.|[^\\'])+'?|\/\*(?:(?!\*\/).)+(?:\*\/)?|\/\/[^\r\n]+/sg, (...$) => $[0][0] === '$' ? changed = this.selector : $[0]);
-          if (!changed) return;
-          child.element.textContent = style;
-          return;
-        }
-      default:
-        return;
-    }
-  }
   observe(children) {
@@ -1009,3 +921,2 @@ for (const name of Object.keys(children)) {
               throwErrorIfUnavailable(newChild, container);
-              this.format(newChild);
               const hasListener = internal_1.Listeners.of(newChild)?.haveConnectionListener();
@@ -1024,3 +935,2 @@ if (newChild.element.parentNode !== container) {
               throwErrorIfUnavailable(newChild, container);
-              this.format(newChild);
               internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
@@ -1051,3 +961,2 @@ }
               throwErrorIfUnavailable(newChild, container);
-              this.format(newChild);
               const hasListener = internal_1.Listeners.of(newChild)?.haveConnectionListener();
@@ -1065,3 +974,2 @@ if (newChild.element.parentNode !== container) {
               throwErrorIfUnavailable(newChild, container);
-              this.format(newChild);
               container.replaceChild(newChild.element, oldChild.element);
@@ -1085,28 +993,2 @@ internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
 _a = internal_1.symbols.listeners;
-class Selector {
-  constructor(element) {
-    this.element = element;
-    this.$id = '';
-    this.$selector = '';
-  }
-  get id() {
-    if (this.$id) return this.$id;
-    this.$id = this.element.id;
-    if (/^[a-z][\w-]*$/i.test(this.$id)) return this.$id;
-    this.$id = `rnd-${(0, identity_1.identity)()}`;
-    this.element.classList.add(this.$id);
-    return this.$id;
-  }
-  get selector() {
-    if (this.$selector) return this.$selector;
-    switch (true) {
-      //case this.element !== this.container:
-      //  return this.$query = ':host';
-      case this.id === this.element.id:
-        return this.$selector = `#${this.id}`;
-      default:
-        return this.$selector = `.${this.id}`;
-    }
-  }
-}
 function throwErrorIfUnavailable(child, newParent) {
@@ -1120,3 +1002,19 @@ const oldParent = child.element.parentNode;
 
-/***/ 7521:
+/***/ 3018:
+/***/ ((__unused_webpack_module, exports) => {
+
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.scope = void 0;
+function scope(rule) {
+  return `@scope { ${rule} }`;
+}
+exports.scope = scope;
+
+/***/ }),
+
+/***/ 5761:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -1130,4 +1028,4 @@
 exports.defrag = exports.prepend = exports.append = exports.isChildren = exports.define = exports.element = exports.text = exports.math = exports.svg = exports.html = exports.frag = exports.shadow = void 0;
-const alias_1 = __webpack_require__(5406);
-const memoize_1 = __webpack_require__(1808);
+const alias_1 = __webpack_require__(5413);
+const memoize_1 = __webpack_require__(6925);
 var caches;
@@ -1321,3 +1219,3 @@ (function (caches) {
 
-/***/ 9670:
+/***/ 1365:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -1330,22 +1228,6 @@
 }));
-exports.identity = void 0;
-__webpack_require__(4128);
-const counter_1 = __webpack_require__(7731);
-// uniqueによる実装はメモリを圧迫しqueryのベンチマークが落ちるため不可
-exports.identity = __webpack_require__.g[Symbol.for('typed-dom::identity')] ??= (0, counter_1.counter)(62);
-
-/***/ }),
-
-/***/ 7251:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
 exports.bind = exports.delegate = exports.once = exports.listen = exports.currentTarget = void 0;
-const alias_1 = __webpack_require__(5406);
-const promise_1 = __webpack_require__(4879);
-const function_1 = __webpack_require__(6288);
+const alias_1 = __webpack_require__(5413);
+const promise_1 = __webpack_require__(8312);
+const function_1 = __webpack_require__(1825);
 exports.currentTarget = Symbol.for('typed-dom::currentTarget');
@@ -1438,3 +1320,3 @@ function listen(target, selector, type, listener, option) {
 
-/***/ 1160:
+/***/ 2929:
 /***/ ((__unused_webpack_module, exports) => {
@@ -1501,15 +1383,2 @@
 /************************************************************************/
-/******/ 	/* webpack/runtime/global */
-/******/ 	(() => {
-/******/ 		__webpack_require__.g = (function() {
-/******/ 			if (typeof globalThis === 'object') return globalThis;
-/******/ 			try {
-/******/ 				return this || new Function('return this')();
-/******/ 			} catch (e) {
-/******/ 				if (typeof window === 'object') return window;
-/******/ 			}
-/******/ 		})();
-/******/ 	})();
-/******/ 	
-/************************************************************************/
 var __webpack_exports__ = {};
@@ -1524,4 +1393,4 @@ // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
 }));
-exports.identity = exports.querySelectorAllWith = exports.querySelectorWith = exports.querySelectorAll = exports.currentTarget = exports.once = exports.bind = exports.delegate = exports.listen = exports.defrag = exports.prepend = exports.append = exports.define = exports.element = exports.text = exports.math = exports.svg = exports.html = exports.frag = exports.shadow = exports.Math = exports.SVG = exports.HTML = exports.Shadow = exports.API = void 0;
-var builder_1 = __webpack_require__(9048);
+exports.scope = exports.querySelectorAllWith = exports.querySelectorWith = exports.querySelectorAll = exports.currentTarget = exports.once = exports.bind = exports.delegate = exports.listen = exports.defrag = exports.prepend = exports.append = exports.define = exports.element = exports.text = exports.math = exports.svg = exports.html = exports.frag = exports.shadow = exports.Math = exports.SVG = exports.HTML = exports.Shadow = exports.API = void 0;
+var builder_1 = __webpack_require__(4119);
 Object.defineProperty(exports, "API", ({
@@ -1557,3 +1426,3 @@ enumerable: true,
 }));
-var dom_1 = __webpack_require__(7521);
+var dom_1 = __webpack_require__(5761);
 Object.defineProperty(exports, "shadow", ({
@@ -1625,3 +1494,3 @@ enumerable: true,
 }));
-var listener_1 = __webpack_require__(7251);
+var listener_1 = __webpack_require__(1365);
 Object.defineProperty(exports, "listen", ({
@@ -1657,3 +1526,3 @@ enumerable: true,
 }));
-var query_1 = __webpack_require__(1160);
+var query_1 = __webpack_require__(2929);
 Object.defineProperty(exports, "querySelectorAll", ({
@@ -1677,7 +1546,7 @@ enumerable: true,
 }));
-var identity_1 = __webpack_require__(9670);
-Object.defineProperty(exports, "identity", ({
+var css_1 = __webpack_require__(3018);
+Object.defineProperty(exports, "scope", ({
   enumerable: true,
   get: function () {
-    return identity_1.identity;
+    return css_1.scope;
   }
@@ -1684,0 +1553,0 @@ }));

index.ts

@@ -7,2 +7,2 @@ export type { El } from './src/proxy';
 export { querySelectorAll, querySelectorWith, querySelectorAllWith } from './src/util/query';
-export { identity } from './src/util/identity';
+export { scope } from './src/util/css';

listener.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.348 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.349 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -16,3 +16,3 @@ if(typeof exports === 'object' && typeof module === 'object')
 
-/***/ 5406:
+/***/ 5413:
 /***/ ((__unused_webpack_module, exports) => {
@@ -40,3 +40,3 @@
 
-/***/ 6288:
+/***/ 1825:
 /***/ ((__unused_webpack_module, exports) => {
@@ -80,3 +80,3 @@
 
-/***/ 4879:
+/***/ 8312:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -91,4 +91,4 @@
 exports.never = exports.isPromiseLike = exports.Internal = exports.AtomicPromise = exports.internal = void 0;
-const alias_1 = __webpack_require__(5406);
-const function_1 = __webpack_require__(6288);
+const alias_1 = __webpack_require__(5413);
+const function_1 = __webpack_require__(1825);
 exports.internal = Symbol.for('spica/promise::internal');
@@ -306,3 +306,2 @@ class AtomicPromise {
   }
-
   resolve(value) {
@@ -420,3 +419,3 @@ if (!this.isPending()) return;
 function isPromiseLike(value) {
-  return value != null && typeof value === 'object' && typeof value.then === 'function';
+  return value != null && typeof value === 'object' && 'then' in value && typeof value.then === 'function';
 }
@@ -447,3 +446,3 @@ exports.isPromiseLike = isPromiseLike;
 
-/***/ 7251:
+/***/ 1365:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -457,5 +456,5 @@
 exports.bind = exports.delegate = exports.once = exports.listen = exports.currentTarget = void 0;
-const alias_1 = __webpack_require__(5406);
-const promise_1 = __webpack_require__(4879);
-const function_1 = __webpack_require__(6288);
+const alias_1 = __webpack_require__(5413);
+const promise_1 = __webpack_require__(8312);
+const function_1 = __webpack_require__(1825);
 exports.currentTarget = Symbol.for('typed-dom::currentTarget');
@@ -579,3 +578,3 @@ function listen(target, selector, type, listener, option) {
 /******/ 	// This entry module is referenced by other modules so it can't be inlined
-/******/ 	var __webpack_exports__ = __webpack_require__(7251);
+/******/ 	var __webpack_exports__ = __webpack_require__(1365);
 /******/ 	
@@ -582,0 +581,0 @@ /******/ 	return __webpack_exports__;

listener.test.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.348 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.349 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -16,3 +16,3 @@ if(typeof exports === 'object' && typeof module === 'object')
 
-/***/ 5406:
+/***/ 5413:
 /***/ ((__unused_webpack_module, exports) => {
@@ -40,3 +40,3 @@
 
-/***/ 8112:
+/***/ 6876:
 /***/ ((__unused_webpack_module, exports) => {
@@ -136,3 +136,3 @@
 
-/***/ 5529:
+/***/ 1934:
 /***/ ((__unused_webpack_module, exports) => {
@@ -153,3 +153,3 @@
 
-/***/ 7731:
+/***/ 1825:
 /***/ ((__unused_webpack_module, exports) => {
@@ -162,44 +162,2 @@
 }));
-exports.counter = void 0;
-const dict = [...[...Array(10)].map((_, i) => i), ...[...Array(26)].map((_, i) => String.fromCharCode(0x61 + i)), ...[...Array(26)].map((_, i) => String.fromCharCode(0x41 + i))].join('');
-function counter(radix = 10, pad = '', numbers = dict) {
-  return format(pad, counter$(radix, numbers));
-}
-exports.counter = counter;
-function counter$(radix, numbers) {
-  let cnt = 0;
-  if (radix === 10 && numbers.slice(0, 10) === dict.slice(0, 10)) return () => `${++cnt}`;
-  let carry;
-  let str = '';
-  return () => {
-    cnt = ++cnt % radix;
-    if (cnt !== 0) return `${str}${numbers[cnt]}`;
-    carry ??= counter$(radix, numbers);
-    str = carry();
-    return `${str}${numbers[cnt]}`;
-  };
-}
-function format(pad, counter) {
-  if (pad === '') return counter;
-  let len = 0;
-  let str = '';
-  return () => {
-    const count = counter();
-    if (count.length === len) return `${str}${count}`;
-    len = count.length;
-    str = pad.length > len ? pad.slice(0, pad.length - len) : '';
-    return `${str}${count}`;
-  };
-}
-
-/***/ }),
-
-/***/ 6288:
-/***/ ((__unused_webpack_module, exports) => {
-
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
 exports.noop = exports.fix = exports.id = exports.clear = exports.singleton = void 0;
@@ -236,3 +194,3 @@ function singleton(f) {
 
-/***/ 4128:
+/***/ 6925:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -245,30 +203,5 @@
 }));
-__webpack_require__(6921);
-const global = globalThis;
-global.global = global;
-exports["default"] = global;
-
-/***/ }),
-
-/***/ 6921:
-/***/ (() => {
-
-
-
-// @ts-ignore
-var global = (/* unused pure expression or super */ null && (globalThis));
-
-/***/ }),
-
-/***/ 1808:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
 exports.reduce = exports.memoize = void 0;
-const alias_1 = __webpack_require__(5406);
-const compare_1 = __webpack_require__(5529);
+const alias_1 = __webpack_require__(5413);
+const compare_1 = __webpack_require__(1934);
 function memoize(f, identify, memory) {
@@ -340,3 +273,3 @@ if (typeof identify === 'object') {
 
-/***/ 4879:
+/***/ 8312:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -351,4 +284,4 @@
 exports.never = exports.isPromiseLike = exports.Internal = exports.AtomicPromise = exports.internal = void 0;
-const alias_1 = __webpack_require__(5406);
-const function_1 = __webpack_require__(6288);
+const alias_1 = __webpack_require__(5413);
+const function_1 = __webpack_require__(1825);
 exports.internal = Symbol.for('spica/promise::internal');
@@ -566,3 +499,2 @@ class AtomicPromise {
   }
-
   resolve(value) {
@@ -680,3 +612,3 @@ if (!this.isPending()) return;
 function isPromiseLike(value) {
-  return value != null && typeof value === 'object' && typeof value.then === 'function';
+  return value != null && typeof value === 'object' && 'then' in value && typeof value.then === 'function';
 }
@@ -707,3 +639,3 @@ exports.isPromiseLike = isPromiseLike;
 
-/***/ 9048:
+/***/ 4119:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -717,4 +649,4 @@
 exports.Math = exports.SVG = exports.HTML = exports.Shadow = exports.API = void 0;
-const proxy_1 = __webpack_require__(3965);
-const dom_1 = __webpack_require__(7521);
+const proxy_1 = __webpack_require__(3624);
+const dom_1 = __webpack_require__(5761);
 function API(baseFactory, container) {
@@ -769,3 +701,3 @@ return new Proxy(() => 0, handle(baseFactory, container));
 
-/***/ 6927:
+/***/ 2423:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -779,3 +711,3 @@
 exports.Listeners = exports.symbols = void 0;
-const array_1 = __webpack_require__(8112);
+const array_1 = __webpack_require__(6876);
 var symbols;
@@ -854,3 +786,3 @@ (function (symbols) {
 
-/***/ 3965:
+/***/ 3624:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -865,5 +797,4 @@
 exports.ElementProxy = void 0;
-const alias_1 = __webpack_require__(5406);
-const internal_1 = __webpack_require__(6927);
-const identity_1 = __webpack_require__(9670);
+const alias_1 = __webpack_require__(5413);
+const internal_1 = __webpack_require__(2423);
 class ElementProxy {
@@ -874,3 +805,2 @@ constructor(tag, element, children, container = element) {
     this.container = container;
-    this.$selector = this.element === this.container ? new Selector(this.element) : undefined;
     this.isInternalUpdate = false;
@@ -922,20 +852,2 @@ this.isInit = true;
   }
-  get selector() {
-    return this.$selector?.selector ?? ':host';
-  }
-  format(child) {
-    switch (child.tag) {
-      case 'style':
-      case 'STYLE':
-        {
-          let changed = '';
-          const style = child.element.innerHTML.replace(/(?<![\w\-$[])\$scope(?![\w\-$])|"(?:\\.|[^\\"])+"?|'(?:\\.|[^\\'])+'?|\/\*(?:(?!\*\/).)+(?:\*\/)?|\/\/[^\r\n]+/sg, (...$) => $[0][0] === '$' ? changed = this.selector : $[0]);
-          if (!changed) return;
-          child.element.textContent = style;
-          return;
-        }
-      default:
-        return;
-    }
-  }
   observe(children) {
@@ -1009,3 +921,2 @@ for (const name of Object.keys(children)) {
               throwErrorIfUnavailable(newChild, container);
-              this.format(newChild);
               const hasListener = internal_1.Listeners.of(newChild)?.haveConnectionListener();
@@ -1024,3 +935,2 @@ if (newChild.element.parentNode !== container) {
               throwErrorIfUnavailable(newChild, container);
-              this.format(newChild);
               internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
@@ -1051,3 +961,2 @@ }
               throwErrorIfUnavailable(newChild, container);
-              this.format(newChild);
               const hasListener = internal_1.Listeners.of(newChild)?.haveConnectionListener();
@@ -1065,3 +974,2 @@ if (newChild.element.parentNode !== container) {
               throwErrorIfUnavailable(newChild, container);
-              this.format(newChild);
               container.replaceChild(newChild.element, oldChild.element);
@@ -1085,28 +993,2 @@ internal_1.Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
 _a = internal_1.symbols.listeners;
-class Selector {
-  constructor(element) {
-    this.element = element;
-    this.$id = '';
-    this.$selector = '';
-  }
-  get id() {
-    if (this.$id) return this.$id;
-    this.$id = this.element.id;
-    if (/^[a-z][\w-]*$/i.test(this.$id)) return this.$id;
-    this.$id = `rnd-${(0, identity_1.identity)()}`;
-    this.element.classList.add(this.$id);
-    return this.$id;
-  }
-  get selector() {
-    if (this.$selector) return this.$selector;
-    switch (true) {
-      //case this.element !== this.container:
-      //  return this.$query = ':host';
-      case this.id === this.element.id:
-        return this.$selector = `#${this.id}`;
-      default:
-        return this.$selector = `.${this.id}`;
-    }
-  }
-}
 function throwErrorIfUnavailable(child, newParent) {
@@ -1120,3 +1002,3 @@ const oldParent = child.element.parentNode;
 
-/***/ 7521:
+/***/ 5761:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -1130,4 +1012,4 @@
 exports.defrag = exports.prepend = exports.append = exports.isChildren = exports.define = exports.element = exports.text = exports.math = exports.svg = exports.html = exports.frag = exports.shadow = void 0;
-const alias_1 = __webpack_require__(5406);
-const memoize_1 = __webpack_require__(1808);
+const alias_1 = __webpack_require__(5413);
+const memoize_1 = __webpack_require__(6925);
 var caches;
@@ -1321,3 +1203,3 @@ (function (caches) {
 
-/***/ 9670:
+/***/ 1365:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -1330,22 +1212,6 @@
 }));
-exports.identity = void 0;
-__webpack_require__(4128);
-const counter_1 = __webpack_require__(7731);
-// uniqueによる実装はメモリを圧迫しqueryのベンチマークが落ちるため不可
-exports.identity = __webpack_require__.g[Symbol.for('typed-dom::identity')] ??= (0, counter_1.counter)(62);
-
-/***/ }),
-
-/***/ 7251:
-/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
-
-
-
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
 exports.bind = exports.delegate = exports.once = exports.listen = exports.currentTarget = void 0;
-const alias_1 = __webpack_require__(5406);
-const promise_1 = __webpack_require__(4879);
-const function_1 = __webpack_require__(6288);
+const alias_1 = __webpack_require__(5413);
+const promise_1 = __webpack_require__(8312);
+const function_1 = __webpack_require__(1825);
 exports.currentTarget = Symbol.for('typed-dom::currentTarget');
@@ -1465,15 +1331,2 @@ function listen(target, selector, type, listener, option) {
 /************************************************************************/
-/******/ 	/* webpack/runtime/global */
-/******/ 	(() => {
-/******/ 		__webpack_require__.g = (function() {
-/******/ 			if (typeof globalThis === 'object') return globalThis;
-/******/ 			try {
-/******/ 				return this || new Function('return this')();
-/******/ 			} catch (e) {
-/******/ 				if (typeof window === 'object') return window;
-/******/ 			}
-/******/ 		})();
-/******/ 	})();
-/******/ 	
-/************************************************************************/
 var __webpack_exports__ = {};
@@ -1488,4 +1341,4 @@ // This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
 }));
-const listener_1 = __webpack_require__(7251);
-const builder_1 = __webpack_require__(9048);
+const listener_1 = __webpack_require__(1365);
+const builder_1 = __webpack_require__(4119);
 describe('Unit: util/listener', () => {
@@ -1492,0 +1345,0 @@ describe('bind', () => {

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.348",
+  "version": "0.0.349",
   "description": "A value-level and type-level DOM builder.",
@@ -36,29 +36,29 @@ "private": false,
   "dependencies": {
-    "spica": "0.0.761",
+    "spica": "0.0.794",
     "typed-query-selector": "^2.11.0"
   },
   "devDependencies": {
-    "@types/benchmark": "2.1.4",
-    "@types/mocha": "10.0.3",
-    "@types/power-assert": "1.5.10",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@types/benchmark": "2.1.5",
+    "@types/mocha": "10.0.6",
+    "@types/power-assert": "1.5.12",
+    "@typescript-eslint/parser": "^7.1.1",
     "babel-loader": "^9.1.3",
     "babel-plugin-unassert": "^3.2.0",
     "concurrently": "^8.2.2",
-    "eslint": "^8.53.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-redos": "^4.4.5",
     "eslint-webpack-plugin": "^4.0.1",
     "glob": "^10.3.10",
-    "i18next": "22.4.4",
-    "karma": "^6.4.2",
+    "i18next": "23.10.1",
+    "karma": "^6.4.3",
     "karma-chrome-launcher": "^3.2.0",
     "karma-coverage": "^2.2.1",
-    "karma-firefox-launcher": "^2.1.2",
+    "karma-firefox-launcher": "^2.1.3",
     "karma-mocha": "^2.0.1",
     "karma-power-assert": "^1.0.0",
-    "mocha": "^10.2.0",
-    "npm-check-updates": "^16.14.6",
-    "ts-loader": "^9.5.0",
-    "typescript": "5.2.2",
-    "webpack": "^5.89.0",
+    "mocha": "^10.3.0",
+    "npm-check-updates": "^16.14.15",
+    "ts-loader": "^9.5.1",
+    "typescript": "5.4.2",
+    "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4",
@@ -65,0 +65,0 @@ "webpack-merge": "^5.10.0"

query.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.348 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.349 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -3,0 +3,0 @@ if(typeof exports === 'object' && typeof module === 'object')

query.test.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.348 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.349 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -16,3 +16,3 @@ if(typeof exports === 'object' && typeof module === 'object')
 
-/***/ 5406:
+/***/ 5413:
 /***/ ((__unused_webpack_module, exports) => {
@@ -40,3 +40,3 @@
 
-/***/ 5529:
+/***/ 1934:
 /***/ ((__unused_webpack_module, exports) => {
@@ -57,3 +57,3 @@
 
-/***/ 1808:
+/***/ 6925:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -67,4 +67,4 @@
 exports.reduce = exports.memoize = void 0;
-const alias_1 = __webpack_require__(5406);
-const compare_1 = __webpack_require__(5529);
+const alias_1 = __webpack_require__(5413);
+const compare_1 = __webpack_require__(1934);
 function memoize(f, identify, memory) {
@@ -136,3 +136,3 @@ if (typeof identify === 'object') {
 
-/***/ 7521:
+/***/ 5761:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -146,4 +146,4 @@
 exports.defrag = exports.prepend = exports.append = exports.isChildren = exports.define = exports.element = exports.text = exports.math = exports.svg = exports.html = exports.frag = exports.shadow = void 0;
-const alias_1 = __webpack_require__(5406);
-const memoize_1 = __webpack_require__(1808);
+const alias_1 = __webpack_require__(5413);
+const memoize_1 = __webpack_require__(6925);
 var caches;
@@ -337,3 +337,3 @@ (function (caches) {
 
-/***/ 1160:
+/***/ 2929:
 /***/ ((__unused_webpack_module, exports) => {
@@ -409,4 +409,4 @@
 }));
-const query_1 = __webpack_require__(1160);
-const dom_1 = __webpack_require__(7521);
+const query_1 = __webpack_require__(2929);
+const dom_1 = __webpack_require__(5761);
 describe('Unit: util/query', () => {
@@ -413,0 +413,0 @@ describe('querySelectorWith', () => {

README.md

@@ -5,2 +5,6 @@ # typed-dom
 
+*Professional programmers dislike being deprived of control and prefer to have complete control over everything. No magic needed. Only amateurs prefer magic.*
+
+## Abstract
+
 A value-level and type-level DOM builder.
@@ -24,11 +28,21 @@
 
+## Assurance
+
+Problems of DOM manipulation arise when the expected DOM structure differs from the actual DOM structure. Typed-DOM assures by type that the expected DOM structure and the actual DOM structure match. Assured reliable DOM manipulation is all you need. Assurance by type is best, and assurance by template is wasteful and inflexible.
+
+|Product|Approach|Problems|
+|-|-|-|
+|Typed-DOM|Type|-|
+|jQuery|-|Breakable|
+|React|Template|Wasteful, Inflexible|
+
 ## Difference
 
-DOM manipulation must be easy and reliable, but it doesn't need virtual DOM or unique syntax. Typed-DOM is a minimal API set for easy and reliable DOM manipulation.
+DOM manipulation must be easy and reliable, and it doesn't need virtual DOM or unique syntax. Typed-DOM is a minimal API set for easy and reliable DOM manipulation.
 
-|Product|Access|Dependence|Extensibility|Problem|
+|Product|Access|Dependence|Extensibility|Problems|
 |-|-|-|-|-|
 |Typed-DOM|Type|Interface|API, Fork|Slow construction|
 |jQuery|Query|Implementation|Plugin|Breakable, Implicit dependency|
-|React|Create all and search difference|Implementation|Component|Breakable, Waste, Complex, Severely dependent, Incomplete vain reinvention of the browsers|
+|React|Create all and search difference|Implementation|Component|Breakable, Wasteful, Complex, Uncontrollable, Severely dependent, Incomplete vain reinvention of the browsers|
 
@@ -38,3 +52,2 @@ ## Usage
 Build a Typed-DOM component with styling.
-`$scope` selectors are replaced with `:host`, `#<id>`, or `.<generated-id>`.
 
@@ -45,3 +58,3 @@ ```ts
 const dom = HTML.article({
-  style: HTML.style('$scope { color: red; }'),
+  style: HTML.style('@scope { & { color: red; } }'),
   title: HTML.h1('Title'),
@@ -149,3 +162,3 @@ content: HTML.ul([
   private readonly dom = HTML.section({
-    style: HTML.style('$scope { color: red; }'),
+    style: HTML.style('@scope { & { color: red; } }'),
     content: HTML.ul([
@@ -174,3 +187,3 @@ HTML.li('item'),
   private readonly dom = Shadow.section({
-    style: HTML.style('$scope { color: red; }'),
+    style: HTML.style('@scope { & { color: red; } }'),
     content: HTML.ul([
@@ -214,3 +227,3 @@ HTML.li('item'),
   private readonly dom = Shadow.section({ onconnect: '' }, {
-    style: HTML.style('$scope { color: red; }'),
+    style: HTML.style('@scope { & { color: red; } }'),
     content: HTML.p(''),
@@ -478,2 +491,3 @@ });
 - querySelectorAllWith
+- scope
 
@@ -480,0 +494,0 @@ ## Events

src/proxy.ts

 import { isArray } from 'spica/alias';
 import { symbols, Listeners } from './internal';
 import { TagNameMap, Attrs, Factory as BaseFactory } from './util/dom';
-import { identity } from './util/identity';
 
@@ -80,3 +79,3 @@ declare global {
       case type === 'string':
-        this.type = ElChildType.Text
+        this.type = ElChildType.Text;
         break;
@@ -117,25 +116,2 @@ case type === 'object' && typeof children['nodeType'] === 'number':
   }
-  private readonly $selector = this.element === this.container
-    ? new Selector(this.element)
-    : undefined;
-  private get selector(): string {
-    return this.$selector?.selector ?? ':host';
-  }
-  private format(child: El): void {
-    switch (child.tag) {
-      case 'style':
-      case 'STYLE': {
-        let changed = '';
-        const style = child.element.innerHTML.replace(
-          /(?<![\w\-$[])\$scope(?![\w\-$])|"(?:\\.|[^\\"])+"?|'(?:\\.|[^\\'])+'?|\/\*(?:(?!\*\/).)+(?:\*\/)?|\/\/[^\r\n]+/sg,
-          (...$) => $[0][0] === '$' ? changed = this.selector : $[0]);
-        if (!changed) return;
-        child.element.textContent = style;
-        assert(child.element.children.length === 0);
-        return;
-      }
-      default:
-        return;
-    }
-  }
   private isInternalUpdate = false;
@@ -215,3 +191,2 @@ private observe(children: El.Children.Struct): El.Children.Struct {
             throwErrorIfUnavailable(newChild, container);
-            this.format(newChild);
             const hasListener = Listeners.of(newChild)?.haveConnectionListener();
@@ -235,3 +210,2 @@ if (newChild.element.parentNode !== container) {
             throwErrorIfUnavailable(newChild, container);
-            this.format(newChild);
             assert(!addedChildren.includes(newChild));
@@ -269,3 +243,2 @@ Listeners.of(newChild)?.haveConnectionListener() && addedChildren.push(newChild) && listeners.add(newChild);
             throwErrorIfUnavailable(newChild, container);
-            this.format(newChild);
             const hasListener = Listeners.of(newChild)?.haveConnectionListener();
@@ -287,3 +260,2 @@ if (newChild.element.parentNode !== container) {
             throwErrorIfUnavailable(newChild, container);
-            this.format(newChild);
             container.replaceChild(newChild.element, oldChild.element);
@@ -313,31 +285,2 @@ assert(!oldChild.element.parentNode);
 
-class Selector {
-  constructor(private readonly element: Element) {
-  }
-  private $id = '';
-  private get id(): string {
-    if (this.$id) return this.$id;
-    this.$id = this.element.id;
-    if (/^[a-z][\w-]*$/i.test(this.$id)) return this.$id;
-    this.$id = `rnd-${identity()}`;
-    assert(!this.element.classList.contains(this.$id));
-    assert(/^[a-z][\w-]*$/i.test(this.$id));
-    this.element.classList.add(this.$id);
-    assert(this.element.matches(`.${this.$id}`));
-    return this.$id;
-  }
-  private $selector = '';
-  public get selector(): string {
-    if (this.$selector) return this.$selector;
-    switch (true) {
-      //case this.element !== this.container:
-      //  return this.$query = ':host';
-      case this.id === this.element.id:
-        return this.$selector = `#${this.id}`;
-      default:
-        return this.$selector = `.${this.id}`;
-    }
-  }
-}
-
 function throwErrorIfUnavailable(child: El, newParent?: ParentNode): void {
@@ -344,0 +287,0 @@ const oldParent = child.element.parentNode;

test/integration/index.test.ts

@@ -335,51 +335,2 @@ import { Shadow, HTML, SVG, El, Attrs, shadow, frag, html, define } from '../../index';
 
-    it('scope', function () {
-      const template = [
-        '$scope{}',
-        '$scope:empty {}',
-        '$scope[id] {}',
-        '$scope#id {}',
-        '$scope.class {}',
-        '$scope div {}',
-        '$scope>div {}',
-        '$scope,$scope {}',
-        '$scope{}$scope{}',
-        '  $scope  {}',
-        '[$scope]{}',
-        '$scope/* */ {}',
-        '/* */$scope {}',
-        '/*}$scope{*/',
-        '//}$scope{',
-        '$scope{ content: "}$scope{"; }',
-        "$scope{ content: '}$scope{'; }",
-      ].join('\n');
-      const style = [
-        '#id{}',
-        '#id:empty {}',
-        '#id[id] {}',
-        '#id#id {}',
-        '#id.class {}',
-        '#id div {}',
-        '#id>div {}',
-        '#id,#id {}',
-        '#id{}#id{}',
-        '  #id  {}',
-        '[$scope]{}',
-        '#id/* */ {}',
-        '/* */#id {}',
-        '/*}$scope{*/',
-        '//}$scope{',
-        '#id{ content: "}$scope{"; }',
-        "#id{ content: '}$scope{'; }",
-      ].join('\n');
-      const id = 'id';
-      assert(HTML.div({ id }, [HTML.style(template)]).children[0].element.innerHTML === style);
-      assert(HTML.div({ id }, { style: HTML.style(template) }).children.style.element.innerHTML === style);
-      assert(HTML.div([HTML.style('$scope {}')]).element.className.match(/^rnd-\w+$/));
-      assert(Shadow.div([HTML.style('$scope {}')]).element.outerHTML === '<div></div>');
-      assert(Shadow.div([HTML.style('$scope {}')]).children[0].element.innerHTML === ':host {}');
-      assert(HTML.div([HTML.style('<script>')]).children[0].element.children.length === 0);
-      assert(HTML.div([HTML.style('$scope{}<script>')]).children[0].element.children.length === 0);
-    });
-
     it('clear', function () {
@@ -606,3 +557,3 @@ assert(HTML.p(() => HTML.p('a').element).element.innerHTML === 'a');
         private readonly dom = HTML.section({
-          style: HTML.style('$scope { color: red; }'),
+          style: HTML.style('@scope { & { color: red; } }'),
           content: HTML.ul([
@@ -643,3 +594,3 @@ HTML.li('item'),
         private readonly dom = Shadow.section({
-          style: HTML.style('$scope { color: red; }'),
+          style: HTML.style('@scope { & { color: red; } }'),
           content: HTML.ul([
@@ -686,3 +637,3 @@ HTML.li('item'),
         private readonly dom = Shadow.section({ onconnect: '' }, {
-          style: HTML.style('$scope { color: red; }'),
+          style: HTML.style('@scope { & { color: red; } }'),
           content: HTML.p(''),
@@ -752,2 +703,3 @@ });
           const el = factory?.(html, tag, {}) ?? html(tag);
+          // @ts-ignore
           el.textContent = translator.t(text, data)
@@ -777,2 +729,3 @@ ?? `{% Failed to translate "${text}". %}`;
             onmutate: ev => {
+              // @ts-ignore
               ev.currentTarget.textContent = translator.t(children, data)
@@ -779,0 +732,0 @@ ?? `{% Failed to translate "${children}". %}`;

test/interface/index.test.ts

@@ -6,3 +6,3 @@ import {
   querySelectorAll, querySelectorWith, querySelectorAllWith,
-  identity,
+  scope,
 } from '../../index';
@@ -117,4 +117,4 @@
 
-    it('identity', function () {
-      assert(typeof identity === 'function');
+    it('scope', function () {
+      assert(typeof scope === 'function');
     });
@@ -121,0 +121,0 @@

No alert changes

Improved metrics

Number of lines in readme file

501

increased by2.87%

Worsened metrics

Total package byte prevSize

406348

decreased by-4.37%

Number of package files

106

decreased by-2.75%

Lines of code

8945

decreased by-6.02%

Dependency changes

• + Addedspica@0.0.794(transitive)

• - Removedspica@0.0.761(transitive)

• Updatedspica@0.0.794