The react-devirt from redneckz

react-devirt's People

Contributors

Stargazers

Watchers

react-devirt's Issues

Compatibility with react-bem-helper

There are some issues with devirt if we using react-bem-helper.

Example:

import { BEM } from '@redneckz/react-bem-helper';
import { devirt } from '@redneckz/react-devirt';

import styles from './foo.module.css';

devirt();

const foo = BEM(styles);

const Foo = foo(({ className }) => {
    return <div className={className} />;
});

This code will produce:

[Feature Request] Add ability to modify devirt-type by providing props mapper

Let's imagine you want use data-devirt-type as selector for auto tests and you have case:

devirt();
const Button = ({children}) => <button>{children}</button>

const Form = () => (
    <form>
        <Button>Save</Button>
        <Button>Cancel</Button>
    </form>
);

This code will produce:

<form data-devirt-type="Form">
    <button data-devirt-type="Button">Save</button>
    <button data-devirt-type="Button">Cancel</button>
</form>

Will be cool to have ability add suffix to devirt type

devirt(Target, ({ testContext }) => ({ testContext }));
const Button = ({children}) => <button>{children}</button>

const Form = () => (
    <form>
        <Button testContext="save">Save</Button>
        <Button testContext="cancel">Cancel</Button>
    </form>
);

<form data-devirt-type="Form">
    <button data-devirt-type="Button::save">Save</button>
    <button data-devirt-type="Button::cancel">Cancel</button>
</form>

This approach could be automated by provided name prop from field hoc and so on.

Recommend Projects