-
Notifications
You must be signed in to change notification settings - Fork 106
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
509b1e9
commit 74aa943
Showing
12 changed files
with
824 additions
and
421 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
33 changes: 33 additions & 0 deletions
33
packages/storybook-builder-vite/codegen-importfn-script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| const glob = require('glob-promise'); | ||
| const path = require('path'); | ||
| const { normalizePath } = require('vite'); | ||
|
|
||
| async function toImportFn(stories) { | ||
| const objectEntries = stories | ||
| .map(file => ` './${normalizePath(path.relative(process.cwd(),file))}': async () => import('/@fs/${file}')`); | ||
| return ` | ||
| const importers = { | ||
| ${objectEntries.join(',\n')} | ||
| }; | ||
| export async function importFn(path) { | ||
| return importers[path](); | ||
| } | ||
| `; | ||
| } | ||
|
|
||
| module.exports.generateImportFnScriptCode = | ||
| async function generateImportFnScriptCode(options) { | ||
|
|
||
| const stories = ( | ||
| await Promise.all( | ||
| ( | ||
| await options.presets.apply('stories', [], options) | ||
| ).map((storyEntry) => | ||
| glob(path.isAbsolute(storyEntry) ? storyEntry : path.join(options.configDir, storyEntry)) | ||
| ) | ||
| ) | ||
| ).reduce((carry, stories) => carry.concat(stories), []); | ||
|
|
||
| return (await toImportFn(stories)).trim(); | ||
| }; |
65 changes: 65 additions & 0 deletions
65
packages/storybook-builder-vite/codegen-modern-iframe-script.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| const { loadPreviewOrConfigFile } = require('@storybook/core-common'); | ||
| const { normalizePath } = require('vite'); | ||
|
|
||
| module.exports.generateModernIframeScriptCode = | ||
| async function generateModernIframeScriptCode(options, { storiesFilename }) { | ||
| const { presets, configDir } = options; | ||
|
|
||
| const previewOrConfigFile = loadPreviewOrConfigFile({ configDir }); | ||
| const presetEntries = await presets.apply('config', [], options); | ||
| const configEntries = [...presetEntries, previewOrConfigFile].filter( | ||
| Boolean | ||
| ).map(configEntry => `/@fs/${normalizePath(configEntry)}`); | ||
|
|
||
| const code = ` | ||
| import fetch from 'unfetch'; | ||
| import global from 'global'; | ||
| import { composeConfigs, PreviewWeb } from '@storybook/preview-web'; | ||
| import { ClientApi } from '@storybook/client-api'; | ||
| import { addons } from '@storybook/addons'; | ||
| import createPostMessageChannel from '@storybook/channel-postmessage'; | ||
| import createWebSocketChannel from '@storybook/channel-websocket'; | ||
| import { importFn } from '${storiesFilename}'; | ||
| const { SERVER_CHANNEL_URL } = global; | ||
| const getProjectAnnotations = async () => | ||
| composeConfigs(await Promise.all([${configEntries.map(configEntry => `import('${configEntry}')`).join(',\n')}])); | ||
| const channel = createPostMessageChannel({ page: 'preview' }); | ||
| addons.setChannel(channel); | ||
| if (SERVER_CHANNEL_URL) { | ||
| const serverChannel = createWebSocketChannel({ url: SERVER_CHANNEL_URL, }); | ||
| addons.setServerChannel(serverChannel); | ||
| window.__STORYBOOK_SERVER_CHANNEL__ = serverChannel; | ||
| } | ||
| const preview = new PreviewWeb(); | ||
| window.__STORYBOOK_PREVIEW__ = preview; | ||
| window.__STORYBOOK_STORY_STORE__ = preview.storyStore; | ||
| window.__STORYBOOK_ADDONS_CHANNEL__ = channel; | ||
| window.__STORYBOOK_CLIENT_API__ = new ClientApi({ storyStore: preview.storyStore }); | ||
| preview.initialize({ importFn, getProjectAnnotations }); | ||
| if (import.meta.hot) { | ||
| import.meta.hot.accept('${storiesFilename}', (newModule) => { | ||
| // importFn has changed so we need to patch the new one in | ||
| preview.onStoriesChanged({ importFn: newModule.importFn }); | ||
| }); | ||
| import.meta.hot.accept(${JSON.stringify(configEntries)}, ([...newConfigEntries]) => { | ||
| const newGetProjectAnnotations = () => composeConfigs(newConfigEntries); | ||
| // getProjectAnnotations has changed so we need to patch the new one in | ||
| preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); | ||
| }); | ||
| } | ||
| `.trim(); | ||
| return code; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,24 @@ | ||
| module.exports.transformIframeHtml = async function transformIframeHtml( | ||
| html, | ||
| { title, framework, presets } | ||
| { configType, features, framework, presets, serverChannelUrl, title } | ||
| ) { | ||
| const headHtmlSnippet = await presets.apply('previewHead'); | ||
| const bodyHtmlSnippet = await presets.apply('previewBody'); | ||
| const logLevel = await presets.apply('logLevel', undefined); | ||
| const frameworkOptions = await presets.apply(`${framework}Options`, {}); | ||
| const features = await presets.apply('features', {}); | ||
| const coreOptions = await presets.apply('core'); | ||
|
|
||
| return html | ||
| .replace('<!-- [TITLE HERE] -->', title || 'Storybook') | ||
| .replace('[CONFIG_TYPE HERE]', configType) | ||
| .replace('[LOGLEVEL HERE]', logLevel) | ||
| .replace( | ||
| `'[FRAMEWORK_OPTIONS HERE]'`, | ||
| JSON.stringify(frameworkOptions || {}) | ||
| ) | ||
| .replace(`'[CHANNEL_OPTIONS HERE]'`, JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {})) | ||
| .replace(`'[FEATURES HERE]'`, JSON.stringify(features || {})) | ||
| .replace(`'[SERVER_CHANNEL_URL HERE]'`, JSON.stringify(serverChannelUrl)) | ||
| .replace('<!-- [HEAD HTML SNIPPET HERE] -->', headHtmlSnippet || '') | ||
| .replace('<!-- [BODY HTML SNIPPET HERE] -->', bodyHtmlSnippet || ''); | ||
| }; |
Oops, something went wrong.