@measured/puck 0.20.0-canary.755737e8 → 0.20.0-canary.f768aab9

package/README.md

@@ -1,29 +1,33 @@
-# Puck
+<br /><br /><br />
 
-The visual editor for React.
+<div align="center">
 
-<p align="left">
-  <a aria-label="NPM version" href="https://www.npmjs.com/package/@measured/puck">
-    <img alt="" src="https://img.shields.io/npm/v/@measured/puck.svg?style=for-the-badge&labelColor=000000">
-  </a>
-  <a aria-label="License" href="https://github.com/measuredco/puck/blob/main/LICENSE">
-    <img alt="" src="https://img.shields.io/npm/l/@measured/puck.svg?style=for-the-badge&labelColor=000000">
-  </a>
-  <a aria-label="Join the community on Discord" href="https://discord.gg/D9e4E3MQVZ">
-    <img alt="" src="https://img.shields.io/badge/Join%20the%20Discord-blueviolet.svg?style=for-the-badge&logo=Discord&labelColor=000000&logoWidth=20">
-  </a>
- <a aria-label="Browse the awesome-puck community repo" href="https://github.com/measuredco/awesome-puck">
-    <img alt="" src="https://img.shields.io/badge/repo-awesome--puck-fc60a8.svg?style=for-the-badge&labelColor=000000&logoWidth=20">
-  </a>
-</p>
+<a href="https://puckeditor.com">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://res.cloudinary.com/die3nptcg/image/upload/Puck_Logo_White_RGB_j2rwgg.svg" height="100px" aria-label="Puck logo">
+    <img src="https://res.cloudinary.com/die3nptcg/image/upload/Puck_Logo_Black_RGB_dqsjag.svg" height="100px" aria-label="Puck logo">
+  </picture>
+</a>
 
-## Demo
+_The visual editor for React_
 
-Visit https://demo.puckeditor.com/edit to try the demo.
+[Documentation](https://puckeditor.com/docs) • [Demo](https://demo.puckeditor.com/edit) • [Discord](https://discord.gg/V9mDAhuxyZ) • [Contributing](https://github.com/puckeditor/puck/blob/main/CONTRIBUTING.md)
 
-## Documentation
+⭐️ Enjoying Puck? Please [leave a star](https://github.com/puckeditor/puck)!
 
-Visit https://puckeditor.com to view the full documentation.
+<br />
+
+[![GIF showing a page being created in the Puck Editor, with components being added, arranged, and customized in real time](https://github.com/user-attachments/assets/25e1ae25-ca5e-450f-afa0-01816830b731)](https://demo.puckeditor.com/edit)
+
+</div>
+
+## What is Puck?
+
+Puck is a modular, open-source visual editor for React.js. You can use Puck to build custom drag-and-drop experiences with your own application and React components.
+
+Because Puck is just a React component, it plays well with all React.js environments, including Next.js. You own your data and there’s no vendor lock-in.
+
+Puck is also [licensed under MIT](https://github.com/puckeditor/puck?tab=MIT-1-ov-file#readme), making it suitable for both internal systems and commercial applications.
 
 ## Quick start
 

package/dist/{chunk-IM42S4YL.mjs → chunk-H6KSTNLT.mjs}

@@ -871,8 +871,8 @@ var migrations = [
     return data;
   },
   // Migrate zones to slots
-  (data, config) => {
-    var _a;
+  (data, config, migrationOptions) => {
+    var _a, _b;
     if (!config) return data;
     console.log("Migrating DropZones to slots...");
     const updatedItems = {};
@@ -880,13 +880,13 @@ var migrations = [
     const { indexes } = walkAppState(appState, config);
     const deletedCompounds = [];
     walkAppState(appState, config, (content, zoneCompound, zoneType) => {
-      var _a2, _b, _c;
+      var _a2, _b2, _c;
       if (zoneType === "dropzone") {
         const [id, slotName] = zoneCompound.split(":");
         const nodeData = indexes.nodes[id].data;
         const componentType = nodeData.type;
         const configForComponent = id === "root" ? config.root : config.components[componentType];
-        if (((_b = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b.type) === "slot") {
+        if (((_b2 = (_a2 = configForComponent == null ? void 0 : configForComponent.fields) == null ? void 0 : _a2[slotName]) == null ? void 0 : _b2.type) === "slot") {
           updatedItems[id] = __spreadProps(__spreadValues({}, nodeData), {
             props: __spreadProps(__spreadValues(__spreadValues({}, nodeData.props), (_c = updatedItems[id]) == null ? void 0 : _c.props), {
               [slotName]: content
@@ -915,7 +915,49 @@ var migrations = [
       );
       (_a2 = updated.data.zones) == null ? true : delete _a2[zoneCompound];
     });
-    Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+    if (migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) {
+      const unmigratedZonesGrouped = {};
+      Object.keys((_a = updated.data.zones) != null ? _a : {}).forEach((zoneCompound) => {
+        var _a2;
+        const [componentId, propName] = zoneCompound.split(":");
+        const content = (_a2 = updated.data.zones) == null ? void 0 : _a2[zoneCompound];
+        if (!content) {
+          return;
+        }
+        if (!unmigratedZonesGrouped[componentId]) {
+          unmigratedZonesGrouped[componentId] = {};
+        }
+        if (!unmigratedZonesGrouped[componentId][propName]) {
+          unmigratedZonesGrouped[componentId][propName] = content;
+        }
+      });
+      Object.keys(unmigratedZonesGrouped).forEach((componentId) => {
+        updated.data = walkTree(updated.data, config, (content) => {
+          return content.map((child) => {
+            var _a2;
+            if (child.props.id !== componentId) {
+              return child;
+            }
+            const migrateFn = (_a2 = migrationOptions == null ? void 0 : migrationOptions.migrateDynamicZonesForComponent) == null ? void 0 : _a2[child.type];
+            if (!migrateFn) {
+              return child;
+            }
+            const zones = unmigratedZonesGrouped[componentId];
+            const migratedProps = migrateFn(child.props, zones);
+            Object.keys(zones).forEach((propName) => {
+              var _a3;
+              const zoneCompound = `${componentId}:${propName}`;
+              console.log(`\u2713 Success: Migrated "${zoneCompound}" DropZone`);
+              (_a3 = updated.data.zones) == null ? true : delete _a3[zoneCompound];
+            });
+            return __spreadProps(__spreadValues({}, child), {
+              props: migratedProps
+            });
+          });
+        });
+      });
+    }
+    Object.keys((_b = updated.data.zones) != null ? _b : {}).forEach((zoneCompound) => {
       const [_, propName] = zoneCompound.split(":");
       throw new Error(
         `Could not migrate DropZone "${zoneCompound}" to slot field. No slot exists with the name "${propName}".`
@@ -925,9 +967,9 @@ var migrations = [
     return updated.data;
   }
 ];
-function migrate(data, config) {
+function migrate(data, config, migrationOptions) {
   return migrations == null ? void 0 : migrations.reduce(
-    (acc, migration) => migration(acc, config),
+    (acc, migration) => migration(acc, config, migrationOptions),
     data
   );
 }