[MasterDetailLayout] View transitions do not work when using MDL as Hilla router layout

[sissbruecker]

The MDL component automatically starts a view transition when the child component in the details area is added, removed or replaced with a different one. This in turn animates adding, removing, replacing the details with respective animations. When using the MDL as a Hilla router layout that mechanism doesn't work as expected.

A basic Hilla router layout would look like this:

// views/users/@layout.tsx
export default function UserListView() {
    const childView = useOutlet();

    return (
        <MasterDetailLayout>
            <MasterDetailLayout.Master>
                <UserList />
            </MasterDetailLayout.Master>
            <MasterDetailLayout.Detail>
                { childView }
            </MasterDetailLayout.Detail>
        </MasterDetailLayout>
    );
}

In order to detect whether to start a view transition, the MDL detail wrapper checks if:

• childView has changed from null to a component instance, or vice versa
• childView is a different type of component compared to the last render
• childView has a different key compared to the last render

However with the Hilla (file?) router that doesn't seem to work:

• It wraps all child views into a React provider component (haven't figured out yet which one that is). So the type of the child component never changes.
• It also returns that provider if there is no child route, at least when the application uses a Hilla layout rather than a Flow layout as its root layout. So in that case the child view is also never null.

Some random ideas on how to fix this:

• Make Hilla return the actual view component, or null, rather than a wrapper component. There's probably a good reason why it's using the wrapper though.
• Check if the wrapper can have a key that is set to a different value when the route changes. This needs to be done carefully to not recreate the full DOM if the child route component is still the same.
• Find some other mechanism to trigger view transitions rather than trying to detect this automatically based on the child component of the details wrapper.

[sissbruecker]

Moving this back to the backlog as I haven't had time to work in this. The limitation comes from react-router, which always renders a provider component, which makes it impossible to solve this on the React side other than:

• having the application manage view transitions manually based on the URL state
• or use react-router view transitions

Both are sub-optimal as MDL has multiple transition types (add, remove, replace), which require adding respective attributes to the component before starting the transition.

To make the component work out of the box, the only other idea I have come up with is to implement a details wrapper web component that would automatically start view transitions when its DOM changes. To make that possible, it would proxy native DOM APIs that Flow and React use (e.g. insertBefore, appendChild) and instead of executing them immediately, apply the combined changes after an animation frame in a view transition, while still having APIs such as childNodes pretend that the changes are done synchronously. Prototype: vaadin/web-components@39b360f