feat: component import code moved to block

ccontrols · Mar 8, 2020 · 2c9828c · 2c9828c
1 parent 4998ed6
commit 2c9828c
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 44 deletions.
diff --git a/core/instrument/src/babel/extract-component.ts b/core/instrument/src/babel/extract-component.ts
@@ -56,6 +56,7 @@ export const extractComponent = async (
         from: follow.from,
         request: follow.filePath,
         loc: follow.loc,
+        importedName: follow.importedName,
         source: components?.storeSourceFile ? follow.source : undefined,
         repository: await packageInfo(
           follow.originalFilePath,

diff --git a/core/instrument/src/babel/follow-imports.ts b/core/instrument/src/babel/follow-imports.ts
@@ -19,8 +19,10 @@ export interface FollowImportType {
   from: string;
   filePath?: string;
   originalFilePath?: string;
+  importedName?: string;
   loc?: CodeLocation;
   source?: string;
+  imported?: string;
 }
 
 export const followImports = (
@@ -118,11 +120,23 @@ export const followImports = (
         options,
       );
       return imported
-        ? { ...imported, from: findImport.from }
-        : { exportedAs: findImport.importedName, from: findImport.from };
+        ? {
+            ...imported,
+            importedName: findImport.importedName,
+            from: findImport.from,
+          }
+        : {
+            exportedAs: findImport.importedName,
+            importedName: findImport.importedName,
+            from: findImport.from,
+          };
     } catch (e) {
       //non-existing file
-      return { exportedAs: findImport.importedName, from: findImport.from };
+      return {
+        exportedAs: findImport.importedName,
+        importedName: findImport.importedName,
+        from: findImport.from,
+      };
     }
   }
   return undefined;

diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -143,17 +143,6 @@ const parseSource = async (
     );
   }
   */
-  const componentNames = Object.keys(store.components);
-  for (let i = 0; i < componentNames.length; i += 1) {
-    const component = store.components[componentNames[i]];
-    if (component.from) {
-      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];
     story.source = getASTSource(source, story.loc);

diff --git a/core/instrument/test/__snapshots__/csf-toggle.test.ts.snap b/core/instrument/test/__snapshots__/csf-toggle.test.ts.snap
@@ -5,8 +5,7 @@ Object {
   "components": Object {
     "Toggle": Object {
       "from": "./Toggle",
-      "import": "import Toggle from './Toggle';
-",
+      "importedName": "Toggle",
       "loc": undefined,
       "name": "Toggle",
       "repository": undefined,

diff --git a/core/instrument/test/__snapshots__/extract-component.test.ts.snap b/core/instrument/test/__snapshots__/extract-component.test.ts.snap
@@ -3,6 +3,7 @@
 exports[`extract-component default-alias-import.js 1`] = `
 Object {
   "from": "../components/button-default-class-export",
+  "importedName": "namespace",
   "loc": Object {
     "end": Object {
       "column": 1,
@@ -36,6 +37,7 @@ export default Button;
 exports[`extract-component default-import.js 1`] = `
 Object {
   "from": "../components/button-default-arrow-func",
+  "importedName": "default",
   "loc": Object {
     "end": Object {
       "column": 65,
@@ -71,6 +73,7 @@ Object {
 exports[`extract-component named-alias-import.js 1`] = `
 Object {
   "from": "../components/button-named-arrow-func",
+  "importedName": "Btn",
   "loc": undefined,
   "name": "Button",
   "repository": undefined,
@@ -82,6 +85,7 @@ Object {
 exports[`extract-component named-import.js 1`] = `
 Object {
   "from": "../components/button-named-class",
+  "importedName": "Button",
   "loc": Object {
     "end": Object {
       "column": 1,
@@ -113,6 +117,7 @@ export class Button extends React.Component {
 exports[`extract-component node-modules.js 1`] = `
 Object {
   "from": "theme-ui",
+  "importedName": "Button",
   "loc": Object {
     "end": Object {
       "column": 2,
@@ -163,6 +168,7 @@ export const Button = React.forwardRef((props, ref) => (
 exports[`extract-component node-modules-source.js 1`] = `
 Object {
   "from": "@component-controls/block-components",
+  "importedName": "Subtitle",
   "loc": Object {
     "end": Object {
       "column": 1,
@@ -821,6 +827,7 @@ exports.themes = themes;
 exports[`extract-component non-existing-file.js 1`] = `
 Object {
   "from": "./Button",
+  "importedName": "Btn",
   "loc": undefined,
   "name": "Button",
   "repository": undefined,
@@ -832,6 +839,7 @@ Object {
 exports[`extract-component parameters-component.js 1`] = `
 Object {
   "from": "../components/button-named-arrow-func",
+  "importedName": "Button",
   "loc": Object {
     "end": Object {
       "column": 72,
@@ -859,6 +867,7 @@ export const Button = props => <button>{\`Hello, \${props.name}\`}</button>;
 exports[`extract-component story-component.js 1`] = `
 Object {
   "from": "../components/button-named-class",
+  "importedName": "Button",
   "loc": Object {
     "end": Object {
       "column": 1,

diff --git a/core/instrument/test/__snapshots__/follow-imports.test.ts.snap b/core/instrument/test/__snapshots__/follow-imports.test.ts.snap
@@ -164,6 +164,7 @@ Object {
   "exportedAs": "Button",
   "filePath": "/Users/atanasster/component-controls/core/instrument/test/examples/exports/cjs-named-export.js",
   "from": "../exports/cjs-named-export",
+  "importedName": "Button",
   "loc": Object {
     "end": Object {
       "column": 23,
@@ -385,6 +386,7 @@ Object {
   "exportedAs": "default",
   "filePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-default-export.js",
   "from": "./button-default-export",
+  "importedName": "default",
   "loc": Object {
     "end": Object {
       "column": 24,
@@ -427,6 +429,7 @@ Object {
   "exportedAs": "Button",
   "filePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-named-export.js",
   "from": "./",
+  "importedName": "Button",
   "loc": Object {
     "end": Object {
       "column": 30,
@@ -448,6 +451,7 @@ Object {
   "exportedAs": "default",
   "filePath": "/Users/atanasster/component-controls/core/instrument/test/examples/follow-imports/button-default-export.js",
   "from": "./button-default-export",
+  "importedName": "namespace",
   "loc": Object {
     "end": Object {
       "column": 24,

diff --git a/core/instrument/test/__snapshots__/mdx-component.test.ts.snap b/core/instrument/test/__snapshots__/mdx-component.test.ts.snap
@@ -5,8 +5,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "../../components/button-named-arrow-func",
-      "import": "import Button from '../../components/button-named-arrow-func';
-",
+      "importedName": "Button",
       "loc": Object {
         "end": Object {
           "column": 72,
@@ -59,8 +58,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "../../components/button-named-class",
-      "import": "import Button from '../../components/button-named-class';
-",
+      "importedName": "Btn",
       "loc": undefined,
       "name": "Button",
       "repository": undefined,
@@ -95,8 +93,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "./Button",
-      "import": "import Button from './Button';
-",
+      "importedName": "Btn",
       "loc": undefined,
       "name": "Button",
       "repository": undefined,
@@ -105,8 +102,7 @@ Object {
     },
     "Toggle": Object {
       "from": "./Toggle",
-      "import": "import Toggle from './Toggle';
-",
+      "importedName": "Toggle",
       "loc": undefined,
       "name": "Toggle",
       "repository": undefined,

diff --git a/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap b/core/instrument/test/__snapshots__/mdx-stories.test.ts.snap
@@ -44,8 +44,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "../components/BaseButton",
-      "import": "import Button from '../components/BaseButton';
-",
+      "importedName": "default",
       "loc": undefined,
       "name": "Button",
       "repository": undefined,
@@ -128,8 +127,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "../../components/button-default-arrow-func",
-      "import": "import Button from '../../components/button-default-arrow-func';
-",
+      "importedName": "default",
       "loc": Object {
         "end": Object {
           "column": 65,
@@ -216,8 +214,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "../components/BaseButton",
-      "import": "import Button from '../components/BaseButton';
-",
+      "importedName": "default",
       "loc": undefined,
       "name": "Button",
       "repository": undefined,
@@ -362,8 +359,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "../components/BaseButton",
-      "import": "import Button from '../components/BaseButton';
-",
+      "importedName": "default",
       "loc": undefined,
       "name": "Button",
       "repository": undefined,
@@ -474,8 +470,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "../components/BaseButton",
-      "import": "import Button from '../components/BaseButton';
-",
+      "importedName": "default",
       "loc": undefined,
       "name": "Button",
       "repository": undefined,
@@ -571,8 +566,7 @@ Object {
   "components": Object {
     "Button": Object {
       "from": "../components/BaseButton",
-      "import": "import Button from '../components/BaseButton';
-",
+      "importedName": "default",
       "loc": undefined,
       "name": "Button",
       "repository": undefined,

diff --git a/core/specification/src/components.ts b/core/specification/src/components.ts
@@ -72,20 +72,19 @@ export interface StoryComponent {
    */
   name: string;
   /**
-   * imported name ex: import { Btn as Button } from 'buttons';
+   * imported name ex:
+   * - default import import Button from 'buttons';
+   * - namespace import import * as Button from 'buttons';
+   * - named import import { Button } from 'buttons';
+   * - named alias import import { Btn as Button } from 'buttons';
    */
-  imported?: string;
+  importedName?: 'default' | 'namespace' | string;
 
   /**
    * imported from
    */
   from?: string;
 
-  /**
-   * import string for the component
-   */
-  import?: string;
-
   /**
    * resolved import request
    */

diff --git a/ui/blocks/src/ComponentSource/ComponentSource.tsx b/ui/blocks/src/ComponentSource/ComponentSource.tsx
@@ -20,7 +20,15 @@ export const ComponentSource: FC<ComponentSourceProps> = ({
     id,
     name,
   });
-  const source = component && component.import;
+  let source;
+  const { from, importedName, name: componentName } = component || {};
+  if (from) {
+    source =
+      importedName !== 'default' && importedName !== 'namespace'
+        ? `import { ${componentName} } from '${from}';`
+        : `import ${componentName} from '${from}';`;
+  }
+
   if (!source) {
     return null;
   }