Thor-x86 / compodraw-js

Compose with JSX or XML then draw to Canvas API
MIT License
7 stars 3 forks source link

Preact support #2

Open jcubic opened 3 years ago

jcubic commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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.