@builder.io/sdk-solid 1.0.31 → 1.0.33
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/dist/index.d.ts +1 -0
- package/lib/browser/dev.js +52 -39
- package/lib/browser/dev.jsx +37 -20
- package/lib/browser/index.js +52 -39
- package/lib/browser/index.jsx +37 -20
- package/lib/edge/dev.js +56 -50
- package/lib/edge/dev.jsx +41 -31
- package/lib/edge/index.js +56 -50
- package/lib/edge/index.jsx +41 -31
- package/lib/node/dev.js +52 -39
- package/lib/node/dev.jsx +37 -20
- package/lib/node/index.js +52 -39
- package/lib/node/index.jsx +37 -20
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
package/lib/browser/dev.js
CHANGED
|
@@ -122,11 +122,7 @@ var components_context_default = createContext({ registeredComponents: {} });
|
|
|
122
122
|
function getBlockComponentOptions(block) {
|
|
123
123
|
return {
|
|
124
124
|
...block.component?.options,
|
|
125
|
-
...block.options
|
|
126
|
-
/**
|
|
127
|
-
* Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
|
|
128
|
-
*/
|
|
129
|
-
builderBlock: block
|
|
125
|
+
...block.options
|
|
130
126
|
};
|
|
131
127
|
}
|
|
132
128
|
|
|
@@ -789,11 +785,25 @@ var getRepeatItemData = ({
|
|
|
789
785
|
}));
|
|
790
786
|
return repeatArray;
|
|
791
787
|
};
|
|
792
|
-
var
|
|
793
|
-
return block && (block.isRSC || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name))
|
|
788
|
+
var provideLinkComponent = (block, linkComponent) => {
|
|
789
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name)) ? {
|
|
790
|
+
builderLinkComponent: linkComponent
|
|
791
|
+
} : {};
|
|
792
|
+
};
|
|
793
|
+
var provideRegisteredComponents = (block, registeredComponents) => {
|
|
794
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name)) ? {
|
|
795
|
+
builderComponents: registeredComponents
|
|
796
|
+
} : {};
|
|
797
|
+
};
|
|
798
|
+
var provideBuilderBlock = (block, builderBlock) => {
|
|
799
|
+
return block && (block.isRSC && TARGET === "rsc" || TARGET === "reactNative" && block.name === "Text" || ["Builder:Accordion", "Columns", "Form:Form", "Builder: Tabs", "Symbol", "Image", "Video"].includes(block.name)) ? {
|
|
800
|
+
builderBlock
|
|
801
|
+
} : {};
|
|
794
802
|
};
|
|
795
|
-
var
|
|
796
|
-
return block && (block.isRSC || ["
|
|
803
|
+
var provideBuilderContext = (block, context) => {
|
|
804
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Builder:Accordion", "Columns", "Form:Form", "Builder: Tabs", "Symbol", "Slot"].includes(block.name)) ? {
|
|
805
|
+
builderContext: context
|
|
806
|
+
} : {};
|
|
797
807
|
};
|
|
798
808
|
|
|
799
809
|
// src/constants/device-sizes.ts
|
|
@@ -1242,13 +1252,10 @@ function Block(props) {
|
|
|
1242
1252
|
componentRef: blockComponent()?.component,
|
|
1243
1253
|
componentOptions: {
|
|
1244
1254
|
...getBlockComponentOptions(processedBlock()),
|
|
1245
|
-
|
|
1246
|
-
...
|
|
1247
|
-
|
|
1248
|
-
|
|
1249
|
-
...shouldPassRegisteredComponents(blockComponent()) ? {
|
|
1250
|
-
builderComponents: props.registeredComponents
|
|
1251
|
-
} : {}
|
|
1255
|
+
...provideBuilderBlock(blockComponent(), processedBlock()),
|
|
1256
|
+
...provideBuilderContext(blockComponent(), props.context),
|
|
1257
|
+
...provideLinkComponent(blockComponent(), props.linkComponent),
|
|
1258
|
+
...provideRegisteredComponents(blockComponent(), props.registeredComponents)
|
|
1252
1259
|
},
|
|
1253
1260
|
context: props.context,
|
|
1254
1261
|
linkComponent: props.linkComponent,
|
|
@@ -1356,9 +1363,6 @@ function Block(props) {
|
|
|
1356
1363
|
get context() {
|
|
1357
1364
|
return props.context;
|
|
1358
1365
|
},
|
|
1359
|
-
get linkComponent() {
|
|
1360
|
-
return props.linkComponent;
|
|
1361
|
-
},
|
|
1362
1366
|
get children() {
|
|
1363
1367
|
return [createComponent(component_ref_default, {
|
|
1364
1368
|
get componentRef() {
|
|
@@ -1784,7 +1788,7 @@ function getSrcSet(url) {
|
|
|
1784
1788
|
|
|
1785
1789
|
// src/blocks/image/image.tsx
|
|
1786
1790
|
var _tmpl$4 = /* @__PURE__ */ template(`<source type=image/webp>`);
|
|
1787
|
-
var _tmpl$22 = /* @__PURE__ */ template(`<picture><img
|
|
1791
|
+
var _tmpl$22 = /* @__PURE__ */ template(`<picture><img>`);
|
|
1788
1792
|
var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
|
|
1789
1793
|
function Image(props) {
|
|
1790
1794
|
const srcSetToUse = createMemo(() => {
|
|
@@ -1839,18 +1843,20 @@ function Image(props) {
|
|
|
1839
1843
|
const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " " + css({
|
|
1840
1844
|
opacity: "1",
|
|
1841
1845
|
transition: "opacity 0.2s ease-in-out"
|
|
1842
|
-
}), _v$2 = props.
|
|
1846
|
+
}), _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
|
|
1843
1847
|
"object-position": props.backgroundPosition || "center",
|
|
1844
1848
|
"object-fit": props.backgroundSize || "cover",
|
|
1845
1849
|
...aspectRatioCss()
|
|
1846
|
-
}, _v$
|
|
1850
|
+
}, _v$7 = props.image, _v$8 = srcSetToUse(), _v$9 = props.sizes;
|
|
1847
1851
|
_v$ !== _p$._v$ && className(_el$3, _p$._v$ = _v$);
|
|
1848
|
-
_v$2 !== _p$._v$2 && setAttribute(_el$3, "
|
|
1849
|
-
_v$3 !== _p$._v$3 && setAttribute(_el$3, "
|
|
1850
|
-
_p$._v$4
|
|
1851
|
-
_v$5 !== _p$._v$5 && setAttribute(_el$3, "
|
|
1852
|
-
|
|
1853
|
-
_v$7 !== _p$._v$7 && setAttribute(_el$3, "
|
|
1852
|
+
_v$2 !== _p$._v$2 && setAttribute(_el$3, "loading", _p$._v$2 = _v$2);
|
|
1853
|
+
_v$3 !== _p$._v$3 && setAttribute(_el$3, "fetchpriority", _p$._v$3 = _v$3);
|
|
1854
|
+
_v$4 !== _p$._v$4 && setAttribute(_el$3, "alt", _p$._v$4 = _v$4);
|
|
1855
|
+
_v$5 !== _p$._v$5 && setAttribute(_el$3, "role", _p$._v$5 = _v$5);
|
|
1856
|
+
_p$._v$6 = style(_el$3, _v$6, _p$._v$6);
|
|
1857
|
+
_v$7 !== _p$._v$7 && setAttribute(_el$3, "src", _p$._v$7 = _v$7);
|
|
1858
|
+
_v$8 !== _p$._v$8 && setAttribute(_el$3, "srcset", _p$._v$8 = _v$8);
|
|
1859
|
+
_v$9 !== _p$._v$9 && setAttribute(_el$3, "sizes", _p$._v$9 = _v$9);
|
|
1854
1860
|
return _p$;
|
|
1855
1861
|
}, {
|
|
1856
1862
|
_v$: void 0,
|
|
@@ -1859,7 +1865,9 @@ function Image(props) {
|
|
|
1859
1865
|
_v$4: void 0,
|
|
1860
1866
|
_v$5: void 0,
|
|
1861
1867
|
_v$6: void 0,
|
|
1862
|
-
_v$7: void 0
|
|
1868
|
+
_v$7: void 0,
|
|
1869
|
+
_v$8: void 0,
|
|
1870
|
+
_v$9: void 0
|
|
1863
1871
|
});
|
|
1864
1872
|
return _el$;
|
|
1865
1873
|
})(), createComponent(Show, {
|
|
@@ -1869,17 +1877,17 @@ function Image(props) {
|
|
|
1869
1877
|
get children() {
|
|
1870
1878
|
const _el$4 = _tmpl$32();
|
|
1871
1879
|
effect((_p$) => {
|
|
1872
|
-
const _v$
|
|
1880
|
+
const _v$10 = "builder-image-sizer " + css({
|
|
1873
1881
|
width: "100%",
|
|
1874
1882
|
pointerEvents: "none",
|
|
1875
1883
|
fontSize: "0"
|
|
1876
|
-
}), _v$
|
|
1877
|
-
_v$
|
|
1878
|
-
_v$
|
|
1884
|
+
}), _v$11 = props.aspectRatio * 100 + "%";
|
|
1885
|
+
_v$10 !== _p$._v$10 && className(_el$4, _p$._v$10 = _v$10);
|
|
1886
|
+
_v$11 !== _p$._v$11 && ((_p$._v$11 = _v$11) != null ? _el$4.style.setProperty("padding-top", _v$11) : _el$4.style.removeProperty("padding-top"));
|
|
1879
1887
|
return _p$;
|
|
1880
1888
|
}, {
|
|
1881
|
-
_v$
|
|
1882
|
-
_v$
|
|
1889
|
+
_v$10: void 0,
|
|
1890
|
+
_v$11: void 0
|
|
1883
1891
|
});
|
|
1884
1892
|
return _el$4;
|
|
1885
1893
|
}
|
|
@@ -2820,6 +2828,11 @@ var componentInfo5 = {
|
|
|
2820
2828
|
type: "boolean",
|
|
2821
2829
|
helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
|
|
2822
2830
|
defaultValue: true
|
|
2831
|
+
}, {
|
|
2832
|
+
name: "highPriority",
|
|
2833
|
+
type: "boolean",
|
|
2834
|
+
advanced: true,
|
|
2835
|
+
helperText: "Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page."
|
|
2823
2836
|
}, {
|
|
2824
2837
|
name: "aspectRatio",
|
|
2825
2838
|
type: "number",
|
|
@@ -5018,12 +5031,15 @@ var getInteractionPropertiesForEvent = (event) => {
|
|
|
5018
5031
|
// src/functions/is-from-trusted-host.ts
|
|
5019
5032
|
var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
|
|
5020
5033
|
function isFromTrustedHost(trustedHosts, e) {
|
|
5034
|
+
if (!e.origin.startsWith("http") && !e.origin.startsWith("https")) {
|
|
5035
|
+
return false;
|
|
5036
|
+
}
|
|
5021
5037
|
const url = new URL(e.origin), hostname = url.hostname;
|
|
5022
5038
|
return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
|
|
5023
5039
|
}
|
|
5024
5040
|
|
|
5025
5041
|
// src/constants/sdk-version.ts
|
|
5026
|
-
var SDK_VERSION = "1.0.
|
|
5042
|
+
var SDK_VERSION = "1.0.33";
|
|
5027
5043
|
|
|
5028
5044
|
// src/functions/register.ts
|
|
5029
5045
|
var registry = {};
|
|
@@ -5742,9 +5758,6 @@ function ContentComponent(props) {
|
|
|
5742
5758
|
get contentWrapperProps() {
|
|
5743
5759
|
return props.contentWrapperProps;
|
|
5744
5760
|
},
|
|
5745
|
-
get linkComponent() {
|
|
5746
|
-
return props.linkComponent;
|
|
5747
|
-
},
|
|
5748
5761
|
get trustedHosts() {
|
|
5749
5762
|
return props.trustedHosts;
|
|
5750
5763
|
}
|
package/lib/browser/dev.jsx
CHANGED
|
@@ -109,11 +109,7 @@ import { Show as Show4, For as For2, onMount, createMemo as createMemo5 } from "
|
|
|
109
109
|
function getBlockComponentOptions(block) {
|
|
110
110
|
return {
|
|
111
111
|
...block.component?.options,
|
|
112
|
-
...block.options
|
|
113
|
-
/**
|
|
114
|
-
* Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
|
|
115
|
-
*/
|
|
116
|
-
builderBlock: block
|
|
112
|
+
...block.options
|
|
117
113
|
};
|
|
118
114
|
}
|
|
119
115
|
|
|
@@ -776,11 +772,25 @@ var getRepeatItemData = ({
|
|
|
776
772
|
}));
|
|
777
773
|
return repeatArray;
|
|
778
774
|
};
|
|
779
|
-
var
|
|
780
|
-
return block && (block.isRSC || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name))
|
|
775
|
+
var provideLinkComponent = (block, linkComponent) => {
|
|
776
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name)) ? {
|
|
777
|
+
builderLinkComponent: linkComponent
|
|
778
|
+
} : {};
|
|
779
|
+
};
|
|
780
|
+
var provideRegisteredComponents = (block, registeredComponents) => {
|
|
781
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name)) ? {
|
|
782
|
+
builderComponents: registeredComponents
|
|
783
|
+
} : {};
|
|
781
784
|
};
|
|
782
|
-
var
|
|
783
|
-
return block && (block.isRSC || ["
|
|
785
|
+
var provideBuilderBlock = (block, builderBlock) => {
|
|
786
|
+
return block && (block.isRSC && TARGET === "rsc" || TARGET === "reactNative" && block.name === "Text" || ["Builder:Accordion", "Columns", "Form:Form", "Builder: Tabs", "Symbol", "Image", "Video"].includes(block.name)) ? {
|
|
787
|
+
builderBlock
|
|
788
|
+
} : {};
|
|
789
|
+
};
|
|
790
|
+
var provideBuilderContext = (block, context) => {
|
|
791
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Builder:Accordion", "Columns", "Form:Form", "Builder: Tabs", "Symbol", "Slot"].includes(block.name)) ? {
|
|
792
|
+
builderContext: context
|
|
793
|
+
} : {};
|
|
784
794
|
};
|
|
785
795
|
|
|
786
796
|
// src/components/block/components/block-styles.tsx
|
|
@@ -1183,13 +1193,13 @@ function Block(props) {
|
|
|
1183
1193
|
componentRef: blockComponent()?.component,
|
|
1184
1194
|
componentOptions: {
|
|
1185
1195
|
...getBlockComponentOptions(processedBlock()),
|
|
1186
|
-
|
|
1187
|
-
...
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1196
|
+
...provideBuilderBlock(blockComponent(), processedBlock()),
|
|
1197
|
+
...provideBuilderContext(blockComponent(), props.context),
|
|
1198
|
+
...provideLinkComponent(blockComponent(), props.linkComponent),
|
|
1199
|
+
...provideRegisteredComponents(
|
|
1200
|
+
blockComponent(),
|
|
1201
|
+
props.registeredComponents
|
|
1202
|
+
)
|
|
1193
1203
|
},
|
|
1194
1204
|
context: props.context,
|
|
1195
1205
|
linkComponent: props.linkComponent,
|
|
@@ -1242,7 +1252,6 @@ function Block(props) {
|
|
|
1242
1252
|
Wrapper={Tag()}
|
|
1243
1253
|
block={processedBlock()}
|
|
1244
1254
|
context={props.context}
|
|
1245
|
-
linkComponent={props.linkComponent}
|
|
1246
1255
|
>
|
|
1247
1256
|
<Component_ref_default
|
|
1248
1257
|
componentRef={componentRefProps().componentRef}
|
|
@@ -1610,7 +1619,8 @@ function Image(props) {
|
|
|
1610
1619
|
opacity: "1",
|
|
1611
1620
|
transition: "opacity 0.2s ease-in-out"
|
|
1612
1621
|
})}
|
|
1613
|
-
loading="lazy"
|
|
1622
|
+
loading={props.highPriority ? "eager" : "lazy"}
|
|
1623
|
+
fetchpriority={props.highPriority ? "high" : "auto"}
|
|
1614
1624
|
alt={props.altText}
|
|
1615
1625
|
role={props.altText ? void 0 : "presentation"}
|
|
1616
1626
|
style={{
|
|
@@ -2528,6 +2538,11 @@ var componentInfo5 = {
|
|
|
2528
2538
|
type: "boolean",
|
|
2529
2539
|
helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
|
|
2530
2540
|
defaultValue: true
|
|
2541
|
+
}, {
|
|
2542
|
+
name: "highPriority",
|
|
2543
|
+
type: "boolean",
|
|
2544
|
+
advanced: true,
|
|
2545
|
+
helperText: "Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page."
|
|
2531
2546
|
}, {
|
|
2532
2547
|
name: "aspectRatio",
|
|
2533
2548
|
type: "number",
|
|
@@ -4529,12 +4544,15 @@ var getInteractionPropertiesForEvent = (event) => {
|
|
|
4529
4544
|
// src/functions/is-from-trusted-host.ts
|
|
4530
4545
|
var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
|
|
4531
4546
|
function isFromTrustedHost(trustedHosts, e) {
|
|
4547
|
+
if (!e.origin.startsWith("http") && !e.origin.startsWith("https")) {
|
|
4548
|
+
return false;
|
|
4549
|
+
}
|
|
4532
4550
|
const url = new URL(e.origin), hostname = url.hostname;
|
|
4533
4551
|
return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
|
|
4534
4552
|
}
|
|
4535
4553
|
|
|
4536
4554
|
// src/constants/sdk-version.ts
|
|
4537
|
-
var SDK_VERSION = "1.0.
|
|
4555
|
+
var SDK_VERSION = "1.0.33";
|
|
4538
4556
|
|
|
4539
4557
|
// src/functions/register.ts
|
|
4540
4558
|
var registry = {};
|
|
@@ -5252,7 +5270,6 @@ function ContentComponent(props) {
|
|
|
5252
5270
|
builderContextSignal={builderContextSignal()}
|
|
5253
5271
|
contentWrapper={props.contentWrapper}
|
|
5254
5272
|
contentWrapperProps={props.contentWrapperProps}
|
|
5255
|
-
linkComponent={props.linkComponent}
|
|
5256
5273
|
trustedHosts={props.trustedHosts}
|
|
5257
5274
|
{...{
|
|
5258
5275
|
setBuilderContextSignal
|
package/lib/browser/index.js
CHANGED
|
@@ -122,11 +122,7 @@ var components_context_default = createContext({ registeredComponents: {} });
|
|
|
122
122
|
function getBlockComponentOptions(block) {
|
|
123
123
|
return {
|
|
124
124
|
...block.component?.options,
|
|
125
|
-
...block.options
|
|
126
|
-
/**
|
|
127
|
-
* Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
|
|
128
|
-
*/
|
|
129
|
-
builderBlock: block
|
|
125
|
+
...block.options
|
|
130
126
|
};
|
|
131
127
|
}
|
|
132
128
|
|
|
@@ -783,11 +779,25 @@ var getRepeatItemData = ({
|
|
|
783
779
|
}));
|
|
784
780
|
return repeatArray;
|
|
785
781
|
};
|
|
786
|
-
var
|
|
787
|
-
return block && (block.isRSC || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name))
|
|
782
|
+
var provideLinkComponent = (block, linkComponent) => {
|
|
783
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name)) ? {
|
|
784
|
+
builderLinkComponent: linkComponent
|
|
785
|
+
} : {};
|
|
786
|
+
};
|
|
787
|
+
var provideRegisteredComponents = (block, registeredComponents) => {
|
|
788
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name)) ? {
|
|
789
|
+
builderComponents: registeredComponents
|
|
790
|
+
} : {};
|
|
791
|
+
};
|
|
792
|
+
var provideBuilderBlock = (block, builderBlock) => {
|
|
793
|
+
return block && (block.isRSC && TARGET === "rsc" || TARGET === "reactNative" && block.name === "Text" || ["Builder:Accordion", "Columns", "Form:Form", "Builder: Tabs", "Symbol", "Image", "Video"].includes(block.name)) ? {
|
|
794
|
+
builderBlock
|
|
795
|
+
} : {};
|
|
788
796
|
};
|
|
789
|
-
var
|
|
790
|
-
return block && (block.isRSC || ["
|
|
797
|
+
var provideBuilderContext = (block, context) => {
|
|
798
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Builder:Accordion", "Columns", "Form:Form", "Builder: Tabs", "Symbol", "Slot"].includes(block.name)) ? {
|
|
799
|
+
builderContext: context
|
|
800
|
+
} : {};
|
|
791
801
|
};
|
|
792
802
|
|
|
793
803
|
// src/constants/device-sizes.ts
|
|
@@ -1236,13 +1246,10 @@ function Block(props) {
|
|
|
1236
1246
|
componentRef: blockComponent()?.component,
|
|
1237
1247
|
componentOptions: {
|
|
1238
1248
|
...getBlockComponentOptions(processedBlock()),
|
|
1239
|
-
|
|
1240
|
-
...
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
...shouldPassRegisteredComponents(blockComponent()) ? {
|
|
1244
|
-
builderComponents: props.registeredComponents
|
|
1245
|
-
} : {}
|
|
1249
|
+
...provideBuilderBlock(blockComponent(), processedBlock()),
|
|
1250
|
+
...provideBuilderContext(blockComponent(), props.context),
|
|
1251
|
+
...provideLinkComponent(blockComponent(), props.linkComponent),
|
|
1252
|
+
...provideRegisteredComponents(blockComponent(), props.registeredComponents)
|
|
1246
1253
|
},
|
|
1247
1254
|
context: props.context,
|
|
1248
1255
|
linkComponent: props.linkComponent,
|
|
@@ -1350,9 +1357,6 @@ function Block(props) {
|
|
|
1350
1357
|
get context() {
|
|
1351
1358
|
return props.context;
|
|
1352
1359
|
},
|
|
1353
|
-
get linkComponent() {
|
|
1354
|
-
return props.linkComponent;
|
|
1355
|
-
},
|
|
1356
1360
|
get children() {
|
|
1357
1361
|
return [createComponent(component_ref_default, {
|
|
1358
1362
|
get componentRef() {
|
|
@@ -1778,7 +1782,7 @@ function getSrcSet(url) {
|
|
|
1778
1782
|
|
|
1779
1783
|
// src/blocks/image/image.tsx
|
|
1780
1784
|
var _tmpl$4 = /* @__PURE__ */ template(`<source type=image/webp>`);
|
|
1781
|
-
var _tmpl$22 = /* @__PURE__ */ template(`<picture><img
|
|
1785
|
+
var _tmpl$22 = /* @__PURE__ */ template(`<picture><img>`);
|
|
1782
1786
|
var _tmpl$32 = /* @__PURE__ */ template(`<div>`);
|
|
1783
1787
|
function Image(props) {
|
|
1784
1788
|
const srcSetToUse = createMemo(() => {
|
|
@@ -1832,18 +1836,20 @@ function Image(props) {
|
|
|
1832
1836
|
const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " " + css({
|
|
1833
1837
|
opacity: "1",
|
|
1834
1838
|
transition: "opacity 0.2s ease-in-out"
|
|
1835
|
-
}), _v$2 = props.
|
|
1839
|
+
}), _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
|
|
1836
1840
|
"object-position": props.backgroundPosition || "center",
|
|
1837
1841
|
"object-fit": props.backgroundSize || "cover",
|
|
1838
1842
|
...aspectRatioCss()
|
|
1839
|
-
}, _v$
|
|
1843
|
+
}, _v$7 = props.image, _v$8 = srcSetToUse(), _v$9 = props.sizes;
|
|
1840
1844
|
_v$ !== _p$._v$ && className(_el$3, _p$._v$ = _v$);
|
|
1841
|
-
_v$2 !== _p$._v$2 && setAttribute(_el$3, "
|
|
1842
|
-
_v$3 !== _p$._v$3 && setAttribute(_el$3, "
|
|
1843
|
-
_p$._v$4
|
|
1844
|
-
_v$5 !== _p$._v$5 && setAttribute(_el$3, "
|
|
1845
|
-
|
|
1846
|
-
_v$7 !== _p$._v$7 && setAttribute(_el$3, "
|
|
1845
|
+
_v$2 !== _p$._v$2 && setAttribute(_el$3, "loading", _p$._v$2 = _v$2);
|
|
1846
|
+
_v$3 !== _p$._v$3 && setAttribute(_el$3, "fetchpriority", _p$._v$3 = _v$3);
|
|
1847
|
+
_v$4 !== _p$._v$4 && setAttribute(_el$3, "alt", _p$._v$4 = _v$4);
|
|
1848
|
+
_v$5 !== _p$._v$5 && setAttribute(_el$3, "role", _p$._v$5 = _v$5);
|
|
1849
|
+
_p$._v$6 = style(_el$3, _v$6, _p$._v$6);
|
|
1850
|
+
_v$7 !== _p$._v$7 && setAttribute(_el$3, "src", _p$._v$7 = _v$7);
|
|
1851
|
+
_v$8 !== _p$._v$8 && setAttribute(_el$3, "srcset", _p$._v$8 = _v$8);
|
|
1852
|
+
_v$9 !== _p$._v$9 && setAttribute(_el$3, "sizes", _p$._v$9 = _v$9);
|
|
1847
1853
|
return _p$;
|
|
1848
1854
|
}, {
|
|
1849
1855
|
_v$: void 0,
|
|
@@ -1852,7 +1858,9 @@ function Image(props) {
|
|
|
1852
1858
|
_v$4: void 0,
|
|
1853
1859
|
_v$5: void 0,
|
|
1854
1860
|
_v$6: void 0,
|
|
1855
|
-
_v$7: void 0
|
|
1861
|
+
_v$7: void 0,
|
|
1862
|
+
_v$8: void 0,
|
|
1863
|
+
_v$9: void 0
|
|
1856
1864
|
});
|
|
1857
1865
|
return _el$;
|
|
1858
1866
|
})(), createComponent(Show, {
|
|
@@ -1862,17 +1870,17 @@ function Image(props) {
|
|
|
1862
1870
|
get children() {
|
|
1863
1871
|
const _el$4 = _tmpl$32();
|
|
1864
1872
|
effect((_p$) => {
|
|
1865
|
-
const _v$
|
|
1873
|
+
const _v$10 = "builder-image-sizer " + css({
|
|
1866
1874
|
width: "100%",
|
|
1867
1875
|
pointerEvents: "none",
|
|
1868
1876
|
fontSize: "0"
|
|
1869
|
-
}), _v$
|
|
1870
|
-
_v$
|
|
1871
|
-
_v$
|
|
1877
|
+
}), _v$11 = props.aspectRatio * 100 + "%";
|
|
1878
|
+
_v$10 !== _p$._v$10 && className(_el$4, _p$._v$10 = _v$10);
|
|
1879
|
+
_v$11 !== _p$._v$11 && ((_p$._v$11 = _v$11) != null ? _el$4.style.setProperty("padding-top", _v$11) : _el$4.style.removeProperty("padding-top"));
|
|
1872
1880
|
return _p$;
|
|
1873
1881
|
}, {
|
|
1874
|
-
_v$
|
|
1875
|
-
_v$
|
|
1882
|
+
_v$10: void 0,
|
|
1883
|
+
_v$11: void 0
|
|
1876
1884
|
});
|
|
1877
1885
|
return _el$4;
|
|
1878
1886
|
}
|
|
@@ -2812,6 +2820,11 @@ var componentInfo5 = {
|
|
|
2812
2820
|
type: "boolean",
|
|
2813
2821
|
helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
|
|
2814
2822
|
defaultValue: true
|
|
2823
|
+
}, {
|
|
2824
|
+
name: "highPriority",
|
|
2825
|
+
type: "boolean",
|
|
2826
|
+
advanced: true,
|
|
2827
|
+
helperText: "Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page."
|
|
2815
2828
|
}, {
|
|
2816
2829
|
name: "aspectRatio",
|
|
2817
2830
|
type: "number",
|
|
@@ -5003,12 +5016,15 @@ var getInteractionPropertiesForEvent = (event) => {
|
|
|
5003
5016
|
// src/functions/is-from-trusted-host.ts
|
|
5004
5017
|
var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
|
|
5005
5018
|
function isFromTrustedHost(trustedHosts, e) {
|
|
5019
|
+
if (!e.origin.startsWith("http") && !e.origin.startsWith("https")) {
|
|
5020
|
+
return false;
|
|
5021
|
+
}
|
|
5006
5022
|
const url = new URL(e.origin), hostname = url.hostname;
|
|
5007
5023
|
return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
|
|
5008
5024
|
}
|
|
5009
5025
|
|
|
5010
5026
|
// src/constants/sdk-version.ts
|
|
5011
|
-
var SDK_VERSION = "1.0.
|
|
5027
|
+
var SDK_VERSION = "1.0.33";
|
|
5012
5028
|
|
|
5013
5029
|
// src/functions/register.ts
|
|
5014
5030
|
var registry = {};
|
|
@@ -5725,9 +5741,6 @@ function ContentComponent(props) {
|
|
|
5725
5741
|
get contentWrapperProps() {
|
|
5726
5742
|
return props.contentWrapperProps;
|
|
5727
5743
|
},
|
|
5728
|
-
get linkComponent() {
|
|
5729
|
-
return props.linkComponent;
|
|
5730
|
-
},
|
|
5731
5744
|
get trustedHosts() {
|
|
5732
5745
|
return props.trustedHosts;
|
|
5733
5746
|
}
|
package/lib/browser/index.jsx
CHANGED
|
@@ -109,11 +109,7 @@ import { Show as Show4, For as For2, onMount, createMemo as createMemo5 } from "
|
|
|
109
109
|
function getBlockComponentOptions(block) {
|
|
110
110
|
return {
|
|
111
111
|
...block.component?.options,
|
|
112
|
-
...block.options
|
|
113
|
-
/**
|
|
114
|
-
* Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
|
|
115
|
-
*/
|
|
116
|
-
builderBlock: block
|
|
112
|
+
...block.options
|
|
117
113
|
};
|
|
118
114
|
}
|
|
119
115
|
|
|
@@ -770,11 +766,25 @@ var getRepeatItemData = ({
|
|
|
770
766
|
}));
|
|
771
767
|
return repeatArray;
|
|
772
768
|
};
|
|
773
|
-
var
|
|
774
|
-
return block && (block.isRSC || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name))
|
|
769
|
+
var provideLinkComponent = (block, linkComponent) => {
|
|
770
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Core:Button", "Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name)) ? {
|
|
771
|
+
builderLinkComponent: linkComponent
|
|
772
|
+
} : {};
|
|
773
|
+
};
|
|
774
|
+
var provideRegisteredComponents = (block, registeredComponents) => {
|
|
775
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Symbol", "Columns", "Form:Form", "Builder: Tabs", "Builder:Accordion"].includes(block.name)) ? {
|
|
776
|
+
builderComponents: registeredComponents
|
|
777
|
+
} : {};
|
|
775
778
|
};
|
|
776
|
-
var
|
|
777
|
-
return block && (block.isRSC || ["
|
|
779
|
+
var provideBuilderBlock = (block, builderBlock) => {
|
|
780
|
+
return block && (block.isRSC && TARGET === "rsc" || TARGET === "reactNative" && block.name === "Text" || ["Builder:Accordion", "Columns", "Form:Form", "Builder: Tabs", "Symbol", "Image", "Video"].includes(block.name)) ? {
|
|
781
|
+
builderBlock
|
|
782
|
+
} : {};
|
|
783
|
+
};
|
|
784
|
+
var provideBuilderContext = (block, context) => {
|
|
785
|
+
return block && (block.isRSC && TARGET === "rsc" || ["Builder:Accordion", "Columns", "Form:Form", "Builder: Tabs", "Symbol", "Slot"].includes(block.name)) ? {
|
|
786
|
+
builderContext: context
|
|
787
|
+
} : {};
|
|
778
788
|
};
|
|
779
789
|
|
|
780
790
|
// src/components/block/components/block-styles.tsx
|
|
@@ -1177,13 +1187,13 @@ function Block(props) {
|
|
|
1177
1187
|
componentRef: blockComponent()?.component,
|
|
1178
1188
|
componentOptions: {
|
|
1179
1189
|
...getBlockComponentOptions(processedBlock()),
|
|
1180
|
-
|
|
1181
|
-
...
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1190
|
+
...provideBuilderBlock(blockComponent(), processedBlock()),
|
|
1191
|
+
...provideBuilderContext(blockComponent(), props.context),
|
|
1192
|
+
...provideLinkComponent(blockComponent(), props.linkComponent),
|
|
1193
|
+
...provideRegisteredComponents(
|
|
1194
|
+
blockComponent(),
|
|
1195
|
+
props.registeredComponents
|
|
1196
|
+
)
|
|
1187
1197
|
},
|
|
1188
1198
|
context: props.context,
|
|
1189
1199
|
linkComponent: props.linkComponent,
|
|
@@ -1236,7 +1246,6 @@ function Block(props) {
|
|
|
1236
1246
|
Wrapper={Tag()}
|
|
1237
1247
|
block={processedBlock()}
|
|
1238
1248
|
context={props.context}
|
|
1239
|
-
linkComponent={props.linkComponent}
|
|
1240
1249
|
>
|
|
1241
1250
|
<Component_ref_default
|
|
1242
1251
|
componentRef={componentRefProps().componentRef}
|
|
@@ -1603,7 +1612,8 @@ function Image(props) {
|
|
|
1603
1612
|
opacity: "1",
|
|
1604
1613
|
transition: "opacity 0.2s ease-in-out"
|
|
1605
1614
|
})}
|
|
1606
|
-
loading="lazy"
|
|
1615
|
+
loading={props.highPriority ? "eager" : "lazy"}
|
|
1616
|
+
fetchpriority={props.highPriority ? "high" : "auto"}
|
|
1607
1617
|
alt={props.altText}
|
|
1608
1618
|
role={props.altText ? void 0 : "presentation"}
|
|
1609
1619
|
style={{
|
|
@@ -2520,6 +2530,11 @@ var componentInfo5 = {
|
|
|
2520
2530
|
type: "boolean",
|
|
2521
2531
|
helperText: "When child blocks are provided, fit to them instead of using the image's aspect ratio",
|
|
2522
2532
|
defaultValue: true
|
|
2533
|
+
}, {
|
|
2534
|
+
name: "highPriority",
|
|
2535
|
+
type: "boolean",
|
|
2536
|
+
advanced: true,
|
|
2537
|
+
helperText: "Mark this image as high priority compared to other images on the page. This prevents lazy loading of the image and tells the browser to load this image before others on the page."
|
|
2523
2538
|
}, {
|
|
2524
2539
|
name: "aspectRatio",
|
|
2525
2540
|
type: "number",
|
|
@@ -4514,12 +4529,15 @@ var getInteractionPropertiesForEvent = (event) => {
|
|
|
4514
4529
|
// src/functions/is-from-trusted-host.ts
|
|
4515
4530
|
var DEFAULT_TRUSTED_HOSTS = ["*.beta.builder.io", "beta.builder.io", "builder.io", "localhost", "qa.builder.io"];
|
|
4516
4531
|
function isFromTrustedHost(trustedHosts, e) {
|
|
4532
|
+
if (!e.origin.startsWith("http") && !e.origin.startsWith("https")) {
|
|
4533
|
+
return false;
|
|
4534
|
+
}
|
|
4517
4535
|
const url = new URL(e.origin), hostname = url.hostname;
|
|
4518
4536
|
return (trustedHosts || DEFAULT_TRUSTED_HOSTS).findIndex((trustedHost) => trustedHost.startsWith("*.") ? hostname.endsWith(trustedHost.slice(1)) : trustedHost === hostname) > -1;
|
|
4519
4537
|
}
|
|
4520
4538
|
|
|
4521
4539
|
// src/constants/sdk-version.ts
|
|
4522
|
-
var SDK_VERSION = "1.0.
|
|
4540
|
+
var SDK_VERSION = "1.0.33";
|
|
4523
4541
|
|
|
4524
4542
|
// src/functions/register.ts
|
|
4525
4543
|
var registry = {};
|
|
@@ -5235,7 +5253,6 @@ function ContentComponent(props) {
|
|
|
5235
5253
|
builderContextSignal={builderContextSignal()}
|
|
5236
5254
|
contentWrapper={props.contentWrapper}
|
|
5237
5255
|
contentWrapperProps={props.contentWrapperProps}
|
|
5238
|
-
linkComponent={props.linkComponent}
|
|
5239
5256
|
trustedHosts={props.trustedHosts}
|
|
5240
5257
|
{...{
|
|
5241
5258
|
setBuilderContextSignal
|