Resolve layouts recursively

[pxlrbt]

(Resubmitted from https://github.com/inertiajs/inertia-vue/pull/135)

The current implementation of nested layouts requires using the render function. This is a) more complex than the the nice layout shorthand and b) requires importing both layouts in every file you use them.

Page.vue

import SiteLayout from './SiteLayout'
import NestedLayout from './NestedLayout'

export default {
    layout: (h, page) => {
        return h(SiteLayout, [
            h(NestedLayout, [page]),
        ])
    },

For simplicity it would be nice to use the shorthand syntax for nested layouts also.

InnerLayout.vue:

import OuterLayout from './OuterLayout'

export default {
    layout: OuterLayout,

Page.vue:

import InnerLayout from './InnerLayout'

export default {
    layout: InnerLayout,

This PR adds the functionality to recursively resolve nested layouts using the shorthand syntax.

[Juhlinus]

Hi @pxlrbt 👋 !

Nice job on this. (Your code examples are a bit broken, but I understand your intent 😉)

@sebastiandedeyne would this be as straightforward to implement for React?

[pxlrbt]

Whoops ... Copying from the other PR messed up the comment a bit. I cleaned it up

[reinink]

This is cool, thanks for submitting @pxlrbt. I'm going to do some testing with this. 👍

[pxlrbt]

Since PR 201 was preferred and merge, I think this can be closed. Or is there still any interest in the recursive version?

[pxlrbt]

I just merged the master branch and renamed the function name to reflect the recursive approach.

[reinink]

Honestly I kind of dig this feature...mostly because that's how I've built up my layouts in the past when I've had multiple layouts.

One question, have you tested this with the new array shorthand (layout: [OuterLayout, InnerLayout])? I'm curious what would happen. 😂

[pxlrbt]

One question, have you tested this with the new array shorthand (layout: [OuterLayout, InnerLayout])? I'm curious what would happen. 😂

I was just thinking about this myself. At the moment there shouldn't be any issue as the array shorthand works on the first level/the pages level. So there shouldn't be any layout components with a layout property. Either the component is resolved using the array shorthand or the recursive approach.

I don't think it's useful to combine both approaches. What do you think?

[reinink]

Yeah, mixing them is super weird. I mostly just wonder what would happen if you did. I'll do some testing. 👍

[pxlrbt]

I can think of these two cases:

Case 1:

export default {
  layout: [Layout1, RecursiveLayout]

Will resolve the layout with the array shorthand. Any layout defined in RecursiveLayout will be ignored.

Case 2:

export default {
  layout: RecursiveLayout

RecursiveLayout.vue

export default {
  layout: [MoreNestedLayout1, MoreNestedLayout1]

Will fail as an array is passed. But shouldn't happen, as the array approach on the second level doesn't work anyway

Can you think of anything else?

[pxlrbt]

To prevent case 2 we could stop recursion and print an error message like this:

if (Array.isArray(layout)) {
  console.error('Inertia.js: Array shorthand must not be combined with recursive shorthand.');
  return child;
}

[pxlrbt]

@reinink Anything I could help you or @claudiodekker with to get this merged?