Adds support for extra source extensions via CLI arguments #11932

orta · 2017-01-16T19:05:22Z

What existing problem does the pull request solve?

Hi there, I want to use TypeScript with React Native ( orta/systems-theory#1 )

All of the current techniques for this resolves around a two-step building process, wherein you have two toolchains running and watching for changes.

For example you would have TypeScript parsing a file, which would drop a JS file into a build folder, where react-packager would then pick it up and do the usual babel work. I'd like to simplify and unify that toolchain process.

I felt that this was reasonable because of the getTransformModulePath option inside the CLI, a developer can use a custom transform function to handle different source types before handing off the results to Babel to ensure the rest of the process acts like it does right now.

Test plan (required)

I have used this locally, and amended a test to use the updated syntax, but with some guidance I can add some more tests to this PR 👍

Code formatting

🥇 (I think...)

Sidenote

I expected that putting a rn-cli.config.js inside the root of my project would have it's variables reflected by default, but instead I need to run with --config rn-cli.config.js - is this expected behavior?

facebook-github-bot · 2017-01-16T19:05:30Z

By analyzing the blame information on this pull request, we identified @cpojer and @davidaurelio to be potential reviewers.

orta · 2017-01-16T19:54:55Z

Note: This doesn't attempt to handle some of the trickier source map issues, I think as long as I have access to a transform module function, I should be able to handle that.

hramos · 2017-01-19T23:04:23Z

Thanks for the PR! Will wait for @davidaurelio to take a look.

alloy · 2017-01-25T21:39:28Z

local-cli/server/server.js

@@ -92,6 +92,11 @@ module.exports = {
    parse: (val) => val.split(','),
    default: (config) => config.getProjectRoots(),
  }, {
+    command: '--sourceExts [list]',
+    description: 'Specify any source extentions to be used by the packager, defaults to js',


Maybe this can be made slightly more helpful by mentioning that this can be used in combination with --transformer to process other file types?

- Removes flowconfig - Adds tsconfig - Renames all .js files to .tsx

orta · 2017-02-07T12:21:44Z

@davidaurelio - I'm happy to rebase, and make changes if the conceptual idea is 👍 ( that adding a CLI flag / config setting is a good way to do this? )

Summary: Currently it is not trivial for people to get started with React Native. `react-native init MyApp` just creates a simple app with a single screen. People have to spend time figuring out how to add more screens, or how to accomplish very basic tasks such as rendering a list of data or handling text input. Let's add an option: `react-native init --template navigation` - this creates a "starter" app which can be easily tweaked into the actual app the person wants to build. **Test plan (required)** - Checked that 'react-native init MyApp' still works as before: <img width="487" alt="screenshot 2017-02-02 16 56 28" src="https://cloud.githubusercontent.com/assets/346214/22559344/b2348ebe-e968-11e6-9032-d1c33216f490.png"> <img width="603" alt="screenshot 2017-02-02 16 58 04" src="https://cloud.githubusercontent.com/assets/346214/22559370/c96a2ca6-e968-11e6-91f7-7afb967920fc.png"> - Ran 'react-native init MyNavApp --template'. This prints the available templates: ``` $ react-native init MyNavApp Closes facebook#12170 Differential Revision: D4516241 Pulled By: mkonicek fbshipit-source-id: 8ac081157919872e92947ed64ea64fb48078614d

Summary: Update the template that will be used by `react-native init --template navigation`. The goal is to make it easier for people to get started by demonstrating a few very basic concepts such as navigation, lists and text input. **Test plan (required)** <img src="https://cloud.githubusercontent.com/assets/346214/22697898/ced66f52-ed4a-11e6-9b90-df6daef43199.gif" alt="Android Example" height="800" style="float: left"/> <img src="https://cloud.githubusercontent.com/assets/346214/22697901/cfeab3e4-ed4a-11e6-8552-d76585317ac2.gif" alt="iOS Example" height="800"/> Closes facebook#12260 Differential Revision: D4521758 Pulled By: mkonicek fbshipit-source-id: d7d9e481dd3373917ac68ec9169b9ac3267547a9

Reviewed By: mkonicek Differential Revision: D4522116 Ninja: oss only fbshipit-source-id: d17e0e8badcfe97eaea092e5d5274e02904a534d

React 15.4.x has been out for awhile. Test Plan: open UI Explorer, go through the various screens and look for warnings or errors.

Summary: Fixes facebook#11272 Fixes facebook#11572 Fixes facebook#11781 The main changes here are: * This depends on the latest CocoaPods (1.2.0). It’s currently in RC, but if I’m not mistaken a proper release is expected soon. /cc dantoml * Adds required header search paths for the jschelpers and cxxreact subspecs. * Makes the jschelpers and cxxreact headers private to building React Native, not visible to the user’s project. * It uses the canonical upstream Yoga v1.0.0 podspec: https://github.com/facebook/yoga/blob/master/Yoga.podspec * Consistent styling. I have been able to get our app to build again using this artsy/emission#437. The spec has some warnings, but otherwise fully passes lint. rh389 sjmueller Could you please test with your projects? Closes facebook#12089 Differential Revision: D4518605 fbshipit-source-id: ecf86232d8b1af52d139eadd1acc10f5c1d42c29

alloy · 2017-02-23T17:07:21Z

Rebased this on top of 0.42.0-rc.3 for now.

alloy · 2017-02-25T12:44:27Z

Existing product pains issue https://react-native.canny.io/feature-requests/p/packager-add-option-to-configure-extensions-dependencygraph

Summary: In my RN checkout, I use "upstream" as my remote instead of "origin" -> this lets me run `scripts/bump-oss-version.js --remote upstream 0.41.1` for example. Also made the script executable so we don't need to put `node` in front of it, and updated the Releases.md doc. Closes facebook#12230 Differential Revision: D4515070 Pulled By: mkonicek fbshipit-source-id: f218a6b77959588ee5f625b8589ac080dd010034

E.g. `ts` and `tsx` for TypeScript.

ds300 · 2017-04-20T14:58:07Z

Is there still interest in having this feature? I wouldn't mind doing the work to bring it up to date.

43081j · 2017-04-20T21:10:27Z

unless you can suggest another, non-hacky way to add typescript to the build process (without just having a separate build workflow), i would say this is still very useful.

ds300 · 2017-04-20T21:30:51Z

Yes. I suppose I'm asking for someone at FB to express interest in this feature though. No point putting the work in if it is just going to be ignored.

43081j · 2017-04-23T13:19:10Z

is there any recommended work-around for now?

i have been struggling to get typescript as part of the build process. right now im having to run two separate build tasks each time (to compile TS, then react-native run). I did try using asset extensions config but it doesn't seem to work.

ds300 · 2017-04-23T13:57:17Z

I think, maybe depending on which version of react-native you use, assetExts + custom transformer should work as long as you require TypeScript files with their extensions like import {blah} from 'blub.tsx'

You could also try using https://github.com/callstack-io/haul, which is very easy to set up for TypeScript.

Failing that, the only option I know of is to fork and patch react-native.

cpojer · 2017-04-25T10:13:15Z

Alright, I think it is time to ship this thing. @orta would you be able to make this change more incremental with many smaller PRs? As it is, it is quite hard to review and ship with confidence; it also doesn't add any tests ;)

ds300 · 2017-04-25T10:38:00Z

@cpojer This pr is out-of-date and so the diff with master looks funky. The actual changes made by @orta are fairly minimal: 6dca2ae

But they still need to be re-done for 0.43 since some significant changes have been made to the packager code. Also, yes, needs tests :)

As mentioned before, I'm happy to do this too, if @orta is busy.

orta · 2017-04-25T10:40:03Z

Awesome, I'm basically OOO for the rest of this week - so @ds300 you're welcome to update it ( I just gave you commit access to my fork, or you can create your own PR)

cpojer · 2017-04-25T10:40:25Z

Yep, rebasing and making it minimal/incremental + adding tests seems like a good first start. CC me.

ds300 · 2017-04-27T18:07:21Z

@orta I made a new PR to avoid the mess, since so much had changed. It's over at #13689

cpojer · 2017-04-27T18:08:55Z

I'll close this one and take a look at the other one tomorrow :)

facebook-github-bot added GH Review: review-needed CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. labels Jan 16, 2017

cpojer assigned davidaurelio Jan 16, 2017

alloy reviewed Jan 25, 2017

View reviewed changes

orta referenced this pull request in artsy/emission Jan 30, 2017

[Typescript] Initial project conversion

220fc40

- Removes flowconfig - Adds tsconfig - Renames all .js files to .tsx

grabbou added 3 commits February 2, 2017 18:47

[0.42.0-rc.0] Bump version numbers

26060a4

Remove bundle.js

0ec85db

[0.42.0-rc.1] Bump version numbers

ff8257c

Martin Konicek added 4 commits February 8, 2017 11:46

CLI: Add README to app template, lint

021e754

Reviewed By: mkonicek Differential Revision: D4522116 Ninja: oss only fbshipit-source-id: d17e0e8badcfe97eaea092e5d5274e02904a534d

[0.42.0-rc.2] Bump version numbers

363b904

orta mentioned this pull request Feb 8, 2017

[WIP] Typescript conversion artsy/emission#438

Closed

3 tasks

ide and others added 5 commits February 8, 2017 17:51

[React] Update React version to ~15.4.1 instead of the RC

ead6dcd

React 15.4.x has been out for awhile. Test Plan: open UI Explorer, go through the various screens and look for warnings or errors.

Merge branch

9c2760a

Temp fix for the bump script

d877c25

[0.42.0-rc.3] Bump version numbers

3ccf8df

alloy force-pushed the source_exts branch from e69e66c to 7e73cd8 Compare February 23, 2017 17:06

orta mentioned this pull request Feb 25, 2017

[Packager] Add option to configure extensions DependencyGraph uses in module DFS. #388

Closed

ide and others added 3 commits February 28, 2017 11:40

[0.42.0] Bump version numbers

6e65093

[Packager/Haste/CLI] Add support for custom source file extensions.

6dca2ae

E.g. `ts` and `tsx` for TypeScript.

alloy force-pushed the source_exts branch from 7e73cd8 to 6dca2ae Compare March 5, 2017 00:35

jmfirth mentioned this pull request Apr 4, 2017

[Packager] Source Maps are not supported in custom transformer (typescript in this case) #393

Closed

ds300 mentioned this pull request Apr 27, 2017

Enable custom source file extensions through cli args or rn-cli.config.js #13689

Closed

cpojer closed this Apr 27, 2017

hramos added the p: Microsoft Partner: Microsoft label Aug 9, 2019

hramos unassigned davidaurelio Aug 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds support for extra source extensions via CLI arguments #11932

Adds support for extra source extensions via CLI arguments #11932

orta commented Jan 16, 2017

facebook-github-bot commented Jan 16, 2017

orta commented Jan 16, 2017

hramos commented Jan 19, 2017

alloy Jan 25, 2017

orta commented Feb 7, 2017

alloy commented Feb 23, 2017

alloy commented Feb 25, 2017

ds300 commented Apr 20, 2017 •

edited

Loading

43081j commented Apr 20, 2017

ds300 commented Apr 20, 2017

43081j commented Apr 23, 2017

ds300 commented Apr 23, 2017

cpojer commented Apr 25, 2017

ds300 commented Apr 25, 2017

orta commented Apr 25, 2017

cpojer commented Apr 25, 2017

ds300 commented Apr 27, 2017

cpojer commented Apr 27, 2017

Adds support for extra source extensions via CLI arguments #11932

Adds support for extra source extensions via CLI arguments #11932

Conversation

orta commented Jan 16, 2017

facebook-github-bot commented Jan 16, 2017

orta commented Jan 16, 2017

hramos commented Jan 19, 2017

alloy Jan 25, 2017

Choose a reason for hiding this comment

orta commented Feb 7, 2017

alloy commented Feb 23, 2017

alloy commented Feb 25, 2017

ds300 commented Apr 20, 2017 • edited Loading

43081j commented Apr 20, 2017

ds300 commented Apr 20, 2017

43081j commented Apr 23, 2017

ds300 commented Apr 23, 2017

cpojer commented Apr 25, 2017

ds300 commented Apr 25, 2017

orta commented Apr 25, 2017

cpojer commented Apr 25, 2017

ds300 commented Apr 27, 2017

cpojer commented Apr 27, 2017

ds300 commented Apr 20, 2017 •

edited

Loading