bel - npm Package Compare versions

Comparing version 4.6.0 to 5.0.0

index.js

@@ -1,153 +0,53 @@
-var document = require('global/document')
-var hyperx = require('hyperx')
-var onload = require('on-load')
+// See https://github.com/shuhei/pelo/issues/5
+var isElectron = require('is-electron')
+var browser = require('./browser')
 
-var SVGNS = 'http://www.w3.org/2000/svg'
-var XLINKNS = 'http://www.w3.org/1999/xlink'
-
-var BOOL_PROPS = {
-  autofocus: 1,
-  checked: 1,
-  defaultchecked: 1,
-  disabled: 1,
-  formnovalidate: 1,
-  indeterminate: 1,
-  readonly: 1,
-  required: 1,
-  selected: 1,
-  willvalidate: 1
+if (typeof window !== 'undefined' && isElectron()) {
+  module.exports = browser
+} else {
+  module.exports = stringify
 }
-var COMMENT_TAG = '!--'
-var SVG_TAGS = [
-  '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',
-  'set', 'stop', 'switch', 'symbol', 'text', 'textPath', 'title', 'tref',
-  'tspan', 'use', 'view', 'vkern'
-]
 
-function belCreateElement (tag, props, children) {
-  var el
-
-  // If an svg tag, it needs a namespace
-  if (SVG_TAGS.indexOf(tag) !== -1) {
-    props.namespace = SVGNS
+function handleValue (value) {
+  if (Array.isArray(value)) {
+    // Suppose that each item is a result of html``.
+    return value.join('')
   }
-
-  // If we are using a namespace
-  var ns = false
-  if (props.namespace) {
-    ns = props.namespace
-    delete props.namespace
+  // Ignore event handlers.
+  //     onclick=${(e) => doSomething(e)}
+  // will become
+  //     onclick=""
+  if (typeof value === 'function') {
+    return '""'
   }
-
-  // Create the element
-  if (ns) {
-    el = document.createElementNS(ns, tag)
-  } else if (tag === COMMENT_TAG) {
-    return document.createComment(props.comment)
-  } else {
-    el = document.createElement(tag)
+  if (value === null || value === undefined) {
+    return ''
   }
-
-  // If adding onload events
-  if (props.onload || props.onunload) {
-    var load = props.onload || function () {}
-    var unload = props.onunload || function () {}
-    onload(el, function belOnload () {
-      load(el)
-    }, function belOnunload () {
-      unload(el)
-    },
-    // We have to use non-standard `caller` to find who invokes `belCreateElement`
-    belCreateElement.caller.caller.caller)
-    delete props.onload
-    delete props.onunload
+  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;')
+}
 
-  // Create the properties
-  for (var p in props) {
-    if (props.hasOwnProperty(p)) {
-      var key = p.toLowerCase()
-      var val = props[p]
-      // Normalize className
-      if (key === 'classname') {
-        key = 'class'
-        p = 'class'
-      }
-      // The for attribute gets transformed to htmlFor, but we just set as for
-      if (p === 'htmlFor') {
-        p = 'for'
-      }
-      // If a property is boolean, set itself to the key
-      if (BOOL_PROPS[key]) {
-        if (val === 'true') val = key
-        else if (val === 'false') continue
-      }
-      // If a property prefers being set directly vs setAttribute
-      if (key.slice(0, 2) === 'on') {
-        el[p] = val
-      } else {
-        if (ns) {
-          if (p === 'xlink:href') {
-            el.setAttributeNS(XLINKNS, p, val)
-          } else if (/^xmlns($|:)/i.test(p)) {
-            // skip xmlns definitions
-          } else {
-            el.setAttributeNS(null, p, val)
-          }
-        } else {
-          el.setAttribute(p, val)
-        }
-      }
+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])
     }
   }
-
-  function appendChild (childs) {
-    if (!Array.isArray(childs)) return
-    for (var i = 0; i < childs.length; i++) {
-      var node = childs[i]
-      if (Array.isArray(node)) {
-        appendChild(node)
-        continue
-      }
-
-      if (typeof node === 'number' ||
-        typeof node === 'boolean' ||
-        typeof node === 'function' ||
-        node instanceof Date ||
-        node instanceof RegExp) {
-        node = node.toString()
-      }
-
-      if (typeof node === 'string') {
-        if (el.lastChild && el.lastChild.nodeName === '#text') {
-          el.lastChild.nodeValue += node
-          continue
-        }
-        node = document.createTextNode(node)
-      }
-
-      if (node && node.nodeType) {
-        el.appendChild(node)
-      }
-    }
-  }
-  appendChild(children)
-
-  return el
+  // 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 = hyperx(belCreateElement, {comments: true})
-module.exports.default = module.exports
-module.exports.createElement = belCreateElement

package.json

 {
   "name": "bel",
-  "version": "4.6.0",
+  "version": "5.0.0",
   "description": "A simple extension to native elements",
   "main": "index.js",
+  "browser": "browser.js",
   "scripts": {
     "start": "wzrd test/index.js:bundle.js",
-    "test": "standard && node test/server.js && browserify test/index.js | testron",
+    "test": "standard && node test/server.js && browserify test/index.js | tape-run",
     "bench": "wzrd bench/index.js:bundle.js"
@@ -20,6 +21,2 @@ },
   ],
-  "files": [
-    "index.js",
-    "create.js"
-  ],
   "author": "Kyle Robinson Young <[e-mail]> (http://dontkry.com)",
@@ -32,5 +29,4 @@ "license": "MIT",
   "dependencies": {
-    "global": "^4.3.0",
     "hyperx": "^2.3.0",
-    "on-load": "^3.2.0"
+    "is-electron": "^2.0.0"
   },
@@ -44,5 +40,5 @@ "devDependencies": {
     "tape": "^4.6.0",
-    "testron": "^1.2.0",
+    "tape-run": "^3.0.0",
     "wzrd": "^1.4.0"
   }
 }

README.md

@@ -99,20 +99,2 @@ # [bel](https://en.wikipedia.org/wiki/Bel_(mythology))
 
-### lifecycle events
-
-Use the `onload` and `onunload` properties to call a function when the element
-is inserted and removed from the DOM respectively.
-
-```js
-var bel = require('bel')
-
-var modal = bel`<div onload=${function (element) {
-  console.log('Hello DOM!')
-}} onunload=${function (element) {
-  console.log('Goodbye DOM!')
-}}>hello!</div>`
-
-document.body.appendChild(modal)
-document.body.removeChild(modal)
-```
-
 ### use with/without [hyperx](https://www.npmjs.com/package/hyperx)
@@ -164,9 +146,9 @@
 
-* [vel](https://github.com/yoshuawuyts/vel)  
+* [vel](https://github.com/yoshuawuyts/vel)
   minimal virtual-dom library
-* [base-element](https://github.com/shama/base-element)  
+* [base-element](https://github.com/shama/base-element)
   An element authoring library for creating standalone and performant elements
-* [virtual-dom](https://github.com/Matt-Esch/virtual-dom)  
+* [virtual-dom](https://github.com/Matt-Esch/virtual-dom)
   A Virtual DOM and diffing algorithm
-* [hyperscript](https://github.com/dominictarr/hyperscript)  
+* [hyperscript](https://github.com/dominictarr/hyperscript)
   Create HyperText with JavaScript.
@@ -173,0 +155,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

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

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

19626

increased by81.19%

Dependency count

2

decreased by-33.33%

Number of package files

14

increased by366.67%

Lines of code

432

increased by210.79%

Worsened metrics

Number of lines in readme file

166

decreased by-9.78%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedis-electron@^2.0.0

• + Addedis-electron@2.2.2(transitive)

• - Removedglobal@^4.3.0

• - Removedon-load@^3.2.0

• - Removeddom-walk@0.1.2(transitive)

• - Removedglobal@4.4.0(transitive)

• - Removedmin-document@2.19.0(transitive)

• - Removednanoassert@1.1.0(transitive)

• - Removedon-load@3.4.1(transitive)

• - Removedprocess@0.11.10(transitive)