Some way of binding bidirectionally to all props in an object, capturing all custom events.

There seems to be no way of bidirectionally binding to all of a component's arbitrary props.

<!-- pass arbitrary props, already there -->
<svelte:component this={someComponent} {...itsProps} />

<!-- get changes to arbitrary props, missing, various potential syntaxes follow -->
<svelte:component this={someComponent} bind:{...itsProps} />

<svelte:component this={someComponent} bind:$$props />

<svelte:component this={someComponent} {...itsProps} on:propsChanged={propHandler} />

I would say it could/should also be available outside of <component/> to enable generic handling of children.

This would be useful for updating a property tree of components, which could be useful for serializing and deserializing component trees. Also for the particular situation of svelte-subdivide, which would benefit from persisting a prop configuration.

For example, at present svelte/svelte-subdivide can receive a layout property specifying a layout geometry that will instantiate the same component in each Pane, but you can't specify the properties of this object, much less for each indivdual instance.

I'm adding this capability to it. In that version, you can pass arbitrary component props individually to each pane.

However, I can't capture those arbitrary props later on if they change.

It could also be useful to capture all custom events in a similar fashion, I have no need for it at present and so far can only think of its usefulness for debugging perhaps.

Considerations

Should properties from grandchild components be available for serialization as well? How would one choose child props, or props from all descendants?

Example

The closest I can achieve so far:

https://v3.svelte.technology/repl?version=3.0.0-beta.15&gist=52549b8577ff8f3f47cd25139877d371

But in the example, I'm forced to add logic to Component3.svelte, which ideally would be a generic component with no special custom logic.

sveltejs / svelte

Some way of binding bidirectionally to all props in an object, capturing all custom events. #2226

Considerations

Example