Skip to content

Commit

Permalink
Merge pull request #24710 from storybookjs/version-non-patch-from-7.6…
Browse files Browse the repository at this point in the history
….0-alpha.4

Release: Prerelease 7.6.0-alpha.5
  • Loading branch information
kasperpeulen authored Nov 13, 2023
2 parents 9328f78 + 808266f commit b3fef50
Show file tree
Hide file tree
Showing 154 changed files with 1,513 additions and 3,383 deletions.
13 changes: 9 additions & 4 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -330,7 +330,12 @@ jobs:
command: yarn task --task build --template $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build) --no-link --start-from=never --junit
- run:
name: Verifying Telemetry
command: yarn ts-node ./event-log-checker build $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build)
command: |
TEMPLATE=$(yarn get-template --cadence << pipeline.parameters.workflow >> --task build)
if [[ $TEMPLATE != bench/* ]]
then
yarn ts-node ./event-log-checker build $TEMPLATE
fi
working_directory: scripts
- report-workflow-on-failure:
template: $(yarn get-template --cadence << pipeline.parameters.workflow >> --task build)
Expand Down Expand Up @@ -507,7 +512,7 @@ workflows:
requires:
- create-sandboxes
- chromatic-sandboxes:
parallelism: 9
parallelism: 11
requires:
- build-sandboxes
- e2e-production:
Expand Down Expand Up @@ -563,7 +568,7 @@ workflows:
requires:
- create-sandboxes
- chromatic-sandboxes:
parallelism: 18
parallelism: 20
requires:
- build-sandboxes
- e2e-production:
Expand Down Expand Up @@ -620,7 +625,7 @@ workflows:
requires:
- create-sandboxes
- chromatic-sandboxes:
parallelism: 33
parallelism: 35
requires:
- build-sandboxes
- e2e-production:
Expand Down
24 changes: 24 additions & 0 deletions CHANGELOG.prerelease.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,27 @@
## 7.6.0-alpha.5

- Addons, core: Make `react` and Storybook packages `devDependencies` where possible - [#24676](https://github.com/storybookjs/storybook/pull/24676), thanks [@JReinhold](https://github.com/JReinhold)!
- Angular: Handle nested module metadata - [#24798](https://github.com/storybookjs/storybook/pull/24798), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
- Angular: Include object configured styles - [#24768](https://github.com/storybookjs/storybook/pull/24768), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
- Angular: Support v17 - [#24717](https://github.com/storybookjs/storybook/pull/24717), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
- ReactNative: Fix missing assert dep in docs-tools - [#24732](https://github.com/storybookjs/storybook/pull/24732), thanks [@dannyhw](https://github.com/dannyhw)!
- SWC: Add settings for react and preact - [#24805](https://github.com/storybookjs/storybook/pull/24805), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
- Svelte: Fix source with decorators always showing the `SlotDecorator` component - [#24800](https://github.com/storybookjs/storybook/pull/24800), thanks [@JReinhold](https://github.com/JReinhold)!
- TestBuild: Disable composition when `--test` is `true` - [#24799](https://github.com/storybookjs/storybook/pull/24799), thanks [@ndelangen](https://github.com/ndelangen)!
- TestBuild: Disable docs related stuff for test builds - [#24691](https://github.com/storybookjs/storybook/pull/24691), thanks [@ndelangen](https://github.com/ndelangen)!
- TestBuild: Disable telemetry for test builds - [#24706](https://github.com/storybookjs/storybook/pull/24706), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
- TestBuild: Disable warnOnIncompatibleAddons - [#24797](https://github.com/storybookjs/storybook/pull/24797), thanks [@ndelangen](https://github.com/ndelangen)!
- TestBuild: Globalize `@storybook/blocks` if `build.test.emptyBlocks` is `true` - [#24650](https://github.com/storybookjs/storybook/pull/24650), thanks [@ndelangen](https://github.com/ndelangen)!
- TestBuild: Implement builder options for test build - [#24826](https://github.com/storybookjs/storybook/pull/24826), thanks [@kasperpeulen](https://github.com/kasperpeulen)!
- TestBuild: No sourcemaps for test builds - [#24804](https://github.com/storybookjs/storybook/pull/24804), thanks [@ndelangen](https://github.com/ndelangen)!
- UI: Fix horizontal scroll bar in Canvas hidden by styling - [#24408](https://github.com/storybookjs/storybook/pull/24408), thanks [@yoshi2no](https://github.com/yoshi2no)!
- UI: Logo fixed value - [#24726](https://github.com/storybookjs/storybook/pull/24726), thanks [@black-arm](https://github.com/black-arm)!
- UI: improve A11Y remove redundant styling rules, update icon color - [#24402](https://github.com/storybookjs/storybook/pull/24402), thanks [@tolkadot](https://github.com/tolkadot)!
- Webpack5: Add export-order-loader and remove babel-plugin-named-exports-order - [#24749](https://github.com/storybookjs/storybook/pull/24749), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
- Webpack5: Add react-docgen loader and remove babel-plugin-react-docgen - [#24762](https://github.com/storybookjs/storybook/pull/24762), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
- Webpack5: Fix race condition for export-order loader - [#24817](https://github.com/storybookjs/storybook/pull/24817), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
- Webpack5: Hide critical dependency warning - [#24784](https://github.com/storybookjs/storybook/pull/24784), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!

## 7.6.0-alpha.4

- CLI: Ensure errors with opening the browser are caught - [#24668](https://github.com/storybookjs/storybook/pull/24668), thanks [@xueyawei](https://github.com/xueyawei)!
Expand Down
2 changes: 1 addition & 1 deletion MAINTAINERS.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ This document outlines some of the processes that the maintainers should adhere
| maintenance | Issue, or pull request related to Storybook's internal maintenance |
| mdx | Issue, bug, or pull request related to MDX and Storybook |
| medium | Issue or pull request that involves a significant amount of work within Storybook |
| monorepos | Issue, bug, or pull request related to Storybook and monorepos (e.g., [lerna](https://lerna.js.org/) ) |
| monorepos | Issue, bug, or pull request related to Storybook and monorepos |
| mui | Issue, bug, or pull request that affects Storybook and [Material-UI](https://material-ui.com/) |
| multiframework | Issue, bug, or pull request that affects multiple supported frameworks (e.g., React, Vue) |
| needs more info | Issue, or bug that requires additional context from the author |
Expand Down
40 changes: 32 additions & 8 deletions MIGRATION.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
<h1>Migration</h1>

- [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
- [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop)
- [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react)
- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
- [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
- [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
- [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
- [Addon API is more type-strict](#addon-api-is-more-type-strict)
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [7.0 breaking changes](#70-breaking-changes)
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
Expand All @@ -32,7 +33,7 @@
- [Deploying build artifacts](#deploying-build-artifacts)
- [Dropped support for file URLs](#dropped-support-for-file-urls)
- [Serving with nginx](#serving-with-nginx)
- [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
- [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
- [7.0 Core changes](#70-core-changes)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
Expand All @@ -44,7 +45,7 @@
- [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
- [7.0 Vite changes](#70-vite-changes)
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
- [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [7.0 Webpack changes](#70-webpack-changes)
- [Webpack4 support discontinued](#webpack4-support-discontinued)
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
Expand Down Expand Up @@ -94,7 +95,7 @@
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
- [Autoplay in docs](#autoplay-in-docs)
- [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
- [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
- [`Story` type deprecated](#story-type-deprecated)
Expand Down Expand Up @@ -309,10 +310,33 @@

## From version 7.5.0 to 7.6.0

##### Primary doc block accepts of prop
#### Primary doc block accepts of prop

The `Primary` doc block now also accepts an `of` prop as described in the [Doc Blocks](#doc-blocks) section. It still accepts being passed `name` or no props at all.

#### Addons no longer need a peer dependency on React

Historically the majority of addons have had a peer dependency on React and a handful of Storybook core packages. In most cases this has not been necessary since 7.0 because the Storybook manager makes those available on the global scope. It has created an unnecessary burden for users in non-React projects.

We've migrated all the core addons (except for `addon-docs`) to not depend on these packages by:

1. Moving `react`, `react-dom` and the globalized Storybook packages from `peerDependencies` to `devDependencies`
2. Added the list of globalized packages to the `externals` property in the `tsup` configuration, to ensure they are not part of the bundle.

As of Storybook 7.6.0 the list of globalized packages can be imported like this:

```ts
// tsup.config.ts

import { globalPackages as globalManagerPackages } from '@storybook/manager/globals';
import { globalPackages as globalPreviewPackages } from '@storybook/preview/globals';

const allGlobalPackages = [...globalManagerPackages, ...globalPreviewPackages];
```

We recommend checking out [the updates we've made to the addon-kit](https://github.com/storybookjs/addon-kit/pull/60/files#diff-8fed899bdbc24789a7bb4973574e624ed6207c6ce572338bc3c3e117672b2a20), that can serve as a base for the changes you can do in your own addon. These changes are not necessary for your addon to keep working, but they will remove the need for your users to unnecessary install `react` and `react-dom` to their projects, and they'll significantly reduce the install size of your addon.
These changes should not be breaking for your users, unless you support Storybook pre-v7.

## From version 7.4.0 to 7.5.0

#### `storyStoreV6` and `storiesOf` is deprecated
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ Looking for a first issue to tackle?

### Development scripts

Storybook is organized as a monorepo using [Lerna](https://lerna.js.org/). Useful scripts include:
Storybook is organized as a monorepo. Useful scripts include:

#### `yarn start`

Expand Down
7 changes: 7 additions & 0 deletions code/.eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,13 @@ module.exports = {
'@typescript-eslint/ban-types': 'warn', // should become error, in the future
},
},
{
// this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
files: ['**/builder-vite/**/*.html'],
rules: {
'@typescript-eslint/no-unused-expressions': 'off', // should become error, in the future
},
},
{
// these packages use pre-bundling, dependencies will be bundled, and will be in devDepenencies
files: [
Expand Down
9 changes: 3 additions & 6 deletions code/addons/a11y/src/components/Report/Item.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,16 +21,14 @@ const Wrapper = styled.div(({ theme }) => ({
},
}));

const Icon = styled(Icons)(({ theme }) => ({
const Icon = styled(Icons)({
height: 10,
width: 10,
minWidth: 10,
color: theme.textMutedColor,
marginRight: 10,
transition: 'transform 0.1s ease-in-out',
alignSelf: 'center',
display: 'inline-flex',
}));
verticalAlign: 'inherit',
});

const HeaderBar = styled.div(({ theme }) => ({
padding: theme.layoutMargin,
Expand Down Expand Up @@ -78,7 +76,6 @@ export const Item = (props: ItemProps) => {
<HeaderBar onClick={() => onToggle(!open)} role="button">
<Icon
icon="arrowdown"
color="#9DA5AB"
style={{
transform: `rotate(${open ? 0 : -90}deg)`,
}}
Expand Down
1 change: 0 additions & 1 deletion code/addons/docs/src/typings.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
declare module '@egoist/vue-to-react';
declare module 'remark-slug';
declare module 'remark-external-links';
declare module 'babel-plugin-react-docgen';
declare module 'acorn-jsx';
declare module 'vue/dist/vue';
declare module '@storybook/mdx1-csf';
Expand Down
2 changes: 2 additions & 0 deletions code/builders/builder-vite/input/iframe.html
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
window.STORIES = '[STORIES HERE]';
window.DOCS_OPTIONS = '[DOCS_OPTIONS HERE]';

('OTHER_GLOBLALS HERE');

// We do this so that "module && module.hot" etc. in Storybook source code
// doesn't fail (it will simply be disabled)
window.module = undefined;
Expand Down
9 changes: 8 additions & 1 deletion code/builders/builder-vite/src/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,18 @@ export async function build(options: Options) {
build: {
outDir: options.outputDir,
emptyOutDir: false, // do not clean before running Vite build - Storybook has already added assets in there!
sourcemap: true,
rollupOptions: {
// Do not try to bundle the storybook runtime, it is copied into the output dir after the build.
external: ['./sb-preview/runtime.js'],
},
...(options.test
? {
reportCompressedSize: false,
sourcemap: !options.build?.test?.disableSourcemaps,
target: 'esnext',
treeshake: !options.build?.test?.disableTreeShaking,
}
: {}),
},
}).build;

Expand Down
11 changes: 11 additions & 0 deletions code/builders/builder-vite/src/transform-iframe-html.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export type PreviewHtml = string | undefined;

export async function transformIframeHtml(html: string, options: Options) {
const { configType, features, presets } = options;
const build = await presets.apply('build');
const frameworkOptions = await presets.apply<Record<string, any> | null>('frameworkOptions');
const headHtmlSnippet = await presets.apply<PreviewHtml>('previewHead');
const bodyHtmlSnippet = await presets.apply<PreviewHtml>('previewBody');
Expand All @@ -20,10 +21,20 @@ export async function transformIframeHtml(html: string, options: Options) {
importPathMatcher: specifier.importPathMatcher.source,
}));

const otherGlobals = {
...(build?.test?.emptyBlocks ? { __STORYBOOK_BLOCKS_EMPTY_MODULE__: {} } : {}),
};

return html
.replace('[CONFIG_TYPE HERE]', configType || '')
.replace('[LOGLEVEL HERE]', logLevel || '')
.replace(`'[FRAMEWORK_OPTIONS HERE]'`, JSON.stringify(frameworkOptions))
.replace(
`('OTHER_GLOBLALS HERE');`,
Object.entries(otherGlobals)
.map(([k, v]) => `window["${k}"] = ${JSON.stringify(v)};`)
.join('')
)
.replace(
`'[CHANNEL_OPTIONS HERE]'`,
JSON.stringify(coreOptions && coreOptions.channelOptions ? coreOptions.channelOptions : {})
Expand Down
5 changes: 5 additions & 0 deletions code/builders/builder-vite/src/vite-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,11 @@ export async function commonConfig(

export async function pluginConfig(options: Options) {
const frameworkName = await getFrameworkName(options);
const build = await options.presets.apply('build');

if (build?.test?.emptyBlocks) {
globals['@storybook/blocks'] = '__STORYBOOK_BLOCKS_EMPTY_MODULE__';
}

const plugins = [
codeGeneratorPlugin(options),
Expand Down
11 changes: 9 additions & 2 deletions code/builders/builder-webpack5/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,11 @@
"node": "./dist/presets/preview-preset.js",
"require": "./dist/presets/preview-preset.js"
},
"./loaders/export-order-loader": {
"types": "./dist/loaders/export-order-loader.d.ts",
"node": "./dist/loaders/export-order-loader.js",
"require": "./dist/loaders/export-order-loader.js"
},
"./templates/virtualModuleModernEntry.js.handlebars": "./templates/virtualModuleModernEntry.js.handlebars",
"./templates/preview.ejs": "./templates/preview.ejs",
"./package.json": "./package.json"
Expand Down Expand Up @@ -69,15 +74,16 @@
"@types/node": "^18.0.0",
"@types/semver": "^7.3.4",
"babel-loader": "^9.0.0",
"babel-plugin-named-exports-order": "^0.0.2",
"browser-assert": "^1.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"constants-browserify": "^1.0.0",
"css-loader": "^6.7.1",
"es-module-lexer": "^1.4.1",
"express": "^4.17.3",
"fork-ts-checker-webpack-plugin": "^8.0.0",
"fs-extra": "^11.1.0",
"html-webpack-plugin": "^5.5.0",
"magic-string": "^0.30.5",
"path-browserify": "^1.0.1",
"process": "^0.11.10",
"semver": "^7.3.7",
Expand Down Expand Up @@ -114,7 +120,8 @@
"entries": [
"./src/index.ts",
"./src/presets/custom-webpack-preset.ts",
"./src/presets/preview-preset.ts"
"./src/presets/preview-preset.ts",
"./src/loaders/export-order-loader.ts"
],
"platform": "node"
},
Expand Down
34 changes: 34 additions & 0 deletions code/builders/builder-webpack5/src/loaders/export-order-loader.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { parse } from 'es-module-lexer';
import MagicString from 'magic-string';
import type { LoaderContext } from 'webpack';

export default async function loader(this: LoaderContext<any>, source: string) {
const callback = this.async();

try {
// Do NOT remove await here. The types are wrong! It has to be awaited,
// otherwise it will return a Promise<Promise<...>> when wasm isn't loaded.
const [, exports = []] = await parse(source);

const namedExportsOrder = exports.some(
(e) => source.substring(e.s, e.e) === '__namedExportsOrder'
);

if (namedExportsOrder) {
return callback(null, source);
}

const magicString = new MagicString(source);
const orderedExports = exports.filter((e) => source.substring(e.s, e.e) !== 'default');
magicString.append(
`;export const __namedExportsOrder = ${JSON.stringify(
orderedExports.map((e) => source.substring(e.s, e.e))
)};`
);

const map = magicString.generateMap({ hires: true });
return callback(null, magicString.toString(), map);
} catch (err) {
return callback(err as any);
}
}
11 changes: 0 additions & 11 deletions code/builders/builder-webpack5/src/presets/preview-preset.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,16 +18,5 @@ export const entries = async (_: unknown, options: any) => {
return result;
};

export const babel = async (config: any, options: any) => ({
...config,
overrides: [
...(config?.overrides || []),
{
test: /\.(story|stories).*$/,
plugins: [require.resolve('babel-plugin-named-exports-order')],
},
],
});

export const previewMainTemplate = () =>
require.resolve('@storybook/builder-webpack5/templates/preview.ejs');
Loading

0 comments on commit b3fef50

Please sign in to comment.