Modernization

- Upgrades dependencies
- Ensures support for React 16
- Switches from Babel compilation to Rollup
- Updates example

Author: nhunzaker

.babelrc

@@ -1,8 +1,14 @@
 {
   "presets": [
-    "es2015",
+    [
+      "env",
+      {
+        "useBuiltIns": false,
+        "loose": true,
+        "modules": false
+      }
+    ],
     "react",
     "stage-2"
-  ],
-  "sourceMaps": "inline"
+  ]
 }

Makefile

@@ -1,36 +1,22 @@
-SHELL := /bin/bash
-PATH  := ./node_modules/.bin:$(PATH)
+all: bundle package.json documentation
 
-.PHONY: clean test test-watch package.json javascript release example documentation
-
-all: javascript package.json documentation
-
-javascript: $(shell find src -name '*.js*' ! -name '*.test.js*')
-	mkdir -p dist
-	babel -d dist $^
+bundle:
+	@ ./bin/bundle
 
 package.json:
-	node -p 'p=require("./package");p.private=undefined;p.scripts=p.devDependencies=undefined;JSON.stringify(p,null,2)' > dist/package.json
+	@ node -p 'p=require("./package");p.private=undefined;p.scripts=p.devDependencies=undefined;JSON.stringify(p,null,2)' > dist/package.json
 
 documentation: README.md LICENSE.md
-	mkdir -p dist
-	cp -r $^ dist
+	@ mkdir -p dist
+	@ cp -r $^ dist
 
 release: clean all
-	npm publish dist
+	@ npm publish dist
 
-release-support: clean all
-	npm publish dist --tag support
-
-example:
-	open example/index.html
-	webpack -wd
+prerelease: clean all
+	@ npm publish dist --tag beta
 
 clean:
-	rm -rf dist
-
-lint:
-	@ eslint {src,test}/**/*.{js,jsx}
+	@ rm -rf dist
 
-test: lint
-	NODE_ENV=test karma start --single-run
+.PHONY: clean package.json bundle release documentation

bin/bundle

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+
+'use strict'
+
+const rollup = require('rollup')
+const buble = require('rollup-plugin-buble')
+const path = require('path')
+
+let bundler = rollup.rollup({
+  input: path.resolve(__dirname, '../src/focus-trap'),
+  plugins: [
+    buble()
+  ],
+  external: ['react', 'react-dom'],
+  onwarn: function(error) {
+    // Do not raise warnings for named exports
+    if (error.code !== 'MIXED_EXPORTS') {
+      console.warn(error.toString())
+    }
+  }
+})
+
+let write = bundler.then(bundle => {
+  return bundle.write({
+    file: './dist/index.js',
+    format: 'cjs',
+    sourcemap: true
+  })
+})
+
+write.catch(error => console.error(error.toString()))

bin/format

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# Format our code according to our standards
+#
+# Run this command with:
+#   ./bin/format
+
+PATH=$(yarn bin):$PATH
+
+# Run prettier on these files:
+SRC=$(git ls-files | grep -v "^\." | grep ".js\$")
+
+# Prettier is an automated code formatter.
+# https://github.com/prettier/prettier
+prettier --write $SRC

bin/lint

@@ -0,0 +1,21 @@
+#!/bin/bash
+
+# Check our code base for inconsistencies in code formatting
+# and common mistakes.
+#
+# Run this command with:
+#   ./bin/lint
+
+set -e
+
+PATH=$(yarn bin):$PATH
+
+# Check these files for mistakes:
+SRC=$(git ls-files | grep -v "^\." | grep ".js\$")
+
+# Prettier is an automated code formatter.
+# https://github.com/prettier/prettier
+if ! prettier --list-different $SRC; then
+  echo "Auto-formatting is out of sync. Please run yarn format and commit the result."
+  exit 1
+fi

example/index.js

@@ -1,54 +1,60 @@
-var React  = require('react')
-var DOM = require('react-dom')
-var FocusTrap = require('../src/focus-trap')
-
-var Component = React.createClass({
-
-  getInitialState() {
-    return {
-      focusOne: false,
-      focusTwo: false
-    }
-  },
+import React from 'react'
+import DOM from 'react-dom'
+import FocusTrap from '../src/focus-trap'
+
+class Component extends React.Component {
+  state = {
+    focusOne: false,
+    focusTwo: false
+  }
 
   render() {
     return (
       <div>
-        <button onClick={ this._onOpenOne}>Open Dialog One</button>
-        <FocusTrap onExit={ this._onExitOne } active={ this.state.focusOne }>
+        <button onClick={this._onOpenOne}>Open Dialog One</button>
+
+        <FocusTrap onExit={this._onExitOne} active={this.state.focusOne}>
           <h1>This is the primary dialog</h1>
-          <p><a href="http://google.com">Focus one</a></p>
-          <p><a href="http://google.com">Focus two</a></p>
-          <button onClick={ this._onOpenTwo }>Open Dialog Two</button>
+          <p>
+            <a href="http://google.com">Focus one</a>
+          </p>
+          <p>
+            <a href="http://google.com">Focus two</a>
+          </p>
+          <button onClick={this._onOpenTwo}>Open Dialog Two</button>
         </FocusTrap>
-        <FocusTrap onExit={ this._onExitTwo } active={ this.state.focusTwo }>
+
+        <FocusTrap onExit={this._onExitTwo} active={this.state.focusTwo}>
           <h1>This is the secondary dialog</h1>
 
           <input type="text" placeholder="This should autofocus" autoFocus />
 
-          <p><a href="http://google.com">Focus one</a></p>
-          <p><a href="http://google.com">Focus two</a></p>
+          <p>
+            <a href="http://google.com">Focus one</a>
+          </p>
+          <p>
+            <a href="http://google.com">Focus two</a>
+          </p>
         </FocusTrap>
       </div>
     )
-  },
+  }
 
-  _onOpenOne() {
+  _onOpenOne = () => {
     this.setState({ focusOne: true })
-  },
+  }
 
-  _onOpenTwo() {
+  _onOpenTwo = () => {
     this.setState({ focusTwo: true })
-  },
+  }
 
-  _onExitOne() {
+  _onExitOne = () => {
     this.setState({ focusOne: false })
-  },
+  }
 
-  _onExitTwo() {
+  _onExitTwo = () => {
     this.setState({ focusTwo: false })
   }
-
-})
+}
 
 DOM.render(<Component />, window.app)

example/index.html renamed to example/public/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <title>React Ink Example</title>
-    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="/style.css">
     <style>
       body {
         font-family: sans-serif;
@@ -23,6 +23,6 @@
       <h1>Example loading...</h1>
     </div>
 
-    <script src="example.build.js"></script>
+    <script src="/bundle.js"></script>
   </body>
 </html>

example/style.css renamed to example/public/style.css

@@ -1,30 +1,23 @@
-var webpackConfig = require('./webpack.config')
-
-module.exports = function (config) {
+const webpackConfig = require('./webpack.config')
 
+module.exports = function(config) {
   config.set({
+    hostname: '0.0.0.0',
 
-    browsers: [ 'Chrome' ],
+    browsers: ['Chrome'],
 
-    frameworks: [ 'mocha' ],
+    frameworks: ['mocha'],
 
-    files: [
-      'test/*.js*'
-    ],
+    files: ['test/*.js*'],
 
-    reporters: [ 'progress' ],
+    reporters: ['progress'],
 
     preprocessors: {
-      'test/*.js*': [ 'webpack' ]
+      'test/*.js*': ['webpack']
     },
 
     webpack: {
-      resolve : webpackConfig.resolve,
-      module  : webpackConfig.module
-    },
-
-    webpackServer: {
-      noInfo: true
+      module: webpackConfig.module
     }
   })
 }

karma.conf.js

@@ -5,13 +5,20 @@
   "description": "Traps focus for accessible dropdowns and modal content.",
   "main": "src/focus-trap.js",
   "scripts": {
-    "start": "make example",
-    "test": "make test"
+    "start": "webpack-dev-server",
+    "build": "make all",
+    "test": "NODE_ENV=test karma start --single-run",
+    "format": "./bin/format",
+    "lint": "./bin/lint"
   },
   "repository": {
     "type": "git",
     "url": "git@github.com:vigetlabs/react-focus-trap.git"
   },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true
+  },
   "keywords": [
     "react",
     "a11y"
@@ -21,21 +28,26 @@
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
-    "babel-eslint": "^7.2.3",
-    "babel-loader": "6.2.4",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
+    "babel-eslint": "^8.0.0",
+    "babel-loader": "^7.0.0",
+    "babel-preset-env": "^1.6.1",
     "babel-preset-stage-2": "^6.24.1",
-    "eslint": "3.1.1",
-    "eslint-plugin-react": "5.2.2",
-    "karma": "1.1.1",
-    "karma-chrome-launcher": "1.0.1",
-    "karma-mocha": "1.1.1",
-    "karma-webpack": "~1",
-    "mocha": "2.5.3",
-    "react": "^15.5.4",
-    "react-addons-test-utils": "^15.5.1",
-    "react-dom": "^15.5.4",
-    "webpack": "~1.13.1"
+    "eslint": "^4.10.0",
+    "eslint-plugin-react": "^7.4.0",
+    "karma": "^1.7.0",
+    "karma-chrome-launcher": "^2.2.0",
+    "karma-mocha": "^1.3.0",
+    "karma-webpack": "^2.0.0",
+    "mocha": "^4.0.0",
+    "prettier": "^1.7.4",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "rollup": "^0.50.0",
+    "rollup-plugin-buble": "^0.16.0",
+    "webpack": "^3.8.1",
+    "webpack-dev-server": "^2.9.3"
+  },
+  "dependencies": {
+    "babel-preset-react": "^6.24.1"
   }
 }