feat: extract component get filename

ccontrols · Mar 3, 2020 · 3949702 · 3949702
1 parent 4d7ac92
commit 3949702
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 19 deletions.
diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts
@@ -1,3 +1,5 @@
+import fs from 'fs';
+import nodePath from 'path';
 import traverse from '@babel/traverse';
 import {
   StoriesStore,
@@ -42,6 +44,7 @@ const componentFromParams = (
 const findComponentImport = (
   ast: any,
   componentName: string,
+  filePath?: string,
 ): StoryComponent | undefined => {
   let result: StoryComponent | undefined = undefined;
   traverse(ast, {
@@ -60,6 +63,41 @@ const findComponentImport = (
             from: node.source ? node.source.value : undefined,
             loc: node.loc,
           };
+          if (node.source.value && filePath) {
+            const folderName = nodePath.dirname(filePath);
+            let fileName: string | undefined;
+            // console.log(folderName, node.source.value);
+            try {
+              fileName = require.resolve(node.source.value, {
+                paths: [nodePath.relative(process.cwd(), folderName)],
+              });
+            } catch (e) {
+              // node10 - paths option does not work
+              const imported = nodePath.parse(node.source.value);
+              var files = fs.readdirSync(
+                nodePath.resolve(folderName, imported.dir),
+              );
+              const importedExt = imported.ext.length > 0;
+              const importedName = nodePath.format({
+                name: imported.name || 'index',
+                ext: imported.ext,
+              });
+              for (let i = 0; i < files.length; i += 1) {
+                const file = files[i];
+                let found = false;
+                if (importedExt) {
+                  found = file === importedName;
+                } else {
+                  found = nodePath.parse(file).name === importedName;
+                }
+                if (found) {
+                  fileName = nodePath.join(folderName, file);
+                  break;
+                }
+              }
+            }
+            console.log(fileName);
+          }
           path.skip();
           break;
         }
@@ -69,32 +107,19 @@ const findComponentImport = (
   return result;
 };
 
-type PrettifyFn = (code: string) => Promise<string>;
 export const extractComponent = async (
   ast: any,
   store: StoriesStore,
-  prettifyFn: PrettifyFn,
+  filePath?: string,
 ) => {
-  const prettyImport = async (
-    component: StoryComponent,
-  ): Promise<StoryComponent> => {
-    return {
-      ...component,
-      import: await prettifyFn(
-        component.imported
-          ? `import { ${component.name} } from '${component.from}';`
-          : `import ${component.name} from '${component.from}';`,
-      ),
-    };
-  };
   const kinds = Object.keys(store.kinds);
   if (kinds.length > 0) {
     const kind = store.kinds[kinds[0]];
     const componentName = componentFromParams(kind.parameters);
     if (componentName) {
-      const component = findComponentImport(ast, componentName);
+      const component = findComponentImport(ast, componentName, filePath);
       if (component) {
-        store.components[componentName] = await prettyImport(component);
+        store.components[componentName] = component;
         kind.component = componentName;
       }
     }
@@ -103,9 +128,9 @@ export const extractComponent = async (
     const story = store.stories[name];
     const componentName = componentFromParams(story.parameters);
     if (componentName) {
-      const component = findComponentImport(ast, componentName);
+      const component = findComponentImport(ast, componentName, filePath);
       if (component) {
-        store.components[componentName] = await prettyImport(component);
+        store.components[componentName] = component;
         story.component = componentName;
       }
     }

diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -75,7 +75,7 @@ const parseSource = async (
       {},
     );
   }
-  await extractComponent(ast, store, prettify);
+  await extractComponent(ast, store, filePath);
   await packageInfo(store, filePath);
   /*
   if (filePath && stories.component && stories.component.from) {
@@ -86,6 +86,15 @@ const parseSource = async (
     );
   }
   */
+  const componentNames = Object.keys(store.components);
+  for (let i = 0; i < componentNames.length; i += 1) {
+    const component = store.components[componentNames[i]];
+    component.import = await prettify(
+      component.imported
+        ? `import { ${component.name} } from '${component.from}';`
+        : `import ${component.name} from '${component.from}';`,
+    );
+  }
   Object.keys(store.stories).forEach((key: string) => {
     const story: Story = store.stories[key];
     const { start, end } = story.loc || {};