@builder.io/sdk-solid 0.0.20 → 0.0.21

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

@@ -15,47 +15,42 @@ import { _track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.jsx";
 import RenderContentStyles from "./components/render-styles.jsx";
 import { registerInsertMenu, setupBrowserForEditing } from "../../scripts/init-editing.js";
-import { markMutable } from "../../functions/mark-mutable.js";
-
 function RenderContent(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
   const [overrideContent, setOverrideContent] = createSignal(null);
   const [update, setUpdate] = createSignal(0);
   const [overrideState, setOverrideState] = createSignal({});
-
   function canTrackToUse() {
     return props.canTrack || true;
   }
-
   function contentState() {
-    return { ...props.content?.data?.state,
+    return {
+      ...props.content?.data?.state,
       ...props.data,
       ...overrideState()
     };
   }
-
   function contextContext() {
     return props.context || {};
   }
-
   function allRegisteredComponents() {
-    const allComponentsArray = [...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+    const allComponentsArray = [...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 || [])];
-    const allComponents = allComponentsArray.reduce((acc, curr) => ({ ...acc,
+    const allComponents = allComponentsArray.reduce((acc, curr) => ({
+      ...acc,
       [curr.name]: curr
     }), {});
     return allComponents;
   }
-
   function processMessage(event) {
     const {
       data
     } = event;
-
     if (data) {
       switch (data.type) {
         case "builder.contentUpdate":
@@ -63,7 +58,6 @@ function RenderContent(props) {
             const messageContent = data.data;
             const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
             const contentData = messageContent.data;
-
             if (key === props.model) {
               setOverrideContent(contentData);
               setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
@@ -71,7 +65,6 @@ function RenderContent(props) {
 
             break;
           }
-
         case "builder.patchUpdates":
           {
             // TODO
@@ -80,11 +73,9 @@ function RenderContent(props) {
       }
     }
   }
-
   function evaluateJsCode() {
     // run any dynamic JS code attached to content
     const jsCode = useContent?.data?.jsCode;
-
     if (jsCode) {
       evaluate({
         code: jsCode,
@@ -93,16 +84,13 @@ function RenderContent(props) {
       });
     }
   }
-
   function httpReqsData() {
     return {};
   }
-
   function onClick(_event) {
     if (useContent) {
       const variationId = useContent?.testVariationId;
       const contentId = useContent?.id;
-
       _track({
         type: "click",
         canTrack: canTrackToUse(),
@@ -112,7 +100,6 @@ function RenderContent(props) {
       });
     }
   }
-
   function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
       code: group,
@@ -120,13 +107,13 @@ function RenderContent(props) {
       state: contentState()
     }));
   }
-
   function handleRequest({
     url,
     key
   }) {
     getFetch().then(fetch => fetch(url)).then(response => response.json()).then(json => {
-      const newOverrideState = { ...overrideState(),
+      const newOverrideState = {
+        ...overrideState(),
         [key]: json
       };
       setOverrideState(newOverrideState);
@@ -134,7 +121,6 @@ function RenderContent(props) {
       console.log("error fetching dynamic data", url, err);
     });
   }
-
   function runHttpRequests() {
     const requests = useContent?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
@@ -147,7 +133,6 @@ function RenderContent(props) {
       }
     });
   }
-
   function emitStateUpdate() {
     if (isEditing()) {
       window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
@@ -160,34 +145,31 @@ function RenderContent(props) {
       }));
     }
   }
-
   function shouldRenderContentStyles() {
     return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
   }
-
   const updateUseContent = function useContent() {
     if (!props.content && !overrideContent()) {
       return undefined;
     }
-
-    const mergedContent = { ...props.content,
+    const mergedContent = {
+      ...props.content,
       ...overrideContent(),
-      data: { ...props.content?.data,
+      data: {
+        ...props.content?.data,
         ...props.data,
         ...overrideContent()?.data
       }
     };
     return mergedContent;
   };
-
   const [useContent, setUseContent] = createStore(updateUseContent());
   createEffect(on(() => [overrideContent(), props.content, props.data], () => setUseContent(reconcile(updateUseContent()))));
   let elementRef;
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        setForceReRenderCount(forceReRenderCount() + 1); // QWIK-REPLACE: _useMutableProps
-
+        setForceReRenderCount(forceReRenderCount() + 1);
         registerInsertMenu();
         setupBrowserForEditing();
         Object.values(allRegisteredComponents()).forEach(registeredComponent => {
@@ -197,11 +179,9 @@ function RenderContent(props) {
         window.addEventListener("message", processMessage);
         window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
       }
-
       if (useContent) {
         const variationId = useContent?.testVariationId;
         const contentId = useContent?.id;
-
         _track({
           type: "impression",
           canTrack: canTrackToUse(),
@@ -209,15 +189,13 @@ function RenderContent(props) {
           apiKey: props.apiKey,
           variationId: variationId !== contentId ? variationId : undefined
         });
-      } // override normal content in preview mode
-
+      }
 
+      // override normal content in preview mode
       if (isPreviewing()) {
         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,
@@ -230,61 +208,48 @@ function RenderContent(props) {
           }
         }
       }
-
       evaluateJsCode();
       runHttpRequests();
       emitStateUpdate();
     }
   });
-
   function onUpdateFn_0() {
     evaluateJsCode();
   }
-
   createEffect(on(() => [useContent?.data?.jsCode], onUpdateFn_0));
-
   function onUpdateFn_1() {
     runHttpRequests();
   }
-
   createEffect(on(() => [useContent?.data?.httpRequests], onUpdateFn_1));
-
   function onUpdateFn_2() {
     emitStateUpdate();
   }
-
   createEffect(on(() => [contentState()], onUpdateFn_2));
   return <Dynamic value={{
     get content() {
       return useContent;
     },
-
     get state() {
       return contentState();
     },
-
     get context() {
       return contextContext();
     },
-
     get apiKey() {
       return props.apiKey;
     },
-
     get registeredComponents() {
       return allRegisteredComponents();
     }
-
   }} component={BuilderContext.Provider}>
       <Show when={useContent}>
         <div ref={elementRef} onClick={event => onClick(event)} builder-content-id={useContent?.id} builder-model={props.model}>
           <Show when={shouldRenderContentStyles()}>
             <RenderContentStyles cssCode={useContent?.data?.cssCode} customFonts={useContent?.data?.customFonts}></RenderContentStyles>
           </Show>
-          <RenderBlocks blocks={markMutable(useContent?.data?.blocks)} key={forceReRenderCount()}></RenderBlocks>
+          <RenderBlocks blocks={useContent?.data?.blocks} key={forceReRenderCount()}></RenderBlocks>
         </div>
       </Show>
     </Dynamic>;
 }
-
 export default RenderContent;

package/src/components/render-inlined-styles.jsx

@@ -1,21 +1,17 @@
 import { Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { TARGET } from "../constants/target.js";
-
 function RenderInlinedStyles(props) {
   function injectedStyleScript() {
-    return `<${tagName()}>${props.styles}</${tagName()}>`;
+    return `<${tag()}>${props.styles}</${tag()}>`;
   }
-
-  function tagName() {
+  function tag() {
     // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
     return "sty" + "le";
   }
-
-  return <Show fallback={<Dynamic component={tagName()}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
+  return <Show fallback={<Dynamic component={tag()}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
       <div innerHTML={injectedStyleScript()}></div>
     </Show>;
 }
-
 export default RenderInlinedStyles;

package/src/constants/device-sizes.js

@@ -1,3 +1,4 @@
+import { fastClone } from "../functions/fast-clone";
 const SIZES = {
   small: {
     min: 320,
@@ -15,7 +16,33 @@ const SIZES = {
     max: 1200
   }
 };
-const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
+const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+const getSizesForBreakpoints = ({ small, medium }) => {
+  const newSizes = fastClone(SIZES);
+  if (!small || !medium) {
+    return newSizes;
+  }
+  const smallMin = Math.floor(small / 2);
+  newSizes.small = {
+    max: small,
+    min: smallMin,
+    default: smallMin + 1
+  };
+  const mediumMin = newSizes.small.max + 1;
+  newSizes.medium = {
+    max: medium,
+    min: mediumMin,
+    default: mediumMin + 1
+  };
+  const largeMin = newSizes.medium.max + 1;
+  newSizes.large = {
+    max: 2e3,
+    min: largeMin,
+    default: largeMin + 1
+  };
+  return newSizes;
+};
 export {
-  getMaxWidthQueryForSize
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints
 };

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

@@ -56,9 +56,13 @@ const generateContentUrl = (options) => {
     query,
     noTraverse = false,
     model,
-    apiKey
+    apiKey,
+    includeRefs = true
   } = options;
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
+  if (!apiKey) {
+    throw new Error("Missing API key");
+  }
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
   const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
   const flattened = flatten(queryOptions);
   for (const key in flattened) {

package/src/functions/register-component.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { serializeFn } from "../blocks/util.js";
 import { fastClone } from "./fast-clone.js";
 const components = [];
 function registerComponent(component, info) {
@@ -48,11 +49,6 @@ const createRegisterComponentMessage = (_a) => {
   };
 };
 const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-const serializeFn = (fnValue) => {
-  const fnStr = fnValue.toString().trim();
-  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
-  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
-};
 const prepareComponentInfoToSend = (_c) => {
   var _d = _c, {
     inputs

package/src/index.js

@@ -1,4 +1,4 @@
-import "./index-helpers/top-of-file.js";
+export * from "./index-helpers/top-of-file.js";
 import "./scripts/init-editing.js";
 export * from "./index-helpers/blocks-exports.js";
 export * from "./functions/is-editing.js";

package/src/scripts/init-editing.js

@@ -19,15 +19,21 @@ const registerInsertMenu = () => {
     ]
   });
 };
+let isSetupForEditing = false;
 const setupBrowserForEditing = () => {
   var _a;
+  if (isSetupForEditing) {
+    return;
+  }
+  isSetupForEditing = true;
   if (isBrowser()) {
     (_a = window.parent) == null ? void 0 : _a.postMessage({
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
         supportsPatchUpdates: false,
-        supportsAddBlockScoping: true
+        supportsAddBlockScoping: true,
+        supportsCustomBreakpoints: true
       }
     }, "*");
     window.addEventListener("message", ({ data }) => {