7.0.16 release

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.0.16 (May 24, 2023)
+
+#### Bug Fixes
+
+-   Vite: Fix pnpm support by replacing @storybook/global with `window` [#22709](https://github.com/storybooks/storybook/pull/22709)
+-   Core: Fix `managerHead` preset in `main.ts` [#22701](https://github.com/storybooks/storybook/pull/22701)
+
 ## 7.0.15 (May 24, 2023)
 
 #### Bug Fixes

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/builder-manager/src/utils/template.ts

@@ -1,13 +1,10 @@
-import path, { dirname, join } from 'path';
+import { dirname, join } from 'path';
 import fs from 'fs-extra';
 
 import { render } from 'ejs';
 
 import type { DocsOptions, Options, Ref } from '@storybook/types';
 
-const interpolate = (string: string, data: Record<string, string> = {}) =>
-  Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string);
-
 export const getTemplatePath = async (template: string) => {
   return join(
     dirname(require.resolve('@storybook/builder-manager/package.json')),
@@ -17,32 +14,11 @@ export const getTemplatePath = async (template: string) => {
 };
 
 export const readTemplate = async (template: string) => {
-  // eslint-disable-next-line @typescript-eslint/no-shadow
   const path = await getTemplatePath(template);
 
   return fs.readFile(path, 'utf8');
 };
 
-export async function getManagerHeadTemplate(
-  configDirPath: string,
-  interpolations: Record<string, string>
-) {
-  const head = await fs
-    .pathExists(path.resolve(configDirPath, 'manager-head.html'))
-    .then<Promise<string> | false>((exists) => {
-      if (exists) {
-        return fs.readFile(path.resolve(configDirPath, 'manager-head.html'), 'utf8');
-      }
-      return false;
-    });
-
-  if (!head) {
-    return '';
-  }
-
-  return interpolate(head, interpolations);
-}
-
 export async function getManagerMainTemplate() {
   return getTemplatePath(`manager.ejs`);
 }
@@ -60,7 +36,6 @@ export const renderHTML = async (
   docsOptions: Promise<DocsOptions>,
   { versionCheck, releaseNotesData, previewUrl, configType }: Options
 ) => {
-  const customHeadRef = await customHead;
   const titleRef = await title;
   const templateRef = await template;
 
@@ -79,6 +54,6 @@ export const renderHTML = async (
       RELEASE_NOTES_DATA: JSON.stringify(JSON.stringify(releaseNotesData), null, 2),
       PREVIEW_URL: JSON.stringify(previewUrl, null, 2), // global preview URL
     },
-    head: customHeadRef ? await fs.readFile(customHeadRef, 'utf8') : '',
+    head: (await customHead) || '',
   });
 };

code/lib/builder-vite/package.json

@@ -47,7 +47,6 @@
     "@storybook/client-logger": "7.0.15",
     "@storybook/core-common": "7.0.15",
     "@storybook/csf-plugin": "7.0.15",
-    "@storybook/global": "^5.0.0",
     "@storybook/mdx2-csf": "^1.0.0",
     "@storybook/node-logger": "7.0.15",
     "@storybook/preview": "7.0.15",

code/lib/builder-vite/src/codegen-set-addon-channel.ts

@@ -1,6 +1,5 @@
 export async function generateAddonSetupCode() {
   return `
-    import { global } from '@storybook/global';
     import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
     import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
     import { addons } from '@storybook/preview-api';
@@ -9,7 +8,7 @@ export async function generateAddonSetupCode() {
     addons.setChannel(channel);
     window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
 
-    if (global.CONFIG_TYPE === 'DEVELOPMENT'){
+    if (window.CONFIG_TYPE === 'DEVELOPMENT'){
       const serverChannel = createWebSocketChannel({});
       addons.setServerChannel(serverChannel);
       window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;

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

@@ -21,6 +21,9 @@ import { dedent } from 'ts-dedent';
 import { parseStaticDir } from '../utils/server-statics';
 import { defaultStaticDirs } from '../utils/constants';
 
+const interpolate = (string: string, data: Record<string, string> = {}) =>
+  Object.entries(data).reduce((acc, [k, v]) => acc.replace(new RegExp(`%${k}%`, 'g'), v), string);
+
 const defaultFavicon = require.resolve('@storybook/core-server/public/favicon.svg');
 
 export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = []) => [
@@ -217,3 +220,15 @@ export const docs = (
   ...docsOptions,
   docsMode,
 });
+
+export const managerHead = async (_: any, options: Options) => {
+  const location = join(options.configDir, 'manager-head.html');
+  if (await pathExists(location)) {
+    const contents = readFile(location, 'utf-8');
+    const interpolations = options.presets.apply<Record<string, string>>('env');
+
+    return interpolate(await contents, await interpolations);
+  }
+
+  return '';
+};

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

@@ -389,13 +389,20 @@ export interface StorybookConfig {
   previewBody?: PresetValue<string>;
 
   /**
-   * Programatically override the preview's main page template.
+   * Programmatically override the preview's main page template.
    * This should return a reference to a file containing an `.ejs` template
    * that will be interpolated with environment variables.
    *
    * @example '.storybook/index.ejs'
    */
   previewMainTemplate?: string;
+
+  /**
+   * Programmatically modify the preview head/body HTML.
+   * The managerHead function accept a string,
+   * which is the existing head content, and return a modified string.
+   */
+  managerHead?: PresetValue<string>;
 }
 
 export type PresetValue<T> = T | ((config: T, options: Options) => T | Promise<T>);

code/yarn.lock

@@ -5567,7 +5567,6 @@ __metadata:
     "@storybook/client-logger": 7.0.15
     "@storybook/core-common": 7.0.15
     "@storybook/csf-plugin": 7.0.15
-    "@storybook/global": ^5.0.0
     "@storybook/mdx2-csf": ^1.0.0
     "@storybook/node-logger": 7.0.15
     "@storybook/preview": 7.0.15