Comparing version 3.0.0 to 4.0.0
129
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 | ||
} | ||
}) |
{ | ||
"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": { |
@@ -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) { |
License Policy Violation
LicenseThis 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 riskPackage 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
License Policy Violation
LicenseThis 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 riskPackage 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
2
118
7350
3
101
- 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