@builder.io/sdk-solid 0.0.8-16 → 0.0.8-19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-16",
+  "version": "0.0.8-19",
   "description": "",
   "type": "module",
   "main": "./src/solid-index.jsx",

package/src/blocks/image/image.jsx

@@ -25,6 +25,14 @@ function Image(props) {
       }
 
       return getSrcSet(url);
+    },
+
+    get webpSrcSet() {
+      if (state.srcSetToUse?.match(/builder\.io/) && !props.noWebp) {
+        return state.srcSetToUse.replace(/\?/g, "?format=webp&");
+      } else {
+        return "";
+      }
     }
 
   });
@@ -32,8 +40,8 @@ function Image(props) {
     position: "relative"
   })}>
       <picture>
-        <Show when={state.srcSetToUse?.match(/builder\.io/) && !props.noWebp}>
-          <source type="image/webp" srcset={state.srcSetToUse?.replace(/\?/g, "?format=webp&")} />
+        <Show when={state.webpSrcSet}>
+          <source type="image/webp" srcset={state.webpSrcSet} />
         </Show>
         <img class={"builder-image" + (props.className ? " " + props.className : "") + " " + css({
         opacity: "1",

package/src/blocks/symbol/symbol.jsx

@@ -43,7 +43,7 @@ function Symbol(props) {
   return <div class={state.className} {...props.attributes} dataSet={{
     class: state.className
   }}>
-      <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} data={{ ...props.symbol?.data,
+      <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} customComponents={Object.values(builderContext.registeredComponents)} data={{ ...props.symbol?.data,
       ...builderContext.state,
       ...props.symbol?.content?.data?.state
     }} model={props.symbol?.model} content={state.content}></RenderContent>

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

@@ -170,7 +170,7 @@ function RenderBlock(props) {
   return <Show fallback={<RenderComponent {...state.renderComponentProps}></RenderComponent>} when={state.shouldWrap}>
       <Show fallback={<Dynamic {...state.attributes} component={state.tagName}></Dynamic>} when={!isEmptyHtmlElement(state.tagName)}>
         <Dynamic {...state.attributes} component={state.tagName}>
-          <Show fallback={<RenderComponent {...state.renderComponentProps}></RenderComponent>} when={state.repeatItemData}>
+          <Show when={state.repeatItemData}>
             <For each={state.repeatItemData}>
               {(data, _index) => {
               const index = _index();
@@ -179,6 +179,9 @@ function RenderBlock(props) {
             }}
             </For>
           </Show>
+          <Show when={!state.repeatItemData}>
+            <RenderComponent {...state.renderComponentProps}></RenderComponent>
+          </Show>
           <For each={state.childrenWithoutParentComponent}>
             {(child, _index) => {
             const index = _index();

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

@@ -5,13 +5,11 @@ import { getDefaultRegisteredComponents } from "../../constants/builder-register
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { evaluate } from "../../functions/evaluate.js";
-import { convertSearchParamsToQueryObject, getBuilderSearchParams } from "../../functions/get-builder-search-params/index.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { getFetch } 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 { previewingModelName } from "../../functions/previewing-model-name.js";
 import { components, createRegisterComponentMessage } from "../../functions/register-component.js";
 import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.jsx";
@@ -153,6 +151,10 @@ function RenderContent(props) {
           }
         }));
       }
+    },
+
+    get shouldRenderContentStyles() {
+      return Boolean((state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
     }
 
   });
@@ -175,15 +177,15 @@ function RenderContent(props) {
 
 
       if (isPreviewing()) {
-        if (props.model && previewingModelName() === props.model) {
-          const searchParams = new URL(location.href).searchParams;
+        const searchParams = new URL(location.href).searchParams;
+
+        if (props.model && searchParams.get("builder.preview") === props.model) {
           const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
 
           if (previewApiKey) {
             getContent({
               model: props.model,
-              apiKey: previewApiKey,
-              options: getBuilderSearchParams(convertSearchParamsToQueryObject(searchParams))
+              apiKey: previewApiKey
             }).then(content => {
               if (content) {
                 state.overrideContent = content;
@@ -241,9 +243,9 @@ function RenderContent(props) {
       <Show when={state.useContent}>
         <div onClick={event => track("click", {
         contentId: state.useContent.id
-      })} data-builder-content-id={state.useContent?.id}>
-          <Show when={(state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative"}>
-            <RenderContentStyles cssCode={state.useContent.data.cssCode} customFonts={state.useContent.data.customFonts}></RenderContentStyles>
+      })} builder-content-id={state.useContent?.id}>
+          <Show when={state.shouldRenderContentStyles}>
+            <RenderContentStyles cssCode={state.useContent?.data?.cssCode} customFonts={state.useContent?.data?.customFonts}></RenderContentStyles>
           </Show>
           <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>

package/src/functions/get-builder-search-params/index.js

@@ -1,3 +1,4 @@
+import { isBrowser } from "../is-browser";
 const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
 const convertSearchParamsToQueryObject = (searchParams) => {
   const options = {};
@@ -16,7 +17,17 @@ const getBuilderSearchParams = (options) => {
   });
   return newOptions;
 };
+const getBuilderSearchParamsFromWindow = () => {
+  if (!isBrowser()) {
+    return {};
+  }
+  const searchParams = new URLSearchParams(window.location.search);
+  return getBuilderSearchParams(convertSearchParamsToQueryObject(searchParams));
+};
+const normalizeSearchParams = (searchParams) => searchParams instanceof URLSearchParams ? convertSearchParamsToQueryObject(searchParams) : searchParams;
 export {
   convertSearchParamsToQueryObject,
-  getBuilderSearchParams
+  getBuilderSearchParams,
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
 };

package/src/functions/get-content/index.js

@@ -38,6 +38,10 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { flatten } from "../../helpers/flatten.js";
+import {
+  getBuilderSearchParamsFromWindow,
+  normalizeSearchParams
+} from "../get-builder-search-params/index.js";
 import { getFetch } from "../get-fetch.js";
 import { handleABTesting } from "./ab-testing.js";
 const fetch$ = getFetch();
@@ -56,19 +60,18 @@ const generateContentUrl = (options) => {
     apiKey
   } = options;
   const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
-  if (options.options) {
-    const flattened = flatten(options.options);
-    for (const key in flattened) {
-      url.searchParams.set(key, String(flattened[key]));
-    }
+  const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
+  const flattened = flatten(queryOptions);
+  for (const key in flattened) {
+    url.searchParams.set(key, String(flattened[key]));
   }
   if (userAttributes) {
     url.searchParams.set("userAttributes", JSON.stringify(userAttributes));
   }
   if (query) {
-    const flattened = flatten({ query });
-    for (const key in flattened) {
-      url.searchParams.set(key, JSON.stringify(flattened[key]));
+    const flattened2 = flatten({ query });
+    for (const key in flattened2) {
+      url.searchParams.set(key, JSON.stringify(flattened2[key]));
     }
   }
   return url;

package/src/functions/previewing-model-name.js

@@ -1,11 +0,0 @@
-import { isPreviewing } from "./is-previewing.js";
-function previewingModelName() {
-  if (!isPreviewing()) {
-    return null;
-  }
-  const url = new URL(location.href);
-  return url.searchParams.get("builder.preview");
-}
-export {
-  previewingModelName
-};