Add a to-importFn utility

lib/builder-webpack4/src/preview/iframe-webpack.config.ts

@@ -25,6 +25,7 @@ import {
   nodeModulesPaths,
   Options,
   NormalizedStoriesEntry,
+  toImportFn,
 } from '@storybook/core-common';
 import { createBabelLoader } from './babel-loader-preview';
 
@@ -85,13 +86,7 @@ export default async ({
 
   // Allows for custom frameworks that are not published under the @storybook namespace
   const virtualModuleMapping = {
-    [storiesPath]: dedent`
-      // TODO -- non-hardcoded importFn
-      export const importFn = async (path) => {
-        console.log('importFn ' + path);
-        return import('./src/' + path.replace(/^src\//, ''));
-      };
-    `,
+    [storiesPath]: toImportFn(stories),
     [configEntryPath]: dedent`
     import { composeConfigs } from '@storybook/core-client/dist/esm/preview/new/composeConfigs';
     import { WebPreview } from '@storybook/core-client/dist/esm/preview/new/WebPreview';
@@ -133,6 +128,7 @@ export default async ({
     `,
   };
 
+  console.log(virtualModuleMapping[storiesPath]);
   console.log(virtualModuleMapping[configEntryPath]);
   // if (stories) {
   //   const storiesFilename = path.resolve(path.join(configDir, `generated-stories-entry.js`));

lib/core-common/src/index.ts

@@ -23,5 +23,6 @@ export * from './utils/validate-configuration-files';
 export * from './utils/to-require-context';
 export * from './utils/has-dotenv';
 export * from './utils/normalize-stories';
+export * from './utils/to-importFn';
 
 export * from './types';

lib/core-common/src/utils/to-importFn.ts

@@ -0,0 +1,46 @@
+import globBase from 'glob-base';
+import { makeRe } from 'micromatch';
+import dedent from 'ts-dedent';
+
+import type { NormalizedStoriesEntry } from '../types';
+
+export function toImportFnPart(entry: NormalizedStoriesEntry) {
+  const { base } = globBase(entry.glob);
+  const regex = makeRe(entry.glob, { fastpaths: false, noglobstar: false, bash: false });
+
+  const webpackIncludeRegex = new RegExp(regex.source.substring(1));
+
+  // NOTE: `base` looks like './src' but `path`, (and what micromatch expects)
+  // is something that starts with `src/`. So to strip off base from path, we
+  // need to drop `base.length - 1` chars.
+  return dedent`
+      async (path) => {
+        if (!${regex}.exec(path)) {
+          return;
+        }
+        const remainder = path.substring(${base.length - 1});
+        return import(
+          /* webpackInclude: ${webpackIncludeRegex} */
+          '${base}/' + remainder
+        );
+      }
+
+  `;
+}
+
+export function toImportFn(stories: NormalizedStoriesEntry[]) {
+  return dedent`
+    const importers = [
+      ${stories.map(toImportFnPart).join(',\n')}
+    ];
+
+    export async function importFn(path) {
+      for (let i = 0; i < importers.length; i++) {
+        const moduleExports = await importers[i](path);
+        if (moduleExports) {
+          return moduleExports;
+        }
+      }
+    }
+  `;
+}