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

Unable to use JSX directly in setup() #64

Closed
u3u opened this issue Aug 16, 2019 · 8 comments
Closed

Unable to use JSX directly in setup() #64

u3u opened this issue Aug 16, 2019 · 8 comments

Comments

@u3u
Copy link

u3u commented Aug 16, 2019

The createElement function has been added to the v2.2.0 release, which is great! 🎉

But the babel-sugar-inject-h plugin attempts to automatically inject h from this.$createElement, but there is no this in setup(), so JSX cannot be used directly.

@posva
Copy link
Member

posva commented Aug 16, 2019

Could you open an issue there instead please? You probably don't need to use that plugin

@posva posva closed this as completed Aug 16, 2019
@u3u
Copy link
Author

u3u commented Aug 16, 2019

In order to be compatible with the old code, I may have to use this plugin. 😅

https://github.com/vuejs/vue-function-api/blob/a7413ec53021887c90f777c29a88e5c04cff8329/src/install.ts#L45-L52

Can we import createElement here and build a { $createElement: createElement } object to bind it to this? This may cause this in setup() to be not the expected undefined, but it will save a lot of trouble.

Now only need:

import { createComponent } from 'vue-function-api';

// No longer need to manually import `createElement as h`
// import { createComponent, createElement as h } from 'vue-function-api';

export default createComponent({
  setup(initialProps) {
    // babel plugin will auto-inject h
    // const h = this.$createElement;
    return (props) => <div>{props.msg}</div>;
  },
});

Is there any good solution?
Please consider reopening this issue. 🙏

@posva
Copy link
Member

posva commented Aug 16, 2019

I would say that the fix is skipping the plugin at https://github.com/vuejs/jsx/blob/dev/packages/babel-sugar-inject-h/src/index.js#L60-L62 if we are in a setup function but I'm not sure. You could give it a try and directly create a PR to the plugin 🙂

We cannot add that hack as the lib must stay in sync with the RFC.

@PatrykWalach
Copy link

PatrykWalach commented Aug 16, 2019

h won't be inserted if you use an arrow function, so you can do

import {
  createComponent,
  createElement
} from 'vue-function-api'

export default createComponent({
  setup: props => {
    const h = createElement

    return () => {
      return (
        <div>card</div>
      )
    }
  }

@u3u
Copy link
Author

u3u commented Aug 16, 2019

Hum... I also considered this, but this plugin should eventually solve this problem.

If the plugin imports createElement from vue-function-api to auto-inject h is it appropriate? Will the createElement function be exposed directly in future Vue?

@u3u
Copy link
Author

u3u commented Aug 16, 2019

@PatrykWalach As long as JSX is used in the function, h will be injected automatically. When I manually define const h = createElement there will be duplicate h identifier exceptions

@PatrykWalach
Copy link

PatrykWalach commented Aug 16, 2019

You won't get any errors using the method above. link
Exposing createElement is part of rfc#28 which changes the arguments of render function.

@u3u
Copy link
Author

u3u commented Aug 16, 2019

@PatrykWalach Thank you! I didn't see it clearly before. 😂

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

No branches or pull requests

3 participants