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

feat: convert project to typescript, add types #64

Merged
merged 18 commits into from
Aug 1, 2024

Conversation

wonderfulfrog
Copy link
Contributor

Description

This PR updates the project to use TypeScript, and include type definitions when importing the module in other projects.

The node version was also bumped to 20.16.0, which is the current LTS version.

I did my best to break up each change into smaller commits to follow the flow of my changes. I borrowed a few files from wethegit/react-modal to make things easier (e.g. utils/classnames.ts).

Notes

There is a warning about different versions of TypeScript when building the project:

$ npm run build
// Output truncated
Analysis will use the bundled TypeScript version 5.4.2
*** The target project appears to use TypeScript 5.5.4 which is newer than the bundled compiler engine; consider upgrading API Extractor.

There aren't any build errors as a result of this warning. There is a PR open that updates TypeScript to 5.5 for API Extractor. I believe once that PR is merged the warning will disappear.

Copy link
Contributor

@marlonmarcello marlonmarcello left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @wonderfulfrog !

I'd advice to test this locally in an external project by using npm link.

Just to make sure the build and the types output are as expected.

src/lib/marquee.tsx Outdated Show resolved Hide resolved
src/lib/marquee.tsx Outdated Show resolved Hide resolved
vite.config.ts Outdated Show resolved Hide resolved
Copy link
Member

@andrewrubin andrewrubin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great @wonderfulfrog, thanks for taking the time to do this 👏

@wonderfulfrog
Copy link
Contributor Author

wonderfulfrog commented Jul 31, 2024

Using npm link, I can confirm the latest revision of the build works with a fresh Next.js project. I did have to add "use client" at the top of my file, though (which is expected since react-marquee uses useState).

A fresh corgi project is having issues. It might be a corgi-specific problem, I'm not sure. Here is an error log I'm getting:
image

TypeError: Cannot read properties of null (reading 'useState')

image

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

@marlonmarcello
Copy link
Contributor

The corgi issue is really weird and I have a feeling it might have to do with npm link

marlonmarcello
marlonmarcello previously approved these changes Jul 31, 2024
@wonderfulfrog wonderfulfrog force-pushed the feature/add-ts-types branch from 4f14618 to e38bc91 Compare July 31, 2024 23:55
@marlonmarcello marlonmarcello merged commit 74a51f3 into release/v2.1.4 Aug 1, 2024
2 checks passed
@marlonmarcello marlonmarcello deleted the feature/add-ts-types branch August 1, 2024 17:03
@wonderfulfrog wonderfulfrog mentioned this pull request Aug 1, 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.

3 participants