[2.x] - Fine grained props merge after a visit

[VicGUTT]

Hi there @joetannenbaum 👋

Was looking at the on-going async-requests branch and though I'd chime in with some questions/feedback if you'd indulge me.

Prelude

Currently Inertia does not allow fined grained partial requests on the client side because it only merges the first level prop objects back into the current Page props object.

response.ts

protected mergeProps(pageResponse: Page): void {
  if (/*...*/) {
    pageResponse.props = { ...currentPage.get().props, ...pageResponse.props } // <-- Here
  }
}

This prevents, as an example, retrieving only a very specific prop subset, like a given nested property.

router.reload({ only: ['auth.user.friends.0.first_name', 'auth.user.friends.0.last_name'] });

In the example above, the server would return the following props:

{
  "auth": {
    "user": {
      "friends": [
        {"first_name": "...", "last_name": "..."}
      ]
    }
  }
}

And on the client end users would expect only the first_name and last_name properties of the first "friends" of the authenticated user to be merged back to the existing Inertia Page object.
However, currently the retrieved auth object would completely override the existing one, thus removing any other existing properties.

I am aware this has previously been attempted with #1877 then reverted by #1895. But with the on-going rewrite it might a good time to tackle this.

Suggestion

Allow for nested props merging. Many existing JavaScript libraries could be used here.

Or here's an example implementation inspired by Laravel's `Illuminate\Collections\Arr` helper:

protected mergeProps(pageResponse: Page): void {
  if (/*...*/) {
    mergePartialPropsWithExistingProps(
      this.requestParams.all().only,
      currentPage.get().props,
      pageResponse.props,
    )
  }
}

function mergePartialPropsWithExistingProps(only: string[], current: Page['props'], incomming: Page['props']): void {
    for (const key of only) {
        if (!key.includes('.')) {
            continue;
        }

        const value = get(incomming, key);

        set(current, key, value);
    }
}

function get(object: Record<string | number, unknown>, key: string) {
    const keys = key.split('.');

    let value: unknown = object;

    for (const key of keys) {
        if (typeof value !== 'object' || value === null) {
            break;
        }

        value = value[key as keyof typeof value];
    }

    return value;
}

function set(object: Record<string | number, unknown>, key: string, value: unknown) {
    const keys = key.split('.');

    let currentObject: unknown = object;

    keys.forEach((key, index) => {
        if (typeof currentObject !== 'object' || currentObject === null) {
            return;
        }

        const isLastKey = index + 1 === keys.length;

        if (typeof currentObject[key as keyof typeof currentObject] !== 'object') {
            (currentObject as Record<string | number, unknown>)[key] = {};
        }

        if (isLastKey) {
            (currentObject as Record<string | number, unknown>)[key] = value;
        } else {
            currentObject = (currentObject as Record<string | number, unknown>)[key];
        }
    });

    return object;
}

// /**
//  * Basic test.
//  */
// const props = {
//     data: {
//         auth: {
//             user: {
//                 name: 'Victor',
//             },
//         },
//     },
// };

// console.log(set({}, 'extra.parent.child', 123).extra.parent.child); // 123
// console.log(set(props, 'extra.parent.child', 123).extra.parent.child); // 123
// console.log(set(props, 'data.extra.parent.child', 123).data.extra.parent.child); // 123
// console.log(set(props, 'data.auth.user.name', 123).data.auth.user.name); // 123