Skip to content
Permalink
Browse files

[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.
  • Loading branch information...
ghengeveld committed Jul 3, 2019
1 parent 60cf7a0 commit 201f01b91ea31555507a551c8ca28637feafb012
Showing with 12,925 additions and 99 deletions.
  1. +0 βˆ’11 .babelrc
  2. +2 βˆ’1 .eslintrc
  3. +5 βˆ’3 .gitignore
  4. +4 βˆ’0 .storybook/config.js
  5. +4 βˆ’0 .storybook/webpack.config.js
  6. +2 βˆ’1 .travis.yml
  7. +8 βˆ’0 README.md
  8. +14 βˆ’0 babel.config.js
  9. +13 βˆ’0 jest.config.js
  10. +23 βˆ’0 jest.setup.js
  11. +6 βˆ’0 lerna.json
  12. +46 βˆ’76 package.json
  13. +1 βˆ’0 packages/react-async-devtools/.babelrc.js
  14. +58 βˆ’0 packages/react-async-devtools/package.json
  15. +113 βˆ’0 packages/react-async-devtools/src/components.js
  16. +115 βˆ’0 packages/react-async-devtools/src/index.js
  17. +81 βˆ’0 packages/react-async-devtools/src/index.spec.js
  18. +1 βˆ’0 packages/react-async/.babelrc.js
  19. +61 βˆ’0 packages/react-async/package.json
  20. +4 βˆ’1 { β†’ packages/react-async}/src/Async.js
  21. +1 βˆ’1 { β†’ packages/react-async}/src/Async.spec.js
  22. 0 { β†’ packages/react-async}/src/helpers.js
  23. +1 βˆ’1 { β†’ packages/react-async}/src/helpers.spec.js
  24. +1 βˆ’0 { β†’ packages/react-async}/src/index.d.ts
  25. +1 βˆ’0 { β†’ packages/react-async}/src/index.js
  26. +1 βˆ’0 { β†’ packages/react-async}/src/propTypes.js
  27. 0 { β†’ packages/react-async}/src/reducer.js
  28. +1 βˆ’1 { β†’ packages/react-async}/src/specs.js
  29. 0 { β†’ packages/react-async}/src/status.js
  30. 0 { β†’ packages/react-async}/src/status.spec.js
  31. +3 βˆ’2 { β†’ packages/react-async}/src/useAsync.js
  32. +2 βˆ’1 { β†’ packages/react-async}/src/useAsync.spec.js
  33. +53 βˆ’0 stories/index.stories.js
  34. +19 βˆ’0 stories/photos.css
  35. +12,281 βˆ’0 yarn.lock

This file was deleted.

@@ -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": {
@@ -1,4 +1,6 @@
pkg/
node_modules/
coverage/
package-lock.json
docs/
node_modules/
pkg/

examples/*/yarn.lock
@@ -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)
@@ -0,0 +1,4 @@
module.exports = async ({ config }) => {
delete config.module.rules[0].include
return config
}
@@ -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
@@ -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`
@@ -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"],
},
},
}
@@ -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"],
}
@@ -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
})
@@ -0,0 +1,6 @@
{
"npmClient": "yarn",
"packages": ["packages/*"],
"useWorkspaces": true,
"version": "independent"
}
@@ -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"
}
}
@@ -0,0 +1 @@
module.exports = require("../../babel.config.js")
@@ -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"
]
]
}
}

0 comments on commit 201f01b

Please sign in to comment.
You can’t perform that action at this time.