Skip to content
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

Use TypeScript by default for new applications #35165

Closed
wants to merge 1 commit into from

Conversation

NickGerleman
Copy link
Contributor

@NickGerleman NickGerleman commented Nov 1, 2022

Summary

This change moves the default new application template from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types.

This is largely derived from @react-native-community/react-native-template-typescript, maintained by @radko93, with a couple of changes.


  1. Updated @types/* devDependencies to match bumped libraries (e.g. Jest 26 to 20).
  2. Removes @types/react-native
  3. Removed explicit moduleFileExtensions to Jest config in package.json (TS and TSX and added by default in current versions)
  4. Removes overrides to eslint config to disable no-shadow and no-undef, since this was fixed in the underlying eslint config with Fix eslint no-shadow issue with TypeScript enums #32644 and Disable ESLint no-undef for TypeScript files #32655
  5. Re-translated App.js to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged)
  6. Aligns completely to @tsconfig/react-native maintained configuration (We no longer have the opinionated override of skipLibCheck). The important settings are that strict is enabled for, but allowJS is also enabled to let users import JS modules without anything unexpected. esModuleInterop is enabled, which is needed for consistency with Babel import transformations used by Metro.
    



Consistent with our current documentation built against the community template, tsc will typecheck your code without emitting(building) anything.


Changelog:
[General][Changed] - Use Vanilla JS in the App Template

Test Plan

Added usage of tsc and jest when validating a newly built app. Passes in CircleCI test_js job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get).

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner fb-exported labels Nov 1, 2022
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D40911951

@NickGerleman
Copy link
Contributor Author

Need to remove end to end app tests which flow check, and see if we can add TS to this.

@analysis-bot
Copy link

analysis-bot commented Nov 1, 2022

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 6,992,208 +0
android hermes armeabi-v7a 6,368,750 +0
android hermes x86 7,404,900 +0
android hermes x86_64 7,268,908 +0
android jsc arm64-v8a 8,856,021 +0
android jsc armeabi-v7a 7,594,539 +0
android jsc x86 8,913,766 +0
android jsc x86_64 9,397,123 +0

Base commit: 5d26cea
Branch: main

@analysis-bot
Copy link

analysis-bot commented Nov 1, 2022

Platform Engine Arch Size (bytes) Diff
ios - universal n/a --

Base commit: b5ea5a2
Branch: main

@pull-bot
Copy link

pull-bot commented Nov 1, 2022

PR build artifact for 03825f4 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

@pull-bot
Copy link

pull-bot commented Nov 1, 2022

PR build artifact for 03825f4 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

@NickGerleman NickGerleman marked this pull request as draft November 1, 2022 22:31
@NickGerleman NickGerleman changed the title Use Vanilla JS in the New App Template Use TypeScript in the New App Template Nov 1, 2022
@github-actions
Copy link

github-actions bot commented Nov 2, 2022

Warnings
⚠️

scripts/run-ci-e2e-tests.js#L22 - scripts/run-ci-e2e-tests.js line 22 – 'rm' is assigned a value but never used. (no-unused-vars)

Generated by 🚫 dangerJS against f739945

@NickGerleman NickGerleman changed the title Use TypeScript in the New App Template Use TypeScript by default for new applications Nov 2, 2022
@NickGerleman NickGerleman force-pushed the export-D40911951 branch 2 times, most recently from f9e373c to 7083d65 Compare November 2, 2022 07:47
@facebook-github-bot
Copy link
Contributor

@NickGerleman has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D40911951

NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Nov 2, 2022
Summary:
This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes.
1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20).
2. Removes `types/react-native`
3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions)
4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655
5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged)
6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything.

I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports.

We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future.

[Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup.

Changelog:
[General][Changed] - Use Vanilla JS in the App Template

Pull Request resolved: facebook#35165

Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get).

Differential Revision: D40911951

Pulled By: NickGerleman

fbshipit-source-id: a989523e99ad0045ab4d345aeb2481ef3ca958ca
@NickGerleman NickGerleman marked this pull request as ready for review November 2, 2022 08:23
NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Nov 2, 2022
Summary:
This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes.
1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20).
2. Removes `types/react-native`
3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions)
4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655
5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged)
6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything.

I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports.

We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future.

[Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup.

Changelog:
[General][Changed] - Use Vanilla JS in the App Template

Pull Request resolved: facebook#35165

Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get).

Differential Revision: D40911951

Pulled By: NickGerleman

fbshipit-source-id: 81136e2aa2602d074107e1fbe8110498406e6ac9
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D40911951

NickGerleman added a commit to NickGerleman/react-native that referenced this pull request Nov 2, 2022
Summary:
This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This is largely derived from [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript), maintained by radko93, with a couple of changes.
1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20).
2. Removes `types/react-native`
3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions)
4. Removes overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655
5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged)
6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything.

I discovered through this change that the way 'Utilities' is imported in typings doesn't seem to work in the template app use-case (but works in the RN repo?). Fixed up those imports.

We also partially revert facebook@f49b251 which deleted typings. Checking to make sure we keep these in the appropriate place in the future.

[Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup.

Changelog:
[General][Changed] - Use Vanilla JS in the App Template

Pull Request resolved: facebook#35165

Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get).

Differential Revision: D40911951

Pulled By: NickGerleman

fbshipit-source-id: 05bed911249583b02d2c180a27f955e2e36c0cc4
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D40911951

@pull-bot
Copy link

pull-bot commented Nov 2, 2022

PR build artifact for e286da2 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

@pull-bot
Copy link

pull-bot commented Nov 2, 2022

PR build artifact for e286da2 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

@NickGerleman NickGerleman marked this pull request as draft November 2, 2022 09:42
Summary:
This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This used [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript) as a main reference, maintained by radko93. A few things are different:
1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20).
2. Removed `types/react-native`
3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions)
4. Removed overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655
5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged)
6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything.

[Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup.

Changelog:
[General][Changed] - Use TypeScript by default for new applications

Pull Request resolved: facebook#35165

Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get).

Reviewed By: cortinico

Differential Revision: D40911951

Pulled By: NickGerleman

fbshipit-source-id: 08d4624bc08163c7dc1272f605bc3a8e9a89173b
@facebook-github-bot
Copy link
Contributor

This pull request was exported from Phabricator. Differential Revision: D40911951

@NickGerleman NickGerleman marked this pull request as ready for review November 2, 2022 22:13
@pull-bot
Copy link

pull-bot commented Nov 2, 2022

PR build artifact for f739945 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

@pull-bot
Copy link

pull-bot commented Nov 2, 2022

PR build artifact for f739945 is ready.
To use, download tarball from "Artifacts" tab in this CircleCI job then run yarn add <path to tarball> in your React Native project.

@react-native-bot
Copy link
Collaborator

This pull request was successfully merged by @NickGerleman in aaf1990.

When will my fix make it into a release? | Upcoming Releases

@react-native-bot react-native-bot added the Merged This PR has been merged. label Nov 3, 2022
OlimpiaZurek pushed a commit to OlimpiaZurek/react-native that referenced this pull request May 22, 2023
Summary:
This change moves the default new application template in OSS from Flow to TypeScript. This better aligns with the communities usage, and aligns to the great work that has been happening for TS codegen and built-in types. This used [`react-native-community/react-native-template-typescript`](https://github.com/react-native-community/react-native-template-typescript) as a main reference, maintained by radko93. A few things are different:
1. Updated `types/*` devDependencies to match bumped libraries (e.g. Jest 26 to 20).
2. Removed `types/react-native`
3. Removed explicit `moduleFileExtensions` to Jest config in package.json (TS and TSX and added by default in current versions)
4. Removed overrides to eslint config to disable `no-shadow` and `no-undef`, since this was fixed in the underlying eslint config with facebook#32644 and facebook#32655
5. Re-translated `App.js` to be a direct translation (e.g. still a raw function instead of React.FC which is sometimes discouraged)
6. Aligns completely to `tsconfig/react-native` maintained configuration (We no longer have the opinionated override of `skipLibCheck`). The important settings are that `strict` is enabled for, but `allowJS` is also enabled to let users import JS modules without anything unexpected. `esModuleInterop` is enabled, which is needed for consistency with Babel import transformations used by Metro. Consistent with our [current documentation](https://reactnative.dev/docs/typescript) built against the community template, `tsc` will typecheck your code without emitting(building) anything.

[Documentation](https://reactnative.dev/docs/typescript) will need to be updated as a followup.

Changelog:
[General][Changed] - Use TypeScript by default for new applications

Pull Request resolved: facebook#35165

Test Plan: Added usage of `tsc` and `jest` when validating a newly built app. Passes in CircleCI `test_js` job. This also meant removing some cases of copying packages into the users app to pull in the root Metro config (we seem to be able to use the template Metro config consistent with what real apps would get).

Reviewed By: cortinico

Differential Revision: D40911951

Pulled By: NickGerleman

fbshipit-source-id: 15994534235695e91cf994ad06ba2183dfc89a50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. p: Facebook Partner: Facebook Partner
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants