Main.js: Add previewHead, previewBody, managerHead presets

docs/addons/writing-presets.md

@@ -177,6 +177,24 @@ If it doesn't exist yet, create a file `.storybook/main.js`:
 
 <!-- prettier-ignore-end -->
 
+### Preview/Manager templates
+
+It's also possible to to programmatically modify the preview head/body HTML using a preset, similar to the way `preview-head.html`/`preview-body.html` can be used to [configure story rendering](../configure/story-rendering.md). The `previewHead` and `previewBody` functions accept a string, which is the existing head/body, and return a modified string.
+
+For example, the following snippet adds a style tag to the preview head programatically:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/storybook-main-preview-head.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+Similarly, the `managerHead` can be used to modify the surrounding "manager" UI, analogous to `manager-head.html`.
+
 ## Sharing advanced configuration
 
 Change your `main.js` file to:

docs/snippets/common/storybook-main-preview-head.js.mdx

@@ -0,0 +1,14 @@
+```js
+// .storybook/main.js
+
+module.exports = {
+  previewHead: (head) => (`
+    ${head}
+    <style>
+      #main {
+        background-color: yellow;
+      }
+    </style>
+  `);
+};
+```

lib/core/src/server/manager/manager-webpack.config.ts

@@ -35,6 +35,10 @@ export default async ({
 }: ManagerWebpackOptions): Promise<Configuration> => {
   const { raw, stringified } = loadEnv();
   const logLevel = await presets.apply('logLevel', undefined);
+  const headHtmlSnippet = await presets.apply(
+    'managerHead',
+    getManagerHeadHtml(configDir, process.env)
+  );
   const isProd = configType === 'PRODUCTION';
   const refsTemplate = fse.readFileSync(path.join(__dirname, 'virtualModuleRef.template.js'), {
     encoding: 'utf8',
@@ -85,7 +89,7 @@ export default async ({
             DOCS_MODE: docsMode, // global docs mode
             PREVIEW_URL: previewUrl, // global preview URL
           },
-          headHtmlSnippet: getManagerHeadHtml(configDir, process.env),
+          headHtmlSnippet,
         }),
         template: require.resolve(`../templates/index.ejs`),
       }),

lib/core/src/server/preview/iframe-webpack.config.ts

@@ -58,7 +58,15 @@ export default async ({
 }: any) => {
   const dlls = await presets.apply('webpackDlls', []);
   const logLevel = await presets.apply('logLevel', undefined);
-  const frameworkOptions = await presets.apply(`${framework}Options`, {}, {});
+  const frameworkOptions = await presets.apply(`${framework}Options`, {});
+  const headHtmlSnippet = await presets.apply(
+    'previewHead',
+    getPreviewHeadHtml(configDir, process.env)
+  );
+  const bodyHtmlSnippet = await presets.apply(
+    'previewBody',
+    getPreviewBodyHtml(configDir, process.env)
+  );
   const { raw, stringified } = loadEnv({ production: true });
   const babelLoader = createBabelLoader(babelOptions, framework);
   const isProd = configType === 'PRODUCTION';
@@ -131,9 +139,9 @@ export default async ({
             LOGLEVEL: logLevel,
             FRAMEWORK_OPTIONS: frameworkOptions,
           },
-          headHtmlSnippet: getPreviewHeadHtml(configDir, process.env),
+          headHtmlSnippet,
           dlls,
-          bodyHtmlSnippet: getPreviewBodyHtml(configDir, process.env),
+          bodyHtmlSnippet,
         }),
         minify: {
           collapseWhitespace: true,

lib/core/src/server/utils/template.test.ts

@@ -66,7 +66,7 @@ describe('server.getPreviewBodyHtml', () => {
     });
   });
 
-  describe('when .storybook/preview-pre-body.html exists', () => {
+  describe('when .storybook/preview-body.html exists', () => {
     beforeEach(() => {
       mock({
         [`${__dirname}/../templates/base-preview-body.html`]: BASE_BODY_HTML_CONTENTS,