Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
attodom - npm Package Compare versions
Comparing version 0.10.0 to 0.11.0
@@ -9,2 +9,15 @@ # Change Log | ||
| ## [0.11.0] | ||
| ### Removed | ||
| - text | ||
| - updateChildren | ||
| - mount | ||
| ## Changed | ||
| - list is now an independ object instead of a comment node | ||
| ## [0.10.0] | ||
| ### Changed | ||
| - synthetic events for capitalised handlers | ||
| ## [0.9.0] - 2018-09-08 | ||
@@ -11,0 +24,0 @@ ### Changed |
10
el.js
@@ -1,3 +0,2 @@ | ||
| var mount = require('./mount'), | ||
| EVENTS = require('./src/events') | ||
| var EVENTS = require('./src/events') | ||
@@ -42,3 +41,8 @@ var htmlProps = { | ||
| } | ||
| else mount(node, arg) | ||
| else { | ||
| var kids = arg == null ? [] : Array.isArray(arg) ? arg : [arg] | ||
| for (var k=0; k<kids.length; ++k) node.appendChild( | ||
| kids[k].nodeType ? kids[k] : document.createTextNode(kids[k]) | ||
| ) | ||
| } | ||
| } | ||
@@ -45,0 +49,0 @@ } |
@@ -6,5 +6,3 @@ // @ts-check | ||
| svg: require('./svg'), | ||
| text: require('./text'), | ||
| list: require('./list'), | ||
| updateChildren: require('./update-children') | ||
| list: require('./list') | ||
| } |
66
list.js
| /** | ||
| * @param {!Function|!string} key | ||
| * @param {Function} [factory] | ||
| * @return {Node} | ||
| * @param {Element} parent | ||
| * @param {Function} factory | ||
| * @param {Object} [options] | ||
| * @return {Object} | ||
| */ | ||
| module.exports = function(key, factory) { | ||
| var kin = document.createComment('[') | ||
| //@ts-ignore | ||
| kin.update = updateList | ||
| //@ts-ignore | ||
| kin._$lK = { | ||
| make: factory || key, | ||
| keyF: (factory ? key : getKey).constructor === Function, | ||
| getK: factory ? key : getKey, | ||
| kids: Object.create(null), | ||
| tail: document.createComment(']') | ||
| module.exports = function(parent, factory, options) { | ||
| return { | ||
| parent: parent, | ||
| factory: factory, | ||
| before: (options && options.before) || null, | ||
| after: (options && options.after) || null, | ||
| update: updateList, | ||
| key: (options && options.key) || getKey, | ||
| children: Object.create(null), | ||
| } | ||
| return kin | ||
| } | ||
@@ -35,38 +33,30 @@ | ||
| function updateList(arr) { | ||
| var head = this, | ||
| kin = head.parentNode, | ||
| kids = Object.create(null), | ||
| //@ts-ignore | ||
| list = head._$lK | ||
| var parent = this.parent, | ||
| spot = this.after ? this.after.nextSibling : parent.firstChild, | ||
| getK = this.key, | ||
| kids = Object.create(null) | ||
| // find the parent or create one | ||
| if (!kin) { | ||
| kin = document.createDocumentFragment() | ||
| kin.appendChild(head) | ||
| kin.appendChild(list.tail) | ||
| } | ||
| var spot = head.nextSibling | ||
| for (var i = 0; i < arr.length; ++i) { | ||
| var key = list.keyF ? list.getK(arr[i], i, arr) : arr[i][list.getK], | ||
| kid = list.kids[key] | ||
| var key = getK.constructor === Function ? getK(arr[i], i, arr) : arr[i][getK], | ||
| kid = this.children[key] | ||
| //create or update kid | ||
| if (kid && kid.update) kid.update(arr[i], key, arr) | ||
| else kid = list.make(arr[i], i, arr) | ||
| if (kid) kid.update && kid.update(arr[i], key, arr) //eslint-disable-line | ||
| else kid = this.factory(arr[i], i, arr) | ||
| kids[key] = kid | ||
| //place kid | ||
| if (kid === spot.nextSibling) kin.removeChild(spot) | ||
| else if (kid !== spot) kin.insertBefore(kid, spot) | ||
| if (!spot) parent.appendChild(kid) | ||
| else if (kid === spot.nextSibling) parent.removeChild(spot) | ||
| else if (kid !== spot) parent.insertBefore(kid, spot) | ||
| spot = kid.nextSibling | ||
| } | ||
| //delete remaining | ||
| while (spot !== list.tail) { | ||
| while (spot !== this.before) { | ||
| var next = spot.nextSibling | ||
| kin.removeChild(spot) | ||
| parent.removeChild(spot) | ||
| spot = next | ||
| } | ||
| list.kids = kids | ||
| return list.tail | ||
| this.children = kids | ||
| return this | ||
| } |
| { | ||
| "name": "attodom", | ||
| "version": "0.10.0", | ||
| "version": "0.11.0", | ||
| "main": "./index.js", | ||
@@ -5,0 +5,0 @@ "description": "yet another small DOM component library", |
@@ -38,3 +38,2 @@ # attodom | ||
| * `svg(tagName [, attributes [,children ]] ): SVGElement` | ||
| * `text(content [, properties ]] ): TextNode` | ||
@@ -47,8 +46,2 @@ where | ||
| ### Helper Function | ||
| * `updateChildren: function(this:ParentNode, value:* [, key:* [, object:*]]): void` | ||
| Updates all children nodes of a parent node | ||
| ### Synthetic Events | ||
@@ -62,23 +55,19 @@ | ||
| ### Lists | ||
| * `list(parent, factory, options): List` | ||
| * `list([getKey, ]nodeFactory): CommentNode` | ||
| where | ||
| * `getKey: string | function([*], [number], [Array]): string` | ||
| * `nodeFactory: function(value:* [, key:* [, object:*]]): Node` | ||
| * `factory: function(value:* [, key:* [, object:*]]): Node` | ||
| * `options.before: Node` | ||
| * `options.after: Node` | ||
| * `options.key: string | function([*], [number], [Array]): string` | ||
| * `List: {parent, before, after, factory, key, children, update}` | ||
| * `list.update: function([*], [number], [Array]): List` | ||
| `list` creates a `Comment Node` that will be followed by a variable number of Nodes upon update with an array. | ||
| * If `getKey` is not provided, the list is 'unkeyed' (ie the key is the index) (example: `list(factory)`) | ||
| * If `getKey` is a string, the key is `value[getKey]` (example: `list('id', factory)`) | ||
| * If `getKey` is a function, the key is `getKey(value, index, array)` (example: `list(v=>v.id, factory)`) | ||
| `list` creates a `List` object with an update method that can update the parent children to match a data Array | ||
| A list can't contain another list | ||
| ```javascript | ||
| var ol = el('ol', | ||
| list((v, i) => el('li', i + ':' + v)), | ||
| {update: updateChildren} | ||
| ) | ||
| ol.update(['a', 'b']) | ||
| //=> <ol><#comment><li>1:a</li><li>2:b</li><#comment></ol> | ||
| var ol = el('ol'), | ||
| bullets = list(ol, (v, i) => el('li', i + ':' + v)) | ||
| bullets.update(['a', 'b']) | ||
| // <ol><li>1:a</li><li>2:b</li></ol> | ||
| ``` | ||
@@ -85,0 +74,0 @@ |
10
svg.js
@@ -1,3 +0,2 @@ | ||
| var mount = require('./mount'), | ||
| EVENTS = require('./src/events') | ||
| var EVENTS = require('./src/events') | ||
@@ -31,3 +30,8 @@ /** | ||
| } | ||
| else mount(node, arg) | ||
| else { | ||
| var kids = arg == null ? [] : Array.isArray(arg) ? arg : [arg] | ||
| for (var k=0; k<kids.length; ++k) node.appendChild( | ||
| kids[k].nodeType ? kids[k] : document.createTextNode(kids[k]) | ||
| ) | ||
| } | ||
| } | ||
@@ -34,0 +38,0 @@ } |
@@ -36,3 +36,3 @@ /* global document */ | ||
| ct('===', el('p', el('p'), [], el('p'), [el('p'), 0]).childNodes.length, 4) | ||
| ct('===', el('p', [el('p'), null, 0, [el('p'), el('p')]]).childNodes.length, 4) | ||
| ct('===', el('p', [el('p'), 0, [el('p'), el('p')]]).childNodes.length, 3) | ||
| }) | ||
@@ -50,2 +50,4 @@ | ||
| document.body.appendChild(h1) | ||
| h1.dispatchEvent(new window.Event('click', {bubbles:false})) | ||
| ct('===', h1.textContent, '') | ||
| h2.dispatchEvent(new window.Event('click', {bubbles:true})) | ||
@@ -65,11 +67,2 @@ ct('===', h1.textContent, 'H2') | ||
| ct('element - updateChildren', function() { | ||
| var kid = el('span', 'b', {update: function(v) { this.textContent = v.toUpperCase() }}), | ||
| kin = el('h1', ['a', kid, el('span', 'c')], {update: updateChildren}) | ||
| ct('===', kin.textContent, 'abc') | ||
| //@ts-ignore | ||
| kin.update('abc') | ||
| ct('===', kin.textContent, 'aABCc') | ||
| }) | ||
| ct('element - nested reference', function() { | ||
@@ -76,0 +69,0 @@ var kid = el('span', 'b'), |
105
tst/list.js
@@ -8,8 +8,4 @@ /* global document */ | ||
| el = require('../').el, | ||
| ls = require('../').list, | ||
| updateChildren = require('../').updateChildren, | ||
| setter = require('../setter') | ||
| ls = require('../').list | ||
| var setText = setter('textContent') | ||
| function toString(nodes) { | ||
@@ -21,62 +17,42 @@ var str = '' | ||
| function upperKid(t) { | ||
| return el('p', t.toUpperCase(), {update: setText}) | ||
| return el('p', t.toUpperCase(), {update: function(t) { this.textContent = t }}) | ||
| } | ||
| ct('list detached', function() { | ||
| var list = ls(upperKid) | ||
| //@ts-ignore | ||
| ct('list - empty parent', function() { | ||
| var kin = el('div'), | ||
| list = ls(kin, upperKid) | ||
| ct('===', toString(kin.childNodes), '') | ||
| list.update(['a']) | ||
| ct('===', toString(list.parentNode.childNodes), 'A') | ||
| //@ts-ignore | ||
| ct('===', toString(kin.childNodes), 'A') | ||
| list.update(['a', 'b']) | ||
| ct('===', toString(list.parentNode.childNodes), 'aB') | ||
| //@ts-ignore | ||
| ct('===', toString(kin.childNodes), 'aB') | ||
| list.update(['a']) | ||
| ct('===', toString(list.parentNode.childNodes), 'a') | ||
| ct('===', toString(kin.childNodes), 'a') | ||
| }) | ||
| ct('list mounted', function() { | ||
| var list = ls(upperKid), | ||
| kin = el('div', list, {update: updateChildren}) | ||
| ct('===', toString(kin.childNodes), '') | ||
| //@ts-ignore | ||
| kin.update(['a']) | ||
| ct('===', toString(kin.childNodes), 'A') | ||
| //@ts-ignore | ||
| kin.update(['a', 'b']) | ||
| ct('===', toString(kin.childNodes), 'aB') | ||
| //@ts-ignore | ||
| kin.update(['a']) | ||
| ct('===', toString(list.parentNode.childNodes), 'a') | ||
| }) | ||
| ct('list mounted with next', function() { | ||
| var list = ls(upperKid), | ||
| kin = el('div', list, '$', {update: updateChildren}) | ||
| var kin = el('div', '$'), | ||
| list = ls(kin, upperKid, {before: kin.firstChild}) | ||
| ct('===', toString(kin.childNodes), '$') | ||
| //@ts-ignore | ||
| kin.update(['a']) | ||
| list.update(['a']) | ||
| ct('===', toString(kin.childNodes), 'A$') | ||
| //@ts-ignore | ||
| kin.update(['a', 'b']) | ||
| list.update(['a', 'b']) | ||
| ct('===', toString(kin.childNodes), 'aB$') | ||
| //@ts-ignore | ||
| kin.update(['a']) | ||
| ct('===', toString(list.parentNode.childNodes), 'a$') | ||
| list.update(['a']) | ||
| ct('===', toString(list.parent.childNodes), 'a$') | ||
| }) | ||
| ct('list function key getter', function() { | ||
| var kin = el('h0', ls( | ||
| function(o) { return o.k }, | ||
| function(o) { return el('p', o.v, {update: function(v) { this.textContent = v.v.toUpperCase() }}) } | ||
| ), {update: updateChildren}) | ||
| var kin = el('h0'), | ||
| list = ls( | ||
| kin, | ||
| function(o) { return el('p', o.v, {update: function(v) { this.textContent = v.v.toUpperCase() }}) }, | ||
| {key: function(o) { return o.k }} | ||
| ) | ||
| ct('===', toString(kin.childNodes), '') | ||
| //@ts-ignore | ||
| kin.update([{k: 'a', v:'a'}, {k: 'b', v:'b'}, {k: 'c', v:'c'}]) | ||
| list.update([{k: 'a', v:'a'}, {k: 'b', v:'b'}, {k: 'c', v:'c'}]) | ||
| ct('===', toString(kin.childNodes), 'abc') | ||
| //@ts-ignore | ||
| kin.update([{k: 'c', v:'c'}, {k: 'd', v:'d'}, {k: 'e', v:'e'}, ]) | ||
| list.update([{k: 'c', v:'c'}, {k: 'd', v:'d'}, {k: 'e', v:'e'}, ]) | ||
| ct('===', toString(kin.childNodes), 'Cde') | ||
| //@ts-ignore | ||
| kin.update([{k: 'a', v:'a'}, {k: 'b', v:'b'}, {k: 'c', v:'c'}]) | ||
| list.update([{k: 'a', v:'a'}, {k: 'b', v:'b'}, {k: 'c', v:'c'}]) | ||
| ct('===', toString(kin.childNodes), 'abC') | ||
@@ -86,15 +62,14 @@ }) | ||
| ct('list string key getter', function() { | ||
| var kin = el('h0', ls( | ||
| 'k', | ||
| function(o) { return el('p', o.v, {update: function(v) { this.textContent = v.v.toUpperCase() }}) } | ||
| ), {update: updateChildren}) | ||
| var kin = el('h0'), | ||
| list = ls( | ||
| kin, | ||
| function(o) { return el('p', o.v, {update: function(v) { this.textContent = v.v.toUpperCase() }}) }, | ||
| {key: 'k'} | ||
| ) | ||
| ct('===', toString(kin.childNodes), '') | ||
| //@ts-ignore | ||
| kin.update([{k: 'a', v:'a'}, {k: 'b', v:'b'}, {k: 'c', v:'c'}]) | ||
| list.update([{k: 'a', v:'a'}, {k: 'b', v:'b'}, {k: 'c', v:'c'}]) | ||
| ct('===', toString(kin.childNodes), 'abc') | ||
| //@ts-ignore | ||
| kin.update([{k: 'c', v:'c'}, {k: 'd', v:'d'}, {k: 'e', v:'e'}, ]) | ||
| list.update([{k: 'c', v:'c'}, {k: 'd', v:'d'}, {k: 'e', v:'e'}, ]) | ||
| ct('===', toString(kin.childNodes), 'Cde') | ||
| //@ts-ignore | ||
| kin.update([{k: 'a', v:'a'}, {k: 'b', v:'b'}, {k: 'c', v:'c'}]) | ||
| list.update([{k: 'a', v:'a'}, {k: 'b', v:'b'}, {k: 'c', v:'c'}]) | ||
| ct('===', toString(kin.childNodes), 'abC') | ||
@@ -104,10 +79,10 @@ }) | ||
| ct('list multiple', function() { | ||
| var kin = el('div', ls(upperKid), '$', ls(upperKid), ls(upperKid), {update: updateChildren}) | ||
| var kin = el('div', '$'), | ||
| ls1 = ls(kin, upperKid, {before: kin.firstChild}), | ||
| ls2 = ls(kin, upperKid, {after: kin.firstChild}) | ||
| ct('===', toString(kin.childNodes), '$') | ||
| //@ts-ignore | ||
| kin.update(['a']) | ||
| ct('===', toString(kin.childNodes), 'A$AA') | ||
| //@ts-ignore | ||
| kin.update(['a', 'b']) | ||
| ct('===', toString(kin.childNodes), 'aB$aBaB') | ||
| ls1.update(['a']) | ||
| ct('===', toString(kin.childNodes), 'A$') | ||
| ls2.update(['a', 'b']) | ||
| ct('===', toString(kin.childNodes), 'A$AB') | ||
| }) |
New alerts
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
Fixed alerts
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
Worsened metrics
- Total package byte prevSize
- decreased by-11.62%
17585
- Number of package files
- decreased by-23.81%
16
- Lines of code
- decreased by-19.59%
390
- Number of lines in readme file
- decreased by-12.79%
75
No dependency changes