fix: Fix #120 (running "yarn web" on Expo fails).

[lauriharpf]

Issue: Fix #120. The "dist" output in the v6 alpha packages contains JSX and ESNext constructs. Browsers can't handle these natively, so "yarn web" fails on Expo. Fix by using slightly less modern constructs in our dist outputs.

What I did

Changed targets from ESNext to ES6 (which modern browsers can run without transpiling). Changed the jsx output settings to react from react-native so that the JSX can also be rendered by browsers in addition to React Native. See https://www.typescriptlang.org/docs/handbook/jsx.html#basic-usage .

How to test

1. Pull this branch
2. Run yarn prepareAll in the root of directory of this branch
3. Set up an Expo v6 alpha project using the instructions in docs: Fixes #247 by editing the v6 alpha guide with instructions on how to set up with Expo #250, but with a small twist: Instead of doing

yarn add @storybook/react-native@next \
            @react-native-async-storage/async-storage \
            @storybook/addon-ondevice-actions@next \
            @storybook/addon-ondevice-controls@next \
            @storybook/addon-ondevice-backgrounds@next \
            @storybook/addon-ondevice-notes@next \
            @storybook/addon-actions \
            @react-native-community/datetimepicker \
            @react-native-community/slider \
            @storybook/addon-controls

point the React Native Storybook dependencies to your local files:

yarn add /REPLACE-WITH-PATH-TO-MY-REACT-NATIVE-STORYBOOK-REPO/app/react-native \
            @react-native-async-storage/async-storage \
            /REPLACE-WITH-PATH-TO-MY-REACT-NATIVE-STORYBOOK-REPO/addons/ondevice-actions \
            /REPLACE-WITH-PATH-TO-MY-REACT-NATIVE-STORYBOOK-REPO/addons/ondevice-controls  \
            /REPLACE-WITH-PATH-TO-MY-REACT-NATIVE-STORYBOOK-REPO/addons/ondevice-backgrounds \
            /REPLACE-WITH-PATH-TO-MY-REACT-NATIVE-STORYBOOK-REPO/addons/ondevice-notes  \
            @storybook/addon-actions \
            @react-native-community/datetimepicker \
            @react-native-community/slider \
            @storybook/addon-controls

4. Run yarn web in the root directory of the Expo v6 alpha project that you set up. The project should start up in your browser. If you repeat this with the next-6.0 branch instead of this branch, yarn web should cause an error similar to this:

/Users/lauriharpf/Repos/lauriharpf/appName/node_modules/@storybook/react-native/dist/preview/Preview.js 12:14
Module parse failed: Unexpected token (12:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const STORAGE_KEY = 'lastOpenedStory';
| export default class Preview {
>     _clientApi;
|     _storyStore;
|     _addons;

5. Experiment with yarn ios and yarn android in the Expo project as well as yarn ios and yarn android in the vanilla React Native project at/examples/native in this repo. All should work.

• Does this need a new example in examples/native? no, not in my opinion
• Does this need an update to the documentation? no, not in my opinion

[dannyhw]

Overall seems like the right move, just a few small questions :)

[lauriharpf]

Overall seems like the right move, just a few small questions :)

Awesome 👍 . Ask away, will try to answer the best I can :)

[dannyhw]

Overall seems like the right move, just a few small questions :)

Awesome 👍 . Ask away, will try to answer the best I can :)

I left the questions as review comments.

[dannyhw]

Sorry I thought the questions would show up without submitting the review. Overall I think I'm ok with these changes, just clarification on those points would be good 👍.

[dannyhw]

Seems good, the only thing I would say is that we need to apply this to the other addons also. I'll open a new PR with those changes.