[wip] React Async DevTools (closes #43) (#44)

* Setup Storybook.

* Cleanup.

* Add 'reducer' and 'dispatcher' options to allow external control over internal state.

* Essential UI for DevTools.

* Re-enable all tests.

* Invoke the promiseFn from the dispatcher so we can control its invocation.

* Use a global variable to hook up DevTools to each instance of React Async.

* Add DevTools.propTypes.

* Create a namespace on window.

* No need to wrap children.

* Styling tweaks.

* Fix property access on undefined.

* Fix global access to devToolsDispatcher.

* Setup Yarn.

* wip: Setup subpackages.

* Run lint/test/build on preversion instead of prepublish so it will be done before creating a release tag.

* Run lint/test/build on preversion instead of prepublish so it will be done before creating a release tag.

* Fix monorepo.

* Use inline styles instead of a CSS file.

* Hoist most scripting and dependencies up to the root. Fixed eslint and jest setup.

* Define dependencies in the right place and only once.

* Upgrade to @testing-library/react

* Bump dependencies.

* Use yarn workspaces to bump versions.

* We're already at 6.2.2.

* Update Travis config.

* Make sure we run a clean build before publishing.

* Build after bumping, and drop the publish script.

* Include publish script just to clarify we should be publishing the pkg dir.

* Utility scripts.

* Add tests for DevTools and suppress act warnings.

* Add lockfile for root package.

Author: ghengeveld

.babelrc

@@ -12,7 +12,8 @@
   },
   "plugins": ["jest", "promise", "react", "react-hooks"],
   "rules": {
-    "react-hooks/rules-of-hooks": "error"
+    "react-hooks/rules-of-hooks": "error",
+    "no-console": "error"
   },
   "settings": {
     "react": {

.eslintrc

@@ -1,4 +1,6 @@
-pkg/
-node_modules/
 coverage/
-package-lock.json
+docs/
+node_modules/
+pkg/
+
+examples/*/yarn.lock

.gitignore

@@ -0,0 +1,4 @@
+import { configure } from "@storybook/react"
+
+const req = require.context("../stories", true, /\.stories\.js$/)
+configure(() => req.keys().forEach(filename => req(filename)), module)

.storybook/config.js

@@ -0,0 +1,4 @@
+module.exports = async ({ config }) => {
+  delete config.module.rules[0].include
+  return config
+}

.storybook/webpack.config.js

@@ -2,8 +2,9 @@ language: node_js
 node_js:
   - "node"
 cache:
+  yarn: true
   directories:
     - node_modules
-script: npm run lint && npm run test:compat
+script: yarn ci
 after_success:
   - bash <(curl -s https://codecov.io/bash) -e TRAVIS_NODE_VERSION

.travis.yml

@@ -337,6 +337,7 @@ These can be passed in an object to `useAsync()`, or as props to `<Async>` and c
 - `onReject` Callback invoked when Promise rejects.
 - `reducer` State reducer to control internal state updates.
 - `dispatcher` Action dispatcher to control internal action dispatching.
+- `debugLabel` Unique label used in DevTools.
 
 `useFetch` additionally takes these options:
 
@@ -434,6 +435,13 @@ dispatcher at some point.
 > This is a power feature similar to the [state reducer pattern]. It allows you to control state changes by
 > intercepting actions before they are dispatched, to dispatch additional actions, possibly later in time.
 
+#### `debugLabel`
+
+> `string`
+
+A unique label to describe this React Async instance, used in React DevTools (through `useDebugValue`) and React Async
+DevTools.
+
 #### `defer`
 
 > `boolean`

README.md

@@ -0,0 +1,14 @@
+/* eslint-disable no-console */
+console.log("Loaded babel.config.js")
+
+module.exports = {
+  presets: ["@babel/preset-env", "@babel/preset-react"],
+  plugins: ["@babel/plugin-proposal-object-rest-spread"],
+
+  env: {
+    test: {
+      presets: ["@babel/preset-env", "@babel/preset-react"],
+      plugins: ["@babel/plugin-transform-runtime"],
+    },
+  },
+}

babel.config.js

@@ -0,0 +1,13 @@
+/* eslint-disable no-console */
+console.log("Loaded jest.config.js")
+
+module.exports = {
+  rootDir: "./",
+  collectCoverage: true,
+  coverageDirectory: "<rootDir>/coverage",
+  verbose: true,
+  bail: true,
+  transform: { "^.+\\.js$": "babel-jest" },
+  projects: ["<rootDir>/packages/*"],
+  setupFiles: ["<rootDir>/jest.setup.js"],
+}

jest.config.js

@@ -0,0 +1,23 @@
+/* eslint-disable no-console */
+
+/**
+ * This is just a little hack to silence a warning that we'll get until react fixes this
+ * @see https://github.com/facebook/react/pull/14853
+ */
+
+console.log("Loaded jest.setup.js")
+
+const originalError = console.error
+
+beforeAll(() => {
+  console.error = (...args) => {
+    if (/Warning.*not wrapped in act/.test(args[0])) {
+      return
+    }
+    originalError.call(console, ...args)
+  }
+})
+
+afterAll(() => {
+  console.error = originalError
+})