GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 13:31:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

CLI: Create sb start/build commands

Browse Source
This commit is contained in:
Michael Shilman 2022-04-06 14:38:09 +08:00
parent 629afc63ff
commit 43bc21938b
25 changed files with 230 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
addons/storyshots/storyshots-core/package.json
View File

@ -38,10 +38,10 @@
"*.d.ts"
],
"scripts": {
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"example": "jest storyshot.test",
"prepare": "node ../../../scripts/prepare.js",
"storybook": "start-storybook -p 6006"
"storybook": "sb start -p 6006"
},
"dependencies": {
"@jest/transform": "^26.6.2",

2
examples/angular-cli/package.json
View File

@ -5,7 +5,7 @@
"license": "MIT",
"scripts": {
"build": "ng build",
"build-storybook": "yarn storybook-prebuild && ng run angular-cli:build-storybook",
"build-storybook": "yarn storybook-prebuild && ng run angular-cli:sb build",
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
"e2e": "ng e2e",
"postinstall": "ngcc --source ../../node_modules",

4
examples/cra-kitchen-sink/package.json
View File

@ -4,10 +4,10 @@
"private": true,
"scripts": {
"build": "react-scripts build",
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"storybook": "start-storybook -p 9010 --no-manager-cache",
"storybook": "sb start -p 9010 --no-manager-cache",
"test": "react-scripts test --env=jsdom"
},
"dependencies": {

4
examples/cra-react15/package.json
View File

@ -4,10 +4,10 @@
"private": true,
"scripts": {
"build": "react-scripts build",
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"storybook": "start-storybook -p 9009 --no-manager-cache",
"storybook": "sb start -p 9009 --no-manager-cache",
"test": "react-scripts test --env=jsdom"
},
"dependencies": {

4
examples/cra-ts-essentials/package.json
View File

@ -4,10 +4,10 @@
"private": true,
"scripts": {
"build": "react-scripts build",
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"storybook": "start-storybook -p 9009 --no-manager-cache",
"storybook": "sb start -p 9009 --no-manager-cache",
"test": "SKIP_PREFLIGHT_CHECK=true react-scripts test"
},
"browserslist": {

4
examples/cra-ts-kitchen-sink/package.json
View File

@ -4,10 +4,10 @@
"private": true,
"scripts": {
"build": "react-scripts build",
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"eject": "react-scripts eject",
"start": "react-scripts start",
"storybook": "start-storybook -p 9009 --no-manager-cache",
"storybook": "sb start -p 9009 --no-manager-cache",
"test": "react-scripts test"
},
"browserslist": {

6
examples/ember-cli/package.json
View File

@ -4,11 +4,11 @@
"private": true,
"scripts": {
"build": "ember build --output-path ember-output",
"build-storybook": "yarn storybook-prebuild && build-storybook",
"build-storybook": "yarn storybook-prebuild && sb build",
"dev": "ember serve",
"storybook": "yarn build && start-storybook -p 9009 --no-manager-cache",
"storybook": "yarn build && sb start -p 9009 --no-manager-cache",
"storybook-prebuild": "yarn build && shx cp -r public/* ember-output",
"storybook:dev": "yarn dev & start-storybook -p 9009"
"storybook:dev": "yarn dev & sb start -p 9009"
},
"dependencies": {
"ember-named-blocks-polyfill": "^0.2.3",

4
examples/html-kitchen-sink/package.json
View File

@ -8,9 +8,9 @@
"author": "",
"main": "index.js",
"scripts": {
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
"storybook": "start-storybook -p 9006 --no-manager-cache"
"storybook": "sb start -p 9006 --no-manager-cache"
},
"devDependencies": {
"@storybook/addon-a11y": "6.5.0-alpha.57",

8
examples/official-storybook/package.json
View File

@ -3,12 +3,12 @@
"version": "6.5.0-alpha.57",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
"debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./",
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build -c ./",
"debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb start -p 9011 -c ./",
"do-storyshots-puppeteer": "../../node_modules/.bin/jest --projects=./storyshots-puppeteer",
"generate-addon-jest-testresults": "jest --config=tests/addon-jest.config.json --json --outputFile=stories/addon-jest.testresults.json",
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache",
"storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb start -p 9011 -c ./ --no-manager-cache",
"storyshots-puppeteer": "yarn run sb build && yarn run do-storyshots-puppeteer"
},
"devDependencies": {
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",

4
examples/preact-kitchen-sink/package.json
View File

@ -4,9 +4,9 @@
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"storybook": "start-storybook -p 9009 --no-manager-cache"
"storybook": "sb start -p 9009 --no-manager-cache"
},
"dependencies": {
"global": "^4.4.0",

6
examples/react-ts-webpack4/package.json
View File

@ -3,9 +3,9 @@
"version": "6.5.0-alpha.57",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook -c ./",
"debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./",
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ./ --no-manager-cache"
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build -c ./",
"debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb start -p 9011 -c ./",
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb start -p 9011 -c ./ --no-manager-cache"
},
"dependencies": {
"@storybook/addon-controls": "6.5.0-alpha.57",

6
examples/react-ts/package.json
View File

@ -3,10 +3,10 @@
"version": "6.5.0-alpha.57",
"private": true,
"scripts": {
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true build-storybook",
"debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011",
"build-storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb build",
"debug": "cross-env NODE_OPTIONS=--inspect-brk STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb start -p 9011",
"sb": "node ../../lib/cli/bin/index.js",
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 --no-manager-cache"
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb start --no-manager-cache"
},
"dependencies": {
"formik": "^2.2.9",

4
examples/server-kitchen-sink/package.json
View File

@ -8,10 +8,10 @@
"author": "",
"main": "index.js",
"scripts": {
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"server": "PORT=1337 nodemon server.js",
"start": "concurrently \"yarn server\" \"yarn storybook\"",
"storybook": "SERVER_PORT=1137 start-storybook -p 9006 --quiet"
"storybook": "SERVER_PORT=1137 sb start -p 9006 --quiet"
},
"devDependencies": {
"@storybook/addon-a11y": "6.5.0-alpha.57",

2
examples/standalone-preview/package.json
View File

@ -3,7 +3,7 @@
"version": "6.5.0-alpha.57",
"private": true,
"scripts": {
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true start-storybook -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
"storybook": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true sb start -p 9011 -c ../official-storybook --no-manager-cache --preview-url=http://localhost:1337/external-iframe.html",
"storybook-preview": "cross-env PREVIEW_URL=external-iframe.html parcel ./storybook.html --port 1337"
},
"devDependencies": {

4
examples/svelte-kitchen-sink/package.json
View File

@ -3,8 +3,8 @@
"version": "6.5.0-alpha.57",
"private": true,
"scripts": {
"build-storybook": "build-storybook",
"storybook": "start-storybook -p 9009 --no-manager-cache"
"build-storybook": "sb build",
"storybook": "sb start -p 9009 --no-manager-cache"
},
"dependencies": {
"global": "^4.4.0"

4
examples/vue-3-cli/package.json
View File

@ -4,9 +4,9 @@
"private": true,
"scripts": {
"build": "vue-cli-service build",
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"serve": "vue-cli-service serve",
"storybook": "start-storybook -p 6006 --no-manager-cache"
"storybook": "sb start -p 6006 --no-manager-cache"
},
"dependencies": {
"core-js": "^3.8.2",

4
examples/vue-cli/package.json
View File

@ -4,9 +4,9 @@
"private": true,
"scripts": {
"build": "vue-cli-service build",
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"serve": "vue-cli-service serve",
"storybook": "start-storybook -p 9009 --no-manager-cache"
"storybook": "sb start -p 9009 --no-manager-cache"
},
"dependencies": {
"core-js": "^3.8.2",

4
examples/vue-kitchen-sink/package.json
View File

@ -4,9 +4,9 @@
"private": true,
"scripts": {
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"storybook": "start-storybook -p 9009 --no-manager-cache"
"storybook": "sb start -p 9009 --no-manager-cache"
},
"dependencies": {
"vue": "^2.6.12",

4
examples/web-components-kitchen-sink/package.json
View File

@ -8,9 +8,9 @@
"author": "",
"main": "index.js",
"scripts": {
"build-storybook": "build-storybook",
"build-storybook": "sb build",
"generate-custom-elements-manifest": "yarn custom-elements-manifest analyze --litelement --dev --exclude \"./**/*.stories.ts\" --exclude \"./storybook-static\"",
"storybook": "start-storybook -p 9006 --no-manager-cache"
"storybook": "sb start -p 9006 --no-manager-cache"
},
"resolutions": {
"@storybook/addon-a11y": "portal:../../addons/a11y",

1
lib/cli/package.json
View File

@ -49,6 +49,7 @@
"@babel/preset-env": "^7.12.11",
"@storybook/codemod": "6.5.0-alpha.57",
"@storybook/core-common": "6.5.0-alpha.57",
"@storybook/core-server": "6.5.0-alpha.57",
"@storybook/csf-tools": "6.5.0-alpha.57",
"@storybook/node-logger": "6.5.0-alpha.57",
"@storybook/semver": "^7.3.2",

21
lib/cli/src/build.ts Normal file
View File

@ -0,0 +1,21 @@
import { logger } from '@storybook/node-logger';
import { buildStaticStandalone } from '@storybook/core-server';
import { cache } from '@storybook/core-common';
export const build = async (cliOptions: any) => {
console.log({ cliOptions });
try {
await buildStaticStandalone({
...cliOptions,
configDir: cliOptions.configDir || './.storybook',
outputDir: cliOptions.outputDir || './storybook-static',
ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
docsMode: !!cliOptions.docs,
configType: 'PRODUCTION',
cache,
});
} catch (e) {
logger.error(e);
process.exit(1);
}
};

106
lib/cli/src/generate.ts
View File

@ -4,6 +4,9 @@ import chalk from 'chalk';
import envinfo from 'envinfo';
import leven from 'leven';
import { sync } from 'read-pkg-up';
import { logger } from '@storybook/node-logger';
import { initiate } from './initiate';
import { add } from './add';
import { migrate } from './migrate';
@ -13,10 +16,12 @@ import { repro } from './repro';
import { link } from './link';
import { automigrate } from './automigrate';
import { generateStorybookBabelConfigInCWD } from './babel-config';
import { start } from './start';
import { build } from './build';
import { parseList, getEnvConfig } from './utils';
const pkg = sync({ cwd: __dirname }).packageJson;
const logger = console;
const consoleLogger = console;
program
.command('init')
@ -57,7 +62,7 @@ program
.command('info')
.description('Prints debugging information about the local environment')
.action(() => {
logger.log(chalk.bold('\nEnvironment Info:'));
consoleLogger.log(chalk.bold('\nEnvironment Info:'));
envinfo
.run({
System: ['OS', 'CPU'],
@ -66,7 +71,7 @@ program
npmPackages: '@storybook/*',
npmGlobalPackages: '@storybook/*',
})
.then(logger.log);
.then(consoleLogger.log);
});
program
@ -139,13 +144,104 @@ program
})
);
program
.command('start')
.option('-p, --port <number>', 'Port to run Storybook', (str) => parseInt(str, 10))
.option('-h, --host <string>', 'Host to run Storybook')
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
.option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
.option(
'--https',
'Serve Storybook over HTTPS. Note: You must provide your own certificate information.'
)
.option(
'--ssl-ca <ca>',
'Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate)',
parseList
)
.option('--ssl-cert <cert>', 'Provide an SSL certificate. (Required with --https)')
.option('--ssl-key <key>', 'Provide an SSL key. (Required with --https)')
.option('--smoke-test', 'Exit after successful start')
.option('--ci', "CI mode (skip interactive prompts, don't open browser)")
.option('--no-open', 'Do not open Storybook automatically in the browser')
.option('--loglevel <level>', 'Control level of logging during build')
.option('--quiet', 'Suppress verbose build output')
.option('--no-version-updates', 'Suppress update check', true)
.option(
'--no-release-notes',
'Suppress automatic redirects to the release notes after upgrading',
true
)
.option('--no-manager-cache', 'Do not cache the manager UI')
.option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
.option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk')
.option(
'--preview-url <string>',
'Disables the default storybook preview and lets your use your own'
)
.option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
.option('--docs', 'Build a documentation-only site using addon-docs')
.option('--modern', 'Use modern browser modules')
.action((options) => {
logger.setLevel(program.loglevel);
consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}`) + chalk.reset('\n'));
// The key is the field created in `program` variable for
// each command line argument. Value is the env variable.
getEnvConfig(program, {
port: 'SBCONFIG_PORT',
host: 'SBCONFIG_HOSTNAME',
staticDir: 'SBCONFIG_STATIC_DIR',
configDir: 'SBCONFIG_CONFIG_DIR',
ci: 'CI',
});
if (typeof program.port === 'string' && program.port.length > 0) {
program.port = parseInt(program.port, 10);
}
start({ ...options, packageJson: pkg });
});
program
.command('build')
.option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
.option('-o, --output-dir <dir-name>', 'Directory where to store built files')
.option('-c, --config-dir <dir-name>', 'Directory where to load Storybook configurations from')
.option('--quiet', 'Suppress verbose build output')
.option('--loglevel <level>', 'Control level of logging during build')
.option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
.option('--webpack-stats-json [directory]', 'Write Webpack Stats JSON to disk')
.option(
'--preview-url <string>',
'Disables the default storybook preview and lets your use your own'
)
.option('--force-build-preview', 'Build the preview iframe even if you are using --preview-url')
.option('--docs', 'Build a documentation-only site using addon-docs')
.option('--modern', 'Use modern browser modules')
.option('--no-manager-cache', 'Do not cache the manager UI')
.action((options) => {
logger.setLevel(program.loglevel);
consoleLogger.log(chalk.bold(`${pkg.name} v${pkg.version}\n`));
// The key is the field created in `program` variable for
// each command line argument. Value is the env variable.
getEnvConfig(program, {
staticDir: 'SBCONFIG_STATIC_DIR',
outputDir: 'SBCONFIG_OUTPUT_DIR',
configDir: 'SBCONFIG_CONFIG_DIR',
});
build({ ...options, packageJson: pkg });
});
program.on('command:*', ([invalidCmd]) => {
logger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd);
// eslint-disable-next-line
const availableCommands = program.commands.map((cmd) => cmd._name);
const suggestion = availableCommands.find((cmd) => leven(cmd, invalidCmd) < 3);
if (suggestion) {
logger.log(`\n Did you mean ${suggestion}?`);
consoleLogger.info(`\n Did you mean ${suggestion}?`);
}
process.exit(1);
});

49
lib/cli/src/start.ts Normal file
View File

@ -0,0 +1,49 @@
import dedent from 'ts-dedent';
import { logger, instance as npmLog } from '@storybook/node-logger';
import { buildDevStandalone } from '@storybook/core-server';
import { cache } from '@storybook/core-common';
export const start = async (cliOptions: any) => {
console.log({ cliOptions });
try {
await buildDevStandalone({
...cliOptions,
configDir: cliOptions.configDir || './.storybook',
configType: 'DEVELOPMENT',
ignorePreview: !!cliOptions.previewUrl && !cliOptions.forceBuildPreview,
docsMode: !!cliOptions.docs,
cache,
});
} catch (error) {
// this is a weird bugfix, somehow 'node-pre-gyp' is polluting the npmLog header
npmLog.heading = '';
if (error instanceof Error) {
if ((error as any).error) {
logger.error((error as any).error);
} else if ((error as any).stats && (error as any).stats.compilation.errors) {
(error as any).stats.compilation.errors.forEach((e: any) => logger.plain(e));
} else {
logger.error(error as any);
}
} else if (error.compilation?.errors) {
error.compilation.errors.forEach((e: any) => logger.plain(e));
}
logger.line();
logger.warn(
error.close
? dedent`
FATAL broken build!, will close the process,
Fix the error below and restart storybook.
`
: dedent`
Broken build, fix the error above.
You may need to refresh the browser.
`
);
logger.line();
process.exit(1);
}
};

16
lib/cli/src/utils.ts Normal file
View File

@ -0,0 +1,16 @@
export function parseList(str: string): string[] {
return str
.split(',')
.map((item) => item.trim())
.filter((item) => item.length > 0);
}
export function getEnvConfig(program: Record<string, any>, configEnv: Record<string, any>): void {
Object.keys(configEnv).forEach((fieldName) => {
const envVarName = configEnv[fieldName];
const envVarValue = process.env[envVarName];
if (envVarValue) {
program[fieldName] = envVarValue; // eslint-disable-line
}
});
}

1
yarn.lock
View File

@ -7145,6 +7145,7 @@ __metadata:
"@storybook/client-api": 6.5.0-alpha.57
"@storybook/codemod": 6.5.0-alpha.57
"@storybook/core-common": 6.5.0-alpha.57
"@storybook/core-server": 6.5.0-alpha.57
"@storybook/csf-tools": 6.5.0-alpha.57
"@storybook/node-logger": 6.5.0-alpha.57
"@storybook/semver": ^7.3.2