feat: use prettier options in loaders

ccontrols · Feb 25, 2020 · b17ba66 · b17ba66
1 parent 6a523b1
commit b17ba66
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 54 deletions.
diff --git a/core/instrument/src/index.ts b/core/instrument/src/index.ts
@@ -2,7 +2,7 @@ import * as parser from '@babel/parser';
 const mdx = require('@mdx-js/mdx');
 import traverse from '@babel/traverse';
 import generate from '@babel/generator';
-import prettier, { Options } from 'prettier';
+import prettier, { Options, ResolveConfigOptions } from 'prettier';
 import parserBabel from 'prettier/parser-babylon';
 import { StoriesGroup, Story } from '@component-controls/specification';
 import { extractCSFStories } from './babel/csf-stories';
@@ -11,20 +11,36 @@ import { removeMDXAttributes } from './babel/remove-mdx-attributes';
 
 type TraverseFn = (stories: StoriesGroup) => any;
 
-const parseSource = (
+export type PrettierOptions = Options & {
+  resolveConfigOptions?: ResolveConfigOptions;
+};
+const parseSource = async (
   code: string,
   traverseFn: TraverseFn,
   originalSource: string,
-  prettierOptions?: Options,
-): StoriesGroup => {
-  const source =
-    prettierOptions !== null
-      ? prettier.format(code, {
-          parser: 'typescript',
-          plugins: [parserBabel],
-          ...prettierOptions,
-        })
-      : code;
+  filePath?: string,
+  prettierOptions?: PrettierOptions,
+): Promise<StoriesGroup> => {
+  let source: string;
+  if (prettierOptions !== false) {
+    const { resolveConfigOptions, ...otherOptions } = prettierOptions || {};
+    let allPrettierOptions = otherOptions;
+    if (filePath) {
+      const userOptions = await prettier.resolveConfig(
+        filePath,
+        resolveConfigOptions,
+      );
+      allPrettierOptions = { ...userOptions, ...allPrettierOptions };
+    }
+
+    source = prettier.format(code, {
+      parser: 'typescript',
+      plugins: [parserBabel],
+      ...allPrettierOptions,
+    });
+  } else {
+    source = code;
+  }
 
   const ast = parser.parse(source, {
     sourceType: 'module',
@@ -45,7 +61,7 @@ const parseSource = (
       if (start.line === end.line) {
         story.source = lines[start.line - 1].substring(
           start.column,
-          end.column + 1,
+          end.column,
         );
       } else {
         const startLine = lines[start.line - 1];
@@ -54,7 +70,7 @@ const parseSource = (
           story.source = [
             startLine.substring(start.column),
             ...lines.slice(start.line, end.line - 1),
-            endLine.substring(0, end.column + 1),
+            endLine.substring(0, end.column),
           ].join('\n');
         }
       }
@@ -63,11 +79,25 @@ const parseSource = (
   return stories;
 };
 
-export const parseCSF = async (source: string): Promise<StoriesGroup> => {
-  return parseSource(source, extractCSFStories, source);
+export const parseCSF = async (
+  source: string,
+  filePath?: string,
+  prettierOptions?: PrettierOptions,
+): Promise<StoriesGroup> => {
+  return await parseSource(
+    source,
+    extractCSFStories,
+    source,
+    filePath,
+    prettierOptions,
+  );
 };
 
-export const parseMDX = async (source: string): Promise<StoriesGroup> => {
+export const parseMDX = async (
+  source: string,
+  filePath?: string,
+  prettierOptions?: PrettierOptions,
+): Promise<StoriesGroup> => {
   const code = await mdx(source);
 
   const ast = parser.parse(code, {
@@ -79,5 +109,11 @@ export const parseMDX = async (source: string): Promise<StoriesGroup> => {
     retainFunctionParens: true,
     retainLines: true,
   });
-  return parseSource(newCode.code, extractMDXStories, source);
+  return await parseSource(
+    newCode.code,
+    extractMDXStories,
+    source,
+    filePath,
+    prettierOptions,
+  );
 };
diff --git a/core/instrument/test/__snapshots__/csf-named-exports.test.js.snap b/core/instrument/test/__snapshots__/csf-named-exports.test.js.snap
@@ -40,7 +40,7 @@ export { myStory as exportedStory}
           "value": "Custom story name",
         },
       ],
-      "source": "() => {};",
+      "source": "() => {}",
     },
   },
 }
@@ -101,7 +101,7 @@ export { myStory }
           "value": "Custom story name",
         },
       ],
-      "source": "() => {};",
+      "source": "() => {}",
     },
   },
 }

diff --git a/core/instrument/test/__snapshots__/csf-parameters.test.js.snap b/core/instrument/test/__snapshots__/csf-parameters.test.js.snap
@@ -39,7 +39,7 @@ myStory.story = {
           "value": "Custom story name",
         },
       ],
-      "source": "() => {};",
+      "source": "() => {}",
     },
   },
 }
@@ -148,7 +148,7 @@ myStory.story = {
           ],
         },
       ],
-      "source": "() => {};",
+      "source": "() => {}",
     },
   },
 }
@@ -336,7 +336,7 @@ myStory.story = {
           ],
         },
       ],
-      "source": "() => {};",
+      "source": "() => {}",
     },
   },
 }

diff --git a/core/instrument/test/__snapshots__/csf-story-kind.test.js.snap b/core/instrument/test/__snapshots__/csf-story-kind.test.js.snap
@@ -19,7 +19,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "() => {};",
+      "source": "() => {}",
     },
   },
 }

diff --git a/core/instrument/test/__snapshots__/csf-toggle.test.js.snap b/core/instrument/test/__snapshots__/csf-toggle.test.js.snap
@@ -95,7 +95,7 @@ Object {
       <br />
     </div>
   );
-};",
+}",
     },
   },
   "title": "Components/Toggle",

diff --git a/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap b/core/instrument/test/__snapshots__/get-csf-stories.test.js.snap
@@ -30,7 +30,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "() => {};",
+      "source": "() => {}",
     },
   },
 }
@@ -79,7 +79,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "props => {};",
+      "source": "props => {}",
     },
   },
 }
@@ -177,7 +177,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "({ name: { first, last }, age }) => {};",
+      "source": "({ name: { first, last }, age }) => {}",
     },
   },
 }
@@ -231,7 +231,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "(props, context) => {};",
+      "source": "(props, context) => {}",
     },
   },
 }
@@ -300,7 +300,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "({ name: MyNam, age }) => {};",
+      "source": "({ name: MyNam, age }) => {}",
     },
   },
 }
@@ -369,7 +369,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "({ name, age }) => {};",
+      "source": "({ name, age }) => {}",
     },
   },
 }
@@ -409,7 +409,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "(props: Properties) => {};",
+      "source": "(props: Properties) => {}",
     },
   },
 }

diff --git a/core/instrument/test/__snapshots__/mdx-story.test.js.snap b/core/instrument/test/__snapshots__/mdx-story.test.js.snap
@@ -59,7 +59,7 @@ import Button from '../components/BaseButton';
         },
       },
       "name": "story-with-props",
-      "source": "props => <Button />}",
+      "source": "props => <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -187,7 +187,7 @@ import Button from '../components/BaseButton';
           name: { first, last },
 
           age
-        }) => <Button />}",
+        }) => <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -267,7 +267,7 @@ import Button from '../components/BaseButton';
         },
       },
       "name": "story-with-props",
-      "source": "(props, context) => <Button />}",
+      "source": "(props, context) => <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -362,7 +362,7 @@ import Button from '../components/BaseButton';
         },
       },
       "name": "story-with-props",
-      "source": "({ name: MyName, age }) => <Button />}",
+      "source": "({ name: MyName, age }) => <Button />",
     },
   },
   "title": "Storybook/MDX",
@@ -457,7 +457,7 @@ import Button from '../components/BaseButton';
         },
       },
       "name": "story-with-props",
-      "source": "({ name, age }) => <Button />}",
+      "source": "({ name, age }) => <Button />",
     },
   },
   "title": "Storybook/MDX",

diff --git a/core/instrument/test/__snapshots__/prop-usage-locations.test.js.snap b/core/instrument/test/__snapshots__/prop-usage-locations.test.js.snap
@@ -144,7 +144,7 @@ Object {
     <Story first={first} last={last} />
     <Age value={age} />
   </>
-);",
+)",
     },
   },
 }
@@ -223,7 +223,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "props => <Story {...props} />;",
+      "source": "props => <Story {...props} />",
     },
   },
   "title": undefined,
@@ -291,7 +291,7 @@ Object {
         },
       },
       "name": "story",
-      "source": "({ name }) => name;",
+      "source": "({ name }) => name",
     },
   },
 }
@@ -373,7 +373,7 @@ Object {
       "name": "selectProp",
       "source": "({ value }) => (
   <div>{JSON.stringify({ value }, null, 2)}</div>
-);",
+)",
     },
   },
 }
@@ -464,7 +464,7 @@ Object {
     <Story name={name} age={age} />
     <Age value={age} />
   </>
-);",
+)",
     },
   },
 }
@@ -635,7 +635,7 @@ export const story = ({ height, weight, style: { border, color } }) => (
       "name": "story",
       "source": "({ height, weight, style: { border, color } }) => (
   <div height={height} weight={weight} border={border} color={color} />
-);",
+)",
     },
   },
 }
@@ -689,7 +689,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "props => <Story {...props} />;",
+      "source": "props => <Story {...props} />",
     },
   },
 }
@@ -756,7 +756,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "({ text }) => \`\${text}\`;",
+      "source": "({ text }) => \`\${text}\`",
     },
   },
 }
@@ -824,7 +824,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "(props, context) => <Story {...props} />;",
+      "source": "(props, context) => <Story {...props} />",
     },
   },
 }
@@ -923,7 +923,7 @@ Object {
       "name": "myStory",
       "source": "({ name: MyName, age }) => (
   <Story name={MyName} age={age} />
-);",
+)",
     },
   },
 }
@@ -1020,7 +1020,7 @@ Object {
         },
       },
       "name": "myStory",
-      "source": "({ name, age }) => <Story name={name} age={age} />;",
+      "source": "({ name, age }) => <Story name={name} age={age} />",
     },
   },
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,7 +19,7 @@ Object { @@
             },
           },
           "name": "myStory",
-          "source": "() => {};",
+          "source": "() => {}",
         },
       },
     }
@@ Expand Down @@