-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
react native Typescript transform #3209
Conversation
f5677f1
to
e22e1a3
Compare
Codecov Report
@@ Coverage Diff @@
## master #3209 +/- ##
==========================================
- Coverage 36.84% 35.62% -1.23%
==========================================
Files 458 472 +14
Lines 10028 10126 +98
Branches 904 955 +51
==========================================
- Hits 3695 3607 -88
- Misses 5763 5891 +128
- Partials 570 628 +58
Continue to review full report at Codecov.
|
@@ -84,6 +85,11 @@ if (!program.skipPackager) { | |||
} | |||
|
|||
let cliCommand = 'react-native start'; | |||
|
|||
if (program.metroConfig) { | |||
cliCommand += ` --config ${program.metroConfig}`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it possible to make it work with haul? This variable is reassigned when using it (see below)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For haul according to the docs you just modify the generated webpack.haul.js file for typescript
@@ -0,0 +1,54 @@ | |||
[ignore] |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need to configure Flow in a Typescript project?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
part of the react-native boilerplate. will delete
Please add an option for bootstrap script: https://github.com/storybooks/storybook/blob/master/scripts/bootstrap.js |
Bootstrap script option added |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
TBH, I don't see why we need to have a full react-native-typescript example as part of the monorepo.
This is just an example of the compatibility between react-native & storybook & typescript, in this manner we may have all the variations of examples with angular/vue/polymer/typescript/flow/(jquery 😓) but it will be very hard to maintain.
So it can be
- A nice blog post
- A separate repo in the organization
- A seprate repo in your github account (referenced from the nice blog post).
Hello, happy to go either route. "Does this need a new example in the kitchen sink apps?" is a bit open-ended so I just created one anyway. If/when this gets merged and released I am happy to do a blog post with a sample repo. It's a lot of fanfare for what is actually just adding a metro bundler flag. Ciaran |
@igor-dv I think this provides us with a test of TS compatibility with RN along with a much more thorough check of the vanilla RN as well. Our current vanilla example doesn't do much at all. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
examples/react-native-typesript/.gitignore
the typescript
in the folder path is misspelled.
we should also set it up to run in CI so that we can make sure it's working and up to date.
@danielduan Thanks, renamed @igor-dv I have added storyshots too now so it should be more useful. @danielduan Would running the storyshots (npm test) be good enough for CI? Not sure what else we can test via CI Ciaran |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am still convinced that it's an overkill for this repo.
I would rather create a separate Monorepo "storybook/use-cases" and will add there all the relevant examples. For example storybook-with-css-modules
, storybook-with-rn-ts
and so on.
IMO if something is not vital for the project/brand, it should be in a separate place with its own CI and tests. Think of webpack-contrib
, jest-contrib
and others.
@@ -0,0 +1,58 @@ | |||
{ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please add here
"lerna": {
"disabled": true
},
Otherwise, this project will participate in the ts distribution
I tend to agree with @igor-dv on the need for a storybooks/storybook-examples repo... I'd like to discuss this during a roadmap meeting. We can extract it out later, so I do not find this blocking for this PR. |
Issue:
What I did
Added a flag to the react-native storybook cli to allow passing a custom config to the metro bundler
How to test
Build the project and copied the compiled storybook-start.js, also created a sample project.
Is this testable with jest or storyshots?
No
Does this need a new example in the kitchen sink apps?
Yes, added
Does this need an update to the documentation?
Docs added
If your answer is yes to any of these, please make sure to include it in your PR.