diff --git a/CHANGELOG.md b/CHANGELOG.md index 36363ebf86bc..f30e60681f20 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/code/lib/builder-manager/src/utils/data.ts b/code/lib/builder-manager/src/utils/data.ts index b72b7120a3bd..5e315c92e9f8 100644 --- a/code/lib/builder-manager/src/utils/data.ts +++ b/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('title'); const docsOptions = options.presets.apply('docs', {}); const template = readTemplate('template.ejs'); - const customHead = safeResolve(join(options.configDir, 'manager-head.html')); + const customHead = options.presets.apply('managerHead'); // we await these, because crucially if these fail, we want to bail out asap const [instance, config] = await Promise.all([ diff --git a/code/lib/builder-manager/src/utils/template.ts b/code/lib/builder-manager/src/utils/template.ts index b959817cfa04..7c9f873794f4 100644 --- a/code/lib/builder-manager/src/utils/template.ts +++ b/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 = {}) => - 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 -) { - const head = await fs - .pathExists(path.resolve(configDirPath, 'manager-head.html')) - .then | 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, { 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) || '', }); }; diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index eec312098645..efdf68bfa83a 100644 --- a/code/lib/builder-vite/package.json +++ b/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", diff --git a/code/lib/builder-vite/src/codegen-set-addon-channel.ts b/code/lib/builder-vite/src/codegen-set-addon-channel.ts index 8e706cb6ae2e..aa866408415d 100644 --- a/code/lib/builder-vite/src/codegen-set-addon-channel.ts +++ b/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; diff --git a/code/lib/core-server/src/presets/common-preset.ts b/code/lib/core-server/src/presets/common-preset.ts index 7b253ac65a86..ec821213808a 100644 --- a/code/lib/core-server/src/presets/common-preset.ts +++ b/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 = {}) => + 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>('env'); + + return interpolate(await contents, await interpolations); + } + + return ''; +}; diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index f45ee3b1d00c..caaa96db041c 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -389,13 +389,20 @@ export interface StorybookConfig { previewBody?: PresetValue; /** - * 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; } export type PresetValue = T | ((config: T, options: Options) => T | Promise); diff --git a/code/yarn.lock b/code/yarn.lock index d86e634fa538..0eed741db2da 100644 --- a/code/yarn.lock +++ b/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