@riotjs/dom-bindings - npm Package Compare versions

Comparing version 5.1.3 to 6.0.0

dist/umd.dom-bindings.js

@@ -115,3 +115,3 @@ (function (global, factory) {
    * Create the <template> fragments text nodes
-   * @return {Object} {{head: TextNode, tail: TextNode}}
+   * @return {Object} {{head: Text, tail: Text}}
    */
@@ -147,2 +147,24 @@ function createHeadTailPlaceholders() {
   /**
+   * Helper function to set an immutable property
+   * @param   {Object} source - object where the new property will be set
+   * @param   {string} key - object key where the new property will be stored
+   * @param   {*} value - value of the new property
+   * @param   {Object} options - set the propery overriding the default options
+   * @returns {Object} - the original object modified
+   */
+  function defineProperty(source, key, value, options = {}) {
+    /* eslint-disable fp/no-mutating-methods */
+    Object.defineProperty(source, key, {
+      value,
+      enumerable: false,
+      writable: false,
+      configurable: true,
+      ...options
+    });
+    /* eslint-enable fp/no-mutating-methods */
+
+    return source
+  }
+
+  /**
    * Get the current <template> fragment children located in between the head and tail comments
@@ -499,3 +521,3 @@ * @param {Comment} head - head comment node
           // the root node and its children will be removed by domdiff
-          if (nodes.length === 0) {
+          if (!nodes.length) {
             // we have cleared all the children nodes and we can unmount this template
@@ -519,3 +541,3 @@ redundant.pop();
   function mustFilterItem(condition, context) {
-    return condition ? Boolean(condition(context)) === false : false
+    return condition ? !condition(context) : false
   }
@@ -526,2 +548,3 @@
    * @param   {Object} scope - current template scope
+   * @param   {Object} options - options
    * @param   {string} options.itemName - key to identify the looped item in the new context
@@ -534,4 +557,5 @@ * @param   {string} options.indexName - key to identify the index of the looped item
   function extendScope(scope, {itemName, indexName, index, item}) {
-    scope[itemName] = item;
-    if (indexName) scope[indexName] = index;
+    defineProperty(scope, itemName, item);
+    if (indexName) defineProperty(scope, indexName, index);
+
     return scope
@@ -558,3 +582,3 @@ }
    * @param   {*} parentScope - scope of the parent template
-   * @param   {EeachBinding} binding - each binding object instance
+   * @param   {EachBinding} binding - each binding object instance
    * @returns {Object} data
@@ -797,3 +821,3 @@ * @returns {Map} data.newChildrenMap - a Map containing the new children template structure
   function shouldRemoveAttribute(value) {
-    return isNil(value) || value === false || value === ''
+    return !value && value !== 0
   }
@@ -852,5 +876,3 @@
     // be sure that expressions like selected={ true } will be always rendered as selected='selected'
-    if (value === true) return name
-
-    return value
+    return (value === true) ? name : value
   }
@@ -916,3 +938,3 @@
    * @param   {number} childNodeIndex - index of the text node in the childNodes list
-   * @returns {HTMLTextNode} the text node to update
+   * @returns {Text} the text node to update
    */
@@ -1099,7 +1121,8 @@ const getTextNode = (node, childNodeIndex) => {
       if (this.template) {
+        cleanNode(this.node);
         this.template.mount(this.node, this.getTemplateScope(scope, realParent), realParent);
         this.template.children = Array.from(this.node.childNodes);
-        moveSlotInnerContent(this.node);
       }
 
+      moveSlotInnerContent(this.node);
       removeChild(this.node);
@@ -1143,3 +1166,4 @@
    * @param   {HTMLElement} node - slot node
-   * @param   {string} options.name - slot id
+   * @param   {string} name - slot id
+   * @param   {AttributeExpressionData[]} attributes - slot attributes
    * @returns {Object} Slot binding object
@@ -1284,3 +1308,3 @@ */
    * @param   {HTMLElement} root - DOM node where to bind the expression
-   * @param   {Object} binding - binding data
+   * @param   {TagBindingData} binding - binding data
    * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
@@ -1297,2 +1321,3 @@ * @returns {Binding} Binding object
     const bindingExpressions = expressions || [];
+
     // init the binding
@@ -1348,3 +1373,3 @@ return (bindings[type] || bindings[SIMPLE])(
    * @param   {HTMLElement} el - target element
-   * @param   {HTMLFragment|SVGElement} dom - dom tree to inject
+   * @param   {DocumentFragment|SVGElement} dom - dom tree to inject
    * @returns {undefined}
@@ -1368,4 +1393,4 @@ */
    * @param   {HTMLElement} el - root node where the DOM will be injected
-   * @param   {string} html - markup that will be injected into the root node
-   * @returns {HTMLFragment} fragment that will be injected into the root node
+   * @param   {string|HTMLElement} html - HTML markup or HTMLElement that will be injected into the root node
+   * @returns {?DocumentFragment} fragment that will be injected into the root node
    */
@@ -1475,2 +1500,3 @@ function createTemplateDOM(el, html) {
     },
+
     /**
@@ -1487,2 +1513,3 @@ * Update the template with fresh data
     },
+
     /**
@@ -1496,33 +1523,39 @@ * Remove the template from the node where it was initially mounted
      */
-    unmount(scope, parentScope, mustRemoveRoot) {
-      if (this.el) {
-        this.bindings.forEach(b => b.unmount(scope, parentScope, mustRemoveRoot));
+    unmount(scope, parentScope, mustRemoveRoot = false) {
+      const el = this.el;
 
-        switch (true) {
-        // pure components should handle the DOM unmount updates by themselves
-        case this.el[IS_PURE_SYMBOL]:
-          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
-        case this.children && mustRemoveRoot !== null:
-          clearChildren(this.children);
-          break
+      if (!el) {
+        return this
+      }
 
-          // remove the root node only if the mustRemoveRoot === true
-        case mustRemoveRoot === true:
-          removeChild(this.el);
-          break
+      this.bindings.forEach(b => b.unmount(scope, parentScope, mustRemoveRoot));
 
-          // otherwise we clean the node children
-        case mustRemoveRoot !== null:
-          cleanNode(this.el);
-          break
-        }
+      switch (true) {
+      // pure components should handle the DOM unmount updates by themselves
+      // for mustRemoveRoot === null don't touch the DOM
+      case (el[IS_PURE_SYMBOL] || mustRemoveRoot === null):
+        break
 
-        this.el = null;
+      // if children are declared, clear them
+      // applicable for <template> and <slot/> bindings
+      case Array.isArray(this.children):
+        clearChildren(this.children);
+        break
+
+      // clean the node children only
+      case !mustRemoveRoot:
+        cleanNode(el);
+        break
+
+      // remove the root node only if the mustRemoveRoot is truly
+      case !!mustRemoveRoot:
+        removeChild(el);
+        break
       }
 
+      this.el = null;
+
       return this
     },
+
     /**
@@ -1541,6 +1574,7 @@ * Clone the template chunk
 
+
   /**
    * Create a template chunk wiring also the bindings
    * @param   {string|HTMLElement} html - template string
-   * @param   {Array} bindings - bindings collection
+   * @param   {BindingData[]} bindings - bindings collection
    * @returns {TemplateChunk} a new TemplateChunk copy
@@ -1547,0 +1581,0 @@ */

package.json

 {
   "name": "@riotjs/dom-bindings",
-  "version": "5.1.3",
+  "version": "6.0.0",
   "description": "Riot.js DOM bindings",
@@ -48,4 +48,4 @@ "main": "dist/umd.dom-bindings.js",
     "chai": "^4.3.4",
-    "coveralls": "^3.1.0",
-    "eslint": "^7.28.0",
+    "coveralls": "^3.1.1",
+    "eslint": "^7.30.0",
     "eslint-config-riot": "^3.0.0",
@@ -57,3 +57,3 @@ "esm": "^3.2.25",
     "nyc": "^15.1.0",
-    "rollup": "^2.51.2",
+    "rollup": "^2.53.1",
     "rollup-plugin-alias": "^2.2.0",
@@ -63,3 +63,3 @@ "rollup-plugin-node-resolve": "^5.2.0",
     "sinon-chai": "^3.7.0",
-    "typescript": "^4.3.2"
+    "typescript": "^4.3.5"
   },
@@ -66,0 +66,0 @@ "dependencies": {

src/binding.js

@@ -22,3 +22,3 @@ import {SIMPLE} from '@riotjs/util/binding-types'
  * @param   {HTMLElement} root - DOM node where to bind the expression
- * @param   {Object} binding - binding data
+ * @param   {TagBindingData} binding - binding data
  * @param   {number|null} templateTagOffset - if it's defined we need to fix the text expressions childNodeIndex offset
@@ -35,2 +35,3 @@ * @returns {Binding} Binding object
   const bindingExpressions = expressions || []
+
   // init the binding
@@ -37,0 +38,0 @@ return (bindings[type] || bindings[SIMPLE])(

src/bindings/each.js

 import {HEAD_SYMBOL, TAIL_SYMBOL} from '../constants'
 import {insertBefore, removeChild} from '@riotjs/util/dom'
 import createTemplateMeta from '../util/create-template-meta'
+import {defineProperty} from '@riotjs/util/objects'
 import getFragmentChildren from '../util/get-fragment-children'
@@ -92,3 +93,3 @@ import {isTemplate} from '@riotjs/util/checks'
         // the root node and its children will be removed by domdiff
-        if (nodes.length === 0) {
+        if (!nodes.length) {
           // we have cleared all the children nodes and we can unmount this template
@@ -112,3 +113,3 @@ redundant.pop()
 function mustFilterItem(condition, context) {
-  return condition ? Boolean(condition(context)) === false : false
+  return condition ? !condition(context) : false
 }
@@ -119,2 +120,3 @@
  * @param   {Object} scope - current template scope
+ * @param   {Object} options - options
  * @param   {string} options.itemName - key to identify the looped item in the new context
@@ -127,4 +129,5 @@ * @param   {string} options.indexName - key to identify the index of the looped item
 function extendScope(scope, {itemName, indexName, index, item}) {
-  scope[itemName] = item
-  if (indexName) scope[indexName] = index
+  defineProperty(scope, itemName, item)
+  if (indexName) defineProperty(scope, indexName, index)
+
   return scope
@@ -151,3 +154,3 @@ }
  * @param   {*} parentScope - scope of the parent template
- * @param   {EeachBinding} binding - each binding object instance
+ * @param   {EachBinding} binding - each binding object instance
  * @returns {Object} data
@@ -154,0 +157,0 @@ * @returns {Map} data.newChildrenMap - a Map containing the new children template structure

src/bindings/slot.js

@@ -1,2 +0,2 @@
-import {insertBefore, removeChild} from '@riotjs/util/dom'
+import {cleanNode, insertBefore, removeChild} from '@riotjs/util/dom'
 import {PARENT_KEY_SYMBOL} from '@riotjs/util/constants'
@@ -47,7 +47,8 @@ import {evaluateAttributeExpressions} from '@riotjs/util/misc'
     if (this.template) {
+      cleanNode(this.node)
       this.template.mount(this.node, this.getTemplateScope(scope, realParent), realParent)
       this.template.children = Array.from(this.node.childNodes)
-      moveSlotInnerContent(this.node)
     }
 
+    moveSlotInnerContent(this.node)
     removeChild(this.node)
@@ -91,3 +92,4 @@
  * @param   {HTMLElement} node - slot node
- * @param   {string} options.name - slot id
+ * @param   {string} name - slot id
+ * @param   {AttributeExpressionData[]} attributes - slot attributes
  * @returns {Object} Slot binding object
@@ -94,0 +96,0 @@ */

src/expressions/attribute.js

@@ -1,2 +0,2 @@
-import {isBoolean, isFunction, isNil, isObject} from '@riotjs/util/checks'
+import {isBoolean, isFunction, isObject} from '@riotjs/util/checks'
 import {memoize} from '@riotjs/util/misc'
@@ -50,3 +50,3 @@
 function shouldRemoveAttribute(value) {
-  return isNil(value) || value === false || value === ''
+  return !value && value !== 0
 }
@@ -105,5 +105,3 @@
   // be sure that expressions like selected={ true } will be always rendered as selected='selected'
-  if (value === true) return name
-
-  return value
+  return (value === true) ? name : value
 }

src/expressions/text.js

@@ -7,3 +7,3 @@ import normalizeStringValue from '../util/normalize-string-value'
  * @param   {number} childNodeIndex - index of the text node in the childNodes list
- * @returns {HTMLTextNode} the text node to update
+ * @returns {Text} the text node to update
  */
@@ -32,2 +32,2 @@ export const getTextNode = (node, childNodeIndex) => {
   node.data = normalizeStringValue(value)
-}
+}

src/template.js

@@ -11,4 +11,4 @@ import {cleanNode, clearChildren, removeChild} from '@riotjs/util/dom'
  * @param   {HTMLElement} el - root node where the DOM will be injected
- * @param   {string} html - markup that will be injected into the root node
- * @returns {HTMLFragment} fragment that will be injected into the root node
+ * @param   {string|HTMLElement} html - HTML markup or HTMLElement that will be injected into the root node
+ * @returns {?DocumentFragment} fragment that will be injected into the root node
  */
@@ -118,2 +118,3 @@ function createTemplateDOM(el, html) {
   },
+
   /**
@@ -130,2 +131,3 @@ * Update the template with fresh data
   },
+
   /**
@@ -139,33 +141,39 @@ * Remove the template from the node where it was initially mounted
    */
-  unmount(scope, parentScope, mustRemoveRoot) {
-    if (this.el) {
-      this.bindings.forEach(b => b.unmount(scope, parentScope, mustRemoveRoot))
+  unmount(scope, parentScope, mustRemoveRoot = false) {
+    const el = this.el
 
-      switch (true) {
-      // pure components should handle the DOM unmount updates by themselves
-      case this.el[IS_PURE_SYMBOL]:
-        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
-      case this.children && mustRemoveRoot !== null:
-        clearChildren(this.children)
-        break
+    if (!el) {
+      return this
+    }
 
-        // remove the root node only if the mustRemoveRoot === true
-      case mustRemoveRoot === true:
-        removeChild(this.el)
-        break
+    this.bindings.forEach(b => b.unmount(scope, parentScope, mustRemoveRoot))
 
-        // otherwise we clean the node children
-      case mustRemoveRoot !== null:
-        cleanNode(this.el)
-        break
-      }
+    switch (true) {
+    // pure components should handle the DOM unmount updates by themselves
+    // for mustRemoveRoot === null don't touch the DOM
+    case (el[IS_PURE_SYMBOL] || mustRemoveRoot === null):
+      break
 
-      this.el = null
+    // if children are declared, clear them
+    // applicable for <template> and <slot/> bindings
+    case Array.isArray(this.children):
+      clearChildren(this.children)
+      break
+
+    // clean the node children only
+    case !mustRemoveRoot:
+      cleanNode(el)
+      break
+
+    // remove the root node only if the mustRemoveRoot is truly
+    case !!mustRemoveRoot:
+      removeChild(el)
+      break
     }
 
+    this.el = null
+
     return this
   },
+
   /**
@@ -184,6 +192,7 @@ * Clone the template chunk
 
+
 /**
  * Create a template chunk wiring also the bindings
  * @param   {string|HTMLElement} html - template string
- * @param   {Array} bindings - bindings collection
+ * @param   {BindingData[]} bindings - bindings collection
  * @returns {TemplateChunk} a new TemplateChunk copy
@@ -190,0 +199,0 @@ */

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

@@ -6,3 +6,3 @@ import {HEAD_SYMBOL, TAIL_SYMBOL} from '../constants'
  * Create the <template> fragments text nodes
- * @return {Object} {{head: TextNode, tail: TextNode}}
+ * @return {Object} {{head: Text, tail: Text}}
  */
@@ -9,0 +9,0 @@ export default function createHeadTailPlaceholders() {

src/util/inject-DOM.js

@@ -7,3 +7,3 @@ import {isSvg, isTemplate} from '@riotjs/util/checks'
  * @param   {HTMLElement} el - target element
- * @param   {HTMLFragment|SVGElement} dom - dom tree to inject
+ * @param   {DocumentFragment|SVGElement} dom - dom tree to inject
  * @returns {undefined}
@@ -22,2 +22,2 @@ */
   }
-}
+}

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

116408

increased by0.85%

Lines of code

2767

increased by1.13%

No dependency changes