cavy icon indicating copy to clipboard operation
cavy copied to clipboard

JSX integration

Open rams23 opened this issue 4 years ago • 1 comments

As for #169 here is my implementation of React.createElement wrapper that integrates cavy at jsx level.

It adds a cavyCreateElemement function that is a replacement for React.createElement, auto wraps function component and add component refs into testHookStore.

The testHookStore must be set at startup in the index.test.js together with a cavyIdPropName that let you configure how cavy takes identifier from props.

It uses @wordpress/babel-plugin-import-jsx-pragma and @babel/plugin-transform-react-jsx to globally replace JSX transpilaton.

I'm experiencing some problem with the metro bundler so I have created a repo to show it react-native-custom-jsx. If you look at build/index.metro.js you can see that there are some

import { cavyCreateElement } from "cavy"

that should not be there, while somewhere else the code is transpiled correctly to

var _cavy = _$$_REQUIRE(_dependencyMap[1], "cavy");
 _cavy.cavyCreateElement(...)

The import cause rn to crash at startup.

I'm investigating, I don't know if someone in the cavy team with a better knowledge of babel/metro can help me.

Thank you for your great job, I'm waiting for your comments and ready to answer your questions.

I'll eventually update docs and types if the feature will be merged.

rams23 avatar Mar 23 '20 12:03 rams23

Hi @rams23! Just a quick update for you. We're keeping this around because we really like the idea, and someone might want to use it before it gets merged. But right now, we're not sure where this fits on the Cavy roadmap. We're currently working through other bugs and issues, and if we get time we'll come back to this.

jalada avatar Aug 24 '20 09:08 jalada