@measured/puck
Version:
The open-source visual editor for React
965 lines (928 loc) • 30.2 kB
JavaScript
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
var __esm = (fn, res) => function __init() {
return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
};
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __async = (__this, __arguments, generator) => {
return new Promise((resolve, reject) => {
var fulfilled = (value) => {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
};
var rejected = (value) => {
try {
step(generator.throw(value));
} catch (e) {
reject(e);
}
};
var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
step((generator = generator.apply(__this, __arguments)).next());
});
};
// ../tsup-config/react-import.js
import React from "react";
var init_react_import = __esm({
"../tsup-config/react-import.js"() {
"use strict";
}
});
// lib/data/walk-tree.ts
init_react_import();
// lib/data/map-fields.ts
init_react_import();
// lib/data/default-slots.ts
init_react_import();
var defaultSlots = (value, fields) => Object.keys(fields).reduce(
(acc, fieldName) => fields[fieldName].type === "slot" ? __spreadValues({ [fieldName]: [] }, acc) : acc,
value
);
// lib/data/map-fields.ts
var isPromise = (v) => !!v && typeof v.then === "function";
var flatten = (values) => values.reduce((acc, item) => __spreadValues(__spreadValues({}, acc), item), {});
var containsPromise = (arr) => arr.some(isPromise);
var walkField = ({
value,
fields,
mappers,
propKey = "",
propPath = "",
id = "",
config,
recurseSlots = false
}) => {
var _a, _b, _c;
const fieldType = (_a = fields[propKey]) == null ? void 0 : _a.type;
const map = mappers[fieldType];
if (map && fieldType === "slot") {
const content = value || [];
const mappedContent = recurseSlots ? content.map((el) => {
var _a2;
const componentConfig = config.components[el.type];
if (!componentConfig) {
throw new Error(`Could not find component config for ${el.type}`);
}
const fields2 = (_a2 = componentConfig.fields) != null ? _a2 : {};
return walkField({
value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
fields: fields2,
mappers,
id: el.props.id,
config,
recurseSlots
});
}) : content;
if (containsPromise(mappedContent)) {
return Promise.all(mappedContent);
}
return map({
value: mappedContent,
parentId: id,
propName: propPath,
field: fields[propKey],
propPath
});
} else if (map && fields[propKey]) {
return map({
value,
parentId: id,
propName: propKey,
field: fields[propKey],
propPath
});
}
if (value && typeof value === "object") {
if (Array.isArray(value)) {
const arrayFields = ((_b = fields[propKey]) == null ? void 0 : _b.type) === "array" ? fields[propKey].arrayFields : null;
if (!arrayFields) return value;
const newValue = value.map(
(el, idx) => walkField({
value: el,
fields: arrayFields,
mappers,
propKey,
propPath: `${propPath}[${idx}]`,
id,
config,
recurseSlots
})
);
if (containsPromise(newValue)) {
return Promise.all(newValue);
}
return newValue;
} else if ("$$typeof" in value) {
return value;
} else {
const objectFields = ((_c = fields[propKey]) == null ? void 0 : _c.type) === "object" ? fields[propKey].objectFields : fields;
return walkObject({
value,
fields: objectFields,
mappers,
id,
getPropPath: (k) => `${propPath}.${k}`,
config,
recurseSlots
});
}
}
return value;
};
var walkObject = ({
value,
fields,
mappers,
id,
getPropPath,
config,
recurseSlots
}) => {
const newProps = Object.entries(value).map(([k, v]) => {
const opts = {
value: v,
fields,
mappers,
propKey: k,
propPath: getPropPath(k),
id,
config,
recurseSlots
};
const newValue = walkField(opts);
if (isPromise(newValue)) {
return newValue.then((resolvedValue) => ({
[k]: resolvedValue
}));
}
return {
[k]: newValue
};
}, {});
if (containsPromise(newProps)) {
return Promise.all(newProps).then(flatten);
}
return flatten(newProps);
};
function mapFields(item, mappers, config, recurseSlots = false) {
var _a, _b, _c, _d, _e;
const itemType = "type" in item ? item.type : "root";
const componentConfig = itemType === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[itemType];
const newProps = walkObject({
value: defaultSlots((_b = item.props) != null ? _b : {}, (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {}),
fields: (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {},
mappers,
id: item.props ? (_e = item.props.id) != null ? _e : "root" : "root",
getPropPath: (k) => k,
config,
recurseSlots
});
if (isPromise(newProps)) {
return newProps.then((resolvedProps) => __spreadProps(__spreadValues({}, item), {
props: resolvedProps
}));
}
return __spreadProps(__spreadValues({}, item), {
props: newProps
});
}
// lib/data/walk-tree.ts
function walkTree(data, config, callbackFn) {
var _a, _b;
const walkItem = (item) => {
return mapFields(
item,
{
slot: ({ value, parentId, propName }) => {
var _a2;
const content = value;
return (_a2 = callbackFn(content, { parentId, propName })) != null ? _a2 : content;
}
},
config,
true
);
};
if ("props" in data) {
return walkItem(data);
}
const _data = data;
const zones = (_a = _data.zones) != null ? _a : {};
const mappedContent = _data.content.map(walkItem);
return {
root: walkItem(_data.root),
content: (_b = callbackFn(mappedContent, {
parentId: "root",
propName: "default-zone"
})) != null ? _b : mappedContent,
zones: Object.keys(zones).reduce(
(acc, zoneCompound) => __spreadProps(__spreadValues({}, acc), {
[zoneCompound]: zones[zoneCompound].map(walkItem)
}),
{}
)
};
}
// lib/migrate.ts
init_react_import();
// store/default-app-state.ts
init_react_import();
// components/ViewportControls/default-viewports.ts
init_react_import();
var defaultViewports = [
{ width: 360, height: "auto", icon: "Smartphone", label: "Small" },
{ width: 768, height: "auto", icon: "Tablet", label: "Medium" },
{ width: 1280, height: "auto", icon: "Monitor", label: "Large" }
];
// store/default-app-state.ts
var defaultAppState = {
data: { content: [], root: {}, zones: {} },
ui: {
leftSideBarVisible: true,
rightSideBarVisible: true,
arrayState: {},
itemSelector: null,
componentList: {},
isDragging: false,
previewMode: "edit",
viewports: {
current: {
width: defaultViewports[0].width,
height: defaultViewports[0].height || "auto"
},
options: [],
controlsVisible: true
},
field: { focus: null }
},
indexes: {
nodes: {},
zones: {}
}
};
// lib/data/walk-app-state.ts
init_react_import();
// lib/data/for-related-zones.ts
init_react_import();
// lib/get-zone-id.ts
init_react_import();
// lib/root-droppable-id.ts
init_react_import();
var rootAreaId = "root";
var rootZone = "default-zone";
var rootDroppableId = `${rootAreaId}:${rootZone}`;
// lib/get-zone-id.ts
var getZoneId = (zoneCompound) => {
if (!zoneCompound) {
return [];
}
if (zoneCompound && zoneCompound.indexOf(":") > -1) {
return zoneCompound.split(":");
}
return [rootDroppableId, zoneCompound];
};
// lib/data/for-related-zones.ts
function forRelatedZones(item, data, cb, path = []) {
Object.entries(data.zones || {}).forEach(([zoneCompound, content]) => {
const [parentId] = getZoneId(zoneCompound);
if (parentId === item.props.id) {
cb(path, zoneCompound, content);
}
});
}
// lib/data/flatten-node.ts
init_react_import();
import flat from "flat";
// lib/data/strip-slots.ts
init_react_import();
var stripSlots = (data, config) => {
return mapFields(data, { slot: () => null }, config);
};
// lib/data/flatten-node.ts
var { flatten: flatten2, unflatten } = flat;
var flattenNode = (node, config) => {
return __spreadProps(__spreadValues({}, node), {
props: flatten2(stripSlots(node, config).props)
});
};
var expandNode = (node) => {
const props = unflatten(node.props);
return __spreadProps(__spreadValues({}, node), {
props
});
};
// lib/data/walk-app-state.ts
function walkAppState(state, config, mapContent = (content) => content, mapNodeOrSkip = (item) => item) {
var _a;
let newZones = {};
const newZoneIndex = {};
const newNodeIndex = {};
const processContent = (path, zoneCompound, content, zoneType, newId) => {
var _a2;
const [parentId] = zoneCompound.split(":");
const mappedContent = ((_a2 = mapContent(content, zoneCompound, zoneType)) != null ? _a2 : content) || [];
const [_2, zone] = zoneCompound.split(":");
const newZoneCompound = `${newId || parentId}:${zone}`;
const newContent2 = mappedContent.map(
(zoneChild, index) => processItem(zoneChild, [...path, newZoneCompound], index)
);
newZoneIndex[newZoneCompound] = {
contentIds: newContent2.map((item) => item.props.id),
type: zoneType
};
return [newZoneCompound, newContent2];
};
const processRelatedZones = (item, newId, initialPath) => {
forRelatedZones(
item,
state.data,
(relatedPath, relatedZoneCompound, relatedContent) => {
const [zoneCompound, newContent2] = processContent(
relatedPath,
relatedZoneCompound,
relatedContent,
"dropzone",
newId
);
newZones[zoneCompound] = newContent2;
},
initialPath
);
};
const processItem = (item, path, index) => {
const mappedItem = mapNodeOrSkip(item, path, index);
if (!mappedItem) return item;
const id = mappedItem.props.id;
const newProps = __spreadProps(__spreadValues({}, mapFields(
mappedItem,
{
slot: ({ value, parentId: parentId2, propPath }) => {
const content = value;
const zoneCompound = `${parentId2}:${propPath}`;
const [_2, newContent2] = processContent(
path,
zoneCompound,
content,
"slot",
parentId2
);
return newContent2;
}
},
config
).props), {
id
});
processRelatedZones(item, id, path);
const newItem = __spreadProps(__spreadValues({}, item), { props: newProps });
const thisZoneCompound = path[path.length - 1];
const [parentId, zone] = thisZoneCompound ? thisZoneCompound.split(":") : [null, ""];
newNodeIndex[id] = {
data: newItem,
flatData: flattenNode(newItem, config),
path,
parentId,
zone
};
const finalData = __spreadProps(__spreadValues({}, newItem), { props: __spreadValues({}, newItem.props) });
if (newProps.id === "root") {
delete finalData["type"];
delete finalData.props["id"];
}
return finalData;
};
const zones = state.data.zones || {};
const [_, newContent] = processContent(
[],
rootDroppableId,
state.data.content,
"root"
);
const processedContent = newContent;
const zonesAlreadyProcessed = Object.keys(newZones);
Object.keys(zones || {}).forEach((zoneCompound) => {
const [parentId] = zoneCompound.split(":");
if (zonesAlreadyProcessed.includes(zoneCompound)) {
return;
}
const [_2, newContent2] = processContent(
[rootDroppableId],
zoneCompound,
zones[zoneCompound],
"dropzone",
parentId
);
newZones[zoneCompound] = newContent2;
}, newZones);
const processedRoot = processItem(
{
type: "root",
props: __spreadProps(__spreadValues({}, (_a = state.data.root.props) != null ? _a : state.data.root), { id: "root" })
},
[],
-1
);
const root = __spreadProps(__spreadValues({}, state.data.root), {
props: processedRoot.props
});
return __spreadProps(__spreadValues({}, state), {
data: {
root,
content: processedContent,
zones: __spreadValues(__spreadValues({}, state.data.zones), newZones)
},
indexes: {
nodes: __spreadValues(__spreadValues({}, state.indexes.nodes), newNodeIndex),
zones: __spreadValues(__spreadValues({}, state.indexes.zones), newZoneIndex)
}
});
}
// lib/migrate.ts
var migrations = [
// Migrate root to root.props
(data) => {
const rootProps = data.root.props || data.root;
if (Object.keys(data.root).length > 0 && !data.root.props) {
console.warn(
"Migration applied: Root props moved from `root` to `root.props`."
);
return __spreadProps(__spreadValues({}, data), {
root: {
props: __spreadValues({}, rootProps)
}
});
}
return data;
},
// Migrate zones to slots
(data, config, migrationOptions) => {
var _a, _b;
if (!config) return data;
console.log("Migrating DropZones to slots...");
const updatedItems = {};
const appState = __spreadProps(__spreadValues({}, defaultAppState), { data });
const { indexes } = walkAppState(appState, config);
const deletedCompounds = [];
walkAppState(appState, config, (content, zoneCompound, zoneType) => {
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 (((_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
})
});
deletedCompounds.push(zoneCompound);
}
return content;
}
return content;
});
const updated = walkAppState(
appState,
config,
(content) => content,
(item) => {
var _a2;
return (_a2 = updatedItems[item.props.id]) != null ? _a2 : item;
}
);
deletedCompounds.forEach((zoneCompound) => {
var _a2;
const [_, propName] = zoneCompound.split(":");
console.log(
`\u2713 Success: Migrated "${zoneCompound}" from DropZone to slot field "${propName}"`
);
(_a2 = updated.data.zones) == null ? true : delete _a2[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}".`
);
});
delete updated.data.zones;
return updated.data;
}
];
function migrate(data, config, migrationOptions) {
return migrations == null ? void 0 : migrations.reduce(
(acc, migration) => migration(acc, config, migrationOptions),
data
);
}
// lib/transform-props.ts
init_react_import();
// lib/data/default-data.ts
init_react_import();
var defaultData = (data) => __spreadProps(__spreadValues({}, data), {
root: data.root || {},
content: data.content || []
});
// lib/transform-props.ts
function transformProps(data, propTransforms, config = { components: {} }) {
const mapItem = (item) => {
if (propTransforms[item.type]) {
return __spreadProps(__spreadValues({}, item), {
props: __spreadValues({
id: item.props.id
}, propTransforms[item.type](item.props))
});
}
return item;
};
const defaultedData = defaultData(data);
const rootProps = defaultedData.root.props || defaultedData.root;
let newRoot = __spreadValues({}, defaultedData.root);
if (propTransforms["root"]) {
newRoot.props = propTransforms["root"](rootProps);
}
const dataWithUpdatedRoot = __spreadProps(__spreadValues({}, defaultedData), { root: newRoot });
const updatedData = walkTree(
dataWithUpdatedRoot,
config,
(content) => content.map(mapItem)
);
if (!defaultedData.root.props) {
updatedData.root = updatedData.root.props;
}
return updatedData;
}
// lib/resolve-all-data.ts
init_react_import();
// lib/resolve-component-data.ts
init_react_import();
// lib/get-changed.ts
init_react_import();
import fdeq from "fast-deep-equal";
var getChanged = (newItem, oldItem) => {
return newItem ? Object.keys(newItem.props || {}).reduce((acc, item) => {
const newItemProps = (newItem == null ? void 0 : newItem.props) || {};
const oldItemProps = (oldItem == null ? void 0 : oldItem.props) || {};
return __spreadProps(__spreadValues({}, acc), {
[item]: !fdeq(oldItemProps[item], newItemProps[item])
});
}, {}) : {};
};
// lib/resolve-component-data.ts
import fdeq2 from "fast-deep-equal";
var cache = { lastChange: {} };
var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], function* (item, config, metadata = {}, onResolveStart, onResolveEnd, trigger = "replace") {
const configForItem = "type" in item && item.type !== "root" ? config.components[item.type] : config.root;
const resolvedItem = __spreadValues({}, item);
const shouldRunResolver = (configForItem == null ? void 0 : configForItem.resolveData) && item.props;
const id = "id" in item.props ? item.props.id : "root";
if (shouldRunResolver) {
const { item: oldItem = null, resolved = {} } = cache.lastChange[id] || {};
if (item && fdeq2(item, oldItem)) {
return { node: resolved, didChange: false };
}
const changed = getChanged(item, oldItem);
if (onResolveStart) {
onResolveStart(item);
}
const { props: resolvedProps, readOnly = {} } = yield configForItem.resolveData(item, {
changed,
lastData: oldItem,
metadata: __spreadValues(__spreadValues({}, metadata), configForItem.metadata),
trigger
});
resolvedItem.props = __spreadValues(__spreadValues({}, item.props), resolvedProps);
if (Object.keys(readOnly).length) {
resolvedItem.readOnly = readOnly;
}
}
let itemWithResolvedChildren = yield mapFields(
resolvedItem,
{
slot: (_02) => __async(void 0, [_02], function* ({ value }) {
const content = value;
return yield Promise.all(
content.map(
(childItem) => __async(void 0, null, function* () {
return (yield resolveComponentData(
childItem,
config,
metadata,
onResolveStart,
onResolveEnd,
trigger
)).node;
})
)
);
})
},
config
);
if (shouldRunResolver && onResolveEnd) {
onResolveEnd(resolvedItem);
}
cache.lastChange[id] = {
item,
resolved: itemWithResolvedChildren
};
return {
node: itemWithResolvedChildren,
didChange: !fdeq2(item, itemWithResolvedChildren)
};
});
// lib/data/to-component.ts
init_react_import();
var toComponent = (item) => {
return "type" in item ? item : __spreadProps(__spreadValues({}, item), {
props: __spreadProps(__spreadValues({}, item.props), { id: "root" }),
type: "root"
});
};
// lib/resolve-all-data.ts
function resolveAllData(_0, _1) {
return __async(this, arguments, function* (data, config, metadata = {}, onResolveStart, onResolveEnd) {
var _a;
const defaultedData = defaultData(data);
const resolveNode = (_node) => __async(this, null, function* () {
const node = toComponent(_node);
onResolveStart == null ? void 0 : onResolveStart(node);
const resolved = (yield resolveComponentData(
node,
config,
metadata,
() => {
},
() => {
},
"force"
)).node;
const resolvedDeep = yield mapFields(
resolved,
{ slot: ({ value }) => processContent(value) },
config
);
onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
return resolvedDeep;
});
const processContent = (content) => __async(this, null, function* () {
return Promise.all(content.map(resolveNode));
});
const processZones = () => __async(this, null, function* () {
var _a2;
const zones = (_a2 = data.zones) != null ? _a2 : {};
Object.entries(zones).forEach((_02) => __async(this, [_02], function* ([zoneKey, content]) {
zones[zoneKey] = yield Promise.all(content.map(resolveNode));
}));
return zones;
});
const dynamic = {
root: yield resolveNode(defaultedData.root),
content: yield processContent(defaultedData.content),
zones: yield processZones()
};
Object.keys((_a = defaultedData.zones) != null ? _a : {}).forEach((zoneKey) => __async(this, null, function* () {
const content = defaultedData.zones[zoneKey];
dynamic.zones[zoneKey] = yield processContent(content);
}), {});
return dynamic;
});
}
// lib/data/setup-zone.ts
init_react_import();
var setupZone = (data, zoneKey) => {
if (zoneKey === rootDroppableId) {
return data;
}
const newData = __spreadProps(__spreadValues({}, data), {
zones: data.zones ? __spreadValues({}, data.zones) : {}
});
newData.zones[zoneKey] = newData.zones[zoneKey] || [];
return newData;
};
// lib/field-transforms/use-field-transforms.tsx
init_react_import();
import { useMemo } from "react";
function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
const mappers = useMemo(() => {
return Object.keys(transforms).reduce((acc, _fieldType) => {
const fieldType = _fieldType;
return __spreadProps(__spreadValues({}, acc), {
[fieldType]: (_a) => {
var _b = _a, {
parentId
} = _b, params = __objRest(_b, [
"parentId"
]);
const wildcardPath = params.propPath.replace(/\[\d+\]/g, "[*]");
const isReadOnly = (readOnly == null ? void 0 : readOnly[params.propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly || false;
const fn = transforms[fieldType];
return fn == null ? void 0 : fn(__spreadProps(__spreadValues({}, params), {
isReadOnly,
componentId: parentId
}));
}
});
}, {});
}, [transforms, readOnly, forceReadOnly]);
const transformedProps = useMemo(() => {
const mapped = mapFields(item, mappers, config).props;
return mapped;
}, [config, item, mappers]);
const mergedProps = useMemo(
() => __spreadValues(__spreadValues({}, item.props), transformedProps),
[item.props, transformedProps]
);
return mergedProps;
}
// lib/field-transforms/default-transforms/slot-transform.tsx
init_react_import();
var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
slot: ({ value: content, propName, field, isReadOnly }) => {
const render = isReadOnly ? renderSlotRender : renderSlotEdit;
const Slot = (dzProps) => render(__spreadProps(__spreadValues({
allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
}, dzProps), {
zone: propName,
content
}));
return Slot;
}
});
// lib/use-slots.tsx
init_react_import();
function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
return useFieldTransforms(
config,
item,
getSlotTransform(renderSlotEdit, renderSlotRender),
readOnly,
forceReadOnly
);
}
// components/SlotRender/server.tsx
init_react_import();
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
var SlotRenderPure = (props) => /* @__PURE__ */ jsx(SlotRender, __spreadValues({}, props));
var Item = ({
config,
item,
metadata
}) => {
const Component = config.components[item.type];
const props = useSlots(config, item, (slotProps) => /* @__PURE__ */ jsx(SlotRenderPure, __spreadProps(__spreadValues({}, slotProps), { config, metadata })));
return /* @__PURE__ */ jsx(
Component.render,
__spreadProps(__spreadValues({}, props), {
puck: __spreadProps(__spreadValues({}, props.puck), {
metadata: metadata || {}
})
})
);
};
var SlotRender = forwardRef(
function SlotRenderInternal({ className, style, content, config, metadata }, ref) {
return /* @__PURE__ */ jsx("div", { className, style, ref, children: content.map((item) => {
if (!config.components[item.type]) {
return null;
}
return /* @__PURE__ */ jsx(
Item,
{
config,
item,
metadata
},
item.props.id
);
}) });
}
);
export {
__spreadValues,
__spreadProps,
__objRest,
__commonJS,
__toESM,
__async,
init_react_import,
rootAreaId,
rootZone,
rootDroppableId,
defaultSlots,
walkField,
expandNode,
walkAppState,
walkTree,
setupZone,
defaultViewports,
getChanged,
resolveComponentData,
defaultAppState,
useFieldTransforms,
getSlotTransform,
useSlots,
SlotRenderPure,
SlotRender,
migrate,
transformProps,
resolveAllData
};