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

Same for polymer + fix polymer leftovers

Browse Source
This commit is contained in:
igor 2018-02-07 16:31:29 +02:00
parent 62176c849b
commit 1907caadfe
9 changed files with 38 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/polymer/package.json
View File

@ -76,12 +76,11 @@
"serve-favicon": "^2.4.5",
"shelljs": "^0.8.1",
"style-loader": "^0.20.1",
"uglifyjs-webpack-plugin": "^1.1.7",
"url-loader": "^0.6.2",
"util-deprecate": "^1.0.2",
"uuid": "^3.2.1",
"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.20.0"
"webpack": "^3.6.0"
},
"devDependencies": {
"babel-cli": "^6.26.0",

93
app/polymer/src/server/build.js
View File

@ -1,93 +1,12 @@
import '@storybook/core/env';
import webpack from 'webpack';
import program from 'commander';
import { buildStatic } from '@storybook/core/server';
import path from 'path';
import fs from 'fs';
import chalk from 'chalk';
import shelljs from 'shelljs';
import { logger } from '@storybook/node-logger';
import packageJson from '../../package.json';
import getBaseConfig from './config/webpack.config.prod';
import loadConfig from './config';
import { parseList, getEnvConfig } from './utils';
process.env.NODE_ENV = process.env.NODE_ENV || 'production';
program
.version(packageJson.version)
.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('-w, --watch', 'Enable watch mode')
.option('-d, --db-path [db-file]', 'DEPRECATED!')
.option('--enable-db', 'DEPRECATED!')
.parse(process.argv);
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}\n`));
if (program.enableDb || program.dbPath) {
logger.error(
[
'Error: the experimental local database addon is no longer bundled with',
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
'from the command or npm script and try again.',
].join(' ')
);
process.exit(1);
}
// 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',
buildStatic({
packageJson,
getBaseConfig,
loadConfig,
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
});
const configDir = program.configDir || './.storybook';
const outputDir = program.outputDir || './storybook-static';
// create output directory if not exists
shelljs.mkdir('-p', path.resolve(outputDir));
// clear the static dir
shelljs.rm('-rf', path.resolve(outputDir, 'static'));
shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
// Build the webpack configuration using the `baseConfig`
// custom `.babelrc` file and `webpack.config.js` files
// NOTE changes to env should be done before calling `getBaseConfig`
const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
config.output.path = path.resolve(outputDir);
// copy all static files
if (program.staticDir) {
program.staticDir.forEach(dir => {
if (!fs.existsSync(dir)) {
logger.error(`Error: no such directory to load static files: ${dir}`);
process.exit(-1);
}
logger.log(`=> Copying static files from: ${dir}`);
shelljs.cp('-r', `${dir}/*`, outputDir);
});
}
// compile all resources with webpack and write them to the disk.
logger.info('Building storybook ...');
const webpackCb = (err, stats) => {
if (err || stats.hasErrors()) {
logger.error('Failed to build the storybook');
// eslint-disable-next-line no-unused-expressions
err && logger.error(err.message);
// eslint-disable-next-line no-unused-expressions
stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
process.exitCode = 1;
}
logger.info('Building storybook completed.');
};
const compiler = webpack(config);
if (program.watch) {
compiler.watch({}, webpackCb);
} else {
compiler.run(webpackCb);
}

2
app/polymer/src/server/config/utils.js
View File

@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
'process.env': env,
};
}
export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';

15
app/polymer/src/server/config/webpack.config.js
View File

@ -8,19 +8,12 @@ import CopyWebpackPlugin from 'copy-webpack-plugin';
import { managerPath } from '@storybook/core/client';
import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
import {
getConfigDir,
includePaths,
excludePaths,
nodeModulesPaths,
loadEnv,
nodePaths,
} from './utils';
import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
import babelLoaderConfig from './babel';
import { version } from '../../../package.json';
export default function() {
export default function(configDir) {
const config = {
devtool: 'cheap-module-source-map',
entry: {
@ -42,7 +35,7 @@ export default function() {
filename: 'index.html',
chunks: ['manager'],
data: {
managerHead: getManagerHeadHtml(getConfigDir()),
managerHead: getManagerHeadHtml(configDir),
version,
},
template: require.resolve('../index.html.ejs'),
@ -51,7 +44,7 @@ export default function() {
filename: 'iframe.html',
excludeChunks: ['manager'],
data: {
previewHead: getPreviewHeadHtml(getConfigDir()),
previewHead: getPreviewHeadHtml(configDir),
},
template: require.resolve('../iframe.html.ejs'),
}),

28
app/polymer/src/server/config/webpack.config.prod.js
View File

@ -1,15 +1,16 @@
import webpack from 'webpack';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import Dotenv from 'dotenv-webpack';
import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';
import { managerPath } from '@storybook/core/client';
import babelLoaderConfig from './babel.prod';
import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
import { version } from '../../../package.json';
export default function() {
export default function(configDir) {
const entries = {
preview: [require.resolve('./polyfills'), require.resolve('./globals')],
manager: [require.resolve('./polyfills'), managerPath],
@ -34,7 +35,7 @@ export default function() {
filename: 'index.html',
chunks: ['manager'],
data: {
managerHead: getManagerHeadHtml(getConfigDir()),
managerHead: getManagerHeadHtml(configDir),
version,
},
template: require.resolve('../index.html.ejs'),
@ -43,7 +44,7 @@ export default function() {
filename: 'iframe.html',
excludeChunks: ['manager'],
data: {
previewHead: getPreviewHeadHtml(getConfigDir()),
previewHead: getPreviewHeadHtml(configDir),
},
template: require.resolve('../iframe.html.ejs'),
}),
@ -52,15 +53,18 @@ export default function() {
{ from: require.resolve('@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js') },
]),
new webpack.DefinePlugin(loadEnv({ production: true })),
new webpack.optimize.UglifyJsPlugin({
compress: {
screw_ie8: true,
new UglifyJsPlugin({
parallel: true,
uglifyOptions: {
ie8: false,
mangle: false,
warnings: false,
},
mangle: false,
output: {
comments: false,
screw_ie8: true,
compress: {
keep_fnames: true,
},
output: {
comments: false,
},
},
}),
new Dotenv({ silent: true }),

172
app/polymer/src/server/index.js
View File

@ -1,168 +1,12 @@
import '@storybook/core/env';
import express from 'express';
import https from 'https';
import favicon from 'serve-favicon';
import program from 'commander';
import { buildDev } from '@storybook/core/server';
import path from 'path';
import fs from 'fs';
import chalk from 'chalk';
import shelljs from 'shelljs';
import { logger } from '@storybook/node-logger';
import storybook, { webpackValid } from './middleware';
import packageJson from '../../package.json';
import { parseList, getEnvConfig } from './utils';
import getBaseConfig from './config/webpack.config';
import loadConfig from './config';
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
program
.version(packageJson.version)
.option('-p, --port [number]', 'Port to run Storybook (Required)', 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')
.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('-d, --db-path [db-file]', 'DEPRECATED!')
.option('--enable-db', 'DEPRECATED!')
.parse(process.argv);
logger.info(chalk.bold(`${packageJson.name} v${packageJson.version}`) + chalk.reset('\n'));
if (program.enableDb || program.dbPath) {
logger.error(
[
'Error: the experimental local database addon is no longer bundled with',
'react-storybook. Please remove these flags (-d,--db-path,--enable-db)',
'from the command or npm script and try again.',
].join(' ')
);
process.exit(1);
}
// 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',
buildDev({
packageJson,
getBaseConfig,
loadConfig,
defaultFavIcon: path.resolve(__dirname, 'public/favicon.ico'),
});
if (!program.port) {
logger.error('Error: port to run Storybook is required!\n');
program.help();
process.exit(-1);
}
// Used with `app.listen` below
const listenAddr = [program.port];
if (program.host) {
listenAddr.push(program.host);
}
const app = express();
let server = app;
if (program.https) {
if (!program.sslCert) {
logger.error('Error: --ssl-cert is required with --https');
process.exit(-1);
}
if (!program.sslKey) {
logger.error('Error: --ssl-key is required with --https');
process.exit(-1);
}
const sslOptions = {
ca: (program.sslCa || []).map(ca => fs.readFileSync(ca, 'utf-8')),
cert: fs.readFileSync(program.sslCert, 'utf-8'),
key: fs.readFileSync(program.sslKey, 'utf-8'),
};
server = https.createServer(sslOptions, app);
}
let hasCustomFavicon = false;
if (program.staticDir) {
program.staticDir = parseList(program.staticDir);
program.staticDir.forEach(dir => {
const staticPath = path.resolve(dir);
if (!fs.existsSync(staticPath)) {
logger.error(`Error: no such directory to load static files: ${staticPath}`);
process.exit(-1);
}
logger.log(`=> Loading static files from: ${staticPath} .`);
app.use(express.static(staticPath, { index: false }));
const faviconPath = path.resolve(staticPath, 'favicon.ico');
if (fs.existsSync(faviconPath)) {
hasCustomFavicon = true;
app.use(favicon(faviconPath));
}
});
}
if (!hasCustomFavicon) {
app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
}
// Build the webpack configuration using the `baseConfig`
// custom `.babelrc` file and `webpack.config.js` files
const configDir = program.configDir || './.storybook';
// The repository info is sent to the storybook while running on
// development mode so it'll be easier for tools to integrate.
const exec = cmd => shelljs.exec(cmd, { silent: true }).stdout.trim();
process.env.STORYBOOK_GIT_ORIGIN =
process.env.STORYBOOK_GIT_ORIGIN || exec('git remote get-url origin');
process.env.STORYBOOK_GIT_BRANCH =
process.env.STORYBOOK_GIT_BRANCH || exec('git symbolic-ref HEAD --short');
// NOTE changes to env should be done before calling `getBaseConfig`
// `getBaseConfig` function which is called inside the middleware
app.use(storybook(configDir));
let serverResolve = () => {};
let serverReject = () => {};
const serverListening = new Promise((resolve, reject) => {
serverResolve = resolve;
serverReject = reject;
});
server.listen(...listenAddr, error => {
if (error) {
serverReject(error);
} else {
serverResolve();
}
});
Promise.all([webpackValid, serverListening])
.then(() => {
const proto = program.https ? 'https' : 'http';
const address = `${proto}://${program.host || 'localhost'}:${program.port}/`;
logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
if (program.smokeTest) {
process.exit(0);
}
})
.catch(error => {
if (error instanceof Error) {
logger.error(error);
}
if (program.smokeTest) {
process.exit(1);
}
});

64
app/polymer/src/server/middleware.js
View File

@ -1,64 +0,0 @@
import { Router } from 'express';
import webpack from 'webpack';
import path from 'path';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import getBaseConfig from './config/webpack.config';
import loadConfig from './config';
import { getMiddleware } from './utils';
let webpackResolve = () => {};
let webpackReject = () => {};
export const webpackValid = new Promise((resolve, reject) => {
webpackResolve = resolve;
webpackReject = reject;
});
export default function(configDir) {
// Build the webpack configuration using the `getBaseConfig`
// custom `.babelrc` file and `webpack.config.js` files
const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
const middlewareFn = getMiddleware(configDir);
// remove the leading '/'
let { publicPath } = config.output;
if (publicPath[0] === '/') {
publicPath = publicPath.slice(1);
}
const compiler = webpack(config);
const devMiddlewareOptions = {
noInfo: true,
publicPath: config.output.publicPath,
watchOptions: config.watchOptions || {},
...config.devServer,
};
const router = new Router();
const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, devMiddlewareOptions);
router.use(webpackDevMiddlewareInstance);
router.use(webpackHotMiddleware(compiler));
// custom middleware
middlewareFn(router);
webpackDevMiddlewareInstance.waitUntilValid(stats => {
router.get('/', (req, res) => {
res.set('Content-Type', 'text/html');
res.sendFile(path.join(`${__dirname}/public/index.html`));
});
router.get('/iframe.html', (req, res) => {
res.set('Content-Type', 'text/html');
res.sendFile(path.join(`${__dirname}/public/iframe.html`));
});
if (stats.toJson().errors.length) {
webpackReject(stats);
} else {
webpackResolve(stats);
}
});
return router;
}

26
app/polymer/src/server/utils.js
View File

@ -5,10 +5,6 @@ import deprecate from 'util-deprecate';
const fallbackHeadUsage = deprecate(() => {},
'Usage of head.html has been deprecated. Please rename head.html to preview-head.html');
export function parseList(str) {
return str.split(',');
}
export function getPreviewHeadHtml(configDirPath) {
const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
@ -32,25 +28,3 @@ export function getManagerHeadHtml(configDirPath) {
return scriptHtml;
}
export function getEnvConfig(program, configEnv) {
Object.keys(configEnv).forEach(fieldName => {
const envVarName = configEnv[fieldName];
const envVarValue = process.env[envVarName];
if (envVarValue) {
program[fieldName] = envVarValue; // eslint-disable-line
}
});
}
export function getMiddleware(configDir) {
const middlewarePath = path.resolve(configDir, 'middleware.js');
if (fs.existsSync(middlewarePath)) {
let middlewareModule = require(middlewarePath); // eslint-disable-line
if (middlewareModule.__esModule) { // eslint-disable-line
middlewareModule = middlewareModule.default;
}
return middlewareModule;
}
return () => {};
}

4
yarn.lock
View File

@ -15513,7 +15513,7 @@ webpack-core@^0.6.8:
source-list-map "~0.1.7"
source-map "~0.4.1"
webpack-dev-middleware@1.12.2, webpack-dev-middleware@^1.10.2, webpack-dev-middleware@^1.11.0, webpack-dev-middleware@^1.12.0, webpack-dev-middleware@^1.12.2, webpack-dev-middleware@~1.12.0:
webpack-dev-middleware@1.12.2, webpack-dev-middleware@^1.11.0, webpack-dev-middleware@^1.12.0, webpack-dev-middleware@^1.12.2, webpack-dev-middleware@~1.12.0:
version "1.12.2"
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-1.12.2.tgz#f8fc1120ce3b4fc5680ceecb43d777966b21105e"
dependencies:
@ -15619,7 +15619,7 @@ webpack-dev-server@~2.11.0:
webpack-dev-middleware "1.12.2"
yargs "6.6.0"
webpack-hot-middleware@^2.18.0, webpack-hot-middleware@^2.20.0, webpack-hot-middleware@^2.21.0:
webpack-hot-middleware@^2.20.0, webpack-hot-middleware@^2.21.0:
version "2.21.0"
resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.21.0.tgz#7b3c113a7a4b301c91e0749573c7aab28b414b52"
dependencies: