Use airbnb eslint config

Author: Tomáš Vojtášek

.eslintrc.js

@@ -1,12 +1,35 @@
+const prettierConfig = require('./.prettierrc.js')
+
 module.exports = {
  parser: 'babel-eslint',
+ parserOptions: {
+ ecmaVersion: 2017,
+ sourceType: 'module',
+ ecmaFeatures: {
+ jsx: true
+ }
+ },
  env: {
  browser: true,
  es6: true,
- node: true,
+ node: true
+ },
+ extends: ['airbnb', 'prettier', 'prettier/react'],
+ plugins: ['prettier'],
+ rules: {
+ 'prettier/prettier': [2, prettierConfig],
+ 'no-param-reassign': 0,
+ 'no-underscore-dangle': 0,
+ 'no-plusplus': 0,
+ 'no-restricted-syntax': 0,
+ 'import/prefer-default-export': 0,
+ 'react/prefer-stateless-function': 0,
+ 'react/destructuring-assignment': 0,
+ 'import/no-extraneous-dependencies': [
+ 'error',
+ { devDependencies: ['stories/**/*'] }
+ ]
  },
- plugins: ['prettier', 'react'],
- extends: ['prettier', 'plugin:react/recommended', 'eslint:recommended'],
  settings: {
  react: {
  version: 'detect'

.prettierrc.js

@@ -1,6 +1,7 @@
 module.exports = {
- trailingComma: "es5",
- tabWidth: 2,
+ printWidth: 80,
+ trailingComma: 'none',
  semi: false,
- singleQuote: true
-}
+ singleQuote: true,
+ jsxBracketSameLine: true
+}

README.md

@@ -56,13 +56,13 @@ React Canvas provides a set of standard React components that abstract the under
 
 ### <Gradient>
 
-**Gradient** can be used to set the background of a group or surface. 
+**Gradient** can be used to set the background of a group or surface.
 ```javascript
  render() {
  ...
  return (
  <Group style={this.getStyle()}>
- <Gradient style={this.getGradientStyle()} 
+ <Gradient style={this.getGradientStyle()}
  colorStops={this.getGradientColors()} />
  </Group>
  );
@@ -73,11 +73,7 @@ React Canvas provides a set of standard React components that abstract the under
  { color: "#000", position: 1 }
  ]
  }
-``` 
-
-### &lt;ListView&gt;
-
-**ListView** is a touch scrolling container that renders a list of elements in a column. Think of it like UITableView for the web. It leverages many of the same optimizations that make table views on iOS and list views on Android fast.
+```
 
 ## Events
 
@@ -142,47 +138,6 @@ var MyComponent = React.createClass({
 });
 ```
 
-## ListView
-
-Many mobile interfaces involve an infinitely long scrolling list of items. React Canvas provides the ListView component to do just that.
-
-Because ListView virtualizes elements outside of the viewport, passing children to it is different than a normal React component where children are declared in render().
-
-The `numberOfItemsGetter`, `itemHeightGetter` and `itemGetter` props are all required.
-
-```javascript
-var ListView = ReactCanvas.ListView;
-
-var MyScrollingListView = React.createClass({
-
- render: function () {
- return (
- <ListView
- numberOfItemsGetter={this.getNumberOfItems}
- itemHeightGetter={this.getItemHeight}
- itemGetter={this.renderItem} />
- );
- },
-
- getNumberOfItems: function () {
- // Return the total number of items in the list
- },
-
- getItemHeight: function () {
- // Return the height of a single item
- },
-
- renderItem: function (index) {
- // Render the item at the given index, usually a <Group>
- },
-
-});
-```
-
-See the [timeline example](examples/timeline/app.js) for a more complete example.
-
-Currently, ListView requires that each item is of the same height. Future versions will support variable height items.
-
 ## Text sizing
 
 React Canvas provides the `measureText` function for computing text metrics.

package.json

@@ -30,16 +30,19 @@
  "alea": "^0.0.9",
  "babel-cli": "^6.26.0",
  "babel-core": "^6.26.3",
- "babel-eslint": "^8.2.3",
+ "babel-eslint": "^10.0.1",
  "babel-preset-env": "^1.7.0",
  "babel-preset-react": "^6.24.1",
  "babel-preset-stage-2": "^6.24.1",
  "babel-runtime": "^6.26.0",
  "d3-scale": "^1.0.6",
- "eslint": "^5.16.0",
+ "eslint": "5.3.0",
+ "eslint-config-airbnb": "17.1.0",
  "eslint-config-prettier": "^4.3.0",
+ "eslint-plugin-import": "^2.14.0",
+ "eslint-plugin-jsx-a11y": "^6.1.1",
  "eslint-plugin-prettier": "^3.1.0",
- "eslint-plugin-react": "^7.13.0",
+ "eslint-plugin-react": "^7.11.0",
  "lodash.range": "^3.2.0",
  "prettier": "^1.17.1",
  "react": "^16.8.6",
@@ -57,7 +60,6 @@
  "multi-key-cache": "^1.0.2",
  "prop-types": "^15.6.1",
  "react-reconciler": "^0.20.4",
- "scheduler": "^0.14.0",
- "scroller": "https://github.com/mjohnston/scroller"
+ "scheduler": "^0.14.0"
  }
 }

src/Canvas.js

@@ -1,5 +1,3 @@
-'use strict'
-
 // Note that this class intentionally does not use PooledClass.
 // DrawingUtils manages <canvas> pooling for more fine-grained control.
 
@@ -19,13 +17,13 @@ function Canvas(width, height, scale) {
 }
 
 Object.assign(Canvas.prototype, {
- getRawCanvas: function() {
+ getRawCanvas() {
  return this._canvas
  },
 
- getContext: function() {
+ getContext() {
  return this._canvas.getContext('2d')
- },
+ }
 })
 
 // PooledClass:

src/CanvasComponent.js

@@ -11,12 +11,12 @@ export default class CanvasComponent {
  this.subscriptions = new Map()
  this.listeners = new Map()
  this.node = new RenderLayer(this)
- this._layerId = LAYER_GUID++
+ this._layerId = LAYER_GUID
+ LAYER_GUID += 1
  }
 
  putEventListener = (type, listener) => {
- const subscriptions = this.subscriptions
- const listeners = this.listeners
+ const { listeners, subscriptions } = this
 
  let isListenerDifferent = false
  if (listeners.get(type) !== listener) {
@@ -49,6 +49,7 @@ export default class CanvasComponent {
  let style = emptyObject
 
  if (props.style) {
+ // eslint-disable-next-line prefer-destructuring
  style = props.style
  layer._originalStyle = style
  } else {
@@ -59,7 +60,7 @@ export default class CanvasComponent {
  layer.frame = make(0, 0, 0, 0)
  }
 
- const frame = layer.frame
+ const { frame } = layer
  const l = style.left || 0
  const t = style.top || 0
  const w = style.width || 0

src/CanvasRenderer.js

@@ -1,34 +1,34 @@
 import React from 'react'
 import invariant from 'invariant'
+import ReactFiberReconciler from 'react-reconciler'
+import {
+ unstable_now as now,
+ unstable_shouldYield as shouldYield,
+ unstable_scheduleCallback as scheduleDeferredCallback,
+ unstable_cancelCallback as cancelDeferredCallback
+} from 'scheduler'
 import { emptyObject } from './utils'
 import Gradient from './Gradient'
 import Text from './Text'
 import Group from './Group'
 import { RawImage } from './Image'
-import ReactFiberReconciler from 'react-reconciler'
 import CanvasComponent from './CanvasComponent'
 import { getClosestInstanceFromNode } from './ReactDOMComponentTree'
-import {
- unstable_now as now,
- unstable_shouldYield as shouldYield,
- unstable_scheduleCallback as scheduleDeferredCallback,
- unstable_cancelCallback as cancelDeferredCallback,
-} from 'scheduler'
 
 const UPDATE_SIGNAL = {}
 const MAX_POOLED_COMPONENTS_PER_TYPE = 1024
 
 const componentConstructors = {
- Gradient: Gradient,
- Text: Text,
- Group: Group,
- RawImage: RawImage,
+ Gradient,
+ Text,
+ Group,
+ RawImage
 }
 
 const componentPool = {}
 
 const freeComponentToPool = component => {
- const type = component.type
+ const { type } = component
 
  if (!(component.type in componentPool)) {
  componentPool[type] = []
@@ -44,7 +44,7 @@ const freeComponentToPool = component => {
 const freeComponentAndChildren = c => {
  if (!(c instanceof CanvasComponent)) return
 
- const children = c.getLayer().children
+ const { children } = c.getLayer()
 
  for (let i = 0; i < children.length; i++) {
  const childLayer = children[i]
@@ -66,7 +66,7 @@ const CanvasHostConfig = {
  child.getLayer().inject(parentInstance.getLayer())
  },
 
- createInstance(type, props /*, internalInstanceHandle*/) {
+ createInstance(type, props /* , internalInstanceHandle */) {
  let instance
 
  const pool = componentPool[type]
@@ -85,11 +85,13 @@ const CanvasHostConfig = {
  return instance
  },
 
- createTextInstance(text /*, rootContainerInstance, internalInstanceHandle*/) {
+ createTextInstance(
+ text /* , rootContainerInstance, internalInstanceHandle */
+ ) {
  return text
  },
 
- finalizeInitialChildren(/*domElement, type, props*/) {
+ finalizeInitialChildren(/* domElement, type, props */) {
  return false
  },
 
@@ -101,19 +103,19 @@ const CanvasHostConfig = {
  // Noop
  },
 
- prepareUpdate(/*domElement, type, oldProps, newProps*/) {
+ prepareUpdate(/* domElement, type, oldProps, newProps */) {
  return UPDATE_SIGNAL
  },
 
  resetAfterCommit() {
  // Noop
  },
 
- resetTextContent(/*domElement*/) {
+ resetTextContent(/* domElement */) {
  // Noop
  },
 
- shouldDeprioritizeSubtree(/*type, props*/) {
+ shouldDeprioritizeSubtree(/* type, props */) {
  return false
  },
 
@@ -197,11 +199,11 @@ const CanvasHostConfig = {
  parentLayer.invalidateLayout()
  },
 
- commitTextUpdate(/*textInstance, oldText, newText*/) {
+ commitTextUpdate(/* textInstance, oldText, newText */) {
  // Noop
  },
 
- commitMount(/*instance, type, newProps*/) {
+ commitMount(/* instance, type, newProps */) {
  // Noop
  },
 
@@ -210,7 +212,7 @@ const CanvasHostConfig = {
  instance.applyLayerProps(oldProps, newProps)
  instance.getLayer().invalidateLayout()
  }
- },
+ }
 }
 
 const CanvasRenderer = ReactFiberReconciler(CanvasHostConfig)
@@ -222,7 +224,7 @@ CanvasRenderer.injectIntoDevTools({
  rendererPackageName: 'react-canvas',
  getInspectorDataForViewTag: (...args) => {
  console.log(args) // eslint-disable-line no-console
- },
+ }
 })
 
 const registerComponentConstructor = (name, ctor) => {