Core: Fix managerHead preset in main.ts

code/lib/builder-manager/src/utils/data.ts

@@ -1,11 +1,10 @@
-import { basename, join } from 'path';
+import { basename } from 'path';
 import type { DocsOptions, Options } from '@storybook/types';
 import { getRefs } from '@storybook/core-common';
 
 import { readTemplate } from './template';
 // eslint-disable-next-line import/no-cycle
 import { executor, getConfig } from '../index';
-import { safeResolve } from './safeResolve';
 
 export const getData = async (options: Options) => {
   const refs = getRefs(options);
@@ -16,7 +15,7 @@ export const getData = async (options: Options) => {
   const title = options.presets.apply<string>('title');
   const docsOptions = options.presets.apply<DocsOptions>('docs', {});
   const template = readTemplate('template.ejs');
-  const customHead = safeResolve(join(options.configDir, 'manager-head.html'));
+  const customHead = options.presets.apply<string>('managerHead');
 
   // we await these, because crucially if these fail, we want to bail out asap
   const [instance, config] = await Promise.all([

code/lib/core-server/src/presets/common-preset.ts

@@ -20,6 +20,7 @@ import { join } from 'path';
 import { dedent } from 'ts-dedent';
 import { parseStaticDir } from '../utils/server-statics';
 import { defaultStaticDirs } from '../utils/constants';
+import { safeResolve } from '../utils/safeResolve';
 
 const defaultFavicon = require.resolve('@storybook/core-server/public/favicon.svg');
 
@@ -217,3 +218,6 @@ export const docs = (
   ...docsOptions,
   docsMode,
 });
+
+export const managerHead = (_: any, options: Options) =>
+  safeResolve(join(options.configDir, 'manager-head.html'));

code/lib/core-server/src/utils/safeResolve.ts

@@ -0,0 +1,7 @@
+export const safeResolve = (path: string) => {
+  try {
+    return Promise.resolve(require.resolve(path));
+  } catch (e) {
+    return Promise.resolve(false as const);
+  }
+};

code/lib/types/src/modules/core-common.ts

@@ -396,6 +396,13 @@ export interface StorybookConfig {
    * @example '.storybook/index.ejs'
    */
   previewMainTemplate?: string;
+
+  /**
+   * Programmatically modify the preview head/body HTML.
+   * The managerHead function accept a string,
+   * which is the existing head, and return a modified string.
+   */
+  managerHead?: PresetValue<string>;
 }
 
 export type PresetValue<T> = T | ((config: T, options: Options) => T | Promise<T>);