4.1 migration WIP

This commit is contained in:
Michael Shilman 2019-01-04 12:20:10 +08:00
parent 4f9d595da6
commit 416825491b

View File

@ -1,5 +1,8 @@
# Migration
- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
- [Private addon config](#private-addon-config)
- [React 15.x](#react-15x)
- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
- [React 16.3+](#react-163)
- [Generic addons](#generic-addons)
@ -34,9 +37,21 @@
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
## From version 4.0.x to 4.1.x
There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.
## Private addon config
If your Storybook contains custom addons defined that are defined in your app (as opposed to installed from packages) and those addons rely on reconfiguring webpack/babel, Storybook 4.1 may break for you. There's a workaround [described in the issue](https://github.com/storybooks/storybook/issues/4995), and we're working on official support in the next minor release.
## React 15.x
Storybook 4.1 supports React 15.x (which had been [lost in the 4.0 release](#react-163)). So if you've been blocked on upgrading, we've got you. You should be able to upgrade according to the 4.0 migration notes below, or following the [4.0 upgrade guide](https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c).
## From version 3.4.x to 4.0.x
With 4.0 as our first major release in over a year, we've collected a lot of cleanup tasks. Most of the deprecations have been marked for months, so we hope that there will be no significant impact on your project.
With 4.0 as our first major release in over a year, we've collected a lot of cleanup tasks. Most of the deprecations have been marked for months, so we hope that there will be no significant impact on your project. We've also created a [step-by-step guide to help you upgrade](https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c).
### React 16.3+
@ -69,13 +84,13 @@ core.browser.esm.js:15 Uncaught TypeError: Object(...) is not a function
4.x introduces generic addon decorators that are not tied to specific view layers [#3555](https://github.com/storybooks/storybook/pull/3555). So for example:
```js
import { number } from "@storybook/addon-knobs/react";
import { number } from '@storybook/addon-knobs/react';
```
Becomes:
```js
import { number } from "@storybook/addon-knobs";
import { number } from '@storybook/addon-knobs';
```
### Knobs select ordering
@ -245,7 +260,7 @@ Knobs users: there was a bug in 3.2.x where using the knobs addon imported all f
In the case of React or React-Native, import knobs like this:
```js
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs/react";
import { withKnobs, text, boolean, number } from '@storybook/addon-knobs/react';
```
In the case of Vue: `import { ... } from '@storybook/addon-knobs/vue';`
@ -273,10 +288,10 @@ We're in the process of upgrading our addons APIs. As a first step, we've upgrad
Here's an example of using Notes and Info in 3.2 with the new API.
```js
storiesOf("composition", module).add(
"new addons api",
withInfo("see Notes panel for composition info")(
withNotes({ text: "Composition: Info(Notes())" })(context => (
storiesOf('composition', module).add(
'new addons api',
withInfo('see Notes panel for composition info')(
withNotes({ text: 'Composition: Info(Notes())' })(context => (
<MyComponent name={context.story} />
))
)
@ -387,13 +402,13 @@ If you **are** using these addons, migrating is simple:
- update your code:
change `addons.js` like so:
```js
import "@storybook/addon-actions/register";
import "@storybook/addon-links/register";
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
```
change `x.story.js` like so:
```js
import React from "react";
import { storiesOf } from "@storybook/react";
import { action } from "@storybook/addon-actions";
import { linkTo } from "@storybook/addon-links";
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
```