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

Preact support #2

Open
jcubic opened this issue Mar 16, 2021 · 5 comments
Open

Preact support #2

jcubic opened this issue Mar 16, 2021 · 5 comments
Assignees
Labels
bug Something isn't working

Comments

@jcubic
Copy link

jcubic commented Mar 16, 2021

I think that your library don't work with Preact JSX only with react because it relay on internals of React.

I've created basic example with Preact (sorry no JSX but it shouldn't matter the code is the same)

https://codepen.io/jcubic/pen/PobgJPM?editors=0010

but got error "rectangle" is not registered in 'withInstructs' at composeFromJsx(jsx, withInstructs) function

I use almost the same code as your basic JSX example but I used Preact instead of React.

@Thor-x86 Thor-x86 self-assigned this Mar 20, 2021
@Thor-x86 Thor-x86 added the bug Something isn't working label Mar 20, 2021
@Thor-x86
Copy link
Owner

Thanks for providing me the example. I just realized that JSX implementation on React and Preact are quite different. Let me add JSX implementation support for Preact.

@jcubic
Copy link
Author

jcubic commented Mar 20, 2021

The way it's handled by Babel that transform JSX is that they use Pragma that allow to use different function in Preact the name is h and in React it's React.creteElement. I'm not sure if there are other differences please let me know if there are other differences. In my projects I Use SXML I use lisp on top of JavaScript, I would to know if there are other differences that I need to handle properly.

@yummyweb
Copy link

Hi, this issue can be solved if you use Rectangle in your code instead of rectangle over here:

const composed = compodraw.composeFromJsx(
    h("Rectangle", {x: 210, y: 170, width: 200, height: 150}),
    instructs
);

You need to do this because window['compodraw-instructs'] contains an object of instructs, and the instruct it contains is Rectangle instead of rectangle, thus while evaluating Compodraw looks for the instruct, rectangle and it does not find this instruct, raising the error.

@jcubic
Copy link
Author

jcubic commented Feb 27, 2022

I was able to update my demo, with Preact. I'm wondering if it will work if you use JSX+Preact because the example use rectangle not Rectangle.

@yummyweb
Copy link

You could try using JSX and Preact, but I think you would have to use Rectangle instead of rectangle. As far as I know, it should work with Preact and JSX. Anyway, you should be good to close the issue, if you don't have any other issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

3 participants