@builder.io/sdk-solid 0.12.3 → 0.12.4
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 +23 -14
- package/lib/browser/dev.js +243 -161
- package/lib/browser/dev.jsx +185 -118
- package/lib/browser/index.js +243 -161
- package/lib/browser/index.jsx +185 -118
- package/lib/edge/dev.js +243 -161
- package/lib/edge/dev.jsx +185 -118
- package/lib/edge/index.js +243 -161
- package/lib/edge/index.jsx +185 -118
- package/lib/node/dev.js +243 -161
- package/lib/node/dev.jsx +185 -118
- package/lib/node/index.js +243 -161
- package/lib/node/index.jsx +185 -118
- package/package.json +1 -1
package/lib/browser/index.jsx
CHANGED
|
@@ -1,31 +1,81 @@
|
|
|
1
|
-
// src/
|
|
1
|
+
// src/components/dynamic-renderer/dynamic-renderer.tsx
|
|
2
2
|
import { Show } from "solid-js";
|
|
3
|
-
|
|
3
|
+
import { Dynamic } from "solid-js/web";
|
|
4
|
+
|
|
5
|
+
// src/components/dynamic-renderer/dynamic-renderer.helpers.ts
|
|
6
|
+
var EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
|
|
7
|
+
var isEmptyElement = (tagName) => {
|
|
8
|
+
return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// src/components/dynamic-renderer/dynamic-renderer.tsx
|
|
12
|
+
function DynamicRenderer(props) {
|
|
4
13
|
return <Show
|
|
5
|
-
fallback={<
|
|
6
|
-
class={`builder-button ${props.attributes.class}`}
|
|
7
|
-
role="button"
|
|
8
|
-
{...{}}
|
|
14
|
+
fallback={<Dynamic
|
|
9
15
|
{...props.attributes}
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
16
|
+
{...props.actionAttributes}
|
|
17
|
+
component={props.TagName}
|
|
18
|
+
/>}
|
|
19
|
+
when={!isEmptyElement(props.TagName)}
|
|
20
|
+
><Show
|
|
21
|
+
fallback={<Dynamic
|
|
22
|
+
{...props.attributes}
|
|
23
|
+
{...props.actionAttributes}
|
|
24
|
+
component={props.TagName}
|
|
25
|
+
>{props.children}</Dynamic>}
|
|
26
|
+
when={typeof props.TagName === "string"}
|
|
27
|
+
><Dynamic
|
|
15
28
|
{...props.attributes}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
29
|
+
{...props.actionAttributes}
|
|
30
|
+
component={props.TagName}
|
|
31
|
+
>{props.children}</Dynamic></Show></Show>;
|
|
32
|
+
}
|
|
33
|
+
var Dynamic_renderer_default = DynamicRenderer;
|
|
34
|
+
|
|
35
|
+
// src/constants/target.ts
|
|
36
|
+
var TARGET = "solid";
|
|
37
|
+
|
|
38
|
+
// src/functions/get-class-prop-name.ts
|
|
39
|
+
var getClassPropName = () => {
|
|
40
|
+
switch (TARGET) {
|
|
41
|
+
case "react":
|
|
42
|
+
case "reactNative":
|
|
43
|
+
case "rsc":
|
|
44
|
+
return "className";
|
|
45
|
+
case "svelte":
|
|
46
|
+
case "vue":
|
|
47
|
+
case "solid":
|
|
48
|
+
case "qwik":
|
|
49
|
+
return "class";
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
// src/blocks/button/button.tsx
|
|
54
|
+
function Button(props) {
|
|
55
|
+
return <Dynamic_renderer_default
|
|
56
|
+
TagName={props.link ? props.builderLinkComponent || "a" : "button"}
|
|
57
|
+
attributes={{
|
|
58
|
+
...props.attributes,
|
|
59
|
+
[getClassPropName()]: `${props.link ? "" : "builder-button"} ${props.attributes[getClassPropName()] || ""}`,
|
|
60
|
+
...props.link ? {
|
|
61
|
+
href: props.link,
|
|
62
|
+
target: props.openLinkInNewTab ? "_blank" : void 0,
|
|
63
|
+
role: "link"
|
|
64
|
+
} : {
|
|
65
|
+
role: "button"
|
|
66
|
+
}
|
|
67
|
+
}}
|
|
68
|
+
actionAttributes={{}}
|
|
69
|
+
>{props.text}</Dynamic_renderer_default>;
|
|
20
70
|
}
|
|
21
71
|
var button_default = Button;
|
|
22
72
|
|
|
23
73
|
// src/blocks/columns/columns.tsx
|
|
24
|
-
import { Show as
|
|
74
|
+
import { Show as Show6, For as For4, createSignal as createSignal5 } from "solid-js";
|
|
25
75
|
import { css as css2 } from "solid-styled-components";
|
|
26
76
|
|
|
27
77
|
// src/components/blocks/blocks.tsx
|
|
28
|
-
import { useContext, Show as
|
|
78
|
+
import { useContext, Show as Show5, For as For3 } from "solid-js";
|
|
29
79
|
|
|
30
80
|
// src/context/builder.context.ts
|
|
31
81
|
import { createContext } from "solid-js";
|
|
@@ -49,7 +99,7 @@ import { createContext as createContext2 } from "solid-js";
|
|
|
49
99
|
var components_context_default = createContext2({ registeredComponents: {} });
|
|
50
100
|
|
|
51
101
|
// src/components/block/block.tsx
|
|
52
|
-
import { Show as
|
|
102
|
+
import { Show as Show4, For as For2, createSignal as createSignal4 } from "solid-js";
|
|
53
103
|
|
|
54
104
|
// src/functions/get-block-component-options.ts
|
|
55
105
|
function getBlockComponentOptions(block) {
|
|
@@ -76,9 +126,6 @@ function isBrowser() {
|
|
|
76
126
|
return typeof window !== "undefined" && typeof document !== "undefined";
|
|
77
127
|
}
|
|
78
128
|
|
|
79
|
-
// src/constants/target.ts
|
|
80
|
-
var TARGET = "solid";
|
|
81
|
-
|
|
82
129
|
// src/functions/is-iframe.ts
|
|
83
130
|
function isIframe() {
|
|
84
131
|
return isBrowser() && window.self !== window.top;
|
|
@@ -584,6 +631,38 @@ function getBlockActions(options) {
|
|
|
584
631
|
return obj;
|
|
585
632
|
}
|
|
586
633
|
|
|
634
|
+
// src/functions/transform-style-property.ts
|
|
635
|
+
function transformStyleProperty({
|
|
636
|
+
style
|
|
637
|
+
}) {
|
|
638
|
+
return style;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
// src/functions/get-style.ts
|
|
642
|
+
var getStyle = ({
|
|
643
|
+
block,
|
|
644
|
+
context
|
|
645
|
+
}) => {
|
|
646
|
+
return mapStyleObjToStrIfNeeded(transformStyleProperty({
|
|
647
|
+
style: block.style || {},
|
|
648
|
+
context,
|
|
649
|
+
block
|
|
650
|
+
}));
|
|
651
|
+
};
|
|
652
|
+
function mapStyleObjToStrIfNeeded(style) {
|
|
653
|
+
switch (TARGET) {
|
|
654
|
+
case "svelte":
|
|
655
|
+
case "vue":
|
|
656
|
+
case "solid":
|
|
657
|
+
return convertStyleMapToCSSArray(style).join(" ");
|
|
658
|
+
case "qwik":
|
|
659
|
+
case "reactNative":
|
|
660
|
+
case "react":
|
|
661
|
+
case "rsc":
|
|
662
|
+
return style;
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
|
|
587
666
|
// src/functions/transform-block-properties.ts
|
|
588
667
|
function transformBlockProperties({
|
|
589
668
|
properties
|
|
@@ -605,8 +684,11 @@ function getBlockProperties({
|
|
|
605
684
|
...extractRelevantRootBlockProperties(block),
|
|
606
685
|
...block.properties,
|
|
607
686
|
"builder-id": block.id,
|
|
608
|
-
style:
|
|
609
|
-
|
|
687
|
+
style: getStyle({
|
|
688
|
+
block,
|
|
689
|
+
context
|
|
690
|
+
}),
|
|
691
|
+
[getClassPropName()]: [block.id, "builder-block", block.class, block.properties?.class].filter(Boolean).join(" ")
|
|
610
692
|
};
|
|
611
693
|
return transformBlockProperties({
|
|
612
694
|
properties,
|
|
@@ -614,53 +696,6 @@ function getBlockProperties({
|
|
|
614
696
|
block
|
|
615
697
|
});
|
|
616
698
|
}
|
|
617
|
-
function getStyleAttribute(style) {
|
|
618
|
-
switch (TARGET) {
|
|
619
|
-
case "svelte":
|
|
620
|
-
case "vue":
|
|
621
|
-
case "solid":
|
|
622
|
-
return convertStyleMapToCSSArray(style).join(" ");
|
|
623
|
-
case "qwik":
|
|
624
|
-
case "reactNative":
|
|
625
|
-
case "react":
|
|
626
|
-
case "rsc":
|
|
627
|
-
return style;
|
|
628
|
-
}
|
|
629
|
-
}
|
|
630
|
-
|
|
631
|
-
// src/components/dynamic-renderer/dynamic-renderer.tsx
|
|
632
|
-
import { Show as Show3 } from "solid-js";
|
|
633
|
-
import { Dynamic } from "solid-js/web";
|
|
634
|
-
|
|
635
|
-
// src/components/dynamic-renderer/dynamic-renderer.helpers.ts
|
|
636
|
-
var EMPTY_HTML_ELEMENTS = /* @__PURE__ */ new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]);
|
|
637
|
-
var isEmptyElement = (tagName) => {
|
|
638
|
-
return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.has(tagName.toLowerCase());
|
|
639
|
-
};
|
|
640
|
-
|
|
641
|
-
// src/components/dynamic-renderer/dynamic-renderer.tsx
|
|
642
|
-
function DynamicRenderer(props) {
|
|
643
|
-
return <Show3
|
|
644
|
-
fallback={<Dynamic
|
|
645
|
-
{...props.attributes}
|
|
646
|
-
{...props.actionAttributes}
|
|
647
|
-
component={props.TagName}
|
|
648
|
-
/>}
|
|
649
|
-
when={!isEmptyElement(props.TagName)}
|
|
650
|
-
><Show3
|
|
651
|
-
fallback={<Dynamic
|
|
652
|
-
{...props.attributes}
|
|
653
|
-
{...props.actionAttributes}
|
|
654
|
-
component={props.TagName}
|
|
655
|
-
>{props.children}</Dynamic>}
|
|
656
|
-
when={typeof props.TagName === "string"}
|
|
657
|
-
><Dynamic
|
|
658
|
-
{...props.attributes}
|
|
659
|
-
{...props.actionAttributes}
|
|
660
|
-
component={props.TagName}
|
|
661
|
-
>{props.children}</Dynamic></Show3></Show3>;
|
|
662
|
-
}
|
|
663
|
-
var Dynamic_renderer_default = DynamicRenderer;
|
|
664
699
|
|
|
665
700
|
// src/components/block/components/block-wrapper.tsx
|
|
666
701
|
function BlockWrapper(props) {
|
|
@@ -683,7 +718,7 @@ function BlockWrapper(props) {
|
|
|
683
718
|
var Block_wrapper_default = BlockWrapper;
|
|
684
719
|
|
|
685
720
|
// src/components/block/components/component-ref/component-ref.tsx
|
|
686
|
-
import { Show as
|
|
721
|
+
import { Show as Show3, For, createSignal as createSignal2 } from "solid-js";
|
|
687
722
|
import { Dynamic as Dynamic3 } from "solid-js/web";
|
|
688
723
|
|
|
689
724
|
// src/components/block/components/interactive-element.tsx
|
|
@@ -747,12 +782,13 @@ function ComponentRef(props) {
|
|
|
747
782
|
const [Wrapper, setWrapper] = createSignal2(
|
|
748
783
|
props.isInteractive ? interactive_element_default : props.componentRef
|
|
749
784
|
);
|
|
750
|
-
return <
|
|
785
|
+
return <Show3 when={props.componentRef}><Dynamic3
|
|
751
786
|
{...getWrapperProps({
|
|
752
787
|
componentOptions: props.componentOptions,
|
|
753
788
|
builderBlock: props.builderBlock,
|
|
754
789
|
context: props.context,
|
|
755
790
|
componentRef: props.componentRef,
|
|
791
|
+
linkComponent: props.linkComponent,
|
|
756
792
|
includeBlockProps: props.includeBlockProps,
|
|
757
793
|
isInteractive: props.isInteractive,
|
|
758
794
|
contextValue: props.context
|
|
@@ -765,8 +801,9 @@ function ComponentRef(props) {
|
|
|
765
801
|
block={child}
|
|
766
802
|
context={props.context}
|
|
767
803
|
registeredComponents={props.registeredComponents}
|
|
804
|
+
linkComponent={props.linkComponent}
|
|
768
805
|
/>;
|
|
769
|
-
}}</For></Dynamic3></
|
|
806
|
+
}}</For></Dynamic3></Show3>;
|
|
770
807
|
}
|
|
771
808
|
var Component_ref_default = ComponentRef;
|
|
772
809
|
|
|
@@ -778,6 +815,7 @@ function RepeatedBlock(props) {
|
|
|
778
815
|
block={props.block}
|
|
779
816
|
context={store()}
|
|
780
817
|
registeredComponents={props.registeredComponents}
|
|
818
|
+
linkComponent={props.linkComponent}
|
|
781
819
|
/></builder_context_default.Provider>;
|
|
782
820
|
}
|
|
783
821
|
var Repeated_block_default = RepeatedBlock;
|
|
@@ -809,6 +847,10 @@ function Block(props) {
|
|
|
809
847
|
});
|
|
810
848
|
}
|
|
811
849
|
function Tag() {
|
|
850
|
+
const shouldUseLink = props.block.tagName === "a" || processedBlock().properties?.href || processedBlock().href;
|
|
851
|
+
if (shouldUseLink) {
|
|
852
|
+
return props.linkComponent || "a";
|
|
853
|
+
}
|
|
812
854
|
return props.block.tagName || "div";
|
|
813
855
|
}
|
|
814
856
|
function canShowBlock() {
|
|
@@ -832,32 +874,37 @@ function Block(props) {
|
|
|
832
874
|
componentOptions: {
|
|
833
875
|
...getBlockComponentOptions(processedBlock()),
|
|
834
876
|
builderContext: props.context,
|
|
877
|
+
...blockComponent()?.name === "Core:Button" || blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
|
|
878
|
+
builderLinkComponent: props.linkComponent
|
|
879
|
+
} : {},
|
|
835
880
|
...blockComponent()?.name === "Symbol" || blockComponent()?.name === "Columns" ? {
|
|
836
881
|
builderComponents: props.registeredComponents
|
|
837
882
|
} : {}
|
|
838
883
|
},
|
|
839
884
|
context: childrenContext(),
|
|
885
|
+
linkComponent: props.linkComponent,
|
|
840
886
|
registeredComponents: props.registeredComponents,
|
|
841
887
|
builderBlock: processedBlock(),
|
|
842
888
|
includeBlockProps: blockComponent()?.noWrap === true,
|
|
843
889
|
isInteractive: !blockComponent()?.isRSC
|
|
844
890
|
};
|
|
845
891
|
}
|
|
846
|
-
return <
|
|
892
|
+
return <Show4 when={canShowBlock()}>
|
|
847
893
|
<Block_styles_default block={props.block} context={props.context} />
|
|
848
|
-
<
|
|
894
|
+
<Show4
|
|
849
895
|
fallback={<Component_ref_default
|
|
850
896
|
componentRef={componentRefProps().componentRef}
|
|
851
897
|
componentOptions={componentRefProps().componentOptions}
|
|
852
898
|
blockChildren={componentRefProps().blockChildren}
|
|
853
899
|
context={componentRefProps().context}
|
|
854
900
|
registeredComponents={componentRefProps().registeredComponents}
|
|
901
|
+
linkComponent={componentRefProps().linkComponent}
|
|
855
902
|
builderBlock={componentRefProps().builderBlock}
|
|
856
903
|
includeBlockProps={componentRefProps().includeBlockProps}
|
|
857
904
|
isInteractive={componentRefProps().isInteractive}
|
|
858
905
|
/>}
|
|
859
906
|
when={!blockComponent()?.noWrap}
|
|
860
|
-
><
|
|
907
|
+
><Show4
|
|
861
908
|
fallback={<For2 each={repeatItem()}>{(data, _index) => {
|
|
862
909
|
const index = _index();
|
|
863
910
|
return <Repeated_block_default
|
|
@@ -865,6 +912,7 @@ function Block(props) {
|
|
|
865
912
|
repeatContext={data.context}
|
|
866
913
|
block={data.block}
|
|
867
914
|
registeredComponents={props.registeredComponents}
|
|
915
|
+
linkComponent={props.linkComponent}
|
|
868
916
|
/>;
|
|
869
917
|
}}</For2>}
|
|
870
918
|
when={!repeatItem()}
|
|
@@ -872,6 +920,7 @@ function Block(props) {
|
|
|
872
920
|
Wrapper={Tag()}
|
|
873
921
|
block={processedBlock()}
|
|
874
922
|
context={props.context}
|
|
923
|
+
linkComponent={props.linkComponent}
|
|
875
924
|
>
|
|
876
925
|
<Component_ref_default
|
|
877
926
|
componentRef={componentRefProps().componentRef}
|
|
@@ -879,6 +928,7 @@ function Block(props) {
|
|
|
879
928
|
blockChildren={componentRefProps().blockChildren}
|
|
880
929
|
context={componentRefProps().context}
|
|
881
930
|
registeredComponents={componentRefProps().registeredComponents}
|
|
931
|
+
linkComponent={componentRefProps().linkComponent}
|
|
882
932
|
builderBlock={componentRefProps().builderBlock}
|
|
883
933
|
includeBlockProps={componentRefProps().includeBlockProps}
|
|
884
934
|
isInteractive={componentRefProps().isInteractive}
|
|
@@ -890,10 +940,11 @@ function Block(props) {
|
|
|
890
940
|
block={child}
|
|
891
941
|
context={childrenContext()}
|
|
892
942
|
registeredComponents={props.registeredComponents}
|
|
943
|
+
linkComponent={props.linkComponent}
|
|
893
944
|
/>;
|
|
894
945
|
}}</For2>
|
|
895
|
-
</Block_wrapper_default></
|
|
896
|
-
</
|
|
946
|
+
</Block_wrapper_default></Show4></Show4>
|
|
947
|
+
</Show4>;
|
|
897
948
|
}
|
|
898
949
|
var Block_default = Block;
|
|
899
950
|
|
|
@@ -962,15 +1013,16 @@ function Blocks(props) {
|
|
|
962
1013
|
styleProp={props.styleProp}
|
|
963
1014
|
BlocksWrapper={props.context?.BlocksWrapper}
|
|
964
1015
|
BlocksWrapperProps={props.context?.BlocksWrapperProps}
|
|
965
|
-
><
|
|
1016
|
+
><Show5 when={props.blocks}><For3 each={props.blocks}>{(block, _index) => {
|
|
966
1017
|
const index = _index();
|
|
967
1018
|
return <Block_default
|
|
968
1019
|
key={block.id}
|
|
969
1020
|
block={block}
|
|
1021
|
+
linkComponent={props.linkComponent}
|
|
970
1022
|
context={props.context || builderContext}
|
|
971
1023
|
registeredComponents={props.registeredComponents || componentsContext.registeredComponents}
|
|
972
1024
|
/>;
|
|
973
|
-
}}</For3></
|
|
1025
|
+
}}</For3></Show5></Blocks_wrapper_default>;
|
|
974
1026
|
}
|
|
975
1027
|
var Blocks_default = Blocks;
|
|
976
1028
|
|
|
@@ -1019,7 +1071,13 @@ function Columns(props) {
|
|
|
1019
1071
|
const mobileWidth = "100%";
|
|
1020
1072
|
const mobileMarginLeft = 0;
|
|
1021
1073
|
const marginLeftKey = "margin-left";
|
|
1074
|
+
const sharedStyles = {
|
|
1075
|
+
display: "flex",
|
|
1076
|
+
flexDirection: "column",
|
|
1077
|
+
alignItems: "stretch"
|
|
1078
|
+
};
|
|
1022
1079
|
return {
|
|
1080
|
+
...sharedStyles,
|
|
1023
1081
|
width,
|
|
1024
1082
|
[marginLeftKey]: gutterPixels,
|
|
1025
1083
|
"--column-width-mobile": getMobileStyle({
|
|
@@ -1081,18 +1139,21 @@ function Columns(props) {
|
|
|
1081
1139
|
style={columnsCssVars()}
|
|
1082
1140
|
{...{}}
|
|
1083
1141
|
>
|
|
1084
|
-
<
|
|
1142
|
+
<Show6 when={TARGET !== "reactNative"}><Inlined_styles_default styles={columnsStyles()} /></Show6>
|
|
1085
1143
|
<For4 each={props.columns}>{(column, _index) => {
|
|
1086
1144
|
const index = _index();
|
|
1087
|
-
return <
|
|
1088
|
-
class={"builder-column " + css2({
|
|
1089
|
-
display: "flex",
|
|
1090
|
-
flexDirection: "column",
|
|
1091
|
-
alignItems: "stretch"
|
|
1092
|
-
})}
|
|
1093
|
-
style={columnCssVars(index)}
|
|
1094
|
-
{...{}}
|
|
1145
|
+
return <Dynamic_renderer_default
|
|
1095
1146
|
key={index}
|
|
1147
|
+
TagName={column.link ? props.builderLinkComponent || "a" : "div"}
|
|
1148
|
+
actionAttributes={{}}
|
|
1149
|
+
attributes={{
|
|
1150
|
+
...{},
|
|
1151
|
+
...column.link ? {
|
|
1152
|
+
href: column.link
|
|
1153
|
+
} : {},
|
|
1154
|
+
[getClassPropName()]: "builder-column",
|
|
1155
|
+
style: mapStyleObjToStrIfNeeded(columnCssVars(index))
|
|
1156
|
+
}}
|
|
1096
1157
|
><Blocks_default
|
|
1097
1158
|
path={`component.options.columns.${index}.blocks`}
|
|
1098
1159
|
parent={props.builderBlock.id}
|
|
@@ -1101,8 +1162,9 @@ function Columns(props) {
|
|
|
1101
1162
|
}}
|
|
1102
1163
|
context={props.builderContext}
|
|
1103
1164
|
registeredComponents={props.builderComponents}
|
|
1165
|
+
linkComponent={props.builderLinkComponent}
|
|
1104
1166
|
blocks={column.blocks}
|
|
1105
|
-
/></
|
|
1167
|
+
/></Dynamic_renderer_default>;
|
|
1106
1168
|
}}</For4>
|
|
1107
1169
|
</div>;
|
|
1108
1170
|
}
|
|
@@ -1115,7 +1177,7 @@ function FragmentComponent(props) {
|
|
|
1115
1177
|
var fragment_default = FragmentComponent;
|
|
1116
1178
|
|
|
1117
1179
|
// src/blocks/image/image.tsx
|
|
1118
|
-
import { Show as
|
|
1180
|
+
import { Show as Show7 } from "solid-js";
|
|
1119
1181
|
import { css as css3 } from "solid-styled-components";
|
|
1120
1182
|
|
|
1121
1183
|
// src/blocks/image/image.helpers.ts
|
|
@@ -1204,7 +1266,7 @@ function Image(props) {
|
|
|
1204
1266
|
}
|
|
1205
1267
|
return <>
|
|
1206
1268
|
<picture>
|
|
1207
|
-
<
|
|
1269
|
+
<Show7 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show7>
|
|
1208
1270
|
<img
|
|
1209
1271
|
class={"builder-image" + (props.className ? " " + props.className : "") + " " + css3({
|
|
1210
1272
|
opacity: "1",
|
|
@@ -1223,7 +1285,7 @@ function Image(props) {
|
|
|
1223
1285
|
sizes={props.sizes}
|
|
1224
1286
|
/>
|
|
1225
1287
|
</picture>
|
|
1226
|
-
<
|
|
1288
|
+
<Show7
|
|
1227
1289
|
when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
|
|
1228
1290
|
><div
|
|
1229
1291
|
class={"builder-image-sizer " + css3({
|
|
@@ -1234,9 +1296,9 @@ function Image(props) {
|
|
|
1234
1296
|
style={{
|
|
1235
1297
|
"padding-top": props.aspectRatio * 100 + "%"
|
|
1236
1298
|
}}
|
|
1237
|
-
/></
|
|
1238
|
-
<
|
|
1239
|
-
<
|
|
1299
|
+
/></Show7>
|
|
1300
|
+
<Show7 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show7>
|
|
1301
|
+
<Show7 when={!props.fitContent && props.children}><div
|
|
1240
1302
|
class={css3({
|
|
1241
1303
|
display: "flex",
|
|
1242
1304
|
flexDirection: "column",
|
|
@@ -1247,7 +1309,7 @@ function Image(props) {
|
|
|
1247
1309
|
width: "100%",
|
|
1248
1310
|
height: "100%"
|
|
1249
1311
|
})}
|
|
1250
|
-
>{props.children}</div></
|
|
1312
|
+
>{props.children}</div></Show7>
|
|
1251
1313
|
</>;
|
|
1252
1314
|
}
|
|
1253
1315
|
var image_default = Image;
|
|
@@ -1277,7 +1339,7 @@ var section_default = SectionComponent;
|
|
|
1277
1339
|
import { onMount as onMount4, on as on3, createEffect as createEffect3, createSignal as createSignal14 } from "solid-js";
|
|
1278
1340
|
|
|
1279
1341
|
// src/components/content-variants/content-variants.tsx
|
|
1280
|
-
import { Show as
|
|
1342
|
+
import { Show as Show11, For as For5, onMount as onMount3, createSignal as createSignal13 } from "solid-js";
|
|
1281
1343
|
|
|
1282
1344
|
// src/helpers/url.ts
|
|
1283
1345
|
var getTopLevelDomain = (host) => {
|
|
@@ -1471,7 +1533,7 @@ var handleABTesting = async ({
|
|
|
1471
1533
|
var getDefaultCanTrack = (canTrack) => checkIsDefined(canTrack) ? canTrack : true;
|
|
1472
1534
|
|
|
1473
1535
|
// src/components/content/content.tsx
|
|
1474
|
-
import { Show as
|
|
1536
|
+
import { Show as Show10, createSignal as createSignal12 } from "solid-js";
|
|
1475
1537
|
|
|
1476
1538
|
// src/blocks/button/component-info.ts
|
|
1477
1539
|
var componentInfo = {
|
|
@@ -2277,7 +2339,7 @@ var componentInfo12 = {
|
|
|
2277
2339
|
};
|
|
2278
2340
|
|
|
2279
2341
|
// src/blocks/video/video.tsx
|
|
2280
|
-
import { Show as
|
|
2342
|
+
import { Show as Show8 } from "solid-js";
|
|
2281
2343
|
function Video(props) {
|
|
2282
2344
|
function videoProps() {
|
|
2283
2345
|
return {
|
|
@@ -2328,8 +2390,8 @@ function Video(props) {
|
|
|
2328
2390
|
}}
|
|
2329
2391
|
src={props.video || "no-src"}
|
|
2330
2392
|
poster={props.posterImage}
|
|
2331
|
-
><
|
|
2332
|
-
<
|
|
2393
|
+
><Show8 when={!props.lazyLoad}><source type="video/mp4" src={props.video} /></Show8></video>
|
|
2394
|
+
<Show8
|
|
2333
2395
|
when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}
|
|
2334
2396
|
><div
|
|
2335
2397
|
style={{
|
|
@@ -2338,15 +2400,15 @@ function Video(props) {
|
|
|
2338
2400
|
"pointer-events": "none",
|
|
2339
2401
|
"font-size": "0px"
|
|
2340
2402
|
}}
|
|
2341
|
-
/></
|
|
2342
|
-
<
|
|
2403
|
+
/></Show8>
|
|
2404
|
+
<Show8 when={props.builderBlock?.children?.length && props.fitContent}><div
|
|
2343
2405
|
style={{
|
|
2344
2406
|
display: "flex",
|
|
2345
2407
|
"flex-direction": "column",
|
|
2346
2408
|
"align-items": "stretch"
|
|
2347
2409
|
}}
|
|
2348
|
-
>{props.children}</div></
|
|
2349
|
-
<
|
|
2410
|
+
>{props.children}</div></Show8>
|
|
2411
|
+
<Show8 when={props.builderBlock?.children?.length && !props.fitContent}><div
|
|
2350
2412
|
style={{
|
|
2351
2413
|
"pointer-events": "none",
|
|
2352
2414
|
display: "flex",
|
|
@@ -2358,7 +2420,7 @@ function Video(props) {
|
|
|
2358
2420
|
width: "100%",
|
|
2359
2421
|
height: "100%"
|
|
2360
2422
|
}}
|
|
2361
|
-
>{props.children}</div></
|
|
2423
|
+
>{props.children}</div></Show8>
|
|
2362
2424
|
</div>;
|
|
2363
2425
|
}
|
|
2364
2426
|
var video_default = Video;
|
|
@@ -2478,7 +2540,7 @@ function InlinedScript(props) {
|
|
|
2478
2540
|
var Inlined_script_default = InlinedScript;
|
|
2479
2541
|
|
|
2480
2542
|
// src/components/content/components/enable-editor.tsx
|
|
2481
|
-
import { Show as
|
|
2543
|
+
import { Show as Show9, onMount as onMount2, on as on2, createEffect as createEffect2, createSignal as createSignal10 } from "solid-js";
|
|
2482
2544
|
import { Dynamic as Dynamic5 } from "solid-js/web";
|
|
2483
2545
|
|
|
2484
2546
|
// src/helpers/preview-lru-cache/get.ts
|
|
@@ -2968,7 +3030,7 @@ var getInteractionPropertiesForEvent = (event) => {
|
|
|
2968
3030
|
};
|
|
2969
3031
|
|
|
2970
3032
|
// src/constants/sdk-version.ts
|
|
2971
|
-
var SDK_VERSION = "0.12.
|
|
3033
|
+
var SDK_VERSION = "0.12.4";
|
|
2972
3034
|
|
|
2973
3035
|
// src/functions/register.ts
|
|
2974
3036
|
var registry = {};
|
|
@@ -3390,7 +3452,7 @@ function EnableEditor(props) {
|
|
|
3390
3452
|
}
|
|
3391
3453
|
}
|
|
3392
3454
|
createEffect2(on2(() => [props.locale], onUpdateFn_6));
|
|
3393
|
-
return <builder_context_default.Provider value={props.builderContextSignal}><
|
|
3455
|
+
return <builder_context_default.Provider value={props.builderContextSignal}><Show9 when={props.builderContextSignal.content}><Dynamic5
|
|
3394
3456
|
class={`variant-${props.content?.testVariationId || props.content?.id}`}
|
|
3395
3457
|
{...{}}
|
|
3396
3458
|
key={forceReRenderCount()}
|
|
@@ -3405,7 +3467,7 @@ function EnableEditor(props) {
|
|
|
3405
3467
|
}}
|
|
3406
3468
|
{...props.contentWrapperProps}
|
|
3407
3469
|
component={ContentWrapper()}
|
|
3408
|
-
>{props.children}</Dynamic5></
|
|
3470
|
+
>{props.children}</Dynamic5></Show9></builder_context_default.Provider>;
|
|
3409
3471
|
}
|
|
3410
3472
|
var Enable_editor_default = EnableEditor;
|
|
3411
3473
|
|
|
@@ -3627,21 +3689,23 @@ function ContentComponent(props) {
|
|
|
3627
3689
|
builderContextSignal={builderContextSignal()}
|
|
3628
3690
|
contentWrapper={props.contentWrapper}
|
|
3629
3691
|
contentWrapperProps={props.contentWrapperProps}
|
|
3692
|
+
linkComponent={props.linkComponent}
|
|
3630
3693
|
trustedHosts={props.trustedHosts}
|
|
3631
3694
|
{...{
|
|
3632
3695
|
setBuilderContextSignal
|
|
3633
3696
|
}}
|
|
3634
3697
|
>
|
|
3635
|
-
<
|
|
3636
|
-
<
|
|
3698
|
+
<Show10 when={props.isSsrAbTest}><Inlined_script_default scriptStr={scriptStr()} /></Show10>
|
|
3699
|
+
<Show10 when={TARGET !== "reactNative"}><Styles_default
|
|
3637
3700
|
contentId={builderContextSignal().content?.id}
|
|
3638
3701
|
cssCode={builderContextSignal().content?.data?.cssCode}
|
|
3639
3702
|
customFonts={builderContextSignal().content?.data?.customFonts}
|
|
3640
|
-
/></
|
|
3703
|
+
/></Show10>
|
|
3641
3704
|
<Blocks_default
|
|
3642
3705
|
blocks={builderContextSignal().content?.data?.blocks}
|
|
3643
3706
|
context={builderContextSignal()}
|
|
3644
3707
|
registeredComponents={registeredComponents()}
|
|
3708
|
+
linkComponent={props.linkComponent}
|
|
3645
3709
|
/>
|
|
3646
3710
|
</Enable_editor_default></components_context_default.Provider>;
|
|
3647
3711
|
}
|
|
@@ -3680,8 +3744,8 @@ function ContentVariants(props) {
|
|
|
3680
3744
|
setShouldRenderVariants(false);
|
|
3681
3745
|
});
|
|
3682
3746
|
return <>
|
|
3683
|
-
<
|
|
3684
|
-
<
|
|
3747
|
+
<Show11 when={!props.__isNestedRender && TARGET !== "reactNative"}><Inlined_script_default scriptStr={getScriptString()} /></Show11>
|
|
3748
|
+
<Show11 when={shouldRenderVariants()}>
|
|
3685
3749
|
<Inlined_styles_default
|
|
3686
3750
|
id={`variants-styles-${props.content?.id}`}
|
|
3687
3751
|
styles={hideVariantsStyleString()}
|
|
@@ -3701,6 +3765,7 @@ function ContentVariants(props) {
|
|
|
3701
3765
|
apiKey={props.apiKey}
|
|
3702
3766
|
apiVersion={props.apiVersion}
|
|
3703
3767
|
customComponents={props.customComponents}
|
|
3768
|
+
linkComponent={props.linkComponent}
|
|
3704
3769
|
canTrack={props.canTrack}
|
|
3705
3770
|
locale={props.locale}
|
|
3706
3771
|
includeRefs={props.includeRefs}
|
|
@@ -3713,7 +3778,7 @@ function ContentVariants(props) {
|
|
|
3713
3778
|
trustedHosts={props.trustedHosts}
|
|
3714
3779
|
/>;
|
|
3715
3780
|
}}</For5>
|
|
3716
|
-
</
|
|
3781
|
+
</Show11>
|
|
3717
3782
|
<Content_default
|
|
3718
3783
|
{...{}}
|
|
3719
3784
|
content={defaultContent()}
|
|
@@ -3724,6 +3789,7 @@ function ContentVariants(props) {
|
|
|
3724
3789
|
apiKey={props.apiKey}
|
|
3725
3790
|
apiVersion={props.apiVersion}
|
|
3726
3791
|
customComponents={props.customComponents}
|
|
3792
|
+
linkComponent={props.linkComponent}
|
|
3727
3793
|
canTrack={props.canTrack}
|
|
3728
3794
|
locale={props.locale}
|
|
3729
3795
|
includeRefs={props.includeRefs}
|
|
@@ -3768,7 +3834,7 @@ function Symbol(props) {
|
|
|
3768
3834
|
const [contentToUse, setContentToUse] = createSignal14(props.symbol?.content);
|
|
3769
3835
|
function className() {
|
|
3770
3836
|
return [
|
|
3771
|
-
...[props.attributes
|
|
3837
|
+
...[props.attributes[getClassPropName()]],
|
|
3772
3838
|
"builder-symbol",
|
|
3773
3839
|
props.symbol?.inline ? "builder-inline-symbol" : void 0,
|
|
3774
3840
|
props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
|
|
@@ -3809,6 +3875,7 @@ function Symbol(props) {
|
|
|
3809
3875
|
}}
|
|
3810
3876
|
model={props.symbol?.model}
|
|
3811
3877
|
content={contentToUse()}
|
|
3878
|
+
linkComponent={props.builderLinkComponent}
|
|
3812
3879
|
/></div>;
|
|
3813
3880
|
}
|
|
3814
3881
|
var symbol_default = Symbol;
|