react-native-website icon indicating copy to clipboard operation
react-native-website copied to clipboard

React Native 69 will use iOS 12.4 as minimal version but we still recommends es2017 in TS config

Open retyui opened this issue 2 years ago • 11 comments

Description

Can we recommend a "lib": ["es2019"] for [email protected] and above in tsconfig.json ?

What is the problem?

We still recommend to use es2017 for ts config, but with a new minimal iOS version requirements (12.4)

// iOS 11
Intl.PluralRules // undefined (es2018.intl)
Symbol.asyncIterator // undefined (es2018.asynciterable)
String.prototype.trimStart // undefined (es2019.string)
String.prototype.trimEnd // undefined (es2019.string)
Object.fromEntries // undefined (es2019.object)
Array.prototype.flat // undefined (es2019.array)
Array.prototype.flatMap // undefined (es2019.array)

// iOS 12.4
Intl.PluralRules // function
Symbol.asyncIterator // Symbol(Symbol.asyncIterator)
String.prototype.trimStart // function
String.prototype.trimEnd // function
Object.fromEntries // function
Array.prototype.flat // function
Array.prototype.flatMap // function

Links

  • iOS 11 => 12.4 commit: https://github.com/facebook/react-native/commit/982ca30de079d7e80bd0b50365d58b9048fb628f
  • Compare TS & iOS features: https://retyui.github.io/react-native-compat-table/

How can we address it?


Why is it important?

Users will be sure that it's safety to use modern JavaScript features and it won't cause crash in runtime

Who needs this?

TypeScript users

When should this happen (use version numbers if needed)?

React Native 0.69.0

retyui avatar Jun 20 '22 09:06 retyui

Does Hermes support all of these features?

tido64 avatar Jun 20 '22 18:06 tido64

I don't have any ideas what Hermes support (

retyui avatar Jun 20 '22 19:06 retyui

If I understand this setting correctly, I don't think we should recommend ES2019 when Hermes is our lowest common denominator. It doesn't mean that you can't have ES2019 in your own codebase though. You're free to bump it if you don't use Hermes or use your own polyfills.

tido64 avatar Jun 20 '22 19:06 tido64

Let's try look at it from developer perspective

  • official docs it is a source of truth for him/her

He/She creates a new React Native project then add typescript support, and tried to use one of modern methods:

Object.fromEntries(...)
//     ^^^^^^^^^^ TS2550: Property 'fromEntries' does not exist on type 'ObjectConstructor'. 
//                Do you need to change your target library? 
//                Try changing the 'lib' compiler option to 'es2019' or later.

And as result the Typescript thrown and error, with suggestion Try changing the 'lib' compiler option to 'es2019' or later

Developer is smart and decided to check it in runtime, run it on iOS everything OK, run it on Android everything OK. No runtime exceptions!!!


What conclusions can he/she draw?

  • TS config from docs is outdated...
  • or example incorrect...
  • ...

Then make a release and started getting bad review that app is crashing (for iOS 11.0...12.3 users)


From my point of view this a big gab, why documentation doesn't explained why es2017 is default lib option

Agree, that's not required to update lib to 2019 but we definitely need to clarify it

retyui avatar Jun 20 '22 19:06 retyui

Yes, we should clarify this in the documentation.

tido64 avatar Jun 21 '22 09:06 tido64

Does Hermes support all of these features?

@tido64 Now I can answer this question, All es2019 lib features supported by the 3 latest Hermes versions

image

See more: https://retyui.github.io/react-native-compat-table/

retyui avatar Jun 21 '22 22:06 retyui

This is really awesome! How did you generate this table? I guess we should recommend 2019 then?

tido64 avatar Jun 22 '22 20:06 tido64

Or maybe we should be more granular, e.g. ["ES2017.object", "ES2017.String", ...]. I know Intl support isn't complete, so the table is a bit misleading there.

tido64 avatar Jun 22 '22 20:06 tido64

In TypeScript 4.5, lib files can be overriden by npm modules, find out more in the blog.

also, we can define custom lib

{
 "dependencies": {
    "@typescript/lib-2017": "npm:@types/hermes-0-11-0"
  }
}

but it is required modern version of TS

retyui avatar Jun 24 '22 09:06 retyui

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

github-actions[bot] avatar Sep 23 '22 02:09 github-actions[bot]

  • https://github.com/react-native-community/react-native-template-typescript/blob/5b22365750a285feddf7a3db26450cda4fe4cd1d/template/tsconfig.json#L3
  • https://github.com/tsconfig/bases/blob/96274973952a623d9f2e310987ceb4a19dcc362c/bases/react-native.json#L10

retyui avatar Sep 23 '22 13:09 retyui