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.

Sign up for GitHub

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

Jump to bottom

Type definitions for JSX attributes and events #1007

Closed
littlespex opened this issue Oct 12, 2024 · 2 comments
Closed

Type definitions for JSX attributes and events #1007

littlespex opened this issue Oct 12, 2024 · 2 comments
Assignees
@ronalduQualabs

Comments

@littlespex
Copy link
Collaborator

The react build script generates types for the media-chrome web components based on GenericForwardRef. While this provides basic typing it doesn't provide definitions for the component's attributes, or React style event handlers (React's onClick vs the DOM onclick). This prevents strict type checking and code completion/hints:

Image

vs

Image

If possible, it would improve DX if each component's attributes were added to the JSX namespace.
@luwes
Copy link
Collaborator

luwes commented Jan 29, 2025

the first step for this feature is completed by creating this utility library https://github.com/muxinc/ce-la-react

this library supports TS and need to be plugged in our React wrapper build script here:
https://github.com/muxinc/media-chrome/blob/2d392f24ea18bf2e9a6d873b2b2a933599c76692/scripts/react/build.js

@ronalduQualabs ronalduQualabs self-assigned this Jan 29, 2025
@ronalduQualabs ronalduQualabs mentioned this issue Feb 5, 2025
Merged
luwes added a commit that referenced this issue Feb 25, 2025
@ronalduQualabs @luwes
Refactor to use ce-la-react to add type definitions for JSX attributes (
054fd64 
#1068)

This PR fix this
[issue](#1007) by:

- Add [ce-la-react](https://github.com/muxinc/ce-la-react)
- Modify the build.js in react to use ce-la-react
- Add attributes as properties to create type definitions
- Remove the creation of the d.ts files in build since the new
implementation generate them.
- move some components imports to be found in ce-la-react

Note: Styles inline need to be set as any to don't have a warning from
typescript error.

![Screenshot 2025-02-05 at 4 06
15 PM](https://github.com/user-attachments/assets/c5f3c1c2-f628-4209-a38e-55b567d3d244)

---------

Co-authored-by: Wesley Luyten <me@wesleyluyten.com>
luwes added a commit that referenced this issue Feb 25, 2025
@ronalduQualabs @luwes
feat: Refactor to use ce-la-react to add type definitions for JSX att…
d20dd95 
…ributes (#1068)

This PR fix this
[issue](#1007) by:

- Add [ce-la-react](https://github.com/muxinc/ce-la-react)
- Modify the build.js in react to use ce-la-react
- Add attributes as properties to create type definitions
- Remove the creation of the d.ts files in build since the new
implementation generate them.
- move some components imports to be found in ce-la-react

Note: Styles inline need to be set as any to don't have a warning from
typescript error.

![Screenshot 2025-02-05 at 4 06
15 PM](https://github.com/user-attachments/assets/c5f3c1c2-f628-4209-a38e-55b567d3d244)

---------

Co-authored-by: Wesley Luyten <me@wesleyluyten.com>
@ronalduQualabs
Copy link
Contributor

Hi @littlespex Thanks for your feedback and for helping us improve the developer experience in Media Chrome! This issue has been closed today, and the latest version now includes attributes and events prediction and types functionality as requested.

Let me know if you want any further tweaks! 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ronalduQualabs ronalduQualabs

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@luwes @littlespex @ronalduQualabs