feat: format source in snippets (#30)

storybook-addon-export-to-codesandbox/package.json

@@ -57,7 +57,7 @@
     "concurrently": "^6.2.0",
     "dedent": "^0.7.0",
     "jest": "^27.3.1",
-    "prettier": "^2.3.1",
+    "prettier": "^2.8.3",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -71,6 +71,7 @@
     "@storybook/components": "^6.3.6",
     "@storybook/core-events": "^6.3.6",
     "@storybook/theming": "^6.3.6",
+    "prettier": "^2.8",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },

storybook-addon-export-to-codesandbox/src/plugins/__fixtures__/storybook-stories-fullsource/add-parameter/output.js

@@ -1,3 +1,3 @@
-var __STORY__ = 'import { Button } from "@fluentui/react-components";';
+var __STORY__ = 'import { Button } from "@fluentui/react-components";\n';
 storyName.parameters = {};
-storyName.parameters.fullSource = __STORY__;
+storyName.parameters.fullSource = __STORY__;

storybook-addon-export-to-codesandbox/src/plugins/fullsource.ts

@@ -1,4 +1,6 @@
 import * as Babel from '@babel/core';
+import * as prettier from 'prettier';
+
 import modifyImportsPlugin from './modifyImports';
 import removeStorybookParameters from './removeStorybookParameters';
 
@@ -16,7 +18,7 @@ export type BabelPluginOptions = Record<string, DependencyEntry>;
 
 /**
  * This Babel plugin adds `context.parameters.fullSource` property to Storybook stories,
- * which contains source of of the file where story is present.
+ * which contains source of the file where story is present.
  *
  * Specifically, it finds this expression in a story file: storyName.parameters = ...
  * And adds the following expression after it: storyName.parameters.fullSource = __STORY__;
@@ -32,6 +34,7 @@ export type BabelPluginOptions = Record<string, DependencyEntry>;
  */
 export default function (babel: typeof Babel, options: BabelPluginOptions): Babel.PluginObj {
   const { types: t } = babel;
+
   return {
     name: PLUGIN_NAME,
     visitor: {
@@ -47,8 +50,9 @@ export default function (babel: typeof Babel, options: BabelPluginOptions): Babe
             comments: false,
             plugins: [[modifyImportsPlugin, options], removeStorybookParameters],
           }).code;
+          const code = prettier.format(transformedCode, { parser: 'babel-ts' });
 
-          path.get('init').replaceWith(t.stringLiteral(transformedCode));
+          path.get('init').replaceWith(t.stringLiteral(code));
         }
       },
 

storybook-addon-export-to-codesandbox/src/plugins/modifyImports.ts

@@ -10,7 +10,7 @@ interface PluginState extends Babel.PluginPass {
 export const PLUGIN_NAME = 'storybook-stories-modifyImports';
 
 /**
- * Collects all relative import declarations starting starting with '.' and all @fluentui/ scoped imports
+ * Collects all relative import declarations starting with '.' and all @fluentui/ scoped imports
  * Replaces all import declarations with one single import declartion from @fluentui/react-components
  *
  * See test fixtures for usage examples

storybook-addon-export-to-codesandbox/yarn.lock

@@ -9870,10 +9870,10 @@ prettier@^2.0.1:
   resolved "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz"
   integrity sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==
 
-prettier@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.npmjs.org/prettier/-/prettier-2.3.1.tgz"
-  integrity sha512-p+vNbgpLjif/+D+DwAZAbndtRrR0md0MwfmOVN9N+2RgyACMT+7tfaRnT+WDPkqnuVwleyuBIG2XBxKDme3hPA==
+prettier@^2.8.3:
+  version "2.8.3"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.3.tgz#ab697b1d3dd46fb4626fbe2f543afe0cc98d8632"
+  integrity sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==
 
 prettier@~2.2.1:
   version "2.2.1"