Add option to use storybook with more than one user #132
Conversation
--reset-cache (simply passes option to react-native cli, when developing it sometimes makes difficult hard to debug, because it likes to cache things). --skip-packager (skip react-native packager all together and start only storybook server). --manual-id (tells storybook that now users should get custom id which they have to use in react-native app to connect to storybook. It allows to deploy storybook server to any host and tell users to download the app and enter code to play with it. If this flag is not passed, everything works same way as before. When user opens storybook he gets his own custom id and that id is sent through websocket query to be saved in server.). Story view component unmounts its events listeners when it is not rendered anymore.
|
If somebody is going to be interested, we will try to add example project to github in few days. |
src/preview/index.js
Outdated
| const host = params.host || 'localhost'; | ||
| const port = params.port || 7007; | ||
| const url = `ws://${host}:${port}`; | ||
| const url = `ws://${host}:${port}/${params.query}`; |
There was a problem hiding this comment.
If params.query is not set, the url will have /undefined in the end. Better set it to an empty string if it's not set.
const query = params.query || '';
const url = `ws://${host}:${port}/${query}`;
There was a problem hiding this comment.
Nice catch, thanks :)
|
Hi @Gongreg |
|
Hey, today I will upload example project with readme about running the project. |
|
@mnmtanish Updated the initial comment, added example project. I will be waiting for your response. |
|
Hey, so what is going to happen next? Do I need to do something or I can just wait for PR to go into the master? |
|
Hi @Gongreg, just released |
|
Thank you very much :). |
Add option to differentiate connected users
We really like what storybook has to offer. We are going to use it to host our styleguide examples. We didn't like option to use react native web, we wanted users to be able to feel components in their phone. But react-native-stylebook doesn't support more than one user at the time. That is why I added options necessary to be able to host react-native-storybook in server and allow users play with the components.
wix/react-native-storybook-example
Some work in progress, but in this gif you can see that we have one styleguide server running, two simulators and two browsers. User enters the code he sees (later on it could be QR code or anything else) and then he can play with his app without interupting others.
I've added some command parameters:
Also one bug fixed:
Story view component unmounts its events listeners when it is not rendered anymore.
Sadly I had to insert one dependency (uuid). It was already a dependency of some other your used package. In my opinion it is not that bad, because this id thing could be a core feature of react-native-storybook.
How things work:
If you don't use --manual-id option, everything works same way as before.
When you apply --manual-id option when running script, every time someone opens a storybook they will get uniq Id (it is random, so there is a chance of collision, but it shouldn't be a problem).
That uniqId is sent through websocket query to server (ws://localhost:7007/pairedId=1234).
When any event happens and a new data is being sent through websocket data will be only sent to other browsers/phones who also have pairedId=1234.
I have also added example screen to enter code in react-native in example project. Same thing happens in phone, you enter code, it is set through query. If you want to look into things more closely, there is a readme file inside example project. Also it is not very big, so it shouldn't take long time to look into contents inside it.