spread props are not being transformed properly

[allain]

Because the props are not known at compile time, the generated code for the following JSX is incorrect. It does not handle style at all.

import React from 'react'

const Button = ({ children, ...props }) => (
  <button {...props}>{children}</button>
)

export default () => {
  return (
    <Button
      onPress={() => alert('huh?')}
      style={{ fontWeight: 'bold' }}
    >
      Test
    </Button>
  )
}

Generates:

const Button = ({
  children,
  ...props
}) => (() => {
  const _props = props;
  const _onClick = _props.onClick;
  const _child = children;
  return _context => {
    if (_context._ !== _instructions) {
      if (_context.$) _context.$();
      _context.$ = () => {
        _rawact_removeEventListener(_context.$$, _context.a, \\"click\\", _context.b);
        _rawact_unmountInternal(_context.c_);
      };

      _context._ = _instructions;
      _context.a = _rawact_createElement(\\"button\\");

      _rawact_addEventListener(_context.$$, _context.a, \\"click\\", _context.b = _onClick);
      _rawact_renderInternal(_context, _child, \\"c\\", 1);
      _rawact_renderChildren(_context.a, [_context[\\"c\\"]]);
    } else {
      if (_context.b !== _onClick) {
        _rawact_replaceEventListener(_context.$$, _context.a, \\"click\\", _context.b, _context.b = _onClick);
      }
      _rawact_renderInternal(_context, _child, \\"c\\", 0);
    }
    return _context.a;
  };
})();

export default (() => {
  return _rawact_hooks(Button, {
    onPress: () => alert('huh?'),
    style: {
      fontWeight: 'bold'
    },
    children: \\"Test\\"
  });
});"

I'm very interested in how this will be resolved, since I can't think of anything elegant myself.

Cheers

[tbranyen]

This will probably need a Proxy.