feat: initial check in async esm and mdx

.vscode/launch.json

@@ -139,7 +139,7 @@
       "program": "${workspaceFolder}/node_modules/.bin/jest",
       "cwd": "${workspaceFolder}/core/instrument",
       "args": [
-        "esm-props-info-external",
+        "mdx-async",
       ],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",

core/core/src/configuration.ts

@@ -3,16 +3,16 @@ import { ActionItems } from './utility';
 import { ComponentType, ReactNode } from 'react';
 import { StoryRenderFn } from './utility';
 import { ReactElement } from 'react';
-import { Store } from './document';
+import { Story, Document } from './document';
 
 /**
  * render function by framework. By default 'react'
  */
 export type FrameworkRenderFn = (
-  storyId: string,
-  store: Store,
+  story: Story,
+  doc?: Document,
   options?: any,
-) => ReactElement;
+) => Promise<ReactElement>;
 
 /**
  * story type pages can have multiple tabs with separate page configurations.

core/core/src/document.ts

@@ -164,6 +164,11 @@ 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;
 
 /**

core/core/src/utility.ts

@@ -100,7 +100,7 @@ export interface PackageInfo {
 export type StoryRenderFn = (
   controlValues: { [key: string]: any },
   context?: any,
-) => any;
+) => Promise<any> | any;
 
 /**
  * an import name

core/instrument/src/babel/esm-stories.ts

@@ -20,10 +20,7 @@ export const extractCSFStories = (
   const globals: Stories = {};
   const localStories: Stories = {};
 
-  const extractArrowFunction = (
-    path: any,
-    declaration: any,
-  ): Story | undefined => {
+  const extractFunction = (path: any, declaration: any): Story | undefined => {
     if (declaration.init) {
       switch (declaration.init.type) {
         case 'ArrowFunctionExpression': {
@@ -34,6 +31,9 @@ export const extractCSFStories = (
             name,
             id: name,
           };
+          if (declaration.init.async) {
+            story.async = true;
+          }
           traverse(path.node, extractFunctionParameters(story), path.scope);
           return story;
         }
@@ -48,6 +48,18 @@ export const extractCSFStories = (
           );
         }
       }
+    } else if (declaration.type === 'FunctionDeclaration') {
+      const name = declaration.id.name;
+      const story: Story = {
+        loc: sourceLocation(declaration.body.loc),
+        name,
+        id: name,
+      };
+      if (declaration.async) {
+        story.async = true;
+      }
+      traverse(path.node, extractFunctionParameters(story), path.scope);
+      return story;
     }
     return undefined;
   };
@@ -126,7 +138,7 @@ export const extractCSFStories = (
           const name = declaration.id.name;
           //check if it was a named export
           if (!store.stories[name]) {
-            const story = extractArrowFunction(path, declaration);
+            const story = extractFunction(path, declaration);
             if (story && story.name) {
               localStories[story.name] = story;
             }
@@ -154,14 +166,27 @@ export const extractCSFStories = (
       const { declaration } = path.node;
       if (declaration) {
         const { declarations } = declaration;
-        if (Array.isArray(declarations) && declarations.length > 0) {
-          const story = extractArrowFunction(path, declarations[0]);
-          if (story) {
-            const name = story.name;
-            store.stories[name] = {
-              ...story,
-              ...globals[name],
-            };
+        if (declarations) {
+          if (Array.isArray(declarations) && declarations.length > 0) {
+            const story = extractFunction(path, declarations[0]);
+            if (story) {
+              const name = story.name;
+              store.stories[name] = {
+                ...story,
+                ...globals[name],
+              };
+            }
+          }
+        } else {
+          if (declaration.type === 'FunctionDeclaration') {
+            const story = extractFunction(path, declaration);
+            if (story) {
+              const name = story.name;
+              store.stories[name] = {
+                ...story,
+                ...globals[name],
+              };
+            }
           }
         }
       }

core/instrument/src/babel/extract-function-parameters.ts

@@ -19,93 +19,100 @@ interface ASTPropNode {
   value?: ASTPropNode;
   left?: ASTPropNode;
 }
-export const extractFunctionParameters = (
+
+const extractPatameters = (
+  path: any,
   story: Story,
   exports?: MDXExportType,
-) => ({
-  ArrowFunctionExpression: (path: any) => {
-    const node = path.node;
-    if (!story.arguments) {
-      story.arguments = [];
-    }
-    if (exports) {
-      const { code } = generate(node, {
-        retainFunctionParens: true,
-        retainLines: true,
+) => {
+  const node = path.node;
+  if (!story.arguments) {
+    story.arguments = [];
+  }
+  if (exports) {
+    const { code } = generate(node, {
+      retainFunctionParens: true,
+      retainLines: true,
+    });
+    exports.render = code.trim();
+  }
+  story.loc = {
+    start: {
+      column: node.loc.start.column,
+      line: node.loc.start.line,
+    },
+    end: {
+      column: node.loc.end.column,
+      line: node.loc.end.line,
+    },
+  };
+
+  const pushParams = (
+    node: ASTPropNode,
+    parameters: StoryArguments,
+    key?: KeyType,
+  ) => {
+    const pushProperties = (properties: ASTPropNode[]) => {
+      const nestedParameters: StoryArguments = [];
+      parameters.push({
+        value: nestedParameters,
+        name: key ? key.name : node.name,
+        loc,
+      });
+      properties.forEach(({ value, key }) => {
+        if (value) {
+          pushParams(value, nestedParameters, key);
+        }
+      });
+    };
+    const loc = adjustSourceLocation(story, node.loc);
+    if (node.name) {
+      parameters.push({
+        value: node.name,
+        name: key ? key.name : node.name,
+        loc,
       });
-      exports.render = code.trim();
+    } else if (node.left && node.left.properties) {
+      pushProperties(node.left.properties);
+    } else if (node.properties) {
+      pushProperties(node.properties);
     }
-    story.loc = {
-      start: {
-        column: node.loc.start.column,
-        line: node.loc.start.line,
-      },
-      end: {
-        column: node.loc.end.column,
-        line: node.loc.end.line,
+  };
+  if (node.params) {
+    node.params.forEach(
+      (p: { name: string; loc: CodeLocation; properties?: any }) => {
+        if (story.arguments) {
+          pushParams(p, story.arguments);
+        }
       },
-    };
-
-    const pushParams = (
-      node: ASTPropNode,
-      parameters: StoryArguments,
-      key?: KeyType,
-    ) => {
-      const pushProperties = (properties: ASTPropNode[]) => {
-        const nestedParameters: StoryArguments = [];
-        parameters.push({
-          value: nestedParameters,
-          name: key ? key.name : node.name,
-          loc,
-        });
-        properties.forEach(({ value, key }) => {
-          if (value) {
-            pushParams(value, nestedParameters, key);
-          }
-        });
-      };
-      const loc = adjustSourceLocation(story, node.loc);
-      if (node.name) {
-        parameters.push({
-          value: node.name,
-          name: key ? key.name : node.name,
-          loc,
-        });
-      } else if (node.left && node.left.properties) {
-        pushProperties(node.left.properties);
-      } else if (node.properties) {
-        pushProperties(node.properties);
-      }
-    };
-    if (node.params) {
-      node.params.forEach(
-        (p: { name: string; loc: CodeLocation; properties?: any }) => {
-          if (story.arguments) {
-            pushParams(p, story.arguments);
-          }
-        },
+    );
+  }
+  if (story.arguments.length) {
+    const params = story.arguments[0];
+    if (node.body.type === 'Identifier') {
+      addArgumentUsage(story, [params], node.body, node.shorthand);
+    } else if (node.body.type === 'TemplateLiteral') {
+      traverse(node, extractArgumentsUsage(story, [params]), path.scope, path);
+    } else {
+      traverse(
+        node.body,
+        extractArgumentsUsage(story, [params]),
+        path.scope,
+        path,
       );
     }
-    if (story.arguments.length) {
-      const params = story.arguments[0];
-      if (node.body.type === 'Identifier') {
-        addArgumentUsage(story, [params], node.body, node.shorthand);
-      } else if (node.body.type === 'TemplateLiteral') {
-        traverse(
-          node,
-          extractArgumentsUsage(story, [params]),
-          path.scope,
-          path,
-        );
-      } else {
-        traverse(
-          node.body,
-          extractArgumentsUsage(story, [params]),
-          path.scope,
-          path,
-        );
-      }
-    }
+  }
+};
+export const extractFunctionParameters = (
+  story: Story,
+  exports?: MDXExportType,
+) => ({
+  ArrowFunctionExpression: (path: any) => {
+    extractPatameters(path, story, exports);
+    path.skip();
+  },
+  FunctionDeclaration: (path: any) => {
+    extractPatameters(path, story, exports);
     path.skip();
   },
   JSXElement: (path: any) => {

core/instrument/src/babel/mdx-stories.ts

@@ -127,7 +127,15 @@ 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' ||