@builder.io/sdk-solid 0.4.4 → 0.5.0

package/src/components/{render-content/render-content.jsx → content/components/enable-editor.jsx}

@@ -1,134 +1,57 @@
 import { Show, onMount, on, createEffect, createSignal } from "solid-js";
 
-import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import { evaluate } from "../../functions/evaluate.js";
-import { getContent } from "../../functions/get-content/index.js";
-import { fetch } from "../../functions/get-fetch.js";
-import { isBrowser } from "../../functions/is-browser.js";
-import { isEditing } from "../../functions/is-editing.js";
-import { isPreviewing } from "../../functions/is-previewing.js";
-import {
-  components,
-  createRegisterComponentMessage,
-} from "../../functions/register-component.js";
-import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.jsx";
-import RenderContentStyles from "./components/render-styles.jsx";
-import builderContext from "../../context/builder.context.js";
+import { evaluate } from "../../../functions/evaluate";
+import { fetch } from "../../../functions/get-fetch.js";
+import { isBrowser } from "../../../functions/is-browser.js";
+import { isEditing } from "../../../functions/is-editing.js";
+import { createRegisterComponentMessage } from "../../../functions/register-component.js";
+import { _track } from "../../../functions/track/index.js";
+import builderContext from "../../../context/builder.context";
 import {
   registerInsertMenu,
   setupBrowserForEditing,
-} from "../../scripts/init-editing.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
-import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
-import {
-  getContentInitialValue,
-  getContextStateInitialValue,
-} from "./render-content.helpers.js";
-import { TARGET } from "../../constants/target.js";
-import { logger } from "../../helpers/logger.js";
-import { getRenderContentScriptString } from "../render-content-variants/helpers.js";
-import { wrapComponentRef } from "./wrap-component-ref.js";
-
-function RenderContent(props) {
-  const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
-
-  const [overrideContent, setOverrideContent] = createSignal(null);
-
-  const [update, setUpdate] = createSignal(0);
+} from "../../../scripts/init-editing.js";
+import { checkIsDefined } from "../../../helpers/nullable.js";
+import { getInteractionPropertiesForEvent } from "../../../functions/track/interaction.js";
+import { logger } from "../../../helpers/logger.js";
+import { getContent } from "../../../functions/get-content/index.js";
+import { isPreviewing } from "../../../functions/is-previewing.js";
+import { postPreviewContent } from "../../../helpers/preview-lru-cache/set.js";
 
+function EnableEditor(props) {
   const [canTrackToUse, setCanTrackToUse] = createSignal(
     checkIsDefined(props.canTrack) ? props.canTrack : true
   );
 
-  const [httpReqsData, setHttpReqsData] = createSignal({});
+  const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
 
-  const [clicked, setClicked] = createSignal(false);
+  const [lastUpdated, setLastUpdated] = createSignal(0);
 
-  const [scriptStr, setScriptStr] = createSignal(
-    getRenderContentScriptString({
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-      contentId: props.content?.id,
-      parentContentId: props.parentContentId,
-    })
-  );
+  const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal(false);
 
-  const [builderContextSignal, setBuilderContextSignal] = createSignal({
-    content: getContentInitialValue({
-      content: props.content,
-      data: props.data,
-    }),
-    localState: undefined,
-    rootState: getContextStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale,
-    }),
-    rootSetState: contentSetState,
-    context: props.context || {},
-    apiKey: props.apiKey,
-    apiVersion: props.apiVersion,
-    registeredComponents: [
-      ...getDefaultRegisteredComponents(),
-      // While this `components` object is deprecated, we must maintain support for it.
-      // Since users are able to override our default components, we need to make sure that we do not break such
-      // existing usage.
-      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
-      // which is the new standard way of providing custom components, and must therefore take precedence.
-      ...components,
-      ...(props.customComponents || []),
-    ].reduce(
-      (acc, { component, ...curr }) => ({
-        ...acc,
-        [curr.name]: {
-          component:
-            TARGET === "vue3" ? wrapComponentRef(component) : component,
-          ...curr,
-        },
-      }),
-      {}
-    ),
-    inheritedStyles: {},
-  });
+  const [httpReqsData, setHttpReqsData] = createSignal({});
+
+  const [clicked, setClicked] = createSignal(false);
 
   function mergeNewContent(newContent) {
-    setBuilderContextSignal((PREVIOUS_VALUE) => ({
-      ...PREVIOUS_VALUE,
-      content: {
-        ...builderContextSignal().content,
-        ...newContent,
-        data: {
-          ...builderContextSignal().content?.data,
-          ...newContent?.data,
-        },
-        meta: {
-          ...builderContextSignal().content?.meta,
-          ...newContent?.meta,
-          breakpoints:
-            newContent?.meta?.breakpoints ||
-            builderContextSignal().content?.meta?.breakpoints,
-        },
+    const newContentValue = {
+      ...props.builderContextSignal.content,
+      ...newContent,
+      data: {
+        ...props.builderContextSignal.content?.data,
+        ...newContent?.data,
       },
-    }));
-  }
-
-  function setBreakpoints(breakpoints) {
-    setBuilderContextSignal((PREVIOUS_VALUE) => ({
-      ...PREVIOUS_VALUE,
-      content: {
-        ...builderContextSignal().content,
-        meta: {
-          ...builderContextSignal().content?.meta,
-          breakpoints,
-        },
+      meta: {
+        ...props.builderContextSignal.content?.meta,
+        ...newContent?.meta,
+        breakpoints:
+          newContent?.meta?.breakpoints ||
+          props.builderContextSignal.content?.meta?.breakpoints,
       },
-    }));
-  }
-
-  function contentSetState(newRootState) {
-    setBuilderContextSignal((PREVIOUS_VALUE) => ({
+    };
+    props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
       ...PREVIOUS_VALUE,
-      rootState: newRootState,
+      content: newContentValue,
     }));
   }
 
@@ -139,11 +62,18 @@ function RenderContent(props) {
         case "builder.configureSdk": {
           const messageContent = data.data;
           const { breakpoints, contentId } = messageContent;
-          if (!contentId || contentId !== builderContextSignal().content?.id) {
+          if (
+            !contentId ||
+            contentId !== props.builderContextSignal.content?.id
+          ) {
             return;
           }
           if (breakpoints) {
-            setBreakpoints(breakpoints);
+            mergeNewContent({
+              meta: {
+                breakpoints,
+              },
+            });
           }
           setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
           break;
@@ -163,32 +93,28 @@ function RenderContent(props) {
 
           break;
         }
-        case "builder.patchUpdates": {
-          // TODO
-          break;
-        }
       }
     }
   }
 
   function evaluateJsCode() {
     // run any dynamic JS code attached to content
-    const jsCode = builderContextSignal().content?.data?.jsCode;
+    const jsCode = props.builderContextSignal.content?.data?.jsCode;
     if (jsCode) {
       evaluate({
         code: jsCode,
         context: props.context || {},
         localState: undefined,
-        rootState: builderContextSignal().rootState,
-        rootSetState: contentSetState,
+        rootState: props.builderContextSignal.rootState,
+        rootSetState: props.builderContextSignal.rootSetState,
       });
     }
   }
 
   function onClick(event) {
-    if (builderContextSignal().content) {
-      const variationId = builderContextSignal().content?.testVariationId;
-      const contentId = builderContextSignal().content?.id;
+    if (props.builderContextSignal.content) {
+      const variationId = props.builderContextSignal.content?.testVariationId;
+      const contentId = props.builderContextSignal.content?.id;
       _track({
         type: "click",
         canTrack: canTrackToUse(),
@@ -210,8 +136,8 @@ function RenderContent(props) {
         code: group,
         context: props.context || {},
         localState: undefined,
-        rootState: builderContextSignal().rootState,
-        rootSetState: contentSetState,
+        rootState: props.builderContextSignal.rootState,
+        rootSetState: props.builderContextSignal.rootSetState,
       })
     );
   }
@@ -221,10 +147,11 @@ function RenderContent(props) {
       .then((response) => response.json())
       .then((json) => {
         const newState = {
-          ...builderContextSignal().rootState,
+          ...props.builderContextSignal.rootState,
           [key]: json,
         };
-        contentSetState(newState);
+        props.builderContextSignal.rootSetState?.(newState);
+        httpReqsData()[key] = true;
       })
       .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -232,7 +159,8 @@ function RenderContent(props) {
   }
 
   function runHttpRequests() {
-    const requests = builderContextSignal().content?.data?.httpRequests ?? {};
+    const requests =
+      props.builderContextSignal.content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
       if (url && (!httpReqsData()[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
@@ -249,7 +177,7 @@ function RenderContent(props) {
       window.dispatchEvent(
         new CustomEvent("builder:component:stateChange", {
           detail: {
-            state: builderContextSignal().rootState,
+            state: props.builderContextSignal.rootState,
             ref: {
               name: props.model,
             },
@@ -270,6 +198,7 @@ function RenderContent(props) {
     if (isBrowser()) {
       if (isEditing()) {
         setForceReRenderCount(forceReRenderCount() + 1);
+        window.addEventListener("message", processMessage);
         registerInsertMenu();
         setupBrowserForEditing({
           ...(props.locale
@@ -288,21 +217,20 @@ function RenderContent(props) {
               }
             : {}),
         });
-        Object.values(builderContextSignal().registeredComponents).forEach(
+        Object.values(props.builderContextSignal.componentInfos).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
           }
         );
-        window.addEventListener("message", processMessage);
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
           emitStateUpdate
         );
       }
-      if (builderContextSignal().content) {
-        const variationId = builderContextSignal().content?.testVariationId;
-        const contentId = builderContextSignal().content?.id;
+      if (props.builderContextSignal.content) {
+        const variationId = props.builderContextSignal.content?.testVariationId;
+        const contentId = props.builderContextSignal.content?.id;
         _track({
           type: "impression",
           canTrack: canTrackToUse(),
@@ -311,7 +239,6 @@ function RenderContent(props) {
           variationId: variationId !== contentId ? variationId : undefined,
         });
       }
-
       // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
@@ -339,7 +266,7 @@ function RenderContent(props) {
           getContent({
             model: props.model,
             apiKey: props.apiKey,
-            apiVersion: props.apiVersion,
+            apiVersion: props.builderContextSignal.apiVersion,
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -360,74 +287,60 @@ function RenderContent(props) {
   }
   createEffect(on(() => [props.content], onUpdateFn_0));
 
-  function onUpdateFn_1() {
+  function onUpdateFn_1() {}
+  createEffect(on(() => [shouldSendResetCookie()], onUpdateFn_1));
+
+  function onUpdateFn_2() {
     evaluateJsCode();
   }
   createEffect(
     on(
       () => [
-        builderContextSignal().content?.data?.jsCode,
-        builderContextSignal().rootState,
+        props.builderContextSignal.content?.data?.jsCode,
+        props.builderContextSignal.rootState,
       ],
-      onUpdateFn_1
+      onUpdateFn_2
     )
   );
 
-  function onUpdateFn_2() {
+  function onUpdateFn_3() {
     runHttpRequests();
   }
   createEffect(
-    on(() => [builderContextSignal().content?.data?.httpRequests], onUpdateFn_2)
+    on(
+      () => [props.builderContextSignal.content?.data?.httpRequests],
+      onUpdateFn_3
+    )
   );
 
-  function onUpdateFn_3() {
+  function onUpdateFn_4() {
     emitStateUpdate();
   }
-  createEffect(on(() => [builderContextSignal().rootState], onUpdateFn_3));
+  createEffect(on(() => [props.builderContextSignal.rootState], onUpdateFn_4));
 
   return (
-    <builderContext.Provider value={builderContextSignal()}>
-      <Show when={builderContextSignal().content}>
+    <builderContext.Provider value={props.builderContextSignal}>
+      <Show when={props.builderContextSignal.content}>
         <div
           class={props.classNameProp}
+          key={forceReRenderCount()}
           ref={elementRef}
           onClick={(event) => onClick(event)}
-          builder-content-id={builderContextSignal().content?.id}
+          builder-content-id={props.builderContextSignal.content?.id}
           builder-model={props.model}
-          {...(TARGET === "reactNative"
-            ? {
-                dataSet: {
-                  // currently, we can't set the actual ID here.
-                  // we don't need it right now, we just need to identify content divs for testing.
-                  "builder-content-id": "",
-                },
-              }
-            : {})}
-          {...(props.hideContent
-            ? {
+          {...{}}
+          {...(props.showContent
+            ? {}
+            : {
                 hidden: true,
                 "aria-hidden": true,
-              }
-            : {})}
+              })}
         >
-          <Show when={props.isSsrAbTest}>
-            <script innerHTML={scriptStr()}></script>
-          </Show>
-          <Show when={TARGET !== "reactNative"}>
-            <RenderContentStyles
-              contentId={builderContextSignal().content?.id}
-              cssCode={builderContextSignal().content?.data?.cssCode}
-              customFonts={builderContextSignal().content?.data?.customFonts}
-            ></RenderContentStyles>
-          </Show>
-          <RenderBlocks
-            blocks={builderContextSignal().content?.data?.blocks}
-            key={forceReRenderCount()}
-          ></RenderBlocks>
+          {props.children}
         </div>
       </Show>
     </builderContext.Provider>
   );
 }
 
-export default RenderContent;
+export default EnableEditor;

package/src/components/{render-content/components/render-styles.helpers.js → content/components/styles.helpers.js}

@@ -1,4 +1,4 @@
-const getCssFromFont = (font) => {
+const getCssFromFont = font => {
   var _a, _b;
   const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
   const name = family.split(",")[0];
@@ -35,9 +35,11 @@ font-weight: ${weight};
   }
   return str;
 };
-const getFontCss = ({ customFonts }) => {
+const getFontCss = ({
+  customFonts
+}) => {
   var _a;
-  return ((_a = customFonts == null ? void 0 : customFonts.map((font) => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
+  return ((_a = customFonts == null ? void 0 : customFonts.map(font => getCssFromFont(font))) == null ? void 0 : _a.join(" ")) || "";
 };
 const getCss = ({
   cssCode,
@@ -51,7 +53,4 @@ const getCss = ({
   }
   return (cssCode == null ? void 0 : cssCode.replace(/&/g, `div[builder-content-id="${contentId}"]`)) || "";
 };
-export {
-  getCss,
-  getFontCss
-};
+export { getCss, getFontCss }

package/src/components/{render-content/components/render-styles.jsx → content/components/styles.jsx}

@@ -1,10 +1,10 @@
 import { createSignal } from "solid-js";
 
-import RenderInlinedStyles from "../../render-inlined-styles.jsx";
-import { getCss } from "./render-styles.helpers";
-import { getFontCss } from "./render-styles.helpers";
+import InlinedStyles from "../../inlined-styles.jsx";
+import { getCss } from "./styles.helpers.js";
+import { getFontCss } from "./styles.helpers.js";
 
-function RenderContentStyles(props) {
+function ContentStyles(props) {
   const [injectedStyles, setInjectedStyles] = createSignal(
     `
 ${getCss({
@@ -30,7 +30,7 @@ ${getFontCss({
 `.trim()
   );
 
-  return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
+  return <InlinedStyles styles={injectedStyles()}></InlinedStyles>;
 }
 
-export default RenderContentStyles;
+export default ContentStyles;

package/src/components/{render-content/render-content.helpers.js → content/content.helpers.js}

@@ -4,16 +4,17 @@ var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
 var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
+  for (var prop in b || (b = {})) if (__hasOwnProp.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols) for (var prop of __getOwnPropSymbols(b)) {
+    if (__propIsEnum.call(b, prop)) __defNormalProp(a, prop, b[prop]);
+  }
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
@@ -24,13 +25,15 @@ const getContextStateInitialValue = ({
 }) => {
   var _a, _b, _c;
   const defaultValues = {};
-  (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach((input) => {
+  (_b = (_a = content == null ? void 0 : content.data) == null ? void 0 : _a.inputs) == null ? void 0 : _b.forEach(input => {
     var _a2;
     if (input.name && input.defaultValue !== void 0 && ((_a2 = content == null ? void 0 : content.data) == null ? void 0 : _a2.state) && content.data.state[input.name] === void 0) {
       defaultValues[input.name] = input.defaultValue;
     }
   });
-  const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? { locale } : {});
+  const stateToUse = __spreadValues(__spreadValues(__spreadValues({}, (_c = content == null ? void 0 : content.data) == null ? void 0 : _c.state), data), locale ? {
+    locale
+  } : {});
   return __spreadValues(__spreadValues({}, defaultValues), stateToUse);
 };
 const getContentInitialValue = ({
@@ -42,7 +45,4 @@ const getContentInitialValue = ({
     meta: content == null ? void 0 : content.meta
   });
 };
-export {
-  getContentInitialValue,
-  getContextStateInitialValue
-};
+export { getContentInitialValue, getContextStateInitialValue }

package/src/components/content/content.jsx

@@ -0,0 +1,129 @@
+import { Show, createSignal } from "solid-js";
+
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import {
+  components,
+  serializeComponentInfo,
+} from "../../functions/register-component.js";
+import Blocks from "../blocks/blocks.jsx";
+import ContentStyles from "./components/styles.jsx";
+import {
+  getContentInitialValue,
+  getContextStateInitialValue,
+} from "./content.helpers.js";
+import { TARGET } from "../../constants/target.js";
+import { getRenderContentScriptString } from "../content-variants/helpers.js";
+import EnableEditor from "./components/enable-editor.jsx";
+import InlinedScript from "../inlined-script.jsx";
+import { wrapComponentRef } from "./wrap-component-ref.js";
+
+function ContentComponent(props) {
+  const [scriptStr, setScriptStr] = createSignal(
+    getRenderContentScriptString({
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      variationId: props.content?.testVariationId,
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
+      contentId: props.content?.id,
+    })
+  );
+
+  const [registeredComponents, setRegisteredComponents] = createSignal(
+    [
+      ...getDefaultRegisteredComponents(),
+      // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components,
+      ...(props.customComponents || []),
+    ].reduce(
+      (acc, { component, ...info }) => ({
+        ...acc,
+        [info.name]: {
+          component: component,
+          ...serializeComponentInfo(info),
+        },
+      }),
+      {}
+    )
+  );
+
+  const [builderContextSignal, setBuilderContextSignal] = createSignal({
+    content: getContentInitialValue({
+      content: props.content,
+      data: props.data,
+    }),
+    localState: undefined,
+    rootState: getContextStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale,
+    }),
+    rootSetState: contentSetState,
+    context: props.context || {},
+    apiKey: props.apiKey,
+    apiVersion: props.apiVersion,
+    componentInfos: [
+      ...getDefaultRegisteredComponents(),
+      // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components,
+      ...(props.customComponents || []),
+    ].reduce(
+      (acc, { component: _, ...info }) => ({
+        ...acc,
+        [info.name]: serializeComponentInfo(info),
+      }),
+      {}
+    ),
+    inheritedStyles: {},
+  });
+
+  function contentSetState(newRootState) {
+    setBuilderContextSignal((PREVIOUS_VALUE) => ({
+      ...PREVIOUS_VALUE,
+      rootState: newRootState,
+    }));
+  }
+
+  return (
+    <EnableEditor
+      content={props.content}
+      model={props.model}
+      context={props.context}
+      apiKey={props.apiKey}
+      canTrack={props.canTrack}
+      locale={props.locale}
+      includeRefs={props.includeRefs}
+      enrich={props.enrich}
+      classNameProp={props.classNameProp}
+      showContent={props.showContent}
+      builderContextSignal={builderContextSignal()}
+      {...{
+        setBuilderContextSignal: setBuilderContextSignal,
+      }}
+    >
+      <Show when={props.isSsrAbTest}>
+        <InlinedScript scriptStr={scriptStr()}></InlinedScript>
+      </Show>
+      <Show when={TARGET !== "reactNative"}>
+        <ContentStyles
+          contentId={builderContextSignal().content?.id}
+          cssCode={builderContextSignal().content?.data?.cssCode}
+          customFonts={builderContextSignal().content?.data?.customFonts}
+        ></ContentStyles>
+      </Show>
+      <Blocks
+        blocks={builderContextSignal().content?.data?.blocks}
+        context={builderContextSignal()}
+        registeredComponents={registeredComponents()}
+      ></Blocks>
+    </EnableEditor>
+  );
+}
+
+export default ContentComponent;

package/src/components/content/index.js

@@ -0,0 +1,2 @@
+import { default as default2 } from "./content";
+export { default2 as default }

package/src/components/content/wrap-component-ref.js

@@ -0,0 +1,2 @@
+const wrapComponentRef = component => component;
+export { wrapComponentRef }