Merge branch 'master' into useAsync

ghengeveld · ghengeveld · commit 5d1442aa7697 · 2018-12-30T22:22:23.000+01:00
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,22 @@
+{
+  "extends": [
+    "plugin:prettier/recommended",
+    "plugin:promise/recommended",
+    "plugin:react/recommended"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["jest", "promise", "react"],
+  "rules": {
+    "react/prop-types": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "16.3"
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 lib/
 node_modules/
-coverage/
+coverage/
+package-lock.json
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+  "printWidth": 100,
+  "semi": false,
+  "trailingComma": "es5"
+}
diff --git a/README.md b/README.md
@@ -170,7 +170,8 @@ import { createInstance } from "react-async"
 
 const loadCustomer = ({ customerId }) => fetch(`/api/customers/${customerId}`).then(...)
 
-const AsyncCustomer = createInstance({ promiseFn: loadCustomer })
+// createInstance takes a defaultProps object and a displayName (both optional)
+const AsyncCustomer = createInstance({ promiseFn: loadCustomer }, "AsyncCustomer")
 
 const MyComponent = () => (
   <AsyncCustomer customerId="123">
diff --git a/examples/basic-fetch/.env b/examples/basic-fetch/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/basic-fetch/README.md b/examples/basic-fetch/README.md
@@ -0,0 +1,5 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/ghengeveld/react-async/tree/master/examples/basic-fetch)
+
+# Basic fetch with React Async
+
+This demonstrates a very simple HTTP GET using `fetch`, wrapped with React Async.
diff --git a/examples/basic-fetch/now.json b/examples/basic-fetch/now.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "builds": [{ "src": "package.json", "use": "@now/static-build" }],
+  "routes": [
+    { "src": "^/static/(.*)", "dest": "/static/$1" },
+    { "src": "^/favicon.ico", "dest": "/favicon.ico" },
+    { "src": "^/(.*)", "dest": "/index.html" }
+  ]
+}
diff --git a/examples/basic-fetch/package.json b/examples/basic-fetch/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "basic-fetch",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.7.0",
+    "react-async": "latest",
+    "react-dom": "^16.7.0",
+    "react-scripts": "2.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "now-build": "npm run build && mv build dist"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/examples/basic-fetch/public/favicon.ico b/examples/basic-fetch/public/favicon.ico
diff --git a/examples/basic-fetch/public/index.html b/examples/basic-fetch/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/basic-fetch/src/index.css b/examples/basic-fetch/src/index.css
@@ -0,0 +1,29 @@
+body {
+  margin: 20px;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.user {
+  display: inline-block;
+  margin: 20px;
+  text-align: center;
+}
+
+.avatar {
+  background: #eee;
+  border-radius: 64px;
+  width: 128px;
+  height: 128px;
+}
+
+.name {
+  margin-top: 10px;
+}
+
+.placeholder {
+  opacity: 0.5;
+}
diff --git a/examples/basic-fetch/src/index.js b/examples/basic-fetch/src/index.js
@@ -0,0 +1,48 @@
+import React from "react"
+import Async from "react-async"
+import ReactDOM from "react-dom"
+import "./index.css"
+
+const loadUser = ({ userId }) =>
+  fetch(`https://reqres.in/api/users/${userId}`)
+    .then(res => (res.ok ? res : Promise.reject(res)))
+    .then(res => res.json())
+
+const UserPlaceholder = () => (
+  <div className="user placeholder">
+    <div className="avatar" />
+    <div className="name">══════</div>
+  </div>
+)
+
+const UserDetails = ({ data }) => (
+  <div className="user">
+    <img className="avatar" src={data.data.avatar} alt="" />
+    <div className="name">
+      {data.data.first_name} {data.data.last_name}
+    </div>
+  </div>
+)
+
+const App = () => (
+  <>
+    <Async promiseFn={loadUser} userId={1}>
+      {({ data, error, isLoading }) => {
+        if (isLoading) return <UserPlaceholder />
+        if (error) return <p>{error.message}</p>
+        if (data) return <UserDetails data={data} />
+        return null
+      }}
+    </Async>
+
+    <Async promiseFn={loadUser} userId={2}>
+      <Async.Loading>
+        <UserPlaceholder />
+      </Async.Loading>
+      <Async.Resolved>{data => <UserDetails data={data} />}</Async.Resolved>
+      <Async.Rejected>{error => <p>{error.message}</p>}</Async.Rejected>
+    </Async>
+  </>
+)
+
+ReactDOM.render(<App />, document.getElementById("root"))
diff --git a/examples/custom-instance/.env b/examples/custom-instance/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/custom-instance/README.md b/examples/custom-instance/README.md
@@ -0,0 +1,5 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/ghengeveld/react-async/tree/master/examples/custom-instance)
+
+# Custom React Async instance
+
+Demonstrates how to use a preconfigured React Async instance.
diff --git a/examples/custom-instance/now.json b/examples/custom-instance/now.json
@@ -0,0 +1,9 @@
+{
+  "version": 2,
+  "builds": [{ "src": "package.json", "use": "@now/static-build" }],
+  "routes": [
+    { "src": "^/static/(.*)", "dest": "/static/$1" },
+    { "src": "^/favicon.ico", "dest": "/favicon.ico" },
+    { "src": "^/(.*)", "dest": "/index.html" }
+  ]
+}
diff --git a/examples/custom-instance/package.json b/examples/custom-instance/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "custom-instance",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.7.0",
+    "react-async": "latest",
+    "react-dom": "^16.7.0",
+    "react-scripts": "2.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "now-build": "npm run build && mv build dist"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/examples/custom-instance/public/favicon.ico b/examples/custom-instance/public/favicon.ico
diff --git a/examples/custom-instance/public/index.html b/examples/custom-instance/public/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <meta name="theme-color" content="#000000" />
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/examples/custom-instance/src/index.css b/examples/custom-instance/src/index.css
@@ -0,0 +1,29 @@
+body {
+  margin: 20px;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.user {
+  display: inline-block;
+  margin: 20px;
+  text-align: center;
+}
+
+.avatar {
+  background: #eee;
+  border-radius: 64px;
+  width: 128px;
+  height: 128px;
+}
+
+.name {
+  margin-top: 10px;
+}
+
+.placeholder {
+  opacity: 0.5;
+}
diff --git a/examples/custom-instance/src/index.js b/examples/custom-instance/src/index.js
@@ -0,0 +1,50 @@
+import React from "react"
+import { createInstance } from "react-async"
+import ReactDOM from "react-dom"
+import "./index.css"
+
+const loadUser = ({ userId }) =>
+  fetch(`https://reqres.in/api/users/${userId}`)
+    .then(res => (res.ok ? res : Promise.reject(res)))
+    .then(res => res.json())
+
+const AsyncUser = createInstance({ promiseFn: loadUser }, "AsyncUser")
+
+const UserPlaceholder = () => (
+  <div className="user placeholder">
+    <div className="avatar" />
+    <div className="name">══════</div>
+  </div>
+)
+
+const UserDetails = ({ data }) => (
+  <div className="user">
+    <img className="avatar" src={data.data.avatar} alt="" />
+    <div className="name">
+      {data.data.first_name} {data.data.last_name}
+    </div>
+  </div>
+)
+
+const App = () => (
+  <>
+    <AsyncUser userId={1}>
+      {({ data, error, isLoading }) => {
+        if (isLoading) return <UserPlaceholder />
+        if (error) return <p>{error.message}</p>
+        if (data) return <UserDetails data={data} />
+        return null
+      }}
+    </AsyncUser>
+
+    <AsyncUser userId={2}>
+      <AsyncUser.Loading>
+        <UserPlaceholder />
+      </AsyncUser.Loading>
+      <AsyncUser.Resolved>{data => <UserDetails data={data} />}</AsyncUser.Resolved>
+      <AsyncUser.Rejected>{error => <p>{error.message}</p>}</AsyncUser.Rejected>
+    </AsyncUser>
+  </>
+)
+
+ReactDOM.render(<App />, document.getElementById("root"))
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/index.js b/src/index.js
diff --git a/src/spec.js b/src/spec.js
diff --git a/typings/index.d.ts b/typings/index.d.ts
