Issues with props rest spread operator about babel-plugin-transform-vue-jsx HOT 16 CLOSED

Neither {...props} nor {...{props}} worked for me

from babel-plugin-transform-vue-jsx.

JSX spread puts all properties in the spread object as top-level properties, so they are not nested under props. You will need to do <Grandchild {...{ props }} /> to ensure it's nested.

We may do some more exploration on how spread should work for Vue's vnode format though, since this seems to going be a common gotcha.

from babel-plugin-transform-vue-jsx.

Does it works for anyone?

It seems to work only when passed as {...{props}}. Again.

from babel-plugin-transform-vue-jsx.

@blocka indeed, fixed in 1.1.1

from babel-plugin-transform-vue-jsx.

I also just verified that the spread operator works when manually building the hypertext function:

h(Grandchild, {
  props: {
    ...props
  }
})

I did a little digging, and it looks like when using the spread operator, the attribs that get passed into buildOpeningElementAttributes is undefined.

from babel-plugin-transform-vue-jsx.

Actually, testing even further up the chain, it looks like I can try to console.log(path) in the JSXElement property of the export return, and for the component with the spread operator the path is undefined. For reference, I'm just doing <Grandchild {...props} />

from babel-plugin-transform-vue-jsx.

I see, isn't spreading at the top level still valid with Vue though? How does the jsx parser handle me putting the props at the top level? What I mean is, this works:

<Child test={'hello'} otherTest={'world'} />

This doesn't

<Child {...props} />

But wouldn't they produce the same output? Or does the parser somehow know to put test and otherTest in props?

from babel-plugin-transform-vue-jsx.

The nesting is determined at syntax level but the spread is actually done
via a runtime extend helper, so they are different.
On Sun, Jun 19, 2016 at 9:47 AM Brandon Carroll [email protected]
wrote:

I see, isn't spreading at the top level still valid with Vue though? How
does the jsx parser handle me putting the props at the top level? What I
mean is, this works:

<Child test={'hello'} otherTest={'world'} />

This doesn't

<Child {...props} />

But wouldn't they produce the same output? Or does the parser somehow know
to put test and otherTest in props?

—
You are receiving this because you commented.

Reply to this email directly, view it on GitHub
#1 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAefXrnPFp1Yf6hcdn8DlgIJhP5X1ojBks5qNUiIgaJpZM4I5EIJ
.

from babel-plugin-transform-vue-jsx.

I'm trying to do something like this

<Link to={somewhere} style={{color: 'red'}}>A link</link>

Where I want Link, a functional component, to render an a tag with the given attributes passed in.

I noticed that the style object is being passed in as data so I tried:

return <a href={to} {...data}>{children()}</a>

However, that throws out the href.

trying <a href={to} {...{ data }}>{children()}</a> the style attribute doesn't get through and

<a href={to} {...{ ...data }}>{children()}</a> gives me a syntax error.

from babel-plugin-transform-vue-jsx.

1.1.0 now has improved JSX spread support - just spread it with {...data} and it will merge them properly.

from babel-plugin-transform-vue-jsx.

Still having some issues

<Component {...props}></Component>

renders as

return h(
      'div',
      null,
      [h(
        Component,
        props,
        function () {
          return [];
        }
      )]

and <Component {...{ props }}></Component>

renders as

return h(
      'div',
      null,
      [h(
        Component,
        {
          attrs: { props: props }
        }

from babel-plugin-transform-vue-jsx.

You need to spread to top-level data object, not props.

from babel-plugin-transform-vue-jsx.

So how would I do this with props, exactly?

from babel-plugin-transform-vue-jsx.

...{{ props }} my bad, {...{props}} should work, if not I'll try to fix it.

from babel-plugin-transform-vue-jsx.

<Component ...{{ props }}></Component> gives me a syntax error.

from babel-plugin-transform-vue-jsx.

For the record, this worked (basically what I see you've done in the test), although I'm not 100% happy with it (can't complain too much).

const data = {props};

return <Component {...data}></Component>

This did not though (props did not get passed through):

return <Component {...{props}}></Component>

from babel-plugin-transform-vue-jsx.