diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..f9f2a02 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": [ "es2015" ] +} \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..6719f1b --- /dev/null +++ b/.eslintrc @@ -0,0 +1,22 @@ +{ + "extends": "airbnb", + "rules": { + "max-len": "off", + "prefer-rest-params": "off", + "no-restricted-syntax": "off", + "func-names": "off", + "consistent-return": "off", + "no-loop-func": "off", + "no-console": "off", + "no-underscore-dangle": "off", + "no-shadow": "off", + "no-use-before-define": "off", + "no-param-reassign": "off", + "no-alert": "off", + "no-nested-ternary": "off", + "no-return-assign": ["error", "always"], + "no-unused-vars": "off", + "newline-per-chained-call": "off", + "no-restricted-properties": "off" + } +} \ No newline at end of file diff --git a/package.json b/package.json index cad9025..c942a0e 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ "url": "https://github.com/curran/d3-component.git" }, "scripts": { - "pretest": "rm -rf build && mkdir build && rollup -f umd -g d3-selection:d3 -n d3 -o build/d3-component.js -- index.js", + "pretest": "rm -rf build && mkdir build && rollup -c", "test": "tape 'test/**/*-test.js'", "prepublish": "npm run test && uglifyjs build/d3-component.js -c -m -o build/d3-component.min.js", "postpublish": "git push; git push --tags" @@ -26,7 +26,15 @@ "jsdom": "^9.11.0", "rollup": "0.41", "tape": "4", - "uglify-js": "2" + "uglify-js": "2", + "eslint": "^2.9.0", + "eslint-config-airbnb": "^9.0.1", + "eslint-plugin-import": "^1.10.2", + "rollup-plugin-babel": "^2.7.1", + "babel-plugin-external-helpers": "^6.18.0", + "babel-preset-es2015": "^6.18.0", + "babel-register": "^6.18.0", + "babelrc-rollup": "^3.0.0" }, "dependencies": { "d3-selection": "^1.0.4" diff --git a/rollup.config.js b/rollup.config.js new file mode 100644 index 0000000..6475045 --- /dev/null +++ b/rollup.config.js @@ -0,0 +1,24 @@ +import babel from 'rollup-plugin-babel'; +import babelrc from 'babelrc-rollup'; + +let pkg = require('./package.json'); +let external = Object.keys(pkg.dependencies); + +export default { + entry: 'index.js', + plugins: [ + babel(babelrc()), + ], + external: external, + targets: [ + { + dest: pkg.main, + format: 'umd', + moduleName: 'd3', + sourceMap: true + } + ], + globals: { + 'd3-selection': 'd3' + } +}; \ No newline at end of file diff --git a/src/component.js b/src/component.js index 9df8341..f2e7a30 100644 --- a/src/component.js +++ b/src/component.js @@ -1,16 +1,17 @@ -import { select } from "d3-selection"; -var setInstance = function (node, value){ node.__instance__ = value }, - getInstance = function (node){ return node.__instance__; }, - noop = function (){}; // no operation +import { select } from 'd3-selection'; -export default function (tagName, className){ - var create = noop, - render = noop, - destroy = noop, - key; +const setInstance = (node, value) => { node.__instance__ = value; }; // no operation +const getInstance = node => node.__instance__; +const noop = () => {}; - function component(selection, data, context){ - var instances = (selection.nodeName ? select(selection) : selection) +export default function (tagName, className) { + let create = noop; + let render = noop; + let destroy = noop; + let key; + + function component(selection, data, context) { + const instances = (selection.nodeName ? select(selection) : selection) .selectAll(mine) .data(dataArray(data, context), key); instances @@ -18,52 +19,60 @@ export default function (tagName, className){ .each(destroyInstance); return instances .enter().append(tagName) - .attr("class", className) + .attr('class', className) .each(createInstance) .merge(instances) .each(render); } - function mine(){ + function mine() { return Array.from(this.children).filter(belongsToMe); } - function belongsToMe(node){ - var instance = getInstance(node); + function belongsToMe(node) { + const instance = getInstance(node); return instance && instance.owner === component; } - function dataArray(data, context){ + function dataArray(data, context) { data = Array.isArray(data) ? data : [data]; - return context ? data.map(function (d){ - return Object.assign(Object.create(context), d); - }) : data; + return context ? data.map(d => Object.assign(Object.create(context), d)) : data; } - function createInstance(d, i, nodes){ + function createInstance(d, i, nodes) { setInstance(this, { owner: component, - destroy: function (){ - return destroy.call(this, d, i, nodes); - }.bind(this) + destroy: () => destroy.call(this, d, i, nodes), }); create.call(this, d, i, nodes); } - function destroyInstance(){ - select(this).selectAll("*").each(destroyDescendant); + function destroyInstance() { + select(this).selectAll('*').each(destroyDescendant); (getInstance(this).destroy() || select(this)).remove(); } - function destroyDescendant(){ - var instance = getInstance(this); - instance && instance.destroy(); + function destroyDescendant() { + const instance = getInstance(this); + if (instance) { instance.destroy(); } } - component.render = function(_) { return (render = _, component); }; - component.create = function(_) { return (create = _, component); }; - component.destroy = function(_) { return (destroy = _, component); }; - component.key = function(_) { return (key = _, component); }; + component.render = (_) => { + render = _; + return component; + }; + component.create = (_) => { + create = _; + return component; + }; + component.destroy = (_) => { + destroy = _; + return component; + }; + component.key = (_) => { + key = _; + return component; + }; return component; -}; +}