Zdog support seems to be broken since v9

[AurelienDud]

🐛 Bug Report

I'm trying to use React-Spring with Zdog.
But the syntax <a.Shape /> (or any other Zdog component) throw these errors:

<Shape /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

The tag <Shape> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

To Reproduce

The Zdog's official example use React-Spring 8.0.21.
Increase the React-Spring version beyond v9 will reproduce the issue.
Add the package @react-spring/zdog doesn't solve the problem.

Expected behavior

No syntaxe error

Link to repro (highly encouraged)

A simple reproduction example:
https://codesandbox.io/s/react-spring-zdog-issue-9g0e2

The official Zdog's codesandbox example:
https://codesandbox.io/s/nervous-feather-vk9uh

Environment

I tried various combinations of packages versions but that always fail from React-Spring v9.
The problem seems not to be related to the Zdog or React-Zdog version in use.

[joshuaellis]

I've never really use Zdog, I imagine the target came in as a contribution so equally we would need someone else who knows zDog to resolve this issue. If you're interested in looking at it, then i'm happy to support you where ever I can! 👍🏼

[AurelienDud]

Ok, I'll take a look for myself and try to contact the Zdog team as well.
Thank you

[joshuaellis]

If you need anything @AurelienDud, just ask! 😄

[AurelienDud]

If you need anything @AurelienDud, just ask! 😄

@joshuaellis I just saw in the code that you are the official maintainer 😄
I still don't know how the React-Spring project is structured so any help and hints could help me

[AurelienDud]

@joshuaellis i got the problem!

In @react-spring/zdog a list of Zdog primitives is defined as an array of strings according Zdog component names..

const primitives = [ 'Anchor', 'Rect', ... ]

But a string is not suitable to let @react-spring/animated create a custom React element.
This list of primitives have to be defined as an object of Zdog React components.

const primitives = { Anchor: reactZdog.Anchor, Rect: reactZdog.Rect, ... }

I attach a quick patch to this message:
@react-spring+zdog+9.2.4.patch.md

[joshuaellis]

i've released a beta v9.2.5-beta.0, let me know if this resolves your issue 💪🏼