perf(Manager): Don't create an object on each render

+ several build improvements

Author: Federico Zivolo

.eslintrc.js

@@ -1,23 +1,14 @@
 module.exports = {
   root: true,
-  extends: ['standard', 'standard-react', 'prettier', 'prettier/react'],
-  plugins: ['prettier', 'jest'],
   parser: 'babel-eslint',
   env: {
     browser: true,
-    'jest/globals': true,
-  },
-  settings: {
-    react: {
-      version: '16.3',
-    },
   },
+  plugins: ['react'],
   rules: {
-    // prettier
-    'prettier/prettier': [
-      'error',
-      { trailingComma: 'es5', singleQuote: true, semi: true },
-    ],
-    'no-unexpected-multiline': 'off',
+    'no-unused-vars': 'error',
+    'react/jsx-uses-vars': 'error',
+    'react/jsx-uses-react': 'error',
+    'react/react-in-jsx-scope': 'error',
   },
 };

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  singleQuote: true,
+  trailingComma: 'es5',
+};

README.md

@@ -3,10 +3,9 @@
 [![npm version](https://img.shields.io/npm/v/react-popper.svg)](https://www.npmjs.com/package/react-popper)
 [![npm downloads](https://img.shields.io/npm/dm/react-popper.svg)](https://www.npmjs.com/package/react-popper)
 [![Dependency Status](https://david-dm.org/souporserious/react-popper.svg)](https://david-dm.org/souporserious/react-popper)
-[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
-React wrapper around [PopperJS](https://github.com/FezVrasta/popper.js/).
+React wrapper around [Popper.js](https://popper.js.org).
 
 ## Install
 
@@ -31,7 +30,7 @@ Via `script` tag (UMD library exposed as `ReactPopper`):
 Example:
 
 ```jsx
-import { Manager, Reference, Popper } from 'react-popper';
+import { Manager, Reference, Popper } from "react-popper";
 
 const Example = () => (
   <Manager>
@@ -142,7 +141,7 @@ The `referenceElement` property must be an object with an interface compatible w
 If `referenceElement` is defined, it will take precedence over any `referenceProps.ref` provided refs.
 
 ```jsx
-import Popper from 'react-popper';
+import Popper from "react-popper";
 
 class VirtualReference {
   getBoundingClientRect() {

flow-typed/npm/popper.js_v1.x.x.js

@@ -1,32 +1,33 @@
-declare module 'popper.js' {
-  declare type Position = 'top' | 'right' | 'bottom' | 'left';
+declare module "popper.js" {
+  declare type Position = "top" | "right" | "bottom" | "left";
   declare type Placement =
-    | 'auto-start'
-    | 'auto'
-    | 'auto-end'
-    | 'top-start'
-    | 'top'
-    | 'top-end'
-    | 'right-start'
-    | 'right'
-    | 'right-end'
-    | 'bottom-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'left-end'
-    | 'left'
-    | 'left-start';
+    | "auto-start"
+    | "auto"
+    | "auto-end"
+    | "top-start"
+    | "top"
+    | "top-end"
+    | "right-start"
+    | "right"
+    | "right-end"
+    | "bottom-end"
+    | "bottom"
+    | "bottom-start"
+    | "left-end"
+    | "left"
+    | "left-start";
 
   declare type Offset = {
     top: number,
     left: number,
     width: number,
     height: number,
+    position: Position,
   };
 
-  declare type Boundary = 'scrollParent' | 'viewport' | 'window';
+  declare type Boundary = "scrollParent" | "viewport" | "window";
 
-  declare type Behavior = 'flip' | 'clockwise' | 'counterclockwise';
+  declare type Behavior = "flip" | "clockwise" | "counterclockwise";
 
   declare type Data = {
     instance: Popper,
@@ -36,6 +37,7 @@ declare module 'popper.js' {
     hide: boolean,
     arrowElement: Element,
     styles: CSSStyleDeclaration,
+    arrowStyles: CSSStyleDeclaration,
     boundaries: Object,
     offsets: {
       popper: Offset,
@@ -83,8 +85,8 @@ declare module 'popper.js' {
     },
     computeStyle?: BaseModifier & {
       gpuAcceleration?: boolean,
-      x?: 'bottom' | 'top',
-      y?: 'left' | 'right',
+      x?: "bottom" | "top",
+      y?: "left" | "right",
     },
 
     [name: string]: (BaseModifier & { [string]: * }) | null,

package.json

@@ -3,42 +3,40 @@
   "version": "1.0.0-beta.1",
   "description": "React wrapper around Popper.js",
   "license": "MIT",
-  "author": "Travis Arnold <[email protected]> (http://souporserious.com)",
+  "author":
+    "Travis Arnold <[email protected]> (http://souporserious.com)",
   "homepage": "https://github.com/souporserious/react-popper",
   "main": "dist/react-popper.js",
   "umd:main": "dist/react-popper.umd.js",
   "module": "lib/index.js",
   "typings": "typings/react-popper.d.ts",
-  "files": [
-    "dist",
-    "lib",
-    "typings/react-popper.d.ts"
-  ],
+  "files": ["dist", "lib", "typings/react-popper.d.ts"],
   "scripts": {
-    "build": "npm run build:clean && npm run build:es && npm run build:umd && npm run build:cjs && npm run build:flow && npm run build:umd-min && npm run build:cjs-min",
+    "build":
+      "npm run build:clean && npm run build:es && npm run build:umd && npm run build:cjs && npm run build:flow && npm run build:umd-min && npm run build:cjs-min",
     "build:clean": "rimraf dist/ && rimraf lib/",
     "build:es": "babel src --ignore '*.test.js,__mocks__' --out-dir lib",
-    "build:umd": "rollup -c --output.format umd --output.name 'react-popper' --output.file dist/react-popper.umd.js",
-    "build:cjs": "rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.js",
+    "build:umd":
+      "rollup -c --output.format umd --output.name 'react-popper' --output.file dist/react-popper.umd.js",
+    "build:cjs":
+      "rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.js",
     "build:flow": "flow-copy-source --ignore '{__mocks__/*,*.test}.js' src lib",
-    "build:umd-min": "MINIFY=true rollup -c --output.format umd --output.name 'react-popper' --output.file dist/react-popper.umd.min.js",
-    "build:cjs-min": "MINIFY=true rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.min.js",
+    "build:umd-min":
+      "MINIFY=true rollup -c --output.format umd --output.name 'react-popper' --output.file dist/react-popper.umd.min.js",
+    "build:cjs-min":
+      "MINIFY=true rollup -c --output.format cjs --output.name 'react-popper' --output.file dist/react-popper.min.js",
     "demo": "parcel --out-dir demo/dist demo/index.html",
     "pretest": "npm run lint",
     "test": "npm run test:flow && npm run test:ts && npm run test:jest",
     "test:ts": "tsc --project ./typings/tests",
     "test:flow": "flow check",
     "test:jest": "jest",
     "prepare": "npm run build",
-    "precommit": "lint-staged",
-    "format": "npm run lint -- --fix --quiet",
-    "lint": "eslint --ext .js,.jsx src/ example/"
+    "precommit": "pretty-quick --staged && eslint src"
   },
   "jest": {
     "setupTestFrameworkScriptFile": "<rootDir>jest.setup.js",
-    "snapshotSerializers": [
-      "enzyme-to-json/serializer"
-    ]
+    "snapshotSerializers": ["enzyme-to-json/serializer"]
   },
   "repository": {
     "type": "git",
@@ -56,20 +54,14 @@
     "tooltip",
     "popover"
   ],
-  "lint-staged": {
-    "@(src|demo)/**/*.{js,jsx}": [
-      "eslint --fix --max-warnings 5",
-      "git add"
-    ]
-  },
   "peerDependencies": {
     "react": "0.14.x || ^15.0.0 || ^16.0.0",
     "react-dom": "0.14.x || ^15.0.0 || ^16.0.0"
   },
   "dependencies": {
     "create-react-context": "^0.2.1",
     "popper.js": "^1.14.1",
-    "prop-types": "^15.6.1"
+    "warning": "^3.0.0"
   },
   "devDependencies": {
     "@types/react": "^16.1.0",
@@ -83,38 +75,26 @@
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-2": "^6.24.1",
-    "chokidar": "^1.6.1",
-    "create-styled-element": "^0.4.0",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.3",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-config-standard": "^11.0.0",
-    "eslint-config-standard-react": "^6.0.0",
-    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-flowtype": "^2.46.1",
     "eslint-plugin-jest": "^21.15.0",
-    "eslint-plugin-node": "^6.0.1",
-    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-promise": "^3.7.0",
     "eslint-plugin-react": "^7.7.0",
-    "eslint-plugin-standard": "^3.0.1",
     "flow-bin": "^0.69.0",
     "flow-copy-source": "^1.3.0",
-    "glamor": "^2.20.24",
-    "glamorous": "^3.11.1",
     "jest": "^22.4.3",
-    "node-libs-browser": "^1.0.0",
     "outy": "^0.1.2",
     "parcel-bundler": "^1.6.2",
     "prettier": "^1.11.1",
-    "react": "^16.3.0",
+    "pretty-quick": "^1.4.1",
+    "react": "16.2.0",
     "react-dom": "^16.3.0",
-    "react-measure": "^1.4.6",
-    "react-motion-ui-pack": "^0.10.2",
     "react-portal": "^4.1.4",
     "react-transition-group": "^2.2.1",
-    "react-travel": "^1.3.0",
     "rimraf": "^2.6.2",
     "rollup": "^0.57.1",
     "rollup-plugin-babel": "^3.0.3",
@@ -123,7 +103,6 @@
     "rollup-plugin-node-globals": "^1.2.0",
     "rollup-plugin-node-resolve": "^3.3.0",
     "rollup-plugin-replace": "^2.0.0",
-    "typescript": "^2.8.1",
-    "velocity-react": "^1.2.2"
+    "typescript": "^2.8.1"
   }
 }

src/Manager.js

@@ -1,33 +1,41 @@
 // @flow
-import React, { Component, type Node } from 'react';
-import createContext, { type Context } from 'create-react-context';
+import React, { Component, type Node } from "react";
+import createContext, { type Context } from "create-react-context";
 
 export const ManagerContext: Context<{
   getReferenceRef?: (?HTMLElement) => void,
   referenceNode?: ?HTMLElement,
-}> = createContext({});
+}> = createContext({ getRefeferenceRef: undefined, referenceNode: undefined });
 
 type ManagerProps = {
   children: Node,
 };
 type ManagerState = {
-  referenceNode?: ?HTMLElement,
+  context: {
+    getReferenceRef?: (?HTMLElement) => void,
+    referenceNode?: ?HTMLElement,
+  },
 };
 
 export default class Manager extends Component<ManagerProps, ManagerState> {
-  state = {};
+  constructor() {
+    super();
+    this.state = {
+      context: {
+        getReferenceRef: this.getReferenceRef,
+        referenceNode: undefined,
+      },
+    };
+  }
 
   getReferenceRef = (referenceNode: ?HTMLElement) =>
-    this.setState({ referenceNode });
+    this.setState(({ context }) => ({
+      context: { ...context, referenceNode },
+    }));
 
   render() {
     return (
-      <ManagerContext.Provider
-        value={{
-          referenceNode: this.state.referenceNode,
-          getReferenceRef: this.getReferenceRef,
-        }}
-      >
+      <ManagerContext.Provider value={this.state.context}>
         {this.props.children}
       </ManagerContext.Provider>
     );