Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/custom component prefix on #102

Open
wants to merge 3 commits into
base: dev
from

Conversation

@CntChen
Copy link

CntChen commented Jan 22, 2020

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

@maratfakhreev

This comment has been minimized.

Copy link

maratfakhreev commented Feb 8, 2020

Looks cool, also waiting for review of this


// in jsx, event binding use Camel case, such as `onClick`, `onMouseDown`;
// in HTML Specification, event binding is all lower case, such as `onclick`, `onmousedown`
// so for `on` and `nativeOn` attribute in jsx, transform `name` to all lower case

This comment has been minimized.

Copy link
@sodatea

sodatea Feb 13, 2020

Member

But camel case is allowed in Vue.js, though not preferred https://vuejs.org/v2/guide/components-custom-events.html#Event-Names

@sodatea

This comment has been minimized.

Copy link
Member

sodatea commented Feb 13, 2020

Thanks for the PR! Could you please also add some tests to this fix?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

3 participants
You can’t perform that action at this time.