feat: initial props-info packages integration

core/instrument/README.md

@@ -107,21 +107,29 @@ Options that can control the parsing and instrumentation process
 
 Options for extracting stories information.
 
+
 • **stories**? : *[StoriesOptions](#storiesoptions)*
 
 Options for extracting component information.
 
 
+• **extractPropsFn**? : *[PropsInfoExtractor](#propsinfoextractor)*
+
+ optional module to extract prop tables information for components
+
+
 • **parser**? : *[ParserOptions](#parseroptions)*
 
 Options to control babel parser.
 
+
 • **prettier**? : *[PrettierOptions](#prettieroptions) | false*
 
 prettier options are used to prettify the code at the end of the process
 this is useful for "story" code, where the story is extracted from the full file
 passing a value of false as prettier option will disabled prettifying
 
+
 • **resolver**? : *[ResolverOptions](#resolveroptions)*
 
 Options to control resolving filenames.
@@ -155,11 +163,6 @@ 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.

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

@@ -42,6 +42,7 @@ export const extractCSFStories = (stories: StoriesStore) => {
         stories.kinds[kindTitle] = {
           title: kindTitle,
           attributes,
+          components: {},
         };
       }
     },

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

@@ -57,7 +57,7 @@ export const extractComponent = async (
     initialAST,
   );
   const { components } = options || {};
-  const component = follow
+  const component: StoryComponent = follow
     ? {
         name: componentName,
         from: follow.from,
@@ -73,6 +73,20 @@ export const extractComponent = async (
     : {
         name: componentName,
       };
+  const { extractPropsFn } = options || {};
+  if (follow && follow.filePath && typeof extractPropsFn === 'function') {
+    component.info = await extractPropsFn(
+      follow.filePath,
+      component.importedName,
+      follow.source,
+    );
+    if (component.info) {
+      console.log(component.info);
+    } else {
+      console.log(follow.filePath);
+    }
+  }
+
   globalCache[filePath] = component;
   return component;
 };

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

@@ -57,6 +57,7 @@ export const extractMDXStories = (stories: StoriesStore) => {
               stories.kinds[kindTitle] = {
                 title: kindTitle,
                 attributes,
+                components: {},
               };
             }
             break;

core/instrument/src/index.ts

@@ -57,6 +57,7 @@ const parseSource = async (
     resolver: resolveOptions = {},
     components: componentOptions = {},
     stories: storiesOptions = {},
+    extractPropsFn,
   } = options || {};
 
   const mergedOptions = {
@@ -68,6 +69,7 @@ const parseSource = async (
       componentOptions,
     ),
     stories: deepMerge<StoriesOptions>(defaultStoriesOptions, storiesOptions),
+    extractPropsFn,
   };
 
   const prettify = async (c: string): Promise<string> => {

core/instrument/src/types.ts

@@ -4,7 +4,7 @@ import {
   Options,
   ResolveConfigOptions as ResolvePrettierConfigOptions,
 } from 'prettier';
-import { PropTypes } from '@component-controls/specification';
+import { ComponentInfo } from '@component-controls/specification';
 
 type PrettierOptions = Options & {
   resolveConfigOptions?: ResolvePrettierConfigOptions;
@@ -42,7 +42,7 @@ export type PropsInfoExtractor = (
    * react-docgen-typescript does not use it
    */
   source?: string,
-) => PropTypes | undefined;
+) => Promise<ComponentInfo | undefined>;
 
 export const defaultPackageOptions: PackageInfoOptions = {
   maxLevels: 10,
@@ -100,10 +100,6 @@ 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
    */
@@ -156,6 +152,11 @@ export interface InstrumentOptions {
    * Options for extracting stories information.
    */
   stories?: StoriesOptions;
+
+  /**
+   * optional module to extract prop tables information for components
+   */
+  extractPropsFn?: PropsInfoExtractor;
 }
 
 /**

core/loader/src/loader.ts

@@ -9,9 +9,37 @@ import { addStoriesKind } from './store';
 
 module.exports.default = async function(source: string) {
   const options: LoaderOptions = getOptions(this) || {};
-  const { type = 'csf', ...instrumentOptions } = options;
+  const { type = 'csf', propsLoaders = [], ...otherOptions } = options;
   const context = this as loader.LoaderContext;
   const filePath = context.resourcePath;
+  const loaders = propsLoaders.filter(loader => {
+    const include = Array.isArray(loader.include)
+      ? loader.include
+      : loader.include
+      ? [loader.include]
+      : undefined;
+    const exclude = Array.isArray(loader.exclude)
+      ? loader.exclude
+      : loader.exclude
+      ? [loader.exclude]
+      : undefined;
+    return (
+      include &&
+      include.some(mask => filePath.match(mask)) &&
+      (!exclude || !exclude.some(mask => filePath.match(mask)))
+    );
+  });
+
+  if (loaders.length > 1) {
+    console.error(`Multiple propsloaders found for file ${filePath}`);
+  }
+  const propsLoader = loaders.length === 1 ? loaders[0] : undefined;
+  const instrumentOptions = propsLoader
+    ? {
+        ...otherOptions,
+        extractPropsFn: require(propsLoader.name)(propsLoader.options),
+      }
+    : otherOptions;
   let store: StoriesStore;
   switch (type) {
     case 'csf':

core/loader/src/types.ts

@@ -3,6 +3,14 @@ import {
   InstrumentOptionsMDX,
 } from '@component-controls/instrument';
 
+export interface PropsLoader {
+  name: string;
+  include: RegExp | RegExp[];
+  exclude?: RegExp | RegExp[];
+  options?: any;
+}
+
 export type LoaderOptions = {
   type?: 'csf' | 'mdx';
+  propsLoaders?: PropsLoader[];
 } & (InstrumentOptions | InstrumentOptionsMDX);

examples/storybook-5/.storybook/main.js

@@ -43,6 +43,10 @@ module.exports = {
           enforce: 'pre',
           options: {
             type: 'csf',
+            propsLoaders: [
+              { name: '@component-controls/react-docgen-info', include: /\.(js|jsx)$/},
+              { name: '@component-controls/react-docgen-typescript-info', include: /\.(ts|tsx)$/}
+            ],
             prettier: {
               tabWidth: 4,
             },

examples/storybook-5/package.json

@@ -9,6 +9,10 @@
     "build-storybook": "build-storybook -c .storybook -o ../../docs"
   },
   "dependencies": {
+    "@component-controls/loader": "^0.6.0",
+    "@component-controls/react-docgen-info": "^0.6.0",
+    "@component-controls/react-docgen-typescript-info": "^0.6.0",
+    "@component-controls/storybook": "^0.6.0",
     "@storybook/addon-docs": "^5.3.12",
     "@storybook/addon-storysource": "^5.3.12",
     "@storybook/react": "^5.3.12",

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

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

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

@@ -1,18 +1,24 @@
-import { PropTypes } from '@component-controls/specification';
+import { ComponentInfo } from '@component-controls/specification';
 
 import { extractDocgenInfo, RectDocgenOptions } from './react-docgen';
 import { transformProps } from './transform-props';
 
 export default (options?: RectDocgenOptions) => {
-  return (
+  return async (
     fileName: string,
     componentName?: string,
     source?: string,
-  ): PropTypes | undefined => {
+  ): Promise<ComponentInfo | undefined> => {
     const propTable = extractDocgenInfo(fileName, source, options);
-    return {
-      ...propTable,
-      props: transformProps(propTable.props),
-    };
+    return new Promise(resolve =>
+      resolve(
+        propTable
+          ? {
+              ...propTable,
+              props: transformProps(propTable.props),
+            }
+          : undefined,
+      ),
+    );
   };
 };

ui/blocks/src/BlocksContext/BlockContext.tsx

@@ -85,9 +85,7 @@ export const useControlsContext = ({
       ? myStoryStore.components[kind.components[componentName]]
       : undefined;
   const sbStory = (storyStore && storyStore.fromId(previewId)) || {};
-  if (component && !component.info && sbStory && sbStory.parameters.component) {
-    component.info = sbStory.parameters.component.__docgenInfo;
-  }
+  console.log(component);
   return {
     id: previewId,
     api,