BBKolton
refactor: Updated core functionality with hooks
Hi there :wave: Played a bit with your package and faced with the same problem as described here https://github.com/BBKolton/reactify-wc/issues/15. Decided to help and here we are :tada:
What I noted is the current structure looks not really well :confused:. One react project nested to another it's not a good idea, so probably good to think about a different approach for testing. And one more thing... I found installed testing library, but it's not used as well, and it also affects to described issue. More details here: https://github.com/testing-library/react-testing-library/issues/570
This PR broke the current test environment :upside_down_face: because of the new version of react and hooks. There is some workaround how it's possible to test locally. Let me know if it's interesting for you, but I'd prefer to focus on replacing this structure and testing env, with something more or less modern, or at least with something that will work :smile:
Changes:
- migrated to react hooks
- updated types to allow pass custom interfaces
- updated README with typescript example
- refactored README headings levels
Related
- https://github.com/BBKolton/reactify-wc/issues/15
Funny thing, but I refactored to this, and it works well:
import React, { forwardRef } from 'react';
const reactifyWebComponent = <WebComponentProps,>(WebComponentName: string) => {
type ReactWebComponentProps = React.HTMLProps<HTMLElement> &
WebComponentProps;
return forwardRef<HTMLElement, ReactWebComponentProps>((props, parentRef) => (
<WebComponentName ref={parentRef} {...(props as ReactWebComponentProps)} />
));
};
export default reactifyWebComponent;
@BBKolton Could you take a look and test it before I push it here? Because it seems weird for me, and I fell like I missed something.
Sorry for the delay. I will take a look into this a bit more. Thank you for helping :)
if some maintainer would review it, I'm ready to make this up to date