-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
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
Convert @emotion/react
's source code to TypeScript
#3281
Conversation
🦋 Changeset detectedLatest commit: 3f6dbab The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
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. |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files
|
149adf8
to
dc6add6
Compare
@@ -88,5 +88,8 @@ jobs: | |||
- uses: actions/checkout@v3 | |||
- uses: ./.github/actions/ci-setup | |||
|
|||
- name: build | |||
run: yarn build |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Would I be correct in assuming this is added because the tsconfigs used for dtslint don't use a module resolution mode that supports the imports/exports fields so the build is necessary so preconstruct outputs stuff that for the default case doesn't require supporting the imports/exports fields?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
seems like the answer is yes from reading the commits
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's not even that - although when you mention this, I think I could now remove resolved-condition.ts
files and the associated configs
the core of the problem fixed by this is that older TS versions might trip on some new syntax. We are OK with using more modern TS in /src
(like even satisfies
) as long as the emitted declarations are free of the modern syntax. dtslint
tests a range of TS versions so the older ones were tripping over new syntax when reading directly from /src
. That said, we could just change the min required TS version (or rather, the min TS version that we test against) but it felt nicer not to do that just for this reason.
testing against compiled types is also safer for us, I've seen some declaration emit regressions in TS - especially recently when a lot of the internals were changed in isolatedDeclarations
-related work
@@ -54,47 +54,53 @@ type ReactJSXIntrinsicElements = true extends IsPreReact19 | |||
: /** @ts-ignore */ | |||
React.JSX.IntrinsicElements | |||
|
|||
// based on the code from @types/react@18.2.8 | |||
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13 | |||
/** @ts-ignore */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's the new @ts-ignore
for? Does the comment in the false case get moved around when generating the .d.ts
file?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like the answer is the comment gets removed but if that's true, shouldn't the comments be updated for the types above as well? Seems like you "fixed" it for the tests by bumping @types/react
but that wouldn't fix it for consumers?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe keeping this in a .d.ts
file might make sense so we don't have to rely on comments being preserved in particular places? (don't have strong feelings about that though, just an idea)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
the one we had was removed, a JSDoc-style comment - in general - should be preserved but perhaps they are only preserved on accessible symbols. In the emitted declaration this gets folded into a single line and the new comment stays in place.
Seems like you "fixed" it for the tests by bumping @types/react but that wouldn't fix it for consumers?
I was checking the emitted declaration files and this shouldn't affect consumers (for the reason outlined above). That said... now I'm surprised why this was erroring with the new @types/react
in the first place. I updated the types before fighting this 🤔
Maybe keeping this in a .d.ts file might make sense so we don't have to rely on comments being preserved in particular places? (don't have strong feelings about that though, just an idea)
I agree it's not ideal but also not a big deal. The general mantra I've heard (from the TS team members too) is that .d.ts
shouldn't quite be used when authoring libs in TS. I don't recall the exact reasons behind this though. Testing things out in TS workbench (see this)... it seems that TS might not even "copy over" dts files into the distDir
. You can see the output in the Debug tab in the "Virtual File System" section
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I mean, we could also just keep this .d.ts
outside of src
... but ugh, I don't feel overly confident that all of the relative paths would be rewritten correctly. Authoring everything in src
feels safer/better
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Continued in #3282
interface Element extends ReactJSXElement {} | ||
interface ElementClass extends ReactJSXElementClass {} | ||
interface ElementAttributesProperty | ||
export type ElementType = ReactJSXElementType |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Am I correct in understanding that these two are equivalent? (since the former compiles into the latter)
export namespace Blah {
export type Something = A
}
export declare namespace Blah {
type Something = A
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
loling at
export namespace Blah {
type A = {}
export type Something = A
}
getting compiled into
export declare namespace Blah {
type A = {};
export type Something = A;
export {};
}
(I know the context around export {};
, just never thought about it for namespaces lol)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ye, those rules are super trippy tbh. I just slapped export
onto those because they suddenly became unavailable when I moved this from an ambient content to .ts
🤷♂️
@@ -54,47 +54,53 @@ type ReactJSXIntrinsicElements = true extends IsPreReact19 | |||
: /** @ts-ignore */ | |||
React.JSX.IntrinsicElements | |||
|
|||
// based on the code from @types/react@18.2.8 | |||
// https://github.com/DefinitelyTyped/DefinitelyTyped/blob/3197efc097d522c4bf02b94e1a0766d007d6cdeb/types/react/index.d.ts#LL3204C13-L3204C13 | |||
/** @ts-ignore */ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Seems like the answer is the comment gets removed but if that's true, shouldn't the comments be updated for the types above as well? Seems like you "fixed" it for the tests by bumping @types/react
but that wouldn't fix it for consumers?
I'll land this for now since I'd like to rebase my local work on |
No description provided.