React support (i would do it)

[drcmda]

If you like i could support it: https://github.com/drcmda/react-zdog

either by making a reconciler (with native elements for rect/ellipse/etc) or wraps - not sure yet. But zdog seems a little rough atm and i am encountering lots of bugs. Would it be ok to discuss this here?

This is how it looks atm:

Demo: https://codesandbox.io/s/nervous-feather-vk9uh

Of course that would allow you to create reactive components, and open it up to the react eco system. You would be able to transition these objects, use routes, animate them (react-spring, etc).

[drcmda]

The troubles i run into:

• npm export is broken, doesn't expose any primitives (i'm using github atm)
• i don't understand the connection between update, updateGraph, FlatGraph and so on. Especially flatgraph seems to be super important

And some concerns regarding the overall direction

• I would recommend to not overstuff this lib with responsibilities, now that it's still early. I see it already ships animations and gestures, etc. Are you really sure about this? These baked in solutions will never be as good as 3rd party offerings. It will bloat the lib and take away from simplicity. In react for instance all of this is modular and there are very powerful solutions. Even in vanilla js there are things like gsap and so on. Controls, gestures, animations, etc - i think it is a major mistake the lib is making early on. It is just going to kill your potential eco system.

• As for gestures, i would prefer basic low-level per-element pointers (onClick, onWheel, onPointerDown, onPointerUp, onPointerLeave, onPointerMove, onGotPointerCapture, onLostPointerCapture). Then we could make zdog views interactive, and writing our own custom gesture handlers is really simple. The onDrag handler especially is a really odd choice.

[lostfictions]

Seconding this! I would love React support specifically, but more generally I think it would be great if zdog were a little friendlier in terms of interoperability and placing nice with other code and libraries.

[boardfish]

Yes please! I'm trying to do this with refs at the minute as recommended in another issue, but I'd far prefer a React interface to the library.

[drcmda]

I've gotten pretty far, mount/unmount is fixed, so everything is reactive, all primitives are supported. I've updated the demo above: https://codesandbox.io/s/nervous-feather-vk9uh

Since the esm npm exports are still broken i added a rule to rollup to transpile zdog into the distro, so react-npm is available now...

[Neon22]

Ahh - could you support Vue as well ? Please...

[drcmda]

You could copy the code and convert the few parts that don't fit. I use a generic approach, so that i don't have to chase behind implementation specifics.

[boardfish]

@desandro and any other Metafizzy folk, please do take a look at react-zdog - I really appreciate the effort @drcmda has gone to in order to bring it inline with standard Zdog functionality. drcmda.props for a job well done!

[flyskywhy]

Plus, react-native support here 😋

No need modify any code of framework zdog itself.

Only modify one line code of app demo Made with Zdog CodePen Collection, e.g. just modify .zdog-canvas in JS of https://codepen.io/clarke-nicol/pen/OezRdM into this.canvas in zdog() of demo/zdog-and-tests.js.

Here is the result of demo/zdog-and-tests.js, you can directly discover that the render and mousemove is same with the original html version https://codepen.io/clarke-nicol/pen/OezRdM.