typed-dom - npm Package Compare versions

Comparing version 0.0.343 to 0.0.344

dist/src/proxy.d.ts

@@ -36,6 +36,4 @@ import { symbols, Listeners } from './internal';
     constructor(tag: T, element: E, children: C, container?: Element | ShadowRoot);
-    private $id;
-    private get id();
-    private $query;
-    private get query();
+    private readonly $selector;
+    private get selector();
     private format;
@@ -42,0 +40,0 @@ private isInternalUpdate;

dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.343 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.344 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')

identity.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.343 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.344 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')

index.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.343 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.344 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -857,4 +857,3 @@ if(typeof exports === 'object' && typeof module === 'object')
     this.container = container;
-    this.$id = '';
-    this.$query = '';
+    this.$selector = this.element === this.container ? new Selector(this.element) : undefined;
     this.isInternalUpdate = false;
@@ -906,21 +905,5 @@ this.isInit = true;
   }
-  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() {
+    return this.$selector?.selector ?? ':host';
   }
-  get query() {
-    if (this.$query) return this.$query;
-    switch (true) {
-      case this.element !== this.container:
-        return this.$query = ':host';
-      case this.id === this.element.id:
-        return this.$query = `#${this.id}`;
-      default:
-        return this.$query = `.${this.id}`;
-    }
-  }
   format(child) {
@@ -931,6 +914,5 @@ switch (child.tag) {
         {
-          const source = child.element.innerHTML;
-          if (!source.includes('$scope')) return;
-          const style = source.replace(/(^|[>~+,}/])(\s*)\$scope(?!\w)(?=\s*[A-Za-z#.:[>~+,{/])/g, (...$) => `${$[1]}${$[2]}${this.query}`);
-          if (style === source) return;
+          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;
@@ -1083,2 +1065,28 @@ return;
 _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) {
@@ -1085,0 +1093,0 @@ const oldParent = child.element.parentNode;

listener.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.343 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.344 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')

listener.test.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.343 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.344 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 (function webpackUniversalModuleDefinition(root, factory) {
@@ -857,4 +857,3 @@ if(typeof exports === 'object' && typeof module === 'object')
     this.container = container;
-    this.$id = '';
-    this.$query = '';
+    this.$selector = this.element === this.container ? new Selector(this.element) : undefined;
     this.isInternalUpdate = false;
@@ -906,21 +905,5 @@ this.isInit = true;
   }
-  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() {
+    return this.$selector?.selector ?? ':host';
   }
-  get query() {
-    if (this.$query) return this.$query;
-    switch (true) {
-      case this.element !== this.container:
-        return this.$query = ':host';
-      case this.id === this.element.id:
-        return this.$query = `#${this.id}`;
-      default:
-        return this.$query = `.${this.id}`;
-    }
-  }
   format(child) {
@@ -931,6 +914,5 @@ switch (child.tag) {
         {
-          const source = child.element.innerHTML;
-          if (!source.includes('$scope')) return;
-          const style = source.replace(/(^|[>~+,}/])(\s*)\$scope(?!\w)(?=\s*[A-Za-z#.:[>~+,{/])/g, (...$) => `${$[1]}${$[2]}${this.query}`);
-          if (style === source) return;
+          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;
@@ -1083,2 +1065,28 @@ return;
 _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) {
@@ -1085,0 +1093,0 @@ const oldParent = child.element.parentNode;

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.343",
+  "version": "0.0.344",
   "description": "A value-level and type-level DOM builder.",
@@ -5,0 +5,0 @@ "private": false,

query.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.343 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.344 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.343 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.344 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')

src/proxy.ts

@@ -116,24 +116,8 @@ import { isArray } from 'spica/alias';
   }
-  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));
-    this.element.classList.add(this.$id);
-    return this.$id;
+  private readonly $selector = this.element === this.container
+    ? new Selector(this.element)
+    : undefined;
+  private get selector(): string {
+    return this.$selector?.selector ?? ':host';
   }
-  private $query = '';
-  private get query(): string {
-    if (this.$query) return this.$query;
-    switch (true) {
-      case this.element !== this.container:
-        return this.$query = ':host';
-      case this.id === this.element.id:
-        return this.$query = `#${this.id}`;
-      default:
-        return this.$query = `.${this.id}`;
-    }
-  }
   private format(child: El): void {
@@ -143,10 +127,7 @@ switch (child.tag) {
       case 'STYLE': {
-        const source = child.element.innerHTML;
-        if (!source.includes('$scope')) return;
-        const style = source.replace(
-          /(^|[>~+,}/])(\s*)\$scope(?!\w)(?=\s*[A-Za-z#.:[>~+,{/])/g,
-          (...$) => `${$[1]}${$[2]}${this.query}`);
-        assert(!this.$query || style !== source);
-        if (style === source) return;
-        assert(/^[:#.][a-z][\w-]+$/i.test(this.query));
+        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;
@@ -328,2 +309,31 @@ assert(child.element.children.length === 0);
 
+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 {
@@ -330,0 +340,0 @@ const oldParent = child.element.parentNode;

test/integration/index.test.ts

@@ -346,8 +346,31 @@ import { Shadow, HTML, SVG, El, Attrs, shadow, frag, html, define } from '../../index';
         '$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';
-      const style = template.replace(/\$scope/g, `#${id}`);
       assert(HTML.div({ id }, [HTML.style(template)]).children[0].element.innerHTML === style);
@@ -358,3 +381,2 @@ assert(HTML.div({ id }, { style: HTML.style(template) }).children.style.element.innerHTML === style);
       assert(Shadow.div([HTML.style('$scope {}')]).children[0].element.innerHTML === ':host {}');
-      assert(Shadow.div([HTML.style('/* $scope */$scope/* $scope */{content:" $scope "}')]).children[0].element.innerHTML === '/* $scope */:host/* $scope */{content:" $scope "}');
       assert(HTML.div([HTML.style('<script>')]).children[0].element.children.length === 0);
@@ -361,0 +383,0 @@ assert(HTML.div([HTML.style('$scope{}<script>')]).children[0].element.children.length === 0);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

424611

increased by0.34%

Lines of code

9523

increased by0.56%

No dependency changes