Support named component imports #475

packages/react-cosmos-voyager2/src/server/__tests__/esm/single-named/__fsmocks__/Italic.js

@@ -0,0 +1,7 @@
+// @flow
+
+import React from 'react';
+
+export const CONST = 'foo';
+
+export const Italic = ({ name }: { name: string }) => <em>{name}</em>;

packages/react-cosmos-voyager2/src/server/__tests__/esm/single-named/__fsmocks__/fixture.js

@@ -0,0 +1,8 @@
+// @flow
+
+import { Italic } from './Italic';
+
+export default {
+  component: Italic,
+  props: {}
+};

packages/react-cosmos-voyager2/src/server/__tests__/esm/single-named/__fsmocks__/multi-imports.fixture.js

@@ -0,0 +1,8 @@
+// @flow
+
+import { CONST, Italic } from './Italic';
+
+export default {
+  component: Italic,
+  props: {}
+};

packages/react-cosmos-voyager2/src/server/__tests__/esm/single-named/index.js

@@ -0,0 +1,50 @@
+// @flow
+
+import { join } from 'path';
+import { findFixtureFiles } from '../../../find-fixture-files';
+
+const { resolve } = require;
+
+describe('ES module / Single fixture with named component import', () => {
+  let files;
+
+  beforeEach(async () => {
+    files = await findFixtureFiles({
+      rootPath: join(__dirname, '__fsmocks__')
+    });
+  });
+
+  describe('single named import', () => {
+    it('has fixture path', () => {
+      expect(files[0].filePath).toBe(resolve('./__fsmocks__/fixture'));
+    });
+
+    it('has component name', () => {
+      expect(files[0].components[0].name).toBe('Italic');
+    });
+
+    it('has component path', () => {
+      expect(files[0].components[0].filePath).toBe(
+        resolve('./__fsmocks__/Italic')
+      );
+    });
+  });
+
+  describe('multi named imports', () => {
+    it('has fixture path', () => {
+      expect(files[1].filePath).toBe(
+        resolve('./__fsmocks__/multi-imports.fixture')
+      );
+    });
+
+    it('has component name', () => {
+      expect(files[1].components[0].name).toBe('Italic');
+    });
+
+    it('has component path', () => {
+      expect(files[1].components[0].filePath).toBe(
+        resolve('./__fsmocks__/Italic')
+      );
+    });
+  });
+});

packages/react-cosmos-voyager2/src/server/extract-components-from-fixture-file.js

@@ -131,9 +131,8 @@ export async function extractComponentsFromFixtureFile(
 }
 
 function getImportPathByName(imports, importName: string): string | null {
-  // TODO: Support `import { component }` or `import { component as component }`
-  const relevantImport = imports.find(
-    i => i.specifiers[0].local.name === importName
+  const relevantImport = imports.find(i =>
+    i.specifiers.some(s => s.local.name === importName)
   );
 
   return relevantImport ? relevantImport.source.value : null;