fix: add useAsync hook

ccontrols · Oct 14, 2020 · f37b1ba · f37b1ba
1 parent 48576a6
commit f37b1ba
Show file tree

Hide file tree

Showing 20 changed files with 443 additions and 393 deletions.
diff --git a/core/config/test/__snapshots__/stories.test.ts.snap b/core/config/test/__snapshots__/stories.test.ts.snap
@@ -64,13 +64,13 @@ Array [
   "/Users/atanasster/component-controls/ui/blocks/src/Subtitle/Subtitle.stories.tsx",
   "/Users/atanasster/component-controls/ui/blocks/src/TagsList/TagsList.stories.tsx",
   "/Users/atanasster/component-controls/ui/blocks/src/Title/Title.stories.tsx",
-  "/Users/atanasster/component-controls/examples/stories/src/stories_native/async-stories.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories_native/dynamic-stories.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors-starter.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors.stories.jsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/inherit-from-doc.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/smart-prop-type.stories.js",
   "/Users/atanasster/component-controls/examples/stories/src/stories/smart-typescript.stories.js",
+  "/Users/atanasster/component-controls/examples/stories/src/stories/stories-async.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/stories-esm.stories.js",
 ]
 `;
@@ -139,13 +139,13 @@ Array [
   "/Users/atanasster/component-controls/ui/blocks/src/Subtitle/Subtitle.stories.tsx",
   "/Users/atanasster/component-controls/ui/blocks/src/TagsList/TagsList.stories.tsx",
   "/Users/atanasster/component-controls/ui/blocks/src/Title/Title.stories.tsx",
-  "/Users/atanasster/component-controls/examples/stories/src/stories_native/async-stories.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories_native/dynamic-stories.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors-starter.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/controls-editors.stories.jsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/inherit-from-doc.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/smart-prop-type.stories.js",
   "/Users/atanasster/component-controls/examples/stories/src/stories/smart-typescript.stories.js",
+  "/Users/atanasster/component-controls/examples/stories/src/stories/stories-async.stories.tsx",
   "/Users/atanasster/component-controls/examples/stories/src/stories/stories-esm.stories.js",
 ]
 `;
diff --git a/core/core/README.md b/core/core/README.md
diff --git a/core/core/src/configuration.ts b/core/core/src/configuration.ts
@@ -12,7 +12,7 @@ export type FrameworkRenderFn = (
   story: Story,
   doc?: Document,
   options?: any,
-) => Promise<ReactElement>;
+) => ReactElement;
 
 /**
  * story type pages can have multiple tabs with separate page configurations.

diff --git a/core/core/src/document.ts b/core/core/src/document.ts
@@ -164,11 +164,6 @@ export type Story = {
    * it is set internally and will be used to create a story URL
    */
   dynamicId?: string;
-
-  /**
-   * if the story is declared as an async function
-   */
-  async?: boolean;
 } & StoryProps;
 
 /**

diff --git a/core/core/src/utility.ts b/core/core/src/utility.ts
@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, useEffect, useState, useCallback } from 'react';
 
 /**
  * position in the stories source code
@@ -178,3 +178,46 @@ export interface ActionItem {
 }
 
 export type ActionItems = ActionItem[];
+
+// source https://usehooks.com/useAsync/
+export const useAsync = <T, E = string>(
+  asyncFunction: () => Promise<T>,
+  immediate = true,
+) => {
+  const [status, setStatus] = useState<
+    'idle' | 'pending' | 'success' | 'error'
+  >('idle');
+  const [value, setValue] = useState<T | null>(null);
+  const [error, setError] = useState<E | null>(null);
+
+  // The execute function wraps asyncFunction and
+  // handles setting state for pending, value, and error.
+  // useCallback ensures the below useEffect is not called
+  // on every render, but only if asyncFunction changes.
+  const execute = useCallback(() => {
+    setStatus('pending');
+    setValue(null);
+    setError(null);
+    return asyncFunction()
+      .then((response: any) => {
+        setStatus('success');
+        setValue(response);
+      })
+      .catch((error: any) => {
+        setError(error);
+        setStatus('error');
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Call execute if we want to fire it right away.
+  // Otherwise execute can be called later, such as
+  // in an onClick handler.
+  useEffect(() => {
+    if (immediate) {
+      execute();
+    }
+  }, [execute, immediate]);
+
+  return { execute, status, value, error };
+};
diff --git a/core/instrument/src/babel/esm-stories.ts b/core/instrument/src/babel/esm-stories.ts
@@ -31,9 +31,6 @@ export const extractCSFStories = (
             name,
             id: name,
           };
-          if (declaration.init.async) {
-            story.async = true;
-          }
           traverse(path.node, extractFunctionParameters(story), path.scope);
           return story;
         }
@@ -55,9 +52,6 @@ export const extractCSFStories = (
         name,
         id: name,
       };
-      if (declaration.async) {
-        story.async = true;
-      }
       traverse(path.node, extractFunctionParameters(story), path.scope);
       return story;
     }

diff --git a/core/instrument/src/babel/mdx-stories.ts b/core/instrument/src/babel/mdx-stories.ts
@@ -127,15 +127,6 @@ export const extractMDXStories = (props: any) => (
                 name,
                 id,
               };
-              if (
-                expression &&
-                expression.expression &&
-                expression.expression.type === 'ArrowFunctionExpression'
-              ) {
-                if (expression.expression.async) {
-                  story.async = true;
-                }
-              }
               if (
                 expression &&
                 (expression.expression.type === 'CallExpression' ||

diff --git a/core/instrument/test/__snapshots__/esm-async.test.ts.snap b/core/instrument/test/__snapshots__/esm-async.test.ts.snap
@@ -59,7 +59,6 @@ Object {
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
-      "async": true,
       "id": "myStory",
       "loc": Object {
         "end": Object {
@@ -140,7 +139,6 @@ Object {
   "stories": Object {
     "asyncStory": Object {
       "arguments": Array [],
-      "async": true,
       "id": "asyncStory",
       "loc": Object {
         "end": Object {
@@ -237,7 +235,6 @@ Object {
   "stories": Object {
     "myStory": Object {
       "arguments": Array [],
-      "async": true,
       "id": "myStory",
       "loc": Object {
         "end": Object {
@@ -348,7 +345,6 @@ Object {
           "value": "props",
         },
       ],
-      "async": true,
       "id": "myStory",
       "loc": Object {
         "end": Object {

diff --git a/core/instrument/test/__snapshots__/mdx-async.test.ts.snap b/core/instrument/test/__snapshots__/mdx-async.test.ts.snap
@@ -82,7 +82,6 @@ Object {
           "value": "props",
         },
       ],
-      "async": true,
       "id": "storyWithProps",
       "loc": Object {
         "end": Object {

diff --git a/core/render/README.md b/core/render/README.md
@@ -31,8 +31,8 @@ _defined in [@component-controls/render/src/index.ts](https://github.com/ccontro
 
 ### properties
 
-| Name     | Type                                                                                                                                | Description |
-| -------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `react*` | **function** (`story`\*: [Story](#story), `doc`: [Document](#document), `options`: any): Promise&lt;[ReactElement](#reactelement)>; |             |
+| Name     | Type                                                                                                                    | Description |
+| -------- | ----------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `react*` | **function** (`story`\*: [Story](#story), `doc`: [Document](#document), `options`: any): [ReactElement](#reactelement); |             |
 
 <!-- END-TSDOC-TYPESCRIPT -->
diff --git a/core/render/src/react.ts b/core/render/src/react.ts
@@ -6,13 +6,7 @@ import {
   FrameworkRenderFn,
 } from '@component-controls/core';
 
-const isPromise = (obj: any) => obj instanceof Promise;
-
-export const render: FrameworkRenderFn = async (
-  story,
-  doc,
-  options: any = {},
-) => {
+export const render: FrameworkRenderFn = (story, doc, options: any = {}) => {
   if (!story) {
     throw new Error(`Invalid story`);
   }
@@ -47,12 +41,6 @@ export const render: FrameworkRenderFn = async (
       );
   }
   let node: any = null;
-  if (renderFn) {
-    if (story.async || isPromise(renderFn)) {
-      node = await (renderFn as StoryRenderFn)(values, context);
-    } else {
-      node = () => (renderFn as StoryRenderFn)(values, context);
-    }
-  }
+  node = () => (renderFn as StoryRenderFn)(values, context);
   return createElement(node);
 };