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
Choose a base branch
from

Conversation

CntChen
Copy link

@CntChen 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
Copy link

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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@haoqunjiang
Copy link
Member

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

@EscapeB
Copy link

EscapeB commented Sep 15, 2020

Any progress in this PR?

@nooooooom
Copy link
Contributor

Is there any progress in this PR merger plan?

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

Successfully merging this pull request may close these issues.

5 participants