@webstudio-is/react-sdk 0.293.0 → 0.294.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 +167 -247
- 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 +13 -12
- 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,
|
|
@@ -580,12 +384,21 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
|
|
|
580
384
|
);
|
|
581
385
|
const instancePropNames = new Set(instanceProps.map((prop) => prop.name));
|
|
582
386
|
const projectedResourceProps = /* @__PURE__ */ new Map();
|
|
583
|
-
const
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
387
|
+
const componentPropNames = new Set(Object.keys(meta?.props ?? {}));
|
|
388
|
+
const acceptsHtmlAttributes = hasTags || instance.tag !== void 0 || instance.component === elementComponent;
|
|
389
|
+
const getGeneratedPropName = (instancePropName) => getJsxPropName({
|
|
390
|
+
instancePropName,
|
|
391
|
+
componentPropNames,
|
|
392
|
+
acceptsHtmlAttributes
|
|
393
|
+
});
|
|
394
|
+
const generatedPropNames = new Map(
|
|
395
|
+
mapAttributeNames({
|
|
396
|
+
attributes: instanceProps.filter(({ name }) => isAttributeNameSafe(name)),
|
|
397
|
+
direction: "instance-to-jsx",
|
|
398
|
+
componentPropNames,
|
|
399
|
+
acceptsHtmlAttributes
|
|
400
|
+
}).map(({ id, name }) => [id, name])
|
|
401
|
+
);
|
|
589
402
|
for (const prop of instanceProps) {
|
|
590
403
|
const propValue = generatePropValue({
|
|
591
404
|
scope,
|
|
@@ -607,7 +420,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
|
|
|
607
420
|
}
|
|
608
421
|
}
|
|
609
422
|
}
|
|
610
|
-
const name =
|
|
423
|
+
const name = generatedPropNames.get(prop.id) ?? prop.name;
|
|
611
424
|
if (prop.name === showAttribute) {
|
|
612
425
|
if (propValue === "true") {
|
|
613
426
|
continue;
|
|
@@ -630,7 +443,7 @@ ${tagProperty}=${JSON.stringify(instance.tag)}`;
|
|
|
630
443
|
}
|
|
631
444
|
continue;
|
|
632
445
|
}
|
|
633
|
-
if (
|
|
446
|
+
if (name === "className" && propValue !== void 0) {
|
|
634
447
|
classNameValue = propValue;
|
|
635
448
|
continue;
|
|
636
449
|
}
|
|
@@ -682,7 +495,7 @@ ${name}={${JSON.stringify(value)}}`;
|
|
|
682
495
|
`;
|
|
683
496
|
generatedElement += `}
|
|
684
497
|
`;
|
|
685
|
-
} else if (instance.component === blockComponent) {
|
|
498
|
+
} else if (instance.component === blockComponent || instance.component === blockBodyComponent) {
|
|
686
499
|
generatedElement += children;
|
|
687
500
|
} else {
|
|
688
501
|
let componentVariable;
|
|
@@ -743,7 +556,9 @@ var generateJsxChildren = ({
|
|
|
743
556
|
usedDataSources,
|
|
744
557
|
indexesWithinAncestors,
|
|
745
558
|
classesMap,
|
|
746
|
-
excludePlaceholders
|
|
559
|
+
excludePlaceholders,
|
|
560
|
+
publishedContentBlocks,
|
|
561
|
+
contentBodyOverride
|
|
747
562
|
}) => {
|
|
748
563
|
let generatedChildren = "";
|
|
749
564
|
for (const child of children) {
|
|
@@ -773,6 +588,111 @@ var generateJsxChildren = ({
|
|
|
773
588
|
if (instance === void 0) {
|
|
774
589
|
continue;
|
|
775
590
|
}
|
|
591
|
+
const publishedContent = publishedContentBlocks?.get(instance.id);
|
|
592
|
+
let generatedInstanceChildren;
|
|
593
|
+
if (contentBodyOverride?.instanceId === instance.id) {
|
|
594
|
+
generatedInstanceChildren = generateJsxChildren({
|
|
595
|
+
classesMap,
|
|
596
|
+
scope,
|
|
597
|
+
metas,
|
|
598
|
+
tagsOverrides,
|
|
599
|
+
children: contentBodyOverride.children,
|
|
600
|
+
instances,
|
|
601
|
+
props,
|
|
602
|
+
resources,
|
|
603
|
+
dataSources,
|
|
604
|
+
usedDataSources,
|
|
605
|
+
indexesWithinAncestors,
|
|
606
|
+
excludePlaceholders,
|
|
607
|
+
publishedContentBlocks
|
|
608
|
+
});
|
|
609
|
+
} else if (publishedContent === void 0) {
|
|
610
|
+
generatedInstanceChildren = generateJsxChildren({
|
|
611
|
+
classesMap,
|
|
612
|
+
scope,
|
|
613
|
+
metas,
|
|
614
|
+
tagsOverrides,
|
|
615
|
+
children: instance.children,
|
|
616
|
+
instances,
|
|
617
|
+
props,
|
|
618
|
+
resources,
|
|
619
|
+
dataSources,
|
|
620
|
+
usedDataSources,
|
|
621
|
+
indexesWithinAncestors,
|
|
622
|
+
excludePlaceholders,
|
|
623
|
+
publishedContentBlocks,
|
|
624
|
+
contentBodyOverride
|
|
625
|
+
});
|
|
626
|
+
} else {
|
|
627
|
+
const sourceExpression = publishedContent.sourceExpression === void 0 ? void 0 : generateExpression({
|
|
628
|
+
expression: publishedContent.sourceExpression,
|
|
629
|
+
dataSources,
|
|
630
|
+
usedDataSources,
|
|
631
|
+
scope
|
|
632
|
+
});
|
|
633
|
+
const documentParameter = Array.from(props.values()).find(
|
|
634
|
+
(prop) => prop.instanceId === instance.id && prop.name === contentBlockDocumentProp && prop.type === "parameter"
|
|
635
|
+
);
|
|
636
|
+
const documentDataSource = documentParameter === void 0 ? void 0 : dataSources.get(documentParameter.value);
|
|
637
|
+
if (documentDataSource !== void 0) {
|
|
638
|
+
usedDataSources.set(documentDataSource.id, documentDataSource);
|
|
639
|
+
}
|
|
640
|
+
const documentName = documentDataSource === void 0 ? void 0 : scope.getName(documentDataSource.id, documentDataSource.name);
|
|
641
|
+
const generatedCandidates = publishedContent.candidates.map(
|
|
642
|
+
({
|
|
643
|
+
assetId,
|
|
644
|
+
dependencyRevision,
|
|
645
|
+
children: candidateChildren,
|
|
646
|
+
frontmatter
|
|
647
|
+
}) => {
|
|
648
|
+
const generated = generateJsxChildren({
|
|
649
|
+
classesMap,
|
|
650
|
+
scope,
|
|
651
|
+
metas,
|
|
652
|
+
tagsOverrides,
|
|
653
|
+
children: publishedContent.bodyInstanceId === void 0 ? candidateChildren : instance.children,
|
|
654
|
+
instances,
|
|
655
|
+
props,
|
|
656
|
+
resources,
|
|
657
|
+
dataSources,
|
|
658
|
+
usedDataSources,
|
|
659
|
+
indexesWithinAncestors,
|
|
660
|
+
excludePlaceholders,
|
|
661
|
+
publishedContentBlocks,
|
|
662
|
+
contentBodyOverride: publishedContent.bodyInstanceId === void 0 ? void 0 : {
|
|
663
|
+
instanceId: publishedContent.bodyInstanceId,
|
|
664
|
+
children: candidateChildren
|
|
665
|
+
}
|
|
666
|
+
});
|
|
667
|
+
const withDocument = documentName === void 0 ? generated : `{((${documentName}) => <Fragment>
|
|
668
|
+
${generated}</Fragment>)(${JSON.stringify({ frontmatter })})}
|
|
669
|
+
`;
|
|
670
|
+
return {
|
|
671
|
+
assetId,
|
|
672
|
+
dependencyRevision,
|
|
673
|
+
generated: withDocument
|
|
674
|
+
};
|
|
675
|
+
}
|
|
676
|
+
);
|
|
677
|
+
if (sourceExpression === void 0) {
|
|
678
|
+
generatedInstanceChildren = generatedCandidates.map(
|
|
679
|
+
({ dependencyRevision, generated }) => `<Fragment key=${JSON.stringify(dependencyRevision)}>
|
|
680
|
+
${generated}</Fragment>
|
|
681
|
+
`
|
|
682
|
+
).join("");
|
|
683
|
+
} else {
|
|
684
|
+
const sourceName = scope.getName(
|
|
685
|
+
`${instance.id}-published-source`,
|
|
686
|
+
"contentSource"
|
|
687
|
+
);
|
|
688
|
+
const branches = generatedCandidates.map(
|
|
689
|
+
({ assetId, dependencyRevision, generated }) => `${sourceName} === ${JSON.stringify(assetId)} ? <Fragment key=${JSON.stringify(dependencyRevision)}>
|
|
690
|
+
${generated}</Fragment>`
|
|
691
|
+
).join(" : ");
|
|
692
|
+
generatedInstanceChildren = `{((${sourceName}) => ${branches.length === 0 ? "null" : `${branches} : null`})(${sourceExpression})}
|
|
693
|
+
`;
|
|
694
|
+
}
|
|
695
|
+
}
|
|
776
696
|
generatedChildren += generateJsxElement({
|
|
777
697
|
context: "jsx",
|
|
778
698
|
scope,
|
|
@@ -785,20 +705,7 @@ var generateJsxChildren = ({
|
|
|
785
705
|
usedDataSources,
|
|
786
706
|
indexesWithinAncestors,
|
|
787
707
|
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
|
-
})
|
|
708
|
+
children: generatedInstanceChildren
|
|
802
709
|
});
|
|
803
710
|
continue;
|
|
804
711
|
}
|
|
@@ -817,7 +724,8 @@ var generateWebstudioComponent = ({
|
|
|
817
724
|
dataSources,
|
|
818
725
|
metas,
|
|
819
726
|
tagsOverrides,
|
|
820
|
-
classesMap
|
|
727
|
+
classesMap,
|
|
728
|
+
publishedContentBlocks
|
|
821
729
|
}) => {
|
|
822
730
|
const instance = instances.get(rootInstanceId);
|
|
823
731
|
const indexesWithinAncestors = getIndexesWithinAncestors(metas, instances, [
|
|
@@ -849,7 +757,8 @@ var generateWebstudioComponent = ({
|
|
|
849
757
|
dataSources,
|
|
850
758
|
usedDataSources,
|
|
851
759
|
indexesWithinAncestors,
|
|
852
|
-
classesMap
|
|
760
|
+
classesMap,
|
|
761
|
+
publishedContentBlocks
|
|
853
762
|
})
|
|
854
763
|
});
|
|
855
764
|
}
|
|
@@ -907,8 +816,17 @@ var generateWebstudioComponent = ({
|
|
|
907
816
|
`;
|
|
908
817
|
return generatedComponent;
|
|
909
818
|
};
|
|
819
|
+
|
|
820
|
+
// src/standard-attributes.ts
|
|
821
|
+
import {
|
|
822
|
+
getInstancePropName,
|
|
823
|
+
getJsxPropName as getJsxPropName2,
|
|
824
|
+
reactPropsToStandardAttributes,
|
|
825
|
+
standardAttributesToReactProps
|
|
826
|
+
} from "@webstudio-is/content-engine/jsx-attributes";
|
|
910
827
|
export {
|
|
911
828
|
componentAttribute,
|
|
829
|
+
findTreeInstanceIdsExcludingStaticHidden,
|
|
912
830
|
generateCollectionIterationCode,
|
|
913
831
|
generateJsxChildren,
|
|
914
832
|
generateJsxElement,
|
|
@@ -916,6 +834,8 @@ export {
|
|
|
916
834
|
generateRemixRoute,
|
|
917
835
|
generateWebstudioComponent,
|
|
918
836
|
getCollectionEntries,
|
|
837
|
+
getInstancePropName,
|
|
838
|
+
getJsxPropName2 as getJsxPropName,
|
|
919
839
|
idAttribute,
|
|
920
840
|
inflatedAttribute,
|
|
921
841
|
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.294.0",
|
|
4
4
|
"description": "Webstudio JavaScript / TypeScript API",
|
|
5
5
|
"author": "Webstudio <github@webstudio.is>",
|
|
6
6
|
"homepage": "https://webstudio.is",
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
"typescript": "7.0.2",
|
|
16
16
|
"vitest": "^3.1.2",
|
|
17
17
|
"zod": "^4.4.3",
|
|
18
|
-
"@webstudio-is/template": "0.
|
|
18
|
+
"@webstudio-is/template": "0.294.0",
|
|
19
19
|
"@webstudio-is/tsconfig": "1.0.7"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
@@ -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.294.0",
|
|
30
|
+
"@webstudio-is/css-engine": "0.294.0",
|
|
31
|
+
"@webstudio-is/fonts": "0.294.0",
|
|
32
|
+
"@webstudio-is/expression": "0.294.0",
|
|
33
|
+
"@webstudio-is/icons": "^0.294.0",
|
|
34
|
+
"@webstudio-is/sdk": "0.294.0",
|
|
35
|
+
"@webstudio-is/image": "0.294.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: {
|