@builder.io/sdk-solid 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+### 0.4.3
+- Fix: SSR A/B test environment check (`isHydrationTarget`) now accurately checks current environment.
+
+### 0.4.2
+
+- No external changes.
+
 ### 0.4.1
 
 - Fix: bring back `getBuilderSearchParams` export that was accidentally removed.
@@ -5,6 +12,8 @@
 ### 0.4.0
 
 - Feature: A/B tests are now rendered correctly during server-side rendering (SSR) when applicable. This behaviour is backwards compatible with previous versions.
+- Feature: Add support for `enrich` API flag.
+- Mark `noTraverse` and `includeRefs` as deprecated.
 
 ### 0.3.1
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",

package/src/blocks/img/component-info.js

@@ -7,7 +7,7 @@ const componentInfo = {
       name: "image",
       bubble: true,
       type: "file",
-      allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
+      allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
       required: true
     }
   ],

package/src/components/render-block/render-block.jsx

@@ -27,6 +27,8 @@ function RenderBlock(props) {
 
   const [Tag, setTag] = createSignal(props.block.tagName || "div");
 
+  const [childrenContext, setChildrenContext] = createSignal(props.context);
+
   function repeatItem() {
     return getRepeatItemData({
       block: props.block,
@@ -95,32 +97,6 @@ function RenderBlock(props) {
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
   }
 
-  function childrenContext() {
-    const getInheritedTextStyles = () => {
-      if (TARGET !== "reactNative") {
-        return {};
-      }
-      return extractTextStyles(
-        getReactNativeBlockStyles({
-          block: useBlock(),
-          context: props.context,
-          blockStyles: attributes().style,
-        })
-      );
-    };
-    return {
-      apiKey: props.context.apiKey,
-      apiVersion: props.context.apiVersion,
-      localState: props.context.localState,
-      rootState: props.context.rootState,
-      rootSetState: props.context.rootSetState,
-      content: props.context.content,
-      context: props.context.context,
-      registeredComponents: props.context.registeredComponents,
-      inheritedStyles: getInheritedTextStyles(),
-    };
-  }
-
   function renderComponentProps() {
     return {
       blockChildren: useBlock().children ?? [],

package/src/components/render-block/render-repeated-block.jsx

@@ -1,25 +1,14 @@
+import { createSignal } from "solid-js";
+
 import BuilderContext from "../../context/builder.context.js";
 import RenderBlock from "./render-block.jsx";
 
 function RenderRepeatedBlock(props) {
+  const [store, setStore] = createSignal(props.repeatContext);
+
   return (
-    <BuilderContext.Provider
-      value={{
-        content: props.repeatContext.content,
-        localState: props.repeatContext.localState,
-        rootState: props.repeatContext.rootState,
-        rootSetState: props.repeatContext.rootSetState,
-        context: props.repeatContext.context,
-        apiKey: props.repeatContext.apiKey,
-        registeredComponents: props.repeatContext.registeredComponents,
-        inheritedStyles: props.repeatContext.inheritedStyles,
-        apiVersion: props.repeatContext.apiVersion,
-      }}
-    >
-      <RenderBlock
-        block={props.block}
-        context={props.repeatContext}
-      ></RenderBlock>
+    <BuilderContext.Provider value={store()}>
+      <RenderBlock block={props.block} context={store()}></RenderBlock>
     </BuilderContext.Provider>
   );
 }

package/src/components/render-blocks.jsx

@@ -63,6 +63,7 @@ function RenderBlocks(props) {
       style={props.styleProp}
       onClick={(event) => onClick()}
       onMouseEnter={(event) => onMouseEnter()}
+      onKeyPress={(event) => onClick()}
     >
       <Show when={props.blocks}>
         <For each={props.blocks}>

package/src/components/render-content/render-content.jsx

@@ -1,7 +1,5 @@
 import { Show, onMount, on, createEffect, createSignal } from "solid-js";
 
-import { createStore, reconcile } from "solid-js/store";
-
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
@@ -43,16 +41,34 @@ function RenderContent(props) {
     checkIsDefined(props.canTrack) ? props.canTrack : true
   );
 
-  const [contentState, setContentState] = createSignal(
-    getContextStateInitialValue({
-      content: props.content,
-      data: props.data,
-      locale: props.locale,
+  const [httpReqsData, setHttpReqsData] = createSignal({});
+
+  const [clicked, setClicked] = createSignal(false);
+
+  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 [allRegisteredComponents, setAllRegisteredComponents] = createSignal(
-    [
+  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
@@ -71,50 +87,49 @@ function RenderContent(props) {
         },
       }),
       {}
-    )
-  );
-
-  const [httpReqsData, setHttpReqsData] = createSignal({});
-
-  const [clicked, setClicked] = createSignal(false);
-
-  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,
-    })
-  );
+    ),
+    inheritedStyles: {},
+  });
 
   function mergeNewContent(newContent) {
-    setUseContent({
-      ...useContent,
-      ...newContent,
-      data: {
-        ...useContent?.data,
-        ...newContent?.data,
-      },
-      meta: {
-        ...useContent?.meta,
-        ...newContent?.meta,
-        breakpoints:
-          newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+    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,
+        },
       },
-    });
+    }));
   }
 
   function setBreakpoints(breakpoints) {
-    setUseContent({
-      ...useContent,
-      meta: {
-        ...useContent?.meta,
-        breakpoints,
+    setBuilderContextSignal((PREVIOUS_VALUE) => ({
+      ...PREVIOUS_VALUE,
+      content: {
+        ...builderContextSignal().content,
+        meta: {
+          ...builderContextSignal().content?.meta,
+          breakpoints,
+        },
       },
-    });
+    }));
   }
 
   function contentSetState(newRootState) {
-    setContentState(newRootState);
+    setBuilderContextSignal((PREVIOUS_VALUE) => ({
+      ...PREVIOUS_VALUE,
+      rootState: newRootState,
+    }));
   }
 
   function processMessage(event) {
@@ -124,7 +139,7 @@ function RenderContent(props) {
         case "builder.configureSdk": {
           const messageContent = data.data;
           const { breakpoints, contentId } = messageContent;
-          if (!contentId || contentId !== useContent?.id) {
+          if (!contentId || contentId !== builderContextSignal().content?.id) {
             return;
           }
           if (breakpoints) {
@@ -158,22 +173,22 @@ function RenderContent(props) {
 
   function evaluateJsCode() {
     // run any dynamic JS code attached to content
-    const jsCode = useContent?.data?.jsCode;
+    const jsCode = builderContextSignal().content?.data?.jsCode;
     if (jsCode) {
       evaluate({
         code: jsCode,
         context: props.context || {},
         localState: undefined,
-        rootState: contentState(),
+        rootState: builderContextSignal().rootState,
         rootSetState: contentSetState,
       });
     }
   }
 
   function onClick(event) {
-    if (useContent) {
-      const variationId = useContent?.testVariationId;
-      const contentId = useContent?.id;
+    if (builderContextSignal().content) {
+      const variationId = builderContextSignal().content?.testVariationId;
+      const contentId = builderContextSignal().content?.id;
       _track({
         type: "click",
         canTrack: canTrackToUse(),
@@ -195,7 +210,7 @@ function RenderContent(props) {
         code: group,
         context: props.context || {},
         localState: undefined,
-        rootState: contentState(),
+        rootState: builderContextSignal().rootState,
         rootSetState: contentSetState,
       })
     );
@@ -206,7 +221,7 @@ function RenderContent(props) {
       .then((response) => response.json())
       .then((json) => {
         const newState = {
-          ...contentState(),
+          ...builderContextSignal().rootState,
           [key]: json,
         };
         contentSetState(newState);
@@ -217,7 +232,7 @@ function RenderContent(props) {
   }
 
   function runHttpRequests() {
-    const requests = useContent?.data?.httpRequests ?? {};
+    const requests = builderContextSignal().content?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
       if (url && (!httpReqsData()[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
@@ -234,7 +249,7 @@ function RenderContent(props) {
       window.dispatchEvent(
         new CustomEvent("builder:component:stateChange", {
           detail: {
-            state: contentState(),
+            state: builderContextSignal().rootState,
             ref: {
               name: props.model,
             },
@@ -243,12 +258,6 @@ function RenderContent(props) {
       );
     }
   }
-  const [useContent, setUseContent] = createStore(
-    getContentInitialValue({
-      content: props.content,
-      data: props.data,
-    })
-  );
 
   let elementRef;
 
@@ -279,7 +288,7 @@ function RenderContent(props) {
               }
             : {}),
         });
-        Object.values(allRegisteredComponents()).forEach(
+        Object.values(builderContextSignal().registeredComponents).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
             window.parent?.postMessage(message, "*");
@@ -291,9 +300,9 @@ function RenderContent(props) {
           emitStateUpdate
         );
       }
-      if (useContent) {
-        const variationId = useContent?.testVariationId;
-        const contentId = useContent?.id;
+      if (builderContextSignal().content) {
+        const variationId = builderContextSignal().content?.testVariationId;
+        const contentId = builderContextSignal().content?.id;
         _track({
           type: "impression",
           canTrack: canTrackToUse(),
@@ -355,39 +364,35 @@ function RenderContent(props) {
     evaluateJsCode();
   }
   createEffect(
-    on(() => [useContent?.data?.jsCode, contentState()], onUpdateFn_1)
+    on(
+      () => [
+        builderContextSignal().content?.data?.jsCode,
+        builderContextSignal().rootState,
+      ],
+      onUpdateFn_1
+    )
   );
 
   function onUpdateFn_2() {
     runHttpRequests();
   }
-  createEffect(on(() => [useContent?.data?.httpRequests], onUpdateFn_2));
+  createEffect(
+    on(() => [builderContextSignal().content?.data?.httpRequests], onUpdateFn_2)
+  );
 
   function onUpdateFn_3() {
     emitStateUpdate();
   }
-  createEffect(on(() => [contentState()], onUpdateFn_3));
+  createEffect(on(() => [builderContextSignal().rootState], onUpdateFn_3));
 
   return (
-    <builderContext.Provider
-      value={{
-        content: useContent,
-        localState: undefined,
-        rootState: contentState(),
-        rootSetState: TARGET === "qwik" ? undefined : contentSetState,
-        context: props.context || {},
-        apiKey: props.apiKey,
-        apiVersion: props.apiVersion,
-        registeredComponents: allRegisteredComponents(),
-        inheritedStyles: {},
-      }}
-    >
-      <Show when={useContent}>
+    <builderContext.Provider value={builderContextSignal()}>
+      <Show when={builderContextSignal().content}>
         <div
           class={props.classNameProp}
           ref={elementRef}
           onClick={(event) => onClick(event)}
-          builder-content-id={useContent?.id}
+          builder-content-id={builderContextSignal().content?.id}
           builder-model={props.model}
           {...(TARGET === "reactNative"
             ? {
@@ -410,13 +415,13 @@ function RenderContent(props) {
           </Show>
           <Show when={TARGET !== "reactNative"}>
             <RenderContentStyles
-              contentId={useContent?.id}
-              cssCode={useContent?.data?.cssCode}
-              customFonts={useContent?.data?.customFonts}
+              contentId={builderContextSignal().content?.id}
+              cssCode={builderContextSignal().content?.data?.cssCode}
+              customFonts={builderContextSignal().content?.data?.customFonts}
             ></RenderContentStyles>
           </Show>
           <RenderBlocks
-            blocks={useContent?.data?.blocks}
+            blocks={builderContextSignal().content?.data?.blocks}
             key={forceReRenderCount()}
           ></RenderBlocks>
         </div>

package/src/components/render-content-variants/helpers.js

@@ -1,3 +1,4 @@
+import { TARGET } from "../../constants/target";
 import { isBrowser } from "../../functions/is-browser";
 const getVariants = (content) => Object.values((content == null ? void 0 : content.variations) || {});
 const checkShouldRunVariants = ({
@@ -112,7 +113,8 @@ function bldrCntntScrpt(variantContentId, defaultContentId, isHydrationTarget2)
   }
   return;
 }
-const isHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const getIsHydrationTarget = (target) => target === "react" || target === "reactNative" || target === "vue3" || target === "vue2";
+const isHydrationTarget = getIsHydrationTarget(TARGET);
 const AB_TEST_FN_NAME = "bldrAbTest";
 const CONTENT_FN_NAME = "bldrCntntScrpt";
 const getVariantsScriptString = (variants, contentId) => {

package/src/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.4.1"
+export const SDK_VERSION = "0.4.3"