-
Notifications
You must be signed in to change notification settings - Fork 36
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
Initial pass of adding Typescript #38
base: master
Are you sure you want to change the base?
Conversation
I'm sooo excited about this!! I'll take a look sometime this week, but thank you so much!! |
build('demo/*/*.jsx') | ||
build('test/**/*.jsx') | ||
build('demo/*/*.{jsx,tsx}') | ||
build('test/*/*.{jsx,tsx}') |
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.
build('test/*/*.{jsx,tsx}') | |
build('test/**/*.{jsx,tsx}') |
We should probably add a Something else I'd like to do is to create a shared types file where we can define common types for the events: Making those reusable will clean up a lot of typings. Also, beware that while For the C++ code I think I have an idea on how to generate types from it using the macros. At this point I almost feel like we're reinventing JSI and React Native 🤣 but that's sort of the goal I guess. But it could also be as simple as hardcoding them in So far I like this. I've been testing locally and it works. My only nits are really the |
Have addressed your comments by adding the For something like |
Adding Typescript support to the React project as per (my own 😆 ) issue #36 and also saw the comments here #14 (comment).
I wanted to add Typescript to the importable/public API so when consuming lvgljs its easy to see which components and APIs are available.
Example:
Screen.Recording.2024-08-20.at.7.02.49.PM.mov
Adding types
In this PR I've done an initial first pass at adding types across both the components as well as each of the styles. I've done the best I could to generate both the Prop Types as well as the Style Types based on available methods and also reading through the documentation. Something that might be good is to go through and compare to the Javascript generated by the
.cpp
files, but I'm not that familiar with C++.I fully expect this to be a work in progress. I was trying to do the most useful types first but there are still lots of
.js
files across the codebase. Fortunately Typescript implementation can be somewhat progressive, in that.js
and.ts
files are interchangeable and I haven't turned on any build errors or linting rules for Typescript yet. We can view it as a useful enhancement/nice-to-have right now while we build out the full types.As part of this, I've done my best to not modify any actual implementation - I've only added additional type annotations. There aren't any actual logic changes in the source code. There are quite a few errors/bugs that Typescript has identified so will do my best to address them in future PRs.
With that said, this already should be useful for consuming projects. E.g. looking at
demo/hello_world/index.tsx
we can see it both defines prop types for each component, as well as valid styles.Build/import changes
I did make some slight changes to imports/builds to make Typescript work, and this moves to a more standard pattern of importing projects.
lvgljs-ui
alias inbuild.js
/src/render/react/package.json
project aslvgljs-ui
in the root/package.json
react-reconciler
andreact
typesFuture PRs/TODOs
config.ts
file aren't required and are duplicated)Thanks for reviewing, I've tried to keep this to a small scope (types for components + styles only) but I realise its still a big PR 😅 . This PR definitely needs to be squashed before merging. Hopefully this makes using lvgljs much easier for consumers!