Skip to content

Commit 2739f1d

Browse files
bashmishbashmish
committed
wip
1 parent e506d56 commit 2739f1d

File tree

3 files changed

+73
-61
lines changed

3 files changed

+73
-61
lines changed

‎packages/storybook-builder/src/generate-iframe-html.ts‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { normalizeStories } from '@storybook/core-common';
2-
import type { CoreConfig, Options } from '@storybook/types';
2+
import type { DocsOptions, Options, TagsOptions } from '@storybook/types';
33
import { readFile } from 'fs-extra';
44
import { virtualAppFilename } from './virtual-file-names.js';
55

@@ -10,35 +10,44 @@ export async function generateIframeHtml(options: Options): Promise<string> {
1010
require.resolve('../static/iframe-template.html'),
1111
'utf-8',
1212
);
13-
const { configType, features, presets, serverChannelUrl } = options;
13+
const { configType, features, presets } = options;
14+
const build = await presets.apply('build');
1415
const frameworkOptions = await presets.apply<Record<string, any> | null>('frameworkOptions');
1516
const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
1617
const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
1718
const logLevel = await presets.apply('logLevel', undefined);
18-
// const docsOptions = await presets.apply<DocsOptions>('docs');
19-
const coreOptions = await presets.apply<CoreConfig>('core');
19+
const docsOptions = await presets.apply<DocsOptions>('docs');
20+
const tagsOptions = await presets.apply<TagsOptions>('tags');
21+
const coreOptions = await presets.apply('core');
2022
const stories = normalizeStories(await options.presets.apply('stories', [], options), {
2123
configDir: options.configDir,
2224
workingDir: process.cwd(),
2325
}).map(specifier => ({
2426
...specifier,
2527
importPathMatcher: specifier.importPathMatcher.source,
2628
}));
27-
return (
28-
iframeHtmlTemplate
29-
.replace('[CONFIG_TYPE HERE]', configType || '')
30-
.replace('[LOGLEVEL HERE]', logLevel || '')
31-
.replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
32-
.replace(
33-
`'[CHANNEL_OPTIONS HERE]'`,
34-
JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {}),
35-
)
36-
.replace(`'[FEATURES HERE]'`, JSON.stringify(features || {}))
37-
.replace(`'[STORIES HERE]'`, JSON.stringify(stories || {}))
38-
// .replace(`'[DOCS_OPTIONS HERE]'`, JSON.stringify(docsOptions || {}))
39-
.replace(`'[SERVER_CHANNEL_URL HERE]'`, JSON.stringify(serverChannelUrl))
40-
.replace('<!-- [HEAD HTML SNIPPET HERE] -->', headHtmlSnippet || '')
41-
.replace('<!-- [BODY HTML SNIPPET HERE] -->', bodyHtmlSnippet || '')
42-
.replace(`[APP MODULE SRC HERE]`, virtualAppFilename)
43-
);
29+
const otherGlobals = {
30+
...(build?.test?.disableBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
31+
};
32+
return iframeHtmlTemplate
33+
.replace('[CONFIG_TYPE HERE]', configType || '')
34+
.replace('[LOGLEVEL HERE]', logLevel || '')
35+
.replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
36+
.replace(
37+
`('OTHER_GLOBLALS HERE');`,
38+
Object.entries(otherGlobals)
39+
.map(([k, v]) => `window["${k}"] = ${JSON.stringify(v)};`)
40+
.join(''),
41+
)
42+
.replace(
43+
`'[CHANNEL_OPTIONS HERE]'`,
44+
JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {}),
45+
)
46+
.replace(`'[FEATURES HERE]'`, JSON.stringify(features || {}))
47+
.replace(`'[STORIES HERE]'`, JSON.stringify(stories || {}))
48+
.replace(`'[DOCS_OPTIONS HERE]'`, JSON.stringify(docsOptions || {}))
49+
.replace(`'[TAGS_OPTIONS HERE]'`, JSON.stringify(tagsOptions || {}))
50+
.replace('<!-- [HEAD HTML SNIPPET HERE] -->', headHtmlSnippet || '')
51+
.replace('<!-- [BODY HTML SNIPPET HERE] -->', bodyHtmlSnippet || '')
52+
.replace(`[APP MODULE SRC HERE]`, virtualAppFilename);
4453
}

‎packages/storybook-builder/src/generate-setup-addons-script.ts‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,15 @@
22

33
export async function generateSetupAddonsScript() {
44
return `
5-
import { createChannel as createPostMessageChannel } from '@storybook/channel-postmessage';
6-
import { createChannel as createWebSocketChannel } from '@storybook/channel-websocket';
7-
import { addons } from '@storybook/preview-api';
5+
import { createBrowserChannel } from 'storybook/internal/channels';
6+
import { addons } from 'storybook/internal/preview-api';
87
9-
const channel = createPostMessageChannel({ page: 'preview' });
8+
const channel = createBrowserChannel({ page: 'preview' });
109
addons.setChannel(channel);
1110
window.__STORYBOOK_ADDONS_CHANNEL__ = channel;
1211
13-
const { SERVER_CHANNEL_URL } = globalThis;
14-
if (SERVER_CHANNEL_URL) {
15-
const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL });
16-
addons.setServerChannel(serverChannel);
17-
window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel;
12+
if (window.CONFIG_TYPE === 'DEVELOPMENT'){
13+
window.__STORYBOOK_SERVER_CHANNEL__ = channel;
1814
}
1915
`.trim();
2016
}

‎packages/storybook-builder/static/iframe-template.html‎

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,44 @@
11
<!DOCTYPE html>
2+
<!--suppress HtmlUnknownTarget -->
23
<html lang="en">
34
<head>
45
<meta charset="utf-8" />
56
<title>Storybook</title>
67
<meta name="viewport" content="width=device-width, initial-scale=1" />
78

8-
<link
9-
rel="prefetch"
10-
href="./sb-common-assets/nunito-sans-regular.woff2"
11-
as="font"
12-
type="font/woff2"
13-
crossorigin
14-
/>
15-
<link
16-
rel="prefetch"
17-
href="./sb-common-assets/nunito-sans-italic.woff2"
18-
as="font"
19-
type="font/woff2"
20-
crossorigin
21-
/>
22-
<link
23-
rel="prefetch"
24-
href="./sb-common-assets/nunito-sans-bold.woff2"
25-
as="font"
26-
type="font/woff2"
27-
crossorigin
28-
/>
29-
<link
30-
rel="prefetch"
31-
href="./sb-common-assets/nunito-sans-bold-italic.woff2"
32-
as="font"
33-
type="font/woff2"
34-
crossorigin
35-
/>
36-
<link rel="stylesheet" href="./sb-common-assets/fonts.css" />
9+
<style>
10+
@font-face {
11+
font-family: 'Nunito Sans';
12+
font-style: normal;
13+
font-weight: 400;
14+
font-display: swap;
15+
src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
16+
}
17+
18+
@font-face {
19+
font-family: 'Nunito Sans';
20+
font-style: italic;
21+
font-weight: 400;
22+
font-display: swap;
23+
src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
24+
}
25+
26+
@font-face {
27+
font-family: 'Nunito Sans';
28+
font-style: normal;
29+
font-weight: 700;
30+
font-display: swap;
31+
src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
32+
}
33+
34+
@font-face {
35+
font-family: 'Nunito Sans';
36+
font-style: italic;
37+
font-weight: 700;
38+
font-display: swap;
39+
src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
40+
}
41+
</style>
3742

3843
<script>
3944
window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';
@@ -42,8 +47,10 @@
4247
window.CHANNEL_OPTIONS = '[CHANNEL_OPTIONS HERE]';
4348
window.FEATURES = '[FEATURES HERE]';
4449
window.STORIES = '[STORIES HERE]';
45-
// window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
46-
window.SERVER_CHANNEL_URL = '[SERVER_CHANNEL_URL HERE]';
50+
window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';
51+
window.TAGS_OPTIONS = '[TAGS_OPTIONS HERE]';
52+
53+
('OTHER_GLOBLALS HERE');
4754

4855
// TODO: check if it's relevant for us
4956
// We do this so that "module && module.hot" etc. in Storybook source code

0 commit comments

Comments
 (0)