Merge pull request #1 from globalroo/fix-typos-add-lint

fix-typos, update prettier

Author: Andy

.markdownlint.json

@@ -0,0 +1,5 @@
+{
+    "MD007": false,
+    "MD030": false,
+    "MD013": false
+}

.prettierrc

@@ -1,10 +1,11 @@
 {
-    "singleQuote": true,
-    "jsxSingleQuote": true,
-    "semi": false,
-    "tabWidth": 4,
+    "arrowParens": "always",
     "bracketSpacing": true,
     "jsxBracketSameLine": false,
-    "arrowParens": "always",
-    "trailingComma": "none"
+    "printWidth": 120,
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "useTabs": false
 }

README.md

@@ -4,8 +4,6 @@
 
 [![NPM](https://img.shields.io/npm/v/react-async-component-hoc.svg)](https://www.npmjs.com/package/react-async-component-hoc) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 
-
-
 This component is designed to make writing components that require complex async calls and
 promise resolution obvious and easy to understand. It makes writing async components feel
 much more like writing a normal component.
@@ -85,9 +83,10 @@ const XXX = createAsyncComponent(function MyComponent(props) {
     }
 })
 ```
+
 ### Using a fallback
 
-By default your component will be null until it is complete.  There are two ways to override this:
+By default your component will be null until it is complete. There are two ways to override this:
 
 ```jsx
 
@@ -101,73 +100,79 @@ import {AsyncFallback} from 'react-async-component-hoc'
    )
 
 ```
+
 Using AsyncFallback allows you to specify anything to be rendered until your component is ready.
 
 Alternatively your render function's props have a `resolve` function added which you can call at
 any time to change what your component is rendering.
 
 ```jsx
-
-    const XXX = createAsyncComponent(function MyNewComponent({resolve, url}) {
-        return async ()=>{
-            resolve(<h5>Running....</h5>)
-            const result = await fetch(url)
-            resolve(<h5>Fetched....</h5>)
-            const data = await result.json()
-            return <div>{data.items.map(item=><div key={item.id}>{item.data}</div>)}</div>
-        }
-    })
-
+const XXX = createAsyncComponent(function MyNewComponent({ resolve, url }) {
+    return async () => {
+        resolve(<h5>Running....</h5>)
+        const result = await fetch(url)
+        resolve(<h5>Fetched....</h5>)
+        const data = await result.json()
+        return (
+            <div>
+                {data.items.map((item) => (
+                    <div key={item.id}>{item.data}</div>
+                ))}
+            </div>
+        )
+    }
+})
 ```
 
 ### Using the built in template
 
 If you only pass one function to createAsyncComponent it uses the built in BoxTemplate which allows
 you to write a component that just returns a set of React elements which it will then render as shown
-above.  It also allows you to render multiple parts of a result if you calculate incremental values.
+above. It also allows you to render multiple parts of a result if you calculate incremental values.
 
-The built in template has a series of JSX components it renders.  Each of these has a key.  It renders
-the keys in order.  If you just return is overwrites the one component being rendered which has a key of 0.
+The built in template has a series of JSX components it renders. Each of these has a key. It renders
+the keys in order. If you just return it overwrites the one component being rendered which has a key of 0.
 
 ```jsx
+const ExampleComponent3 = createAsyncComponent(async function MyComponent({ resolve }) {
+    const order = [10, 7, 4, 1, 2, 8, 6, 9, 3, 5]
+    for (let i = 0; i < 10; i++) {
+        let item = order[i]
+        resolve(
+            item,
+            <Box p={1}>
+                I am item index {item} - rendered in sequence {i + 1}
+            </Box>
+        )
 
-  const ExampleComponent3 = createAsyncComponent(
-    async function MyComponent({ resolve }) {
-        const order = [10, 7, 4, 1, 2, 8, 6, 9, 3, 5]
-        for (let i = 0; i < 10; i++) {
-            let item = order[i]
+        if (i < 9) {
             resolve(
-                item,
-                <Box p={1}>
-                    I am item index {item} - rendered in sequence {i + 1}
+                order[i + 1],
+                <Box ml={1}>
+                    <CircularProgress color={'secondary'} size={20} />
                 </Box>
             )
-
-            if (i < 9) {
-                resolve(order[i + 1], <Box ml={1}><CircularProgress color={"secondary"} size={20}/></Box>)
-            }
-            await new Promise((resolve) => setTimeout(resolve, 1500))
         }
+        await new Promise((resolve) => setTimeout(resolve, 1500))
     }
-)
-
+})
 ```
 
 This component renders the items out of order, and renders a progress circle for the next one. You use
-the resolve function, this time passing a key.  As mentioned before keys are rendered in sorted order, not in
+the resolve function, this time passing a key. As mentioned before keys are rendered in sorted order, not in
 the order you call the resolve function - this enables out of order rendering.
 
-Keys start at 0 - this will always have the fallback or null.  You can overwrite it at any time.
+Keys start at 0 - this will always have the fallback or null. You can overwrite it at any time.
 
 ### Using your own template
 
 You can supply your own template which can use any method it likes to render parts of your
-UI.  It is passed the keyed object provided by resolve - however in your own templates you
-will probably want to use named keys to make it obvious.  The resolved elements are passed in `$parts`
+UI. It is passed the keyed object provided by resolve - however in your own templates you
+will probably want to use named keys to make it obvious. The resolved elements are passed in `$parts`
 
 You can also take advantage of the `Slot` component which provides an easy way to render a
-placeholder while your component loads.  Slot takes a Skeleton parameter which is the component
-to render which defaults to a grey div with a height passed through from Slot.  Material UI Lab Skeleton
+placeholder while your component loads. Slot takes a Skeleton parameter which is the component
+to render which defaults to a grey div with a height passed through from Slot. Material UI Lab Skeleton
 component is an excellent, more attractive, plug in for Skeleton in Slot and you can configure it in the normal
 way - or use whatever your like.
 
@@ -262,8 +267,8 @@ way - or use whatever your like.
 
 ### Refreshing
 
-By default the wrapped component will NOT refresh if its props change.  You might
-want to refresh it!  You can do this by passing a refresh function to your component.
+By default the wrapped component will NOT refresh if its props change. You might
+want to refresh it! You can do this by passing a refresh function to your component.
 
 ```jsx
     const YourComponent = createAsyncComponent(function MyComponent() {
@@ -278,34 +283,31 @@ If during your async code you want to restart the whole process you can call the
 passed in the props.
 
 ```jsx
-
-     const ExampleComponent2 = createAsyncComponent(
-         async function MyComponent({resolve, restart}) {
-             resolve(<h4>Ready</h4>)
-             await new Promise((resolve) => setTimeout(resolve, 1000))
-             for (let i = 0; i < 101; i++) {
-                 await new Promise((resolve) => setTimeout(resolve, 50))
-                 resolve(<div style={{width: '100%', background: '#888'}}>
-                         <div
-                             style={{
-                                 width: `${i * 1}%`,
-                                 background: '#9f54da',
-                                 padding: 16
-                             }}
-                         >
-                             {i}
-                         </div>
-                         {/* Restart when clicking */}
-                         <div onClick={() => restart()} style={{cursor: 'pointer', padding: 7, color: 'white'}}>
-                             Click to restart
-                         </div>
-                     </div>
-                 )
-             }
-             return <h4>Done</h4>
-         }
-     )
-
+const ExampleComponent2 = createAsyncComponent(async function MyComponent({ resolve, restart }) {
+    resolve(<h4>Ready</h4>)
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    for (let i = 0; i < 101; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 50))
+        resolve(
+            <div style={{ width: '100%', background: '#888' }}>
+                <div
+                    style={{
+                        width: `${i * 1}%`,
+                        background: '#9f54da',
+                        padding: 16,
+                    }}
+                >
+                    {i}
+                </div>
+                {/* Restart when clicking */}
+                <div onClick={() => restart()} style={{ cursor: 'pointer', padding: 7, color: 'white' }}>
+                    Click to restart
+                </div>
+            </div>
+        )
+    }
+    return <h4>Done</h4>
+})
 ```
 
 ### Caching
@@ -317,27 +319,26 @@ this by passing a function to `keyFn()` that works in a similar way to the refre
 This significantly improves the user experience in many cases.
 
 ```jsx
-    const YourComponent = createAsyncComponent(function ComponentNameIsUsedInCacheKey() {
+    const YourComponent = createAsyncComponent(function ComponentNameIsUsedInCacheKey({ url }) {
        ...
     }).keyFn(({url})=>url) //cache for this url and ComponentNameIsUsedInCacheKey
 
 ```
-The name of the function and the key are combined to create a cache that survives unmounts
-etc.  By default it uses a last 100 LRU function.
 
+The name of the function and the key are combined to create a cache that survives unmount
+etc. By default it uses a last 100 LRU function.
 
 ## Key components/calls
 
-* AsyncFallback - provide a fallback for compnents not yet finished
-* Slot - provide a template slot that can be filled as component render
-* createAsyncComponent - called to create your wrapped component
-    * props.resolve(key, part) OR props.resolve(part) - render components in progress
-    * props.restart() - restart rendering
-
-* YourComponent = createAsyncComponent(Component)
-    * keyFn(yourFn) - used to provide a caching function for your component
-    * refreshFn(yourFn) - used to provide a way of calculating when a refresh should occur
-* initializeCache(size) - initializes the LRU cache to be a particular size (default 100)
+-   AsyncFallback - provide a fallback for components not yet finished
+-   Slot - provide a template slot that can be filled as component render
+-   createAsyncComponent - called to create your wrapped component
+    -   props.resolve(key, part) OR props.resolve(part) - render components in progress
+    -   props.restart() - restart rendering
+-   YourComponent = createAsyncComponent(Component)
+    -   keyFn(yourFn) - used to provide a caching function for your component
+    -   refreshFn(yourFn) - used to provide a way of calculating when a refresh should occur
+-   initializeCache(size) - initializes the LRU cache to be a particular size (default 100)
 
 ## License