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

Merge pull request #15969 from oscard0m/add-static-dirs-option

Browse Source 
Core: Add 'staticDirs' config option
This commit is contained in:
Michael Shilman 2021-11-04 18:21:34 +08:00 committed by GitHub
commit b1d9b8b71e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
34 changed files with 509 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
MIGRATION.md
View File

@ -15,6 +15,8 @@
- [Babel mode v7](#babel-mode-v7)
- [Loader behavior with args changes](#loader-behavior-with-args-changes)
- [Angular component parameter removed](#angular-component-parameter-removed)
- [6.4 deprecations](#64-deprecations)
- [Deprecated --static-dir CLI flag](#deprecated---static-dir-cli-flag)
- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
- [Webpack 5](#webpack-5)
- [Fixing hoisting issues](#fixing-hoisting-issues)
@ -436,6 +438,29 @@ export const MyStory = () => ({ component: MyComponent, ... })
[More discussion here.](https://github.com/storybookjs/storybook/pull/16010#issuecomment-917378595)
### 6.4 deprecations
#### Deprecated --static-dir CLI flag
In 6.4 we've replaced the `--static-dir` CLI flag with the the `staticDirs` field in `.storybook/main.js`. Note that the CLI directories are relative to the current working directory, whereas the `staticDirs` are relative to the location of `main.js`.
Before:
```sh
start-storybook --static-dir ./public,./static,./foo/assets:/assets
```
After:
```js
// .storybook/main.js
module.exports = {
staticDirs: ['../public', '../static', { from: '../foo/assets', to: '/assets' }],
};
```
The `--static-dir` flag has been deprecated and will be removed in Storybook 7.0.
## From version 6.2.x to 6.3.0
### Webpack 5
@ -594,7 +619,7 @@ export const Basic = () => ({
});
```
The new convention is consistent with how other frameworks and addons work in Storybook. The old way will be supported until 7.0. For a full discussion see https://github.com/storybookjs/storybook/issues/8673.
The new convention is consistent with how other frameworks and addons work in Storybook. The old way will be supported until 7.0. For a full discussion see <https://github.com/storybookjs/storybook/issues/8673>.
#### New Angular renderer
@ -631,7 +656,7 @@ Instead of continuing to include PostCSS inside the core library, it has been mo
If you require PostCSS support, please install `@storybook/addon-postcss` in your project, add it to your list of addons inside `.storybook/main.js`, and configure a `postcss.config.js` file.
Further information is available at https://github.com/storybookjs/storybook/issues/12668 and https://github.com/storybookjs/storybook/pull/13669.
Further information is available at <https://github.com/storybookjs/storybook/issues/12668> and <https://github.com/storybookjs/storybook/pull/13669>.
If you're not using Postcss and you don't want to see the warning, you can disable it by adding the following to your `.storybook/main.js`:
@ -772,7 +797,7 @@ Starting in 6.1, `react` and `react-dom` are required peer dependencies of `@sto
Error: Cannot find module 'react-dom/package.json'
```
They were also peer dependencies in earlier versions, but due to the package structure they would be installed by Storybook if they were not required by the user's project. For more discussion: https://github.com/storybookjs/storybook/issues/13269
They were also peer dependencies in earlier versions, but due to the package structure they would be installed by Storybook if they were not required by the user's project. For more discussion: <https://github.com/storybookjs/storybook/issues/13269>
### 6.1 deprecations
@ -801,7 +826,7 @@ console.log(unboundStoryFn(context));
If you're not using loaders, `storyFn` will work as before. If you are, you'll need to use the new approach.
> NOTE: If you're using `@storybook/addon-docs`, this deprecation warning is triggered by the Docs tab in 6.1. It's safe to ignore and we will be providing a proper fix in a future release. You can track the issue at https://github.com/storybookjs/storybook/issues/13074.
> NOTE: If you're using `@storybook/addon-docs`, this deprecation warning is triggered by the Docs tab in 6.1. It's safe to ignore and we will be providing a proper fix in a future release. You can track the issue at <https://github.com/storybookjs/storybook/issues/13074>.
#### Deprecated onBeforeRender
@ -2271,16 +2296,16 @@ The `@storybook/react-native` had built-in addons (`addon-actions` and `addon-li
### Storyshots Changes
1. `imageSnapshot` test function was extracted from `addon-storyshots`
and moved to a new package - `addon-storyshots-puppeteer` that now will
be dependant on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
2. `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter`
class that now can be overridden for a custom implementation of the
snapshot-name generation. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)
3. Storybook that was configured with Webpack's `require.context()` feature
will need to add a babel plugin to polyfill this functionality.
A possible plugin might be [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
[README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
1. `imageSnapshot` test function was extracted from `addon-storyshots`
and moved to a new package - `addon-storyshots-puppeteer` that now will
be dependant on puppeteer. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-puppeteer)
2. `getSnapshotFileName` export was replaced with the `Stories2SnapsConverter`
class that now can be overridden for a custom implementation of the
snapshot-name generation. [README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#stories2snapsconverter)
3. Storybook that was configured with Webpack's `require.context()` feature
will need to add a babel plugin to polyfill this functionality.
A possible plugin might be [babel-plugin-require-context-hook](https://github.com/smrq/babel-plugin-require-context-hook).
[README](https://github.com/storybookjs/storybook/tree/master/addons/storyshots/storyshots-core#configure-jest-to-work-with-webpacks-requirecontext)
### Webpack 4
@ -2291,9 +2316,11 @@ Storybook now uses webpack 4. If you have a [custom webpack config](https://stor
Storybook now uses Babel 7. There's a couple of cases when it can break with your app:
- If you aren't using Babel yourself, and don't have .babelrc, install following dependencies:
```
npm i -D @babel/core babel-loader@next
```
- If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7` and that you have a `.babelrc` in your project directory.
### Create-react-app
@ -2544,11 +2571,14 @@ If you **are** using these addons, it takes two steps to migrate:
- add the addons you use to your `package.json`.
- update your code:
change `addons.js` like so:
```js
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
```
change `x.story.js` like so:
```js
import React from 'react';
import { storiesOf } from '@storybook/react';

28
docs/api/cli-options.md
View File

@ -18,7 +18,7 @@ Usage: start-storybook [options]
| -V, --version | Output the version number | `start-storybook -V` |
| -p, --port [number] | Port to run Storybook | `start-storybook -p 9009` |
| -h, --host [string] | Host to run Storybook | `start-storybook -h my-host.com` |
| -s, --static-dir `<dir-names>` | Directory where to load static files from, comma-separated list | `start-storybook -s public` |
| -s, --static-dir `<dir-names>` | **[DEPRECATED]** Directory where to load static files from, comma-separated list | `start-storybook -s public` |
| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `start-storybook -c .storybook` |
| --https | Serve Storybook over HTTPS. Note: You must provide your own certificate information. | `start-storybook --https` |
| --ssl-ca `<ca>` | Provide an SSL certificate authority. (Optional with --https, required if using a self-signed certificate) | `start-storybook --ssl-ca my-certificate` |
@ -26,7 +26,7 @@ Usage: start-storybook [options]
| --ssl-key `<key>` | Provide an SSL key. (Required with --https) | `start-storybook --ssl-key my-ssl-key` |
| --smoke-test | Exit after successful start | `start-storybook --smoke-test` |
| --ci | CI mode (skip interactive prompts, don't open browser) | `start-storybook --ci` |
| --no-open | Do not open Storybook automatically in the browser | `start-storybook --no-open` |
| --no-open | Do not open Storybook automatically in the browser | `start-storybook --no-open` |
| --quiet | Suppress verbose build output | `start-storybook --quiet` |
| --no-dll | Do not use dll reference (no-op) | `start-storybook --no-dll` |
| --debug-webpack | Display final webpack configurations for debugging purposes | `start-storybook --debug-webpack` |
@ -44,19 +44,19 @@ Usage: start-storybook [options]
Usage: build-storybook [options]
```
| Options | Description | Example |
| ---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------- |
| -h, --help | Output usage information | `build-storybook --help` |
| -V, --version | Output the version number | `build-storybook -V` |
| -s, --static-dir `<dir-names>` | Directory where to load static files from, comma-separated list | `build-storybook -s public` |
| -o, --output-dir [dir-name] | Directory where to store built files | `build-storybook -o /my-deployed-storybook` |
| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `build-storybook -c .storybook` |
| --loglevel [level] | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent] | `build-storybook --loglevel warn` |
| --quiet | Suppress verbose build output | `build-storybook --quiet` |
| --no-dll | Do not use dll reference (no-op) | `build-storybook --no-dll` |
| --debug-webpack | Display final webpack configurations for debugging purposes | `build-storybook --debug-webpack` |
| Options | Description | Example |
| ---------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------- |
| -h, --help | Output usage information | `build-storybook --help` |
| -V, --version | Output the version number | `build-storybook -V` |
| -s, --static-dir `<dir-names>` | **[DEPRECATED]** Directory where to load static files from, comma-separated list | `build-storybook -s public` |
| -o, --output-dir [dir-name] | Directory where to store built files | `build-storybook -o /my-deployed-storybook` |
| -c, --config-dir [dir-name] | Directory where to load Storybook configurations from | `build-storybook -c .storybook` |
| --loglevel [level] | Controls level of logging during build. Can be one of: [silly, verbose, info (default), warn, error, silent] | `build-storybook --loglevel warn` |
| --quiet | Suppress verbose build output | `build-storybook --quiet` |
| --no-dll | Do not use dll reference (no-op) | `build-storybook --no-dll` |
| --debug-webpack | Display final webpack configurations for debugging purposes | `build-storybook --debug-webpack` |
| `--webpack-stats-json <directory>` | Write Webpack Stats JSON to disk | `build-storybook --webpack-stats-json /my-storybook/webpack-stats` |
| --docs | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs` |
| --docs | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)) | `build-storybook --docs` |
<div class="aside">
💡 <strong>NOTE</strong>: If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, <code>npm run build-storybook -- -o ./path/to/build</code>.

52
docs/configure/images-and-assets.md
View File

@ -30,27 +30,27 @@ Afterwards you can use any asset in your stories:
<!-- prettier-ignore-end -->
### Serving static files via Storybook
### Serving static files via Storybook Configuration
We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. This technique is recommended for assets that your components often use like logos, fonts, and icons.
Configure a directory (or a list of directories) where your assets live when starting Storybook. Use the`-s` flag in your npm script like so:
Configure a directory (or a list of directories) where your assets live in your Storybook configuration. Use the `staticDirs` property in your `main.js` or `main.ts` configuration file like so:
```json
```js
{
"scripts": {
"start-storybook": "start-storybook -s ./public -p 9001"
}
...
staticDirs: ['./public'];
...
}
```
Or when building your Storybook with `build-storybook`:
You can map your local static directories to a different path like this:
```json
```js
{
"scripts": {
"build-storybook": "build-storybook -s public"
}
...
staticDirs: [{ from: './public', to: '/assets' }];
...
}
```
@ -76,23 +76,33 @@ Here `./public` is your static directory. Now use it in a component or story lik
You can also pass a list of directories separated by commas without spaces instead of a single directory.
```json
```js
{
"scripts": {
"start-storybook": "start-storybook -s ./public,./static -p 9001"
}
...
staticDirs: ['./public', './statics'];
...
}
```
The same can be applied when you're building your Storybook.
```json
Or you can map each of them to different paths:
You can map your local static directories to a different path like this:
```js
{
"scripts": {
"build-storybook": "build-storybook -s ./public,./static -p 9001"
}
...
staticDirs: [
{ from: './public', to: '/assets' },
{ from: './statics', to: '/resources' }
];
...
}
```
### **[⚠️ Deprecated]** Serving static files via Storybook CLI
Using `--static-dir` or `-s` option with Storybook CLI is deprecated. It is recommended to use [Storybook static directory configuration option](#serving-static-files-via-storybook-configuration) instead.
### Reference assets from a CDN
Upload your files to an online CDN and reference them. In this example we’re using a placeholder image service.
@ -123,4 +133,4 @@ In this case, you need to have all your images and media files with relative pat
If you load static content via importing, this is automatic and you do not have to do anything.
If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.
If you are serving assets in a [static directory](#serving-static-files-via-storybook) along with your Storybook, then you need to use relative paths to load images or use the base element.

1
examples/angular-cli/.storybook/main.js
View File

@ -39,4 +39,5 @@ module.exports = {
url: 'https://storybookjs.netlify.app/cra-ts-essentials',
},
},
staticDirs: ['../src/assets'],
};

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

@ -5,12 +5,12 @@
"license": "MIT",
"scripts": {
"build": "ng build",
"build-storybook": "yarn storybook-prebuild && build-storybook -s src/assets",
"build-storybook": "yarn storybook-prebuild && build-storybook",
"docs:json": "compodoc -p ./tsconfig.json -e json -d .",
"e2e": "ng e2e",
"ng": "ng",
"start": "ng serve",
"storybook": "yarn storybook-prebuild && start-storybook -p 9008 -s src/assets --no-manager-cache",
"storybook": "yarn storybook-prebuild && start-storybook -p 9008 --no-manager-cache",
"storybook-prebuild": "yarn test:generate-output && yarn docs:json",
"test": "jest",
"test:coverage": "jest --coverage",

1
examples/cra-kitchen-sink/.storybook/main.js
View File

@ -33,4 +33,5 @@ module.exports = {
core: {
builder: 'webpack4',
},
staticDirs: ['../public'],
};

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

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

1
examples/cra-react15/.storybook/main.js
View File

@ -21,4 +21,5 @@ module.exports = {
core: {
builder: 'webpack4',
},
staticDirs: ['../public'],
};

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

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

1
examples/cra-ts-essentials/.storybook/main.js
View File

@ -25,4 +25,5 @@ module.exports = {
core: {
builder: 'webpack4',
},
staticDirs: ['../public'],
};

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

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

1
examples/cra-ts-kitchen-sink/.storybook/main.ts
View File

@ -29,4 +29,5 @@ module.exports = {
core: {
builder: 'webpack4',
},
staticDirs: ['../public'],
};

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 -s public",
"build-storybook": "build-storybook",
"eject": "react-scripts eject",
"start": "react-scripts start",
"storybook": "start-storybook -p 9009 -s public --no-manager-cache",
"storybook": "start-storybook -p 9009 --no-manager-cache",
"test": "react-scripts test"
},
"browserslist": {

1
examples/ember-cli/.storybook/main.js
View File

@ -29,4 +29,5 @@ module.exports = {
core: {
builder: 'webpack4',
},
staticDirs: ['../ember-output'],
};

7
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 -s ember-output",
"build-storybook": "yarn storybook-prebuild && build-storybook",
"dev": "ember serve",
"storybook": "yarn build && start-storybook -p 9009 -s ember-output --no-manager-cache",
"storybook": "yarn build && start-storybook -p 9009 --no-manager-cache",
"storybook-prebuild": "yarn build && shx cp -r public/* ember-output",
"storybook:dev": "yarn dev & start-storybook -p 9009 -s ember-output"
"storybook:dev": "yarn dev & start-storybook -p 9009"
},
"dependencies": {
"ember-named-blocks-polyfill": "^0.2.3",
@ -45,6 +45,7 @@
"ember-resolver": "^7.0.0",
"ember-source": "~3.24.0",
"loader.js": "^4.7.0",
"shx": "^0.3.2",
"webpack": "4",
"webpack-cli": "^4.2.0"
},

5
examples/official-storybook/main.ts
View File

@ -40,6 +40,11 @@ const config: StorybookConfig = {
modernInlineRender: true,
interactionsDebugger: true,
},
staticDirs: [
'./statics/public',
{ from: './statics/examples/example1', to: '/example1' },
{ from: './statics/examples/example2', to: '/example2' },
],
};
module.exports = config;

1
examples/official-storybook/statics/examples/example1/example1.txt Normal file
View File

@ -0,0 +1 @@
example1!

1
examples/official-storybook/statics/examples/example2/example2.txt Normal file
View File

@ -0,0 +1 @@
example2!

1
examples/official-storybook/statics/public/public.txt Normal file
View File

@ -0,0 +1 @@
public!

1
examples/preact-kitchen-sink/.storybook/main.js
View File

@ -24,4 +24,5 @@ module.exports = {
core: {
builder: 'webpack4',
},
staticDirs: ['../public'],
};

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 -s public",
"build-storybook": "build-storybook",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"storybook": "start-storybook -p 9009 -s public --no-manager-cache"
"storybook": "start-storybook -p 9009 --no-manager-cache"
},
"dependencies": {
"global": "^4.4.0",

1
examples/svelte-kitchen-sink/.storybook/main.js
View File

@ -36,4 +36,5 @@ module.exports = {
core: {
builder: 'webpack4',
},
staticDirs: ['../public'],
};

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

@ -3,8 +3,8 @@
"version": "6.4.0-beta.26",
"private": true,
"scripts": {
"build-storybook": "build-storybook -s public",
"storybook": "start-storybook -p 9009 -s public --no-manager-cache"
"build-storybook": "build-storybook",
"storybook": "start-storybook -p 9009 --no-manager-cache"
},
"dependencies": {
"global": "^4.4.0"

1
examples/vue-kitchen-sink/.storybook/main.js
View File

@ -15,4 +15,5 @@ module.exports = {
core: {
builder: 'webpack4',
},
staticDirs: ['../public'],
};

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 -s public",
"build-storybook": "build-storybook",
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"storybook": "start-storybook -p 9009 -s public --no-manager-cache"
"storybook": "start-storybook -p 9009 --no-manager-cache"
},
"dependencies": {
"vue": "^2.6.12",

14
lib/core-common/src/types.ts
View File

@ -27,6 +27,11 @@ export interface CoreConfig {
channelOptions?: Partial<TelejsonOptions>;
}
interface DirectoryMapping {
from: string;
to: string;
}
export interface Presets {
apply(
extension: 'typescript',
@ -128,6 +133,9 @@ export interface CLIOptions {
previewUrl?: string;
forceBuildPreview?: boolean;
host?: string;
/**
* @deprecated Use 'staticDirs' Storybook Configuration option instead
*/
staticDir?: string[];
configDir?: string;
https?: boolean;
@ -275,6 +283,12 @@ export interface StorybookConfig {
*/
addons?: Preset[];
core?: CoreConfig;
/**
* Sets a list of directories of static files to be loaded by Storybook server
*
* @example `['./public']` or `[{from: './public', 'to': '/assets'}]`
*/
staticDirs?: (DirectoryMapping | string)[];
logLevel?: string;
features?: {
/**

31
lib/core-common/src/utils/normalize-stories.ts
View File

@ -38,6 +38,22 @@ const isDirectory = (configDir: string, entry: string) => {
}
};
export const getDirectoryFromWorkingDir = ({
configDir,
workingDir,
directory,
}: NormalizeOptions & { directory: string }) => {
const directoryFromConfig = path.resolve(configDir, directory);
let directoryFromWorking = path.relative(workingDir, directoryFromConfig);
// relative('/foo', '/foo/src') => 'src'
// but we want `./src` to match importPaths
if (!directoryFromWorking.startsWith('.')) {
directoryFromWorking = `.${path.sep}${directoryFromWorking}`;
}
return directoryFromWorking;
};
export const normalizeStoriesEntry = (
entry: StoriesEntry,
{ configDir, workingDir }: NormalizeOptions
@ -90,15 +106,14 @@ export const normalizeStoriesEntry = (
// At this stage `directory` is relative to `main.js` (the config dir)
// We want to work relative to the working dir, so we transform it here.
const { directory: directoryRelativeToConfig } = specifierWithoutMatcher;
const absoluteDirectory = path.resolve(configDir, directoryRelativeToConfig);
let directory = slash(path.relative(workingDir, absoluteDirectory));
// relative('/foo', '/foo/src') => 'src'
// but we want `./src` to match importPaths
if (!directory.startsWith('.')) {
directory = `./${directory}`;
}
directory = directory.replace(/\/$/, '');
const directory = slash(
getDirectoryFromWorkingDir({
configDir,
workingDir,
directory: directoryRelativeToConfig,
})
).replace(/\/$/, '');
// Now make the importFn matcher.
const importPathMatcher = globToRegexp(`${directory}/${files}`);

224
lib/core-server/src/__snapshots__/vue-3-cli_manager-prod
View File

@ -223,3 +223,227 @@ Object {
],
}
`;
exports[`vue-3-cli preview dev mode 1`] = `
Object {
"entry": Array [
"ROOT/lib/core-client/dist/esm/globals/polyfills.js",
"ROOT/lib/core-client/dist/esm/manager/index.js",
"ROOT/addons/links/dist/esm/register.js",
"ROOT/addons/docs/dist/esm/register.js",
"ROOT/addons/controls/dist/esm/register.js",
"ROOT/addons/actions/dist/esm/register.js",
"ROOT/addons/backgrounds/dist/esm/register.js",
"ROOT/addons/viewport/dist/esm/register.js",
"ROOT/addons/toolbars/dist/esm/register.js",
"ROOT/addons/measure/dist/esm/register.js",
"ROOT/addons/outline/dist/esm/register.js",
"ROOT/addons/interactions/dist/esm/register.js",
],
"keys": Array [
"name",
"mode",
"bail",
"devtool",
"entry",
"output",
"watchOptions",
"plugins",
"module",
"resolve",
"resolveLoader",
"recordsPath",
"performance",
"optimization",
],
"module": Object {
"rules": Array [
Object {
"exclude": Array [
"NODE_MODULES/",
"/dist/",
],
"include": Array [
"ROOT",
],
"test": "/\\\\.(mjs|tsx?|jsx?)$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"babelrc": false,
"configFile": false,
"plugins": Array [
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
Array [
"NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
Object {
"legacy": true,
},
],
Array [
"NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
Object {
"loose": true,
},
],
Array [
"NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
Object {
"loose": true,
},
],
"NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
"NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
Array [
"NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
Object {
"loose": true,
"useBuiltIns": true,
},
],
"NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
"NODE_MODULES/babel-plugin-macros/dist/index.js",
"NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
"NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
Array [
"NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
Object {
"absoluteImports": "NODE_MODULES/core-js/index.js",
"method": "usage-global",
"version": "*",
},
],
"NODE_MODULES/@babel/plugin-transform-template-literals/lib/index.js",
],
"presets": Array [
Array [
"NODE_MODULES/@babel/preset-env/lib/index.js",
Object {
"loose": true,
"shippedProposals": true,
},
],
"NODE_MODULES/@babel/preset-typescript/lib/index.js",
"NODE_MODULES/@babel/preset-react/lib/index.js",
],
"sourceType": "unambiguous",
},
},
],
},
Object {
"include": [Function],
"test": "/\\\\.js$/",
"use": Array [
Object {
"loader": "NODE_MODULES/babel-loader/lib/index.js",
"options": Object {
"plugins": Array [
"NODE_MODULES/@babel/plugin-transform-shorthand-properties/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-block-scoping/lib/index.js",
Array [
"NODE_MODULES/@babel/plugin-proposal-decorators/lib/index.js",
Object {
"legacy": true,
},
],
Array [
"NODE_MODULES/@babel/plugin-proposal-class-properties/lib/index.js",
Object {
"loose": true,
},
],
Array [
"NODE_MODULES/@babel/plugin-proposal-private-methods/lib/index.js",
Object {
"loose": true,
},
],
"NODE_MODULES/@babel/plugin-proposal-export-default-from/lib/index.js",
"NODE_MODULES/@babel/plugin-syntax-dynamic-import/lib/index.js",
Array [
"NODE_MODULES/@babel/plugin-proposal-object-rest-spread/lib/index.js",
Object {
"loose": true,
"useBuiltIns": true,
},
],
"NODE_MODULES/@babel/plugin-transform-classes/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-arrow-functions/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-parameters/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-destructuring/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-spread/lib/index.js",
"NODE_MODULES/@babel/plugin-transform-for-of/lib/index.js",
"NODE_MODULES/babel-plugin-macros/dist/index.js",
"NODE_MODULES/@babel/plugin-proposal-optional-chaining/lib/index.js",
"NODE_MODULES/@babel/plugin-proposal-nullish-coalescing-operator/lib/index.js",
Array [
"NODE_MODULES/babel-plugin-polyfill-corejs3/lib/index.js",
Object {
"absoluteImports": "NODE_MODULES/core-js/index.js",
"method": "usage-global",
"version": "*",
},
],
],
"presets": Array [
Array [
"NODE_MODULES/@babel/preset-env/lib/index.js",
Object {
"loose": true,
"modules": false,
"shippedProposals": true,
"targets": "defaults",
},
],
"NODE_MODULES/@babel/preset-react/lib/index.js",
],
"sourceType": "unambiguous",
},
},
],
},
Object {
"test": "/\\\\.css$/",
"use": Array [
"NODE_MODULES/style-loader/dist/cjs.js",
Object {
"loader": "NODE_MODULES/css-loader/dist/cjs.js",
"options": Object {
"importLoaders": 1,
},
},
],
},
Object {
"loader": "NODE_MODULES/file-loader/dist/cjs.js",
"options": Object {
"name": "static/media/[name].[contenthash:8].[ext]",
},
"test": "/\\\\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\\\\?.*)?$/",
},
Object {
"loader": "NODE_MODULES/url-loader/dist/cjs.js",
"options": Object {
"limit": 10000,
"name": "static/media/[name].[contenthash:8].[ext]",
},
"test": "/\\\\.(mp4|webm|wav|mp3|m4a|aac|oga)(\\\\?.*)?$/",
},
],
},
"plugins": Array [
"VirtualModulesPlugin",
"HtmlWebpackPlugin",
"CaseSensitivePathsPlugin",
"DefinePlugin",
],
}
`;

26
lib/core-server/src/build-static.ts
View File

@ -2,6 +2,7 @@ import chalk from 'chalk';
import cpy from 'cpy';
import fs from 'fs-extra';
import path from 'path';
import dedent from 'ts-dedent';
import { logger } from '@storybook/node-logger';
@ -20,7 +21,10 @@ import {
import { getProdCli } from './cli';
import { outputStats } from './utils/output-stats';
import { copyAllStaticFiles } from './utils/copy-all-static-files';
import {
copyAllStaticFiles,
copyAllStaticFilesRelativeToMain,
} from './utils/copy-all-static-files';
import { getPreviewBuilder } from './utils/get-preview-builder';
import { getManagerBuilder } from './utils/get-manager-builder';
import { extractStoriesJson } from './utils/stories-json';
@ -52,7 +56,6 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
await fs.emptyDir(options.outputDir);
await cpy(defaultFavIcon, options.outputDir);
await copyAllStaticFiles(options.staticDir, options.outputDir);
const previewBuilder: Builder<unknown, unknown> = await getPreviewBuilder(options.configDir);
const managerBuilder: Builder<unknown, unknown> = await getManagerBuilder(options.configDir);
@ -68,6 +71,25 @@ export async function buildStaticStandalone(options: CLIOptions & LoadOptions &
...options,
});
const staticDirs = await presets.apply<StorybookConfig['staticDirs']>('staticDirs');
if (staticDirs && options.staticDir) {
throw new Error(dedent`
Conflict when trying to read staticDirs:
* Storybook's configuration option: 'staticDirs'
* Storybook's CLI flag: '--staticDir' or '-s'
Choose one of them, but not both.
`);
}
if (staticDirs) {
await copyAllStaticFilesRelativeToMain(staticDirs, options.outputDir, options.configDir);
}
if (options.staticDir) {
await copyAllStaticFiles(options.staticDir, options.outputDir);
}
const features = await presets.apply<StorybookConfig['features']>('features');
if (features?.buildStoriesJson || features?.storyStoreV7) {
const directories = {

32
lib/core-server/src/cli/prod.ts
View File

@ -1,23 +1,25 @@
import program, { CommanderStatic } from 'commander';
import chalk from 'chalk';
import { logger } from '@storybook/node-logger';
import type { CLIOptions } from '@storybook/core-common';
import { parseList, getEnvConfig, checkDeprecatedFlags } from './utils';
export interface ProdCliOptions {
staticDir?: string[];
outputDir?: string;
configDir?: string;
quiet?: boolean;
loglevel?: string;
dll?: boolean;
docsDll?: boolean;
uiDll?: boolean;
debugWebpack?: boolean;
previewUrl?: string;
forceBuildPreview?: boolean;
docs?: boolean;
modern?: boolean;
}
export type ProdCliOptions = Pick<
CLIOptions,
| 'configDir'
| 'debugWebpack'
| 'dll'
| 'docs'
| 'docsDll'
| 'forceBuildPreview'
| 'loglevel'
| 'modern'
| 'outputDir'
| 'previewUrl'
| 'quiet'
| 'staticDir'
| 'uiDll'
>;
export function getProdCli(packageJson: {
version: string;

35
lib/core-server/src/cli/utils.ts
View File

@ -1,5 +1,7 @@
import deprecate from 'util-deprecate';
import dedent from 'ts-dedent';
import type { CLIOptions } from '@storybook/core-common';
import type { ProdCliOptions } from './prod';
export function parseList(str: string): string[] {
return str
@ -18,21 +20,36 @@ export function getEnvConfig(program: Record<string, any>, configEnv: Record<str
});
}
const warnDLLsDeprecated = deprecate(
() => {},
dedent`
const warnDeprecatedFlag = (message: string) => {
return deprecate(() => {}, dedent(message));
};
const warnDLLsDeprecated = warnDeprecatedFlag(
`
DLL-related CLI flags are deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-dll-flags
`
);
export function checkDeprecatedFlags(options: {
dll?: boolean;
uiDll?: boolean;
docsDll?: boolean;
}) {
if (!options.dll || options.uiDll || options.docsDll) {
const warnStaticDirDeprecated = warnDeprecatedFlag(
`
--static-dir CLI flag is deprecated, see:
https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-static-dir-flag
`
);
export function checkDeprecatedFlags({
dll,
uiDll,
docsDll,
staticDir,
}: CLIOptions | ProdCliOptions) {
if (!dll || uiDll || docsDll) {
warnDLLsDeprecated();
}
if (staticDir) {
warnStaticDirDeprecated();
}
}

26
lib/core-server/src/utils/copy-all-static-files.ts
View File

@ -2,6 +2,7 @@ import chalk from 'chalk';
import fs from 'fs-extra';
import path from 'path';
import { logger } from '@storybook/node-logger';
import { getDirectoryFromWorkingDir } from '@storybook/core-common';
import { parseStaticDir } from './server-statics';
export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDir: string) {
@ -28,3 +29,28 @@ export async function copyAllStaticFiles(staticDirs: any[] | undefined, outputDi
);
}
}
export async function copyAllStaticFilesRelativeToMain(
staticDirs: any[] | undefined,
outputDir: string,
configDir: string
) {
staticDirs.forEach(async (dir) => {
const staticDirAndTarget = typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`;
const { staticPath: from, targetEndpoint: to } = await parseStaticDir(
getDirectoryFromWorkingDir({
configDir,
workingDir: process.cwd(),
directory: staticDirAndTarget,
})
);
const targetPath = path.join(outputDir, to);
const skipPaths = ['index.html', 'iframe.html'].map((f) => path.join(targetPath, f));
logger.info(chalk`=> Copying static files: {cyan ${from}} at {cyan ${targetPath}}`);
await fs.copy(from, targetPath, {
dereference: true,
preserveTimestamps: true,
filter: (_, dest) => !skipPaths.includes(dest),
});
});
}

29
lib/core-server/src/utils/server-statics.ts
View File

@ -1,4 +1,6 @@
import { logger } from '@storybook/node-logger';
import type { Options, StorybookConfig } from '@storybook/core-common';
import { getDirectoryFromWorkingDir } from '@storybook/core-common';
import chalk from 'chalk';
import express from 'express';
import { pathExists } from 'fs-extra';
@ -9,8 +11,33 @@ import dedent from 'ts-dedent';
const defaultFavIcon = require.resolve('../public/favicon.ico');
export async function useStatics(router: any, options: { staticDir?: string[] }) {
export async function useStatics(router: any, options: Options) {
let hasCustomFavicon = false;
const staticDirs = await options.presets.apply<StorybookConfig['staticDirs']>('staticDirs', []);
if (staticDirs && options.staticDir) {
throw new Error(dedent`
Conflict when trying to read staticDirs:
* Storybook's configuration option: 'staticDirs'
* Storybook's CLI flag: '--staticDir' or '-s'
Choose one of them, but not both.
`);
}
staticDirs.forEach(async (dir) => {
const staticDirAndTarget = typeof dir === 'string' ? dir : `${dir.from}:${dir.to}`;
const { staticPath: from, targetEndpoint: to } = await parseStaticDir(
getDirectoryFromWorkingDir({
configDir: options.configDir,
workingDir: process.cwd(),
directory: staticDirAndTarget,
})
);
logger.info(chalk`=> Serving static files from {cyan ${from}} at {cyan ${to}}`);
router.use(to, express.static(from, { index: false }));
});
if (options.staticDir && options.staticDir.length > 0) {
await Promise.all(

1
yarn.lock
View File

@ -20745,6 +20745,7 @@ __metadata:
ember-source: ~3.24.0
ember-template-compiler: ^1.9.0-alpha
loader.js: ^4.7.0
shx: ^0.3.2
webpack: 4
webpack-cli: ^4.2.0
languageName: unknown