bel - npm Package Compare versions

Comparing version 5.0.0 to 5.0.1

browser.js

 var hyperx = require('hyperx')
 
-var headRegex = /^\n[\s]+/
-var tailRegex = /\n[\s]+$/
+var trailingNewlineRegex = /\n[\s]+$/
+var leadingNewlineRegex = /^\n[\s]+/
+var trailingSpaceRegex = /[\s]+$/
+var leadingSpaceRegex = /^[\s]+/
+var multiSpaceRegex = /[\n\s]+/g
 
@@ -9,29 +12,32 @@ var SVGNS = 'http://www.w3.org/2000/svg'
 
-var BOOL_PROPS = {
-  autofocus: 1,
-  checked: 1,
-  defaultchecked: 1,
-  disabled: 1,
-  formnovalidate: 1,
-  indeterminate: 1,
-  readonly: 1,
-  required: 1,
-  selected: 1,
-  willvalidate: 1
-}
+var BOOL_PROPS = [
+  'autofocus', 'checked', 'defaultchecked', 'disabled', 'formnovalidate',
+  'indeterminate', 'readonly', 'required', 'selected', 'willvalidate'
+]
+
 var COMMENT_TAG = '!--'
+
+var TEXT_TAGS = [
+  'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'data', 'dfn', 'em', 'i',
+  'kbd', 'mark', 'q', 'rp', 'rt', 'rtc', 'ruby', 's', 'amp', 'small', 'span',
+  'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr'
+]
+
+var CODE_TAGS = [
+  'code', 'pre'
+]
+
 var SVG_TAGS = [
-  'svg',
-  'altGlyph', 'altGlyphDef', 'altGlyphItem', 'animate', 'animateColor',
+  'svg', 'altGlyph', 'altGlyphDef', 'altGlyphItem', 'animate', 'animateColor',
   'animateMotion', 'animateTransform', 'circle', 'clipPath', 'color-profile',
   'cursor', 'defs', 'desc', 'ellipse', 'feBlend', 'feColorMatrix',
-  'feComponentTransfer', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting',
-  'feDisplacementMap', 'feDistantLight', 'feFlood', 'feFuncA', 'feFuncB',
-  'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMerge', 'feMergeNode',
-  'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting',
-  'feSpotLight', 'feTile', 'feTurbulence', 'filter', 'font', 'font-face',
-  'font-face-format', 'font-face-name', 'font-face-src', 'font-face-uri',
-  'foreignObject', 'g', 'glyph', 'glyphRef', 'hkern', 'image', 'line',
-  'linearGradient', 'marker', 'mask', 'metadata', 'missing-glyph', 'mpath',
-  'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect',
+  'feComponentTransfer', 'feComposite', 'feConvolveMatrix',
+  'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feFlood',
+  'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage',
+  'feMerge', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight',
+  'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'filter',
+  'font', 'font-face', 'font-face-format', 'font-face-name', 'font-face-src',
+  'font-face-uri', 'foreignObject', 'g', 'glyph', 'glyphRef', 'hkern', 'image',
+  'line', 'linearGradient', 'marker', 'mask', 'metadata', 'missing-glyph',
+  'mpath', 'path', 'pattern', 'polygon', 'polyline', 'radialGradient', 'rect',
   'set', 'stop', 'switch', 'symbol', 'text', 'textPath', 'title', 'tref',
@@ -65,2 +71,4 @@ 'tspan', 'use', 'view', 'vkern'
 
+  var nodeName = el.nodeName.toLowerCase()
+
   // Create the properties
@@ -81,3 +89,3 @@ for (var p in props) {
       // If a property is boolean, set itself to the key
-      if (BOOL_PROPS[key]) {
+      if (BOOL_PROPS.indexOf(key) !== -1) {
         if (val === 'true') val = key
@@ -105,5 +113,11 @@ else if (val === 'false') continue
 
+  appendChild(children)
+  return el
+
   function appendChild (childs) {
     if (!Array.isArray(childs)) return
+
     var hadText = false
+    var value, leader
+
     for (var i = 0, len = childs.length; i < len; i++) {
@@ -125,6 +139,12 @@ var node = childs[i]
       var lastChild = el.childNodes[el.childNodes.length - 1]
+
+      // Iterate over text nodes
       if (typeof node === 'string') {
         hadText = true
+
+        // If we already had text, append to the existing text
         if (lastChild && lastChild.nodeName === '#text') {
           lastChild.nodeValue += node
+
+        // We didn't have a text node yet, create one
         } else {
@@ -135,19 +155,74 @@ node = document.createTextNode(node)
         }
+
+        // If this is the last of the child nodes, make sure we close it out
+        // right
         if (i === len - 1) {
           hadText = false
-          var value = lastChild.nodeValue
-            .replace(headRegex, '')
-            .replace(tailRegex, '')
-          if (value !== '') lastChild.nodeValue = value
-          else el.removeChild(lastChild)
+          // Trim the child text nodes if the current node isn't a
+          // node where whitespace matters.
+          if (TEXT_TAGS.indexOf(nodeName) === -1 &&
+            CODE_TAGS.indexOf(nodeName) === -1) {
+            value = lastChild.nodeValue
+              .replace(leadingNewlineRegex, '')
+              .replace(trailingSpaceRegex, '')
+              .replace(trailingNewlineRegex, '')
+              .replace(multiSpaceRegex, ' ')
+            if (value === '') {
+              el.removeChild(lastChild)
+            } else {
+              lastChild.nodeValue = value
+            }
+          } else if (CODE_TAGS.indexOf(nodeName) === -1) {
+            // The very first node in the list should not have leading
+            // whitespace. Sibling text nodes should have whitespace if there
+            // was any.
+            leader = i === 0 ? '' : ' '
+            value = lastChild.nodeValue
+              .replace(leadingNewlineRegex, leader)
+              .replace(leadingSpaceRegex, ' ')
+              .replace(trailingSpaceRegex, '')
+              .replace(trailingNewlineRegex, '')
+              .replace(multiSpaceRegex, ' ')
+            lastChild.nodeValue = value
+          }
         }
+
+      // Iterate over DOM nodes
       } else if (node && node.nodeType) {
+        // If the last node was a text node, make sure it is properly closed out
         if (hadText) {
           hadText = false
-          var val = lastChild.nodeValue
-            .replace(headRegex, '')
-            .replace(tailRegex, '')
-          if (val !== '') lastChild.nodeValue = val
-          else el.removeChild(lastChild)
+
+          // Trim the child text nodes if the current node isn't a
+          // text node or a code node
+          if (TEXT_TAGS.indexOf(nodeName) === -1 &&
+            CODE_TAGS.indexOf(nodeName) === -1) {
+            value = lastChild.nodeValue
+              .replace(leadingNewlineRegex, '')
+              .replace(trailingNewlineRegex, '')
+              .replace(multiSpaceRegex, ' ')
+
+            // Remove empty text nodes, append otherwise
+            if (value === '') {
+              el.removeChild(lastChild)
+            } else {
+              lastChild.nodeValue = value
+            }
+          // Trim the child nodes if the current node is not a node
+          // where all whitespace must be preserved
+          } else if (CODE_TAGS.indexOf(nodeName) === -1) {
+            value = lastChild.nodeValue
+              .replace(leadingSpaceRegex, ' ')
+              .replace(leadingNewlineRegex, '')
+              .replace(trailingNewlineRegex, '')
+              .replace(multiSpaceRegex, ' ')
+            lastChild.nodeValue = value
+          }
         }
+
+        // Store the last nodename
+        var _nodeName = node.nodeName
+        if (_nodeName) nodeName = _nodeName.toLowerCase()
+
+        // Append the node to the DOM
         el.appendChild(node)
@@ -157,5 +232,2 @@ }
   }
-  appendChild(children)
-
-  return el
 }
@@ -162,0 +234,0 @@

index.js

@@ -1,53 +0,1 @@
-// See https://github.com/shuhei/pelo/issues/5
-var isElectron = require('is-electron')
-var browser = require('./browser')
-
-if (typeof window !== 'undefined' && isElectron()) {
-  module.exports = browser
-} else {
-  module.exports = stringify
-}
-
-function handleValue (value) {
-  if (Array.isArray(value)) {
-    // Suppose that each item is a result of html``.
-    return value.join('')
-  }
-  // Ignore event handlers.
-  //     onclick=${(e) => doSomething(e)}
-  // will become
-  //     onclick=""
-  if (typeof value === 'function') {
-    return '""'
-  }
-  if (value === null || value === undefined) {
-    return ''
-  }
-  if (value.__encoded) {
-    return value
-  }
-  var str = value.toString()
-  return str
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/"/g, '&quot;')
-    .replace(/'/g, '&#039;')
-}
-
-function stringify () {
-  var pieces = arguments[0]
-  var output = ''
-  for (var i = 0; i < pieces.length; i++) {
-    output += pieces[i]
-    if (i < pieces.length - 1) {
-      output += handleValue(arguments[i + 1])
-    }
-  }
-  // HACK: Avoid double encoding by marking encoded string
-  // You cannot add properties to string literals
-  // eslint-disable-next-line no-new-wrappers
-  var wrapper = new String(output)
-  wrapper.__encoded = true
-  return wrapper
-}
+module.exports = require('pelo')

package.json

 {
   "name": "bel",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "A simple extension to native elements",
@@ -29,3 +29,4 @@ "main": "index.js",
     "hyperx": "^2.3.0",
-    "is-electron": "^2.0.0"
+    "is-electron": "^2.0.0",
+    "pelo": "0.0.2"
   },
@@ -32,0 +33,0 @@ "devDependencies": {

test/elements.js

@@ -107,2 +107,49 @@ var test = require('tape')
 
+test('space in only-child text nodes', function (t) {
+  t.plan(1)
+  var result = bel`
+    <span>
+      surrounding
+      newlines
+    </span>
+  `
+  t.equal(result.outerHTML, '<span>surrounding newlines</span>', 'should remove extra space')
+  t.end()
+})
+
+test('space between text and non-text nodes', function (t) {
+  t.plan(1)
+  var result = bel`
+    <p>
+      <dfn>whitespace</dfn>
+      is empty
+    </p>
+  `
+  t.equal(result.outerHTML, '<p><dfn>whitespace</dfn> is empty</p>', 'should have correct output')
+  t.end()
+})
+
+test('space between non-text nodes', function (t) {
+  t.plan(1)
+  var result = bel`
+    <p>
+      <dfn>whitespace</dfn>
+      <em>is beautiful</em>
+    </p>
+  `
+  t.equal(result.outerHTML, '<p><dfn>whitespace</dfn> <em>is beautiful</em></p>', 'should have correct output')
+  t.end()
+})
+
+test('space in <pre>', function (t) {
+  t.plan(1)
+  var result = bel`
+    <pre>
+      whitespace is empty
+    </pre>
+  `
+  t.equal(result.outerHTML, '<pre>\n      whitespace is empty\n    </pre>', 'should preserve space')
+  t.end()
+})
+
 test('for attribute is set correctly', function (t) {
@@ -109,0 +156,0 @@ t.plan(1)

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

22225

increased by13.24%

Lines of code

482

increased by11.57%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedpelo@0.0.2

• + Addedpelo@0.0.2(transitive)