fix: resolve components in store

core/instrument/README.md

@@ -155,6 +155,11 @@ Callback function to resolve the source file name of a component.
 Return false if this file should not be processed.
 
 
+• **extractProps**? : *[PropsInfoExtractor](#propsinfoextractor)*
+
+ optional module to extract prop tables information for components
+
+
 • **storeSourceFile**? : *boolean*
 
 If set to false, will not save the component's source file.
@@ -523,4 +528,32 @@ Whether to save the link for project readme file in the repository field.
 
 • **storeIssuesLink**? : *boolean*
 
-Whether to save the link for filing issues with the project in the repository field.
+Whether to save the link for filing issues with the project in the repository field.
+
+___
+
+
+## PropsInfoExtractor
+
+`(fileName: string, componentName?: string, source?: string) => PropTypes | undefined;`
+
+Callback function to extract props info table  - ie docgen type libraries. Used to extract displayName, and props tables for a component
+
+*Defined in [core/instrument/src/types.ts](https://github.com/atanasster/component-controls/blob/ab703a5/core/instrument/src/types.ts)*
+
+
+### Arguments
+
+• **fileName** : *string*
+
+Full name and path of the component path. react-docgen needs it to extract babel configurations
+
+
+• **componentName**? : *string*
+
+Optional component name.  react-docgen-typescript supports multiple exports for a file.  react-docgne does not use it.
+
+
+• **source**? : *string*
+
+Optional soure, saves time if its already loaded.  react-docgen accepts source as input parameter.  react-docgen-typescript does not use it.

core/instrument/src/babel/extract-component.ts

@@ -3,6 +3,7 @@ import {
   StoriesStore,
   StoryAttributes,
   StoryComponent,
+  StoriesKind,
 } from '@component-controls/specification';
 import { followImports } from './follow-imports';
 import { packageInfo } from '../project/packageInfo';
@@ -35,13 +36,19 @@ const componentFromParams = (
   return undefined;
 };
 
+const globalCache: {
+  [filePath: string]: StoryComponent;
+} = {};
 export const extractComponent = async (
   componentName: string,
   filePath: string,
   source?: string,
   options?: InstrumentOptions,
   initialAST?: File,
 ): Promise<StoryComponent | undefined> => {
+  if (globalCache[filePath]) {
+    return globalCache[filePath];
+  }
   const follow = followImports(
     componentName,
     filePath,
@@ -50,7 +57,7 @@ export const extractComponent = async (
     initialAST,
   );
   const { components } = options || {};
-  return follow
+  const component = follow
     ? {
         name: componentName,
         from: follow.from,
@@ -66,9 +73,11 @@ export const extractComponent = async (
     : {
         name: componentName,
       };
+  globalCache[filePath] = component;
+  return component;
 };
 
-export const extractSotreComponent = async (
+export const extractStoreComponent = async (
   store: StoriesStore,
   filePath: string,
   source: string,
@@ -77,7 +86,8 @@ export const extractSotreComponent = async (
 ) => {
   const kinds = Object.keys(store.kinds);
   if (kinds.length > 0) {
-    const kind = store.kinds[kinds[0]];
+    const kind: StoriesKind = store.kinds[kinds[0]];
+    kind.components = {};
     const componentName = componentFromParams(kind.attributes);
 
     if (componentName) {
@@ -89,26 +99,28 @@ export const extractSotreComponent = async (
         initialAST,
       );
       if (component) {
-        store.components[componentName] = component;
+        store.components[filePath] = component;
+        kind.components[componentName] = filePath;
         kind.component = componentName;
       }
     }
-  }
-  Object.keys(store.stories).forEach(async (name: string) => {
-    const story = store.stories[name];
-    const componentName = componentFromParams(story.attributes);
-    if (componentName) {
-      const component = await extractComponent(
-        componentName,
-        filePath,
-        source,
-        options,
-        initialAST,
-      );
-      if (component) {
-        store.components[componentName] = component;
-        story.component = componentName;
+    Object.keys(store.stories).forEach(async (name: string) => {
+      const story = store.stories[name];
+      const componentName = componentFromParams(story.attributes);
+      if (componentName) {
+        const component = await extractComponent(
+          componentName,
+          filePath,
+          source,
+          options,
+          initialAST,
+        );
+        if (component) {
+          store.components[filePath] = component;
+          kind.components[componentName] = filePath;
+          story.component = componentName;
+        }
       }
-    }
-  });
+    });
+  }
 };

core/instrument/src/index.ts

@@ -17,7 +17,7 @@ import { getASTSource } from '@component-controls/core';
 import { extractCSFStories } from './babel/csf-stories';
 import { extractMDXStories } from './babel/mdx-stories';
 import { removeMDXAttributes } from './babel/remove-mdx-attributes';
-import { extractSotreComponent } from './babel/extract-component';
+import { extractStoreComponent } from './babel/extract-component';
 import { packageInfo } from './project/packageInfo';
 import {
   InstrumentOptions,
@@ -122,7 +122,7 @@ const parseSource = async (
       {},
     );
   }
-  await extractSotreComponent(store, filePath, source, mergedOptions, ast);
+  await extractStoreComponent(store, filePath, source, mergedOptions, ast);
   const kindsNames = Object.keys(store.kinds);
   for (let i = 0; i < kindsNames.length; i += 1) {
     const kind: StoriesKind = store.kinds[kindsNames[i]];
@@ -135,15 +135,6 @@ const parseSource = async (
       kind.repository = repository;
     }
   }
-  /*
-  if (filePath && stories.component && stories.component.from) {
-    console.log(
-      stories.component.from,
-      ': ',
-      path.resolve(filePath, stories.component.from),
-    );
-  }
-  */
   Object.keys(store.stories).forEach((key: string) => {
     const story: Story = store.stories[key];
     story.source = getASTSource(source, story.loc);

core/instrument/src/types.ts

@@ -4,6 +4,7 @@ import {
   Options,
   ResolveConfigOptions as ResolvePrettierConfigOptions,
 } from 'prettier';
+import { PropTypes } from '@component-controls/specification';
 
 type PrettierOptions = Options & {
   resolveConfigOptions?: ResolvePrettierConfigOptions;
@@ -19,6 +20,30 @@ export const defaultParserOptions: ParserOptions = {
   plugins: ['jsx', 'typescript'],
 };
 
+/**
+ * callback function to extract props info table  - ie docgen type libraries
+ * used to extract displayName, and props tables for a component
+ */
+export type PropsInfoExtractor = (
+  /**
+   * full name and path of the component path
+   * react-docgen needs it to extract babel configurations
+   */
+  fileName: string,
+  /**
+   * optional component name
+   * react-docgen-typescript supports multiple exports for a file
+   * react-docgne does not use it
+   */
+  componentName?: string,
+  /**
+   * optional soure, saves time if its already loaded
+   * react-docgen accepts source as input parameter
+   * react-docgen-typescript does not use it
+   */
+  source?: string,
+) => PropTypes | undefined;
+
 export const defaultPackageOptions: PackageInfoOptions = {
   maxLevels: 10,
   packageJsonName: 'package.json',
@@ -75,6 +100,10 @@ export interface ComponentOptions {
    */
   resolveFile?: (componentName: string, filePath: string) => string | undefined;
 
+  /**
+   * optional module to extract prop tables information for components
+   */
+  extractProps?: PropsInfoExtractor;
   /**
    * If set to false, will not save the component's source file
    */

core/instrument/test/__snapshots__/extract-component.test.ts.snap

@@ -481,6 +481,12 @@ const Arrow = styled.div(({
   borderLeftColor: match('left', placement, borderColor, 'transparent'),
   borderRightColor: match('right', placement, borderColor, 'transparent')
 }));
+/**
+ * A Popover container that is triggered by a click, or hover
+ * used to display enhanced information that could not fit into the main scren
+ *
+ */
+
 const Popover = _a => {
   var {
     trigger,

core/specification/src/components.ts

@@ -14,15 +14,15 @@ export type TypeValue =
   | 'function'
   | string;
 
-export interface TypeInformatiom {
+export interface TypeInformation {
   name: TypeValue;
 
   /**
    * type value
    * elements of enum, array, fields of object
    * return value of function
    */
-  value?: TypeInformatiom[] | any;
+  value?: TypeInformation[] | any;
 
   /**
    * raw type code
@@ -32,7 +32,11 @@ export interface TypeInformatiom {
   /**
    * argument types of function
    */
-  arguments?: TypeInformatiom[] | any;
+  arguments?: TypeInformation[] | any;
+  /**
+   * is the property required
+   */
+  required?: boolean;
 }
 
 /**
@@ -48,11 +52,7 @@ export interface PropType {
   /**
    * propertty type
    */
-  type: TypeInformatiom;
-  /**
-   * is the property required
-   */
-  required: boolean;
+  type: TypeInformation;
   /**
    * description of the property
    */

core/specification/src/stories.ts

@@ -143,6 +143,15 @@ export interface StoriesKind {
    * project repository information
    */
   repository?: Repository;
+
+  /**
+   * lookup into the global store.components
+   * since multiple components of the same name can be used
+   * example: ['Button']: 'c:/myapp/Button.tsx'
+   */
+  components: {
+    [name: string]: string;
+  };
 }
 
 /**
@@ -156,6 +165,6 @@ export interface StoriesStore {
     [id: string]: Story;
   };
   components: {
-    [id: string]: StoryComponent;
+    [fileName: string]: StoryComponent;
   };
 }

props-info/react-docgen-typescript/src/index.ts

@@ -1,17 +1,20 @@
+import { PropTypes } from '@component-controls/specification';
 import {
   extractDocgenTypescriptInfo,
   RectDocgenTypescriptOptions,
 } from './react-docgen-typescript';
 import { transformProps } from './transform-props';
 
-export default (
-  fileName: string,
-  source?: string,
-  options?: RectDocgenTypescriptOptions,
-) => {
-  const propTable = extractDocgenTypescriptInfo(fileName, options);
-  return {
-    ...propTable,
-    props: transformProps(propTable.props),
+export default (options?: RectDocgenTypescriptOptions) => {
+  return (fileName: string, componentName?: string): PropTypes | undefined => {
+    const propTable = extractDocgenTypescriptInfo(
+      fileName,
+      componentName,
+      options,
+    );
+    return {
+      ...propTable,
+      props: transformProps(propTable.props),
+    };
   };
 };

props-info/react-docgen-typescript/src/react-docgen-typescript.ts

@@ -11,10 +11,16 @@ export type RectDocgenTypescriptOptions = {
 
 export const extractDocgenTypescriptInfo = (
   fileName: string,
+  componentName?: string,
   reactDocGenTypescriptOptions?: RectDocgenTypescriptOptions,
 ) => {
   const {
-    transformProps = (tables: any[]) => tables[0],
+    transformProps = (tables: any[]) => {
+      const byName =
+        componentName &&
+        tables.find(table => table.displayName === componentName);
+      return byName ? byName : tables[0];
+    },
     propFilter,
     componentNameResolver = computeComponentName,
     shouldExtractLiteralValuesFromEnum = true,