feat(react): improve split props fn

[cschroeter]

Two ideas that came to mind:

a) when using the splitProps fn I would love to define a target type that is used for autocompletion
b) when using the splitProps fn it should fail on typecheck if not all props are destructured. so if a new property is added our build pipeline would fail

here is an example:

interface Maschine {
  value?: string
  newProperty?: string // was added recently
}

const [machineProps, rest] = splitProps<Maschine>(props, ["value", "newProperty"]) // OK
const [machineProps, rest] = splitProps<Maschine>(props, ["value"]) // Error -> missing value newProperty

Love to hear your thoughts @TimKolberger

[TimKolberger]

Great idea! I think this can be achieved with an additional generic.
I'll give it a shot tomorrow.

[cschroeter]

You are awesome.

Without investigating the topic I think there is a built-in required type in typescript.

In addition if it makes the fn easier I don't think we need the grouping right?

[TimKolberger]

I tried to get the typings right but it is not as simple as it seems - obviously :D

My journey was:

We need to type the array to ensure every key of an additional type is present in the array.
Convert the keyof TargetProps union to a tuple, and integrate it into the splitProps type defs.

type UseMachineProps = { value: string, onChange: any }
// =>
type Union = 'value' | 'onChange'
// =>
type Tuple = ['value', 'onChange']
// =>
function splitProps(props, selection: UnionToTupleMagic) {}

But a Tuple type enforces the order of the props to match exactly

type UseMachineProps = { value: string, onChange: any }
type Tuple = ['value', 'onChange'] // works
type Tuple = ['onChange', 'value'] // fails

This is not very good DX, because it is hard to get this order correctly for 20 props...
Do you have any ideas how to finalize this?

I created a TS playground for that:

https://www.typescriptlang.org/play?#code/C4TwDgpgBACgTgezAZQgGwgY2ASwQOwB54kBnAPigF4o4IBDAEwLRCgAoBrCEBAM1iIwpAJQBtALoAoUJEFJUGbHnyliQitShiSKdFlwF1ZcgBooAOiu7FBlceHlJ0qXwCu+ZQSikwaHMC6pOxWFvRwAOakAFxQ9PggkiJQAN5SUFAA9Jk+wG4ARlIAvlJSEAAeYAhwwFDunob4tBAAjm44dIzIfgFBhABKre2dANI8pFAVwBD4jBPcvAJB5kHk7OlQYBqxyxuhC7ZeqrFiAKr4KgAqCJdufhADQx0QjGMgFOahNvpHDhTOUmSaQydDycCavn8gQ07C2ZE+VgOP0aomKpVk0HOVwQAEl8NM4KQ7EZTpQaOxTpNytNZhN8BAAG4QOBQAD8UHpTJZsXY4QisVOySolE5zOSUxmcw4Gz5sRw+D4zKgONMgOolAZCBwjA27JxG1iorg6PAmIuBGut3uhEuZKgWItuPxzKJv0uVJpUqNbI5jKVPOAsUuQsoto9kom6wyAH1DX64KqQ1B5YqWQB1XXaUIO-CWu4YQgAUXKmDQbkYD0u5jT5DMUDT0gyJxcUmyUGmpGApFKmAInZ8CDccEwECCWhScViAEZzPlYgAmcyYWIAZnMjFiABYoCVWzkABb0MBgNhgejAfelOhtZ5dHrQsjsUiD4ejjTmMQAcnon-Mn-yv5QJ+mCAZ+jCfhIIhSNewwvN0UJ9N+gEYvwA5DiOqxPi+GHvtoSGQaUbYeIex6nuel57pMpD+PiAC0jA4KQ9D5BgtH0tStE0dAAACGKkJgcA4GAwC0RA1HysAmT5PEtFdrRvYALYKTMwCUbxpCiZUBiiXAiDGjBt7wb0MLPuhb7wnhP4EW2Yk0SJDFMSxEBsVMnHyjxfECUJIm2RJUkyXJinKfialyRUkDYDpenQU8nRGQ+wiEEhUAAD5AQBqVASB5goQIpmvph+U4RZX4-n+AF-tlQHgdZOS+XRDnMax7EiVxUC8aa-GCcJonifi-n4LJGlBSpoUaeF2nMtFBlxfeiE-pl-6fotVW5WhBUaGsRXmcIH5IeVEFQYROSMaQbjQGeF7He2+7QJgQ50PiA5lo0zQ3nQEwXtACyfQgUD5NA8o3Xd1R0NgUDVBWLIAO77jgmD7smEz0Js9BA8Af0RBAtSCRE+6qTNcFzRoSULWlS0rchpqodthXYTtpB7VVS1-lZIhAA

[TimKolberger]

Maybe we can get some inspiration here: microsoft/TypeScript#50831 (comment)

[cschroeter]

https://linear.app/chakra/issue/OSS-329/feat-improve-splitpropsfn-types