API ReferenceFunctionsmigrate

migrate

Migrate the Data payload to the latest shape, automatically transforming deprecated data.


import { migrate } from "@measured/puck";
 
migrate(legacyData);

Migrations

Root data to props

Migrates any props stored on root data to the props object.

Before


{
  "root": {
    "title": "Hello, world"
  }
}

After


{
  "root": {
    "props": { "title": "Hello, world" }
  }
}

DropZones to slots

Migrates all DropZone data from zones to inline slots. Requires slots to be provided via the config arg, where the field name for the slot matches the zone prop of the DropZone. See the DropZone to slots migration guide for more information.

Before


{
  "content": [
    {
      "type": "Grid",
      "props": {
        "id": "Grid-12345"
      }
    }
  ],
  "zones": {
    "Grid-12345:items": [
      {
        "type": "HeadingBlock",
        "props": {
          "id": "Heading-12345",
          "title": "Hello, world"
        }
      }
    ]
  }
}

After


{
  "content": [
    {
      "type": "Grid",
      "props": {
        "id": "Grid-12345",
        "items": [
          {
            "type": "HeadingBlock",
            "props": {
              "id": "Heading-12345",
              "title": "Hello, world"
            }
          }
        ]
      }
    }
  ]
}

Args

Param	Example	Type	Status
`data`	`{ content: [{type: "Heading", props: {} }]}`	Data	Required
`config`	`{ components: {} }`	Config	-
`migrationOptions`	`{ migrateDynamicZonesForComponent: {} }`	MigrationOptions	-

`data`

The legacy data you want to transform.

`config`

A config object. Required if migrating data with slots.

`migrationOptions`

Options to customize how data is migrated.

`migrateDynamicZonesForComponent`

An object mapping component names to custom dropzone migration functions. The function will be called for any component with DropZones that don’t have a slot field definition with a matching name in the config.

Each migration function receives:

props: The current component props
zones: A record of zone names to their content

The function should return the updated component props with the migrated zone data.


migrate(legacyData, config, {
  migrateDynamicZonesForComponent: {
    Columns: (props, zones) => {
      return {
        ...props,
        columns: Object.values(zones).map((zone) => ({
          column: zone,
        })),
      };
    },
  },
});

Before


{
  "root": {
    "props": {
      "title": "Legacy Zones Migration"
    }
  },
  "content": [
    {
      "type": "Columns",
      "props": {
        "columns": [{}],
        "id": "Columns-eb9dfe22-4408-44e6-b8e5-fbaedbbdb3be"
      }
    }
  ],
  "zones": {
    "Columns-eb9dfe22-4408-44e6-b8e5-fbaedbbdb3be:column-0": [
      {
        "type": "Text",
        "props": {
          "text": "Drop zone 1",
          "id": "Text-c2b5c0a5-d76b-4120-8bb3-99934e119967"
        }
      }
    ]
  }
}

After


{
  "root": {
    "props": {
      "title": "Legacy Zones Migration"
    }
  },
  "content": [
    {
      "type": "Columns",
      "props": {
        "columns": [
          {
            "column": [
              {
                "type": "Text",
                "props": {
                  "text": "Drop zone 1",
                  "id": "Text-c2b5c0a5-d76b-4120-8bb3-99934e119967"
                }
              }
            ]
          }
        ],
        "id": "Columns-eb9dfe22-4408-44e6-b8e5-fbaedbbdb3be"
      }
    }
  ]
}

Returns

The updated Data object.

Functions

registerOverlayPortal