typed-dom - npm Package Compare versions

Comparing version 0.0.258 to 0.0.259

dist/typed-dom.js

@@ -1,2 +0,2 @@
-/*! typed-dom v0.0.258 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
+/*! typed-dom v0.0.259 https://github.com/falsandtru/typed-dom | (c) 2016, falsandtru | (Apache-2.0 AND MPL-2.0) License */
 require = function () {
@@ -687,6 +687,7 @@ function r(e, n, t) {
                             return true;
-                        for (const i in param) {
-                            if (!(0, alias_1.hasOwnProperty)(param, i))
+                        for (const name in param) {
+                            if (!(0, alias_1.hasOwnProperty)(param, name))
                                 continue;
-                            return typeof param[i] === 'object' && !!param[i];
+                            const p = param[name];
+                            return !!p && typeof p === 'object';
                         }
@@ -827,7 +828,10 @@ return true;
                         return;
-                    const target = /(^|[,}]|\*\/)(\s*)\$scope(?=[\s~+[{:>,])/g;
-                    const style = child.element.innerHTML;
-                    if (!target.test(style))
+                    const source = child.element.innerHTML;
+                    if (!source.includes('$scope'))
                         return;
-                    child.element.innerHTML = style.replace(target, `$1$2${ this[privates.query] }`);
+                    const scope = /(^|[>~+,}/])(\s*)\$scope(?!\w)(?=\s*[A-Za-z#.:[>~+,{/])/g;
+                    const style = source.replace(scope, (...$) => `${ $[1] }${ $[2] }${ this[privates.query] }`);
+                    if (style === source)
+                        return;
+                    child.element.innerHTML = style;
                     child.element.firstElementChild && child.element.replaceChildren();
@@ -922,3 +926,5 @@ }
                                 const sourceChildren = children;
-                                for (const name of (0, alias_1.ObjectKeys)(sourceChildren)) {
+                                for (const name in sourceChildren) {
+                                    if (!(0, alias_1.hasOwnProperty)(sourceChildren, name))
+                                        continue;
                                     const newChild = sourceChildren[name];
@@ -937,4 +943,4 @@ throwErrorIfNotUsable(newChild, this[privates.container]);
                                 break;
-                            for (const name of (0, alias_1.ObjectKeys)(sourceChildren)) {
-                                if (name in {})
+                            for (const name in sourceChildren) {
+                                if (!(0, alias_1.hasOwnProperty)(sourceChildren, name))
                                     continue;
@@ -952,4 +958,3 @@ const newChild = sourceChildren[name];
                                     ((_j = events(newChild)) === null || _j === void 0 ? void 0 : _j.connect) && addedChildren.push(newChild);
-                                    container.insertBefore(newChild.element, oldChild.element);
-                                    container.removeChild(oldChild.element);
+                                    container.replaceChild(newChild.element, oldChild.element);
                                     ((_k = events(oldChild)) === null || _k === void 0 ? void 0 : _k.disconnect) && removedChildren.push(oldChild);
@@ -1065,3 +1070,5 @@ } else {
                     return el;
-                for (const name of (0, alias_1.ObjectKeys)(attrs)) {
+                for (const name in attrs) {
+                    if (!(0, alias_1.hasOwnProperty)(attrs, name))
+                        continue;
                     const value = attrs[name];
@@ -1120,2 +1127,3 @@ switch (typeof value) {
                 const acc = [];
+                let appendable = false;
                 for (let i = 0; i < nodes.length; ++i) {
@@ -1125,3 +1133,9 @@ const node = nodes[i];
                         continue;
-                    acc.length > 0 && typeof node === 'string' && typeof nodes[i - 1] === 'string' ? acc[acc.length - 1] += node : acc.push(node);
+                    if (typeof node === 'string') {
+                        appendable ? acc[acc.length - 1] += node : acc.push(node);
+                        appendable = true;
+                    } else {
+                        acc.push(node);
+                        appendable = false;
+                    }
                 }
@@ -1128,0 +1142,0 @@ return acc;

dom.ts

 import { Symbol, document } from 'spica/global';
-import { ObjectKeys } from 'spica/alias';
+import { hasOwnProperty } from 'spica/alias';
 import { memoize } from 'spica/memoize';
@@ -114,3 +114,4 @@
   if (!attrs) return el;
-  for (const name of ObjectKeys(attrs)) {
+  for (const name in attrs) {
+    if (!hasOwnProperty(attrs, name)) continue;
     const value = attrs[name];
@@ -170,14 +171,22 @@ switch (typeof value) {
 
-export function defrag<T extends Element | string>(nodes: ArrayLike<T>): T[];
-export function defrag(nodes: ArrayLike<Element | string>): (Element | string)[] {
-  assert(Array.from(nodes).every(n => typeof n === 'string' || n instanceof Element));
-  const acc: (Element | string)[] = [];
+export function defrag<T extends Node | string>(nodes: ArrayLike<T>): T[];
+export function defrag(nodes: ArrayLike<Node | string>): (Node | string)[] {
+  assert(Array.from(nodes).every(n => typeof n === 'string' || n instanceof Node));
+  const acc: (Node | string)[] = [];
+  let appendable = false;
   for (let i = 0; i < nodes.length; ++i) {
     const node = nodes[i];
     if (node === '') continue;
-    acc.length > 0 && typeof node === 'string' && typeof nodes[i - 1] === 'string'
-      ? acc[acc.length - 1] += node
-      : acc.push(node);
+    if (typeof node === 'string') {
+      appendable
+        ? acc[acc.length - 1] += node
+        : acc.push(node);
+      appendable = true;
+    }
+    else {
+      acc.push(node);
+      appendable = false;
+    }
   }
   return acc;
 }

package.json

 {
   "name": "typed-dom",
-  "version": "0.0.258",
+  "version": "0.0.259",
   "description": "A DOM component builder creating type-level DOM structures.",
@@ -5,0 +5,0 @@ "private": false,

README.md

@@ -158,3 +158,3 @@ # typed-dom
 const component = HTML.article({
-  style: HTML.style(`$scope ul { width: 100px; }`),
+  style: HTML.style(`$scope { color: red; }`),
   title: HTML.h1(`Title`),
@@ -213,3 +213,3 @@ content: HTML.ul([
 // Inspect
-component.element.outerHTML; // '<article class="RANDOM"><style>.RANDOM ul { width: 100px; }</style><h1>Title</h1><ul><li>item</li><li>item</li></ul></article>'
+component.element.outerHTML; // '<article class="RANDOM"><style>.RANDOM { color: red; }</style><h1>Title</h1><ul><li>item</li><li>item</li></ul></article>'
 component.children.title.element.outerHTML; // '<h1>Title</h1>'
@@ -251,3 +251,3 @@ component.children.title.children; // 'Title'
   private readonly dom = HTML.section({
-    style: HTML.style(`$scope ul { width: 100px; }`),
+    style: HTML.style(`$scope { color: red; }`),
     content: HTML.ul([
@@ -268,3 +268,3 @@ HTML.li(`item`),
   private readonly dom = Shadow.section({
-    style: HTML.style(`ul { width: 100px; }`),
+    style: HTML.style(`$scope { color: red; }`),
     content: HTML.ul([
@@ -300,3 +300,3 @@ HTML.li(`item`),
   private readonly dom = Shadow.section({
-    style: HTML.style(`ul { width: 100px; }`),
+    style: HTML.style(`$scope { color: red; }`),
     content: HTML.ul([
@@ -303,0 +303,0 @@ HTML.li(`item`),

src/builder.ts

@@ -84,5 +84,6 @@ import { Symbol } from 'spica/global';
       if (param[Symbol.iterator]) return true;
-      for (const i in param as Attrs) {
-        if (!hasOwnProperty(param, i)) continue;
-        return typeof param[i] === 'object' && !!param[i];
+      for (const name in param as Attrs) {
+        if (!hasOwnProperty(param, name)) continue;
+        const p = param[name];
+        return !!p && typeof p === 'object';
       }
@@ -89,0 +90,0 @@ return true;

src/proxy.ts

 import { Event } from 'spica/global';
-import { isArray, ObjectDefineProperties, ObjectKeys } from 'spica/alias';
+import { isArray, hasOwnProperty, ObjectDefineProperties, ObjectKeys } from 'spica/alias';
 import { Attrs } from './util/dom';
@@ -155,7 +155,11 @@ import { identity } from './util/identity';
     if (child.element.tagName.toUpperCase() !== 'STYLE') return;
-    const target = /(^|[,}]|\*\/)(\s*)\$scope(?=[\s~+[{:>,])/g;
-    const style = child.element.innerHTML;
-    if (!target.test(style)) return;
+    const source = child.element.innerHTML;
+    if (!source.includes('$scope')) return;
+    const scope = /(^|[>~+,}/])(\s*)\$scope(?!\w)(?=\s*[A-Za-z#.:[>~+,{/])/g;
+    const style = source.replace(scope, (...$) => `${$[1]}${$[2]}${this[privates.query]}`);
+    assert(!this[privates.query_] || style !== source);
+    if (style === source) return;
+    child.element.innerHTML = style;
     assert(/^[:#.][\w-]+$/.test(this[privates.query]));
-    child.element.innerHTML = style.replace(target, `$1$2${this[privates.query]}`);
+    assert(child.element.children.length === 0);
     child.element.firstElementChild && child.element.replaceChildren();
@@ -260,4 +264,4 @@ }
           const sourceChildren = children as El.Children.Struct;
-          for (const name of ObjectKeys(sourceChildren)) {
-            assert(name in {} === false);
+          for (const name in sourceChildren) {
+            if (!hasOwnProperty(sourceChildren, name)) continue;
             const newChild = sourceChildren[name];
@@ -276,4 +280,4 @@ throwErrorIfNotUsable(newChild, this[privates.container]);
         if (sourceChildren === targetChildren) break;
-        for (const name of ObjectKeys(sourceChildren)) {
-          if (name in {}) continue;
+        for (const name in sourceChildren) {
+          if (!hasOwnProperty(sourceChildren, name)) continue;
           const newChild = sourceChildren[name];
@@ -289,4 +293,4 @@ const oldChild = targetChildren[name];
             events(newChild)?.connect && addedChildren.push(newChild);
-            container.insertBefore(newChild.element, oldChild.element);
-            container.removeChild(oldChild.element);
+            container.replaceChild(newChild.element, oldChild.element);
+            assert(!oldChild.element.parentNode);
             assert(!removedChildren.includes(oldChild));
@@ -293,0 +297,0 @@ events(oldChild)?.disconnect && removedChildren.push(oldChild);

src/util/dom.ts

 import { Symbol, document } from 'spica/global';
-import { ObjectKeys } from 'spica/alias';
+import { hasOwnProperty } from 'spica/alias';
 import { memoize } from 'spica/memoize';
@@ -114,3 +114,4 @@
   if (!attrs) return el;
-  for (const name of ObjectKeys(attrs)) {
+  for (const name in attrs) {
+    if (!hasOwnProperty(attrs, name)) continue;
     const value = attrs[name];
@@ -170,14 +171,22 @@ switch (typeof value) {
 
-export function defrag<T extends Element | string>(nodes: ArrayLike<T>): T[];
-export function defrag(nodes: ArrayLike<Element | string>): (Element | string)[] {
-  assert(Array.from(nodes).every(n => typeof n === 'string' || n instanceof Element));
-  const acc: (Element | string)[] = [];
+export function defrag<T extends Node | string>(nodes: ArrayLike<T>): T[];
+export function defrag(nodes: ArrayLike<Node | string>): (Node | string)[] {
+  assert(Array.from(nodes).every(n => typeof n === 'string' || n instanceof Node));
+  const acc: (Node | string)[] = [];
+  let appendable = false;
   for (let i = 0; i < nodes.length; ++i) {
     const node = nodes[i];
     if (node === '') continue;
-    acc.length > 0 && typeof node === 'string' && typeof nodes[i - 1] === 'string'
-      ? acc[acc.length - 1] += node
-      : acc.push(node);
+    if (typeof node === 'string') {
+      appendable
+        ? acc[acc.length - 1] += node
+        : acc.push(node);
+      appendable = true;
+    }
+    else {
+      acc.push(node);
+      appendable = false;
+    }
   }
   return acc;
 }

test/integration/package.ts

@@ -290,12 +290,26 @@ import { API, Shadow, HTML, SVG, El, shadow, html } from '../..';
     it('scope', function () {
-      const template = `$scope {}\n  $scope {}`;
-      const result = template.replace(/\$scope/g, '#test');
-      assert(HTML.div({ id: 'test' }, [HTML.style(template)]).children[0].element.innerHTML === result);
-      assert(HTML.div({ id: 'test' }, { style: HTML.style(template) }).children.style.element.innerHTML === result);
-      assert(HTML.div({ id: 'test' }, [HTML.style(`<script>`)]).children[0].element.children.length === 0);
-      console.debug('id', HTML.div([HTML.style(template)]).element.className);
-      assert(HTML.div([HTML.style(template)]).element.className.startsWith('rnd-'));
-      assert(HTML.div([HTML.style(template)]).children[0].element.innerHTML.match(/\.[\w\-]+\s/gm)!.length === 2);
-      assert(Shadow.div([HTML.style(template)]).element.className === '');
-      assert(Shadow.div([HTML.style(template)]).children[0].element.innerHTML === template.replace(/\$scope/g, ':host'));
+      const template = [
+        '$scope{}',
+        '$scope:empty {}',
+        '$scope[id] {}',
+        '$scope#id {}',
+        '$scope.class {}',
+        '$scope div {}',
+        '$scope>div {}',
+        '$scope,$scope {}',
+        '$scope{}$scope{}',
+        '$scope/* */ {}',
+        '/* */$scope {}',
+        '  $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);
+      assert(HTML.div({ id }, { style: HTML.style(template) }).children.style.element.innerHTML === style);
+      assert(HTML.div([HTML.style('$scope {}')]).element.className.match(/^rnd-\w+-\d+$/));
+      assert(Shadow.div([HTML.style('$scope {}')]).element.outerHTML === '<div></div>');
+      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);
+      assert(HTML.div([HTML.style(`$scope{}<script>`)]).children[0].element.children.length === 0);
     });
@@ -460,3 +474,3 @@
         private readonly dom = HTML.section({
-          style: HTML.style(`$scope ul { width: 100px; }`),
+          style: HTML.style(`$scope { color: red; }`),
           content: HTML.ul([
@@ -487,3 +501,3 @@ HTML.li(`item`)
         private readonly dom = Shadow.section({
-          style: HTML.style(`ul { width: 100px; }`),
+          style: HTML.style(`$scope { color: red; }`),
           content: HTML.ul([
@@ -528,3 +542,3 @@ HTML.li(`item`)
         private readonly dom = Shadow.section({
-          style: HTML.style(`ul { width: 100px; }`),
+          style: HTML.style(`$scope { color: red; }`),
           content: HTML.ul([
@@ -531,0 +545,0 @@ HTML.li(`item`)

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

660475

increased by0.21%

Lines of code

15625

increased by0.33%

No dependency changes