@riotjs/dom-bindings - npm Package Compare versions

Comparing version 5.1.2 to 5.1.3

dist/umd.dom-bindings.js

@@ -114,8 +114,8 @@ (function (global, factory) {
   /**
-   * Create the <template> fragments comment nodes
-   * @return {Object} {{head: Comment, tail: Comment}}
+   * Create the <template> fragments text nodes
+   * @return {Object} {{head: TextNode, tail: TextNode}}
    */
   function createHeadTailPlaceholders() {
-    const head = document.createComment('fragment head');
-    const tail = document.createComment('fragment tail');
+    const head = document.createTextNode('');
+    const tail = document.createTextNode('');
 
@@ -214,3 +214,3 @@ head[HEAD_SYMBOL] = true;
   function isTemplate(el) {
-    return el.tagName === 'TEMPLATE'
+    return el.tagName.toLowerCase() === 'template'
   }
@@ -1282,2 +1282,3 @@
     const node = selector ? root.querySelector(selector) : root;
+
     // remove eventually additional attributes created only to select this node
@@ -1365,2 +1366,19 @@ if (redundantAttribute) node.removeAttribute(redundantAttribute);
   /**
+   * Get the offset of the <template> tag
+   * @param {HTMLElement} parentNode - template tag parent node
+   * @param {HTMLElement} el - the template tag we want to render
+   * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+   * @returns {number} offset of the <template> tag calculated from its siblings DOM nodes
+   */
+  function getTemplateTagOffset(parentNode, el, meta) {
+    const siblings = Array.from(parentNode.childNodes);
+
+    return Math.max(
+      siblings.indexOf(el),
+      siblings.indexOf(meta.head) + 1,
+      0
+    )
+  }
+
+  /**
    * Template Chunk model
@@ -1387,3 +1405,3 @@ * @type {Object}
       // make sure that the DOM gets created before cloning the template
-      this.dom = this.dom || createTemplateDOM(el, this.html);
+      this.dom = this.dom || createTemplateDOM(el, this.html) || document.createDocumentFragment();
 
@@ -1414,7 +1432,3 @@ return this
       const isTemplateTag = isTemplate(el);
-      const templateTagOffset = isTemplateTag ? Math.max(
-        Array.from(parentNode.childNodes).indexOf(el),
-        0
-      ) : null;
-      this.isTemplateTag = isTemplateTag;
+      const templateTagOffset = isTemplateTag ? getTemplateTagOffset(parentNode, el, meta) : null;
 
@@ -1424,15 +1438,15 @@ // create the DOM if it wasn't created before
 
-      if (this.dom) {
-        // create the new template dom fragment if it want already passed in via meta
-        this.fragment = fragment || this.dom.cloneNode(true);
-      }
+      // create the DOM of this template cloning the original DOM structure stored in this instance
+      // notice that if a documentFragment was passed (via meta) we will use it instead
+      const cloneNode = fragment || this.dom.cloneNode(true);
 
       // store root node
       // notice that for template tags the root note will be the parent tag
-      this.el = this.isTemplateTag ? parentNode : el;
+      this.el = isTemplateTag ? parentNode : el;
+
       // create the children array only for the <template> fragments
-      this.children = this.isTemplateTag ? children || Array.from(this.fragment.childNodes) : null;
+      this.children = isTemplateTag ? children || Array.from(cloneNode.childNodes) : null;
 
       // inject the DOM into the el only if a fragment is available
-      if (!avoidDOMInjection && this.fragment) injectDOM(el, this.fragment);
+      if (!avoidDOMInjection && cloneNode) injectDOM(el, cloneNode);
 
@@ -1479,5 +1493,5 @@ // create the bindings
           break
-        // <template> tags should be treated a bit differently
-        // we need to clear their children only if it's explicitly required by the caller
-        // via mustRemoveRoot !== null
+          // <template> tags should be treated a bit differently
+          // we need to clear their children only if it's explicitly required by the caller
+          // via mustRemoveRoot !== null
         case this.children && mustRemoveRoot !== null:
@@ -1487,3 +1501,3 @@ clearChildren(this.children);
 
-        // remove the root node only if the mustRemoveRoot === true
+          // remove the root node only if the mustRemoveRoot === true
         case mustRemoveRoot === true:
@@ -1493,3 +1507,3 @@ removeChild(this.el);
 
-        // otherwise we clean the node children
+          // otherwise we clean the node children
         case mustRemoveRoot !== null:
@@ -1496,0 +1510,0 @@ cleanNode(this.el);

package.json

 {
   "name": "@riotjs/dom-bindings",
-  "version": "5.1.2",
+  "version": "5.1.3",
   "description": "Riot.js DOM bindings",
@@ -49,3 +49,3 @@ "main": "dist/umd.dom-bindings.js",
     "coveralls": "^3.1.0",
-    "eslint": "^7.27.0",
+    "eslint": "^7.28.0",
     "eslint-config-riot": "^3.0.0",
@@ -57,3 +57,3 @@ "esm": "^3.2.25",
     "nyc": "^15.1.0",
-    "rollup": "^2.50.4",
+    "rollup": "^2.51.2",
     "rollup-plugin-alias": "^2.2.0",
@@ -66,4 +66,4 @@ "rollup-plugin-node-resolve": "^5.2.0",
   "dependencies": {
-    "@riotjs/util": "^2.0.3"
+    "@riotjs/util": "^2.0.4"
   }
 }

src/binding.js

@@ -30,2 +30,3 @@ import {SIMPLE} from '@riotjs/util/binding-types'
   const node = selector ? root.querySelector(selector) : root
+
   // remove eventually additional attributes created only to select this node
@@ -32,0 +33,0 @@ if (redundantAttribute) node.removeAttribute(redundantAttribute)

src/template.js

@@ -1,2 +0,2 @@
-import { cleanNode, clearChildren, removeChild } from '@riotjs/util/dom'
+import {cleanNode, clearChildren, removeChild} from '@riotjs/util/dom'
 import {IS_PURE_SYMBOL} from '@riotjs/util/constants'
@@ -21,2 +21,19 @@ import createBinding from './binding'
 /**
+ * Get the offset of the <template> tag
+ * @param {HTMLElement} parentNode - template tag parent node
+ * @param {HTMLElement} el - the template tag we want to render
+ * @param   {Object} meta - meta properties needed to handle the <template> tags in loops
+ * @returns {number} offset of the <template> tag calculated from its siblings DOM nodes
+ */
+function getTemplateTagOffset(parentNode, el, meta) {
+  const siblings = Array.from(parentNode.childNodes)
+
+  return Math.max(
+    siblings.indexOf(el),
+    siblings.indexOf(meta.head) + 1,
+    0
+  )
+}
+
+/**
  * Template Chunk model
@@ -43,3 +60,3 @@ * @type {Object}
     // make sure that the DOM gets created before cloning the template
-    this.dom = this.dom || createTemplateDOM(el, this.html)
+    this.dom = this.dom || createTemplateDOM(el, this.html) || document.createDocumentFragment()
 
@@ -70,7 +87,3 @@ return this
     const isTemplateTag = isTemplate(el)
-    const templateTagOffset = isTemplateTag ? Math.max(
-      Array.from(parentNode.childNodes).indexOf(el),
-      0
-    ) : null
-    this.isTemplateTag = isTemplateTag
+    const templateTagOffset = isTemplateTag ? getTemplateTagOffset(parentNode, el, meta) : null
 
@@ -80,15 +93,15 @@ // create the DOM if it wasn't created before
 
-    if (this.dom) {
-      // create the new template dom fragment if it want already passed in via meta
-      this.fragment = fragment || this.dom.cloneNode(true)
-    }
+    // create the DOM of this template cloning the original DOM structure stored in this instance
+    // notice that if a documentFragment was passed (via meta) we will use it instead
+    const cloneNode = fragment || this.dom.cloneNode(true)
 
     // store root node
     // notice that for template tags the root note will be the parent tag
-    this.el = this.isTemplateTag ? parentNode : el
+    this.el = isTemplateTag ? parentNode : el
+
     // create the children array only for the <template> fragments
-    this.children = this.isTemplateTag ? children || Array.from(this.fragment.childNodes) : null
+    this.children = isTemplateTag ? children || Array.from(cloneNode.childNodes) : null
 
     // inject the DOM into the el only if a fragment is available
-    if (!avoidDOMInjection && this.fragment) injectDOM(el, this.fragment)
+    if (!avoidDOMInjection && cloneNode) injectDOM(el, cloneNode)
 
@@ -135,5 +148,5 @@ // create the bindings
         break
-      // <template> tags should be treated a bit differently
-      // we need to clear their children only if it's explicitly required by the caller
-      // via mustRemoveRoot !== null
+        // <template> tags should be treated a bit differently
+        // we need to clear their children only if it's explicitly required by the caller
+        // via mustRemoveRoot !== null
       case this.children && mustRemoveRoot !== null:
@@ -143,3 +156,3 @@ clearChildren(this.children)
 
-      // remove the root node only if the mustRemoveRoot === true
+        // remove the root node only if the mustRemoveRoot === true
       case mustRemoveRoot === true:
@@ -149,3 +162,3 @@ removeChild(this.el)
 
-      // otherwise we clean the node children
+        // otherwise we clean the node children
       case mustRemoveRoot !== null:
@@ -152,0 +165,0 @@ cleanNode(this.el)

src/util/create-head-tail-placeholders.js

@@ -5,8 +5,8 @@ import {HEAD_SYMBOL, TAIL_SYMBOL} from '../constants'
 /**
- * Create the <template> fragments comment nodes
- * @return {Object} {{head: Comment, tail: Comment}}
+ * Create the <template> fragments text nodes
+ * @return {Object} {{head: TextNode, tail: TextNode}}
  */
 export default function createHeadTailPlaceholders() {
-  const head = document.createComment('fragment head')
-  const tail = document.createComment('fragment tail')
+  const head = document.createTextNode('')
+  const tail = document.createTextNode('')
 
@@ -13,0 +13,0 @@ head[HEAD_SYMBOL] = true

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

115424

increased by1.01%

Lines of code

2736

increased by0.74%

Dependency changes

• Updated@riotjs/util@^2.0.4