jsx-vue2 icon indicating copy to clipboard operation
jsx-vue2 copied to clipboard

Feature/custom component prefix on

Open CntChen opened this issue 4 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.

EOF

CntChen avatar Jan 22 '20 05:01 CntChen