Release v10 (#214)

Release v10

Author: ghengeveld

.all-contributorsrc

@@ -212,6 +212,25 @@
       "contributions": [
         "ideas"
       ]
+    },
+    {
+      "login": "AlixWang",
+      "name": "AlixWang",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/5417459?v=4",
+      "profile": "https://github.com/AlixWang",
+      "contributions": [
+        "doc"
+      ]
+    },
+    {
+      "login": "salolivares",
+      "name": "Sal Olivares",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1812749?v=4",
+      "profile": "http://salolivares.com",
+      "contributions": [
+        "code",
+        "bug"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.circleci/config.yml

@@ -18,7 +18,7 @@ jobs:
       - restore_cache:
           name: Restore root dependencies from cache
           keys:
-            - root-dependencies-v1-{{ checksum "yarn.lock" }}
+            - root-dependencies-v1-{{ checksum "package.json" }}
       - run:
           name: Install dependencies
           command: yarn install
@@ -27,15 +27,14 @@ jobs:
           command: yarn bootstrap
       - save_cache:
           name: Cache root dependencies
-          key: root-dependencies-v1-{{ checksum "yarn.lock" }}
+          key: root-dependencies-v1-{{ checksum "package.json" }}
           paths:
             - ~/.cache/yarn
       - run: yarn build:packages
       - persist_to_workspace:
           root: .
           paths:
             - node_modules
-            - examples
             - packages
   lint:
     <<: *defaults
@@ -64,28 +63,6 @@ jobs:
       - attach_workspace:
           at: .
       - run: bash <(curl -s https://codecov.io/bash)
-  examples:
-    <<: *defaults
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
-      - run:
-          name: Bootstrap
-          command: yarn bootstrap
-      - run:
-          name: Build examples
-          command: yarn build:examples
-      - run:
-          name: Test examples
-          command: yarn test:examples --maxWorkers=2
-      - run:
-          name: Deploy examples
-          command: |
-            if [ "${CIRCLE_BRANCH}" == "master" ]; then
-              yarn deploy:examples
-            fi
-          no_output_timeout: 30m
   chromatic:
     <<: *defaults
     steps:
@@ -108,9 +85,6 @@ workflows:
       - coverage:
           requires:
             - test
-      - examples:
-          requires:
-            - build
       - chromatic:
           requires:
             - build

.eslintrc

@@ -20,5 +20,17 @@
     "react": {
       "version": "detect"
     }
-  }
-}
+  },
+  "overrides": [{
+    "files": "packages/**/*.{ts,tsx}",
+    "parser": "@typescript-eslint/parser",
+    "plugins": ["@typescript-eslint"],
+    "parserOptions": {
+      "ecmaVersion": 6,
+      "sourceType": "module",
+      "ecmaFeatures": {
+        "modules": true
+      }
+    }
+  }]
+}

.github/workflows/examples.yml

@@ -0,0 +1,39 @@
+name: Build, test and deploy examples
+
+on: [push]
+
+jobs:
+  build:
+    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node: [10]
+    steps:
+      - uses: actions/setup-node@v1
+        with:
+          node-version: "10.x"
+      - uses: actions/checkout@v1
+      - name: Cache node modules
+        id: cache-modules
+        uses: actions/cache@v1
+        with:
+          path: node_modules
+          key: ${{ runner.OS }}-build-${{ hashFiles('**/package.json') }}
+          restore-keys: |
+            ${{ runner.OS }}-build-${{ env.cache-name }}-
+            ${{ runner.OS }}-build-
+            ${{ runner.OS }}-
+      - name: Install
+        if: steps.cache-modules.outputs.cache-hit != 'true'
+        run: yarn install
+      - name: Bootstrap
+        run: yarn bootstrap
+      - name: Build examples
+        run: yarn build:examples
+      - name: Test examples
+        run: yarn test:examples --maxWorkers=2
+      - name: Deploy examples
+        if: github.ref == 'master'
+        run: yarn deploy:examples

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.storybook/webpack.config.js

@@ -1,4 +1,12 @@
 module.exports = async ({ config }) => {
   delete config.module.rules[0].include
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['react-app', { flow: false, typescript: true }]],
+    },
+  });
+  config.resolve.extensions.push('.ts', '.tsx');
   return config
 }

.travis.yml

@@ -5,6 +5,6 @@ cache:
   yarn: true
   directories:
     - node_modules
-script: yarn ci
+script: yarn && yarn ci
 after_success:
   - bash <(curl -s https://codecov.io/bash) -e TRAVIS_NODE_VERSION

README.md

@@ -17,25 +17,12 @@
     <img src="https://badgen.net/npm/dm/react-async" alt="montly downloads">
   </a>
   <a href="https://bundlephobia.com/result?p=react-async">
-    <img src="https://badgen.net/bundlephobia/min/react-async" alt="minified size">
+    <img src="https://badgen.net/bundlephobia/minzip/react-async" alt="minzipped size">
   </a>
   <a href="https://opensource.org/licenses/ISC">
     <img src="https://badgen.net/npm/license/react-async" alt="license">
   </a>
   <br/>
-  <a href="https://github.com/async-library/react-async/issues">
-    <img src="https://badgen.net/github/open-issues/async-library/react-async?icon=github" alt="issues">
-  </a>
-  <a href="https://github.com/async-library/react-async/pulls">
-    <img src="https://badgen.net/github/open-prs/async-library/react-async?icon=github" alt="pull requests">
-  </a>
-  <a href="https://github.com/async-library/react-async/releases">
-    <img src="https://badgen.net/github/releases/async-library/react-async?icon=github" alt="releases">
-  </a>
-  <a href="https://github.com/async-library/react-async/graphs/contributors">
-    <img src="https://badgen.net/github/contributors/async-library/react-async?icon=github" alt="contributors">
-  </a>
-  <br/>
   <a href="https://circleci.com/gh/async-library/react-async">
     <img src="https://badgen.net/circleci/github/async-library/react-async/master?icon=circleci" alt="circleci status">
   </a>
@@ -52,10 +39,6 @@
     <img src="https://deepscan.io/api/teams/5549/projects/7406/branches/74183/badge/grade.svg" alt="DeepScan grade">
   </a>
   <br/>
-  <img src="https://badgen.net/david/dep/async-library/react-async/packages/react-async" alt="dependencies">
-  <img src="https://badgen.net/david/dev/async-library/react-async" alt="devDependencies">
-  <img src="https://badgen.net/david/peer/async-library/react-async/packages/react-async" alt="peerDependencies">
-  <br/>
   <a href="https://discord.gg/CAYQ6mU">
     <img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" />
   </a>
@@ -74,6 +57,7 @@ Use it with `fetch`, Axios or other data fetching libraries, even GraphQL.
 
 - Zero dependencies
 - Works with promises, async/await and the Fetch API
+- Now with experimental Suspense support
 - Choose between Render Props, Context-based helper components or the `useAsync` and `useFetch` hooks
 - Debug and develop every part of the loading sequence with the React Async DevTools
 - Provides convenient `isPending`, `startedAt`, `finishedAt`, et al metadata
@@ -83,7 +67,7 @@ Use it with `fetch`, Axios or other data fetching libraries, even GraphQL.
 - Supports [abortable fetch] by providing an AbortController
 - Supports optimistic updates using `setData`
 - Supports server-side rendering through `initialValue`
-- Comes with type definitions for TypeScript
+- Written in TypeScript, ships with type definitions
 - Works well in React Native too!
 
 [abortable fetch]: https://developers.google.com/web/updates/2017/09/abortable-fetch
@@ -111,6 +95,22 @@ Use it with `fetch`, Axios or other data fetching libraries, even GraphQL.
 - [State properties](https://docs.react-async.com/api/state)
 - [Helper components](https://docs.react-async.com/api/helpers)
 
+## Guide
+
+- [Async components](https://docs.react-async.com/guide/async-components)
+- [Separating view and logic](https://docs.react-async.com/guide/separating-view-logic)
+- [Async actions](https://docs.react-async.com/guide/async-actions)
+- [Optimistic updates](https://docs.react-async.com/guide/optimistic-updates)
+- [Server-side rendering](https://docs.react-async.com/guide/server-side-rendering)
+
+## Contributing
+
+- [Introduction](https://docs.react-async.com/contributing/introduction)
+- [Setting up](https://docs.react-async.com/contributing/setting-up)
+- [Development](https://docs.react-async.com/contributing/development)
+- [Testing](https://docs.react-async.com/contributing/testing)
+- [Releasing](https://docs.react-async.com/contributing/releasing)
+
 # Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
@@ -147,9 +147,19 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
   </tr>
   <tr>
     <td align="center"><a href="https://munir.dev"><img src="https://avatars3.githubusercontent.com/u/5339664?v=4" width="75px;" alt="Munir Ahmed Elsangedy"/><br /><sub><b>Munir Ahmed Elsangedy</b></sub></a><br /><a href="#ideas-elsangedy" title="Ideas, Planning, & Feedback">🤔</a></td>
+    <td align="center"><a href="https://github.com/AlixWang"><img src="https://avatars0.githubusercontent.com/u/5417459?v=4" width="75px;" alt="AlixWang"/><br /><sub><b>AlixWang</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=AlixWang" title="Documentation">📖</a></td>
+    <td align="center"><a href="http://salolivares.com"><img src="https://avatars0.githubusercontent.com/u/1812749?v=4" width="75px;" alt="Sal Olivares"/><br /><sub><b>Sal Olivares</b></sub></a><br /><a href="https://github.com/async-library/react-async/commits?author=salolivares" title="Code">💻</a> <a href="https://github.com/async-library/react-async/issues?q=author%3Asalolivares" title="Bug reports">🐛</a></td>
   </tr>
 </table>
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
+
+## Similar projects
+
+- [@slorber/react-async-hook](https://github.com/slorber/react-async-hook)
+- [@dai-shi/react-hooks-async](https://github.com/dai-shi/react-hooks-async)
+- [@cristovao-trevisan/async-resource](https://github.com/cristovao-trevisan/async-resource)
+- [@ilyalesik/react-fetch-hook](https://github.com/ilyalesik/react-fetch-hook)
+- [@marcin-piela/react-fetching-library](https://github.com/marcin-piela/react-fetching-library)

babel.config.js

@@ -1,11 +1,11 @@
 module.exports = {
   presets: ["@babel/preset-react"],
-  plugins: ["@babel/plugin-proposal-object-rest-spread"],
+  plugins: ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-proposal-class-properties"],
 
   env: {
     test: {
-      presets: ["@babel/preset-env", "@babel/preset-react"],
-      plugins: ["@babel/plugin-transform-runtime"],
+      presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+      plugins: ["@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties"],
     },
   },
 }

docs/_summary.md

@@ -4,14 +4,30 @@
 
 ## Getting started
 
-- [Installation](installation.md)
-- [Upgrading](upgrading.md)
-- [Usage](usage.md)
-- [DevTools](devtools.md)
+- [Installation](getting-started/installation.md)
+- [Upgrading](getting-started/upgrading.md)
+- [Usage](getting-started/usage.md)
+- [DevTools](getting-started/devtools.md)
 
 ## API
 
-- [Interfaces](interfaces.md)
-- [Configuration options](options.md)
-- [State properties](state.md)
-- [Helper components](helpers.md)
+- [Interfaces](api/interfaces.md)
+- [Configuration options](api/options.md)
+- [State properties](api/state.md)
+- [Helper components](api/helpers.md)
+
+## Guide
+
+- [Async components](guide/async-components.md)
+- [Separating view and logic](guide/separating-view-logic.md)
+- [Async actions](guide/async-actions.md)
+- [Optimistic updates](guide/optimistic-updates.md)
+- [Server-side rendering](guide/server-side-rendering.md)
+
+## Contributing
+
+- [Introduction](contributing/introduction.md)
+- [Setting up](contributing/setting-up.md)
+- [Development](contributing/development.md)
+- [Testing](contributing/testing.md)
+- [Releasing](contributing/releasing.md)

docs/helpers.md docs/api/helpers.md

@@ -2,7 +2,8 @@
 
 React Async provides several ways to use it. The classic interface is through the `<Async>` component, which is
 backwards compatible to React v16.3. More recent React applications will be using hooks, of which two are provided:
-`useAsync` and `useFetch`. Functionally, `<Async>` and `useAsync` are equivalent. `useFetch` is a special type of `useAsync` which is tied to the native `fetch` API.
+`useAsync` and `useFetch`. Functionally, `<Async>` and `useAsync` are equivalent. `useFetch` is a special version of
+`useAsync` which is tied to the native `fetch` API.
 
 React Async accepts a wide range of [configuration options](options.md) and returns a set of [state props](state.md).
 The way you use these differs slightly between the `useAsync` and `useFetch` hooks, and the `<Async>` component.

docs/interfaces.md docs/api/interfaces.md

@@ -0,0 +1,45 @@
+# Development
+
+React Async is a library without visual parts. Only the DevTools have a user interface you can spin up in a browser.
+Therefore the development workflow for the core library might be different from what you're used to. Generally, we use a
+TDD approach:
+
+- Write a unit test for the new feature or bug you want to fix. Sometimes you can just extend an existing test.
+- Fix the test by implementing the feature or bugfix. Now all tests should pass.
+- Optionally refactor the code for performance, readability and style. Probably this will come up during PR review.
+
+We use the GitHub pull request workflow. In practice this means your workflow looks like this:
+
+- Fork the repo (or pull the latest upstream) under your own account.
+- Make your changes, commit and push them. We don't enforce any commit message format.
+- Open a pull request on the main repository against the `next` branch. Make sure to follow the template.
+- We'll review your PR and will probably ask for some changes.
+- Once ready, we'll merge your PR.
+- Your changes will be in the next release.
+
+## Working with Storybook
+
+We use Storybook as a development environment for the DevTools. Spin it up using:
+
+```sh
+yarn start:storybook
+```
+
+This should open up Storybook in a browser at http://localhost:6006/
+Run it side-by-side with `yarn test --watch` during development. See [Testing](#testing).
+
+## Working with the examples
+
+In the `examples` folder, you will find sample React applications that use React Async in various ways with various other libraries. Please add a new example when introducing a major new feature. Make sure to add it to `now.json` so it is automatically deployed when merged to `master`.
+
+To run sample examples on your local environments
+
+```sh
+yarn build:examples
+yarn test:examples
+yarn start:examples
+```
+
+## Resolving issues
+
+Sometimes your dependencies might end up in a weird state, causing random issues, especially when working with the examples. In this case it often helps to run `yarn clean -y && yarn bootstrap`. This will delete `node_modules` from all packages/examples and do a clean install.