@measured/puck 0.20.0-canary.d405985b → 0.20.0-canary.ddc0aa31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +9 -9
- package/dist/{chunk-32MJ3X3H.mjs → chunk-HUKJ36SA.mjs} +131 -69
- package/dist/{chunk-DBSNJT3R.mjs → chunk-PIG4I6UF.mjs} +2894 -2319
- package/dist/index.css +160 -77
- package/dist/index.d.mts +15 -3
- package/dist/index.d.ts +15 -3
- package/dist/index.js +1699 -1069
- package/dist/index.mjs +6 -2
- package/dist/no-external.css +160 -77
- package/dist/no-external.d.mts +2 -2
- package/dist/no-external.d.ts +2 -2
- package/dist/no-external.js +1699 -1069
- package/dist/no-external.mjs +6 -2
- package/dist/rsc.d.mts +2 -2
- package/dist/rsc.d.ts +2 -2
- package/dist/rsc.js +138 -70
- package/dist/rsc.mjs +1 -1
- package/dist/{walk-tree-Bp8tnkJS.d.mts → walk-tree-B57SgEEc.d.mts} +42 -4
- package/dist/{walk-tree-Bp8tnkJS.d.ts → walk-tree-B57SgEEc.d.ts} +42 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<div align="center">
|
|
4
4
|
|
|
5
|
-
<a href="https://puckeditor.com">
|
|
5
|
+
<a href="https://puckeditor.com?utm_source=readme&utm_medium=code&utm_campaign=repo&utm_contents=logo">
|
|
6
6
|
<picture>
|
|
7
7
|
<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">
|
|
8
8
|
<img src="https://res.cloudinary.com/die3nptcg/image/upload/Puck_Logo_Black_RGB_dqsjag.svg" height="100px" aria-label="Puck logo">
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
_The visual editor for React_
|
|
13
13
|
|
|
14
|
-
[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)
|
|
14
|
+
[Documentation](https://puckeditor.com/docs?utm_source=readme&utm_medium=code&utm_campaign=repo&utm_contents=docs_link) • [Demo](https://demo.puckeditor.com/edit?utm_source=readme&utm_medium=code&utm_campaign=repo&utm_contents=demo_link) • [Discord](https://discord.gg/V9mDAhuxyZ) • [Contributing](https://github.com/puckeditor/puck/blob/main/CONTRIBUTING.md)
|
|
15
15
|
|
|
16
16
|
⭐️ Enjoying Puck? Please [leave a star](https://github.com/puckeditor/puck)!
|
|
17
17
|
|
|
@@ -86,7 +86,7 @@ export function Page() {
|
|
|
86
86
|
|
|
87
87
|
## Recipes
|
|
88
88
|
|
|
89
|
-
Use `create-puck-app` to quickly spin up a a pre-configured app based on our provided [recipes](https://github.com/
|
|
89
|
+
Use `create-puck-app` to quickly spin up a a pre-configured app based on our provided [recipes](https://github.com/puckeditor/puck/tree/main/recipes):
|
|
90
90
|
|
|
91
91
|
```sh
|
|
92
92
|
npx create-puck-app my-app
|
|
@@ -94,21 +94,21 @@ npx create-puck-app my-app
|
|
|
94
94
|
|
|
95
95
|
Available recipes include:
|
|
96
96
|
|
|
97
|
-
- [**next**](https://github.com/
|
|
98
|
-
- [**remix**](https://github.com/
|
|
99
|
-
- [**react-router**](https://github.com/
|
|
97
|
+
- [**next**](https://github.com/puckeditor/puck/tree/main/recipes/next): Next.js example, using App Router and static page generation
|
|
98
|
+
- [**remix**](https://github.com/puckeditor/puck/tree/main/recipes/remix): Remix Run v2 example, using dynamic routes at root-level
|
|
99
|
+
- [**react-router**](https://github.com/puckeditor/puck/tree/main/recipes/react-router): React Router v7 app example, using dynamic routes to create pages at any level
|
|
100
100
|
|
|
101
101
|
## Community
|
|
102
102
|
|
|
103
103
|
- [Discord server](https://discord.gg/D9e4E3MQVZ) for discussions
|
|
104
|
-
- [awesome-puck](https://github.com/
|
|
104
|
+
- [awesome-puck](https://github.com/puckeditor/awesome-puck) community repo for plugins, custom fields & more
|
|
105
105
|
|
|
106
106
|
## Get support
|
|
107
107
|
|
|
108
|
-
If you have any questions about Puck, please open a [GitHub issue](https://github.com/
|
|
108
|
+
If you have any questions about Puck, please open a [GitHub issue](https://github.com/puckeditor/puck/issues) or join us on [Discord](https://discord.gg/D9e4E3MQVZ).
|
|
109
109
|
|
|
110
110
|
Or [book a discovery call](https://app.cal.com/chrisvxd/puck-enquiry/) for hands-on support and consultancy.
|
|
111
111
|
|
|
112
112
|
## License
|
|
113
113
|
|
|
114
|
-
MIT © [The Puck Contributors](https://github.com/
|
|
114
|
+
MIT © [The Puck Contributors](https://github.com/puckeditor/puck/graphs/contributors)
|
|
@@ -87,7 +87,7 @@ var init_react_import = __esm({
|
|
|
87
87
|
// lib/data/walk-tree.ts
|
|
88
88
|
init_react_import();
|
|
89
89
|
|
|
90
|
-
// lib/data/map-
|
|
90
|
+
// lib/data/map-fields.ts
|
|
91
91
|
init_react_import();
|
|
92
92
|
|
|
93
93
|
// lib/data/default-slots.ts
|
|
@@ -97,14 +97,14 @@ var defaultSlots = (value, fields) => Object.keys(fields).reduce(
|
|
|
97
97
|
value
|
|
98
98
|
);
|
|
99
99
|
|
|
100
|
-
// lib/data/map-
|
|
100
|
+
// lib/data/map-fields.ts
|
|
101
101
|
var isPromise = (v) => !!v && typeof v.then === "function";
|
|
102
102
|
var flatten = (values) => values.reduce((acc, item) => __spreadValues(__spreadValues({}, acc), item), {});
|
|
103
103
|
var containsPromise = (arr) => arr.some(isPromise);
|
|
104
104
|
var walkField = ({
|
|
105
105
|
value,
|
|
106
106
|
fields,
|
|
107
|
-
|
|
107
|
+
mappers,
|
|
108
108
|
propKey = "",
|
|
109
109
|
propPath = "",
|
|
110
110
|
id = "",
|
|
@@ -112,7 +112,9 @@ var walkField = ({
|
|
|
112
112
|
recurseSlots = false
|
|
113
113
|
}) => {
|
|
114
114
|
var _a, _b, _c;
|
|
115
|
-
|
|
115
|
+
const fieldType = (_a = fields[propKey]) == null ? void 0 : _a.type;
|
|
116
|
+
const map = mappers[fieldType];
|
|
117
|
+
if (map && fieldType === "slot") {
|
|
116
118
|
const content = value || [];
|
|
117
119
|
const mappedContent = recurseSlots ? content.map((el) => {
|
|
118
120
|
var _a2;
|
|
@@ -124,7 +126,7 @@ var walkField = ({
|
|
|
124
126
|
return walkField({
|
|
125
127
|
value: __spreadProps(__spreadValues({}, el), { props: defaultSlots(el.props, fields2) }),
|
|
126
128
|
fields: fields2,
|
|
127
|
-
|
|
129
|
+
mappers,
|
|
128
130
|
id: el.props.id,
|
|
129
131
|
config,
|
|
130
132
|
recurseSlots
|
|
@@ -133,7 +135,21 @@ var walkField = ({
|
|
|
133
135
|
if (containsPromise(mappedContent)) {
|
|
134
136
|
return Promise.all(mappedContent);
|
|
135
137
|
}
|
|
136
|
-
return map(
|
|
138
|
+
return map({
|
|
139
|
+
value: mappedContent,
|
|
140
|
+
parentId: id,
|
|
141
|
+
propName: propKey,
|
|
142
|
+
field: fields[propKey],
|
|
143
|
+
propPath
|
|
144
|
+
});
|
|
145
|
+
} else if (map && fields[propKey]) {
|
|
146
|
+
return map({
|
|
147
|
+
value,
|
|
148
|
+
parentId: id,
|
|
149
|
+
propName: propKey,
|
|
150
|
+
field: fields[propKey],
|
|
151
|
+
propPath
|
|
152
|
+
});
|
|
137
153
|
}
|
|
138
154
|
if (value && typeof value === "object") {
|
|
139
155
|
if (Array.isArray(value)) {
|
|
@@ -143,7 +159,7 @@ var walkField = ({
|
|
|
143
159
|
(el, idx) => walkField({
|
|
144
160
|
value: el,
|
|
145
161
|
fields: arrayFields,
|
|
146
|
-
|
|
162
|
+
mappers,
|
|
147
163
|
propKey,
|
|
148
164
|
propPath: `${propPath}[${idx}]`,
|
|
149
165
|
id,
|
|
@@ -162,7 +178,7 @@ var walkField = ({
|
|
|
162
178
|
return walkObject({
|
|
163
179
|
value,
|
|
164
180
|
fields: objectFields,
|
|
165
|
-
|
|
181
|
+
mappers,
|
|
166
182
|
id,
|
|
167
183
|
getPropPath: (k) => `${propPath}.${k}`,
|
|
168
184
|
config,
|
|
@@ -175,7 +191,7 @@ var walkField = ({
|
|
|
175
191
|
var walkObject = ({
|
|
176
192
|
value,
|
|
177
193
|
fields,
|
|
178
|
-
|
|
194
|
+
mappers,
|
|
179
195
|
id,
|
|
180
196
|
getPropPath,
|
|
181
197
|
config,
|
|
@@ -185,7 +201,7 @@ var walkObject = ({
|
|
|
185
201
|
const opts = {
|
|
186
202
|
value: v,
|
|
187
203
|
fields,
|
|
188
|
-
|
|
204
|
+
mappers,
|
|
189
205
|
propKey: k,
|
|
190
206
|
propPath: getPropPath(k),
|
|
191
207
|
id,
|
|
@@ -207,14 +223,14 @@ var walkObject = ({
|
|
|
207
223
|
}
|
|
208
224
|
return flatten(newProps);
|
|
209
225
|
};
|
|
210
|
-
function
|
|
226
|
+
function mapFields(item, mappers, config, recurseSlots = false) {
|
|
211
227
|
var _a, _b, _c, _d, _e;
|
|
212
228
|
const itemType = "type" in item ? item.type : "root";
|
|
213
229
|
const componentConfig = itemType === "root" ? config.root : (_a = config.components) == null ? void 0 : _a[itemType];
|
|
214
230
|
const newProps = walkObject({
|
|
215
231
|
value: defaultSlots((_b = item.props) != null ? _b : {}, (_c = componentConfig == null ? void 0 : componentConfig.fields) != null ? _c : {}),
|
|
216
232
|
fields: (_d = componentConfig == null ? void 0 : componentConfig.fields) != null ? _d : {},
|
|
217
|
-
|
|
233
|
+
mappers,
|
|
218
234
|
id: item.props ? (_e = item.props.id) != null ? _e : "root" : "root",
|
|
219
235
|
getPropPath: (k) => k,
|
|
220
236
|
config,
|
|
@@ -234,11 +250,14 @@ function mapSlots(item, map, config, recurseSlots = false) {
|
|
|
234
250
|
function walkTree(data, config, callbackFn) {
|
|
235
251
|
var _a, _b;
|
|
236
252
|
const walkItem = (item) => {
|
|
237
|
-
return
|
|
253
|
+
return mapFields(
|
|
238
254
|
item,
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
255
|
+
{
|
|
256
|
+
slot: ({ value, parentId, propName }) => {
|
|
257
|
+
var _a2;
|
|
258
|
+
const content = value;
|
|
259
|
+
return (_a2 = callbackFn(content, { parentId, propName })) != null ? _a2 : content;
|
|
260
|
+
}
|
|
242
261
|
},
|
|
243
262
|
config,
|
|
244
263
|
true
|
|
@@ -289,35 +308,70 @@ var setupZone = (data, zoneKey) => {
|
|
|
289
308
|
|
|
290
309
|
// lib/use-slots.tsx
|
|
291
310
|
init_react_import();
|
|
311
|
+
|
|
312
|
+
// lib/field-transforms/use-field-transforms.tsx
|
|
313
|
+
init_react_import();
|
|
292
314
|
import { useMemo } from "react";
|
|
293
|
-
function
|
|
294
|
-
const
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
(
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
315
|
+
function useFieldTransforms(config, item, transforms, readOnly, forceReadOnly) {
|
|
316
|
+
const mappers = useMemo(() => {
|
|
317
|
+
return Object.keys(transforms).reduce((acc, _fieldType) => {
|
|
318
|
+
const fieldType = _fieldType;
|
|
319
|
+
return __spreadProps(__spreadValues({}, acc), {
|
|
320
|
+
[fieldType]: (_a) => {
|
|
321
|
+
var _b = _a, {
|
|
322
|
+
parentId
|
|
323
|
+
} = _b, params = __objRest(_b, [
|
|
324
|
+
"parentId"
|
|
325
|
+
]);
|
|
326
|
+
const wildcardPath = params.propPath.replace(/\[\d+\]/g, "[*]");
|
|
327
|
+
const isReadOnly = (readOnly == null ? void 0 : readOnly[params.propPath]) || (readOnly == null ? void 0 : readOnly[wildcardPath]) || forceReadOnly || false;
|
|
328
|
+
const fn = transforms[fieldType];
|
|
329
|
+
return fn == null ? void 0 : fn(__spreadProps(__spreadValues({}, params), {
|
|
330
|
+
isReadOnly,
|
|
331
|
+
componentId: parentId
|
|
332
|
+
}));
|
|
333
|
+
}
|
|
334
|
+
});
|
|
335
|
+
}, {});
|
|
336
|
+
}, [transforms, readOnly, forceReadOnly]);
|
|
337
|
+
const transformedProps = useMemo(() => {
|
|
338
|
+
const mapped = mapFields(item, mappers, config).props;
|
|
312
339
|
return mapped;
|
|
313
|
-
}, [config, item,
|
|
340
|
+
}, [config, item, mappers]);
|
|
314
341
|
const mergedProps = useMemo(
|
|
315
|
-
() => __spreadValues(__spreadValues({}, item.props),
|
|
316
|
-
[item.props,
|
|
342
|
+
() => __spreadValues(__spreadValues({}, item.props), transformedProps),
|
|
343
|
+
[item.props, transformedProps]
|
|
317
344
|
);
|
|
318
345
|
return mergedProps;
|
|
319
346
|
}
|
|
320
347
|
|
|
348
|
+
// lib/field-transforms/default-transforms/slot-transform.tsx
|
|
349
|
+
init_react_import();
|
|
350
|
+
var getSlotTransform = (renderSlotEdit, renderSlotRender = renderSlotEdit) => ({
|
|
351
|
+
slot: ({ value: content, propName, field, isReadOnly }) => {
|
|
352
|
+
const render = isReadOnly ? renderSlotRender : renderSlotEdit;
|
|
353
|
+
const Slot = (dzProps) => render(__spreadProps(__spreadValues({
|
|
354
|
+
allow: (field == null ? void 0 : field.type) === "slot" ? field.allow : [],
|
|
355
|
+
disallow: (field == null ? void 0 : field.type) === "slot" ? field.disallow : []
|
|
356
|
+
}, dzProps), {
|
|
357
|
+
zone: propName,
|
|
358
|
+
content
|
|
359
|
+
}));
|
|
360
|
+
return Slot;
|
|
361
|
+
}
|
|
362
|
+
});
|
|
363
|
+
|
|
364
|
+
// lib/use-slots.tsx
|
|
365
|
+
function useSlots(config, item, renderSlotEdit, renderSlotRender = renderSlotEdit, readOnly, forceReadOnly) {
|
|
366
|
+
return useFieldTransforms(
|
|
367
|
+
config,
|
|
368
|
+
item,
|
|
369
|
+
getSlotTransform(renderSlotEdit, renderSlotRender),
|
|
370
|
+
readOnly,
|
|
371
|
+
forceReadOnly
|
|
372
|
+
);
|
|
373
|
+
}
|
|
374
|
+
|
|
321
375
|
// components/SlotRender/server.tsx
|
|
322
376
|
init_react_import();
|
|
323
377
|
import { forwardRef } from "react";
|
|
@@ -530,7 +584,7 @@ import flat from "flat";
|
|
|
530
584
|
// lib/data/strip-slots.ts
|
|
531
585
|
init_react_import();
|
|
532
586
|
var stripSlots = (data, config) => {
|
|
533
|
-
return
|
|
587
|
+
return mapFields(data, { slot: () => null }, config);
|
|
534
588
|
};
|
|
535
589
|
|
|
536
590
|
// lib/data/flatten-node.ts
|
|
@@ -589,18 +643,21 @@ function walkAppState(state, config, mapContent = (content) => content, mapNodeO
|
|
|
589
643
|
const mappedItem = mapNodeOrSkip(item, path, index);
|
|
590
644
|
if (!mappedItem) return item;
|
|
591
645
|
const id = mappedItem.props.id;
|
|
592
|
-
const newProps = __spreadProps(__spreadValues({},
|
|
646
|
+
const newProps = __spreadProps(__spreadValues({}, mapFields(
|
|
593
647
|
mappedItem,
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
648
|
+
{
|
|
649
|
+
slot: ({ value, parentId: parentId2, propPath }) => {
|
|
650
|
+
const content = value;
|
|
651
|
+
const zoneCompound = `${parentId2}:${propPath}`;
|
|
652
|
+
const [_2, newContent2] = processContent(
|
|
653
|
+
path,
|
|
654
|
+
zoneCompound,
|
|
655
|
+
content,
|
|
656
|
+
"slot",
|
|
657
|
+
parentId2
|
|
658
|
+
);
|
|
659
|
+
return newContent2;
|
|
660
|
+
}
|
|
604
661
|
},
|
|
605
662
|
config
|
|
606
663
|
).props), {
|
|
@@ -879,24 +936,27 @@ var resolveComponentData = (_0, _1, ..._2) => __async(void 0, [_0, _1, ..._2], f
|
|
|
879
936
|
resolvedItem.readOnly = readOnly;
|
|
880
937
|
}
|
|
881
938
|
}
|
|
882
|
-
let itemWithResolvedChildren = yield
|
|
939
|
+
let itemWithResolvedChildren = yield mapFields(
|
|
883
940
|
resolvedItem,
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
content
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
941
|
+
{
|
|
942
|
+
slot: (_02) => __async(void 0, [_02], function* ({ value }) {
|
|
943
|
+
const content = value;
|
|
944
|
+
return yield Promise.all(
|
|
945
|
+
content.map(
|
|
946
|
+
(childItem) => __async(void 0, null, function* () {
|
|
947
|
+
return (yield resolveComponentData(
|
|
948
|
+
childItem,
|
|
949
|
+
config,
|
|
950
|
+
metadata,
|
|
951
|
+
onResolveStart,
|
|
952
|
+
onResolveEnd,
|
|
953
|
+
trigger
|
|
954
|
+
)).node;
|
|
955
|
+
})
|
|
956
|
+
)
|
|
957
|
+
);
|
|
958
|
+
})
|
|
959
|
+
},
|
|
900
960
|
config
|
|
901
961
|
);
|
|
902
962
|
if (shouldRunResolver && onResolveEnd) {
|
|
@@ -939,9 +999,9 @@ function resolveAllData(_0, _1) {
|
|
|
939
999
|
},
|
|
940
1000
|
"force"
|
|
941
1001
|
)).node;
|
|
942
|
-
const resolvedDeep = yield
|
|
1002
|
+
const resolvedDeep = yield mapFields(
|
|
943
1003
|
resolved,
|
|
944
|
-
processContent,
|
|
1004
|
+
{ slot: ({ value }) => processContent(value) },
|
|
945
1005
|
config
|
|
946
1006
|
);
|
|
947
1007
|
onResolveEnd == null ? void 0 : onResolveEnd(toComponent(resolvedDeep));
|
|
@@ -992,6 +1052,8 @@ export {
|
|
|
992
1052
|
getChanged,
|
|
993
1053
|
resolveComponentData,
|
|
994
1054
|
defaultAppState,
|
|
1055
|
+
useFieldTransforms,
|
|
1056
|
+
getSlotTransform,
|
|
995
1057
|
useSlots,
|
|
996
1058
|
Render,
|
|
997
1059
|
SlotRenderPure,
|