Enable TS type-only class fields by switching TS Babel from preset to transform plugin

[pekala]

Fixes #8918

Type-only class fields using the declare keyword were added by TS 3.7. CRA currently fails when it encounters them with the following error:

TypeScript 'declare' fields must first be transformed by @babel/plugin-transform-typescript.
If you have already enabled that plugin (or '@babel/preset-typescript'), make sure that it runs before any plugin related to additional class features:
 - @babel/plugin-proposal-class-properties
 - @babel/plugin-proposal-private-methods
 - @babel/plugin-proposal-decorators

Declare fields are useful when using React context in class components, e.g.:

class MyComponent extends Component<MyProps> {
    static contextType = MyContext
    declare context: React.ContextType<typeof MyContext>

This PR switches from Babel TS preset to Babel TS transform plugin in order to run the babel transform before @babel/plugin-proposal-class-properties. It also switches the support for declare fields by using the allowDeclareFields option on the plugin. This will be the default for Babel 8, but for now, we need to use the option.

The preset to plugin switch should have no other effect since the babel TS preset wraps only one plugin and provides little more than the transform plugin itself.

[facebook-github-bot]

Hi @pekala!

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[facebook-github-bot]

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

[sakalys]

So what are the things that broke?

[pekala]

@sakalys It's most likely outdated yarn.lock.cached - Looking at this PR I think that file needs to be updated. But I'm not sure what's the procedure here, would appreciate some guidance.

[sakalys]

@pekala, one thing to try is to update the PR by merging in the new master branch into your own. After that, make sure to run yarn command, to generate a new "yarn.lock" file.

[pekala]

Hmm, I don't think it's that simple. yarn.lock files are ignored in this repo, there is this yarn.lock.cached file, but it's unclear to me what how it's updated.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[dgreensp]

I ran into this issue and am interested in this fix

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[ekilah]

Looks like there are conflicts now, but if this is all that needs to happen to be able to use declare I too am interested still. Just hopping in to fight the bot

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.