Add TypeScript tooling and configs #2360

with-heart · 2021-04-27T11:48:03Z

What:
This PR is an attempt to add TypeScript-related tooling and config required to complete the conversion from Flow to TypeScript.

First step was getting eslint to run without any configuration errors (which @rjdestigter was running into in #2359), which seems to working for the most part. Also created a root tsconfig.json and tsconfig files for each package which extend from the root, since all of the existing were already duplicating the same config.

Why:
#2358

How:

Created a root tsconfig.json which specifies the compilerOptions shared by all of the existing tsconfig.json files
- Set include to ["packages", "scripts", "site", "test", "playgrounds"]
- Removed a few rules specifiers already enabled by "strict": true
Created new and moved existing tsconfig.json files at root of each package
- Specified extends for each to root tsconfig.json
- Removed compilerOptions from all as they now inherit these from the root
- Set include for each to "src"
Configured eslint to support ts
- Added @typescript-eslint/parser & @typescript-eslint/eslint-config
- Switched eslint-config-standard to eslint-config-standard-with-typescript
- Set parserOptions.project to root tsconfig.json
- Disabled no-use-before-define and enabled @typescript-eslint/no-use-before-define as warn
Added @babel/preset-typescript package and added to presets in babel.config.js

Checklist:

Documentation
Tests
Code complete
Changeset N/A?

I haven't even attempted to build anything yet or actually convert files to ts. It seems like a lot of the base tooling- and config-related stuff probably needs to be dealt with first in order to support the conversion of actual packages.

I'd like to expand the checklist to include remaining items to handle, but I need some feedback and to explore a little more to determine what else there is to do.

changeset-bot · 2021-04-27T11:48:06Z

⚠️ No Changeset found

Latest commit: 8210bea

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

codesandbox-ci · 2021-04-27T11:52:24Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 8210bea:

Sandbox	Source
Emotion	Configuration

rjdestigter · 2021-04-27T15:53:20Z

Nice! I rebased (locally) my PR off your branch. It looks like there is a conflict between ESLint and Prettier when defining types and interfaces:

ESLint will complain about commas and semicolons: Unexpected separator (;).eslint@typescript-eslint/member-delimiter-style

While prettier seems to think we have bad syntax when there is neither: (property) SerializedStyles.styles: string

package.json

babel.config.js

package.json

packages/babel-plugin/tsconfig.json

with-heart · 2021-04-28T00:08:28Z

@rjdestigter Yeah, I noticed that as well! I think it has to do with prettier being unsure which parser to use. Need to investigate more.

with-heart · 2021-05-03T16:55:49Z

I made a few changes that moved this forward:

removed standard plugins
added import, react, and @typescript-eslint as eslint plugins
added an eslint files override for **/packages/**/*.tsx? that sets the prettier parser to typescript

This puts us at 38 errors and 61 warnings. The warnings are all for @typescript-eslint/no-use-before-define, and the errors are split between the parser being unable to deal with flow and parserOptions.project confusion for root *.js config files and **/__mocks__/*.js files. Not sure of the best way to resolve that last issue.

with-heart · 2021-05-03T16:57:10Z

Hoping to take a look at the review comments later today.

package.json

with-heart · 2021-05-04T12:12:32Z

I made a few more changes this morning. build works fine and linting now results in 32 errors related to @typescript-eslint/eslint-parser being unable to parse flow.

If I add an overrides section for **/packages/**/*.jsx?" with "parser": "babel-eslint", this drops to only 5 linting errors related to flow. I don't know enough about flow` to know how to resolve those though, and I'm not sure if we'd want to include that override temporarily while the conversion to ts happens.

Thoughts?

michaeljaltamirano · 2021-05-08T03:00:18Z

packages/babel-preset-css-prop/tsconfig.json

@@ -0,0 +1,4 @@
+{


Can't leave a comment on the diff but packages/babel-plugin-jsx-pragmatic/tsconfig.json being empty looks to be the cause for the Flow CI issue.

tsconfig.json

JoshuaKGoldberg · 2021-05-11T14:47:21Z

yarn.lock

+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
+  integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
+
 typescript@next:


I think you'll want to combine these typescript versions. Eventually the project will use TypeScript language features post-3.6.0 and dtslint might break on them if it's using the old version.

typescript@next, typescript@^4.2.4:

tsconfig.json

JoshuaKGoldberg · 2021-05-21T04:12:04Z

tsconfig.json

+    "target": "es5"
+  },
+  "include": ["packages", "scripts", "site", "test", "playgrounds"],
+  "exclude": ["node_modules"]


I've found myself doing this in my own integration branch to get TypeScript to not complain about all the $ExpectError dts tests:

Suggested change

"exclude": ["node_modules"]

"exclude": ["node_modules", "packages/*/types/test*"]

I guess, more broadly, what is the strategy for .d.ts generation? Should a build step like build:types be added that runs tsc --declaration into types/ folders?

I guess, more broadly, what is the strategy for .d.ts generation? Should a build step like build:types be added that runs tsc --declaration into types/ folders?

This one is covered by Preconstruct which we are using to build all packages. You can check out example output containing TS declarations here:
https://unpkg.com/browse/@changesets/cli@2.14.0/dist/

package.json

JoshuaKGoldberg · 2021-05-26T13:50:59Z

@with-heart I got a passing build on this separate PR: JoshuaKGoldberg#1

Now that the Prettier update is in master, If you merge master into ts-migration and ts-migration into your fork's add-ts-tooling I can send a PR from my fork to add-ts-tooling?

with-heart · 2021-06-07T23:17:53Z

Welp, I've updated the branch but I was being mindless and rebased. My bad for throwing a wrench into things, wasn't really thinking.

JoshuaKGoldberg · 2021-06-15T17:19:41Z

This all looks good either way 😄 , I'll get my branch updated hopefully end of this week!

@with-heart, other than updating JoshuaKGoldberg#1, is there anything you'd like me to do to help? I think once that's updated it would be ready to be merged in here?

packages/babel-plugin-jsx-pragmatic/tsconfig.json

Andarist · 2021-06-25T09:15:58Z

@with-heart friendly 🏓 would you mind taking a look at what's up with CI?

with-heart · 2021-06-25T14:15:38Z

I fixed the issue with the eslint parser for prettier and removed the per-package tsconfig.json files. Are you able to re-run the workflows for me @Andarist?

Andarist · 2021-06-25T14:58:54Z

@with-heart thank you for this! ❤️

with-heart changed the title ~~Add TypeScript tooling~~ Add TypeScript tooling and configs Apr 27, 2021

with-heart mentioned this pull request Apr 27, 2021

Rewrite to TypeScript #2358

Open

22 tasks

Andarist reviewed Apr 27, 2021

View reviewed changes

package.json Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

babel.config.js Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

packages/babel-plugin/tsconfig.json Outdated Show resolved Hide resolved

Andarist reviewed May 3, 2021

View reviewed changes

package.json Outdated Show resolved Hide resolved

Andarist reviewed May 3, 2021

View reviewed changes

package.json Show resolved Hide resolved

michaeljaltamirano reviewed May 8, 2021

View reviewed changes

JoshuaKGoldberg reviewed May 10, 2021

View reviewed changes

tsconfig.json Show resolved Hide resolved

JoshuaKGoldberg reviewed May 11, 2021

View reviewed changes

with-heart changed the base branch from main to ts-migration May 11, 2021 16:40

JoshuaKGoldberg mentioned this pull request May 21, 2021

Removed Flow #2385

Merged

4 tasks

JoshuaKGoldberg reviewed May 21, 2021

View reviewed changes

tsconfig.json Show resolved Hide resolved

JoshuaKGoldberg reviewed May 21, 2021

View reviewed changes

JoshuaKGoldberg reviewed May 22, 2021

View reviewed changes

package.json Show resolved Hide resolved

JoshuaKGoldberg mentioned this pull request May 23, 2021

chore: bump Prettier and Prettier accessories to 2.x #2387

Merged

4 tasks

with-heart added 8 commits June 7, 2021 18:52

Add typescript-eslint and base tsconfig.json

88817f1

Create/move tsconfig.json files and extend from root

f5170eb

Add "site" and "test" to root tsconfig include

3d13655

Add @babel/preset-typescript

26621a9

Add tsconfig.json for site

b151d5a

Add "playgrounds" to root tsconfig include

3cf6566

Add typescript-eslint as eslint plugin

4557859

Remove standard

ad73e27

with-heart added 7 commits June 7, 2021 19:00

Add eslint files override for ts,tsx

d854e5a

Add eslint import and react plugins

672ca33

Remove eslint-plugin-import and related rules

c97bd9f

Add extend for @typescript-extend/eslint-recommended

5bf48d3

Restore **/types/tsconfig.json files

8a14f2f

Remove typescript-eslint resolutions

bea1079

Move parserOptions to ts overrides

feafd8e

with-heart force-pushed the add-ts-tooling branch from fd4e065 to feafd8e Compare June 7, 2021 23:07

with-heart added 3 commits June 7, 2021 19:13

Enable skipDefaultLibCheck

7ebda67

Exclude types tests from root tsconfig

c32e45c

Add tsconfig content for jsx-pragmatic

3f886f4

Andarist reviewed Jun 16, 2021

View reviewed changes

packages/babel-plugin-jsx-pragmatic/tsconfig.json Outdated Show resolved Hide resolved

with-heart added 2 commits June 25, 2021 09:59

Update eslint prettier parser and add auto-fixes

945eaad

Remove per-package tsconfig.json files

8210bea

Andarist approved these changes Jun 25, 2021

View reviewed changes

Andarist merged commit 4912b82 into emotion-js:ts-migration Jun 25, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add TypeScript tooling and configs #2360

Add TypeScript tooling and configs #2360

with-heart commented Apr 27, 2021

changeset-bot bot commented Apr 27, 2021 •

edited

Loading

codesandbox-ci bot commented Apr 27, 2021 •

edited

Loading

rjdestigter commented Apr 27, 2021

with-heart commented Apr 28, 2021

with-heart commented May 3, 2021

with-heart commented May 3, 2021

with-heart commented May 4, 2021

michaeljaltamirano May 8, 2021

JoshuaKGoldberg May 11, 2021

JoshuaKGoldberg May 21, 2021 •

edited

Loading

JoshuaKGoldberg May 21, 2021

Andarist May 22, 2021

JoshuaKGoldberg commented May 26, 2021

with-heart commented Jun 7, 2021

JoshuaKGoldberg commented Jun 15, 2021

Andarist commented Jun 25, 2021

with-heart commented Jun 25, 2021 •

edited

Loading

Andarist commented Jun 25, 2021

	"exclude": ["node_modules"]
	"exclude": ["node_modules", "packages//types/test"]

Add TypeScript tooling and configs #2360

Add TypeScript tooling and configs #2360

Conversation

with-heart commented Apr 27, 2021

changeset-bot bot commented Apr 27, 2021 • edited Loading

⚠️ No Changeset found

codesandbox-ci bot commented Apr 27, 2021 • edited Loading

rjdestigter commented Apr 27, 2021

with-heart commented Apr 28, 2021

with-heart commented May 3, 2021

with-heart commented May 3, 2021

with-heart commented May 4, 2021

michaeljaltamirano May 8, 2021

Choose a reason for hiding this comment

JoshuaKGoldberg May 11, 2021

Choose a reason for hiding this comment

JoshuaKGoldberg May 21, 2021 • edited Loading

Choose a reason for hiding this comment

JoshuaKGoldberg May 21, 2021

Choose a reason for hiding this comment

Andarist May 22, 2021

Choose a reason for hiding this comment

JoshuaKGoldberg commented May 26, 2021

with-heart commented Jun 7, 2021

JoshuaKGoldberg commented Jun 15, 2021

Andarist commented Jun 25, 2021

with-heart commented Jun 25, 2021 • edited Loading

Andarist commented Jun 25, 2021

changeset-bot bot commented Apr 27, 2021 •

edited

Loading

codesandbox-ci bot commented Apr 27, 2021 •

edited

Loading

JoshuaKGoldberg May 21, 2021 •

edited

Loading

with-heart commented Jun 25, 2021 •

edited

Loading