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

Convert @emotion/react's source code to TypeScript #3281

Merged
merged 20 commits into from
Dec 5, 2024
Merged

Conversation

Andarist
Copy link
Member

@Andarist Andarist commented Dec 3, 2024

No description provided.

Copy link

changeset-bot bot commented Dec 3, 2024

🦋 Changeset detected

Latest commit: 3f6dbab

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@emotion/react Minor

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

Copy link

codesandbox-ci bot commented Dec 3, 2024

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.

Copy link

codecov bot commented Dec 3, 2024

Codecov Report

Attention: Patch coverage is 97.05882% with 4 lines in your changes missing coverage. Please review.

Project coverage is 94.81%. Comparing base (ad630e3) to head (dc6add6).
Report is 10 commits behind head on main.

Files with missing lines Patch % Lines
packages/react/src/jsx-runtime.ts 66.66% 3 Missing ⚠️
packages/react/src/context.tsx 90.00% 1 Missing ⚠️
Additional details and impacted files
Files with missing lines Coverage Δ
packages/primitives-core/src/styled.ts 100.00% <100.00%> (ø)
packages/react/src/_isolated-hnrs.ts 100.00% <100.00%> (ø)
packages/react/src/class-names.tsx 100.00% <100.00%> (ø)
packages/react/src/css.ts 100.00% <100.00%> (ø)
packages/react/src/emotion-element.tsx 97.26% <100.00%> (ø)
packages/react/src/get-label-from-stack-trace.ts 100.00% <100.00%> (ø)
packages/react/src/global.tsx 100.00% <100.00%> (ø)
packages/react/src/index.ts 30.76% <ø> (ø)
packages/react/src/jsx-dev-runtime.ts 100.00% <100.00%> (ø)
packages/react/src/jsx.ts 100.00% <100.00%> (ø)
... and 6 more

... and 2 files with indirect coverage changes

@Andarist Andarist marked this pull request as ready for review December 4, 2024 10:09
@Andarist Andarist requested a review from emmatown December 4, 2024 10:09
@@ -88,5 +88,8 @@ jobs:
- uses: actions/checkout@v3
- uses: ./.github/actions/ci-setup

- name: build
run: yarn build
Copy link
Member

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?

Copy link
Member

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

Copy link
Member Author

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 */
Copy link
Member

@emmatown emmatown Dec 5, 2024

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?

Copy link
Member

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?

Copy link
Member

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)

Copy link
Member Author

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

Copy link
Member Author

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

Copy link
Member

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
Copy link
Member

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
}

Copy link
Member

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)

Copy link
Member Author

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 */
Copy link
Member

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?

@Andarist
Copy link
Member Author

Andarist commented Dec 5, 2024

I'll land this for now since I'd like to rebase my local work on @emotion/styled migration but feel free to respond to any ongoing discussion. I'm not releasing this just yet so we can always patch things up before the release

@Andarist Andarist merged commit fc4d7bd into main Dec 5, 2024
13 checks passed
@Andarist Andarist deleted the convert-react-pkg branch December 5, 2024 10:53
@github-actions github-actions bot mentioned this pull request Dec 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants