bel - npm Package Compare versions

Comparing version 3.0.0 to 4.0.0

index.js

@@ -0,29 +1,112 @@
+var document = require('global/document')
 var hyperx = require('hyperx')
-var morphdom = require('morphdom')
-var create = require('./create.js')
-var hx = hyperx(create())
 
-var KEY = '_belid'
-var id = 0
-var viewIndex = Object.create(null)
+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,
+  willvalidate: 1
+}
+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', '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'
+]
 
-module.exports.create = create
-module.exports = function bel () {
-  var el = hx.apply(this, arguments)
-  el[KEY] = id
-  viewIndex[id] = el
-  id++
-  el.update = function (newel) {
-    if (typeof newel === 'function') {
-      newel = newel()
+module.exports = hyperx(function bel (tag, props, children) {
+  var el
+
+  // If an svg tag, it needs a namespace
+  if (SVG_TAGS.indexOf(tag) !== -1) {
+    props.namespace = SVGNS
+  }
+
+  // If we are using a namespace
+  var ns = false
+  if (props.namespace) {
+    ns = props.namespace
+    delete props.namespace
+  }
+
+  // Create the element
+  if (ns) {
+    el = document.createElementNS(ns, tag)
+  } else {
+    el = document.createElement(tag)
+  }
+
+  // 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'
+      }
+      // 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) {
+          el.setAttributeNS(null, p, val)
+        } else {
+          el.setAttribute(p, val)
+        }
+      }
     }
-    var found = viewIndex[el[KEY]]
-    if (found) el = found
-    // Morph and update the viewIndex to the new element
-    viewIndex[el[KEY]] = morphdom(el, newel)
-    // Remove the newel from viewIndex as its not needed anymore
-    delete viewIndex[newel[KEY]]
-    return el
   }
+
+  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' ||
+        node instanceof Date ||
+        node instanceof RegExp) {
+        node = node.toString()
+      }
+
+      if (typeof node === 'string') {
+        node = document.createTextNode(node)
+      }
+
+      if (node && node.nodeName && node.nodeType) {
+        el.appendChild(node)
+      }
+    }
+  }
+  appendChild(children)
+
   return el
-}
+})

package.json

 {
   "name": "bel",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A simple extension to native elements",
@@ -31,6 +31,4 @@ "main": "index.js",
   "dependencies": {
-    "dom-css": "^2.0.0",
     "global": "^4.3.0",
-    "hyperx": "^2.0.1",
-    "morphdom": "^1.1.2"
+    "hyperx": "^2.0.2"
   },
@@ -37,0 +35,0 @@ "devDependencies": {

README.md

@@ -74,2 +74,3 @@ # [bel](https://en.wikipedia.org/wiki/Bel_(mythology))
 var bel = require('bel')
+var morphdom = require('morphdom')
 var list = require('./list.js')
@@ -81,3 +82,3 @@
     // This will use DOM diffing to render, sending the data back down again
-    element.update(render(id))
+    morphdom(element, render(id))
   }
@@ -84,0 +85,0 @@ function render (selected) {

New alerts

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

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

Dependency count

2

decreased by-50%

Number of lines in readme file

118

increased by0.85%

Worsened metrics

Total package byte prevSize

7350

decreased by-21.79%

Number of package files

3

decreased by-25%

Lines of code

101

decreased by-41.28%

Dependency changes

• - Removeddom-css@^2.0.0

• - Removedmorphdom@^1.1.2

• - Removedadd-px-to-style@1.0.0(transitive)

• - Removeddom-css@2.1.0(transitive)

• - Removedmorphdom@1.4.6(transitive)

• - Removedprefix-style@2.0.1(transitive)

• - Removedto-camel-case@1.0.0(transitive)

• - Removedto-no-case@1.0.2(transitive)

• - Removedto-space-case@1.0.0(transitive)

• Updatedhyperx@^2.0.2