@webstudio-is/react-sdk 0.293.0 → 0.295.0
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/lib/index.js +172 -249
- package/lib/standard-attributes.js +13 -0
- package/lib/types/component-generator.d.ts +19 -2
- package/lib/types/index.d.ts +2 -2
- package/lib/types/props.d.ts +14 -8
- package/lib/types/standard-attributes.d.ts +1 -0
- package/package.json +14 -13
- package/placeholder.d.ts +5 -1
- package/lib/types/__generated__/standard-attributes.d.ts +0 -2
package/lib/index.js
CHANGED
|
@@ -57,7 +57,8 @@ var generateRemixParams = (pathname) => {
|
|
|
57
57
|
// src/props.ts
|
|
58
58
|
import {
|
|
59
59
|
getPagePath,
|
|
60
|
-
findPageByIdOrPath
|
|
60
|
+
findPageByIdOrPath,
|
|
61
|
+
findTreeInstanceIdsExcludingSubtrees
|
|
61
62
|
} from "@webstudio-is/sdk";
|
|
62
63
|
var normalizeProps = ({
|
|
63
64
|
props,
|
|
@@ -163,6 +164,23 @@ var componentAttribute = "data-ws-component";
|
|
|
163
164
|
var showAttribute = "data-ws-show";
|
|
164
165
|
var inflatedAttribute = "data-ws-collapsed";
|
|
165
166
|
var textContentAttribute = "data-ws-text-content";
|
|
167
|
+
var findTreeInstanceIdsExcludingStaticHidden = ({
|
|
168
|
+
instances,
|
|
169
|
+
props,
|
|
170
|
+
rootInstanceId
|
|
171
|
+
}) => {
|
|
172
|
+
const hiddenInstanceIds = /* @__PURE__ */ new Set();
|
|
173
|
+
for (const prop of props.values()) {
|
|
174
|
+
if (prop.name === showAttribute && prop.type === "boolean" && prop.value === false) {
|
|
175
|
+
hiddenInstanceIds.add(prop.instanceId);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
return findTreeInstanceIdsExcludingSubtrees(
|
|
179
|
+
instances,
|
|
180
|
+
rootInstanceId,
|
|
181
|
+
hiddenInstanceIds
|
|
182
|
+
);
|
|
183
|
+
};
|
|
166
184
|
var attributeNameStartChar = "A-Z_a-z\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02FF\\u0370-\\u037D\\u037F-\\u1FFF\\u200C-\\u200D\\u2070-\\u218F\\u2C00-\\u2FEF\\u3001-\\uD7FF\\uF900-\\uFDCF\\uFDF0-\\uFFFD";
|
|
167
185
|
var attributeNameChar = attributeNameStartChar + ":\\-0-9\\u00B7\\u0300-\\u036F\\u203F-\\u2040";
|
|
168
186
|
var validAttributeNameRegex = new RegExp(
|
|
@@ -223,7 +241,9 @@ import {
|
|
|
223
241
|
parseComponentName,
|
|
224
242
|
generateExpression,
|
|
225
243
|
decodeDataSourceVariable,
|
|
244
|
+
contentBlockDocumentProp,
|
|
226
245
|
blockComponent,
|
|
246
|
+
blockBodyComponent,
|
|
227
247
|
blockTemplateComponent,
|
|
228
248
|
collectionComponent,
|
|
229
249
|
descendantComponent,
|
|
@@ -232,226 +252,10 @@ import {
|
|
|
232
252
|
} from "@webstudio-is/sdk";
|
|
233
253
|
import { transpileExpression } from "@webstudio-is/expression";
|
|
234
254
|
import { indexProperty, tagProperty } from "@webstudio-is/sdk/runtime";
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
accesskey: "accessKey",
|
|
240
|
-
allowfullscreen: "allowFullScreen",
|
|
241
|
-
autocapitalize: "autoCapitalize",
|
|
242
|
-
autocomplete: "autoComplete",
|
|
243
|
-
autocorrect: "autoCorrect",
|
|
244
|
-
autofocus: "autoFocus",
|
|
245
|
-
autoplay: "autoPlay",
|
|
246
|
-
charset: "charSet",
|
|
247
|
-
class: "className",
|
|
248
|
-
colspan: "colSpan",
|
|
249
|
-
contenteditable: "contentEditable",
|
|
250
|
-
crossorigin: "crossOrigin",
|
|
251
|
-
datetime: "dateTime",
|
|
252
|
-
enctype: "encType",
|
|
253
|
-
enterkeyhint: "enterKeyHint",
|
|
254
|
-
fetchpriority: "fetchPriority",
|
|
255
|
-
for: "htmlFor",
|
|
256
|
-
formmethod: "formMethod",
|
|
257
|
-
formaction: "formAction",
|
|
258
|
-
formenctype: "formEncType",
|
|
259
|
-
formnovalidate: "formNoValidate",
|
|
260
|
-
formtarget: "formTarget",
|
|
261
|
-
hreflang: "hrefLang",
|
|
262
|
-
"http-equiv": "httpEquiv",
|
|
263
|
-
imagesizes: "imageSizes",
|
|
264
|
-
imagesrcset: "imageSrcSet",
|
|
265
|
-
inputmode: "inputMode",
|
|
266
|
-
itemid: "itemID",
|
|
267
|
-
itemprop: "itemProp",
|
|
268
|
-
itemref: "itemRef",
|
|
269
|
-
itemscope: "itemScope",
|
|
270
|
-
itemtype: "itemType",
|
|
271
|
-
maxlength: "maxLength",
|
|
272
|
-
minlength: "minLength",
|
|
273
|
-
nomodule: "noModule",
|
|
274
|
-
novalidate: "noValidate",
|
|
275
|
-
playsinline: "playsInline",
|
|
276
|
-
readonly: "readOnly",
|
|
277
|
-
referrerpolicy: "referrerPolicy",
|
|
278
|
-
rowspan: "rowSpan",
|
|
279
|
-
spellcheck: "spellCheck",
|
|
280
|
-
srcdoc: "srcDoc",
|
|
281
|
-
srclang: "srcLang",
|
|
282
|
-
srcset: "srcSet",
|
|
283
|
-
tabindex: "tabIndex",
|
|
284
|
-
usemap: "useMap",
|
|
285
|
-
"alignment-baseline": "alignmentBaseline",
|
|
286
|
-
"baseline-shift": "baselineShift",
|
|
287
|
-
"clip-path": "clipPath",
|
|
288
|
-
"clip-rule": "clipRule",
|
|
289
|
-
"color-interpolation": "colorInterpolation",
|
|
290
|
-
"color-interpolation-filters": "colorInterpolationFilters",
|
|
291
|
-
"color-profile": "colorProfile",
|
|
292
|
-
"color-rendering": "colorRendering",
|
|
293
|
-
"dominant-baseline": "dominantBaseline",
|
|
294
|
-
"enable-background": "enableBackground",
|
|
295
|
-
"fill-opacity": "fillOpacity",
|
|
296
|
-
"fill-rule": "fillRule",
|
|
297
|
-
"flood-opacity": "floodOpacity",
|
|
298
|
-
"flood-color": "floodColor",
|
|
299
|
-
"font-family": "fontFamily",
|
|
300
|
-
"font-size": "fontSize",
|
|
301
|
-
"font-size-adjust": "fontSizeAdjust",
|
|
302
|
-
"font-stretch": "fontStretch",
|
|
303
|
-
"font-style": "fontStyle",
|
|
304
|
-
"font-variant": "fontVariant",
|
|
305
|
-
"font-weight": "fontWeight",
|
|
306
|
-
"glyph-orientation-horizontal": "glyphOrientationHorizontal",
|
|
307
|
-
"glyph-orientation-vertical": "glyphOrientationVertical",
|
|
308
|
-
"image-rendering": "imageRendering",
|
|
309
|
-
"letter-spacing": "letterSpacing",
|
|
310
|
-
"lighting-color": "lightingColor",
|
|
311
|
-
"marker-end": "markerEnd",
|
|
312
|
-
"marker-mid": "markerMid",
|
|
313
|
-
"marker-start": "markerStart",
|
|
314
|
-
"pointer-events": "pointerEvents",
|
|
315
|
-
popovertarget: "popoverTarget",
|
|
316
|
-
popovertargetaction: "popoverTargetAction",
|
|
317
|
-
"shape-rendering": "shapeRendering",
|
|
318
|
-
"stop-color": "stopColor",
|
|
319
|
-
"stop-opacity": "stopOpacity",
|
|
320
|
-
"stroke-dasharray": "strokeDasharray",
|
|
321
|
-
"stroke-dashoffset": "strokeDashoffset",
|
|
322
|
-
"stroke-linecap": "strokeLinecap",
|
|
323
|
-
"stroke-linejoin": "strokeLinejoin",
|
|
324
|
-
"stroke-miterlimit": "strokeMiterlimit",
|
|
325
|
-
"stroke-width": "strokeWidth",
|
|
326
|
-
"stroke-opacity": "strokeOpacity",
|
|
327
|
-
"text-anchor": "textAnchor",
|
|
328
|
-
"text-decoration": "textDecoration",
|
|
329
|
-
"text-rendering": "textRendering",
|
|
330
|
-
"unicode-bidi": "unicodeBidi",
|
|
331
|
-
"word-spacing": "wordSpacing",
|
|
332
|
-
"writing-mode": "writingMode",
|
|
333
|
-
"xlink:actuate": "xlinkActuate",
|
|
334
|
-
"xlink:arcrole": "xlinkArcrole",
|
|
335
|
-
"xlink:href": "xlinkHref",
|
|
336
|
-
"xlink:role": "xlinkRole",
|
|
337
|
-
"xlink:show": "xlinkShow",
|
|
338
|
-
"xlink:title": "xlinkTitle",
|
|
339
|
-
"xlink:type": "xlinkType",
|
|
340
|
-
"xml:base": "xmlBase",
|
|
341
|
-
"xml:lang": "xmlLang",
|
|
342
|
-
"xml:space": "xmlSpace",
|
|
343
|
-
dirname: "dirName"
|
|
344
|
-
};
|
|
345
|
-
var reactPropsToStandardAttributes = {
|
|
346
|
-
acceptCharset: "accept-charset",
|
|
347
|
-
accessKey: "accesskey",
|
|
348
|
-
allowFullScreen: "allowfullscreen",
|
|
349
|
-
autoCapitalize: "autocapitalize",
|
|
350
|
-
autoComplete: "autocomplete",
|
|
351
|
-
autoCorrect: "autocorrect",
|
|
352
|
-
autoFocus: "autofocus",
|
|
353
|
-
autoPlay: "autoplay",
|
|
354
|
-
charSet: "charset",
|
|
355
|
-
className: "class",
|
|
356
|
-
colSpan: "colspan",
|
|
357
|
-
contentEditable: "contenteditable",
|
|
358
|
-
crossOrigin: "crossorigin",
|
|
359
|
-
dateTime: "datetime",
|
|
360
|
-
encType: "enctype",
|
|
361
|
-
enterKeyHint: "enterkeyhint",
|
|
362
|
-
fetchPriority: "fetchpriority",
|
|
363
|
-
htmlFor: "for",
|
|
364
|
-
formMethod: "formmethod",
|
|
365
|
-
formAction: "formaction",
|
|
366
|
-
formEncType: "formenctype",
|
|
367
|
-
formNoValidate: "formnovalidate",
|
|
368
|
-
formTarget: "formtarget",
|
|
369
|
-
hrefLang: "hreflang",
|
|
370
|
-
httpEquiv: "http-equiv",
|
|
371
|
-
imageSizes: "imagesizes",
|
|
372
|
-
imageSrcSet: "imagesrcset",
|
|
373
|
-
inputMode: "inputmode",
|
|
374
|
-
itemID: "itemid",
|
|
375
|
-
itemProp: "itemprop",
|
|
376
|
-
itemRef: "itemref",
|
|
377
|
-
itemScope: "itemscope",
|
|
378
|
-
itemType: "itemtype",
|
|
379
|
-
maxLength: "maxlength",
|
|
380
|
-
minLength: "minlength",
|
|
381
|
-
noModule: "nomodule",
|
|
382
|
-
noValidate: "novalidate",
|
|
383
|
-
playsInline: "playsinline",
|
|
384
|
-
readOnly: "readonly",
|
|
385
|
-
referrerPolicy: "referrerpolicy",
|
|
386
|
-
rowSpan: "rowspan",
|
|
387
|
-
spellCheck: "spellcheck",
|
|
388
|
-
srcDoc: "srcdoc",
|
|
389
|
-
srcLang: "srclang",
|
|
390
|
-
srcSet: "srcset",
|
|
391
|
-
tabIndex: "tabindex",
|
|
392
|
-
useMap: "usemap",
|
|
393
|
-
alignmentBaseline: "alignment-baseline",
|
|
394
|
-
baselineShift: "baseline-shift",
|
|
395
|
-
clipPath: "clip-path",
|
|
396
|
-
clipRule: "clip-rule",
|
|
397
|
-
colorInterpolation: "color-interpolation",
|
|
398
|
-
colorInterpolationFilters: "color-interpolation-filters",
|
|
399
|
-
colorProfile: "color-profile",
|
|
400
|
-
colorRendering: "color-rendering",
|
|
401
|
-
dominantBaseline: "dominant-baseline",
|
|
402
|
-
enableBackground: "enable-background",
|
|
403
|
-
fillOpacity: "fill-opacity",
|
|
404
|
-
fillRule: "fill-rule",
|
|
405
|
-
floodOpacity: "flood-opacity",
|
|
406
|
-
floodColor: "flood-color",
|
|
407
|
-
fontFamily: "font-family",
|
|
408
|
-
fontSize: "font-size",
|
|
409
|
-
fontSizeAdjust: "font-size-adjust",
|
|
410
|
-
fontStretch: "font-stretch",
|
|
411
|
-
fontStyle: "font-style",
|
|
412
|
-
fontVariant: "font-variant",
|
|
413
|
-
fontWeight: "font-weight",
|
|
414
|
-
glyphOrientationHorizontal: "glyph-orientation-horizontal",
|
|
415
|
-
glyphOrientationVertical: "glyph-orientation-vertical",
|
|
416
|
-
imageRendering: "image-rendering",
|
|
417
|
-
letterSpacing: "letter-spacing",
|
|
418
|
-
lightingColor: "lighting-color",
|
|
419
|
-
markerEnd: "marker-end",
|
|
420
|
-
markerMid: "marker-mid",
|
|
421
|
-
markerStart: "marker-start",
|
|
422
|
-
pointerEvents: "pointer-events",
|
|
423
|
-
popoverTarget: "popovertarget",
|
|
424
|
-
popoverTargetAction: "popovertargetaction",
|
|
425
|
-
shapeRendering: "shape-rendering",
|
|
426
|
-
stopColor: "stop-color",
|
|
427
|
-
stopOpacity: "stop-opacity",
|
|
428
|
-
strokeDasharray: "stroke-dasharray",
|
|
429
|
-
strokeDashoffset: "stroke-dashoffset",
|
|
430
|
-
strokeLinecap: "stroke-linecap",
|
|
431
|
-
strokeLinejoin: "stroke-linejoin",
|
|
432
|
-
strokeMiterlimit: "stroke-miterlimit",
|
|
433
|
-
strokeWidth: "stroke-width",
|
|
434
|
-
strokeOpacity: "stroke-opacity",
|
|
435
|
-
textAnchor: "text-anchor",
|
|
436
|
-
textDecoration: "text-decoration",
|
|
437
|
-
textRendering: "text-rendering",
|
|
438
|
-
unicodeBidi: "unicode-bidi",
|
|
439
|
-
wordSpacing: "word-spacing",
|
|
440
|
-
writingMode: "writing-mode",
|
|
441
|
-
xlinkActuate: "xlink:actuate",
|
|
442
|
-
xlinkArcrole: "xlink:arcrole",
|
|
443
|
-
xlinkHref: "xlink:href",
|
|
444
|
-
xlinkRole: "xlink:role",
|
|
445
|
-
xlinkShow: "xlink:show",
|
|
446
|
-
xlinkTitle: "xlink:title",
|
|
447
|
-
xlinkType: "xlink:type",
|
|
448
|
-
xmlBase: "xml:base",
|
|
449
|
-
xmlLang: "xml:lang",
|
|
450
|
-
xmlSpace: "xml:space",
|
|
451
|
-
dirName: "dirname"
|
|
452
|
-
};
|
|
453
|
-
|
|
454
|
-
// src/component-generator.ts
|
|
255
|
+
import {
|
|
256
|
+
getJsxPropName,
|
|
257
|
+
mapAttributeNames
|
|
258
|
+
} from "@webstudio-is/content-engine/jsx-attributes";
|
|
455
259
|
var generateAction = ({
|
|
456
260
|
scope,
|
|
457
261
|
prop,
|
|
@@ -575,17 +379,29 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
|
|
|
575
379
|
let collectionItemValue;
|
|
576
380
|
let collectionItemKeyValue;
|
|
577
381
|
let classNameValue;
|
|
578
|
-
const instanceProps = Array.from(
|
|
579
|
-
(prop) => prop.instanceId === instance.id
|
|
382
|
+
const instanceProps = Array.from(
|
|
383
|
+
Array.from(props.values()).filter((prop) => prop.instanceId === instance.id).reduce((uniqueProps, prop) => {
|
|
384
|
+
uniqueProps.set(prop.name, prop);
|
|
385
|
+
return uniqueProps;
|
|
386
|
+
}, /* @__PURE__ */ new Map()).values()
|
|
580
387
|
);
|
|
581
388
|
const instancePropNames = new Set(instanceProps.map((prop) => prop.name));
|
|
582
389
|
const projectedResourceProps = /* @__PURE__ */ new Map();
|
|
583
|
-
const
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
390
|
+
const componentPropNames = new Set(Object.keys(meta?.props ?? {}));
|
|
391
|
+
const acceptsHtmlAttributes = hasTags || instance.tag !== void 0 || instance.component === elementComponent;
|
|
392
|
+
const getGeneratedPropName = (instancePropName) => getJsxPropName({
|
|
393
|
+
instancePropName,
|
|
394
|
+
componentPropNames,
|
|
395
|
+
acceptsHtmlAttributes
|
|
396
|
+
});
|
|
397
|
+
const generatedPropNames = new Map(
|
|
398
|
+
mapAttributeNames({
|
|
399
|
+
attributes: instanceProps.filter(({ name }) => isAttributeNameSafe(name)),
|
|
400
|
+
direction: "instance-to-jsx",
|
|
401
|
+
componentPropNames,
|
|
402
|
+
acceptsHtmlAttributes
|
|
403
|
+
}).map(({ id, name }) => [id, name])
|
|
404
|
+
);
|
|
589
405
|
for (const prop of instanceProps) {
|
|
590
406
|
const propValue = generatePropValue({
|
|
591
407
|
scope,
|
|
@@ -607,7 +423,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
|
|
|
607
423
|
}
|
|
608
424
|
}
|
|
609
425
|
}
|
|
610
|
-
const name =
|
|
426
|
+
const name = generatedPropNames.get(prop.id) ?? prop.name;
|
|
611
427
|
if (prop.name === showAttribute) {
|
|
612
428
|
if (propValue === "true") {
|
|
613
429
|
continue;
|
|
@@ -630,7 +446,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
|
|
|
630
446
|
}
|
|
631
447
|
continue;
|
|
632
448
|
}
|
|
633
|
-
if (
|
|
449
|
+
if (name === "className" && propValue !== void 0) {
|
|
634
450
|
classNameValue = propValue;
|
|
635
451
|
continue;
|
|
636
452
|
}
|
|
@@ -682,7 +498,7 @@ ${name}={${JSON.stringify(value)}}`;
|
|
|
682
498
|
`;
|
|
683
499
|
generatedElement += `}
|
|
684
500
|
`;
|
|
685
|
-
} else if (instance.component === blockComponent) {
|
|
501
|
+
} else if (instance.component === blockComponent || instance.component === blockBodyComponent) {
|
|
686
502
|
generatedElement += children;
|
|
687
503
|
} else {
|
|
688
504
|
let componentVariable;
|
|
@@ -743,7 +559,9 @@ var generateJsxChildren = ({
|
|
|
743
559
|
usedDataSources,
|
|
744
560
|
indexesWithinAncestors,
|
|
745
561
|
classesMap,
|
|
746
|
-
excludePlaceholders
|
|
562
|
+
excludePlaceholders,
|
|
563
|
+
publishedContentBlocks,
|
|
564
|
+
contentBodyOverride
|
|
747
565
|
}) => {
|
|
748
566
|
let generatedChildren = "";
|
|
749
567
|
for (const child of children) {
|
|
@@ -773,6 +591,111 @@ var generateJsxChildren = ({
|
|
|
773
591
|
if (instance === void 0) {
|
|
774
592
|
continue;
|
|
775
593
|
}
|
|
594
|
+
const publishedContent = publishedContentBlocks?.get(instance.id);
|
|
595
|
+
let generatedInstanceChildren;
|
|
596
|
+
if (contentBodyOverride?.instanceId === instance.id) {
|
|
597
|
+
generatedInstanceChildren = generateJsxChildren({
|
|
598
|
+
classesMap,
|
|
599
|
+
scope,
|
|
600
|
+
metas,
|
|
601
|
+
tagsOverrides,
|
|
602
|
+
children: contentBodyOverride.children,
|
|
603
|
+
instances,
|
|
604
|
+
props,
|
|
605
|
+
resources,
|
|
606
|
+
dataSources,
|
|
607
|
+
usedDataSources,
|
|
608
|
+
indexesWithinAncestors,
|
|
609
|
+
excludePlaceholders,
|
|
610
|
+
publishedContentBlocks
|
|
611
|
+
});
|
|
612
|
+
} else if (publishedContent === void 0) {
|
|
613
|
+
generatedInstanceChildren = generateJsxChildren({
|
|
614
|
+
classesMap,
|
|
615
|
+
scope,
|
|
616
|
+
metas,
|
|
617
|
+
tagsOverrides,
|
|
618
|
+
children: instance.children,
|
|
619
|
+
instances,
|
|
620
|
+
props,
|
|
621
|
+
resources,
|
|
622
|
+
dataSources,
|
|
623
|
+
usedDataSources,
|
|
624
|
+
indexesWithinAncestors,
|
|
625
|
+
excludePlaceholders,
|
|
626
|
+
publishedContentBlocks,
|
|
627
|
+
contentBodyOverride
|
|
628
|
+
});
|
|
629
|
+
} else {
|
|
630
|
+
const sourceExpression = publishedContent.sourceExpression === void 0 ? void 0 : generateExpression({
|
|
631
|
+
expression: publishedContent.sourceExpression,
|
|
632
|
+
dataSources,
|
|
633
|
+
usedDataSources,
|
|
634
|
+
scope
|
|
635
|
+
});
|
|
636
|
+
const documentParameter = Array.from(props.values()).find(
|
|
637
|
+
(prop) => prop.instanceId === instance.id && prop.name === contentBlockDocumentProp && prop.type === "parameter"
|
|
638
|
+
);
|
|
639
|
+
const documentDataSource = documentParameter === void 0 ? void 0 : dataSources.get(documentParameter.value);
|
|
640
|
+
if (documentDataSource !== void 0) {
|
|
641
|
+
usedDataSources.set(documentDataSource.id, documentDataSource);
|
|
642
|
+
}
|
|
643
|
+
const documentName = documentDataSource === void 0 ? void 0 : scope.getName(documentDataSource.id, documentDataSource.name);
|
|
644
|
+
const generatedCandidates = publishedContent.candidates.map(
|
|
645
|
+
({
|
|
646
|
+
assetId,
|
|
647
|
+
dependencyRevision,
|
|
648
|
+
children: candidateChildren,
|
|
649
|
+
frontmatter
|
|
650
|
+
}) => {
|
|
651
|
+
const generated = generateJsxChildren({
|
|
652
|
+
classesMap,
|
|
653
|
+
scope,
|
|
654
|
+
metas,
|
|
655
|
+
tagsOverrides,
|
|
656
|
+
children: publishedContent.bodyInstanceId === void 0 ? candidateChildren : instance.children,
|
|
657
|
+
instances,
|
|
658
|
+
props,
|
|
659
|
+
resources,
|
|
660
|
+
dataSources,
|
|
661
|
+
usedDataSources,
|
|
662
|
+
indexesWithinAncestors,
|
|
663
|
+
excludePlaceholders,
|
|
664
|
+
publishedContentBlocks,
|
|
665
|
+
contentBodyOverride: publishedContent.bodyInstanceId === void 0 ? void 0 : {
|
|
666
|
+
instanceId: publishedContent.bodyInstanceId,
|
|
667
|
+
children: candidateChildren
|
|
668
|
+
}
|
|
669
|
+
});
|
|
670
|
+
const withDocument = documentName === void 0 ? generated : `{((${documentName}) => <Fragment>
|
|
671
|
+
${generated}</Fragment>)(${JSON.stringify({ frontmatter })})}
|
|
672
|
+
`;
|
|
673
|
+
return {
|
|
674
|
+
assetId,
|
|
675
|
+
dependencyRevision,
|
|
676
|
+
generated: withDocument
|
|
677
|
+
};
|
|
678
|
+
}
|
|
679
|
+
);
|
|
680
|
+
if (sourceExpression === void 0) {
|
|
681
|
+
generatedInstanceChildren = generatedCandidates.map(
|
|
682
|
+
({ dependencyRevision, generated }) => `<Fragment key=${JSON.stringify(dependencyRevision)}>
|
|
683
|
+
${generated}</Fragment>
|
|
684
|
+
`
|
|
685
|
+
).join("");
|
|
686
|
+
} else {
|
|
687
|
+
const sourceName = scope.getName(
|
|
688
|
+
`${instance.id}-published-source`,
|
|
689
|
+
"contentSource"
|
|
690
|
+
);
|
|
691
|
+
const branches = generatedCandidates.map(
|
|
692
|
+
({ assetId, dependencyRevision, generated }) => `${sourceName} === ${JSON.stringify(assetId)} ? <Fragment key=${JSON.stringify(dependencyRevision)}>
|
|
693
|
+
${generated}</Fragment>`
|
|
694
|
+
).join(" : ");
|
|
695
|
+
generatedInstanceChildren = `{((${sourceName}) => ${branches.length === 0 ? "null" : `${branches} : null`})(${sourceExpression})}
|
|
696
|
+
`;
|
|
697
|
+
}
|
|
698
|
+
}
|
|
776
699
|
generatedChildren += generateJsxElement({
|
|
777
700
|
context: "jsx",
|
|
778
701
|
scope,
|
|
@@ -785,20 +708,7 @@ var generateJsxChildren = ({
|
|
|
785
708
|
usedDataSources,
|
|
786
709
|
indexesWithinAncestors,
|
|
787
710
|
classesMap,
|
|
788
|
-
children:
|
|
789
|
-
classesMap,
|
|
790
|
-
scope,
|
|
791
|
-
metas,
|
|
792
|
-
tagsOverrides,
|
|
793
|
-
children: instance.children,
|
|
794
|
-
instances,
|
|
795
|
-
props,
|
|
796
|
-
resources,
|
|
797
|
-
dataSources,
|
|
798
|
-
usedDataSources,
|
|
799
|
-
indexesWithinAncestors,
|
|
800
|
-
excludePlaceholders
|
|
801
|
-
})
|
|
711
|
+
children: generatedInstanceChildren
|
|
802
712
|
});
|
|
803
713
|
continue;
|
|
804
714
|
}
|
|
@@ -817,7 +727,8 @@ var generateWebstudioComponent = ({
|
|
|
817
727
|
dataSources,
|
|
818
728
|
metas,
|
|
819
729
|
tagsOverrides,
|
|
820
|
-
classesMap
|
|
730
|
+
classesMap,
|
|
731
|
+
publishedContentBlocks
|
|
821
732
|
}) => {
|
|
822
733
|
const instance = instances.get(rootInstanceId);
|
|
823
734
|
const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
|
|
@@ -849,7 +760,8 @@ var generateWebstudioComponent = ({
|
|
|
849
760
|
dataSources,
|
|
850
761
|
usedDataSources,
|
|
851
762
|
indexesWithinAncestors,
|
|
852
|
-
classesMap
|
|
763
|
+
classesMap,
|
|
764
|
+
publishedContentBlocks
|
|
853
765
|
})
|
|
854
766
|
});
|
|
855
767
|
}
|
|
@@ -907,8 +819,17 @@ var generateWebstudioComponent = ({
|
|
|
907
819
|
`;
|
|
908
820
|
return generatedComponent;
|
|
909
821
|
};
|
|
822
|
+
|
|
823
|
+
// src/standard-attributes.ts
|
|
824
|
+
import {
|
|
825
|
+
getInstancePropName,
|
|
826
|
+
getJsxPropName as getJsxPropName2,
|
|
827
|
+
reactPropsToStandardAttributes,
|
|
828
|
+
standardAttributesToReactProps
|
|
829
|
+
} from "@webstudio-is/content-engine/jsx-attributes";
|
|
910
830
|
export {
|
|
911
831
|
componentAttribute,
|
|
832
|
+
findTreeInstanceIdsExcludingStaticHidden,
|
|
912
833
|
generateCollectionIterationCode,
|
|
913
834
|
generateJsxChildren,
|
|
914
835
|
generateJsxElement,
|
|
@@ -916,6 +837,8 @@ export {
|
|
|
916
837
|
generateRemixRoute,
|
|
917
838
|
generateWebstudioComponent,
|
|
918
839
|
getCollectionEntries,
|
|
840
|
+
getInstancePropName,
|
|
841
|
+
getJsxPropName2 as getJsxPropName,
|
|
919
842
|
idAttribute,
|
|
920
843
|
inflatedAttribute,
|
|
921
844
|
isAttributeNameSafe,
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// src/standard-attributes.ts
|
|
2
|
+
import {
|
|
3
|
+
getInstancePropName,
|
|
4
|
+
getJsxPropName,
|
|
5
|
+
reactPropsToStandardAttributes,
|
|
6
|
+
standardAttributesToReactProps
|
|
7
|
+
} from "@webstudio-is/content-engine/jsx-attributes";
|
|
8
|
+
export {
|
|
9
|
+
getInstancePropName,
|
|
10
|
+
getJsxPropName,
|
|
11
|
+
reactPropsToStandardAttributes,
|
|
12
|
+
standardAttributesToReactProps
|
|
13
|
+
};
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
import type { Instances, Instance, Props, Scope, DataSources, Prop, WsComponentMeta, IndexesWithinAncestors, Resources } from "@webstudio-is/sdk";
|
|
2
|
+
export type PublishedContentBlock = Readonly<{
|
|
3
|
+
bodyInstanceId?: Instance["id"];
|
|
4
|
+
sourceExpression?: string;
|
|
5
|
+
candidates: readonly Readonly<{
|
|
6
|
+
assetId: string;
|
|
7
|
+
dependencyRevision: string;
|
|
8
|
+
children: Instance["children"];
|
|
9
|
+
frontmatter: Readonly<Record<string, unknown>>;
|
|
10
|
+
resourceIds?: readonly string[];
|
|
11
|
+
}>[];
|
|
12
|
+
}>;
|
|
2
13
|
export declare const generateJsxElement: ({ context, scope, metas, tagsOverrides, instance, props, resources, dataSources, usedDataSources, indexesWithinAncestors, children, classesMap, }: {
|
|
3
14
|
context?: "expression" | "jsx";
|
|
4
15
|
scope: Scope;
|
|
@@ -16,7 +27,7 @@ export declare const generateJsxElement: ({ context, scope, metas, tagsOverrides
|
|
|
16
27
|
children: string;
|
|
17
28
|
classesMap?: Map<string, Array<string>>;
|
|
18
29
|
}) => string;
|
|
19
|
-
export declare const generateJsxChildren: ({ scope, metas, tagsOverrides, children, instances, props, resources, dataSources, usedDataSources, indexesWithinAncestors, classesMap, excludePlaceholders, }: {
|
|
30
|
+
export declare const generateJsxChildren: ({ scope, metas, tagsOverrides, children, instances, props, resources, dataSources, usedDataSources, indexesWithinAncestors, classesMap, excludePlaceholders, publishedContentBlocks, contentBodyOverride, }: {
|
|
20
31
|
scope: Scope;
|
|
21
32
|
metas: Map<Instance["component"], WsComponentMeta>;
|
|
22
33
|
tagsOverrides?: Record<string, string>;
|
|
@@ -29,8 +40,13 @@ export declare const generateJsxChildren: ({ scope, metas, tagsOverrides, childr
|
|
|
29
40
|
indexesWithinAncestors: IndexesWithinAncestors;
|
|
30
41
|
classesMap?: Map<string, Array<string>>;
|
|
31
42
|
excludePlaceholders?: boolean;
|
|
43
|
+
publishedContentBlocks?: ReadonlyMap<Instance["id"], PublishedContentBlock>;
|
|
44
|
+
contentBodyOverride?: Readonly<{
|
|
45
|
+
instanceId: Instance["id"];
|
|
46
|
+
children: Instance["children"];
|
|
47
|
+
}>;
|
|
32
48
|
}) => string;
|
|
33
|
-
export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, resources, dataSources, metas, tagsOverrides, classesMap, }: {
|
|
49
|
+
export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId, parameters, instances, props, resources, dataSources, metas, tagsOverrides, classesMap, publishedContentBlocks, }: {
|
|
34
50
|
scope: Scope;
|
|
35
51
|
name: string;
|
|
36
52
|
rootInstanceId: Instance["id"];
|
|
@@ -42,6 +58,7 @@ export declare const generateWebstudioComponent: ({ scope, name, rootInstanceId,
|
|
|
42
58
|
resources?: Resources;
|
|
43
59
|
dataSources: DataSources;
|
|
44
60
|
classesMap: Map<string, Array<string>>;
|
|
61
|
+
publishedContentBlocks?: ReadonlyMap<Instance["id"], PublishedContentBlock>;
|
|
45
62
|
metas: Map<Instance["component"], WsComponentMeta>;
|
|
46
63
|
/**
|
|
47
64
|
* Record<tag, componentDescriptor>
|
package/lib/types/index.d.ts
CHANGED
|
@@ -4,5 +4,5 @@ export * from "./props";
|
|
|
4
4
|
export * from "./collection-utils";
|
|
5
5
|
export type * from "./context";
|
|
6
6
|
export type * from "./hook";
|
|
7
|
-
export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, } from "./component-generator";
|
|
8
|
-
export * from "./
|
|
7
|
+
export { generateWebstudioComponent, generateJsxElement, generateJsxChildren, type PublishedContentBlock, } from "./component-generator";
|
|
8
|
+
export * from "./standard-attributes";
|
package/lib/types/props.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type Prop, type Assets, type Pages, type ImageAsset } from "@webstudio-is/sdk";
|
|
1
|
+
import { type Prop, type Instances, type Props, type Assets, type Pages, type ImageAsset } from "@webstudio-is/sdk";
|
|
2
2
|
export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingImageAssets, pages, source, }: {
|
|
3
3
|
props: Prop[];
|
|
4
4
|
assetBaseUrl: string;
|
|
@@ -7,6 +7,14 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
|
|
|
7
7
|
pages: Pages;
|
|
8
8
|
source: "canvas" | "prebuild";
|
|
9
9
|
}) => ({
|
|
10
|
+
type: "expression";
|
|
11
|
+
value: string;
|
|
12
|
+
mode?: "read" | "readwrite" | undefined;
|
|
13
|
+
id: string;
|
|
14
|
+
instanceId: string;
|
|
15
|
+
name: string;
|
|
16
|
+
required?: boolean | undefined;
|
|
17
|
+
} | {
|
|
10
18
|
id: string;
|
|
11
19
|
instanceId: string;
|
|
12
20
|
name: string;
|
|
@@ -72,13 +80,6 @@ export declare const normalizeProps: ({ props, assetBaseUrl, assets, uploadingIm
|
|
|
72
80
|
required?: boolean | undefined;
|
|
73
81
|
type: "resource";
|
|
74
82
|
value: string;
|
|
75
|
-
} | {
|
|
76
|
-
id: string;
|
|
77
|
-
instanceId: string;
|
|
78
|
-
name: string;
|
|
79
|
-
required?: boolean | undefined;
|
|
80
|
-
type: "expression";
|
|
81
|
-
value: string;
|
|
82
83
|
} | {
|
|
83
84
|
id: string;
|
|
84
85
|
instanceId: string;
|
|
@@ -1450,4 +1451,9 @@ export declare const componentAttribute: "data-ws-component";
|
|
|
1450
1451
|
export declare const showAttribute: "data-ws-show";
|
|
1451
1452
|
export declare const inflatedAttribute: "data-ws-collapsed";
|
|
1452
1453
|
export declare const textContentAttribute: "data-ws-text-content";
|
|
1454
|
+
export declare const findTreeInstanceIdsExcludingStaticHidden: ({ instances, props, rootInstanceId, }: {
|
|
1455
|
+
instances: Instances;
|
|
1456
|
+
props: Props;
|
|
1457
|
+
rootInstanceId: string;
|
|
1458
|
+
}) => Set<string>;
|
|
1453
1459
|
export declare const isAttributeNameSafe: (attributeName: string) => boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { getInstancePropName, getJsxPropName, reactPropsToStandardAttributes, standardAttributesToReactProps, } from "@webstudio-is/content-engine/jsx-attributes";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webstudio-is/react-sdk",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.295.0",
|
|
4
4
|
"description": "Webstudio JavaScript / TypeScript API",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
"typescript": "7.0.2",
|
|
16
16
|
"vitest": "^3.1.2",
|
|
17
17
|
"zod": "^4.4.3",
|
|
18
|
-
"@webstudio-is/
|
|
19
|
-
"@webstudio-is/
|
|
18
|
+
"@webstudio-is/tsconfig": "1.0.7",
|
|
19
|
+
"@webstudio-is/template": "0.295.0"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
22
|
"react": "18.3.0-canary-14898b6a9-20240318",
|
|
@@ -26,12 +26,13 @@
|
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"change-case": "^5.4.4",
|
|
28
28
|
"nanoid": "^5.1.5",
|
|
29
|
-
"@webstudio-is/
|
|
30
|
-
"@webstudio-is/
|
|
31
|
-
"@webstudio-is/
|
|
32
|
-
"@webstudio-is/
|
|
33
|
-
"@webstudio-is/icons": "^0.
|
|
34
|
-
"@webstudio-is/
|
|
29
|
+
"@webstudio-is/content-engine": "0.295.0",
|
|
30
|
+
"@webstudio-is/css-engine": "0.295.0",
|
|
31
|
+
"@webstudio-is/fonts": "0.295.0",
|
|
32
|
+
"@webstudio-is/expression": "0.295.0",
|
|
33
|
+
"@webstudio-is/icons": "^0.295.0",
|
|
34
|
+
"@webstudio-is/image": "0.295.0",
|
|
35
|
+
"@webstudio-is/sdk": "0.295.0"
|
|
35
36
|
},
|
|
36
37
|
"exports": {
|
|
37
38
|
".": {
|
|
@@ -45,9 +46,9 @@
|
|
|
45
46
|
"import": "./lib/runtime.js"
|
|
46
47
|
},
|
|
47
48
|
"./standard-attributes": {
|
|
48
|
-
"webstudio": "./src/
|
|
49
|
-
"types": "./lib/types/
|
|
50
|
-
"import": "./lib/
|
|
49
|
+
"webstudio": "./src/standard-attributes.ts",
|
|
50
|
+
"types": "./lib/types/standard-attributes.d.ts",
|
|
51
|
+
"import": "./lib/standard-attributes.js"
|
|
51
52
|
},
|
|
52
53
|
"./placeholder": {
|
|
53
54
|
"types": "./placeholder.d.ts"
|
|
@@ -62,7 +63,7 @@
|
|
|
62
63
|
"private": false,
|
|
63
64
|
"sideEffects": false,
|
|
64
65
|
"scripts": {
|
|
65
|
-
"build": "rm -rf lib && esbuild src/index.ts src/runtime.ts --outdir=lib --bundle --format=esm --packages=external",
|
|
66
|
+
"build": "rm -rf lib && esbuild src/index.ts src/runtime.ts src/standard-attributes.ts --outdir=lib --bundle --format=esm --packages=external",
|
|
66
67
|
"dts": "tsc --project tsconfig.dts.json",
|
|
67
68
|
"typecheck": "tsc --noEmit",
|
|
68
69
|
"test": "vitest run"
|
package/placeholder.d.ts
CHANGED
|
@@ -37,9 +37,13 @@ declare module "__CLIENT__" {
|
|
|
37
37
|
declare module "__SERVER__" {
|
|
38
38
|
import type { PageMeta, System, ResourceRequest } from "@webstudio-is/sdk";
|
|
39
39
|
|
|
40
|
-
export const getResources: (props: {
|
|
40
|
+
export const getResources: (props: {
|
|
41
|
+
system: System;
|
|
42
|
+
resources?: Record<string, any>;
|
|
43
|
+
}) => {
|
|
41
44
|
data: Map<string, ResourceRequest>;
|
|
42
45
|
action: Map<string, ResourceRequest>;
|
|
46
|
+
contentData?: Map<string, ResourceRequest>;
|
|
43
47
|
};
|
|
44
48
|
|
|
45
49
|
export const getPageMeta: (props: {
|