jsx-vue2 Feature/custom component prefix on

Feature/custom component prefix on

Open CntChen opened this issue 5 years ago • 4 comments

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.