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

Merge pull request #3383 from storybooks/addons-global-singleton

Browse Source 
Enforce addons store being a singleton by storing it in global variable
This commit is contained in:
Filipp Riabchun 2018-04-09 02:45:52 +03:00 committed by GitHub
commit 8f8c650443
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
addons/a11y/package.json
View File

@ -25,6 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"@storybook/client-logger": "4.0.0-alpha.1",
"@storybook/components": "4.0.0-alpha.1",
"axe-core": "^3.0.1",
@ -38,7 +39,6 @@
"faker": "^4.1.0"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*",
"react-dom": "*"
}

2
addons/actions/package.json
View File

@ -20,6 +20,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"@storybook/components": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"deep-equal": "^1.0.1",
@ -32,7 +33,6 @@
"uuid": "^3.2.1"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*",
"react-dom": "*"
}

2
addons/background/package.json
View File

@ -24,13 +24,13 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"global": "^4.3.2",
"prop-types": "^15.6.1",
"react-lifecycles-compat": "^1.1.4"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*"
}
}

2
addons/events/package.json
View File

@ -21,6 +21,7 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"format-json": "^1.0.3",
"prop-types": "^15.6.1",
@ -28,7 +29,6 @@
"react-textarea-autosize": "^6.1.0"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*"
}
}

2
addons/jest/package.json
View File

@ -25,6 +25,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"@storybook/components": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"glamor": "^2.20.40",
@ -33,7 +34,6 @@
"prop-types": "^15.6.1"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*",
"react-dom": "*"
}

2
addons/knobs/package.json
View File

@ -15,6 +15,7 @@
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"@storybook/components": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"deep-equal": "^1.0.1",
@ -36,7 +37,6 @@
"vue": "^2.5.16"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*",
"react-dom": "*"
}

2
addons/links/package.json
View File

@ -22,6 +22,7 @@
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"@storybook/components": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"global": "^4.3.2",
@ -34,7 +35,6 @@
"react-dom": "^16.3.1"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "16.3.1",
"react-dom": "16.3.1"
}

2
addons/notes/package.json
View File

@ -20,6 +20,7 @@
"storybook": "start-storybook -p 9010"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"marked": "^0.3.19",
"prop-types": "^15.6.1",
@ -30,7 +31,6 @@
"@types/react": "^16.3.5"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*"
}
}

2
addons/options/package.json
View File

@ -20,13 +20,13 @@
"storybook": "start-storybook -p 9001"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0"
},
"devDependencies": {
"@storybook/react": "4.0.0-alpha.1"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*",
"react-dom": "*"
}

3
addons/storyshots/package.json
View File

@ -16,7 +16,7 @@
"storybook": "start-storybook -p 6006"
},
"dependencies": {
"@storybook/channels": "4.0.0-alpha.1",
"@storybook/addons": "4.0.0-alpha.1",
"@storybook/core": "4.0.0-alpha.1",
"@storybook/node-logger": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
@ -37,7 +37,6 @@
"react-dom": "^16.3.1"
},
"peerDependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"babel-core": "^6.26.0 || ^7.0.0-0"
}
}

5
addons/storyshots/src/index.js
View File

@ -1,9 +1,8 @@
import fs from 'fs';
import glob from 'glob';
import global, { describe, it } from 'global';
import addons from '@storybook/addons';
import addons, { mockChannel } from '@storybook/addons';
import loadFramework from './frameworkLoader';
import createChannel from './storybook-channel-mock';
import { getPossibleStoriesFiles, getSnapshotFileName } from './utils';
import { imageSnapshot } from './test-body-image-snapshot';
@ -34,7 +33,7 @@ export default function testStorySnapshots(options = {}) {
throw new Error('testStorySnapshots is intended only to be used inside jest');
}
addons.setChannel(createChannel());
addons.setChannel(mockChannel());
const { storybook, framework, renderTree, renderShallowTree } = loadFramework(options);
const stories = storybook.getStorybook();

2
addons/storysource/package.json
View File

@ -20,6 +20,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"@storybook/components": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"estraverse": "^4.2.0",
@ -29,7 +30,6 @@
"react-syntax-highlighter": "^7.0.2"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*",
"react-dom": "*"
}

2
addons/viewport/package.json
View File

@ -11,6 +11,7 @@
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/addons": "4.0.0-alpha.1",
"@storybook/components": "4.0.0-alpha.1",
"babel-runtime": "^6.26.0",
"global": "^4.3.2",
@ -18,7 +19,6 @@
"prop-types": "^15.6.1"
},
"peerDependencies": {
"@storybook/addons": "^3.3.0",
"react": "*"
}
}

8
docs/src/pages/basics/faq/index.md
View File

@ -29,7 +29,13 @@ You can generally reuse webpack rules fairly easily by placing them in a file th
A common error is that an addon tries to access the "channel", but the channel is not set. This can happen in a few different cases:
1. In storybook/addon development, it can be an NPM version problem. If there are two versions of the `@storybook/addons` NPM package, it will cause problems. In this case, make sure there is only a single version of `@storybook/addons` being used by your project.
1. You're trying to access addon channel (e.g. by calling `setOptions`) in a non-browser environment like Jest. You may need to add a channel mock:
```js
import addons, { mockChannel } from '@storybook/addons';
addons.setChannel(mockChannel());
```
2. In React Native, it's a special case that's documented in [#1192](https://github.com/storybooks/storybook/issues/1192)
### Can I modify React component state in stories?

4
lib/addons/package.json
View File

@ -18,5 +18,9 @@
},
"scripts": {
"prepare": "node ../../scripts/prepare.js"
},
"dependencies": {
"@storybook/channels": "4.0.0-alpha.1",
"global": "^4.3.2"
}
}

19
lib/addons/src/index.js
View File

@ -1,3 +1,8 @@
// Resolves to window in browser and to global in node
import global from 'global';
export mockChannel from './storybook-channel-mock';
export class AddonStore {
constructor() {
this.loaders = {};
@ -8,8 +13,7 @@ export class AddonStore {
}
getChannel() {
// this.channel should get overwritten by setChannel if package versions are
// correct and AddonStore is a proper singleton. If not, throw.
// this.channel should get overwritten by setChannel. If it wasn't called (e.g. in non-browser environment), throw.
if (!this.channel) {
throw new Error(
'Accessing nonexistent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel'
@ -57,4 +61,13 @@ export class AddonStore {
}
}
export default new AddonStore();
// Enforce addons store to be a singleton
const KEY = '__STORYBOOK_ADDONS';
function getAddonsStore() {
if (!global[KEY]) {
global[KEY] = new AddonStore();
}
return global[KEY];
}
export default getAddonsStore();

0
addons/storyshots/src/storybook-channel-mock.js → lib/addons/src/storybook-channel-mock.js
View File