Merge pull request #9492 from storybookjs/9490-fix-source-loader-imports

Source-loader: Add imports to top of file

examples/official-storybook/stories/core/interleaved-exports.stories.js

@@ -0,0 +1,16 @@
+/* eslint-disable import/first,import/no-duplicates */
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Core/Interleaved exports',
+  parameters: { chromatic: { disable: true } },
+};
+
+import { Welcome } from '@storybook/react/demo';
+
+export const First = () => <Welcome showApp={action('show')} />;
+
+import { Button } from '@storybook/react/demo';
+
+export const Second = () => <Button onClick={action('click')}>Second</Button>;

lib/source-loader/src/server/abstract-syntax-tree/traverse-helpers.js

@@ -257,22 +257,6 @@ export function findDependencies(ast) {
   return { dependencies, storiesOfIdentifiers };
 }
 
-export function endOfImports(ast) {
-  let end = 0;
-
-  estraverse.traverse(ast, {
-    fallback: 'iteration',
-    enter: node => {
-      patchNode(node);
-
-      if (node.type === 'ImportDeclaration') {
-        end = Math.max(node.end, end);
-      }
-    },
-  });
-  return end;
-}
-
 export function popParametersObjectFromDefaultExport(source, ast) {
   let splicedSource = source;
   let parametersSliceOfCode = '';

lib/source-loader/src/server/build.js

@@ -1,26 +1,5 @@
-import { getOptions } from 'loader-utils';
 import { readStory } from './dependencies-lookup/readAsObject';
 import { getRidOfUselessFilePrefixes } from './dependencies-lookup/getRidOfUselessFilePrefixes';
-import getParser from './abstract-syntax-tree/parsers';
-import { endOfImports } from './abstract-syntax-tree/traverse-helpers';
-
-export function insertAfterImports(classLoader, insert, source) {
-  const options = getOptions(classLoader) || {};
-  let ast;
-  try {
-    ast = getParser(options.parser || classLoader.extension || 'javascript').parse(source);
-  } catch (e) {
-    // if not working, then we will fallback to not adding anything
-    // perhaps the code was not written in javascript
-    return source;
-  }
-  if (!ast) return `${insert}${source}`;
-  const endOfImportsIndex = endOfImports(ast);
-  const result = `${source.substring(0, endOfImportsIndex)}\n${insert}\n${source.substring(
-    endOfImportsIndex
-  )}`;
-  return result;
-}
 
 export function transform(inputSource) {
   return readStory(this, inputSource)
@@ -38,6 +17,7 @@ export function transform(inputSource) {
       }) => {
         const preamble = `
 /* eslint-disable */
+// @ts-nocheck
 // @ts-ignore
 var withSourceLoader = require('@storybook/source-loader/preview').withSource;
 // @ts-ignore
@@ -57,8 +37,7 @@ var __LOCAL_DEPENDENCIES__ = ${JSON.stringify(localDependencies)};
 // @ts-ignore
 var __IDS_TO_FRAMEWORKS__ = ${JSON.stringify(idsToFrameworks)};
         `;
-        return insertAfterImports(this, preamble, source);
-        // return `${preamble}${source}`;
+        return `${preamble}\n${source}`;
       }
     );
 }