[Feature]: Undestructuring of props and automatic splitProps

[edemaine]

Input code

import React from "react";

function Component1({name, count}) {
  return <div>Hello {name}! Count is {count}</div>;
}

function Component2({name, count, ...rest}) {
  return <div {...rest}>Hello {name}! Count is {count}</div>;
}

render(() => <Component />, document.getElementById("app"));

Expected Output

import { splitProps } from "solid-js";

function Component1(props) {
  return <div>Hello {props.name}! Count is {props.count}</div>;
}

function Component2(props) {
  const [local, rest] = splitProps(props, ["name", "count"]);
  return <div {...rest}>Hello {local.name}! Count is {local.count}</div>;
}

Additional context

Related work on the Babel front:

• https://github.com/orenelbaum/babel-plugin-solid-undestructure
• https://github.com/LXSMNSYC/solid-labels

[orenelbaum]

The problem here is that we need a way to know what is a component and what isn't.
Other than that we can just plug in one of those Babel plugins.

[edemaine]

In my React code, every component is wrapped with React.memo, so that would help. Another common heuristic is "any function that has JSX in it"; eslint react rules tend to use that, though it's not always accurate.

I don't know how codemods are normally structured, but you could imagine it being interactive, asking some questions like "which of these functions are components?".