Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Core: Restore previewHead/Body presets #14500

Merged
merged 1 commit into from Apr 7, 2021
Merged

Core: Restore previewHead/Body presets #14500

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/addons/writing-presets.md
View file
Open in desktop
Expand Up @@ -195,6 +195,8 @@ For example, the following snippet adds a style tag to the preview head programa

Similarly, the `managerHead` can be used to modify the surrounding "manager" UI, analogous to `manager-head.html`.

Finally, the preview's main page _template_ can also be overridden using the `previewMainTemplate`, which should return a reference to a file containing an `.ejs` template that gets interpolated with some environment variables. For an example, see the [Storbook's default template](https://github.com/storybookjs/storybook/blob/next/lib/core-common/src/templates/index.ejs).

## Sharing advanced configuration

Change your `main.js` file to:
Expand Down
4 changes: 2 additions & 2 deletions lib/builder-webpack4/src/preview/iframe-webpack.config.ts
View file
Open in desktop
Expand Up @@ -67,8 +67,8 @@ export default async ({
const logLevel = await presets.apply('logLevel', undefined);
const frameworkOptions = await presets.apply(`${framework}Options`, {});

const headHtmlSnippet = await presets.apply('previewHeadTemplate');
const bodyHtmlSnippet = await presets.apply('previewBodyTemplate');
const headHtmlSnippet = await presets.apply('previewHead');
const bodyHtmlSnippet = await presets.apply('previewBody');
const template = await presets.apply<string>('previewMainTemplate');
const envs = await presets.apply<Record<string, string>>('env');

Expand Down
4 changes: 2 additions & 2 deletions lib/builder-webpack5/src/preview/iframe-webpack.config.ts
View file
Open in desktop
Expand Up @@ -64,8 +64,8 @@ export default async ({
const logLevel = await presets.apply('logLevel', undefined);
const frameworkOptions = await presets.apply(`${framework}Options`, {});

const headHtmlSnippet = await presets.apply('previewHeadTemplate');
const bodyHtmlSnippet = await presets.apply('previewBodyTemplate');
const headHtmlSnippet = await presets.apply('previewHead');
const bodyHtmlSnippet = await presets.apply('previewBody');
const template = await presets.apply<string>('previewMainTemplate');

const babelLoader = createBabelLoader(babelOptions, framework);
Expand Down
4 changes: 2 additions & 2 deletions lib/core-server/src/presets/common-preset.ts
View file
Open in desktop
Expand Up @@ -20,7 +20,7 @@ export const babel = async (_: unknown, options: Options) => {

export const logLevel = (previous: any, options: Options) => previous || options.loglevel || 'info';

export const previewHeadTemplate = async (base: any, { configDir, presets }: Options) => {
export const previewHead = async (base: any, { configDir, presets }: Options) => {
const interpolations = await presets.apply<Record<string, string>>('env');
return getPreviewHeadTemplate(configDir, interpolations);
};
Expand All @@ -29,7 +29,7 @@ export const env = async () => {
return loadEnvs({ production: true }).raw;
};

export const previewBodyTemplate = async (base: any, { configDir, presets }: Options) => {
export const previewBody = async (base: any, { configDir, presets }: Options) => {
const interpolations = await presets.apply<Record<string, string>>('env');
return getPreviewBodyTemplate(configDir, interpolations);
};
Expand Down