mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-05 06:41:17 +08:00
Merge pull request #19275 from storybookjs/tom/sb-628-properly-document-maintenance-scripts
Refactor bootstrap+sandbox into "task" framework
This commit is contained in:
Tom Coleman
GitHub
commit
839097048e
@ -85,26 +85,15 @@ jobs:
|
||||
- restore_cache:
|
||||
name: Restore Yarn cache
|
||||
keys:
|
||||
- build-yarn-2-cache-v3--{{ checksum "code/yarn.lock" }}
|
||||
- build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
|
||||
- run:
|
||||
name: Install dependencies
|
||||
name: Compile
|
||||
command: |
|
||||
cd code
|
||||
yarn install --immutable
|
||||
- run:
|
||||
name: Install script dependencies
|
||||
command: |
|
||||
cd scripts
|
||||
yarn install --immutable
|
||||
- run:
|
||||
name: Bootstrap
|
||||
command: |
|
||||
cd code
|
||||
yarn bootstrap --build
|
||||
yarn task --task compile --start-from=auto --no-link --debug
|
||||
git diff --exit-code
|
||||
- save_cache:
|
||||
name: Save Yarn cache
|
||||
key: build-yarn-2-cache-v3--{{ checksum "code/yarn.lock" }}
|
||||
key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
|
||||
paths:
|
||||
- ~/.yarn/berry/cache
|
||||
- persist_to_workspace:
|
||||
@ -324,14 +313,13 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Creating Sandboxes
|
||||
command: yarn task --task create --template $(yarn get-template ci create) --force --no-before --junit
|
||||
working_directory: code
|
||||
command: yarn task --task sandbox --template $(yarn get-template ci create) --no-link --start-from=never --junit
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
- sandbox
|
||||
- store_test_results:
|
||||
path: code/test-results
|
||||
path: test-results
|
||||
smoke-test-sandboxes:
|
||||
executor:
|
||||
class: medium+
|
||||
@ -344,10 +332,9 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Smoke Testing Sandboxes
|
||||
command: yarn task --task smoke-test --template $(yarn get-template ci smoke-test) --force --no-before --junit
|
||||
working_directory: code
|
||||
command: yarn task --task smoke-test --template $(yarn get-template ci smoke-test) --no-link --start-from=never --junit
|
||||
- store_test_results:
|
||||
path: code/test-results
|
||||
path: test-results
|
||||
build-sandboxes:
|
||||
executor:
|
||||
class: medium+
|
||||
@ -360,10 +347,9 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Building Sandboxes
|
||||
command: yarn task --task build --template $(yarn get-template ci build) --force --no-before --junit
|
||||
working_directory: code
|
||||
command: yarn task --task build --template $(yarn get-template ci build) --no-link --start-from=never --junit
|
||||
- store_test_results:
|
||||
path: code/test-results
|
||||
path: test-results
|
||||
- persist_to_workspace:
|
||||
root: .
|
||||
paths:
|
||||
@ -380,10 +366,9 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Running Test Runner
|
||||
command: yarn task --task test-runner --template $(yarn get-template ci test-runner) --force --no-before --junit
|
||||
working_directory: code
|
||||
command: yarn task --task test-runner --template $(yarn get-template ci test-runner) --no-link --start-from=never --junit
|
||||
- store_test_results:
|
||||
path: code/test-results
|
||||
path: test-results
|
||||
chromatic-sandboxes:
|
||||
executor:
|
||||
class: medium+
|
||||
@ -396,10 +381,9 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Running Chromatic
|
||||
command: yarn task --task chromatic --template $(yarn get-template ci chromatic) --force --no-before --junit
|
||||
working_directory: code
|
||||
command: yarn task --task chromatic --template $(yarn get-template ci chromatic) --no-link --start-from=never --junit
|
||||
- store_test_results:
|
||||
path: code/test-results
|
||||
path: test-results
|
||||
e2e-sandboxes:
|
||||
executor:
|
||||
class: medium+
|
||||
@ -412,10 +396,9 @@ jobs:
|
||||
at: .
|
||||
- run:
|
||||
name: Running E2E Tests
|
||||
command: yarn task --task e2e-tests --template $(yarn get-template ci e2e-tests) --force --no-before --junit
|
||||
working_directory: code
|
||||
command: yarn task --task e2e-tests --template $(yarn get-template ci e2e-tests) --no-link --start-from=never --junit
|
||||
- store_test_results:
|
||||
path: code/test-results
|
||||
path: test-results
|
||||
- store_artifacts: # this is where playwright puts more complex stuff
|
||||
path: code/playwright-results/
|
||||
destination: playwright
|
||||
|
||||
2
.github/workflows/generate-repros-next.yml
vendored
2
.github/workflows/generate-repros-next.yml
vendored
@ -28,7 +28,7 @@ jobs:
|
||||
- name: Install dependencies
|
||||
run: node ./scripts/check-dependencies.js
|
||||
- name: Bootstrap Storybook libraries
|
||||
run: yarn bootstrap --prep
|
||||
run: yarn task --task compile --start-from=auto --no-link
|
||||
working-directory: ./code
|
||||
- name: Generate repros
|
||||
run: yarn generate-repros-next --local-registry
|
||||
|
||||
11
.github/workflows/tests-unit.yml
vendored
11
.github/workflows/tests-unit.yml
vendored
@ -29,12 +29,7 @@ jobs:
|
||||
with:
|
||||
node-version: ${{ matrix.node_version }}
|
||||
cache: yarn
|
||||
- name: install, bootstrap
|
||||
run: |
|
||||
cd code
|
||||
yarn install --immutable
|
||||
yarn bootstrap --core
|
||||
- name: install and compile
|
||||
run: yarn task --task compile --start-from=auto
|
||||
- name: test
|
||||
run: |
|
||||
cd code
|
||||
yarn test --runInBand --ci
|
||||
run: yarn test --runInBand --ci
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@ -18,4 +18,4 @@ junit.xml
|
||||
!/**/.yarn/sdks
|
||||
!/**/.yarn/versions
|
||||
/**/.pnp.*
|
||||
/yarn.lock
|
||||
!/node_modules
|
||||
|
||||
783
.yarn/releases/yarn-3.2.3.cjs
generated
vendored
Executable file
783
.yarn/releases/yarn-3.2.3.cjs
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
3
.yarnrc.yml
Normal file
3
.yarnrc.yml
Normal file
@ -0,0 +1,3 @@
|
||||
nodeLinker: node-modules
|
||||
|
||||
yarnPath: .yarn/releases/yarn-3.2.3.cjs
|
||||
@ -2,17 +2,34 @@
|
||||
|
||||
- Ensure you have node version 14 installed (suggestion: v14.18.1).
|
||||
- Ensure if you are using Windows to use the Windows Subsystem for Linux (WSL).
|
||||
- Run `./bootstrap.sh` to install the dependencies, and get the repo ready to be developed on.
|
||||
- Run `yarn start` inside of the `code` directory to start the development server.
|
||||
- Run `yarn start` directory to run a basic test Storybook "sandbox".
|
||||
|
||||
# Generating reproductions
|
||||
The `yarn start` script will generate a React Vite TypeScript sandbox with a set of test stories inside it, as well as taking all steps required to get it running (building the various packages we need etc).
|
||||
|
||||
The monorepo has a script that generates Storybook reproductions based on configurations set in the `code/lib/cli/src/repro-templates.ts` file. This makes it possible to quickly bootstrap examples with and without Storybook, for given configurations (e.g. CRA, Angular, Vue, etc.)
|
||||
|
||||
To do so:
|
||||
- Check the `code/lib/cli/src/repro-templates.ts` if you want to see what will be generated
|
||||
- Run `./generate-repros.sh`
|
||||
- Check the result in the `repros` directory
|
||||
# Running against different sandbox templates
|
||||
|
||||
You can also pick a specific template to use as your sandbox by running `yarn task`, which will prompt you to make further choices about which template you want and which task you want to run.
|
||||
|
||||
# Making code changes
|
||||
|
||||
If you want to make code changes to Storybook packages while running a sandbox, you'll need to do the following:
|
||||
|
||||
1. In a second terminal run `yarn build --watch <package-1> <package-2>` in the `code/` directory. The package names is the bit after the `@storybook/` in the published package. For instance, to build the `@storybook/react @storybook/core-server @storybook/api @storybook/addon-docs` packages at the same time in watch mode:
|
||||
|
||||
```bash
|
||||
cd code
|
||||
yarn build --watch react core-server api addon-docs
|
||||
```
|
||||
|
||||
2. If you are running the sandbox in "linked" mode (the default), you should see the changes reflected on a refresh (you may need to restart it if changing server packages)
|
||||
|
||||
3. If you are running the sandbox in "unlinked" mode you'll need to re-run the sandbox from the `publish` step to see the changes:
|
||||
|
||||
```
|
||||
yarn task --task dev --template <your template> --start-from=publish
|
||||
```
|
||||
|
||||
|
||||
# Contributing to Storybook
|
||||
|
||||
|
||||
@ -183,9 +183,13 @@ Looking for a first issue to tackle?
|
||||
|
||||
Storybook is organized as a monorepo using [Lerna](https://lerna.js.org/). Useful scripts include:
|
||||
|
||||
#### `./bootstrap.sh`
|
||||
#### `yarn start`
|
||||
|
||||
> Installs package dependencies and links packages together - using lerna
|
||||
> Runs a sandbox template storybook with test stories
|
||||
|
||||
#### `yarn task`
|
||||
|
||||
> As above, but gives you options to customize the sandbox (e.g. selecting other frameworks)
|
||||
|
||||
#### `yarn lint`
|
||||
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
./scripts/check-dependencies.js && cd ./code && yarn bootstrap $1
|
||||
786
code/.yarn/releases/yarn-3.2.1.cjs
generated
vendored
786
code/.yarn/releases/yarn-3.2.1.cjs
generated
vendored
File diff suppressed because one or more lines are too long
783
code/.yarn/releases/yarn-3.2.3.cjs
generated
vendored
Executable file
783
code/.yarn/releases/yarn-3.2.3.cjs
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
@ -27,4 +27,4 @@ plugins:
|
||||
unsafeHttpWhitelist:
|
||||
- localhost
|
||||
|
||||
yarnPath: .yarn/releases/yarn-3.2.1.cjs
|
||||
yarnPath: .yarn/releases/yarn-3.2.3.cjs
|
||||
|
||||
@ -7,7 +7,7 @@ Portable documentation components for building design systems in Storybook.
|
||||
To bootstrap, in the monorepo root:
|
||||
|
||||
```sh
|
||||
yarn && yarn bootstrap --core
|
||||
yarn start
|
||||
```
|
||||
|
||||
To develop this package, in the monorepo root:
|
||||
|
||||
@ -53,7 +53,6 @@
|
||||
},
|
||||
"scripts": {
|
||||
"await-serve-storybooks": "wait-on http://localhost:8001",
|
||||
"bootstrap": "node ../scripts/bootstrap.js",
|
||||
"build": "NODE_ENV=production node ../scripts/build-package.js",
|
||||
"build-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node -r esm ../scripts/build-storybooks.js",
|
||||
"changelog": "pr-log --sloppy --cherry-pick",
|
||||
@ -64,7 +63,6 @@
|
||||
"danger": "danger",
|
||||
"generate-repros": "zx ../scripts/repros-generator/index.mjs",
|
||||
"generate-repros-next": "ts-node ../scripts/next-repro-generators/generate-repros.ts",
|
||||
"get-template": "ts-node ../scripts/get-template.ts",
|
||||
"github-release": "github-release-from-changelog",
|
||||
"linear-export": "ts-node --project=../scripts/tsconfig.json ../scripts/linear-export.ts",
|
||||
"lint": "yarn lint:js && yarn lint:md",
|
||||
@ -84,7 +82,6 @@
|
||||
"serve-storybooks": "http-server ./built-storybooks -p 8001",
|
||||
"smoketest-storybooks": "cross-env STORYBOOK_DISPLAY_WARNING=true DISPLAY_WARNING=true node -r esm ../scripts/smoketest-storybooks.js",
|
||||
"start": "yarn workspace official-storybook storybook --no-manager-cache",
|
||||
"task": "ts-node ../scripts/task.ts",
|
||||
"test": "NODE_OPTIONS=--max_old_space_size=4096 jest --config ./jest.config.js",
|
||||
"test-puppeteer": "jest --projects examples/official-storybook/storyshots-puppeteer",
|
||||
"test:cli": "npm --prefix lib/cli run test",
|
||||
@ -382,7 +379,7 @@
|
||||
"verdaccio": "^4.10.0",
|
||||
"verdaccio-auth-memory": "^9.7.2"
|
||||
},
|
||||
"packageManager": "yarn@3.2.1",
|
||||
"packageManager": "yarn@3.2.3",
|
||||
"engines": {
|
||||
"node": ">=10.13.0",
|
||||
"yarn": ">=1.3.2"
|
||||
|
||||
@ -41636,7 +41636,7 @@ __metadata:
|
||||
|
||||
"typescript@patch:typescript@npm%3A~4.6.3#~builtin<compat/typescript>":
|
||||
version: 4.6.4
|
||||
resolution: "typescript@patch:typescript@npm%3A4.6.4#~builtin<compat/typescript>::version=4.6.4&hash=7ad353"
|
||||
resolution: "typescript@patch:typescript@npm%3A4.6.4#~builtin<compat/typescript>::version=4.6.4&hash=a1c5e5"
|
||||
bin:
|
||||
tsc: bin/tsc
|
||||
tsserver: bin/tsserver
|
||||
|
||||
@ -17,17 +17,40 @@ Start by [forking](https://docs.github.com/en/github/getting-started-with-github
|
||||
git clone https://github.com/your-username/storybook.git
|
||||
```
|
||||
|
||||
In the root directory, run the following command:
|
||||
## Run your first sandbox
|
||||
|
||||
Storybook development happens in a set of *sandboxes* which are templated Storybook environments corresponding to different user setups. Within each sandbox, we inject a set of generalized stories that allow us to test core features and addons in all such environments.
|
||||
|
||||
To run an sandbox locally, you can use the `start` command:
|
||||
|
||||
```shell
|
||||
./bootstrap.sh --core
|
||||
yarn start
|
||||
```
|
||||
|
||||
This will install dependencies in both `scripts` and `code` directories, as well as build all the necessary packages for Storybook to run.
|
||||
That will install the required prerequisites, build the code, create and link an example for a Vite/React setup, and start the storybook server.
|
||||
|
||||
## Run tests & examples
|
||||
If all goes well you should see the sandbox running.
|
||||
|
||||
Once you've completed the [initial setup](#initial-setup), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite and examples.
|
||||
|
||||
|
||||
## Running a different sandbox template
|
||||
|
||||
The `start` command runs a Vite/React template, but there are many others you can use if you want to work on a different renderer or framework.
|
||||
|
||||
To get started, run the `yarn task` command; it will prompt you with a series of questions to figure out what you are trying to do. Once you've made a selection it will provide a set of options that you can use to run the same command again.
|
||||
|
||||
```shell
|
||||
yarn task
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
💡 The <code>yarn task</code> command takes a couple of shortcuts for development that could catch you out if you change branches: you may need to rerun the <code>install</code> and <code>compile</code> tasks. You can do that by running the command with the <code>--start-from=install</code></li> flag.
|
||||
</div>
|
||||
|
||||
|
||||
## Running tests
|
||||
|
||||
Once you've run your [first sandbox](#run-your-first-sandbox), you should have a fully functional version of Storybook built on your local machine. Before making any code changes, it's helpful to verify that everything is working as it should. More specifically, the test suite.
|
||||
|
||||
Run the following command to execute the tests:
|
||||
|
||||
@ -35,25 +58,11 @@ Run the following command to execute the tests:
|
||||
yarn test
|
||||
```
|
||||
|
||||
Once the tests finish, check if the examples are working with the following commands:
|
||||
|
||||
```shell
|
||||
cd examples/react-ts && yarn storybook
|
||||
```
|
||||
|
||||
<div class="aside">
|
||||
💡 The Storybook monorepo contains various example projects, each corresponding to a different framework and environment, and they are commonly used as additional tooling to test new features.
|
||||
</div>
|
||||
|
||||
If everything is working as it should, you should see the `examples/react-ts` Storybook running.
|
||||
|
||||
|
||||
|
||||
## Start developing
|
||||
|
||||
Now that you've [verified your setup](#sanity-check), it's time to jump into code. The simplest way to do this is to run one of the examples in one terminal window and the interactive build process in a separate terminal.
|
||||
Now that you've [verified your setup](#running-tests), it's time to jump into code. The simplest way to do this is to run one of the sandboxes in one terminal window and the interactive build process in a separate terminal.
|
||||
|
||||
Assuming you're still running the `examples/react-ts` from the previous step, open a new terminal and navigate to the root of the Storybook monorepo. Then, create a new branch with the following command:
|
||||
Assuming you're still running the Vite React sandbox from `yarn start`, open a new terminal and navigate to the `code/` dir of the Storybook monorepo. Then, create a new branch with the following command:
|
||||
|
||||
```shell
|
||||
git checkout -b my-first-storybook-contribution
|
||||
@ -87,11 +96,11 @@ When you're done coding, add documentation and tests as appropriate. That simpli
|
||||
|
||||
### Add stories
|
||||
|
||||
Adding a story or set of stories to our suite of example apps helps you test your work.
|
||||
Adding a story or set of stories to our suite of generic stories helps you test your work.
|
||||
|
||||
If you're modifying part of Storybook's core, or one of the essential addons, there's probably an existing set of stories in the [`official-storybook`](../../examples/official-storybook) that documents how the feature is supposed to work. Add your stories there.
|
||||
If you're modifying part of Storybook's core, or one of the essential addons, there's probably an existing set of stories in that addon's `template/stories` folder that documents how the feature is supposed to work. Add your stories there.
|
||||
|
||||
If you're modifying something related to a specific framework, the framework will have its own examples in the monorepo. For instance, [`examples/vue-kitchen-sink`](../../examples/vue-kitchen-sink) is a natural place to add stories for `@storybook/vue` while [`examples/angular-cli`](../../examples/angular-cli) is the place for `@storybook/angular`.
|
||||
If you're modifying something related to a specific renderer (e.g. React, Vue, etc.), the renderer will have its own template stories.
|
||||
|
||||
### Add tests
|
||||
|
||||
@ -105,11 +114,13 @@ Unit tests ensure that Storybook doesn't break accidentally. If your code can re
|
||||
|
||||
### End-to-end tests (e2e)
|
||||
|
||||
Storybook's monorepo is set up to rely on end-to-end testing with [Cypress](https://www.cypress.io/) during CI. To help with testing, we encourage running this test suite before submitting your contribution. Detailed below are some steps you can take:
|
||||
Storybook's monorepo is set up to rely on end-to-end testing with [Playwright](https://playwright.dev) during CI. To help with testing, we encourage running this test suite before submitting your contribution.
|
||||
|
||||
1. Ensure you have Storybook successfully built in your local branch (i.e., run `yarn bootstrap --core`)
|
||||
2. Open a terminal and run `yarn local-registry --port 6001 --open --publish` to publish Storybook's packages into a local registry.
|
||||
3. In a second terminal, set up a reproduction using the local registry and run the Cypress tests with `yarn test:e2e-framework`.
|
||||
To run a e2e test against a sandbox, you can use the `e2e-tests` task:
|
||||
|
||||
```shell
|
||||
yarn task --task e2e-tests --template=react-vite/default-ts --start-from=auto
|
||||
```
|
||||
|
||||
## Submit a pull request
|
||||
|
||||
@ -136,6 +147,23 @@ If your contribution focuses on a bugfix and you want it featured in the next st
|
||||
- [Sync a fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/working-with-forks/syncing-a-fork)
|
||||
- [Merge an upstream repository into your fork](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/working-with-forks/merging-an-upstream-repository-into-your-fork)
|
||||
|
||||
### Reproducing job failures
|
||||
|
||||
After creating your PR, if one of the CI jobs failed, when checking the logs of that job, you will see that it printed a message explaining how to reproduce the task locally. Typically that involves running the task against the right template:
|
||||
|
||||
```shell
|
||||
yarn task --task e2e-tests --template=react-vite/default-ts --start-from=install
|
||||
```
|
||||
|
||||
Typically it is a good idea to start from the `install` task to ensure your local code is completely up to date. If you reproduce the failure, you can try and make fixes, [compile them](#start-developing) with `build`, then rerun the task with `--start-from=auto`.
|
||||
|
||||
<div class="aside">
|
||||
|
||||
<p>💡 The default instructions run the code "linked" which means built changes to Storybook library code will be reflected in the sandbox right away (the next time you run the task). However CI runs in "unlinked" mode, which in rare cases will behave differently.</p>
|
||||
|
||||
<p>If you are having trouble reproducing, try rerunning the command with the <code>--no-link</code> flag. If you need to do that, you'll need to run it with <code>--start-from=compile</code> after each code change.
|
||||
</div>
|
||||
|
||||
## How to work with reproductions
|
||||
|
||||
We encourage bug reports to include reproductions. In the same way that it's possible to [develop interactively](#start-developing) against example projects in the monorepo, it's also possible to develop against a reproduction repository.
|
||||
|
||||
BIN
docs/contribute/storybook-sandbox.png
Normal file
BIN
docs/contribute/storybook-sandbox.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 930 KiB |
@ -1,6 +1,6 @@
|
||||
[build]
|
||||
publish = "code/built-storybooks"
|
||||
command = "./bootstrap.sh --core && cd code && yarn build-storybooks --all"
|
||||
command = "yarn --task compile --start-from=auto --no-link && yarn build-storybooks --all"
|
||||
[build.environment]
|
||||
NODE_VERSION = "14"
|
||||
YARN_VERSION = "1.22.10"
|
||||
|
||||
14
node_modules/.yarn-integrity
generated
vendored
Normal file
14
node_modules/.yarn-integrity
generated
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"systemParams": "darwin-arm64-83",
|
||||
"modulesFolders": [
|
||||
"node_modules"
|
||||
],
|
||||
"flags": [],
|
||||
"linkedModules": [
|
||||
"webpack"
|
||||
],
|
||||
"topLevelPatterns": [],
|
||||
"lockfileEntries": {},
|
||||
"files": [],
|
||||
"artifacts": {}
|
||||
}
|
||||
10
node_modules/.yarn-state.yml
generated
vendored
Normal file
10
node_modules/.yarn-state.yml
generated
vendored
Normal file
@ -0,0 +1,10 @@
|
||||
# Warning: This file is automatically generated. Removing it is fine, but will
|
||||
# cause your node_modules installation to become invalidated.
|
||||
|
||||
__metadata:
|
||||
version: 1
|
||||
nmMode: classic
|
||||
|
||||
"root-workspace-0b6124@workspace:.":
|
||||
locations:
|
||||
- ""
|
||||
10
package.json
Normal file
10
package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"scripts": {
|
||||
"start": "yarn task --task dev --template react-vite/default-ts --start-from=install",
|
||||
"task": "echo 'Installing Script Dependencies...'; cd scripts; yarn install >/dev/null; yarn task",
|
||||
"get-template": "cd scripts; yarn get-template",
|
||||
"test": "cd code; yarn test",
|
||||
"lint": "cd code; yarn lint"
|
||||
},
|
||||
"packageManager": "yarn@3.2.3"
|
||||
}
|
||||
786
scripts/.yarn/releases/yarn-3.2.1.cjs
generated
vendored
786
scripts/.yarn/releases/yarn-3.2.1.cjs
generated
vendored
File diff suppressed because one or more lines are too long
783
scripts/.yarn/releases/yarn-3.2.3.cjs
generated
vendored
Executable file
783
scripts/.yarn/releases/yarn-3.2.3.cjs
generated
vendored
Executable file
File diff suppressed because one or more lines are too long
@ -8,23 +8,23 @@ logFilters:
|
||||
- code: YN0076
|
||||
level: discard
|
||||
- level: discard
|
||||
pattern: '@workspace:examples'
|
||||
pattern: "@workspace:examples"
|
||||
- level: discard
|
||||
pattern: '@storybook/root@workspace:.'
|
||||
pattern: "@storybook/root@workspace:."
|
||||
- level: discard
|
||||
pattern: '@workspace:addons/storyshots/'
|
||||
pattern: "@workspace:addons/storyshots/"
|
||||
|
||||
nodeLinker: node-modules
|
||||
|
||||
npmRegistryServer: 'https://registry.yarnpkg.com'
|
||||
npmRegistryServer: "https://registry.yarnpkg.com"
|
||||
|
||||
plugins:
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
|
||||
spec: '@yarnpkg/plugin-typescript'
|
||||
spec: "@yarnpkg/plugin-typescript"
|
||||
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
|
||||
spec: '@yarnpkg/plugin-interactive-tools'
|
||||
spec: "@yarnpkg/plugin-interactive-tools"
|
||||
|
||||
unsafeHttpWhitelist:
|
||||
- localhost
|
||||
|
||||
yarnPath: .yarn/releases/yarn-3.2.1.cjs
|
||||
yarnPath: .yarn/releases/yarn-3.2.3.cjs
|
||||
|
||||
269
scripts/bootstrap.js
vendored
269
scripts/bootstrap.js
vendored
@ -1,269 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/* eslint-disable global-require */
|
||||
|
||||
const { spawnSync } = require('child_process');
|
||||
const path = require('path');
|
||||
const { join } = require('path');
|
||||
const { maxConcurrentTasks } = require('./utils/concurrency');
|
||||
|
||||
const spawn = (command, options = {}) => {
|
||||
return spawnSync(`${command}`, {
|
||||
shell: true,
|
||||
stdio: 'inherit',
|
||||
...options,
|
||||
});
|
||||
};
|
||||
|
||||
function run() {
|
||||
const prompts = require('prompts');
|
||||
const program = require('commander');
|
||||
const chalk = require('chalk');
|
||||
const log = require('npmlog');
|
||||
|
||||
log.heading = 'storybook';
|
||||
const prefix = 'bootstrap';
|
||||
log.addLevel('aborted', 3001, { fg: 'red', bold: true });
|
||||
|
||||
const main = program
|
||||
.version('5.0.0')
|
||||
.option('--all', `Bootstrap everything ${chalk.gray('(all)')}`);
|
||||
|
||||
const createTask = ({
|
||||
defaultValue,
|
||||
option,
|
||||
name,
|
||||
check = () => true,
|
||||
command,
|
||||
pre = [],
|
||||
order,
|
||||
}) => ({
|
||||
value: false,
|
||||
defaultValue: defaultValue || false,
|
||||
option: option || undefined,
|
||||
name: name || 'unnamed task',
|
||||
check: check || (() => true),
|
||||
order,
|
||||
command: () => {
|
||||
// run all pre tasks
|
||||
pre
|
||||
.map((key) => tasks[key])
|
||||
.forEach((task) => {
|
||||
if (task.check()) {
|
||||
task.command();
|
||||
}
|
||||
});
|
||||
|
||||
log.info(prefix, name);
|
||||
return command();
|
||||
},
|
||||
});
|
||||
|
||||
const tasks = {
|
||||
core: createTask({
|
||||
name: `Core & Examples ${chalk.gray('(core)')}`,
|
||||
defaultValue: false,
|
||||
option: '--core',
|
||||
command: () => {
|
||||
log.info(prefix, 'yarn workspace');
|
||||
},
|
||||
pre: ['install', 'build'],
|
||||
order: 1,
|
||||
}),
|
||||
prep: createTask({
|
||||
name: `Prep for development ${chalk.gray('(prep)')}`,
|
||||
defaultValue: true,
|
||||
option: '--prep',
|
||||
command: () => {
|
||||
log.info(prefix, 'prep');
|
||||
return spawn(
|
||||
`nx run-many --target="prep" --all --parallel --exclude=@storybook/addon-storyshots,@storybook/addon-storyshots-puppeteer -- --reset`
|
||||
);
|
||||
},
|
||||
order: 2,
|
||||
}),
|
||||
retry: createTask({
|
||||
name: `Core & Examples but only build previously failed ${chalk.gray('(core)')}`,
|
||||
defaultValue: true,
|
||||
option: '--retry',
|
||||
command: () => {
|
||||
log.info(prefix, 'prep');
|
||||
return spawn(
|
||||
`nx run-many --target="prep" --all --parallel --only-failed ${
|
||||
process.env.CI ? `--max-parallel=${maxConcurrentTasks}` : ''
|
||||
}`
|
||||
);
|
||||
},
|
||||
order: 1,
|
||||
}),
|
||||
reset: createTask({
|
||||
name: `Clean repository ${chalk.red('(reset)')}`,
|
||||
defaultValue: false,
|
||||
option: '--reset',
|
||||
command: () => {
|
||||
log.info(prefix, 'git clean');
|
||||
return spawn(`node -r esm ${join(__dirname, 'reset.js')}`);
|
||||
},
|
||||
order: 0,
|
||||
}),
|
||||
install: createTask({
|
||||
name: `Install dependencies ${chalk.gray('(install)')}`,
|
||||
defaultValue: false,
|
||||
option: '--install',
|
||||
command: () => {
|
||||
const command = process.env.CI ? `yarn install --immutable` : `yarn install`;
|
||||
return spawn(command);
|
||||
},
|
||||
pre: ['installScripts'],
|
||||
order: 1,
|
||||
}),
|
||||
build: createTask({
|
||||
name: `Build packages ${chalk.gray('(build)')}`,
|
||||
defaultValue: false,
|
||||
option: '--build',
|
||||
command: () => {
|
||||
log.info(prefix, 'build');
|
||||
return spawn(
|
||||
`nx run-many --target="prep" --all --parallel=8 ${
|
||||
process.env.CI ? `--max-parallel=${maxConcurrentTasks}` : ''
|
||||
} -- --reset --optimized`
|
||||
);
|
||||
},
|
||||
order: 2,
|
||||
}),
|
||||
registry: createTask({
|
||||
name: `Run local registry ${chalk.gray('(reg)')}`,
|
||||
defaultValue: false,
|
||||
option: '--reg',
|
||||
command: () => {
|
||||
return spawn('yarn local-registry --publish --open --port 6001');
|
||||
},
|
||||
order: 11,
|
||||
}),
|
||||
dev: createTask({
|
||||
name: `Run build in watch mode ${chalk.gray('(dev)')}`,
|
||||
defaultValue: false,
|
||||
option: '--dev',
|
||||
command: () => {
|
||||
return spawn('yarn build');
|
||||
},
|
||||
order: 9,
|
||||
}),
|
||||
installScripts: createTask({
|
||||
name: `Install dependencies on scripts directory ${chalk.gray('(dev)')}`,
|
||||
defaultValue: false,
|
||||
option: '--installScripts',
|
||||
command: () => {
|
||||
const command = process.env.CI ? `yarn install --immutable` : `yarn install`;
|
||||
return spawn(command, { cwd: path.join('..', 'scripts') });
|
||||
},
|
||||
order: 10,
|
||||
}),
|
||||
};
|
||||
|
||||
const groups = {
|
||||
main: ['prep', 'core'],
|
||||
buildtasks: ['install', 'build'],
|
||||
devtasks: ['dev', 'registry', 'reset'],
|
||||
};
|
||||
|
||||
Object.keys(tasks)
|
||||
.reduce((acc, key) => acc.option(tasks[key].option, tasks[key].name), main)
|
||||
.parse(process.argv);
|
||||
|
||||
Object.keys(tasks).forEach((key) => {
|
||||
tasks[key].value = program[tasks[key].option.replace('--', '')] || program.all;
|
||||
});
|
||||
|
||||
const createSeparator = (input) => ({
|
||||
title: `- ${input}${' ---------'.substr(0, 12)}`,
|
||||
disabled: true,
|
||||
});
|
||||
|
||||
const choices = Object.values(groups)
|
||||
.map((l) =>
|
||||
l.map((key) => ({
|
||||
value: tasks[key].name,
|
||||
title: tasks[key].name,
|
||||
selected: tasks[key].defaultValue,
|
||||
}))
|
||||
)
|
||||
.reduce((acc, i, k) => acc.concat(createSeparator(Object.keys(groups)[k])).concat(i), []);
|
||||
|
||||
let selection;
|
||||
if (
|
||||
!Object.keys(tasks)
|
||||
.map((key) => tasks[key].value)
|
||||
.filter(Boolean).length
|
||||
) {
|
||||
selection = prompts(
|
||||
[
|
||||
{
|
||||
type: 'multiselect',
|
||||
message: 'Select the bootstrap activities',
|
||||
name: 'todo',
|
||||
warn: ' ',
|
||||
pageSize: Object.keys(tasks).length + Object.keys(groups).length,
|
||||
choices,
|
||||
},
|
||||
],
|
||||
{
|
||||
onCancel: () => process.exit(0),
|
||||
}
|
||||
)
|
||||
.then(({ todo }) =>
|
||||
todo.map((name) => tasks[Object.keys(tasks).find((i) => tasks[i].name === name)])
|
||||
)
|
||||
.then((list) => {
|
||||
if (list.find((i) => i === tasks.reset)) {
|
||||
return prompts([
|
||||
{
|
||||
type: 'confirm',
|
||||
message: `${chalk.red(
|
||||
'DESTRUCTIVE'
|
||||
)} deletes node_modules, files not present in git ${chalk.underline(
|
||||
'will get trashed'
|
||||
)}, except for .idea and .vscode, ${chalk.cyan('Continue?')}`,
|
||||
name: 'sure',
|
||||
},
|
||||
]).then(({ sure }) => {
|
||||
if (sure) {
|
||||
return list;
|
||||
}
|
||||
throw new Error('Cleanup canceled');
|
||||
});
|
||||
}
|
||||
return list;
|
||||
});
|
||||
} else {
|
||||
selection = Promise.resolve(
|
||||
Object.keys(tasks)
|
||||
.map((key) => tasks[key])
|
||||
.filter((item) => item.value === true)
|
||||
);
|
||||
}
|
||||
|
||||
selection
|
||||
.then((list) => {
|
||||
if (list.length === 0) {
|
||||
log.warn(prefix, 'Nothing to bootstrap');
|
||||
} else {
|
||||
list
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.forEach((key) => {
|
||||
const result = key.command();
|
||||
if (result && 'status' in result && result.status !== 0) {
|
||||
process.exit(result.status);
|
||||
}
|
||||
});
|
||||
process.stdout.write('\x07');
|
||||
}
|
||||
})
|
||||
.catch((e) => {
|
||||
log.aborted(prefix, chalk.red(e.message));
|
||||
log.silly(prefix, e);
|
||||
process.exit(1);
|
||||
});
|
||||
}
|
||||
|
||||
run();
|
||||
@ -12,15 +12,13 @@ import reproTemplates from '../../code/lib/cli/src/repro-templates';
|
||||
import storybookVersions from '../../code/lib/cli/src/versions';
|
||||
import { JsPackageManagerFactory } from '../../code/lib/cli/src/js-package-manager/JsPackageManagerFactory';
|
||||
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
import { maxConcurrentTasks } from '../utils/concurrency';
|
||||
import { maxConcurrentTasks } from '../utils/maxConcurrentTasks';
|
||||
|
||||
import { localizeYarnConfigFiles, setupYarn } from './utils/yarn';
|
||||
import { GeneratorConfig } from './utils/types';
|
||||
import { getStackblitzUrl, renderTemplate } from './utils/template';
|
||||
import { JsPackageManager } from '../../code/lib/cli/src/js-package-manager';
|
||||
import { servePackages } from '../utils/serve-packages';
|
||||
import { publish } from '../tasks/publish';
|
||||
import { runRegistry } from '../tasks/run-registry';
|
||||
|
||||
const OUTPUT_DIRECTORY = join(__dirname, '..', '..', 'repros');
|
||||
const BEFORE_DIR_NAME = 'before-storybook';
|
||||
@ -110,7 +108,7 @@ const runGenerators = async (
|
||||
// @ts-expect-error (Converted from ts-ignore)
|
||||
await publish.run();
|
||||
console.log(`⚙️ Starting local registry: ${LOCAL_REGISTRY_URL}`);
|
||||
controller = await servePackages({ debug: true });
|
||||
controller = await runRegistry({ debug: true });
|
||||
}
|
||||
|
||||
await Promise.all(
|
||||
|
||||
@ -7,7 +7,9 @@
|
||||
"lint:js": "yarn lint:js:cmd . --quiet",
|
||||
"lint:js:cmd": "cross-env NODE_ENV=production eslint --cache --cache-location=../.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
|
||||
"lint:package": "sort-package-json",
|
||||
"test": "jest --config ./jest.config.js"
|
||||
"get-template": "ts-node ./get-template.ts",
|
||||
"test": "jest --config ./jest.config.js",
|
||||
"task": "ts-node ./task.ts"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
@ -98,6 +100,7 @@
|
||||
"babel-plugin-add-react-displayname": "^0.0.5",
|
||||
"babel-plugin-dynamic-import-node": "^2.3.3",
|
||||
"babel-plugin-macros": "^3.0.1",
|
||||
"boxen": "^5.1.2",
|
||||
"chalk": "^4.1.0",
|
||||
"codecov": "^3.8.1",
|
||||
"commander": "^6.2.1",
|
||||
@ -136,6 +139,7 @@
|
||||
"junit-xml": "^1.2.0",
|
||||
"lint-staged": "^10.5.4",
|
||||
"lodash": "^4.17.21",
|
||||
"memoizerific": "^1.11.3",
|
||||
"mocha-list-tests": "^1.0.5",
|
||||
"node-abort-controller": "^3.0.1",
|
||||
"node-cleanup": "^2.1.2",
|
||||
@ -182,7 +186,7 @@
|
||||
"verdaccio": "^4.10.0",
|
||||
"verdaccio-auth-memory": "^9.7.2"
|
||||
},
|
||||
"packageManager": "yarn@3.2.1",
|
||||
"packageManager": "yarn@3.2.3",
|
||||
"engines": {
|
||||
"node": ">=10.13.0",
|
||||
"yarn": ">=1.3.2"
|
||||
|
||||
@ -1,614 +0,0 @@
|
||||
/* eslint-disable no-restricted-syntax, no-await-in-loop */
|
||||
import path from 'path';
|
||||
import {
|
||||
remove,
|
||||
pathExists,
|
||||
readJSON,
|
||||
writeJSON,
|
||||
ensureSymlink,
|
||||
ensureDir,
|
||||
existsSync,
|
||||
copy,
|
||||
} from 'fs-extra';
|
||||
import prompts from 'prompts';
|
||||
import type { AbortController } from 'node-abort-controller';
|
||||
import command from 'execa';
|
||||
|
||||
import { createOptions, getOptionsOrPrompt, OptionValues } from './utils/options';
|
||||
import { executeCLIStep } from './utils/cli-step';
|
||||
import { installYarn2, configureYarn2ForVerdaccio, addPackageResolutions } from './utils/yarn';
|
||||
import { exec } from './utils/exec';
|
||||
import { getInterpretedFile } from '../code/lib/core-common';
|
||||
import { ConfigFile, readConfig, writeConfig } from '../code/lib/csf-tools';
|
||||
import { babelParse } from '../code/lib/csf-tools/src/babelParse';
|
||||
import TEMPLATES from '../code/lib/cli/src/repro-templates';
|
||||
import { detectLanguage } from '../code/lib/cli/src/detect';
|
||||
import { SupportedLanguage } from '../code/lib/cli/src/project_types';
|
||||
import { servePackages } from './utils/serve-packages';
|
||||
import { filterExistsInCodeDir, codeDir } from './utils/filterExistsInCodeDir';
|
||||
import { JsPackageManagerFactory } from '../code/lib/cli/src/js-package-manager';
|
||||
|
||||
type Template = keyof typeof TEMPLATES;
|
||||
const templates: Template[] = Object.keys(TEMPLATES) as any;
|
||||
const addons = ['a11y', 'storysource'];
|
||||
const essentialsAddons = [
|
||||
'actions',
|
||||
'backgrounds',
|
||||
'controls',
|
||||
'docs',
|
||||
'highlight',
|
||||
'measure',
|
||||
'outline',
|
||||
'toolbars',
|
||||
'viewport',
|
||||
];
|
||||
const sandboxDir = path.resolve(__dirname, '../sandbox');
|
||||
const reprosDir = path.resolve(__dirname, '../repros');
|
||||
|
||||
export const options = createOptions({
|
||||
template: {
|
||||
type: 'string',
|
||||
description: 'Which template would you like to use?',
|
||||
values: templates,
|
||||
required: true as const,
|
||||
},
|
||||
addon: {
|
||||
type: 'string[]',
|
||||
description: 'Which extra addons (beyond the CLI defaults) would you like installed?',
|
||||
values: addons,
|
||||
},
|
||||
includeStories: {
|
||||
type: 'boolean',
|
||||
description: "Include Storybook's own stories?",
|
||||
promptType: (_, { template }) => template === 'react',
|
||||
},
|
||||
fromLocalRepro: {
|
||||
type: 'boolean',
|
||||
description: 'Create the template from a local repro (rather than degitting it)?',
|
||||
},
|
||||
forceDelete: {
|
||||
type: 'boolean',
|
||||
description: 'Always delete an existing sandbox, even if it has the same configuration?',
|
||||
promptType: false,
|
||||
},
|
||||
forceReuse: {
|
||||
type: 'boolean',
|
||||
description: 'Always reuse an existing sandbox, even if it has a different configuration?',
|
||||
promptType: false,
|
||||
},
|
||||
link: {
|
||||
type: 'boolean',
|
||||
description: 'Link the storybook to the local code?',
|
||||
inverse: true,
|
||||
},
|
||||
publish: {
|
||||
type: 'boolean',
|
||||
description: 'Publish local code to verdaccio and start before installing?',
|
||||
inverse: true,
|
||||
promptType: (_, { link }) => !link,
|
||||
},
|
||||
startVerdaccio: {
|
||||
type: 'boolean',
|
||||
description: 'Start Verdaccio before installing?',
|
||||
inverse: true,
|
||||
promptType: (_, { publish }) => !publish,
|
||||
},
|
||||
start: {
|
||||
type: 'boolean',
|
||||
description: 'Start the Storybook?',
|
||||
inverse: true,
|
||||
},
|
||||
build: {
|
||||
type: 'boolean',
|
||||
description: 'Build the Storybook?',
|
||||
promptType: (_, { start }) => !start,
|
||||
},
|
||||
watch: {
|
||||
type: 'boolean',
|
||||
description: 'Start building used packages in watch mode as well as the Storybook?',
|
||||
promptType: (_, { start }) => start,
|
||||
},
|
||||
dryRun: {
|
||||
type: 'boolean',
|
||||
description: "Don't execute commands, just list them (dry run)?",
|
||||
promptType: false,
|
||||
},
|
||||
debug: {
|
||||
type: 'boolean',
|
||||
description: 'Print all the logs to the console',
|
||||
promptType: false,
|
||||
},
|
||||
});
|
||||
|
||||
async function getOptions() {
|
||||
return getOptionsOrPrompt('yarn sandbox', options);
|
||||
}
|
||||
|
||||
const steps = {
|
||||
repro: {
|
||||
command: 'repro-next',
|
||||
description: 'Bootstrapping Template',
|
||||
icon: '👷',
|
||||
hasArgument: true,
|
||||
options: createOptions({
|
||||
output: { type: 'string' },
|
||||
// TODO allow default values for strings
|
||||
branch: { type: 'string', values: ['next'] },
|
||||
}),
|
||||
},
|
||||
add: {
|
||||
command: 'add',
|
||||
description: 'Adding addon',
|
||||
icon: '+',
|
||||
hasArgument: true,
|
||||
options: createOptions({}),
|
||||
},
|
||||
link: {
|
||||
command: 'link',
|
||||
description: 'Linking packages',
|
||||
icon: '🔗',
|
||||
hasArgument: true,
|
||||
options: createOptions({
|
||||
local: { type: 'boolean' },
|
||||
start: { type: 'boolean', inverse: true },
|
||||
}),
|
||||
},
|
||||
build: {
|
||||
command: 'build',
|
||||
description: 'Building Storybook',
|
||||
icon: '🔨',
|
||||
options: createOptions({}),
|
||||
},
|
||||
dev: {
|
||||
command: 'dev',
|
||||
description: 'Starting Storybook',
|
||||
icon: '🖥 ',
|
||||
options: createOptions({}),
|
||||
},
|
||||
};
|
||||
|
||||
const logger = console;
|
||||
|
||||
async function findFirstPath(paths: string[], { cwd }: { cwd: string }) {
|
||||
for (const filePath of paths) {
|
||||
if (await pathExists(path.join(cwd, filePath))) return filePath;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
async function addPackageScripts({
|
||||
cwd,
|
||||
scripts,
|
||||
}: {
|
||||
cwd: string;
|
||||
scripts: Record<string, string>;
|
||||
}) {
|
||||
logger.info(`🔢 Adding package scripts:`);
|
||||
const packageJsonPath = path.join(cwd, 'package.json');
|
||||
const packageJson = await readJSON(packageJsonPath);
|
||||
packageJson.scripts = {
|
||||
...packageJson.scripts,
|
||||
...scripts,
|
||||
};
|
||||
await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
|
||||
}
|
||||
|
||||
async function readMainConfig({ cwd }: { cwd: string }) {
|
||||
const configDir = path.join(cwd, '.storybook');
|
||||
if (!existsSync(configDir)) {
|
||||
throw new Error(
|
||||
`Unable to find the Storybook folder in "${configDir}". Are you sure it exists? Or maybe this folder uses a custom Storybook config directory?`
|
||||
);
|
||||
}
|
||||
|
||||
const mainConfigPath = getInterpretedFile(path.resolve(configDir, 'main'));
|
||||
return readConfig(mainConfigPath);
|
||||
}
|
||||
|
||||
// Ensure that sandboxes can refer to story files defined in `code/`.
|
||||
// Most WP-based build systems will not compile files outside of the project root or 'src/` or
|
||||
// similar. Plus they aren't guaranteed to handle TS files. So we need to patch in esbuild
|
||||
// loader for such files. NOTE this isn't necessary for Vite, as far as we know.
|
||||
function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
|
||||
// NOTE: the test regexp here will apply whether the path is symlink-preserved or otherwise
|
||||
const esbuildLoaderPath = require.resolve('../code/node_modules/esbuild-loader');
|
||||
const storiesMdxLoaderPath = require.resolve('../code/node_modules/@storybook/mdx1-csf/loader');
|
||||
const babelLoaderPath = require.resolve('babel-loader');
|
||||
const jsxPluginPath = require.resolve('@babel/plugin-transform-react-jsx');
|
||||
const webpackFinalCode = `
|
||||
(config) => ({
|
||||
...config,
|
||||
module: {
|
||||
...config.modules,
|
||||
rules: [
|
||||
// Ensure esbuild-loader applies to all files in ./template-stories
|
||||
{
|
||||
test: [/\\/template-stories\\//],
|
||||
exclude: [/\\.mdx$/],
|
||||
loader: '${esbuildLoaderPath}',
|
||||
options: {
|
||||
loader: 'tsx',
|
||||
target: 'es2015',
|
||||
},
|
||||
},
|
||||
// Handle MDX files per the addon-docs presets (ish)
|
||||
{
|
||||
test: [/\\/template-stories\\//],
|
||||
include: [/\\.stories\\.mdx$/],
|
||||
use: [
|
||||
{
|
||||
loader: '${babelLoaderPath}',
|
||||
options: {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
plugins: ['${jsxPluginPath}'],
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: '${storiesMdxLoaderPath}',
|
||||
options: {
|
||||
skipCsf: false,
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
test: [/\\/template-stories\\//],
|
||||
include: [/\\.mdx$/],
|
||||
exclude: [/\\.stories\\.mdx$/],
|
||||
use: [
|
||||
{
|
||||
loader: '${babelLoaderPath}',
|
||||
options: {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
plugins: ['${jsxPluginPath}'],
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: '${storiesMdxLoaderPath}',
|
||||
options: {
|
||||
skipCsf: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
// Ensure no other loaders from the framework apply
|
||||
...config.module.rules.map(rule => ({
|
||||
...rule,
|
||||
exclude: [/\\/template-stories\\//].concat(rule.exclude || []),
|
||||
})),
|
||||
],
|
||||
},
|
||||
})`;
|
||||
mainConfig.setFieldNode(
|
||||
['webpackFinal'],
|
||||
// @ts-expect-error (not sure why TS complains here, it does exist)
|
||||
babelParse(webpackFinalCode).program.body[0].expression
|
||||
);
|
||||
}
|
||||
|
||||
// Recompile optimized deps on each startup, so you can change @storybook/* packages and not
|
||||
// have to clear caches.
|
||||
function forceViteRebuilds(mainConfig: ConfigFile) {
|
||||
const viteFinalCode = `
|
||||
(config) => ({
|
||||
...config,
|
||||
optimizeDeps: {
|
||||
...config.optimizeDeps,
|
||||
force: true,
|
||||
},
|
||||
})`;
|
||||
mainConfig.setFieldNode(
|
||||
['viteFinal'],
|
||||
// @ts-expect-error (not sure why TS complains here, it does exist)
|
||||
babelParse(viteFinalCode).program.body[0].expression
|
||||
);
|
||||
}
|
||||
|
||||
function addPreviewAnnotations(mainConfig: ConfigFile, paths: string[]) {
|
||||
const config = mainConfig.getFieldValue(['previewAnnotations']) as string[];
|
||||
mainConfig.setFieldValue(['previewAnnotations'], [...(config || []), ...paths]);
|
||||
}
|
||||
|
||||
// packageDir is eg 'renderers/react', 'addons/actions'
|
||||
async function linkPackageStories(
|
||||
packageDir: string,
|
||||
{ mainConfig, cwd, linkInDir }: { mainConfig: ConfigFile; cwd: string; linkInDir?: string }
|
||||
) {
|
||||
const source = path.join(codeDir, packageDir, 'template', 'stories');
|
||||
// By default we link `stories` directories
|
||||
// e.g '../../../code/lib/store/template/stories' to 'template-stories/lib/store'
|
||||
// if the directory <code>/lib/store/template/stories exists
|
||||
//
|
||||
// The files must be linked in the cwd, in order to ensure that any dependencies they
|
||||
// reference are resolved in the cwd. In particular 'react' resolved by MDX files.
|
||||
const target = linkInDir
|
||||
? path.resolve(linkInDir, packageDir)
|
||||
: path.resolve(cwd, 'template-stories', packageDir);
|
||||
await ensureSymlink(source, target);
|
||||
|
||||
// Add `previewAnnotation` entries of the form
|
||||
// './template-stories/lib/store/preview.ts'
|
||||
// if the file <code>/lib/store/template/stories/preview.ts exists
|
||||
|
||||
await Promise.all(
|
||||
['js', 'ts'].map(async (ext) => {
|
||||
const previewFile = `preview.${ext}`;
|
||||
const previewPath = path.join(codeDir, packageDir, 'template', 'stories', previewFile);
|
||||
if (await pathExists(previewPath)) {
|
||||
addPreviewAnnotations(mainConfig, [
|
||||
`./${path.join(linkInDir ? 'src/stories' : 'template-stories', packageDir, previewFile)}`,
|
||||
]);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Update the stories field to ensure that:
|
||||
// a) no TS files that are linked from the renderer are picked up in non-TS projects
|
||||
// b) files in ./template-stories are not matched by the default glob
|
||||
async function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) {
|
||||
const stories = mainConfig.getFieldValue(['stories']) as string[];
|
||||
|
||||
// If the project is a JS project, let's make sure any linked in TS stories from the
|
||||
// renderer inside src|stories are simply ignored.
|
||||
const updatedStories = isJs
|
||||
? stories.map((specifier) => specifier.replace('js|jsx|ts|tsx', 'js|jsx'))
|
||||
: stories;
|
||||
|
||||
// FIXME: '*.@(mdx|stories.mdx|stories.tsx|stories.ts|stories.jsx|stories.js'
|
||||
const linkedStories = path.join('..', 'template-stories', '**', '*.stories.@(js|jsx|ts|tsx|mdx)');
|
||||
const linkedMdx = path.join('..', 'template-stories/addons/docs/docs2', '**', '*.@(mdx)');
|
||||
|
||||
mainConfig.setFieldValue(['stories'], [...updatedStories, linkedStories, linkedMdx]);
|
||||
}
|
||||
|
||||
type Workspace = { name: string; location: string };
|
||||
|
||||
async function getWorkspaces() {
|
||||
const { stdout } = await command('yarn workspaces list --json', {
|
||||
cwd: process.cwd(),
|
||||
shell: true,
|
||||
});
|
||||
return JSON.parse(`[${stdout.split('\n').join(',')}]`) as Workspace[];
|
||||
}
|
||||
|
||||
function workspacePath(type: string, packageName: string, workspaces: Workspace[]) {
|
||||
const workspace = workspaces.find((w) => w.name === packageName);
|
||||
if (!workspace) {
|
||||
throw new Error(`Unknown ${type} '${packageName}', not in yarn workspace!`);
|
||||
}
|
||||
return workspace.location;
|
||||
}
|
||||
|
||||
function addExtraDependencies({
|
||||
cwd,
|
||||
dryRun,
|
||||
debug,
|
||||
}: {
|
||||
cwd: string;
|
||||
dryRun: boolean;
|
||||
debug: boolean;
|
||||
}) {
|
||||
// web-components doesn't install '@storybook/testing-library' by default
|
||||
const extraDeps = ['@storybook/jest', '@storybook/testing-library@0.0.14-next.0'];
|
||||
if (debug) console.log('🎁 Adding extra deps', extraDeps);
|
||||
if (!dryRun) {
|
||||
const packageManager = JsPackageManagerFactory.getPackageManager(false, cwd);
|
||||
packageManager.addDependencies({ installAsDevDependencies: true }, extraDeps);
|
||||
}
|
||||
}
|
||||
|
||||
export async function sandbox(optionValues: OptionValues<typeof options>) {
|
||||
const { template, forceDelete, forceReuse, dryRun, debug, fromLocalRepro } = optionValues;
|
||||
|
||||
await ensureDir(sandboxDir);
|
||||
let publishController: AbortController;
|
||||
|
||||
const cwd = path.join(sandboxDir, template.replace('/', '-'));
|
||||
|
||||
const exists = await pathExists(cwd);
|
||||
let shouldDelete = exists && !forceReuse;
|
||||
if (exists && !forceDelete && !forceReuse) {
|
||||
if (process.env.CI)
|
||||
throw new Error(`yarn sandbox needed to prompt for options, this is not possible in CI!`);
|
||||
|
||||
const relativePath = path.relative(process.cwd(), cwd);
|
||||
({ shouldDelete } = await prompts({
|
||||
type: 'toggle',
|
||||
message: `${relativePath} already exists, should delete it and create a new one?`,
|
||||
name: 'shouldDelete',
|
||||
initial: false,
|
||||
active: 'yes',
|
||||
inactive: 'no',
|
||||
}));
|
||||
}
|
||||
|
||||
if (exists && shouldDelete && !dryRun) await remove(cwd);
|
||||
|
||||
if (!exists || shouldDelete) {
|
||||
if (fromLocalRepro) {
|
||||
const srcDir = path.join(reprosDir, template, 'after-storybook');
|
||||
if (!existsSync(srcDir)) {
|
||||
throw new Error(dedent`
|
||||
Missing repro directory '${srcDir}'!
|
||||
|
||||
To run sandbox against a local repro, you must have already generated
|
||||
the repro template in the /repros directory using:
|
||||
|
||||
yarn generate-repros-next --template ${template}
|
||||
`);
|
||||
}
|
||||
const destDir = cwd;
|
||||
await copy(srcDir, destDir);
|
||||
} else {
|
||||
await executeCLIStep(steps.repro, {
|
||||
argument: template,
|
||||
optionValues: { output: cwd, branch: 'next' },
|
||||
cwd: sandboxDir,
|
||||
dryRun,
|
||||
debug,
|
||||
});
|
||||
}
|
||||
|
||||
const mainConfig = await readMainConfig({ cwd });
|
||||
|
||||
const templateConfig = TEMPLATES[template as Template];
|
||||
const { renderer, builder } = templateConfig.expected;
|
||||
const storiesPath = await findFirstPath([path.join('src', 'stories'), 'stories'], { cwd });
|
||||
|
||||
const workspaces = await getWorkspaces();
|
||||
// Link in the template/components/index.js from store, the renderer and the addons
|
||||
const rendererPath = workspacePath('renderer', renderer, workspaces);
|
||||
await ensureSymlink(
|
||||
path.join(codeDir, rendererPath, 'template', 'components'),
|
||||
path.resolve(cwd, storiesPath, 'components')
|
||||
);
|
||||
addPreviewAnnotations(mainConfig, [`.${path.sep}${path.join(storiesPath, 'components')}`]);
|
||||
|
||||
// Add stories for the renderer. NOTE: these *do* need to be processed by the framework build system
|
||||
await linkPackageStories(rendererPath, {
|
||||
mainConfig,
|
||||
cwd,
|
||||
linkInDir: path.resolve(cwd, storiesPath),
|
||||
});
|
||||
|
||||
// Add stories for lib/store (and addons below). NOTE: these stories will be in the
|
||||
// template-stories folder and *not* processed by the framework build config (instead by esbuild-loader)
|
||||
await linkPackageStories(workspacePath('core package', '@storybook/store', workspaces), {
|
||||
mainConfig,
|
||||
cwd,
|
||||
});
|
||||
|
||||
// TODO -- sb add <addon> doesn't actually work properly:
|
||||
// - installs in `deps` not `devDeps`
|
||||
// - does a `workspace:^` install (what does that mean?)
|
||||
// - doesn't add to `main.js`
|
||||
|
||||
for (const addon of optionValues.addon) {
|
||||
const addonName = `@storybook/addon-${addon}`;
|
||||
await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun, debug });
|
||||
}
|
||||
|
||||
const mainAddons = mainConfig.getFieldValue(['addons']).reduce((acc: string[], addon: any) => {
|
||||
const name = typeof addon === 'string' ? addon : addon.name;
|
||||
const match = /@storybook\/addon-(.*)/.exec(name);
|
||||
if (!match) return acc;
|
||||
const suffix = match[1];
|
||||
if (suffix === 'essentials') {
|
||||
return [...acc, ...essentialsAddons];
|
||||
}
|
||||
return [...acc, suffix];
|
||||
}, []);
|
||||
|
||||
const addonDirs = [...mainAddons, ...optionValues.addon].map((addon) =>
|
||||
workspacePath('addon', `@storybook/addon-${addon}`, workspaces)
|
||||
);
|
||||
const existingStories = await filterExistsInCodeDir(
|
||||
addonDirs,
|
||||
path.join('template', 'stories')
|
||||
);
|
||||
await Promise.all(
|
||||
existingStories.map(async (packageDir) => linkPackageStories(packageDir, { mainConfig, cwd }))
|
||||
);
|
||||
|
||||
// Ensure that we match stories from the template-stories dir
|
||||
const packageJson = await import(path.join(cwd, 'package.json'));
|
||||
await updateStoriesField(
|
||||
mainConfig,
|
||||
detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT
|
||||
);
|
||||
|
||||
// Add some extra settings (see above for what these do)
|
||||
mainConfig.setFieldValue(['core', 'disableTelemetry'], true);
|
||||
if (builder === '@storybook/builder-webpack5') addEsbuildLoaderToStories(mainConfig);
|
||||
if (builder === '@storybook/builder-vite') forceViteRebuilds(mainConfig);
|
||||
|
||||
await writeConfig(mainConfig);
|
||||
|
||||
await installYarn2({ cwd, dryRun, debug });
|
||||
|
||||
const { link, publish, startVerdaccio } = optionValues;
|
||||
if (link) {
|
||||
await executeCLIStep(steps.link, {
|
||||
argument: cwd,
|
||||
cwd: codeDir,
|
||||
dryRun,
|
||||
optionValues: { local: true, start: false },
|
||||
debug,
|
||||
});
|
||||
} else {
|
||||
if (publish) {
|
||||
await exec('yarn local-registry --publish', { cwd: codeDir }, { dryRun, debug });
|
||||
}
|
||||
|
||||
if (publish || startVerdaccio) {
|
||||
publishController = await servePackages({ dryRun, debug });
|
||||
}
|
||||
|
||||
// We need to add package resolutions to ensure that we only ever install the latest version
|
||||
// of any storybook packages as verdaccio is not able to both proxy to npm and publish over
|
||||
// the top. In theory this could mask issues where different versions cause problems.
|
||||
await addPackageResolutions({ cwd, dryRun, debug });
|
||||
await configureYarn2ForVerdaccio({ cwd, dryRun, debug });
|
||||
|
||||
await exec(
|
||||
'yarn install',
|
||||
{ cwd },
|
||||
{
|
||||
dryRun,
|
||||
startMessage: `⬇️ Installing local dependencies`,
|
||||
errorMessage: `🚨 Installing local dependencies failed`,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Some addon stories require extra dependencies
|
||||
addExtraDependencies({ cwd, dryRun, debug });
|
||||
|
||||
await addPackageScripts({
|
||||
cwd,
|
||||
scripts: {
|
||||
storybook:
|
||||
'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook dev -p 6006',
|
||||
'build-storybook':
|
||||
'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook build',
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
const { start, build } = optionValues;
|
||||
if (start) {
|
||||
await exec(
|
||||
'yarn storybook',
|
||||
{ cwd },
|
||||
{
|
||||
dryRun,
|
||||
startMessage: `⬆️ Starting Storybook`,
|
||||
errorMessage: `🚨 Starting Storybook failed`,
|
||||
debug: true,
|
||||
}
|
||||
);
|
||||
} else if (build) {
|
||||
await executeCLIStep(steps.build, { cwd, dryRun, debug });
|
||||
// TODO serve
|
||||
}
|
||||
|
||||
// TODO start dev
|
||||
|
||||
// Cleanup
|
||||
publishController?.abort();
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const optionValues = await getOptions();
|
||||
return sandbox(optionValues);
|
||||
}
|
||||
|
||||
if (require.main === module) {
|
||||
main().catch((err) => {
|
||||
logger.error(err.message);
|
||||
process.exit(1);
|
||||
});
|
||||
}
|
||||
420
scripts/task.ts
420
scripts/task.ts
@ -1,14 +1,22 @@
|
||||
/* eslint-disable no-await-in-loop, no-restricted-syntax */
|
||||
/* eslint-disable no-await-in-loop */
|
||||
import { AbortController } from 'node-abort-controller';
|
||||
import { getJunitXml } from 'junit-xml';
|
||||
import { outputFile, existsSync, readFile } from 'fs-extra';
|
||||
import { join, resolve } from 'path';
|
||||
import { prompt } from 'prompts';
|
||||
import boxen from 'boxen';
|
||||
import { dedent } from 'ts-dedent';
|
||||
|
||||
import { createOptions, getOptionsOrPrompt } from './utils/options';
|
||||
import { bootstrap } from './tasks/bootstrap';
|
||||
import { createOptions, getCommand, getOptionsOrPrompt, OptionValues } from './utils/options';
|
||||
import { install } from './tasks/install';
|
||||
import { compile } from './tasks/compile';
|
||||
import { publish } from './tasks/publish';
|
||||
import { create } from './tasks/create';
|
||||
import { runRegistryTask } from './tasks/run-registry';
|
||||
import { sandbox } from './tasks/sandbox';
|
||||
import { dev } from './tasks/dev';
|
||||
import { smokeTest } from './tasks/smoke-test';
|
||||
import { build } from './tasks/build';
|
||||
import { serve } from './tasks/serve';
|
||||
import { testRunner } from './tasks/test-runner';
|
||||
import { chromatic } from './tasks/chromatic';
|
||||
import { e2eTests } from './tasks/e2e-tests';
|
||||
@ -16,13 +24,18 @@ import { e2eTests } from './tasks/e2e-tests';
|
||||
import TEMPLATES from '../code/lib/cli/src/repro-templates';
|
||||
|
||||
const sandboxDir = resolve(__dirname, '../sandbox');
|
||||
const codeDir = resolve(__dirname, '../code');
|
||||
const junitDir = resolve(__dirname, '../code/test-results');
|
||||
|
||||
export const extraAddons = ['a11y', 'storysource'];
|
||||
|
||||
export type TemplateKey = keyof typeof TEMPLATES;
|
||||
export type Template = typeof TEMPLATES[TemplateKey];
|
||||
export type Path = string;
|
||||
export type TemplateDetails = {
|
||||
key: TemplateKey;
|
||||
template: Template;
|
||||
codeDir: Path;
|
||||
sandboxDir: Path;
|
||||
builtSandboxDir: Path;
|
||||
junitFilename: Path;
|
||||
@ -32,17 +45,32 @@ type MaybePromise<T> = T | Promise<T>;
|
||||
|
||||
export type Task = {
|
||||
/**
|
||||
* Which tasks run before this task
|
||||
* A description of the task for a prompt
|
||||
*/
|
||||
before?: TaskKey[];
|
||||
description: string;
|
||||
/**
|
||||
* Does this task represent a service for another task?
|
||||
*
|
||||
* Unlink other tasks, if a service is not ready, it doesn't mean the subsequent tasks
|
||||
* must be out of date. As such, services will never be reset back to, although they
|
||||
* will be started if dependent tasks are.
|
||||
*/
|
||||
service?: boolean;
|
||||
/**
|
||||
* Which tasks must be ready before this task can run
|
||||
*/
|
||||
dependsOn?: TaskKey[] | ((options: PassedOptionValues) => TaskKey[]);
|
||||
/**
|
||||
* Is this task already "ready", and potentially not required?
|
||||
*/
|
||||
ready: (templateKey: TemplateKey, details: TemplateDetails) => MaybePromise<boolean>;
|
||||
ready: (details: TemplateDetails, options: PassedOptionValues) => MaybePromise<boolean>;
|
||||
/**
|
||||
* Run the task
|
||||
*/
|
||||
run: (templateKey: TemplateKey, details: TemplateDetails) => MaybePromise<void>;
|
||||
run: (
|
||||
details: TemplateDetails,
|
||||
options: PassedOptionValues
|
||||
) => MaybePromise<void | AbortController>;
|
||||
/**
|
||||
* Does this task handle its own junit results?
|
||||
*/
|
||||
@ -50,147 +78,379 @@ export type Task = {
|
||||
};
|
||||
|
||||
export const tasks = {
|
||||
bootstrap,
|
||||
// These tasks pertain to the whole monorepo, rather than an
|
||||
// individual template/sandbox
|
||||
install,
|
||||
compile,
|
||||
publish,
|
||||
create,
|
||||
'run-registry': runRegistryTask,
|
||||
// These tasks pertain to a single sandbox in the ../sandboxes dir
|
||||
sandbox,
|
||||
dev,
|
||||
'smoke-test': smokeTest,
|
||||
build,
|
||||
serve,
|
||||
'test-runner': testRunner,
|
||||
chromatic,
|
||||
'e2e-tests': e2eTests,
|
||||
};
|
||||
|
||||
type TaskKey = keyof typeof tasks;
|
||||
|
||||
function isSandboxTask(taskKey: TaskKey) {
|
||||
return !['install', 'compile', 'publish', 'run-registry'].includes(taskKey);
|
||||
}
|
||||
|
||||
export const options = createOptions({
|
||||
task: {
|
||||
type: 'string',
|
||||
description: 'What task are you performing (corresponds to CI job)?',
|
||||
description: 'Which task would you like to run?',
|
||||
values: Object.keys(tasks) as TaskKey[],
|
||||
valueDescriptions: Object.values(tasks).map((t) => `${t.description} (${getTaskKey(t)})`),
|
||||
required: true,
|
||||
},
|
||||
startFrom: {
|
||||
type: 'string',
|
||||
description: 'Which task should we start execution from?',
|
||||
values: [...(Object.keys(tasks) as TaskKey[]), 'never', 'auto'] as const,
|
||||
// This is prompted later based on information about what's ready
|
||||
promptType: false,
|
||||
},
|
||||
template: {
|
||||
type: 'string',
|
||||
description: 'What template are you running against?',
|
||||
description: 'What template would you like to make a sandbox for?',
|
||||
values: Object.keys(TEMPLATES) as TemplateKey[],
|
||||
required: true,
|
||||
required: ({ task }) => !task || isSandboxTask(task),
|
||||
promptType: (_, { task }) => isSandboxTask(task),
|
||||
},
|
||||
force: {
|
||||
type: 'boolean',
|
||||
description: 'The task must run, it is an error if it is already ready.',
|
||||
// // TODO -- feature flags
|
||||
// sandboxDir: {
|
||||
// type: 'string',
|
||||
// description: 'What is the name of the directory the sandbox runs in?',
|
||||
// promptType: false,
|
||||
// },
|
||||
addon: {
|
||||
type: 'string[]',
|
||||
description: 'Which extra addons (beyond the CLI defaults) would you like installed?',
|
||||
values: extraAddons,
|
||||
promptType: (_, { task }) => isSandboxTask(task),
|
||||
},
|
||||
before: {
|
||||
link: {
|
||||
type: 'boolean',
|
||||
description: 'Run any required dependencies of the task?',
|
||||
description: 'Link the storybook to the local code?',
|
||||
inverse: true,
|
||||
},
|
||||
fromLocalRepro: {
|
||||
type: 'boolean',
|
||||
description: 'Create the template from a local repro (rather than degitting it)?',
|
||||
promptType: (_, { task }) => isSandboxTask(task),
|
||||
},
|
||||
dryRun: {
|
||||
type: 'boolean',
|
||||
description: "Don't execute commands, just list them (dry run)?",
|
||||
promptType: false,
|
||||
},
|
||||
debug: {
|
||||
type: 'boolean',
|
||||
description: 'Print all the logs to the console',
|
||||
promptType: false,
|
||||
},
|
||||
junit: {
|
||||
type: 'boolean',
|
||||
description: 'Store results in junit format?',
|
||||
promptType: false,
|
||||
},
|
||||
});
|
||||
|
||||
type PassedOptionValues = Omit<OptionValues<typeof options>, 'task' | 'startFrom' | 'junit'>;
|
||||
|
||||
const logger = console;
|
||||
|
||||
function getJunitFilename(taskKey: TaskKey) {
|
||||
return join(junitDir, `${taskKey}.xml`);
|
||||
}
|
||||
|
||||
async function writeJunitXml(taskKey: TaskKey, templateKey: TemplateKey, start: Date, err?: Error) {
|
||||
async function writeJunitXml(
|
||||
taskKey: TaskKey,
|
||||
templateKey: TemplateKey,
|
||||
startTime: Date,
|
||||
err?: Error
|
||||
) {
|
||||
const name = `${taskKey} - ${templateKey}`;
|
||||
const time = (Date.now() - +start) / 1000;
|
||||
const time = (Date.now() - +startTime) / 1000;
|
||||
const testCase = { name, assertions: 1, time, ...(err && { errors: [err] }) };
|
||||
const suite = { name, timestamp: start, time, testCases: [testCase] };
|
||||
const suite = { name, timestamp: startTime, time, testCases: [testCase] };
|
||||
const junitXml = getJunitXml({ time, name, suites: [suite] });
|
||||
const path = getJunitFilename(taskKey);
|
||||
await outputFile(path, junitXml);
|
||||
logger.log(`Test results written to ${resolve(path)}`);
|
||||
}
|
||||
|
||||
async function runTask(
|
||||
taskKey: TaskKey,
|
||||
templateKey: TemplateKey,
|
||||
{
|
||||
mustNotBeReady,
|
||||
mustBeReady,
|
||||
before,
|
||||
junit,
|
||||
}: { mustNotBeReady: boolean; mustBeReady: boolean; before: boolean; junit: boolean }
|
||||
) {
|
||||
const task = tasks[taskKey];
|
||||
const template = TEMPLATES[templateKey];
|
||||
const templateSandboxDir = join(sandboxDir, templateKey.replace('/', '-'));
|
||||
const details = {
|
||||
template,
|
||||
sandboxDir: templateSandboxDir,
|
||||
builtSandboxDir: join(templateSandboxDir, 'storybook-static'),
|
||||
junitFilename: junit && getJunitFilename(taskKey),
|
||||
};
|
||||
function getTaskKey(task: Task): TaskKey {
|
||||
return (Object.entries(tasks) as [TaskKey, Task][]).find(([_, t]) => t === task)[0];
|
||||
}
|
||||
|
||||
if (await task.ready(templateKey, details)) {
|
||||
if (mustNotBeReady) throw new Error(`❌ ${taskKey} task has already run, this is unexpected!`);
|
||||
/**
|
||||
*
|
||||
* Get a list of tasks that need to be (possibly) run, in order, to
|
||||
* be able to run `finalTask`.
|
||||
*/
|
||||
function getTaskList(finalTask: Task, optionValues: PassedOptionValues) {
|
||||
const taskDeps = new Map<Task, Task[]>();
|
||||
// Which tasks depend on a given task
|
||||
const tasksThatDepend = new Map<Task, Task[]>();
|
||||
|
||||
logger.debug(`✅ ${taskKey} task not required!`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mustBeReady) {
|
||||
throw new Error(`❌ ${taskKey} task has not already run, this is unexpected!`);
|
||||
}
|
||||
|
||||
if (task.before?.length > 0) {
|
||||
for (const beforeKey of task.before) {
|
||||
await runTask(beforeKey, templateKey, {
|
||||
mustNotBeReady: false,
|
||||
mustBeReady: !before,
|
||||
before,
|
||||
junit: false, // never store junit results for dependent tasks
|
||||
});
|
||||
const addTask = (task: Task, dependent?: Task) => {
|
||||
if (tasksThatDepend.has(task)) {
|
||||
if (!dependent) throw new Error('Unexpected task without dependent seen a second time');
|
||||
tasksThatDepend.set(task, tasksThatDepend.get(task).concat(dependent));
|
||||
return;
|
||||
}
|
||||
|
||||
// This is the first time we've seen this task
|
||||
tasksThatDepend.set(task, dependent ? [dependent] : []);
|
||||
|
||||
const dependedTaskNames =
|
||||
typeof task.dependsOn === 'function' ? task.dependsOn(optionValues) : task.dependsOn || [];
|
||||
const dependedTasks = dependedTaskNames.map((n) => tasks[n]);
|
||||
taskDeps.set(task, dependedTasks);
|
||||
|
||||
dependedTasks.forEach((t) => addTask(t, task));
|
||||
};
|
||||
addTask(finalTask);
|
||||
|
||||
// We need to sort the tasks topologically so we run each task before the tasks that
|
||||
// depend on it. This is Kahn's algorithm :shrug:
|
||||
const sortedTasks = [] as Task[];
|
||||
const tasksWithoutDependencies = [finalTask];
|
||||
|
||||
while (taskDeps.size !== sortedTasks.length) {
|
||||
const task = tasksWithoutDependencies.pop();
|
||||
if (!task) throw new Error('Topological sort failed, is there a cyclic task dependency?');
|
||||
|
||||
sortedTasks.unshift(task);
|
||||
taskDeps.get(task).forEach((depTask) => {
|
||||
const remainingTasksThatDepend = tasksThatDepend
|
||||
.get(depTask)
|
||||
.filter((t) => !sortedTasks.includes(t));
|
||||
if (remainingTasksThatDepend.length === 0) tasksWithoutDependencies.push(depTask);
|
||||
});
|
||||
}
|
||||
|
||||
const start = new Date();
|
||||
try {
|
||||
await task.run(templateKey, details);
|
||||
return { sortedTasks, tasksThatDepend };
|
||||
}
|
||||
|
||||
if (junit && !task.junit) await writeJunitXml(taskKey, templateKey, start);
|
||||
type TaskStatus =
|
||||
| 'ready'
|
||||
| 'unready'
|
||||
| 'running'
|
||||
| 'complete'
|
||||
| 'failed'
|
||||
| 'serving'
|
||||
| 'notserving';
|
||||
const statusToEmoji: Record<TaskStatus, string> = {
|
||||
ready: '🟢',
|
||||
unready: '🟡',
|
||||
running: '🔄',
|
||||
complete: '✅',
|
||||
failed: '❌',
|
||||
serving: '🔊',
|
||||
notserving: '🔇',
|
||||
};
|
||||
function writeTaskList(statusMap: Map<Task, TaskStatus>) {
|
||||
logger.info(
|
||||
[...statusMap.entries()]
|
||||
.map(([task, status]) => `${statusToEmoji[status]} ${getTaskKey(task)}`)
|
||||
.join(' > ')
|
||||
);
|
||||
logger.info();
|
||||
}
|
||||
|
||||
async function runTask(task: Task, details: TemplateDetails, optionValues: PassedOptionValues) {
|
||||
const startTime = new Date();
|
||||
try {
|
||||
await task.run(details, optionValues);
|
||||
|
||||
if (details.junitFilename && !task.junit)
|
||||
await writeJunitXml(getTaskKey(task), details.key, startTime);
|
||||
} catch (err) {
|
||||
if (junit && !task.junit) await writeJunitXml(taskKey, templateKey, start, err);
|
||||
if (details.junitFilename && !task.junit)
|
||||
await writeJunitXml(getTaskKey(task), details.key, startTime, err);
|
||||
|
||||
throw err;
|
||||
} finally {
|
||||
const { junitFilename } = details;
|
||||
if (existsSync(junitFilename)) {
|
||||
const junitXml = await (await readFile(junitFilename)).toString();
|
||||
const prefixedXml = junitXml.replace(/classname="(.*)"/g, `classname="${templateKey} $1"`);
|
||||
const prefixedXml = junitXml.replace(/classname="(.*)"/g, `classname="${details.key} $1"`);
|
||||
await outputFile(junitFilename, prefixedXml);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function run() {
|
||||
const {
|
||||
task: taskKey,
|
||||
template: templateKey,
|
||||
force,
|
||||
before,
|
||||
junit,
|
||||
} = await getOptionsOrPrompt('yarn task', options);
|
||||
const allOptionValues = await getOptionsOrPrompt('yarn task', options);
|
||||
|
||||
return runTask(taskKey, templateKey, {
|
||||
mustBeReady: false,
|
||||
mustNotBeReady: force,
|
||||
before,
|
||||
junit,
|
||||
});
|
||||
const { task: taskKey, startFrom, junit, ...optionValues } = allOptionValues;
|
||||
|
||||
const finalTask = tasks[taskKey];
|
||||
const { template: templateKey } = optionValues;
|
||||
const template = TEMPLATES[templateKey];
|
||||
const templateSandboxDir = templateKey && join(sandboxDir, templateKey.replace('/', '-'));
|
||||
const details = {
|
||||
key: templateKey,
|
||||
template,
|
||||
codeDir,
|
||||
sandboxDir: templateSandboxDir,
|
||||
builtSandboxDir: templateKey && join(templateSandboxDir, 'storybook-static'),
|
||||
junitFilename: junit && getJunitFilename(taskKey),
|
||||
};
|
||||
|
||||
const { sortedTasks, tasksThatDepend } = getTaskList(finalTask, optionValues);
|
||||
const sortedTasksReady = await Promise.all(
|
||||
sortedTasks.map((t) => t.ready(details, optionValues))
|
||||
);
|
||||
|
||||
logger.info(`Task readiness up to ${taskKey}`);
|
||||
const initialTaskStatus = (task: Task, ready: boolean) => {
|
||||
if (task.service) {
|
||||
return ready ? 'serving' : 'notserving';
|
||||
}
|
||||
return ready ? 'ready' : 'unready';
|
||||
};
|
||||
const statuses = new Map<Task, TaskStatus>(
|
||||
sortedTasks.map((task, index) => [task, initialTaskStatus(task, sortedTasksReady[index])])
|
||||
);
|
||||
writeTaskList(statuses);
|
||||
|
||||
function setUnready(task: Task) {
|
||||
// If the task is a service we don't need to set it unready but we still need to do so for
|
||||
// it's dependencies
|
||||
if (!task.service) statuses.set(task, 'unready');
|
||||
tasksThatDepend
|
||||
.get(task)
|
||||
.filter((t) => !t.service)
|
||||
.forEach(setUnready);
|
||||
}
|
||||
|
||||
// NOTE: we don't include services in the first unready task. We only need to rewind back to a
|
||||
// service if the user explicitly asks. It's expected that a service is no longer running.
|
||||
const firstUnready = sortedTasks.find((task) => statuses.get(task) === 'unready');
|
||||
if (startFrom === 'auto') {
|
||||
// Don't reset anything!
|
||||
} else if (startFrom === 'never') {
|
||||
if (!firstUnready) throw new Error(`Task ${taskKey} is ready`);
|
||||
if (firstUnready !== finalTask)
|
||||
throw new Error(`Task ${getTaskKey(firstUnready)} was not ready`);
|
||||
} else if (startFrom) {
|
||||
// set to reset back to a specific task
|
||||
if (firstUnready && sortedTasks.indexOf(tasks[startFrom]) > sortedTasks.indexOf(firstUnready)) {
|
||||
throw new Error(
|
||||
`Task ${getTaskKey(firstUnready)} was not ready, earlier than your request ${startFrom}.`
|
||||
);
|
||||
}
|
||||
setUnready(tasks[startFrom]);
|
||||
} else if (firstUnready === sortedTasks[0]) {
|
||||
// We need to do everything, no need to change anything
|
||||
} else if (sortedTasks.length === 1) {
|
||||
setUnready(sortedTasks[0]);
|
||||
} else {
|
||||
// We don't know what to do! Let's ask
|
||||
const { startFromTask } = await prompt(
|
||||
{
|
||||
type: 'select',
|
||||
message: firstUnready
|
||||
? `We need to run all tasks after ${getTaskKey(
|
||||
firstUnready
|
||||
)}, would you like to go further back?`
|
||||
: `Which task would you like to start from?`,
|
||||
name: 'startFromTask',
|
||||
choices: sortedTasks
|
||||
.slice(0, firstUnready && sortedTasks.indexOf(firstUnready) + 1)
|
||||
.reverse()
|
||||
.map((t) => ({
|
||||
title: `${t.description} (${getTaskKey(t)})`,
|
||||
value: t,
|
||||
})),
|
||||
},
|
||||
{
|
||||
onCancel: () => {
|
||||
logger.log('Command cancelled by the user. Exiting...');
|
||||
process.exit(1);
|
||||
},
|
||||
}
|
||||
);
|
||||
setUnready(startFromTask);
|
||||
}
|
||||
|
||||
for (let i = 0; i < sortedTasks.length; i += 1) {
|
||||
const task = sortedTasks[i];
|
||||
const status = statuses.get(task);
|
||||
|
||||
let shouldRun = status === 'unready';
|
||||
if (status === 'notserving') {
|
||||
shouldRun =
|
||||
finalTask === task ||
|
||||
!!tasksThatDepend.get(task).find((t) => statuses.get(t) === 'unready');
|
||||
}
|
||||
|
||||
if (shouldRun) {
|
||||
statuses.set(task, 'running');
|
||||
writeTaskList(statuses);
|
||||
|
||||
try {
|
||||
await runTask(task, details, {
|
||||
...optionValues,
|
||||
// Always debug the final task so we can see it's output fully
|
||||
debug: sortedTasks[i] === finalTask ? true : optionValues.debug,
|
||||
});
|
||||
} catch (err) {
|
||||
logger.error(`Error running task ${getTaskKey(task)}:`);
|
||||
logger.error();
|
||||
logger.error(err);
|
||||
|
||||
if (process.env.CI) {
|
||||
logger.error(
|
||||
boxen(
|
||||
dedent`
|
||||
To reproduce this error locally, run:
|
||||
|
||||
${getCommand('yarn task', options, {
|
||||
...allOptionValues,
|
||||
link: true,
|
||||
startFrom: 'auto',
|
||||
})}
|
||||
|
||||
Note this uses locally linking which in rare cases behaves differently to CI. For a closer match, run:
|
||||
|
||||
${getCommand('yarn task', options, {
|
||||
...allOptionValues,
|
||||
startFrom: 'auto',
|
||||
})}`,
|
||||
{ borderStyle: 'round', padding: 1, borderColor: '#F1618C' } as any
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
return 1;
|
||||
}
|
||||
statuses.set(task, task.service ? 'serving' : 'complete');
|
||||
|
||||
// If the task is a service, we want to stay open until we are ctrl-ced
|
||||
if (sortedTasks[i] === finalTask && finalTask.service) {
|
||||
await new Promise(() => {});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return 0;
|
||||
}
|
||||
|
||||
if (require.main === module) {
|
||||
run()
|
||||
.then(() => process.exit(0))
|
||||
.then((status) => process.exit(status))
|
||||
.catch((err) => {
|
||||
logger.error();
|
||||
logger.error(err.message);
|
||||
logger.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
import { exec } from '../utils/exec';
|
||||
import type { Task } from '../task';
|
||||
|
||||
export const bootstrap: Task = {
|
||||
before: [],
|
||||
async ready() {
|
||||
// It isn't really possible to tell if bootstrapping is required
|
||||
return false;
|
||||
},
|
||||
async run() {
|
||||
return exec(
|
||||
'yarn bootstrap --core',
|
||||
{},
|
||||
{
|
||||
startMessage: '🥾 Bootstrapping',
|
||||
errorMessage: '❌ Failed to bootstrap',
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
@ -3,11 +3,12 @@ import type { Task } from '../task';
|
||||
import { exec } from '../utils/exec';
|
||||
|
||||
export const build: Task = {
|
||||
before: ['create'],
|
||||
async ready(_, { builtSandboxDir }) {
|
||||
description: 'Build the static version of the sandbox',
|
||||
dependsOn: ['sandbox'],
|
||||
async ready({ builtSandboxDir }) {
|
||||
return pathExists(builtSandboxDir);
|
||||
},
|
||||
async run(_, { sandboxDir }) {
|
||||
return exec(`yarn build-storybook --quiet`, { cwd: sandboxDir });
|
||||
async run({ sandboxDir }, { dryRun, debug }) {
|
||||
return exec(`yarn build-storybook --quiet`, { cwd: sandboxDir }, { dryRun, debug });
|
||||
},
|
||||
};
|
||||
|
||||
@ -2,13 +2,14 @@ import type { Task } from '../task';
|
||||
import { exec } from '../utils/exec';
|
||||
|
||||
export const chromatic: Task = {
|
||||
before: ['build'],
|
||||
description: 'Run Chromatic against the sandbox',
|
||||
dependsOn: ['build'],
|
||||
junit: true,
|
||||
async ready() {
|
||||
return false;
|
||||
},
|
||||
async run(templateKey, { sandboxDir, builtSandboxDir, junitFilename }) {
|
||||
const tokenEnvVarName = `CHROMATIC_TOKEN_${templateKey.toUpperCase().replace(/\/|-|\./g, '_')}`;
|
||||
async run({ key, sandboxDir, builtSandboxDir, junitFilename }, { dryRun, debug }) {
|
||||
const tokenEnvVarName = `CHROMATIC_TOKEN_${key.toUpperCase().replace(/\/|-|\./g, '_')}`;
|
||||
const token = process.env[tokenEnvVarName];
|
||||
|
||||
await exec(
|
||||
@ -18,7 +19,7 @@ export const chromatic: Task = {
|
||||
--junit-report=${junitFilename} \
|
||||
--projectToken=${token}`,
|
||||
{ cwd: sandboxDir },
|
||||
{ debug: true }
|
||||
{ dryRun, debug }
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
42
scripts/tasks/compile.ts
Normal file
42
scripts/tasks/compile.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import { readFile } from 'fs-extra';
|
||||
import { resolve } from 'path';
|
||||
|
||||
import { maxConcurrentTasks } from '../utils/maxConcurrentTasks';
|
||||
import { exec } from '../utils/exec';
|
||||
import type { Task } from '../task';
|
||||
|
||||
const linkedContents = `export * from '../src/index'`;
|
||||
const linkCommand = `nx run-many --target="prep" --all --parallel --exclude=@storybook/addon-storyshots,@storybook/addon-storyshots-puppeteer -- --reset`;
|
||||
const noLinkCommand = `nx run-many --target="prep" --all --parallel=8 ${
|
||||
process.env.CI ? `--max-parallel=${maxConcurrentTasks}` : ''
|
||||
} -- --reset --optimized`;
|
||||
|
||||
export const compile: Task = {
|
||||
description: 'Compile the source code of the monorepo',
|
||||
dependsOn: ['install'],
|
||||
async ready({ codeDir }, { link }) {
|
||||
try {
|
||||
// To check if the code has been compiled as we need, we check the compiled output of
|
||||
// `@storybook/store`. To check if it has been built for publishing (i.e. `--no-link`),
|
||||
// we check if it built types or references source files directly.
|
||||
const contents = await readFile(resolve(codeDir, './lib/store/dist/index.d.ts'), 'utf8');
|
||||
const isLinkedContents = contents.indexOf(linkedContents) !== -1;
|
||||
if (link) return isLinkedContents;
|
||||
return !isLinkedContents;
|
||||
} catch (err) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
async run({ codeDir }, { link, dryRun, debug }) {
|
||||
return exec(
|
||||
link ? linkCommand : noLinkCommand,
|
||||
{ cwd: codeDir },
|
||||
{
|
||||
startMessage: '🥾 Bootstrapping',
|
||||
errorMessage: '❌ Failed to bootstrap',
|
||||
dryRun,
|
||||
debug,
|
||||
}
|
||||
);
|
||||
},
|
||||
};
|
||||
@ -1,23 +0,0 @@
|
||||
import { pathExists } from 'fs-extra';
|
||||
|
||||
import type { Task } from '../task';
|
||||
import { options, sandbox } from '../sandbox';
|
||||
import { getDefaults } from '../utils/options';
|
||||
|
||||
export const create: Task = {
|
||||
before: ['publish'],
|
||||
async ready(_, { sandboxDir }) {
|
||||
return pathExists(sandboxDir);
|
||||
},
|
||||
async run(templateKey) {
|
||||
return sandbox({
|
||||
...getDefaults(options),
|
||||
template: templateKey,
|
||||
link: false,
|
||||
publish: false,
|
||||
startVerdaccio: true,
|
||||
start: false,
|
||||
debug: true,
|
||||
});
|
||||
},
|
||||
};
|
||||
30
scripts/tasks/dev.ts
Normal file
30
scripts/tasks/dev.ts
Normal file
@ -0,0 +1,30 @@
|
||||
import { AbortController } from 'node-abort-controller';
|
||||
import detectFreePort from 'detect-port';
|
||||
|
||||
import type { Task } from '../task';
|
||||
import { exec } from '../utils/exec';
|
||||
|
||||
export const START_PORT = 6006;
|
||||
|
||||
export const dev: Task = {
|
||||
description: 'Run the sandbox in development mode',
|
||||
service: true,
|
||||
dependsOn: ['sandbox'],
|
||||
async ready() {
|
||||
return (await detectFreePort(START_PORT)) !== START_PORT;
|
||||
},
|
||||
async run({ sandboxDir, codeDir }, { dryRun, debug }) {
|
||||
const controller = new AbortController();
|
||||
exec(
|
||||
`yarn storybook`,
|
||||
{ cwd: sandboxDir },
|
||||
{ dryRun, debug, signal: controller.signal as AbortSignal }
|
||||
).catch((err) => {
|
||||
// If aborted, we want to make sure the rejection is handled.
|
||||
if (!err.killed) throw err;
|
||||
});
|
||||
await exec(`yarn wait-on http://localhost:${START_PORT}`, { cwd: codeDir }, { dryRun, debug });
|
||||
|
||||
return controller;
|
||||
},
|
||||
};
|
||||
@ -1,26 +1,28 @@
|
||||
import type { Task } from '../task';
|
||||
import { exec } from '../utils/exec';
|
||||
import { serveSandbox } from '../utils/serve-sandbox';
|
||||
import { PORT } from './serve';
|
||||
|
||||
export const e2eTests: Task = {
|
||||
before: ['build'],
|
||||
description: 'Run the end-to-end test suite against the sandbox',
|
||||
dependsOn: ['serve'],
|
||||
junit: true,
|
||||
async ready() {
|
||||
return false;
|
||||
},
|
||||
async run(_, { builtSandboxDir, junitFilename, template }) {
|
||||
const storybookController = await serveSandbox(builtSandboxDir, {});
|
||||
|
||||
await exec('yarn playwright test --reporter=junit', {
|
||||
env: {
|
||||
STORYBOOK_URL: `http://localhost:8001`,
|
||||
STORYBOOK_TEMPLATE_NAME: template.name,
|
||||
...(junitFilename && {
|
||||
PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename,
|
||||
}),
|
||||
async run({ codeDir, junitFilename, template }, { dryRun, debug }) {
|
||||
await exec(
|
||||
'yarn playwright test --reporter=junit',
|
||||
{
|
||||
env: {
|
||||
STORYBOOK_URL: `http://localhost:${PORT}`,
|
||||
STORYBOOK_TEMPLATE_NAME: template.name,
|
||||
...(junitFilename && {
|
||||
PLAYWRIGHT_JUNIT_OUTPUT_NAME: junitFilename,
|
||||
}),
|
||||
},
|
||||
cwd: codeDir,
|
||||
},
|
||||
});
|
||||
|
||||
storybookController.abort();
|
||||
{ dryRun, debug }
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
14
scripts/tasks/install.ts
Normal file
14
scripts/tasks/install.ts
Normal file
@ -0,0 +1,14 @@
|
||||
import { pathExists } from 'fs-extra';
|
||||
import { join } from 'path';
|
||||
import type { Task } from '../task';
|
||||
import { exec } from '../utils/exec';
|
||||
|
||||
export const install: Task = {
|
||||
description: 'Install the dependencies of the monorepo',
|
||||
async ready({ codeDir }) {
|
||||
return pathExists(join(codeDir, 'node_modules'));
|
||||
},
|
||||
async run({ codeDir }, { dryRun, debug }) {
|
||||
return exec(`yarn install`, { cwd: codeDir }, { dryRun, debug });
|
||||
},
|
||||
};
|
||||
@ -7,17 +7,20 @@ import type { Task } from '../task';
|
||||
const verdaccioCacheDir = resolve(__dirname, '../../.verdaccio-cache');
|
||||
|
||||
export const publish: Task = {
|
||||
before: ['bootstrap'],
|
||||
description: 'Publish the packages of the monorepo to an internal npm server',
|
||||
dependsOn: ['compile'],
|
||||
async ready() {
|
||||
return pathExists(verdaccioCacheDir);
|
||||
},
|
||||
async run() {
|
||||
async run({ codeDir }, { dryRun, debug }) {
|
||||
return exec(
|
||||
'yarn local-registry --publish',
|
||||
{},
|
||||
{ cwd: codeDir },
|
||||
{
|
||||
startMessage: '📕 Publishing packages',
|
||||
errorMessage: '❌ Failed publishing packages',
|
||||
dryRun,
|
||||
debug,
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
37
scripts/tasks/run-registry.ts
Normal file
37
scripts/tasks/run-registry.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { AbortController } from 'node-abort-controller';
|
||||
import detectFreePort from 'detect-port';
|
||||
import { resolve } from 'path';
|
||||
|
||||
import { exec } from '../utils/exec';
|
||||
import type { Task } from '../task';
|
||||
|
||||
const codeDir = resolve(__dirname, '../../code');
|
||||
|
||||
export async function runRegistry({ dryRun, debug }: { dryRun?: boolean; debug?: boolean }) {
|
||||
const controller = new AbortController();
|
||||
|
||||
exec(
|
||||
'CI=true yarn local-registry --open',
|
||||
{ cwd: codeDir },
|
||||
{ dryRun, debug, signal: controller.signal as AbortSignal }
|
||||
).catch((err) => {
|
||||
// If aborted, we want to make sure the rejection is handled.
|
||||
if (!err.killed) throw err;
|
||||
});
|
||||
await exec('yarn wait-on http://localhost:6001', { cwd: codeDir }, { dryRun, debug });
|
||||
|
||||
return controller;
|
||||
}
|
||||
|
||||
const REGISTRY_PORT = 6001;
|
||||
export const runRegistryTask: Task = {
|
||||
description: 'Run the internal npm server',
|
||||
service: true,
|
||||
dependsOn: ['publish'],
|
||||
async ready() {
|
||||
return (await detectFreePort(REGISTRY_PORT)) !== REGISTRY_PORT;
|
||||
},
|
||||
async run(_, options) {
|
||||
return runRegistry(options);
|
||||
},
|
||||
};
|
||||
368
scripts/tasks/sandbox-parts.ts
Normal file
368
scripts/tasks/sandbox-parts.ts
Normal file
@ -0,0 +1,368 @@
|
||||
// This file requires many imports from `../code`, which requires both an install and bootstrap of
|
||||
// the repo to work properly. So we load it async in the task runner *after* those steps.
|
||||
|
||||
/* eslint-disable no-restricted-syntax, no-await-in-loop */
|
||||
import { copy, ensureSymlink, ensureDir, existsSync, pathExists } from 'fs-extra';
|
||||
import { join, resolve, sep } from 'path';
|
||||
import dedent from 'ts-dedent';
|
||||
|
||||
import { Task } from '../task';
|
||||
import { executeCLIStep, steps } from '../utils/cli-step';
|
||||
import { installYarn2, configureYarn2ForVerdaccio, addPackageResolutions } from '../utils/yarn';
|
||||
import { exec } from '../utils/exec';
|
||||
import { ConfigFile, writeConfig } from '../../code/lib/csf-tools';
|
||||
import { filterExistsInCodeDir } from '../utils/filterExistsInCodeDir';
|
||||
import { findFirstPath } from '../utils/paths';
|
||||
import { detectLanguage } from '../../code/lib/cli/src/detect';
|
||||
import { SupportedLanguage } from '../../code/lib/cli/src/project_types';
|
||||
import { addPackageScripts } from '../utils/package-json';
|
||||
import { addPreviewAnnotations, readMainConfig } from '../utils/main-js';
|
||||
import { JsPackageManagerFactory } from '../../code/lib/cli/src/js-package-manager';
|
||||
import { workspacePath } from '../utils/workspace';
|
||||
import { babelParse } from '../../code/lib/csf-tools/src/babelParse';
|
||||
|
||||
const reprosDir = resolve(__dirname, '../../repros');
|
||||
const codeDir = resolve(__dirname, '../../code');
|
||||
const logger = console;
|
||||
|
||||
export const essentialsAddons = [
|
||||
'actions',
|
||||
'backgrounds',
|
||||
'controls',
|
||||
'docs',
|
||||
'highlight',
|
||||
'measure',
|
||||
'outline',
|
||||
'toolbars',
|
||||
'viewport',
|
||||
];
|
||||
|
||||
export const create: Task['run'] = async (
|
||||
{ key, template, sandboxDir },
|
||||
{ addon: addons, fromLocalRepro, dryRun, debug }
|
||||
) => {
|
||||
const parentDir = resolve(sandboxDir, '..');
|
||||
await ensureDir(parentDir);
|
||||
|
||||
if (fromLocalRepro) {
|
||||
const srcDir = join(reprosDir, key, 'after-storybook');
|
||||
if (!existsSync(srcDir)) {
|
||||
throw new Error(dedent`
|
||||
Missing repro directory '${srcDir}'!
|
||||
|
||||
To run sandbox against a local repro, you must have already generated
|
||||
the repro template in the /repros directory using:
|
||||
the repro template in the /repros directory using:
|
||||
|
||||
yarn generate-repros-next --template ${key}
|
||||
`);
|
||||
}
|
||||
await copy(srcDir, sandboxDir);
|
||||
} else {
|
||||
await executeCLIStep(steps.repro, {
|
||||
argument: key,
|
||||
optionValues: { output: sandboxDir, branch: 'next' },
|
||||
cwd: parentDir,
|
||||
dryRun,
|
||||
debug,
|
||||
});
|
||||
}
|
||||
|
||||
const cwd = sandboxDir;
|
||||
for (const addon of addons) {
|
||||
const addonName = `@storybook/addon-${addon}`;
|
||||
await executeCLIStep(steps.add, { argument: addonName, cwd, dryRun, debug });
|
||||
}
|
||||
|
||||
const mainConfig = await readMainConfig({ cwd });
|
||||
|
||||
mainConfig.setFieldValue(['core', 'disableTelemetry'], true);
|
||||
if (template.expected.builder === '@storybook/builder-vite') forceViteRebuilds(mainConfig);
|
||||
await writeConfig(mainConfig);
|
||||
};
|
||||
|
||||
export const install: Task['run'] = async ({ sandboxDir }, { link, dryRun, debug }) => {
|
||||
const cwd = sandboxDir;
|
||||
|
||||
await installYarn2({ cwd, dryRun, debug });
|
||||
|
||||
if (link) {
|
||||
await executeCLIStep(steps.link, {
|
||||
argument: sandboxDir,
|
||||
cwd: codeDir,
|
||||
optionValues: { local: true, start: false },
|
||||
dryRun,
|
||||
debug,
|
||||
});
|
||||
} else {
|
||||
// We need to add package resolutions to ensure that we only ever install the latest version
|
||||
// of any storybook packages as verdaccio is not able to both proxy to npm and publish over
|
||||
// the top. In theory this could mask issues where different versions cause problems.
|
||||
await addPackageResolutions({ cwd, dryRun, debug });
|
||||
await configureYarn2ForVerdaccio({ cwd, dryRun, debug });
|
||||
|
||||
await exec(
|
||||
'yarn install',
|
||||
{ cwd },
|
||||
{
|
||||
dryRun,
|
||||
startMessage: `⬇️ Installing local dependencies`,
|
||||
errorMessage: `🚨 Installing local dependencies failed`,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
logger.info(`🔢 Adding package scripts:`);
|
||||
await addPackageScripts({
|
||||
cwd,
|
||||
scripts: {
|
||||
storybook:
|
||||
'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook dev -p 6006',
|
||||
'build-storybook':
|
||||
'NODE_OPTIONS="--preserve-symlinks --preserve-symlinks-main" storybook build',
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// Ensure that sandboxes can refer to story files defined in `code/`.
|
||||
// Most WP-based build systems will not compile files outside of the project root or 'src/` or
|
||||
// similar. Plus they aren't guaranteed to handle TS files. So we need to patch in esbuild
|
||||
// loader for such files. NOTE this isn't necessary for Vite, as far as we know.
|
||||
function addEsbuildLoaderToStories(mainConfig: ConfigFile) {
|
||||
// NOTE: the test regexp here will apply whether the path is symlink-preserved or otherwise
|
||||
const esbuildLoaderPath = require.resolve('../../code/node_modules/esbuild-loader');
|
||||
const storiesMdxLoaderPath = require.resolve(
|
||||
'../../code/node_modules/@storybook/mdx1-csf/loader'
|
||||
);
|
||||
const babelLoaderPath = require.resolve('babel-loader');
|
||||
const jsxPluginPath = require.resolve('@babel/plugin-transform-react-jsx');
|
||||
const webpackFinalCode = `
|
||||
(config) => ({
|
||||
...config,
|
||||
module: {
|
||||
...config.modules,
|
||||
rules: [
|
||||
// Ensure esbuild-loader applies to all files in ./template-stories
|
||||
{
|
||||
test: [/\\/template-stories\\//],
|
||||
exclude: [/\\.mdx$/],
|
||||
loader: '${esbuildLoaderPath}',
|
||||
options: {
|
||||
loader: 'tsx',
|
||||
target: 'es2015',
|
||||
},
|
||||
},
|
||||
// Handle MDX files per the addon-docs presets (ish)
|
||||
{
|
||||
test: [/\\/template-stories\\//],
|
||||
include: [/\\.stories\\.mdx$/],
|
||||
use: [
|
||||
{
|
||||
loader: '${babelLoaderPath}',
|
||||
options: {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
plugins: ['${jsxPluginPath}'],
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: '${storiesMdxLoaderPath}',
|
||||
options: {
|
||||
skipCsf: false,
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
test: [/\\/template-stories\\//],
|
||||
include: [/\\.mdx$/],
|
||||
exclude: [/\\.stories\\.mdx$/],
|
||||
use: [
|
||||
{
|
||||
loader: '${babelLoaderPath}',
|
||||
options: {
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
plugins: ['${jsxPluginPath}'],
|
||||
}
|
||||
},
|
||||
{
|
||||
loader: '${storiesMdxLoaderPath}',
|
||||
options: {
|
||||
skipCsf: true,
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
// Ensure no other loaders from the framework apply
|
||||
...config.module.rules.map(rule => ({
|
||||
...rule,
|
||||
exclude: [/\\/template-stories\\//].concat(rule.exclude || []),
|
||||
})),
|
||||
],
|
||||
},
|
||||
})`;
|
||||
mainConfig.setFieldNode(
|
||||
['webpackFinal'],
|
||||
// @ts-expect-error (not sure why TS complains here, it does exist)
|
||||
babelParse(webpackFinalCode).program.body[0].expression
|
||||
);
|
||||
}
|
||||
|
||||
// Recompile optimized deps on each startup, so you can change @storybook/* packages and not
|
||||
// have to clear caches.
|
||||
function forceViteRebuilds(mainConfig: ConfigFile) {
|
||||
const viteFinalCode = `
|
||||
(config) => ({
|
||||
...config,
|
||||
optimizeDeps: {
|
||||
...config.optimizeDeps,
|
||||
force: true,
|
||||
},
|
||||
})`;
|
||||
mainConfig.setFieldNode(
|
||||
['viteFinal'],
|
||||
// @ts-expect-error (not sure why TS complains here, it does exist)
|
||||
babelParse(viteFinalCode).program.body[0].expression
|
||||
);
|
||||
}
|
||||
|
||||
// packageDir is eg 'renderers/react', 'addons/actions'
|
||||
async function linkPackageStories(
|
||||
packageDir: string,
|
||||
{ mainConfig, cwd, linkInDir }: { mainConfig: ConfigFile; cwd: string; linkInDir?: string }
|
||||
) {
|
||||
const source = join(codeDir, packageDir, 'template', 'stories');
|
||||
// By default we link `stories` directories
|
||||
// e.g '../../../code/lib/store/template/stories' to 'template-stories/lib/store'
|
||||
// if the directory <code>/lib/store/template/stories exists
|
||||
//
|
||||
// The files must be linked in the cwd, in order to ensure that any dependencies they
|
||||
// reference are resolved in the cwd. In particular 'react' resolved by MDX files.
|
||||
const target = linkInDir
|
||||
? resolve(linkInDir, packageDir)
|
||||
: resolve(cwd, 'template-stories', packageDir);
|
||||
await ensureSymlink(source, target);
|
||||
|
||||
// Add `previewAnnotation` entries of the form
|
||||
// './template-stories/lib/store/preview.[tj]s'
|
||||
// if the file <code>/lib/store/template/stories/preview.[jt]s exists
|
||||
await Promise.all(
|
||||
['js', 'ts'].map(async (ext) => {
|
||||
const previewFile = `preview.${ext}`;
|
||||
const previewPath = join(codeDir, packageDir, 'template', 'stories', previewFile);
|
||||
if (await pathExists(previewPath)) {
|
||||
addPreviewAnnotations(mainConfig, [
|
||||
`./${join(linkInDir ? 'src/stories' : 'template-stories', packageDir, previewFile)}`,
|
||||
]);
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Update the stories field to ensure that:
|
||||
// a) no TS files that are linked from the renderer are picked up in non-TS projects
|
||||
// b) files in ./template-stories are not matched by the default glob
|
||||
async function updateStoriesField(mainConfig: ConfigFile, isJs: boolean) {
|
||||
const stories = mainConfig.getFieldValue(['stories']) as string[];
|
||||
|
||||
// If the project is a JS project, let's make sure any linked in TS stories from the
|
||||
// renderer inside src|stories are simply ignored.
|
||||
const updatedStories = isJs
|
||||
? stories.map((specifier) => specifier.replace('js|jsx|ts|tsx', 'js|jsx'))
|
||||
: stories;
|
||||
|
||||
// FIXME: '*.@(mdx|stories.mdx|stories.tsx|stories.ts|stories.jsx|stories.js'
|
||||
const linkedStories = join('..', 'template-stories', '**', '*.stories.@(js|jsx|ts|tsx|mdx)');
|
||||
const linkedMdx = join('..', 'template-stories/addons/docs/docs2', '**', '*.@(mdx)');
|
||||
|
||||
mainConfig.setFieldValue(['stories'], [...updatedStories, linkedStories, linkedMdx]);
|
||||
}
|
||||
|
||||
function addExtraDependencies({
|
||||
cwd,
|
||||
dryRun,
|
||||
debug,
|
||||
}: {
|
||||
cwd: string;
|
||||
dryRun: boolean;
|
||||
debug: boolean;
|
||||
}) {
|
||||
// web-components doesn't install '@storybook/testing-library' by default
|
||||
const extraDeps = ['@storybook/jest', '@storybook/testing-library@0.0.14-next.0'];
|
||||
if (debug) logger.log('🎁 Adding extra deps', extraDeps);
|
||||
if (!dryRun) {
|
||||
const packageManager = JsPackageManagerFactory.getPackageManager(false, cwd);
|
||||
packageManager.addDependencies({ installAsDevDependencies: true }, extraDeps);
|
||||
}
|
||||
}
|
||||
|
||||
export const addStories: Task['run'] = async (
|
||||
{ sandboxDir, template },
|
||||
{ addon: extraAddons, dryRun, debug }
|
||||
) => {
|
||||
const cwd = sandboxDir;
|
||||
const storiesPath = await findFirstPath([join('src', 'stories'), 'stories'], { cwd });
|
||||
|
||||
const mainConfig = await readMainConfig({ cwd });
|
||||
|
||||
// Link in the template/components/index.js from store, the renderer and the addons
|
||||
const rendererPath = await workspacePath('renderer', template.expected.renderer);
|
||||
await ensureSymlink(
|
||||
join(codeDir, rendererPath, 'template', 'components'),
|
||||
resolve(cwd, storiesPath, 'components')
|
||||
);
|
||||
addPreviewAnnotations(mainConfig, [`.${sep}${join(storiesPath, 'components')}`]);
|
||||
|
||||
// Add stories for the renderer. NOTE: these *do* need to be processed by the framework build system
|
||||
await linkPackageStories(rendererPath, {
|
||||
mainConfig,
|
||||
cwd,
|
||||
linkInDir: resolve(cwd, storiesPath),
|
||||
});
|
||||
|
||||
// Add stories for lib/store (and addons below). NOTE: these stories will be in the
|
||||
// template-stories folder and *not* processed by the framework build config (instead by esbuild-loader)
|
||||
await linkPackageStories(await workspacePath('core package', '@storybook/store'), {
|
||||
mainConfig,
|
||||
cwd,
|
||||
});
|
||||
|
||||
const mainAddons = mainConfig.getFieldValue(['addons']).reduce((acc: string[], addon: any) => {
|
||||
const name = typeof addon === 'string' ? addon : addon.name;
|
||||
const match = /@storybook\/addon-(.*)/.exec(name);
|
||||
if (!match) return acc;
|
||||
const suffix = match[1];
|
||||
if (suffix === 'essentials') {
|
||||
return [...acc, ...essentialsAddons];
|
||||
}
|
||||
return [...acc, suffix];
|
||||
}, []);
|
||||
|
||||
const addonDirs = await Promise.all(
|
||||
[...mainAddons, ...extraAddons].map(async (addon) =>
|
||||
workspacePath('addon', `@storybook/addon-${addon}`)
|
||||
)
|
||||
);
|
||||
|
||||
const existingStories = await filterExistsInCodeDir(addonDirs, join('template', 'stories'));
|
||||
await Promise.all(
|
||||
existingStories.map(async (packageDir) => linkPackageStories(packageDir, { mainConfig, cwd }))
|
||||
);
|
||||
|
||||
// Ensure that we match stories from the template-stories dir
|
||||
const packageJson = await import(join(cwd, 'package.json'));
|
||||
await updateStoriesField(
|
||||
mainConfig,
|
||||
detectLanguage(packageJson) === SupportedLanguage.JAVASCRIPT
|
||||
);
|
||||
|
||||
// Add some extra settings (see above for what these do)
|
||||
if (template.expected.builder === '@storybook/builder-webpack5')
|
||||
addEsbuildLoaderToStories(mainConfig);
|
||||
|
||||
// Some addon stories require extra dependencies
|
||||
addExtraDependencies({ cwd, dryRun, debug });
|
||||
|
||||
await writeConfig(mainConfig);
|
||||
};
|
||||
24
scripts/tasks/sandbox.ts
Normal file
24
scripts/tasks/sandbox.ts
Normal file
@ -0,0 +1,24 @@
|
||||
import { pathExists, remove } from 'fs-extra';
|
||||
|
||||
import { Task } from '../task';
|
||||
|
||||
const logger = console;
|
||||
|
||||
export const sandbox: Task = {
|
||||
description: 'Create the sandbox from a template',
|
||||
dependsOn: ({ link }) => (link ? ['compile'] : ['compile', 'run-registry']),
|
||||
async ready({ sandboxDir }) {
|
||||
return pathExists(sandboxDir);
|
||||
},
|
||||
async run(details, options) {
|
||||
if (await this.ready(details)) {
|
||||
logger.info('🗑 Removing old sandbox dir');
|
||||
await remove(details.sandboxDir);
|
||||
}
|
||||
const { create, install, addStories } = await import('./sandbox-parts');
|
||||
|
||||
await create(details, options);
|
||||
await install(details, options);
|
||||
await addStories(details, options);
|
||||
},
|
||||
};
|
||||
29
scripts/tasks/serve.ts
Normal file
29
scripts/tasks/serve.ts
Normal file
@ -0,0 +1,29 @@
|
||||
import { AbortController } from 'node-abort-controller';
|
||||
import detectFreePort from 'detect-port';
|
||||
|
||||
import type { Task } from '../task';
|
||||
import { exec } from '../utils/exec';
|
||||
|
||||
export const PORT = 8001;
|
||||
export const serve: Task = {
|
||||
description: 'Serve the build storybook for a sandbox',
|
||||
service: true,
|
||||
dependsOn: ['build'],
|
||||
async ready() {
|
||||
return (await detectFreePort(PORT)) !== PORT;
|
||||
},
|
||||
async run({ builtSandboxDir, codeDir }, { debug, dryRun }) {
|
||||
const controller = new AbortController();
|
||||
exec(
|
||||
`yarn http-server ${builtSandboxDir} --port ${PORT}`,
|
||||
{ cwd: codeDir },
|
||||
{ dryRun, debug, signal: controller.signal as AbortSignal }
|
||||
).catch((err) => {
|
||||
// If aborted, we want to make sure the rejection is handled.
|
||||
if (!err.killed) throw err;
|
||||
});
|
||||
await exec('yarn wait-on http://localhost:8001', { cwd: codeDir }, { dryRun, debug });
|
||||
|
||||
return controller;
|
||||
},
|
||||
};
|
||||
@ -2,14 +2,15 @@ import type { Task } from '../task';
|
||||
import { exec } from '../utils/exec';
|
||||
|
||||
export const smokeTest: Task = {
|
||||
before: ['create'],
|
||||
description: 'Run the smoke tests of a sandbox',
|
||||
dependsOn: ['sandbox'],
|
||||
async ready() {
|
||||
return false;
|
||||
},
|
||||
async run(_, { sandboxDir }) {
|
||||
async run({ sandboxDir }, { dryRun, debug }) {
|
||||
// eslint-disable-next-line no-console
|
||||
console.log(`smoke testing in ${sandboxDir}`);
|
||||
|
||||
return exec(`yarn storybook --smoke-test`, { cwd: sandboxDir }, { debug: true });
|
||||
return exec(`yarn storybook --smoke-test`, { cwd: sandboxDir }, { dryRun, debug });
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,31 +1,28 @@
|
||||
import { servePackages } from '../utils/serve-packages';
|
||||
import type { Task } from '../task';
|
||||
import { exec } from '../utils/exec';
|
||||
import { serveSandbox } from '../utils/serve-sandbox';
|
||||
import { PORT } from './serve';
|
||||
|
||||
export const testRunner: Task = {
|
||||
description: 'Run the test runner against a sandbox',
|
||||
junit: true,
|
||||
before: ['publish', 'build'],
|
||||
dependsOn: ['run-registry', 'serve'],
|
||||
async ready() {
|
||||
return false;
|
||||
},
|
||||
async run(_, { sandboxDir, builtSandboxDir, junitFilename }) {
|
||||
async run({ sandboxDir, junitFilename }, { dryRun, debug }) {
|
||||
const execOptions = { cwd: sandboxDir };
|
||||
|
||||
// We could split this out into a separate task if it became annoying
|
||||
const publishController = await servePackages({});
|
||||
await exec(`yarn add --dev @storybook/test-runner`, execOptions);
|
||||
|
||||
const storybookController = await serveSandbox(builtSandboxDir, {});
|
||||
|
||||
await exec(`yarn test-storybook --url http://localhost:8001 --junit`, {
|
||||
...execOptions,
|
||||
env: {
|
||||
JEST_JUNIT_OUTPUT_FILE: junitFilename,
|
||||
await exec(
|
||||
`yarn test-storybook --url http://localhost:${PORT} --junit`,
|
||||
{
|
||||
...execOptions,
|
||||
env: {
|
||||
JEST_JUNIT_OUTPUT_FILE: junitFilename,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
publishController.abort();
|
||||
storybookController.abort();
|
||||
{ dryRun, debug }
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { getCommand, OptionSpecifier, OptionValues } from './options';
|
||||
import { createOptions, getCommand, OptionSpecifier, OptionValues } from './options';
|
||||
import { exec } from './exec';
|
||||
|
||||
const cliExecutable = require.resolve('../../code/lib/cli/bin/index.js');
|
||||
@ -12,6 +12,49 @@ export type CLIStep<TOptions extends OptionSpecifier> = {
|
||||
options: TOptions;
|
||||
};
|
||||
|
||||
export const steps = {
|
||||
repro: {
|
||||
command: 'repro-next',
|
||||
description: 'Bootstrapping Template',
|
||||
icon: '👷',
|
||||
hasArgument: true,
|
||||
options: createOptions({
|
||||
output: { type: 'string' },
|
||||
// TODO allow default values for strings
|
||||
branch: { type: 'string', values: ['next'] },
|
||||
}),
|
||||
},
|
||||
add: {
|
||||
command: 'add',
|
||||
description: 'Adding addon',
|
||||
icon: '+',
|
||||
hasArgument: true,
|
||||
options: createOptions({}),
|
||||
},
|
||||
link: {
|
||||
command: 'link',
|
||||
description: 'Linking packages',
|
||||
icon: '🔗',
|
||||
hasArgument: true,
|
||||
options: createOptions({
|
||||
local: { type: 'boolean' },
|
||||
start: { type: 'boolean', inverse: true },
|
||||
}),
|
||||
},
|
||||
build: {
|
||||
command: 'build',
|
||||
description: 'Building Storybook',
|
||||
icon: '🔨',
|
||||
options: createOptions({}),
|
||||
},
|
||||
dev: {
|
||||
command: 'dev',
|
||||
description: 'Starting Storybook',
|
||||
icon: '🖥 ',
|
||||
options: createOptions({}),
|
||||
},
|
||||
};
|
||||
|
||||
export async function executeCLIStep<TOptions extends OptionSpecifier>(
|
||||
cliStep: CLIStep<TOptions>,
|
||||
options: {
|
||||
|
||||
22
scripts/utils/main-js.ts
Normal file
22
scripts/utils/main-js.ts
Normal file
@ -0,0 +1,22 @@
|
||||
import { existsSync } from 'fs';
|
||||
import { join, resolve } from 'path';
|
||||
|
||||
import { ConfigFile, readConfig } from '../../code/lib/csf-tools';
|
||||
import { getInterpretedFile } from '../../code/lib/core-common';
|
||||
|
||||
export async function readMainConfig({ cwd }: { cwd: string }) {
|
||||
const configDir = join(cwd, '.storybook');
|
||||
if (!existsSync(configDir)) {
|
||||
throw new Error(
|
||||
`Unable to find the Storybook folder in "${configDir}". Are you sure it exists? Or maybe this folder uses a custom Storybook config directory?`
|
||||
);
|
||||
}
|
||||
|
||||
const mainConfigPath = getInterpretedFile(resolve(configDir, 'main'));
|
||||
return readConfig(mainConfigPath);
|
||||
}
|
||||
|
||||
export function addPreviewAnnotations(mainConfig: ConfigFile, paths: string[]) {
|
||||
const config = mainConfig.getFieldValue(['previewAnnotations']) as string[];
|
||||
mainConfig.setFieldValue(['previewAnnotations'], [...(config || []), ...paths]);
|
||||
}
|
||||
8
scripts/utils/maxConcurrentTasks.ts
Normal file
8
scripts/utils/maxConcurrentTasks.ts
Normal file
@ -0,0 +1,8 @@
|
||||
import { cpus } from 'os';
|
||||
|
||||
/**
|
||||
* The maximum number of concurrent tasks we want to have on some CLI and CI tasks.
|
||||
* The amount of CPUS minus one, arbitrary limited to 15 to not overload CI executors.
|
||||
* @type {number}
|
||||
*/
|
||||
export const maxConcurrentTasks = Math.min(Math.max(1, cpus().length - 1), 15);
|
||||
@ -40,10 +40,14 @@ export type StringOption = BaseOption & {
|
||||
* What values are allowed for this option?
|
||||
*/
|
||||
values?: readonly string[];
|
||||
/**
|
||||
* How to describe the values when selecting them
|
||||
*/
|
||||
valueDescriptions?: readonly string[];
|
||||
/**
|
||||
* Is a value required for this option?
|
||||
*/
|
||||
required?: boolean;
|
||||
required?: boolean | ((previous: Record<string, any>) => boolean);
|
||||
};
|
||||
|
||||
export type StringArrayOption = BaseOption & {
|
||||
@ -52,6 +56,10 @@ export type StringArrayOption = BaseOption & {
|
||||
* What values are allowed for this option?
|
||||
*/
|
||||
values?: readonly string[];
|
||||
/**
|
||||
* How to describe the values when selecting them
|
||||
*/
|
||||
valueDescriptions?: readonly string[];
|
||||
};
|
||||
|
||||
export type Option = BooleanOption | StringOption | StringArrayOption;
|
||||
@ -88,6 +96,8 @@ export function createOptions<TOptions extends OptionSpecifier>(options: TOption
|
||||
return options;
|
||||
}
|
||||
|
||||
const logger = console;
|
||||
|
||||
function shortFlag(key: OptionId, option: Option) {
|
||||
const inverse = option.type === 'boolean' && option.inverse;
|
||||
const defaultShortFlag = inverse ? key.substring(0, 1).toUpperCase() : key.substring(0, 1);
|
||||
@ -172,12 +182,23 @@ export function getDefaults<TOptions extends OptionSpecifier>(options: TOptions)
|
||||
);
|
||||
}
|
||||
|
||||
function checkRequired<TOptions extends OptionSpecifier>(
|
||||
option: TOptions[keyof TOptions],
|
||||
values: MaybeOptionValues<TOptions>
|
||||
) {
|
||||
if (option.type !== 'string' || !option.required) return false;
|
||||
|
||||
if (typeof option.required === 'boolean') return option.required;
|
||||
|
||||
return option.required(values);
|
||||
}
|
||||
|
||||
export function areOptionsSatisfied<TOptions extends OptionSpecifier>(
|
||||
options: TOptions,
|
||||
values: MaybeOptionValues<TOptions>
|
||||
) {
|
||||
return !Object.entries(options)
|
||||
.filter(([, option]) => option.type === 'string' && option.required)
|
||||
.filter(([, option]) => checkRequired(option as TOptions[keyof TOptions], values))
|
||||
.find(([key]) => !values[key]);
|
||||
}
|
||||
|
||||
@ -203,24 +224,22 @@ export async function promptOptions<TOptions extends OptionSpecifier>(
|
||||
const chosenType = passedType(...args);
|
||||
return chosenType === true ? defaultType : chosenType;
|
||||
};
|
||||
} else if (passedType) {
|
||||
} else if (typeof passedType !== 'undefined') {
|
||||
type = passedType;
|
||||
}
|
||||
|
||||
if (option.type !== 'boolean') {
|
||||
const currentValue = values[key];
|
||||
if (values[key]) {
|
||||
return { name: key, type: false };
|
||||
}
|
||||
|
||||
return {
|
||||
name: key,
|
||||
type,
|
||||
message: option.description,
|
||||
name: key,
|
||||
// warn: ' ',
|
||||
// pageSize: Object.keys(tasks).length + Object.keys(groups).length,
|
||||
choices: option.values.map((value) => ({
|
||||
title: value,
|
||||
choices: option.values?.map((value, index) => ({
|
||||
title: option.valueDescriptions?.[index] || value,
|
||||
value,
|
||||
selected:
|
||||
currentValue === value ||
|
||||
(Array.isArray(currentValue) && currentValue.includes?.(value)),
|
||||
})),
|
||||
};
|
||||
}
|
||||
@ -236,12 +255,12 @@ export async function promptOptions<TOptions extends OptionSpecifier>(
|
||||
|
||||
const selection = await prompts(questions, {
|
||||
onCancel: () => {
|
||||
console.log('Command cancelled by the user. Exiting...');
|
||||
logger.log('Command cancelled by the user. Exiting...');
|
||||
process.exit(1);
|
||||
},
|
||||
});
|
||||
// Again the structure of the questions guarantees we get responses of the type we need
|
||||
return selection as OptionValues<TOptions>;
|
||||
return { ...values, ...selection } as OptionValues<TOptions>;
|
||||
}
|
||||
|
||||
function getFlag<TOption extends Option>(
|
||||
@ -302,7 +321,7 @@ export async function getOptionsOrPrompt<TOptions extends OptionSpecifier>(
|
||||
const finalValues = await promptOptions(options, cliValues);
|
||||
|
||||
const command = getCommand(commandPrefix, options, finalValues);
|
||||
console.log(`\nTo run this directly next time, use:\n ${command}\n`);
|
||||
logger.log(`\nTo run this directly next time, use:\n ${command}\n`);
|
||||
|
||||
return finalValues;
|
||||
}
|
||||
|
||||
18
scripts/utils/package-json.ts
Normal file
18
scripts/utils/package-json.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { readJSON, writeJSON } from 'fs-extra';
|
||||
import { join } from 'path';
|
||||
|
||||
export async function addPackageScripts({
|
||||
cwd,
|
||||
scripts,
|
||||
}: {
|
||||
cwd: string;
|
||||
scripts: Record<string, string>;
|
||||
}) {
|
||||
const packageJsonPath = join(cwd, 'package.json');
|
||||
const packageJson = await readJSON(packageJsonPath);
|
||||
packageJson.scripts = {
|
||||
...packageJson.scripts,
|
||||
...scripts,
|
||||
};
|
||||
await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
|
||||
}
|
||||
10
scripts/utils/paths.ts
Normal file
10
scripts/utils/paths.ts
Normal file
@ -0,0 +1,10 @@
|
||||
/* eslint-disable no-await-in-loop, no-restricted-syntax */
|
||||
import { pathExists } from 'fs-extra';
|
||||
import { join } from 'path';
|
||||
|
||||
export async function findFirstPath(paths: string[], { cwd }: { cwd: string }) {
|
||||
for (const filePath of paths) {
|
||||
if (await pathExists(join(cwd, filePath))) return filePath;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import { AbortController } from 'node-abort-controller';
|
||||
import path from 'path';
|
||||
import { exec } from './exec';
|
||||
|
||||
const codeDir = path.resolve(__dirname, '../../code');
|
||||
|
||||
export async function servePackages({ dryRun, debug }: { dryRun?: boolean; debug?: boolean }) {
|
||||
const controller = new AbortController();
|
||||
exec(
|
||||
'CI=true yarn local-registry --open',
|
||||
{ cwd: codeDir },
|
||||
{ dryRun, debug, signal: controller.signal as AbortSignal }
|
||||
).catch((err) => {
|
||||
// If aborted, we want to make sure the rejection is handled.
|
||||
if (!err.killed) throw err;
|
||||
});
|
||||
await exec('yarn wait-on http://localhost:6001', { cwd: codeDir }, { dryRun, debug });
|
||||
|
||||
return controller;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
import { AbortController } from 'node-abort-controller';
|
||||
import path from 'path';
|
||||
import { exec } from './exec';
|
||||
|
||||
const codeDir = path.resolve(__dirname, '../../code');
|
||||
|
||||
export async function serveSandbox(
|
||||
directory: string,
|
||||
{ dryRun, debug }: { dryRun?: boolean; debug?: boolean }
|
||||
) {
|
||||
const controller = new AbortController();
|
||||
exec(
|
||||
`yarn http-server ${directory} --port 8001`,
|
||||
{ cwd: codeDir },
|
||||
{ dryRun, debug, signal: controller.signal as AbortSignal }
|
||||
).catch((err) => {
|
||||
// If aborted, we want to make sure the rejection is handled.
|
||||
if (!err.killed) throw err;
|
||||
});
|
||||
await exec('yarn wait-on http://localhost:8001', { cwd: codeDir }, { dryRun, debug });
|
||||
|
||||
return controller;
|
||||
}
|
||||
26
scripts/utils/workspace.ts
Normal file
26
scripts/utils/workspace.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import command from 'execa';
|
||||
import memoize from 'memoizerific';
|
||||
import { resolve } from 'path';
|
||||
|
||||
export type Workspace = { name: string; location: string };
|
||||
|
||||
const codeDir = resolve(__dirname, '../../code');
|
||||
|
||||
async function getWorkspaces() {
|
||||
const { stdout } = await command('yarn workspaces list --json', {
|
||||
cwd: codeDir,
|
||||
shell: true,
|
||||
});
|
||||
return JSON.parse(`[${stdout.split('\n').join(',')}]`) as Workspace[];
|
||||
}
|
||||
|
||||
const getWorkspacesMemo = memoize(1)(getWorkspaces);
|
||||
|
||||
export async function workspacePath(type: string, packageName: string) {
|
||||
const workspaces = await getWorkspacesMemo();
|
||||
const workspace = workspaces.find((w) => w.name === packageName);
|
||||
if (!workspace) {
|
||||
throw new Error(`Unknown ${type} '${packageName}', not in yarn workspace!`);
|
||||
}
|
||||
return workspace.location;
|
||||
}
|
||||
@ -3387,6 +3387,7 @@ __metadata:
|
||||
babel-plugin-add-react-displayname: ^0.0.5
|
||||
babel-plugin-dynamic-import-node: ^2.3.3
|
||||
babel-plugin-macros: ^3.0.1
|
||||
boxen: ^5.1.2
|
||||
chalk: ^4.1.0
|
||||
codecov: ^3.8.1
|
||||
commander: ^6.2.1
|
||||
@ -3425,6 +3426,7 @@ __metadata:
|
||||
junit-xml: ^1.2.0
|
||||
lint-staged: ^10.5.4
|
||||
lodash: ^4.17.21
|
||||
memoizerific: ^1.11.3
|
||||
mocha-list-tests: ^1.0.5
|
||||
node-abort-controller: ^3.0.1
|
||||
node-cleanup: ^2.1.2
|
||||
@ -4747,6 +4749,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ansi-align@npm:^3.0.0":
|
||||
version: 3.0.1
|
||||
resolution: "ansi-align@npm:3.0.1"
|
||||
dependencies:
|
||||
string-width: ^4.1.0
|
||||
checksum: ad8b755a253a1bc8234eb341e0cec68a857ab18bf97ba2bda529e86f6e30460416523e0ec58c32e5c21f0ca470d779503244892873a5895dbd0c39c788e82467
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"ansi-colors@npm:^4.1.1":
|
||||
version: 4.1.3
|
||||
resolution: "ansi-colors@npm:4.1.3"
|
||||
@ -5672,6 +5683,22 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"boxen@npm:^5.1.2":
|
||||
version: 5.1.2
|
||||
resolution: "boxen@npm:5.1.2"
|
||||
dependencies:
|
||||
ansi-align: ^3.0.0
|
||||
camelcase: ^6.2.0
|
||||
chalk: ^4.1.0
|
||||
cli-boxes: ^2.2.1
|
||||
string-width: ^4.2.2
|
||||
type-fest: ^0.20.2
|
||||
widest-line: ^3.1.0
|
||||
wrap-ansi: ^7.0.0
|
||||
checksum: 71f31c2eb3dcacd5fce524ae509e0cc90421752e0bfbd0281fd3352871d106c462a0f810c85f2fdb02f3a9fab2d7a84e9718b4999384d651b76104ebe5d2c024
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"brace-expansion@npm:^1.1.7":
|
||||
version: 1.1.11
|
||||
resolution: "brace-expansion@npm:1.1.11"
|
||||
@ -6256,6 +6283,13 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"cli-boxes@npm:^2.2.1":
|
||||
version: 2.2.1
|
||||
resolution: "cli-boxes@npm:2.2.1"
|
||||
checksum: 6111352edbb2f62dbc7bfd58f2d534de507afed7f189f13fa894ce5a48badd94b2aa502fda28f1d7dd5f1eb456e7d4033d09a76660013ef50c7f66e7a034f050
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"cli-cursor@npm:3.1.0, cli-cursor@npm:^3.1.0":
|
||||
version: 3.1.0
|
||||
resolution: "cli-cursor@npm:3.1.0"
|
||||
@ -18080,7 +18114,7 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.3":
|
||||
"string-width@npm:^1.0.2 || 2 || 3 || 4, string-width@npm:^4.0.0, string-width@npm:^4.1.0, string-width@npm:^4.2.0, string-width@npm:^4.2.2, string-width@npm:^4.2.3":
|
||||
version: 4.2.3
|
||||
resolution: "string-width@npm:4.2.3"
|
||||
dependencies:
|
||||
@ -19065,7 +19099,7 @@ __metadata:
|
||||
|
||||
"typescript@patch:typescript@npm%3A~4.6.3#~builtin<compat/typescript>":
|
||||
version: 4.6.4
|
||||
resolution: "typescript@patch:typescript@npm%3A4.6.4#~builtin<compat/typescript>::version=4.6.4&hash=7ad353"
|
||||
resolution: "typescript@patch:typescript@npm%3A4.6.4#~builtin<compat/typescript>::version=4.6.4&hash=a1c5e5"
|
||||
bin:
|
||||
tsc: bin/tsc
|
||||
tsserver: bin/tsserver
|
||||
@ -20056,6 +20090,15 @@ __metadata:
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"widest-line@npm:^3.1.0":
|
||||
version: 3.1.0
|
||||
resolution: "widest-line@npm:3.1.0"
|
||||
dependencies:
|
||||
string-width: ^4.0.0
|
||||
checksum: b1e623adcfb9df35350dd7fc61295d6d4a1eaa65a406ba39c4b8360045b614af95ad10e05abf704936ed022569be438c4bfa02d6d031863c4166a238c301119f
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"window-size@npm:^1.1.1":
|
||||
version: 1.1.1
|
||||
resolution: "window-size@npm:1.1.1"
|
||||
|
||||
11
yarn.lock
Normal file
11
yarn.lock
Normal file
@ -0,0 +1,11 @@
|
||||
# This file is generated by running "yarn install" inside your project.
|
||||
# Manual changes might be lost - proceed with caution!
|
||||
|
||||
__metadata:
|
||||
version: 6
|
||||
|
||||
"root-workspace-0b6124@workspace:.":
|
||||
version: 0.0.0-use.local
|
||||
resolution: "root-workspace-0b6124@workspace:."
|
||||
languageName: unknown
|
||||
linkType: soft
|
||||
Loading…
x
Reference in New Issue
Block a user