bel - npm Package Compare versions

Comparing version 2.0.0 to 3.0.0

index.js

@@ -1,84 +0,16 @@
-var document = require('global/document')
 var hyperx = require('hyperx')
 var morphdom = require('morphdom')
+var create = require('./create.js')
+var hx = hyperx(create())
 
-var SET_ATTR_PROPS = {
-  class: 1,
-  value: 1
-}
-var BOOL_PROPS = {
-  autofocus: 1,
-  checked: 1,
-  defaultChecked: 1,
-  disabled: 1,
-  formNoValidate: 1,
-  indeterminate: 1,
-  readOnly: 1,
-  required: 1,
-  willValidate: 1
-}
-
-var hx = hyperx(function createElement (tag, props, children) {
-  var el = document.createElement(tag)
-  for (var p in props) {
-    if (props.hasOwnProperty(p)) {
-      var val = props[p]
-      // If a property is boolean, set itself to the key
-      if (BOOL_PROPS[p]) {
-        if (val === 'true') val = p
-        else if (val === 'false') continue
-      }
-      // If a property prefers setAttribute instead
-      if (SET_ATTR_PROPS[p] || BOOL_PROPS[p]) {
-        el.setAttribute(p, val)
-      } else {
-        el[p] = val
-      }
-    }
-  }
-  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
-      }
-
-      // TODO: Escaping?
-
-      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)
-
-  // TODO: Validation checks
-  // TODO: Check for a11y things
-
-  return el
-})
-
-// TODO: SVG Support
-
+var KEY = '_belid'
 var id = 0
+var viewIndex = Object.create(null)
 
+module.exports.create = create
 module.exports = function bel () {
   var el = hx.apply(this, arguments)
-  if (!el.id) {
-    el.id = 'e' + id
-    id += 1
-  }
+  el[KEY] = id
+  viewIndex[id] = el
+  id++
   el.update = function (newel) {
@@ -88,10 +20,11 @@ if (typeof newel === 'function') {
     }
-    // TODO: Someday eliminate the need for this
-    // We need to look up the actual element in the DOM because a parent element
-    // could have called .update() and replaced the child node
-    el = document.getElementById(el.id)
-    newel.id = el.id
-    morphdom(el, newel)
+    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
   }
   return el
 }

package.json

 {
   "name": "bel",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "A simple extension to native elements",
   "main": "index.js",
   "scripts": {
-    "start": "wzrd test.js:bundle.js",
-    "test": "standard && browserify test.js | testron"
+    "start": "wzrd test/index.js:bundle.js",
+    "test": "standard && browserify test/index.js | testron",
+    "bench": "wzrd bench/index.js:bundle.js"
   },
@@ -19,2 +20,6 @@ "repository": {
   ],
+  "files": [
+    "index.js",
+    "create.js"
+  ],
   "author": "Kyle Robinson Young <[e-mail]> (http://dontkry.com)",
@@ -27,11 +32,13 @@ "license": "MIT",
   "dependencies": {
+    "dom-css": "^2.0.0",
     "global": "^4.3.0",
-    "hyperx": "^1.3.1",
+    "hyperx": "^2.0.1",
     "morphdom": "^1.1.2"
   },
   "devDependencies": {
+    "browser-process-hrtime": "^0.1.2",
     "browserify": "^13.0.0",
     "electron-prebuilt": "^0.36.9",
     "standard": "^6.0.7",
-    "tape": "^4.4.0",
+    "tape": "^4.5.0",
     "testron": "^1.2.0",
@@ -38,0 +45,0 @@ "wzrd": "^1.3.1"

README.md

@@ -13,2 +13,4 @@ # [bel](https://en.wikipedia.org/wiki/Bel_(mythology))
 
+For a more in depth tutorial on getting started, please [check out the wiki](https://github.com/shama/bel/wiki).
+
 ### A Simple Element
@@ -20,8 +22,8 @@
 // list.js
-var $ = require('bel')
+var bel = require('bel')
 
 module.exports = function (items) {
-  return $`<ul>
+  return bel`<ul>
     ${items.map(function (item) {
-      return $`<li>${item}</li>`
+      return bel`<li>${item}</li>`
     })}
@@ -49,3 +51,3 @@ </ul>`
 // list.js
-var $ = require('bel')
+var bel = require('bel')
 
@@ -55,5 +57,5 @@ // The DOM is built by the data passed in
   function render () {
-    return $`<ul>
+    return bel`<ul>
     ${items.map(function (item) {
-      return $`<li>${button(item.id, item.label)}</li>`
+      return bel`<li>${button(item.id, item.label)}</li>`
     })}
@@ -63,3 +65,3 @@ </ul>`
   function button (id, label) {
-    return $`<button onclick=${function () {
+    return bel`<button onclick=${function () {
       // Then action gets sent up
@@ -76,3 +78,3 @@ onselected(id)
 // app.js
-var $ = require('bel')
+var bel = require('bel')
 var list = require('./list.js')
@@ -87,3 +89,3 @@
   function render (selected) {
-    return $`<div className="app">
+    return bel`<div className="app">
       <h1>Selected: ${selected}</h1>
@@ -107,2 +109,4 @@ ${list(bears, onselected)}
   A Virtual DOM and diffing algorithm
+* [hyperscript](https://github.com/dominictarr/hyperscript)  
+  Create HyperText with JavaScript.
 
@@ -109,0 +113,0 @@ # license

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

Total package byte prevSize

9398

increased by26.27%

Lines of code

172

increased by39.84%

Number of lines in readme file

117

increased by3.54%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

7

increased by16.67%

Number of package files

4

decreased by-33.33%

Dependency changes

• + Addeddom-css@^2.0.0

• + Addedadd-px-to-style@1.0.0(transitive)

• + Addeddom-css@2.1.0(transitive)

• + Addedhyperscript-attribute-to-property@1.0.2(transitive)

• + Addedhyperx@2.5.4(transitive)

• + Addedprefix-style@2.0.1(transitive)

• + Addedto-camel-case@1.0.0(transitive)

• + Addedto-no-case@1.0.2(transitive)

• + Addedto-space-case@1.0.0(transitive)

• - Removedhyperx@1.4.1(transitive)

• Updatedhyperx@^2.0.1