Import version 3 saved layouts in version 4?

[bvaughn]

Given a PanelGroup with an auto-save id of "persistence", version 3 of this library saved layouts in an object that looked like this:

{
  "left,right": {
    "expandToSizes": {},
    "layout": [50, 50]
  },
  "center,left,right": {
    "expandToSizes": {},
    "layout": [33, 33, 34]
  }
}

The useDefaultLayout hook in version 4 saves layouts in a different format.

The first difference is that layouts are saved as separate entries, depending on the ids provided, for more flexibility.

id	panelIds	localStorage key
"persistence"	undefined	"react-resizable-panels:persistence"
"persistence"	[ "left", "right" ]	"react-resizable-panels:persistence:left:right"
"persistence"	[ "left", "center", "right" ]	"react-resizable-panels:persistence:left:center:right"

The format of each local storage entry is also different, e.g.

Two panel layout:

{ "left": 50, "right": 50 }

Three panel layout:

{ "left": 33, "center": 33, "right": 34 }

Conceptually, version 4 should be able to detect and automatically "migrate" older entries to the newer format.

Note

If the version 4 hook is used without an explicit array of panel ids, the local storage key is the same. If panel ids are provided, the legacy key name can still be known and queried for values.

The unspoken challenge here is that if the panelIds array is omitted, and the legacy layout contains more than one layout, the version 4 hook has no way to know which layout to use, so it would have to just bail out and return undefined.

I think the high level logic then should be:

flowchart TD
    START[useDefaultLayout] --> IDS{Has panel ids?}

    IDS                  -->|No| IDS_NO{Saved data?}
      IDS_NO             -->|Yes| IDS_NO_VERSION{Which version?}
        IDS_NO_VERSION   -->|Version 4| IDS_NO_VERSION_4[Use layout]
        IDS_NO_VERSION   -->|Version 3| IDS_NO_VERSION_3[How many layouts?]
          IDS_NO_VERSION_3    -->|1 layout| IDS_NO_VERSION_3_1[Convert legacy layout]
          IDS_NO_VERSION_3 -->|2+ layouts| IDS_NO_VERSION_3_MORE[No default layout]
      IDS_NO             -->|No| IDS_NO_UNDEFINED[No default layout]

    IDS                  -->|Yes| IDS_YES{Saved data?}
      IDS_YES            -->|Yes| IDS_YES_VERSION{Which version?}
        IDS_YES_VERSION  -->|Version 4| IDS_YES_VERSION_4[Use layout]
        IDS_YES_VERSION  -->|Version 3| IDS_YES_VERSION_3[Convert legacy layout]
      IDS_YES            -->|No| IDS_YES_FALLBACK[Check for legacy data]

Loading

[mjfwebb]

Just kind of throwing my thoughts out here, but I noticed you mentioned that you wanted to provide an auto-migration mechanism. While I imagine the actual code for this would be quite minimal, in the interest on keeping the bundle size as small as possible, could this be provided as a codemod/install step rather than something done in runtime?

Maybe you already planned it that way.

[bvaughn]

A codemod wouldn't really help here. This would need to be a just-in-time upgrade done to data stored in localStorage in a user's browser. It could perhaps be done as a separate package entrypoint.

Honestly I don't love the idea of writing this, and I've considered just closing it as unnecessary a few times. Given current library usage numbers though, there's still a lot of people on v2 and v3 of this package.

[simon-lumikello]

Hi.

In case you're interested in a real-life user feedback:
In my app I do rely on your lib quite heavily. Many pages use it in their root layout.

I've just tried migrating the code and found that saved layouts are not picked up automatically.
While I believe writing the migration myself is totally doable, I would much prefer having an official way, even if it is just in a shape of "Here, copy this JS function to your utils and run it yourself"

I totally understand though that we get it for free, so we are not in position to demand anything.
But I hope the official way is provided at some point.

Thanks!

[bvaughn]

The description of this issue is very thorough and probably about as good as you’re going to get short of someone writing the actual immigration code.

[bvaughn]

I believe I've implemented support for this in PR #699

[bvaughn]

Version 4.8.0 will automatically migrate legacy layouts.

---

❤️ → ☕ givebrian.coffee