Issue with using className instead of just class about babel-plugin-jsx

[skyrpex]

Just in case you didn't know, you can rename them while destructuring:

const { for: htmlFor, class: classNames } = {
    for() {},
    class() {},
};

[oliverfindl]

Hello,

sure I am familiar with object deconstructing syntax. But my main issue is, that I have library, which is already outputting JSX template (using className instead of class) and wanted to write Vue wrapper for it. If I rename className to just class there, it would break in React instead. My current JSX template implementation in that library looks like this (simplified):

class Library {

	constructor(options) {
		// ...
	}
	
	// ...

	get attributes() {
		// ...
		return {
			// ...
		};
	}
	
	// ...

	get template() {
		const { attributes } = this;
		return <div ...attributes>...</div>;
	}

}

Note that this is not in Vue (or React) component, but it is only getter from my library, that should be used in Vue/React component as template. Basic usage in Vue/React would be as instance (which is reactive) and each mutation of its state would change my JSX template output that would be directly mapped into component.

Sure I can copy whole template getter from my library to Vue component and use it like this:

// ...
render() {
	const { attributes } = this;
	if(attributes.className) {
		attributes.class = attributes.className;
		delete attributes.className;
	}
	return <div ...attributes>...</div>;
}
// ...

But then I would have to manage separate template just for Vue, which I wanted to avoid in first place. At this point, it would be more straightforward to use standard Vue template syntax instead of JSX.

It would be nice, if this plugin could transform className into class (and htmlFor into for) attribute at compilation time, otherwise I would suggest to rename it to something else (e.g.: .vjsx), because it is not (fully) compatible with JSX syntax, that React defined first.

Thanks.