@builder.io/sdk-qwik 0.1.4 → 0.1.5

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.
@@ -132,7 +132,35 @@ const setupBrowserForEditing = (options = {}) => {
132
132
  });
133
133
  }
134
134
  };
135
- const BuilderContext = qwik.createContext("Builder");
135
+ const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
136
+ qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$3, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
137
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
138
+ children: props.link ? /* @__PURE__ */ jsxRuntime.jsx("a", {
139
+ role: "button",
140
+ ...props.attributes,
141
+ get href() {
142
+ return props.link;
143
+ },
144
+ target: props.openLinkInNewTab ? "_blank" : void 0,
145
+ children: qwik._wrapSignal(props, "text"),
146
+ [qwik._IMMUTABLE]: {
147
+ href: qwik._wrapSignal(props, "link")
148
+ }
149
+ }) : /* @__PURE__ */ jsxRuntime.jsx("button", {
150
+ class: "button-Button",
151
+ ...props.attributes,
152
+ children: qwik._wrapSignal(props, "text")
153
+ }),
154
+ [qwik._IMMUTABLE]: {
155
+ children: false
156
+ }
157
+ }, "jc_0");
158
+ }, "Button_component_gJoMUICXoUQ"));
159
+ const STYLES$3 = `
160
+ .button-Button {
161
+ all: unset;
162
+ }`;
163
+ const builderContext = qwik.createContext("Builder");
136
164
  function isIframe() {
137
165
  return isBrowser() && window.self !== window.top;
138
166
  }
@@ -506,7 +534,7 @@ const RenderComponent = (props) => {
506
534
  }, "R9_0");
507
535
  };
508
536
  const RenderRepeatedBlock = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
509
- qwik.useContextProvider(BuilderContext, qwik.useStore({
537
+ qwik.useContextProvider(builderContext, qwik.useStore({
510
538
  content: props.repeatContext.content,
511
539
  state: props.repeatContext.state,
512
540
  context: props.repeatContext.context,
@@ -544,10 +572,24 @@ const useBlock = function useBlock22(props, state) {
544
572
  shouldEvaluateBindings: true
545
573
  });
546
574
  };
575
+ const proxyState = function proxyState2(props, state) {
576
+ if (typeof Proxy === "undefined") {
577
+ console.error("no Proxy available in this environment, cannot proxy state.");
578
+ return props.context.state;
579
+ }
580
+ const useState = new Proxy(props.context.state, {
581
+ set: (obj, prop, value) => {
582
+ obj[prop] = value;
583
+ props.context.setState?.(obj);
584
+ return true;
585
+ }
586
+ });
587
+ return useState;
588
+ };
547
589
  const actions = function actions2(props, state) {
548
590
  return getBlockActions({
549
591
  block: useBlock(props),
550
- state: props.context.state,
592
+ state: proxyState(props),
551
593
  context: props.context.context
552
594
  });
553
595
  };
@@ -594,6 +636,7 @@ const childrenContext = function childrenContext2(props, state) {
594
636
  state: props.context.state,
595
637
  content: props.context.content,
596
638
  context: props.context.context,
639
+ setState: props.context.setState,
597
640
  registeredComponents: props.context.registeredComponents,
598
641
  inheritedStyles: getInheritedTextStyles()
599
642
  };
@@ -656,10 +699,10 @@ const RenderBlock = (props) => {
656
699
  }, "9d_3");
657
700
  };
658
701
  const RenderBlock$1 = RenderBlock;
659
- const className$1 = function className2(props, state, builderContext) {
702
+ const className$1 = function className2(props, state, builderContext2) {
660
703
  return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
661
704
  };
662
- const onClick$1 = function onClick2(props, state, builderContext) {
705
+ const onClick$1 = function onClick2(props, state, builderContext2) {
663
706
  if (isEditing() && !props.blocks?.length)
664
707
  window.parent?.postMessage({
665
708
  type: "builder.clickEmptyBlocks",
@@ -669,7 +712,7 @@ const onClick$1 = function onClick2(props, state, builderContext) {
669
712
  }
670
713
  }, "*");
671
714
  };
672
- const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
715
+ const onMouseEnter = function onMouseEnter2(props, state, builderContext2) {
673
716
  if (isEditing() && !props.blocks?.length)
674
717
  window.parent?.postMessage({
675
718
  type: "builder.hoverEmptyBlocks",
@@ -680,8 +723,8 @@ const onMouseEnter = function onMouseEnter2(props, state, builderContext) {
680
723
  }, "*");
681
724
  };
682
725
  const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
683
- qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$3, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
684
- const builderContext = qwik.useContext(BuilderContext);
726
+ qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$2, "RenderBlocks_component_useStylesScoped_0XKYzaR059E"));
727
+ const builderContext$1 = qwik.useContext(builderContext);
685
728
  const state = {};
686
729
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
687
730
  class: className$1(props) + " div-RenderBlocks",
@@ -698,7 +741,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
698
741
  const [builderContext2, props2, state2] = qwik.useLexicalScope();
699
742
  return onClick$1(props2);
700
743
  }, "RenderBlocks_component_div_onClick_RzhhZa265Yg", [
701
- builderContext,
744
+ builderContext$1,
702
745
  props,
703
746
  state
704
747
  ]),
@@ -706,7 +749,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
706
749
  const [builderContext2, props2, state2] = qwik.useLexicalScope();
707
750
  return onMouseEnter(props2);
708
751
  }, "RenderBlocks_component_div_onMouseEnter_nG7I7RYG3JQ", [
709
- builderContext,
752
+ builderContext$1,
710
753
  props,
711
754
  state
712
755
  ]),
@@ -714,13 +757,13 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
714
757
  props.blocks ? (props.blocks || []).map(function(block) {
715
758
  return /* @__PURE__ */ jsxRuntime.jsx(RenderBlock$1, {
716
759
  block,
717
- context: builderContext
760
+ context: builderContext$1
718
761
  }, "render-block-" + block.id);
719
762
  }) : null,
720
763
  props.blocks ? (props.blocks || []).map(function(block) {
721
764
  return /* @__PURE__ */ jsxRuntime.jsx(BlockStyles, {
722
765
  block,
723
- context: builderContext
766
+ context: builderContext$1
724
767
  }, "block-style-" + block.id);
725
768
  }) : null
726
769
  ],
@@ -732,7 +775,7 @@ const RenderBlocks = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
732
775
  }
733
776
  });
734
777
  }, "RenderBlocks_component_MYUZ0j1uLsw"));
735
- const STYLES$3 = `
778
+ const STYLES$2 = `
736
779
  .div-RenderBlocks {
737
780
  display: flex;
738
781
  flex-direction: column;
@@ -827,7 +870,7 @@ const columnsStyles = function columnsStyles2(props, state) {
827
870
  `;
828
871
  };
829
872
  const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
830
- qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$2, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
873
+ qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
831
874
  const state = {};
832
875
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
833
876
  class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
@@ -872,7 +915,7 @@ const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
872
915
  }
873
916
  });
874
917
  }, "Columns_component_7yLj4bxdI6c"));
875
- const STYLES$2 = `
918
+ const STYLES$1 = `
876
919
  .div-Columns {
877
920
  display: flex;
878
921
  line-height: normal;
@@ -881,6 +924,11 @@ const STYLES$2 = `
881
924
  flex-direction: column;
882
925
  align-items: stretch;
883
926
  }`;
927
+ const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
928
+ return /* @__PURE__ */ jsxRuntime.jsx("span", {
929
+ children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}, "oj_0")
930
+ });
931
+ }, "FragmentComponent_component_T0AypnadAK0"));
884
932
  function removeProtocol(path) {
885
933
  return path.replace(/http(s)?:/, "");
886
934
  }
@@ -967,7 +1015,7 @@ const aspectRatioCss = function aspectRatioCss2(props, state) {
967
1015
  return out;
968
1016
  };
969
1017
  const Image = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
970
- qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Image_component_useStylesScoped_fBMYiVf9fuU"));
1018
+ qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES, "Image_component_useStylesScoped_fBMYiVf9fuU"));
971
1019
  return /* @__PURE__ */ jsxRuntime.jsxs(qwik.Fragment, {
972
1020
  children: [
973
1021
  /* @__PURE__ */ jsxRuntime.jsxs("picture", {
@@ -1023,7 +1071,7 @@ const Image = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1023
1071
  }
1024
1072
  }, "0A_2");
1025
1073
  }, "Image_component_LRxDkFa1EfU"));
1026
- const STYLES$1 = `
1074
+ const STYLES = `
1027
1075
  .img-Image {
1028
1076
  opacity: 1;
1029
1077
  transition: opacity 0.2s ease-in-out;
@@ -1041,90 +1089,6 @@ const STYLES$1 = `
1041
1089
  width: 100%;
1042
1090
  height: 100%;
1043
1091
  }`;
1044
- const Text = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1045
- return /* @__PURE__ */ jsxRuntime.jsx("span", {
1046
- class: "builder-text",
1047
- get dangerouslySetInnerHTML() {
1048
- return props.text;
1049
- },
1050
- [qwik._IMMUTABLE]: {
1051
- dangerouslySetInnerHTML: qwik._wrapSignal(props, "text")
1052
- }
1053
- });
1054
- }, "Text_component_15p0cKUxgIE"));
1055
- const videoProps = function videoProps2(props, state) {
1056
- return {
1057
- ...props.autoPlay === true ? {
1058
- autoPlay: true
1059
- } : {},
1060
- ...props.muted === true ? {
1061
- muted: true
1062
- } : {},
1063
- ...props.controls === true ? {
1064
- controls: true
1065
- } : {},
1066
- ...props.loop === true ? {
1067
- loop: true
1068
- } : {},
1069
- ...props.playsInline === true ? {
1070
- playsInline: true
1071
- } : {}
1072
- };
1073
- };
1074
- const spreadProps = function spreadProps2(props, state) {
1075
- return {
1076
- ...props.attributes,
1077
- ...videoProps(props)
1078
- };
1079
- };
1080
- const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1081
- return /* @__PURE__ */ jsxRuntime.jsx("video", {
1082
- ...spreadProps(props),
1083
- style: {
1084
- width: "100%",
1085
- height: "100%",
1086
- ...props.attributes?.style,
1087
- objectFit: props.fit,
1088
- objectPosition: props.position,
1089
- borderRadius: 1
1090
- },
1091
- src: props.video || "no-src",
1092
- get poster() {
1093
- return props.posterImage;
1094
- },
1095
- [qwik._IMMUTABLE]: {
1096
- poster: qwik._wrapSignal(props, "posterImage")
1097
- }
1098
- });
1099
- }, "Video_component_qdcTZflYyoQ"));
1100
- const Button = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1101
- qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES, "Button_component_useStylesScoped_a1JZ0Q0Q2Oc"));
1102
- return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
1103
- children: props.link ? /* @__PURE__ */ jsxRuntime.jsx("a", {
1104
- role: "button",
1105
- ...props.attributes,
1106
- get href() {
1107
- return props.link;
1108
- },
1109
- target: props.openLinkInNewTab ? "_blank" : void 0,
1110
- children: qwik._wrapSignal(props, "text"),
1111
- [qwik._IMMUTABLE]: {
1112
- href: qwik._wrapSignal(props, "link")
1113
- }
1114
- }) : /* @__PURE__ */ jsxRuntime.jsx("button", {
1115
- class: "button-Button",
1116
- ...props.attributes,
1117
- children: qwik._wrapSignal(props, "text")
1118
- }),
1119
- [qwik._IMMUTABLE]: {
1120
- children: false
1121
- }
1122
- }, "jc_0");
1123
- }, "Button_component_gJoMUICXoUQ"));
1124
- const STYLES = `
1125
- .button-Button {
1126
- all: unset;
1127
- }`;
1128
1092
  const componentInfo$a = {
1129
1093
  name: "Core:Button",
1130
1094
  builtIn: true,
@@ -1417,11 +1381,6 @@ const componentInfo$8 = {
1417
1381
  canHaveChildren: true,
1418
1382
  noWrap: true
1419
1383
  };
1420
- const FragmentComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1421
- return /* @__PURE__ */ jsxRuntime.jsx("span", {
1422
- children: /* @__PURE__ */ jsxRuntime.jsx(qwik.Slot, {}, "oj_0")
1423
- });
1424
- }, "FragmentComponent_component_T0AypnadAK0"));
1425
1384
  const componentInfo$7 = {
1426
1385
  name: "Image",
1427
1386
  static: true,
@@ -1675,667 +1634,787 @@ const componentInfo$5 = {
1675
1634
  }
1676
1635
  ]
1677
1636
  };
1678
- const componentInfo$4 = {
1679
- name: "Text",
1680
- static: true,
1681
- builtIn: true,
1682
- image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
1683
- inputs: [
1684
- {
1685
- name: "text",
1686
- type: "html",
1687
- required: true,
1688
- autoFocus: true,
1689
- bubble: true,
1690
- defaultValue: "Enter some text..."
1691
- }
1637
+ function getGlobalThis() {
1638
+ if (typeof globalThis !== "undefined")
1639
+ return globalThis;
1640
+ if (typeof window !== "undefined")
1641
+ return window;
1642
+ if (typeof global !== "undefined")
1643
+ return global;
1644
+ if (typeof self !== "undefined")
1645
+ return self;
1646
+ return globalThis;
1647
+ }
1648
+ function getFetch() {
1649
+ const globalFetch = getGlobalThis().fetch;
1650
+ if (typeof globalFetch === "undefined") {
1651
+ console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project.
1652
+ For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
1653
+ throw new Error("Builder SDK could not find a global `fetch` function");
1654
+ }
1655
+ return globalFetch;
1656
+ }
1657
+ const fetch$1 = getFetch();
1658
+ const getTopLevelDomain = (host) => {
1659
+ if (host === "localhost" || host === "127.0.0.1")
1660
+ return host;
1661
+ const parts = host.split(".");
1662
+ if (parts.length > 2)
1663
+ return parts.slice(1).join(".");
1664
+ return host;
1665
+ };
1666
+ const getCookie = async ({ name, canTrack }) => {
1667
+ try {
1668
+ if (!canTrack)
1669
+ return void 0;
1670
+ return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
1671
+ } catch (err) {
1672
+ console.debug("[COOKIE] GET error: ", err);
1673
+ return void 0;
1674
+ }
1675
+ };
1676
+ const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
1677
+ const SECURE_CONFIG = [
1678
+ [
1679
+ "secure",
1680
+ ""
1692
1681
  ],
1693
- defaultStyles: {
1694
- lineHeight: "normal",
1695
- height: "auto",
1696
- textAlign: "center"
1682
+ [
1683
+ "SameSite",
1684
+ "None"
1685
+ ]
1686
+ ];
1687
+ const createCookieString = ({ name, value, expires }) => {
1688
+ const secure = isBrowser() ? location.protocol === "https:" : true;
1689
+ const secureObj = secure ? SECURE_CONFIG : [
1690
+ []
1691
+ ];
1692
+ const expiresObj = expires ? [
1693
+ [
1694
+ "expires",
1695
+ expires.toUTCString()
1696
+ ]
1697
+ ] : [
1698
+ []
1699
+ ];
1700
+ const cookieValue = [
1701
+ [
1702
+ name,
1703
+ value
1704
+ ],
1705
+ ...expiresObj,
1706
+ [
1707
+ "path",
1708
+ "/"
1709
+ ],
1710
+ [
1711
+ "domain",
1712
+ getTopLevelDomain(window.location.hostname)
1713
+ ],
1714
+ ...secureObj
1715
+ ];
1716
+ const cookie = stringifyCookie(cookieValue);
1717
+ return cookie;
1718
+ };
1719
+ const setCookie = async ({ name, value, expires, canTrack }) => {
1720
+ try {
1721
+ if (!canTrack)
1722
+ return;
1723
+ const cookie = createCookieString({
1724
+ name,
1725
+ value,
1726
+ expires
1727
+ });
1728
+ document.cookie = cookie;
1729
+ } catch (err) {
1730
+ console.warn("[COOKIE] SET error: ", err);
1697
1731
  }
1698
1732
  };
1699
- const componentInfo$3 = {
1700
- name: "Video",
1701
- canHaveChildren: true,
1702
- builtIn: true,
1703
- defaultStyles: {
1704
- minHeight: "20px",
1705
- minWidth: "20px"
1706
- },
1707
- image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
1708
- inputs: [
1709
- {
1710
- name: "video",
1711
- type: "file",
1712
- allowedFileTypes: [
1713
- "mp4"
1714
- ],
1715
- bubble: true,
1716
- defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
1717
- required: true
1718
- },
1719
- {
1720
- name: "posterImage",
1721
- type: "file",
1722
- allowedFileTypes: [
1723
- "jpeg",
1724
- "png"
1725
- ],
1726
- helperText: "Image to show before the video plays"
1727
- },
1728
- {
1729
- name: "autoPlay",
1730
- type: "boolean",
1731
- defaultValue: true
1732
- },
1733
- {
1734
- name: "controls",
1735
- type: "boolean",
1736
- defaultValue: false
1737
- },
1738
- {
1739
- name: "muted",
1740
- type: "boolean",
1741
- defaultValue: true
1742
- },
1743
- {
1744
- name: "loop",
1745
- type: "boolean",
1746
- defaultValue: true
1747
- },
1748
- {
1749
- name: "playsInline",
1750
- type: "boolean",
1751
- defaultValue: true
1752
- },
1753
- {
1754
- name: "fit",
1755
- type: "text",
1756
- defaultValue: "cover",
1757
- enum: [
1758
- "contain",
1759
- "cover",
1760
- "fill",
1761
- "auto"
1762
- ]
1763
- },
1764
- {
1765
- name: "fitContent",
1766
- type: "boolean",
1767
- helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
1768
- defaultValue: true,
1769
- advanced: true
1770
- },
1771
- {
1772
- name: "position",
1773
- type: "text",
1774
- defaultValue: "center",
1775
- enum: [
1776
- "center",
1777
- "top",
1778
- "left",
1779
- "right",
1780
- "bottom",
1781
- "top left",
1782
- "top right",
1783
- "bottom left",
1784
- "bottom right"
1785
- ]
1786
- },
1787
- {
1788
- name: "height",
1789
- type: "number",
1790
- advanced: true
1791
- },
1792
- {
1793
- name: "width",
1794
- type: "number",
1795
- advanced: true
1796
- },
1797
- {
1798
- name: "aspectRatio",
1799
- type: "number",
1800
- advanced: true,
1801
- defaultValue: 0.7004048582995948
1802
- },
1803
- {
1804
- name: "lazyLoad",
1805
- type: "boolean",
1806
- helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
1807
- defaultValue: true,
1808
- advanced: true
1809
- }
1810
- ]
1733
+ const BUILDER_STORE_PREFIX = "builderio.variations";
1734
+ const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
1735
+ const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
1736
+ name: getContentTestKey(contentId),
1737
+ canTrack
1738
+ });
1739
+ const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
1740
+ name: getContentTestKey(contentId),
1741
+ value,
1742
+ canTrack
1743
+ });
1744
+ const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
1745
+ const getRandomVariationId = ({ id, variations }) => {
1746
+ let n = 0;
1747
+ const random = Math.random();
1748
+ for (const id1 in variations) {
1749
+ const testRatio = variations[id1]?.testRatio;
1750
+ n += testRatio;
1751
+ if (random < n)
1752
+ return id1;
1753
+ }
1754
+ return id;
1811
1755
  };
1812
- const componentInfo$2 = {
1813
- name: "Embed",
1814
- static: true,
1815
- builtIn: true,
1816
- inputs: [
1817
- {
1818
- name: "url",
1819
- type: "url",
1820
- required: true,
1821
- defaultValue: "",
1822
- helperText: "e.g. enter a youtube url, google map, etc",
1823
- onChange: serializeFn((options) => {
1824
- const url = options.get("url");
1825
- if (url) {
1826
- options.set("content", "Loading...");
1827
- const apiKey = "ae0e60e78201a3f2b0de4b";
1828
- return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
1829
- if (options.get("url") === url) {
1830
- if (data.html)
1831
- options.set("content", data.html);
1832
- else
1833
- options.set("content", "Invalid url, please try another");
1834
- }
1835
- }).catch((_err) => {
1836
- options.set("content", "There was an error embedding this URL, please try again or another URL");
1837
- });
1838
- } else
1839
- options.delete("content");
1840
- })
1841
- },
1842
- {
1843
- name: "content",
1844
- type: "html",
1845
- defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
1846
- hideFromUI: true
1847
- }
1848
- ]
1756
+ const getTestFields = ({ item, testGroupId }) => {
1757
+ const variationValue = item.variations[testGroupId];
1758
+ if (testGroupId === item.id || !variationValue)
1759
+ return {
1760
+ testVariationId: item.id,
1761
+ testVariationName: "Default"
1762
+ };
1763
+ else
1764
+ return {
1765
+ data: variationValue.data,
1766
+ testVariationId: variationValue.id,
1767
+ testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
1768
+ };
1849
1769
  };
1850
- const SCRIPT_MIME_TYPES = [
1851
- "text/javascript",
1852
- "application/javascript",
1853
- "application/ecmascript"
1854
- ];
1855
- const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
1856
- const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
1857
- if (!elem || !elem.getElementsByTagName)
1770
+ const getContentVariation = async ({ item, canTrack }) => {
1771
+ const testGroupId = await getContentVariationCookie({
1772
+ canTrack,
1773
+ contentId: item.id
1774
+ });
1775
+ const testFields = testGroupId ? getTestFields({
1776
+ item,
1777
+ testGroupId
1778
+ }) : void 0;
1779
+ if (testFields)
1780
+ return testFields;
1781
+ else {
1782
+ const randomVariationId = getRandomVariationId({
1783
+ variations: item.variations,
1784
+ id: item.id
1785
+ });
1786
+ setContentVariationCookie({
1787
+ contentId: item.id,
1788
+ value: randomVariationId,
1789
+ canTrack
1790
+ }).catch((err) => {
1791
+ console.error("could not store A/B test variation: ", err);
1792
+ });
1793
+ return getTestFields({
1794
+ item,
1795
+ testGroupId: randomVariationId
1796
+ });
1797
+ }
1798
+ };
1799
+ const handleABTesting = async ({ item, canTrack }) => {
1800
+ if (!checkIsBuilderContentWithVariations(item))
1858
1801
  return;
1859
- const scripts = elem.getElementsByTagName("script");
1860
- for (let i = 0; i < scripts.length; i++) {
1861
- const script = scripts[i];
1862
- if (script.src && !state.scriptsInserted.includes(script.src)) {
1863
- state.scriptsInserted.push(script.src);
1864
- const newScript = document.createElement("script");
1865
- newScript.async = true;
1866
- newScript.src = script.src;
1867
- document.head.appendChild(newScript);
1868
- } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText))
1869
- try {
1870
- state.scriptsRun.push(script.innerText);
1871
- new Function(script.innerText)();
1872
- } catch (error) {
1873
- console.warn("`Embed`: Error running script:", error);
1874
- }
1802
+ const variationValue = await getContentVariation({
1803
+ item,
1804
+ canTrack
1805
+ });
1806
+ Object.assign(item, variationValue);
1807
+ };
1808
+ function flatten(object, path = null, separator = ".") {
1809
+ return Object.keys(object).reduce((acc, key) => {
1810
+ const value = object[key];
1811
+ const newPath = [
1812
+ path,
1813
+ key
1814
+ ].filter(Boolean).join(separator);
1815
+ const isObject = [
1816
+ typeof value === "object",
1817
+ value !== null,
1818
+ !(Array.isArray(value) && value.length === 0)
1819
+ ].every(Boolean);
1820
+ return isObject ? {
1821
+ ...acc,
1822
+ ...flatten(value, newPath, separator)
1823
+ } : {
1824
+ ...acc,
1825
+ [newPath]: value
1826
+ };
1827
+ }, {});
1828
+ }
1829
+ const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
1830
+ const BUILDER_OPTIONS_PREFIX = "options.";
1831
+ const convertSearchParamsToQueryObject = (searchParams) => {
1832
+ const options = {};
1833
+ searchParams.forEach((value, key) => {
1834
+ options[key] = value;
1835
+ });
1836
+ return options;
1837
+ };
1838
+ const getBuilderSearchParams = (_options) => {
1839
+ if (!_options)
1840
+ return {};
1841
+ const options = normalizeSearchParams(_options);
1842
+ const newOptions = {};
1843
+ Object.keys(options).forEach((key) => {
1844
+ if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
1845
+ const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
1846
+ newOptions[trimmedKey] = options[key];
1847
+ }
1848
+ });
1849
+ return newOptions;
1850
+ };
1851
+ const getBuilderSearchParamsFromWindow = () => {
1852
+ if (!isBrowser())
1853
+ return {};
1854
+ const searchParams = new URLSearchParams(window.location.search);
1855
+ return getBuilderSearchParams(searchParams);
1856
+ };
1857
+ const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
1858
+ const generateContentUrl = (options) => {
1859
+ const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
1860
+ if (!apiKey)
1861
+ throw new Error("Missing API key");
1862
+ const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
1863
+ const queryOptions = {
1864
+ ...getBuilderSearchParamsFromWindow(),
1865
+ ...normalizeSearchParams(options.options || {})
1866
+ };
1867
+ const flattened = flatten(queryOptions);
1868
+ for (const key in flattened)
1869
+ url.searchParams.set(key, String(flattened[key]));
1870
+ if (userAttributes)
1871
+ url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
1872
+ if (query) {
1873
+ const flattened1 = flatten({
1874
+ query
1875
+ });
1876
+ for (const key1 in flattened1)
1877
+ url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
1875
1878
  }
1879
+ return url;
1876
1880
  };
1877
- const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1878
- const elem = qwik.useRef();
1881
+ async function getContent(options) {
1882
+ return (await getAllContent({
1883
+ ...options,
1884
+ limit: 1
1885
+ })).results[0] || null;
1886
+ }
1887
+ async function getAllContent(options) {
1888
+ const url = generateContentUrl(options);
1889
+ const res = await fetch$1(url.href);
1890
+ const content = await res.json();
1891
+ const canTrack = options.canTrack !== false;
1892
+ if (canTrack && Array.isArray(content.results))
1893
+ for (const item of content.results)
1894
+ await handleABTesting({
1895
+ item,
1896
+ canTrack
1897
+ });
1898
+ return content;
1899
+ }
1900
+ const className = function className22(props, state, builderContext2) {
1901
+ return [
1902
+ ...[
1903
+ props.attributes.class
1904
+ ],
1905
+ "builder-symbol",
1906
+ props.symbol?.inline ? "builder-inline-symbol" : void 0,
1907
+ props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
1908
+ ].filter(Boolean).join(" ");
1909
+ };
1910
+ const contentToUse = function contentToUse2(props, state, builderContext2) {
1911
+ return props.symbol?.content || state.fetchedContent;
1912
+ };
1913
+ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1914
+ const builderContext$1 = qwik.useContext(builderContext);
1879
1915
  const state = qwik.useStore({
1880
- ranInitFn: false,
1881
- scriptsInserted: [],
1882
- scriptsRun: []
1916
+ fetchedContent: null
1883
1917
  });
1884
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
1885
- const [elem2, props2, state2] = qwik.useLexicalScope();
1886
- state2 && track2(state2, "ranInitFn");
1887
- if (elem2 && !state2.ranInitFn) {
1888
- state2.ranInitFn = true;
1889
- findAndRunScripts$1(props2, state2, elem2);
1890
- }
1891
- }, "Embed_component_useWatch_AxgWjrHdlAI", [
1892
- elem,
1918
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
1919
+ const [builderContext2, props2, state2] = qwik.useLexicalScope();
1920
+ track2(() => props2.symbol);
1921
+ track2(() => state2.fetchedContent);
1922
+ const symbolToUse = props2.symbol;
1923
+ if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
1924
+ getContent({
1925
+ model: symbolToUse.model,
1926
+ apiKey: builderContext2.apiKey,
1927
+ query: {
1928
+ id: symbolToUse.entry
1929
+ }
1930
+ }).then((response) => {
1931
+ state2.fetchedContent = response;
1932
+ });
1933
+ }, "Symbol_component_useTask_NIAWAC1bMBo", [
1934
+ builderContext$1,
1893
1935
  props,
1894
1936
  state
1895
1937
  ]));
1896
1938
  return /* @__PURE__ */ jsxRuntime.jsx("div", {
1897
- class: "builder-embed",
1898
- ref: elem,
1939
+ ...props.attributes,
1940
+ class: className(props),
1941
+ children: /* @__PURE__ */ jsxRuntime.jsx(RenderContent$1, {
1942
+ get apiKey() {
1943
+ return builderContext$1.apiKey;
1944
+ },
1945
+ get context() {
1946
+ return builderContext$1.context;
1947
+ },
1948
+ customComponents: Object.values(builderContext$1.registeredComponents),
1949
+ data: {
1950
+ ...props.symbol?.data,
1951
+ ...builderContext$1.state,
1952
+ ...props.symbol?.content?.data?.state
1953
+ },
1954
+ model: props.symbol?.model,
1955
+ content: contentToUse(props, state),
1956
+ [qwik._IMMUTABLE]: {
1957
+ apiKey: qwik._wrapSignal(builderContext$1, "apiKey"),
1958
+ context: qwik._wrapSignal(builderContext$1, "context")
1959
+ }
1960
+ }, "Wt_0")
1961
+ });
1962
+ }, "Symbol_component_WVvggdkUPdk"));
1963
+ const componentInfo$4 = {
1964
+ name: "Text",
1965
+ static: true,
1966
+ builtIn: true,
1967
+ image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
1968
+ inputs: [
1969
+ {
1970
+ name: "text",
1971
+ type: "html",
1972
+ required: true,
1973
+ autoFocus: true,
1974
+ bubble: true,
1975
+ defaultValue: "Enter some text..."
1976
+ }
1977
+ ],
1978
+ defaultStyles: {
1979
+ lineHeight: "normal",
1980
+ height: "auto",
1981
+ textAlign: "center"
1982
+ }
1983
+ };
1984
+ const Text = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1985
+ return /* @__PURE__ */ jsxRuntime.jsx("span", {
1986
+ class: "builder-text",
1899
1987
  get dangerouslySetInnerHTML() {
1900
- return props.content;
1988
+ return props.text;
1901
1989
  },
1902
1990
  [qwik._IMMUTABLE]: {
1903
- dangerouslySetInnerHTML: qwik._wrapSignal(props, "content")
1991
+ dangerouslySetInnerHTML: qwik._wrapSignal(props, "text")
1904
1992
  }
1905
1993
  });
1906
- }, "Embed_component_Uji08ORjXbE"));
1907
- const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1908
- return /* @__PURE__ */ jsxRuntime.jsx("img", {
1909
- style: {
1910
- objectFit: props.backgroundSize || "cover",
1911
- objectPosition: props.backgroundPosition || "center"
1912
- },
1913
- get alt() {
1914
- return props.altText;
1915
- },
1916
- src: props.imgSrc || props.image,
1917
- ...props.attributes,
1918
- [qwik._IMMUTABLE]: {
1919
- alt: qwik._wrapSignal(props, "altText")
1920
- }
1921
- }, isEditing() && props.imgSrc || "default-key");
1922
- }, "ImgComponent_component_FXvIDBSffO8"));
1923
- const componentInfo$1 = {
1924
- name: "Raw:Img",
1925
- hideFromInsertMenu: true,
1994
+ }, "Text_component_15p0cKUxgIE"));
1995
+ const componentInfo$3 = {
1996
+ name: "Video",
1997
+ canHaveChildren: true,
1926
1998
  builtIn: true,
1927
- image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
1999
+ defaultStyles: {
2000
+ minHeight: "20px",
2001
+ minWidth: "20px"
2002
+ },
2003
+ image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-videocam-24px%20(1).svg?alt=media&token=49a84e4a-b20e-4977-a650-047f986874bb",
1928
2004
  inputs: [
1929
2005
  {
1930
- name: "image",
2006
+ name: "video",
2007
+ type: "file",
2008
+ allowedFileTypes: [
2009
+ "mp4"
2010
+ ],
1931
2011
  bubble: true,
2012
+ defaultValue: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/assets%2FKQlEmWDxA0coC3PK6UvkrjwkIGI2%2F28cb070609f546cdbe5efa20e931aa4b?alt=media&token=912e9551-7a7c-4dfb-86b6-3da1537d1a7f",
2013
+ required: true
2014
+ },
2015
+ {
2016
+ name: "posterImage",
1932
2017
  type: "file",
1933
2018
  allowedFileTypes: [
1934
2019
  "jpeg",
1935
- "jpg",
1936
- "png",
1937
- "svg"
2020
+ "png"
1938
2021
  ],
1939
- required: true
1940
- }
1941
- ],
1942
- noWrap: true,
1943
- static: true
1944
- };
1945
- const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
1946
- if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
1947
- const scripts = elem.getElementsByTagName("script");
1948
- for (let i = 0; i < scripts.length; i++) {
1949
- const script = scripts[i];
1950
- if (script.src) {
1951
- if (state.scriptsInserted.includes(script.src))
1952
- continue;
1953
- state.scriptsInserted.push(script.src);
1954
- const newScript = document.createElement("script");
1955
- newScript.async = true;
1956
- newScript.src = script.src;
1957
- document.head.appendChild(newScript);
1958
- } else if (!script.type || [
1959
- "text/javascript",
1960
- "application/javascript",
1961
- "application/ecmascript"
1962
- ].includes(script.type)) {
1963
- if (state.scriptsRun.includes(script.innerText))
1964
- continue;
1965
- try {
1966
- state.scriptsRun.push(script.innerText);
1967
- new Function(script.innerText)();
1968
- } catch (error) {
1969
- console.warn("`CustomCode`: Error running script:", error);
1970
- }
1971
- }
1972
- }
1973
- }
1974
- };
1975
- const CustomCode = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
1976
- const elem = qwik.useRef();
1977
- const state = qwik.useStore({
1978
- scriptsInserted: [],
1979
- scriptsRun: []
1980
- });
1981
- qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
1982
- const [elem2, props2, state2] = qwik.useLexicalScope();
1983
- findAndRunScripts(props2, state2, elem2);
1984
- }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
1985
- elem,
1986
- props,
1987
- state
1988
- ]));
1989
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
1990
- ref: elem,
1991
- class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
1992
- get dangerouslySetInnerHTML() {
1993
- return props.code;
2022
+ helperText: "Image to show before the video plays"
2023
+ },
2024
+ {
2025
+ name: "autoPlay",
2026
+ type: "boolean",
2027
+ defaultValue: true
1994
2028
  },
1995
- [qwik._IMMUTABLE]: {
1996
- dangerouslySetInnerHTML: qwik._wrapSignal(props, "code")
1997
- }
1998
- });
1999
- }, "CustomCode_component_uYOSy7w7Zqw"));
2000
- const componentInfo = {
2001
- name: "Custom Code",
2002
- static: true,
2003
- builtIn: true,
2004
- requiredPermissions: [
2005
- "editCode"
2006
- ],
2007
- inputs: [
2008
2029
  {
2009
- name: "code",
2010
- type: "html",
2011
- required: true,
2012
- defaultValue: "<p>Hello there, I am custom HTML code!</p>",
2013
- code: true
2030
+ name: "controls",
2031
+ type: "boolean",
2032
+ defaultValue: false
2014
2033
  },
2015
2034
  {
2016
- name: "replaceNodes",
2035
+ name: "muted",
2017
2036
  type: "boolean",
2018
- helperText: "Preserve server rendered dom nodes",
2019
- advanced: true
2037
+ defaultValue: true
2020
2038
  },
2021
2039
  {
2022
- name: "scriptsClientOnly",
2040
+ name: "loop",
2023
2041
  type: "boolean",
2024
- defaultValue: false,
2025
- helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
2042
+ defaultValue: true
2043
+ },
2044
+ {
2045
+ name: "playsInline",
2046
+ type: "boolean",
2047
+ defaultValue: true
2048
+ },
2049
+ {
2050
+ name: "fit",
2051
+ type: "text",
2052
+ defaultValue: "cover",
2053
+ enum: [
2054
+ "contain",
2055
+ "cover",
2056
+ "fill",
2057
+ "auto"
2058
+ ]
2059
+ },
2060
+ {
2061
+ name: "fitContent",
2062
+ type: "boolean",
2063
+ helperText: "When child blocks are provided, fit to them instead of using the aspect ratio",
2064
+ defaultValue: true,
2026
2065
  advanced: true
2027
- }
2028
- ]
2029
- };
2030
- const getDefaultRegisteredComponents = () => [
2031
- {
2032
- component: Columns,
2033
- ...componentInfo$9
2034
- },
2035
- {
2036
- component: Image,
2037
- ...componentInfo$7
2038
- },
2039
- {
2040
- component: ImgComponent,
2041
- ...componentInfo$1
2042
- },
2043
- {
2044
- component: Text,
2045
- ...componentInfo$4
2046
- },
2047
- {
2048
- component: Video,
2049
- ...componentInfo$3
2050
- },
2051
- {
2052
- component: Symbol$1,
2053
- ...componentInfo$5
2054
- },
2055
- {
2056
- component: Button,
2057
- ...componentInfo$a
2058
- },
2059
- {
2060
- component: SectionComponent,
2061
- ...componentInfo$6
2062
- },
2063
- {
2064
- component: FragmentComponent,
2065
- ...componentInfo$8
2066
- },
2067
- {
2068
- component: Embed,
2069
- ...componentInfo$2
2070
- },
2071
- {
2072
- component: CustomCode,
2073
- ...componentInfo
2074
- }
2075
- ];
2076
- function getGlobalThis() {
2077
- if (typeof globalThis !== "undefined")
2078
- return globalThis;
2079
- if (typeof window !== "undefined")
2080
- return window;
2081
- if (typeof global !== "undefined")
2082
- return global;
2083
- if (typeof self !== "undefined")
2084
- return self;
2085
- return globalThis;
2086
- }
2087
- function getFetch() {
2088
- const globalFetch = getGlobalThis().fetch;
2089
- if (typeof globalFetch === "undefined") {
2090
- console.warn(`Builder SDK could not find a global fetch function. Make sure you have a polyfill for fetch in your project.
2091
- For more information, read https://github.com/BuilderIO/this-package-uses-fetch`);
2092
- throw new Error("Builder SDK could not find a global `fetch` function");
2093
- }
2094
- return globalFetch;
2095
- }
2096
- const fetch$1 = getFetch();
2097
- const getTopLevelDomain = (host) => {
2098
- if (host === "localhost" || host === "127.0.0.1")
2099
- return host;
2100
- const parts = host.split(".");
2101
- if (parts.length > 2)
2102
- return parts.slice(1).join(".");
2103
- return host;
2104
- };
2105
- const getCookie = async ({ name, canTrack }) => {
2106
- try {
2107
- if (!canTrack)
2108
- return void 0;
2109
- return document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))?.split("=")[1];
2110
- } catch (err) {
2111
- console.debug("[COOKIE] GET error: ", err);
2112
- return void 0;
2113
- }
2114
- };
2115
- const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
2116
- const SECURE_CONFIG = [
2117
- [
2118
- "secure",
2119
- ""
2120
- ],
2121
- [
2122
- "SameSite",
2123
- "None"
2124
- ]
2125
- ];
2126
- const createCookieString = ({ name, value, expires }) => {
2127
- const secure = isBrowser() ? location.protocol === "https:" : true;
2128
- const secureObj = secure ? SECURE_CONFIG : [
2129
- []
2130
- ];
2131
- const expiresObj = expires ? [
2132
- [
2133
- "expires",
2134
- expires.toUTCString()
2135
- ]
2136
- ] : [
2137
- []
2138
- ];
2139
- const cookieValue = [
2140
- [
2141
- name,
2142
- value
2143
- ],
2144
- ...expiresObj,
2145
- [
2146
- "path",
2147
- "/"
2148
- ],
2149
- [
2150
- "domain",
2151
- getTopLevelDomain(window.location.hostname)
2152
- ],
2153
- ...secureObj
2154
- ];
2155
- const cookie = stringifyCookie(cookieValue);
2156
- return cookie;
2157
- };
2158
- const setCookie = async ({ name, value, expires, canTrack }) => {
2159
- try {
2160
- if (!canTrack)
2161
- return;
2162
- const cookie = createCookieString({
2163
- name,
2164
- value,
2165
- expires
2166
- });
2167
- document.cookie = cookie;
2168
- } catch (err) {
2169
- console.warn("[COOKIE] SET error: ", err);
2170
- }
2171
- };
2172
- const BUILDER_STORE_PREFIX = "builderio.variations";
2173
- const getContentTestKey = (id) => `${BUILDER_STORE_PREFIX}.${id}`;
2174
- const getContentVariationCookie = ({ contentId, canTrack }) => getCookie({
2175
- name: getContentTestKey(contentId),
2176
- canTrack
2177
- });
2178
- const setContentVariationCookie = ({ contentId, canTrack, value }) => setCookie({
2179
- name: getContentTestKey(contentId),
2180
- value,
2181
- canTrack
2182
- });
2183
- const checkIsBuilderContentWithVariations = (item) => checkIsDefined(item.id) && checkIsDefined(item.variations) && Object.keys(item.variations).length > 0;
2184
- const getRandomVariationId = ({ id, variations }) => {
2185
- let n = 0;
2186
- const random = Math.random();
2187
- for (const id1 in variations) {
2188
- const testRatio = variations[id1]?.testRatio;
2189
- n += testRatio;
2190
- if (random < n)
2191
- return id1;
2192
- }
2193
- return id;
2066
+ },
2067
+ {
2068
+ name: "position",
2069
+ type: "text",
2070
+ defaultValue: "center",
2071
+ enum: [
2072
+ "center",
2073
+ "top",
2074
+ "left",
2075
+ "right",
2076
+ "bottom",
2077
+ "top left",
2078
+ "top right",
2079
+ "bottom left",
2080
+ "bottom right"
2081
+ ]
2082
+ },
2083
+ {
2084
+ name: "height",
2085
+ type: "number",
2086
+ advanced: true
2087
+ },
2088
+ {
2089
+ name: "width",
2090
+ type: "number",
2091
+ advanced: true
2092
+ },
2093
+ {
2094
+ name: "aspectRatio",
2095
+ type: "number",
2096
+ advanced: true,
2097
+ defaultValue: 0.7004048582995948
2098
+ },
2099
+ {
2100
+ name: "lazyLoad",
2101
+ type: "boolean",
2102
+ helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
2103
+ defaultValue: true,
2104
+ advanced: true
2105
+ }
2106
+ ]
2194
2107
  };
2195
- const getTestFields = ({ item, testGroupId }) => {
2196
- const variationValue = item.variations[testGroupId];
2197
- if (testGroupId === item.id || !variationValue)
2198
- return {
2199
- testVariationId: item.id,
2200
- testVariationName: "Default"
2201
- };
2202
- else
2203
- return {
2204
- data: variationValue.data,
2205
- testVariationId: variationValue.id,
2206
- testVariationName: variationValue.name || (variationValue.id === item.id ? "Default" : "")
2207
- };
2108
+ const videoProps = function videoProps2(props, state) {
2109
+ return {
2110
+ ...props.autoPlay === true ? {
2111
+ autoPlay: true
2112
+ } : {},
2113
+ ...props.muted === true ? {
2114
+ muted: true
2115
+ } : {},
2116
+ ...props.controls === true ? {
2117
+ controls: true
2118
+ } : {},
2119
+ ...props.loop === true ? {
2120
+ loop: true
2121
+ } : {},
2122
+ ...props.playsInline === true ? {
2123
+ playsInline: true
2124
+ } : {}
2125
+ };
2208
2126
  };
2209
- const getContentVariation = async ({ item, canTrack }) => {
2210
- const testGroupId = await getContentVariationCookie({
2211
- canTrack,
2212
- contentId: item.id
2127
+ const spreadProps = function spreadProps2(props, state) {
2128
+ return {
2129
+ ...props.attributes,
2130
+ ...videoProps(props)
2131
+ };
2132
+ };
2133
+ const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2134
+ return /* @__PURE__ */ jsxRuntime.jsx("video", {
2135
+ ...spreadProps(props),
2136
+ style: {
2137
+ width: "100%",
2138
+ height: "100%",
2139
+ ...props.attributes?.style,
2140
+ objectFit: props.fit,
2141
+ objectPosition: props.position,
2142
+ borderRadius: 1
2143
+ },
2144
+ src: props.video || "no-src",
2145
+ get poster() {
2146
+ return props.posterImage;
2147
+ },
2148
+ [qwik._IMMUTABLE]: {
2149
+ poster: qwik._wrapSignal(props, "posterImage")
2150
+ }
2213
2151
  });
2214
- const testFields = testGroupId ? getTestFields({
2215
- item,
2216
- testGroupId
2217
- }) : void 0;
2218
- if (testFields)
2219
- return testFields;
2220
- else {
2221
- const randomVariationId = getRandomVariationId({
2222
- variations: item.variations,
2223
- id: item.id
2224
- });
2225
- setContentVariationCookie({
2226
- contentId: item.id,
2227
- value: randomVariationId,
2228
- canTrack
2229
- }).catch((err) => {
2230
- console.error("could not store A/B test variation: ", err);
2231
- });
2232
- return getTestFields({
2233
- item,
2234
- testGroupId: randomVariationId
2235
- });
2236
- }
2152
+ }, "Video_component_qdcTZflYyoQ"));
2153
+ const componentInfo$2 = {
2154
+ name: "Embed",
2155
+ static: true,
2156
+ builtIn: true,
2157
+ inputs: [
2158
+ {
2159
+ name: "url",
2160
+ type: "url",
2161
+ required: true,
2162
+ defaultValue: "",
2163
+ helperText: "e.g. enter a youtube url, google map, etc",
2164
+ onChange: serializeFn((options) => {
2165
+ const url = options.get("url");
2166
+ if (url) {
2167
+ options.set("content", "Loading...");
2168
+ const apiKey = "ae0e60e78201a3f2b0de4b";
2169
+ return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
2170
+ if (options.get("url") === url) {
2171
+ if (data.html)
2172
+ options.set("content", data.html);
2173
+ else
2174
+ options.set("content", "Invalid url, please try another");
2175
+ }
2176
+ }).catch((_err) => {
2177
+ options.set("content", "There was an error embedding this URL, please try again or another URL");
2178
+ });
2179
+ } else
2180
+ options.delete("content");
2181
+ })
2182
+ },
2183
+ {
2184
+ name: "content",
2185
+ type: "html",
2186
+ defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
2187
+ hideFromUI: true
2188
+ }
2189
+ ]
2237
2190
  };
2238
- const handleABTesting = async ({ item, canTrack }) => {
2239
- if (!checkIsBuilderContentWithVariations(item))
2191
+ const SCRIPT_MIME_TYPES = [
2192
+ "text/javascript",
2193
+ "application/javascript",
2194
+ "application/ecmascript"
2195
+ ];
2196
+ const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
2197
+ const findAndRunScripts$1 = function findAndRunScripts2(props, state, elem) {
2198
+ if (!elem || !elem.getElementsByTagName)
2240
2199
  return;
2241
- const variationValue = await getContentVariation({
2242
- item,
2243
- canTrack
2244
- });
2245
- Object.assign(item, variationValue);
2200
+ const scripts = elem.getElementsByTagName("script");
2201
+ for (let i = 0; i < scripts.length; i++) {
2202
+ const script = scripts[i];
2203
+ if (script.src && !state.scriptsInserted.includes(script.src)) {
2204
+ state.scriptsInserted.push(script.src);
2205
+ const newScript = document.createElement("script");
2206
+ newScript.async = true;
2207
+ newScript.src = script.src;
2208
+ document.head.appendChild(newScript);
2209
+ } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText))
2210
+ try {
2211
+ state.scriptsRun.push(script.innerText);
2212
+ new Function(script.innerText)();
2213
+ } catch (error) {
2214
+ console.warn("`Embed`: Error running script:", error);
2215
+ }
2216
+ }
2246
2217
  };
2247
- function flatten(object, path = null, separator = ".") {
2248
- return Object.keys(object).reduce((acc, key) => {
2249
- const value = object[key];
2250
- const newPath = [
2251
- path,
2252
- key
2253
- ].filter(Boolean).join(separator);
2254
- const isObject = [
2255
- typeof value === "object",
2256
- value !== null,
2257
- !(Array.isArray(value) && value.length === 0)
2258
- ].every(Boolean);
2259
- return isObject ? {
2260
- ...acc,
2261
- ...flatten(value, newPath, separator)
2262
- } : {
2263
- ...acc,
2264
- [newPath]: value
2265
- };
2266
- }, {});
2267
- }
2268
- const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
2269
- const BUILDER_OPTIONS_PREFIX = "options.";
2270
- const convertSearchParamsToQueryObject = (searchParams) => {
2271
- const options = {};
2272
- searchParams.forEach((value, key) => {
2273
- options[key] = value;
2218
+ const Embed = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2219
+ const elem = qwik.useRef();
2220
+ const state = qwik.useStore({
2221
+ ranInitFn: false,
2222
+ scriptsInserted: [],
2223
+ scriptsRun: []
2274
2224
  });
2275
- return options;
2225
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
2226
+ const [elem2, props2, state2] = qwik.useLexicalScope();
2227
+ track2(() => elem2);
2228
+ track2(() => state2.ranInitFn);
2229
+ if (elem2 && !state2.ranInitFn) {
2230
+ state2.ranInitFn = true;
2231
+ findAndRunScripts$1(props2, state2, elem2);
2232
+ }
2233
+ }, "Embed_component_useTask_bg7ez0XUtiM", [
2234
+ elem,
2235
+ props,
2236
+ state
2237
+ ]));
2238
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
2239
+ class: "builder-embed",
2240
+ ref: elem,
2241
+ get dangerouslySetInnerHTML() {
2242
+ return props.content;
2243
+ },
2244
+ [qwik._IMMUTABLE]: {
2245
+ dangerouslySetInnerHTML: qwik._wrapSignal(props, "content")
2246
+ }
2247
+ });
2248
+ }, "Embed_component_Uji08ORjXbE"));
2249
+ const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2250
+ return /* @__PURE__ */ jsxRuntime.jsx("img", {
2251
+ style: {
2252
+ objectFit: props.backgroundSize || "cover",
2253
+ objectPosition: props.backgroundPosition || "center"
2254
+ },
2255
+ get alt() {
2256
+ return props.altText;
2257
+ },
2258
+ src: props.imgSrc || props.image,
2259
+ ...props.attributes,
2260
+ [qwik._IMMUTABLE]: {
2261
+ alt: qwik._wrapSignal(props, "altText")
2262
+ }
2263
+ }, isEditing() && props.imgSrc || "default-key");
2264
+ }, "ImgComponent_component_FXvIDBSffO8"));
2265
+ const componentInfo$1 = {
2266
+ name: "Raw:Img",
2267
+ hideFromInsertMenu: true,
2268
+ builtIn: true,
2269
+ image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
2270
+ inputs: [
2271
+ {
2272
+ name: "image",
2273
+ bubble: true,
2274
+ type: "file",
2275
+ allowedFileTypes: [
2276
+ "jpeg",
2277
+ "jpg",
2278
+ "png",
2279
+ "svg"
2280
+ ],
2281
+ required: true
2282
+ }
2283
+ ],
2284
+ noWrap: true,
2285
+ static: true
2286
+ };
2287
+ const findAndRunScripts = function findAndRunScripts22(props, state, elem) {
2288
+ if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
2289
+ const scripts = elem.getElementsByTagName("script");
2290
+ for (let i = 0; i < scripts.length; i++) {
2291
+ const script = scripts[i];
2292
+ if (script.src) {
2293
+ if (state.scriptsInserted.includes(script.src))
2294
+ continue;
2295
+ state.scriptsInserted.push(script.src);
2296
+ const newScript = document.createElement("script");
2297
+ newScript.async = true;
2298
+ newScript.src = script.src;
2299
+ document.head.appendChild(newScript);
2300
+ } else if (!script.type || [
2301
+ "text/javascript",
2302
+ "application/javascript",
2303
+ "application/ecmascript"
2304
+ ].includes(script.type)) {
2305
+ if (state.scriptsRun.includes(script.innerText))
2306
+ continue;
2307
+ try {
2308
+ state.scriptsRun.push(script.innerText);
2309
+ new Function(script.innerText)();
2310
+ } catch (error) {
2311
+ console.warn("`CustomCode`: Error running script:", error);
2312
+ }
2313
+ }
2314
+ }
2315
+ }
2276
2316
  };
2277
- const getBuilderSearchParams = (_options) => {
2278
- if (!_options)
2279
- return {};
2280
- const options = normalizeSearchParams(_options);
2281
- const newOptions = {};
2282
- Object.keys(options).forEach((key) => {
2283
- if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
2284
- const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
2285
- newOptions[trimmedKey] = options[key];
2317
+ const CustomCode = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2318
+ const elem = qwik.useRef();
2319
+ const state = qwik.useStore({
2320
+ scriptsInserted: [],
2321
+ scriptsRun: []
2322
+ });
2323
+ qwik.useClientEffectQrl(qwik.inlinedQrl(() => {
2324
+ const [elem2, props2, state2] = qwik.useLexicalScope();
2325
+ findAndRunScripts(props2, state2, elem2);
2326
+ }, "CustomCode_component_useClientEffect_4w4c951ufB4", [
2327
+ elem,
2328
+ props,
2329
+ state
2330
+ ]));
2331
+ return /* @__PURE__ */ jsxRuntime.jsx("div", {
2332
+ ref: elem,
2333
+ class: "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : ""),
2334
+ get dangerouslySetInnerHTML() {
2335
+ return props.code;
2336
+ },
2337
+ [qwik._IMMUTABLE]: {
2338
+ dangerouslySetInnerHTML: qwik._wrapSignal(props, "code")
2286
2339
  }
2287
2340
  });
2288
- return newOptions;
2289
- };
2290
- const getBuilderSearchParamsFromWindow = () => {
2291
- if (!isBrowser())
2292
- return {};
2293
- const searchParams = new URLSearchParams(window.location.search);
2294
- return getBuilderSearchParams(searchParams);
2341
+ }, "CustomCode_component_uYOSy7w7Zqw"));
2342
+ const componentInfo = {
2343
+ name: "Custom Code",
2344
+ static: true,
2345
+ builtIn: true,
2346
+ requiredPermissions: [
2347
+ "editCode"
2348
+ ],
2349
+ inputs: [
2350
+ {
2351
+ name: "code",
2352
+ type: "html",
2353
+ required: true,
2354
+ defaultValue: "<p>Hello there, I am custom HTML code!</p>",
2355
+ code: true
2356
+ },
2357
+ {
2358
+ name: "replaceNodes",
2359
+ type: "boolean",
2360
+ helperText: "Preserve server rendered dom nodes",
2361
+ advanced: true
2362
+ },
2363
+ {
2364
+ name: "scriptsClientOnly",
2365
+ type: "boolean",
2366
+ defaultValue: false,
2367
+ helperText: "Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads",
2368
+ advanced: true
2369
+ }
2370
+ ]
2295
2371
  };
2296
- const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
2297
- const generateContentUrl = (options) => {
2298
- const { limit = 30, userAttributes, query, noTraverse = false, model, apiKey, includeRefs = true, locale } = options;
2299
- if (!apiKey)
2300
- throw new Error("Missing API key");
2301
- const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
2302
- const queryOptions = {
2303
- ...getBuilderSearchParamsFromWindow(),
2304
- ...normalizeSearchParams(options.options || {})
2305
- };
2306
- const flattened = flatten(queryOptions);
2307
- for (const key in flattened)
2308
- url.searchParams.set(key, String(flattened[key]));
2309
- if (userAttributes)
2310
- url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
2311
- if (query) {
2312
- const flattened1 = flatten({
2313
- query
2314
- });
2315
- for (const key1 in flattened1)
2316
- url.searchParams.set(key1, JSON.stringify(flattened1[key1]));
2372
+ const getDefaultRegisteredComponents = () => [
2373
+ {
2374
+ component: Button,
2375
+ ...componentInfo$a
2376
+ },
2377
+ {
2378
+ component: Columns,
2379
+ ...componentInfo$9
2380
+ },
2381
+ {
2382
+ component: CustomCode,
2383
+ ...componentInfo
2384
+ },
2385
+ {
2386
+ component: Embed,
2387
+ ...componentInfo$2
2388
+ },
2389
+ {
2390
+ component: FragmentComponent,
2391
+ ...componentInfo$8
2392
+ },
2393
+ {
2394
+ component: Image,
2395
+ ...componentInfo$7
2396
+ },
2397
+ {
2398
+ component: ImgComponent,
2399
+ ...componentInfo$1
2400
+ },
2401
+ {
2402
+ component: SectionComponent,
2403
+ ...componentInfo$6
2404
+ },
2405
+ {
2406
+ component: Symbol$1,
2407
+ ...componentInfo$5
2408
+ },
2409
+ {
2410
+ component: Text,
2411
+ ...componentInfo$4
2412
+ },
2413
+ {
2414
+ component: Video,
2415
+ ...componentInfo$3
2317
2416
  }
2318
- return url;
2319
- };
2320
- async function getContent(options) {
2321
- return (await getAllContent({
2322
- ...options,
2323
- limit: 1
2324
- })).results[0] || null;
2325
- }
2326
- async function getAllContent(options) {
2327
- const url = generateContentUrl(options);
2328
- const res = await fetch$1(url.href);
2329
- const content = await res.json();
2330
- const canTrack = options.canTrack !== false;
2331
- if (canTrack && Array.isArray(content.results))
2332
- for (const item of content.results)
2333
- await handleABTesting({
2334
- item,
2335
- canTrack
2336
- });
2337
- return content;
2338
- }
2417
+ ];
2339
2418
  function isPreviewing() {
2340
2419
  if (!isBrowser())
2341
2420
  return false;
@@ -2596,20 +2675,20 @@ const getInteractionPropertiesForEvent = (event) => {
2596
2675
  }
2597
2676
  };
2598
2677
  };
2599
- const getCssFromFont = function getCssFromFont2(props, state, font) {
2678
+ const getCssFromFont = (font) => {
2600
2679
  const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
2601
2680
  const name = family.split(",")[0];
2602
2681
  const url = font.fileUrl ?? font?.files?.regular;
2603
2682
  let str = "";
2604
2683
  if (url && family && name)
2605
2684
  str += `
2606
- @font-face {
2607
- font-family: "${family}";
2608
- src: local("${name}"), url('${url}') format('woff2');
2609
- font-display: fallback;
2610
- font-weight: 400;
2611
- }
2612
- `.trim();
2685
+ @font-face {
2686
+ font-family: "${family}";
2687
+ src: local("${name}"), url('${url}') format('woff2');
2688
+ font-display: fallback;
2689
+ font-weight: 400;
2690
+ }
2691
+ `.trim();
2613
2692
  if (font.files)
2614
2693
  for (const weight in font.files) {
2615
2694
  const isNumber = String(Number(weight)) === weight;
@@ -2618,60 +2697,102 @@ const getCssFromFont = function getCssFromFont2(props, state, font) {
2618
2697
  const weightUrl = font.files[weight];
2619
2698
  if (weightUrl && weightUrl !== url)
2620
2699
  str += `
2621
- @font-face {
2622
- font-family: "${family}";
2623
- src: url('${weightUrl}') format('woff2');
2624
- font-display: fallback;
2625
- font-weight: ${weight};
2626
- }
2627
- `.trim();
2700
+ @font-face {
2701
+ font-family: "${family}";
2702
+ src: url('${weightUrl}') format('woff2');
2703
+ font-display: fallback;
2704
+ font-weight: ${weight};
2705
+ }
2706
+ `.trim();
2628
2707
  }
2629
2708
  return str;
2630
2709
  };
2631
- const getFontCss = function getFontCss2(props, state, { customFonts }) {
2632
- return customFonts?.map((font) => getCssFromFont(props, state, font))?.join(" ") || "";
2710
+ const getFontCss = ({ customFonts }) => {
2711
+ return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
2633
2712
  };
2634
- const injectedStyles = function injectedStyles2(props, state) {
2635
- return `
2636
- ${props.cssCode || ""}
2637
- ${getFontCss(props, state, {
2638
- customFonts: props.customFonts
2639
- })}`;
2713
+ const getCss = ({ cssCode, contentId }) => {
2714
+ if (!cssCode)
2715
+ return "";
2716
+ if (!contentId)
2717
+ return cssCode;
2718
+ return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || "";
2640
2719
  };
2641
2720
  const RenderContentStyles = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2642
- const state = {};
2721
+ const state = qwik.useStore({
2722
+ injectedStyles: `
2723
+ ${getCss({
2724
+ cssCode: props.cssCode,
2725
+ contentId: props.contentId
2726
+ })}
2727
+ ${getFontCss({
2728
+ customFonts: props.customFonts
2729
+ })}
2730
+ `
2731
+ });
2643
2732
  return /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles, {
2644
- styles: injectedStyles(props, state)
2733
+ get styles() {
2734
+ return state.injectedStyles;
2735
+ },
2736
+ [qwik._IMMUTABLE]: {
2737
+ styles: qwik._wrapSignal(state, "injectedStyles")
2738
+ }
2645
2739
  }, "V0_0");
2646
2740
  }, "RenderContentStyles_component_Og0xL34Zbvc"));
2647
- const useContent = function useContent2(props, state, elementRef) {
2648
- if (!props.content && !state.overrideContent)
2649
- return void 0;
2741
+ const getContextStateInitialValue = ({ content, data, locale }) => {
2742
+ const defaultValues = {};
2743
+ content?.data?.inputs?.forEach((input) => {
2744
+ if (input.name && input.defaultValue !== void 0 && content?.data?.state && content.data.state[input.name] === void 0)
2745
+ defaultValues[input.name] = input.defaultValue;
2746
+ });
2747
+ const stateToUse = {
2748
+ ...content?.data?.state,
2749
+ ...data,
2750
+ ...locale ? {
2751
+ locale
2752
+ } : {}
2753
+ };
2650
2754
  return {
2651
- ...props.content,
2652
- ...state.overrideContent,
2755
+ ...defaultValues,
2756
+ ...stateToUse
2757
+ };
2758
+ };
2759
+ const getContentInitialValue = ({ content, data }) => {
2760
+ return !content ? void 0 : {
2761
+ ...content,
2762
+ data: {
2763
+ ...content?.data,
2764
+ ...data
2765
+ },
2766
+ meta: content?.meta
2767
+ };
2768
+ };
2769
+ const mergeNewContent = function mergeNewContent2(props, state, elementRef, newContent) {
2770
+ state.useContent = {
2771
+ ...state.useContent,
2772
+ ...newContent,
2653
2773
  data: {
2654
- ...props.content?.data,
2655
- ...props.data,
2656
- ...state.overrideContent?.data
2774
+ ...state.useContent?.data,
2775
+ ...newContent?.data
2657
2776
  },
2658
2777
  meta: {
2659
- ...props.content?.meta,
2660
- ...state.overrideContent?.meta,
2661
- breakpoints: state.useBreakpoints || state.overrideContent?.meta?.breakpoints || props.content?.meta?.breakpoints
2778
+ ...state.useContent?.meta,
2779
+ ...newContent?.meta,
2780
+ breakpoints: newContent?.meta?.breakpoints || state.useContent?.meta?.breakpoints
2662
2781
  }
2663
2782
  };
2664
2783
  };
2665
- const contentState = function contentState2(props, state, elementRef) {
2666
- return {
2667
- ...props.content?.data?.state,
2668
- ...props.data,
2669
- ...props.locale ? {
2670
- locale: props.locale
2671
- } : {},
2672
- ...state.overrideState
2784
+ const setBreakpoints = function setBreakpoints2(props, state, elementRef, breakpoints) {
2785
+ state.useContent = {
2786
+ ...state.useContent,
2787
+ meta: {
2788
+ ...state.useContent?.meta,
2789
+ breakpoints
2790
+ }
2673
2791
  };
2674
2792
  };
2793
+ const setContextState = function setContextState2(props, state, elementRef, newState) {
2794
+ state.contentState = newState;
2795
+ };
2675
2796
  const processMessage = function processMessage2(props, state, elementRef, event) {
2676
2797
  const { data } = event;
2677
2798
  if (data)
@@ -2679,9 +2800,10 @@ const processMessage = function processMessage2(props, state, elementRef, event)
2679
2800
  case "builder.configureSdk": {
2680
2801
  const messageContent = data.data;
2681
2802
  const { breakpoints, contentId } = messageContent;
2682
- if (!contentId || contentId !== useContent(props, state)?.id)
2803
+ if (!contentId || contentId !== state.useContent?.id)
2683
2804
  return;
2684
- state.useBreakpoints = breakpoints;
2805
+ if (breakpoints)
2806
+ setBreakpoints(props, state, elementRef, breakpoints);
2685
2807
  state.forceReRenderCount = state.forceReRenderCount + 1;
2686
2808
  break;
2687
2809
  }
@@ -2690,7 +2812,7 @@ const processMessage = function processMessage2(props, state, elementRef, event)
2690
2812
  const key = messageContent1.key || messageContent1.alias || messageContent1.entry || messageContent1.modelName;
2691
2813
  const contentData = messageContent1.data;
2692
2814
  if (key === props.model) {
2693
- state.overrideContent = contentData;
2815
+ mergeNewContent(props, state, elementRef, contentData);
2694
2816
  state.forceReRenderCount = state.forceReRenderCount + 1;
2695
2817
  }
2696
2818
  break;
@@ -2698,18 +2820,18 @@ const processMessage = function processMessage2(props, state, elementRef, event)
2698
2820
  }
2699
2821
  };
2700
2822
  const evaluateJsCode = function evaluateJsCode2(props, state, elementRef) {
2701
- const jsCode = useContent(props, state)?.data?.jsCode;
2823
+ const jsCode = state.useContent?.data?.jsCode;
2702
2824
  if (jsCode)
2703
2825
  evaluate({
2704
2826
  code: jsCode,
2705
- context: state.contextContext,
2706
- state: contentState(props, state)
2827
+ context: props.context || {},
2828
+ state: state.contentState
2707
2829
  });
2708
2830
  };
2709
2831
  const onClick = function onClick22(props, state, elementRef, event) {
2710
- if (useContent(props, state)) {
2711
- const variationId = useContent(props, state)?.testVariationId;
2712
- const contentId = useContent(props, state)?.id;
2832
+ if (state.useContent) {
2833
+ const variationId = state.useContent?.testVariationId;
2834
+ const contentId = state.useContent?.id;
2713
2835
  _track({
2714
2836
  type: "click",
2715
2837
  canTrack: state.canTrackToUse,
@@ -2726,23 +2848,23 @@ const onClick = function onClick22(props, state, elementRef, event) {
2726
2848
  const evalExpression = function evalExpression2(props, state, elementRef, expression) {
2727
2849
  return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
2728
2850
  code: group,
2729
- context: state.contextContext,
2730
- state: contentState(props, state)
2851
+ context: props.context || {},
2852
+ state: state.contentState
2731
2853
  }));
2732
2854
  };
2733
2855
  const handleRequest = function handleRequest2(props, state, elementRef, { url, key }) {
2734
2856
  fetch$1(url).then((response) => response.json()).then((json) => {
2735
- const newOverrideState = {
2736
- ...state.overrideState,
2857
+ const newState = {
2858
+ ...state.contentState,
2737
2859
  [key]: json
2738
2860
  };
2739
- state.overrideState = newOverrideState;
2861
+ setContextState(props, state, elementRef, newState);
2740
2862
  }).catch((err) => {
2741
2863
  console.log("error fetching dynamic data", url, err);
2742
2864
  });
2743
2865
  };
2744
2866
  const runHttpRequests = function runHttpRequests2(props, state, elementRef) {
2745
- const requests = useContent(props, state)?.data?.httpRequests ?? {};
2867
+ const requests = state.useContent?.data?.httpRequests ?? {};
2746
2868
  Object.entries(requests).forEach(([key, url]) => {
2747
2869
  if (url && (!state.httpReqsData[key] || isEditing())) {
2748
2870
  const evaluatedUrl = evalExpression(props, state, elementRef, url);
@@ -2757,7 +2879,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
2757
2879
  if (isEditing())
2758
2880
  window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
2759
2881
  detail: {
2760
- state: contentState(props, state),
2882
+ state: state.contentState,
2761
2883
  ref: {
2762
2884
  name: props.model
2763
2885
  }
@@ -2765,7 +2887,7 @@ const emitStateUpdate = function emitStateUpdate2(props, state, elementRef) {
2765
2887
  }));
2766
2888
  };
2767
2889
  const shouldRenderContentStyles = function shouldRenderContentStyles2(props, state, elementRef) {
2768
- return Boolean((useContent(props, state)?.data?.cssCode || useContent(props, state)?.data?.customFonts?.length) && TARGET !== "reactNative");
2890
+ return Boolean((state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
2769
2891
  };
2770
2892
  const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2771
2893
  const elementRef = qwik.useRef();
@@ -2780,18 +2902,24 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2780
2902
  }), {}),
2781
2903
  canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
2782
2904
  clicked: false,
2783
- contextContext: props.context || {},
2905
+ contentState: getContextStateInitialValue({
2906
+ content: props.content,
2907
+ data: props.data,
2908
+ locale: props.locale
2909
+ }),
2784
2910
  forceReRenderCount: 0,
2785
2911
  httpReqsData: {},
2786
2912
  overrideContent: null,
2787
- overrideState: {},
2788
2913
  update: 0,
2789
- useBreakpoints: null
2914
+ useContent: getContentInitialValue({
2915
+ content: props.content,
2916
+ data: props.data
2917
+ })
2790
2918
  });
2791
- qwik.useContextProvider(BuilderContext, qwik.useStore({
2792
- content: useContent(props, state),
2793
- state: contentState(props, state),
2794
- context: state.contextContext,
2919
+ qwik.useContextProvider(builderContext, qwik.useStore({
2920
+ content: state.useContent,
2921
+ state: state.contentState,
2922
+ context: props.context || {},
2795
2923
  apiKey: props.apiKey,
2796
2924
  registeredComponents: state.allRegisteredComponents
2797
2925
  }));
@@ -2818,9 +2946,9 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2818
2946
  window.addEventListener("message", processMessage.bind(null, props2, state2, elementRef2));
2819
2947
  window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate.bind(null, props2, state2, elementRef2));
2820
2948
  }
2821
- if (useContent(props2, state2)) {
2822
- const variationId = useContent(props2, state2)?.testVariationId;
2823
- const contentId = useContent(props2, state2)?.id;
2949
+ if (state2.useContent) {
2950
+ const variationId = state2.useContent?.testVariationId;
2951
+ const contentId = state2.useContent?.id;
2824
2952
  _track({
2825
2953
  type: "impression",
2826
2954
  canTrack: state2.canTrackToUse,
@@ -2839,7 +2967,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2839
2967
  apiKey: props2.apiKey
2840
2968
  }).then((content) => {
2841
2969
  if (content)
2842
- state2.overrideContent = content;
2970
+ mergeNewContent(props2, state2, elementRef2, content);
2843
2971
  });
2844
2972
  }
2845
2973
  evaluateJsCode(props2, state2);
@@ -2851,30 +2979,30 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2851
2979
  props,
2852
2980
  state
2853
2981
  ]));
2854
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
2982
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
2855
2983
  const [elementRef2, props2, state2] = qwik.useLexicalScope();
2856
- state2.useContent?.data && track2(state2.useContent?.data, "jsCode");
2857
- state2 && track2(state2, "contentState");
2984
+ track2(() => state2.useContent?.data?.jsCode);
2985
+ track2(() => state2.contentState);
2858
2986
  evaluateJsCode(props2, state2);
2859
- }, "RenderContent_component_useWatch_OIBatobA0hE", [
2987
+ }, "RenderContent_component_useTask_Kulmlf9pM08", [
2860
2988
  elementRef,
2861
2989
  props,
2862
2990
  state
2863
2991
  ]));
2864
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
2992
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
2865
2993
  const [elementRef2, props2, state2] = qwik.useLexicalScope();
2866
- state2.useContent?.data && track2(state2.useContent?.data, "httpRequests");
2994
+ track2(() => state2.useContent?.data?.httpRequests);
2867
2995
  runHttpRequests(props2, state2, elementRef2);
2868
- }, "RenderContent_component_useWatch_1_LQM67VNl14k", [
2996
+ }, "RenderContent_component_useTask_1_X59YMGOetns", [
2869
2997
  elementRef,
2870
2998
  props,
2871
2999
  state
2872
3000
  ]));
2873
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
3001
+ qwik.useTaskQrl(qwik.inlinedQrl(({ track: track2 }) => {
2874
3002
  const [elementRef2, props2, state2] = qwik.useLexicalScope();
2875
- state2 && track2(state2, "contentState");
3003
+ track2(() => state2.contentState);
2876
3004
  emitStateUpdate(props2, state2);
2877
- }, "RenderContent_component_useWatch_2_aGi0RpYNBO0", [
3005
+ }, "RenderContent_component_useTask_2_u3gn3Pj2b2s", [
2878
3006
  elementRef,
2879
3007
  props,
2880
3008
  state
@@ -2891,7 +3019,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2891
3019
  state
2892
3020
  ]));
2893
3021
  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
2894
- children: useContent(props, state) ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
3022
+ children: state.useContent ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
2895
3023
  ref: elementRef,
2896
3024
  onClick$: qwik.inlinedQrl((event) => {
2897
3025
  const [elementRef2, props2, state2] = qwik.useLexicalScope();
@@ -2901,17 +3029,18 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2901
3029
  props,
2902
3030
  state
2903
3031
  ]),
2904
- "builder-content-id": useContent(props, state)?.id,
3032
+ "builder-content-id": state.useContent?.id,
2905
3033
  get "builder-model"() {
2906
3034
  return props.model;
2907
3035
  },
2908
3036
  children: [
2909
3037
  shouldRenderContentStyles(props, state) ? /* @__PURE__ */ jsxRuntime.jsx(RenderContentStyles, {
2910
- cssCode: useContent(props, state)?.data?.cssCode,
2911
- customFonts: useContent(props, state)?.data?.customFonts
3038
+ contentId: state.useContent?.id,
3039
+ cssCode: state.useContent?.data?.cssCode,
3040
+ customFonts: state.useContent?.data?.customFonts
2912
3041
  }, "03_0") : null,
2913
3042
  /* @__PURE__ */ jsxRuntime.jsx(RenderBlocks, {
2914
- blocks: useContent(props, state)?.data?.blocks
3043
+ blocks: state.useContent?.data?.blocks
2915
3044
  }, state.forceReRenderCount)
2916
3045
  ],
2917
3046
  [qwik._IMMUTABLE]: {
@@ -2924,69 +3053,7 @@ const RenderContent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props)
2924
3053
  }
2925
3054
  }, "03_1");
2926
3055
  }, "RenderContent_component_hEAI0ahViXM"));
2927
- const className = function className22(props, state, builderContext) {
2928
- return [
2929
- ...[
2930
- props.attributes.class
2931
- ],
2932
- "builder-symbol",
2933
- props.symbol?.inline ? "builder-inline-symbol" : void 0,
2934
- props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : void 0
2935
- ].filter(Boolean).join(" ");
2936
- };
2937
- const contentToUse = function contentToUse2(props, state, builderContext) {
2938
- return props.symbol?.content || state.fetchedContent;
2939
- };
2940
- const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
2941
- const builderContext = qwik.useContext(BuilderContext);
2942
- const state = qwik.useStore({
2943
- fetchedContent: null
2944
- });
2945
- qwik.useWatchQrl(qwik.inlinedQrl(({ track: track2 }) => {
2946
- const [builderContext2, props2, state2] = qwik.useLexicalScope();
2947
- props2 && track2(props2, "symbol");
2948
- state2 && track2(state2, "fetchedContent");
2949
- const symbolToUse = props2.symbol;
2950
- if (symbolToUse && !symbolToUse.content && !state2.fetchedContent && symbolToUse.model && builderContext2?.apiKey)
2951
- getContent({
2952
- model: symbolToUse.model,
2953
- apiKey: builderContext2.apiKey,
2954
- query: {
2955
- id: symbolToUse.entry
2956
- }
2957
- }).then((response) => {
2958
- state2.fetchedContent = response;
2959
- });
2960
- }, "Symbol_component_useWatch_9HNT04zd0Dk", [
2961
- builderContext,
2962
- props,
2963
- state
2964
- ]));
2965
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
2966
- ...props.attributes,
2967
- class: className(props),
2968
- children: /* @__PURE__ */ jsxRuntime.jsx(RenderContent, {
2969
- get apiKey() {
2970
- return builderContext.apiKey;
2971
- },
2972
- get context() {
2973
- return builderContext.context;
2974
- },
2975
- customComponents: Object.values(builderContext.registeredComponents),
2976
- data: {
2977
- ...props.symbol?.data,
2978
- ...builderContext.state,
2979
- ...props.symbol?.content?.data?.state
2980
- },
2981
- model: props.symbol?.model,
2982
- content: contentToUse(props, state),
2983
- [qwik._IMMUTABLE]: {
2984
- apiKey: qwik._wrapSignal(builderContext, "apiKey"),
2985
- context: qwik._wrapSignal(builderContext, "context")
2986
- }
2987
- }, "Wt_0")
2988
- });
2989
- }, "Symbol_component_WVvggdkUPdk"));
3056
+ const RenderContent$1 = RenderContent;
2990
3057
  const settings = {};
2991
3058
  function setEditorSettings(newSettings) {
2992
3059
  if (isBrowser()) {
@@ -3003,7 +3070,7 @@ exports.Columns = Columns;
3003
3070
  exports.Fragment = FragmentComponent;
3004
3071
  exports.Image = Image;
3005
3072
  exports.RenderBlocks = RenderBlocks;
3006
- exports.RenderContent = RenderContent;
3073
+ exports.RenderContent = RenderContent$1;
3007
3074
  exports.Section = SectionComponent;
3008
3075
  exports.Symbol = Symbol$1;
3009
3076
  exports.Text = Text;