jsx-vue2
jsx-vue2 copied to clipboard
Feature/custom component prefix on
Why
For custom components(which tag name is not html tag), event binding need to use nativeOn
but not on
.
So on
prefix in custom component should transform to attrs
.
Example
When render custom component use jsx, such as storybook vue example:
export const withText = () => ({
render: (h) => <my-component
onChange={() => {}}
nativeOnTest={() => {}}
myProp="test">with text
</my-component>
});
Before fix:
function withText() {
return {
render: function render(h) {
return h("my-component", {
"on": {
"change": function change() {}
},
"nativeOn": {
"test": function test() {}
},
"attrs": {
"myProp": "test"
}
}, ["with text"]);
}
};
}
onChange
transform to on
event of my-component
.
After fix:
function withText() {
return {
render: function render(h) {
return h("my-component", {
"attrs": {
"onChange": function onChange() {},
"myProp": "test"
},
"nativeOn": {
"test": function test() {}
}
}, ["with text"]);
}
};
}
onChange
transform to onChange
attribute of my-component
, and render as Props inside my-component
as expected.