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

Any interest in being able to replace react/createElement with a custom function? #592

Open
cj-price opened this issue Jun 13, 2023 · 7 comments

Comments

@cj-price
Copy link

cj-price commented Jun 13, 2023

Any interest in being able to replace react/createElement with a custom create element function?

My use case is that I'd like to use css-in-js with emotion.

I have it working here: 42978d4

06-13-23T10:15:58

@Deraen
Copy link
Member

Deraen commented Jun 14, 2023

This is probably already possible with the Compiler protocol. make-element method is quite close to the createElement:
https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#LL320C11-L320C11
https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/template.cljs#L128-L141
https://github.com/reagent-project/reagent/blob/master/doc/ReagentCompiler.md

You might have to refer to some impl functions to reuse the code for other methods, so the API isn't perfect, but if you get it working I can consider exposing the necessary functions.

@Deraen
Copy link
Member

Deraen commented Jun 14, 2023

Checking your fork, there are few other createElement calls besides make-element but I'm quite sure that those don't matter, because the elements created in those cases refer to functions, not HTML elements, and they wouldn't use css.

@cj-price
Copy link
Author

Awesome, thanks for the feedback. I'll take a look at implementing it with the compiler

@cj-price
Copy link
Author

Have it working with the compiler here: cj-price@e09a8e6

I haven't tested the other places where react/createElement is used but for general use the compiler protocol seems more than enough to implement something like this.

Would you like me to clean up the example and submit a PR?

@Deraen
Copy link
Member

Deraen commented Jun 22, 2023

I guess Emotion is interesting enough to add a example to the repository.

The root package.json probably doesn't need to be changed?

The example should use shadow-cljs so it can use npm packages. There is an example in the material-ui folder.

The simple-example component seems unnecessary, as you can set the compiler directly on the render call. But perhaps it is for use from the intro ns now?

@Deraen
Copy link
Member

Deraen commented Jun 22, 2023

And a link could be added the compiler protocol docs to the example folder.

@cj-price
Copy link
Author

I submitted #593

I am using shadow-cljs as requested and removed the code from the intro. Also added a link on the docs. Willing to make any requested changes :)

The simple-example component seems unnecessary, as you can set the compiler directly on the render call. But perhaps it is for use from the intro ns now?

Yeah I did my testing on the intro which is why I rendered inside the simple example component.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants