[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.

.eslintrc

@@ -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": {

.gitignore

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

.storybook/config.js

@@ -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/webpack.config.js

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

.travis.yml

@@ -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

README.md

@@ -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`

babel.config.js

@@ -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"],
+    },
+  },
+}

jest.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.setup.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
+})

lerna.json

@@ -0,0 +1,6 @@
+{
+  "npmClient": "yarn",
+  "packages": ["packages/*"],
+  "useWorkspaces": true,
+  "version": "independent"
+}

package.json

@@ -1,94 +1,64 @@
 {
-  "name": "react-async",
-  "version": "6.2.2",
-  "description": "React component for declarative promise resolution and data fetching",
-  "keywords": [
-    "react",
-    "async",
-    "promise",
-    "fetch",
-    "hook"
-  ],
+  "name": "root",
+  "private": true,
   "author": "Gert Hengeveld <info@ghengeveld.nl>",
   "license": "ISC",
   "homepage": "https://react-async.dev",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/ghengeveld/react-async.git"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
+  "repository": "git+https://github.com/ghengeveld/react-async.git",
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "lint": "eslint src",
-    "test": "jest src/*.spec.js",
-    "test:watch": "npm test -- --watch",
-    "test:hooks": "jest src/useAsync.spec.js --collectCoverageFrom=src/useAsync.js",
+    "bootstrap": "lerna bootstrap",
+    "lint": "eslint packages/*/src/*.js",
+    "test": "jest packages/*/src/*.spec.js",
+    "test:watch": "yarn test -- --watch",
+    "test:devtools": "jest react-async-devtools/src",
     "test:components": "jest src/Async.spec.js --collectCoverageFrom=src/Async.js",
-    "test:backwards": "npm i react@16.3.1 react-dom@16.3.1 --no-save && npm run test:components",
-    "test:forwards": "npm i react@next react-dom@next --no-save && npm test",
-    "test:latest": "npm i react@latest react-dom@latest --no-save && npm test",
-    "test:compat": "npm run test:backwards && npm run test:forwards && npm run test:latest",
-    "build": "npm run lint && npm run test:compat && npm i && pack build",
-    "publish": "npm run build && pack publish"
+    "test:backwards": "yarn add -D -W react@16.3.1 react-dom@16.3.1 && yarn test:components",
+    "test:forwards": "yarn add -D -W react@next react-dom@next && yarn test",
+    "test:latest": "yarn add -D -W react@latest react-dom@latest && yarn test",
+    "test:compat": "yarn test:backwards && yarn test:forwards && yarn test:latest",
+    "ci": "yarn lint && yarn test:compat",
+    "build": "lerna run build",
+    "bump": "yarn workspaces run lerna version && yarn build",
+    "publish:react-async": "npm publish packages/react-async/pkg",
+    "publish:devtools": "npm publish packages/react-async-devtools/pkg",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook -o docs"
   },
-  "dependencies": {},
   "peerDependencies": {
     "react": ">=16.3.1"
   },
   "optionalDependencies": {
     "prop-types": ">=15.5.7"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-object-rest-spread": "7.4.3",
-    "@babel/plugin-transform-runtime": "7.4.3",
-    "@babel/preset-env": "7.4.3",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-object-rest-spread": "7.4.4",
+    "@babel/plugin-transform-runtime": "7.4.4",
+    "@babel/preset-env": "7.4.5",
     "@babel/preset-react": "7.0.0",
-    "@pika/pack": "0.3.7",
-    "@pika/plugin-build-node": "0.3.15",
-    "@pika/plugin-build-types": "0.3.16",
-    "@pika/plugin-build-web": "0.3.15",
-    "@pika/plugin-standard-pkg": "0.3.15",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "24.7.1",
-    "eslint": "5.16.0",
-    "eslint-config-prettier": "4.1.0",
-    "eslint-plugin-jest": "22.4.1",
-    "eslint-plugin-prettier": "3.0.1",
-    "eslint-plugin-promise": "4.1.1",
-    "eslint-plugin-react": "7.12.4",
-    "eslint-plugin-react-hooks": "1.6.0",
-    "jest": "24.7.1",
-    "jest-dom": "3.1.3",
+    "@storybook/addon-actions": "^5.1.9",
+    "@storybook/addon-links": "^5.1.9",
+    "@storybook/addons": "^5.1.9",
+    "@storybook/react": "^5.1.9",
+    "@testing-library/react": "^8.0.4",
+    "babel-eslint": "10.0.2",
+    "babel-jest": "24.8.0",
+    "babel-loader": "^8.0.6",
+    "eslint": "6.0.1",
+    "eslint-config-prettier": "6.0.0",
+    "eslint-plugin-jest": "22.7.1",
+    "eslint-plugin-prettier": "3.1.0",
+    "eslint-plugin-promise": "4.2.1",
+    "eslint-plugin-react": "7.14.2",
+    "eslint-plugin-react-hooks": "1.6.1",
+    "jest": "24.8.0",
+    "jest-dom": "3.5.0",
+    "lerna": "^3.15.0",
     "prettier": "1.17.0",
-    "react": "16.8.6",
-    "react-dom": "16.8.6",
-    "react-testing-library": "6.1.2"
-  },
-  "jest": {
-    "collectCoverage": true,
-    "coverageDirectory": "./coverage/"
-  },
-  "@pika/pack": {
-    "pipeline": [
-      [
-        "@pika/plugin-standard-pkg",
-        {
-          "exclude": [
-            "specs.js",
-            "*.spec.js"
-          ]
-        }
-      ],
-      [
-        "@pika/plugin-build-node"
-      ],
-      [
-        "@pika/plugin-build-web"
-      ],
-      [
-        "@pika/plugin-build-types"
-      ]
-    ]
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6"
   }
 }

packages/react-async-devtools/.babelrc.js

@@ -0,0 +1 @@
+module.exports = require("../../babel.config.js")

packages/react-async-devtools/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "react-async-devtools",
+  "version": "0.0.0",
+  "description": "DevTools for React Async",
+  "keywords": [
+    "react",
+    "async",
+    "devtools"
+  ],
+  "author": "Gert Hengeveld <info@ghengeveld.nl>",
+  "license": "ISC",
+  "homepage": "https://react-async.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ghengeveld/react-async.git",
+    "directory": "packages/react-async-devtools"
+  },
+  "main": "src",
+  "scripts": {
+    "build": "pack build",
+    "publish": "npm publish pkg"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "react": ">=16.3.1",
+    "react-async": ">=6.2.0"
+  },
+  "optionalDependencies": {
+    "prop-types": ">=15.5.7"
+  },
+  "devDependencies": {
+    "@pika/pack": "0.3.7",
+    "@pika/plugin-build-node": "0.3.15",
+    "@pika/plugin-build-types": "0.3.16",
+    "@pika/plugin-build-web": "0.3.15",
+    "@pika/plugin-standard-pkg": "0.3.15",
+    "react-async": "6.2.0"
+  },
+  "@pika/pack": {
+    "pipeline": [
+      [
+        "@pika/plugin-standard-pkg",
+        {
+          "exclude": [
+            "specs.js",
+            "*.spec.js"
+          ]
+        }
+      ],
+      [
+        "@pika/plugin-build-node"
+      ],
+      [
+        "@pika/plugin-build-web"
+      ]
+    ]
+  }
+}