GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-03-20 05:02:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

Replace ExtendedOptions with standard Options type

Browse Source
This commit is contained in:
Ian VanSchooten 2023-01-16 22:09:58 -05:00
parent 0663100b12
commit 678c06c7c5
14 changed files with 30 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
code/lib/builder-vite/input/iframe.html
View File

@ -3,7 +3,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title><!-- [TITLE HERE] --></title>
<title>Storybook</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
window.CONFIG_TYPE = '[CONFIG_TYPE HERE]';

4
code/lib/builder-vite/src/build.ts
View File

@ -1,10 +1,10 @@
import { build as viteBuild, mergeConfig } from 'vite';
import type { Options } from '@storybook/types';
import { commonConfig } from './vite-config';
import type { ExtendedOptions } from './types';
import { sanitizeEnvVars } from './envs';
export async function build(options: ExtendedOptions) {
export async function build(options: Options) {
const { presets } = options;
const config = await commonConfig(options, 'build');

3
code/lib/builder-vite/src/codegen-entries.ts
View File

@ -2,7 +2,6 @@ import { loadPreviewOrConfigFile } from '@storybook/core-common';
import type { Options } from '@storybook/types';
import slash from 'slash';
import { normalizePath } from 'vite';
import type { ExtendedOptions } from './types';
import { listStories } from './list-stories';
const absoluteFilesToImport = (files: string[], name: string) =>
@ -10,7 +9,7 @@ const absoluteFilesToImport = (files: string[], name: string) =>
.map((el, i) => `import ${name ? `* as ${name}_${i} from ` : ''}'/@fs/${normalizePath(el)}'`)
.join('\n');
export async function generateVirtualStoryEntryCode(options: ExtendedOptions) {
export async function generateVirtualStoryEntryCode(options: Options) {
const storyEntries = await listStories(options);
const resolveMap = storyEntries.reduce<Record<string, string>>(
(prev, entry) => ({ ...prev, [entry]: entry.replace(slash(process.cwd()), '.') }),

5
code/lib/builder-vite/src/codegen-iframe-script.ts
View File

@ -1,10 +1,9 @@
import { getRendererName } from '@storybook/core-common';
import type { PreviewAnnotation } from '@storybook/types';
import type { Options, PreviewAnnotation } from '@storybook/types';
import { virtualPreviewFile, virtualStoriesFile } from './virtual-file-names';
import type { ExtendedOptions } from './types';
import { processPreviewAnnotation } from './utils/process-preview-annotation';
export async function generateIframeScriptCode(options: ExtendedOptions) {
export async function generateIframeScriptCode(options: Options) {
const { presets } = options;
const rendererName = await getRendererName(options);

5
code/lib/builder-vite/src/codegen-modern-iframe-script.ts
View File

@ -1,10 +1,9 @@
import { loadPreviewOrConfigFile, getFrameworkName } from '@storybook/core-common';
import type { PreviewAnnotation } from '@storybook/types';
import type { Options, PreviewAnnotation } from '@storybook/types';
import { virtualStoriesFile, virtualAddonSetupFile } from './virtual-file-names';
import type { ExtendedOptions } from './types';
import { processPreviewAnnotation } from './utils/process-preview-annotation';
export async function generateModernIframeScriptCode(options: ExtendedOptions) {
export async function generateModernIframeScriptCode(options: Options) {
const { presets, configDir } = options;
const frameworkName = await getFrameworkName(options);

5
code/lib/builder-vite/src/envs.ts
View File

@ -1,7 +1,6 @@
import { stringifyEnvs } from '@storybook/core-common';
import type { UserConfig as ViteConfig } from 'vite';
import type { Builder_EnvsRaw } from '@storybook/types';
import type { ExtendedOptions } from './types';
import type { Builder_EnvsRaw, Options } from '@storybook/types';
// Allowed env variables on the client
const allowedEnvVariables = [
@ -41,7 +40,7 @@ export function stringifyProcessEnvs(raw: Builder_EnvsRaw, envPrefix: ViteConfig
}
// Sanitize environment variables if needed
export async function sanitizeEnvVars(options: ExtendedOptions, config: ViteConfig) {
export async function sanitizeEnvVars(options: Options, config: ViteConfig) {
const { presets } = options;
const envsRaw = await presets.apply<Promise<Builder_EnvsRaw>>('env');
let { define } = config;

12
code/lib/builder-vite/src/index.ts
View File

@ -5,11 +5,11 @@ import type { RequestHandler } from 'express';
import type { ViteDevServer } from 'vite';
import express from 'express';
import { dirname, join, parse } from 'path';
import type { StorybookConfig as StorybookBaseConfig } from '@storybook/types';
import type { Options, StorybookConfig as StorybookBaseConfig } from '@storybook/types';
import { transformIframeHtml } from './transform-iframe-html';
import { createViteServer } from './vite-server';
import { build as viteBuild } from './build';
import type { ExtendedOptions, ViteBuilder, StorybookConfigVite } from './types';
import type { ViteBuilder, StorybookConfigVite } from './types';
export { withoutVitePlugins } from './utils/without-vite-plugins';
export { hasVitePlugins } from './utils/has-vite-plugins';
@ -25,7 +25,7 @@ export * from './types';
*/
export type StorybookViteConfig = StorybookBaseConfig & StorybookConfigVite;
function iframeMiddleware(options: ExtendedOptions, server: ViteDevServer): RequestHandler {
function iframeMiddleware(options: Options, server: ViteDevServer): RequestHandler {
return async (req, res, next) => {
if (!req.url.match(/^\/iframe\.html($|\?)/)) {
next();
@ -62,14 +62,14 @@ export const start: ViteBuilder['start'] = async ({
router,
server: devServer,
}) => {
server = await createViteServer(options as ExtendedOptions, devServer);
server = await createViteServer(options as Options, devServer);
const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
const previewDirOrigin = join(previewResolvedDir, 'dist');
router.use(`/sb-preview`, express.static(previewDirOrigin, { immutable: true, maxAge: '5m' }));
router.use(iframeMiddleware(options as ExtendedOptions, server));
router.use(iframeMiddleware(options as Options, server));
router.use(server.middlewares);
return {
@ -80,7 +80,7 @@ export const start: ViteBuilder['start'] = async ({
};
export const build: ViteBuilder['build'] = async ({ options }) => {
const viteCompilation = viteBuild(options as ExtendedOptions);
const viteCompilation = viteBuild(options as Options);
const previewResolvedDir = dirname(require.resolve('@storybook/preview/package.json'));
const previewDirOrigin = join(previewResolvedDir, 'dist');

5
code/lib/builder-vite/src/optimizeDeps.ts
View File

@ -1,10 +1,9 @@
import * as path from 'path';
import { normalizePath, resolveConfig } from 'vite';
import type { InlineConfig as ViteInlineConfig, UserConfig } from 'vite';
import type { Options } from '@storybook/types';
import { listStories } from './list-stories';
import type { ExtendedOptions } from './types';
const INCLUDE_CANDIDATES = [
'@base2/pretty-print-object',
'@emotion/core',
@ -101,7 +100,7 @@ const INCLUDE_CANDIDATES = [
const asyncFilter = async (arr: string[], predicate: (val: string) => Promise<boolean>) =>
Promise.all(arr.map(predicate)).then((results) => arr.filter((_v, index) => results[index]));
export async function getOptimizeDeps(config: ViteInlineConfig, options: ExtendedOptions) {
export async function getOptimizeDeps(config: ViteInlineConfig, options: Options) {
const { root = process.cwd() } = config;
const absoluteStories = await listStories(options);
const stories = absoluteStories.map((storyPath) => normalizePath(path.relative(root, storyPath)));

5
code/lib/builder-vite/src/plugins/code-generator-plugin.ts
View File

@ -3,6 +3,7 @@
import * as fs from 'fs';
import { mergeConfig } from 'vite';
import type { Plugin } from 'vite';
import type { Options } from '@storybook/types';
import { transformIframeHtml } from '../transform-iframe-html';
import { generateIframeScriptCode } from '../codegen-iframe-script';
import { generateModernIframeScriptCode } from '../codegen-modern-iframe-script';
@ -10,8 +11,6 @@ import { generateImportFnScriptCode } from '../codegen-importfn-script';
import { generateVirtualStoryEntryCode, generatePreviewEntryCode } from '../codegen-entries';
import { generateAddonSetupCode } from '../codegen-set-addon-channel';
import type { ExtendedOptions } from '../types';
import {
virtualAddonSetupFile,
virtualFileId,
@ -19,7 +18,7 @@ import {
virtualStoriesFile,
} from '../virtual-file-names';
export function codeGeneratorPlugin(options: ExtendedOptions): Plugin {
export function codeGeneratorPlugin(options: Options): Plugin {
const iframePath = require.resolve('@storybook/builder-vite/input/iframe.html');
let iframeId: string;

5
code/lib/builder-vite/src/plugins/csf-plugin.ts
View File

@ -1,9 +1,8 @@
import type { Plugin } from 'vite';
import { vite } from '@storybook/csf-plugin';
import type { StorybookConfig } from '@storybook/types';
import type { ExtendedOptions } from '../types';
import type { StorybookConfig, Options } from '@storybook/types';
export async function csfPlugin(config: ExtendedOptions): Promise<Plugin> {
export async function csfPlugin(config: Options): Promise<Plugin> {
const { presets } = config;
const addons = await presets.apply<StorybookConfig['addons']>('addons', []);

8
code/lib/builder-vite/src/transform-iframe-html.ts
View File

@ -1,11 +1,10 @@
import { normalizeStories } from '@storybook/core-common';
import type { CoreConfig, DocsOptions } from '@storybook/types';
import type { ExtendedOptions } from './types';
import type { CoreConfig, DocsOptions, Options } from '@storybook/types';
export type PreviewHtml = string | undefined;
export async function transformIframeHtml(html: string, options: ExtendedOptions) {
const { configType, features, presets, serverChannelUrl, title } = options;
export async function transformIframeHtml(html: string, options: Options) {
const { configType, features, presets, serverChannelUrl } = options;
const frameworkOptions = await presets.apply<Record<string, any> | null>('frameworkOptions');
const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
@ -22,7 +21,6 @@ export async function transformIframeHtml(html: string, options: ExtendedOptions
}));
return html
.replace('<!-- [TITLE HERE] -->', title || 'Storybook')
.replace('[CONFIG_TYPE HERE]', configType || '')
.replace('[LOGLEVEL HERE]', logLevel || '')
.replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))

7
code/lib/builder-vite/src/types.ts
View File

@ -18,10 +18,3 @@ export type StorybookConfigVite = {
};
export type BuilderOptions = {};
// Using instead of `Record<string, string>` to provide better aware of used options
type IframeOptions = {
title: string;
};
export type ExtendedOptions = Options & IframeOptions;

6
code/lib/builder-vite/src/vite-config.ts
View File

@ -10,6 +10,7 @@ import type {
import { viteExternalsPlugin } from 'vite-plugin-externals';
import { isPreservingSymlinks, getFrameworkName } from '@storybook/core-common';
import { globals } from '@storybook/preview/globals';
import type { Options } from '@storybook/types';
import {
codeGeneratorPlugin,
csfPlugin,
@ -17,7 +18,6 @@ import {
mdxPlugin,
stripStoryHMRBoundary,
} from './plugins';
import type { ExtendedOptions } from './types';
export type PluginConfigType = 'build' | 'development';
@ -35,7 +35,7 @@ const configEnvBuild: ConfigEnv = {
// Vite config that is common to development and production mode
export async function commonConfig(
options: ExtendedOptions,
options: Options,
_type: PluginConfigType
): Promise<ViteInlineConfig> {
const configEnv = _type === 'development' ? configEnvServe : configEnvBuild;
@ -69,7 +69,7 @@ export async function commonConfig(
return config;
}
export async function pluginConfig(options: ExtendedOptions) {
export async function pluginConfig(options: Options) {
const frameworkName = await getFrameworkName(options);
const plugins = [

4
code/lib/builder-vite/src/vite-server.ts
View File

@ -1,11 +1,11 @@
import type { Server } from 'http';
import { createServer } from 'vite';
import type { Options } from '@storybook/types';
import { commonConfig } from './vite-config';
import type { ExtendedOptions } from './types';
import { getOptimizeDeps } from './optimizeDeps';
import { sanitizeEnvVars } from './envs';
export async function createViteServer(options: ExtendedOptions, devServer: Server) {
export async function createViteServer(options: Options, devServer: Server) {
const { presets } = options;
const commonCfg = await commonConfig(options, 'development');