@builder.io/sdk-solid 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",
@@ -9,6 +9,7 @@
     ".": "./solid-index.jsx"
   },
   "scripts": {
+    "build": "echo 'no need to build solid SDK'",
     "release:patch": "npm version patch --no-git-tag-version && npm publish --access public",
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },

package/src/blocks/columns/columns.jsx

@@ -1,6 +1,10 @@
-import { For } from "solid-js";
+import { Show, For } from "solid-js";
 import { css } from "solid-styled-components";
 import RenderBlocks from "../../components/render-blocks.jsx";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import RenderInlinedStyles from "../../components/render-inlined-styles.jsx";
+import { TARGET } from "../../constants/target.js";
+import { convertStyleMapToCSS } from "../../helpers/css";
 function Columns(props) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
@@ -39,35 +43,84 @@ function Columns(props) {
       "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
     };
   }
-  return <div class={"builder-columns " + css({
+  function getWidthForBreakpointSize(size) {
+    const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+    return breakpointSizes[size].max;
+  }
+  function columnStyleObjects() {
+    return {
+      columns: {
+        small: {
+          flexDirection: "var(--flex-dir)",
+          alignItems: "stretch"
+        },
+        medium: {
+          flexDirection: "var(--flex-dir-tablet)",
+          alignItems: "stretch"
+        }
+      },
+      column: {
+        small: {
+          width: "var(--column-width) !important",
+          marginLeft: "var(--column-margin-left) !important"
+        },
+        medium: {
+          width: "var(--column-width-tablet) !important",
+          marginLeft: "var(--column-margin-left-tablet) !important"
+        }
+      }
+    };
+  }
+  function columnsStyles() {
+    return `
+      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+        }
+      }
+
+      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+        }
+      },
+    `;
+  }
+  function reactNativeColumnsStyles() {
+    return this.columnStyleObjects.columns.small;
+  }
+  function reactNativeColumnStyles() {
+    return this.columnStyleObjects.column.small;
+  }
+  return <div class={`builder-columns ${props.builderBlock.id}-breakpoints` + " " + css({
     display: "flex",
-    alignItems: "stretch",
-    lineHeight: "normal",
-    "@media (max-width: 991px)": {
-      flexDirection: "var(--flex-dir-tablet)"
-    },
-    "@media (max-width: 639px)": {
-      flexDirection: "var(--flex-dir)"
-    }
-  })} style={columnsCssVars()}>
+    lineHeight: "normal"
+  })} style={{
+    ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
+    ...columnsCssVars()
+  }}>
+      <Show when={TARGET !== "reactNative"}>
+        <RenderInlinedStyles styles={columnsStyles()}></RenderInlinedStyles>
+      </Show>
       <For each={props.columns}>
         {(column, _index) => {
         const index = _index();
         return <div class={"builder-column " + css({
           display: "flex",
           flexDirection: "column",
-          alignItems: "stretch",
-          "@media (max-width: 991px)": {
-            width: "var(--column-width-tablet) !important",
-            marginLeft: "var(--column-margin-left-tablet) !important"
-          },
-          "@media (max-width: 639px)": {
-            width: "var(--column-width) !important",
-            marginLeft: "var(--column-margin-left) !important"
-          }
+          alignItems: "stretch"
         })} style={{
           width: getColumnCssWidth(index),
           "margin-left": `${index === 0 ? 0 : getGutterSize()}px`,
+          ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
           ...columnCssVars()
         }} key={index}>
               <RenderBlocks blocks={column.blocks} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id} styleProp={{

package/src/blocks/image/image.jsx

@@ -28,6 +28,17 @@ function Image(props) {
       return "";
     }
   }
+  function aspectRatioCss() {
+    const aspectRatioStyles = {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      left: "0px",
+      top: "0px"
+    };
+    const out = props.aspectRatio ? aspectRatioStyles : undefined;
+    return out;
+  }
   return <>
       <picture>
         <Show when={webpSrcSet()}>
@@ -35,15 +46,11 @@ function Image(props) {
         </Show>
         <img class={"builder-image" + (props.className ? " " + props.className : "") + " " + css({
         opacity: "1",
-        transition: "opacity 0.2s ease-in-out",
-        position: "absolute",
-        height: "100%",
-        width: "100%",
-        top: "0px",
-        left: "0px"
+        transition: "opacity 0.2s ease-in-out"
       })} loading="lazy" alt={props.altText} role={props.altText ? "presentation" : undefined} style={{
-        "object-position": props.backgroundSize || "center",
-        "object-fit": props.backgroundSize || "cover"
+        "object-position": props.backgroundPosition || "center",
+        "object-fit": props.backgroundSize || "cover",
+        ...aspectRatioCss()
       }} src={props.image} srcset={srcSetToUse()} sizes={props.sizes} />
         <source srcset={srcSetToUse()} />
       </picture>

package/src/blocks/section/section.jsx

@@ -1,7 +1,16 @@
 function SectionComponent(props) {
-  return <section {...props.attributes} style={props.maxWidth && typeof props.maxWidth === "number" ? {
-    "max-width": props.maxWidth
-  } : undefined}>
+  return <section {...props.attributes} style={{
+    width: "100%",
+    "align-self": "stretch",
+    "flex-grow": "1",
+    "box-sizing": "border-box",
+    "max-width": `${props.maxWidth && typeof props.maxWidth === "number" ? props.maxWidth : 1200}px`,
+    display: "flex",
+    "flex-direction": "column",
+    "align-items": "stretch",
+    "margin-left": "auto",
+    "margin-right": "auto"
+  }}>
       {props.children}
     </section>;
 }

package/src/blocks/symbol/symbol.jsx

@@ -2,9 +2,12 @@ import { useContext, on, createEffect, createSignal } from "solid-js";
 import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
+import { TARGET } from "../../constants/target";
 function Symbol(props) {
-  const [className, setClassName] = createSignal("builder-symbol");
   const [fetchedContent, setFetchedContent] = createSignal(null);
+  function className() {
+    return [...(TARGET === "vue2" || TARGET === "vue3" ? Object.keys(props.attributes.class) : [props.attributes.class]), "builder-symbol", props.symbol?.inline ? "builder-inline-symbol" : undefined, props.symbol?.dynamic || props.dynamic ? "builder-dynamic-symbol" : undefined].filter(Boolean).join(" ");
+  }
   function contentToUse() {
     return props.symbol?.content || fetchedContent();
   }

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

@@ -47,18 +47,22 @@ function RenderBlock(props) {
       shouldEvaluateBindings: true
     });
   }
+  function actions() {
+    return getBlockActions({
+      block: useBlock(),
+      state: props.context.state,
+      context: props.context.context
+    });
+  }
   function attributes() {
+    const blockProperties = getBlockProperties(useBlock());
     return {
-      ...getBlockProperties(useBlock()),
-      ...getBlockActions({
-        block: useBlock(),
-        state: props.context.state,
-        context: props.context.context
-      }),
+      ...blockProperties,
       ...(TARGET === "reactNative" ? {
         style: getReactNativeBlockStyles({
           block: useBlock(),
-          context: props.context
+          context: props.context,
+          blockStyles: blockProperties.style
         })
       } : {})
     };
@@ -77,8 +81,12 @@ function RenderBlock(props) {
          * they are provided to the component itself directly.
          */
         ...(shouldWrap() ? {} : {
-          attributes: attributes()
-        })
+          attributes: {
+            ...attributes(),
+            ...actions()
+          }
+        }),
+        customBreakpoints: childrenContext()?.content?.meta?.breakpoints
       },
       context: childrenContext()
     };
@@ -143,7 +151,8 @@ function RenderBlock(props) {
     }
     const styles = getReactNativeBlockStyles({
       block: useBlock(),
-      context: props.context
+      context: props.context,
+      blockStyles: attributes().style
     });
     return extractTextStyles(styles);
   }
@@ -169,7 +178,7 @@ function RenderBlock(props) {
   }
   return <Show fallback={<Dynamic {...renderComponentProps()} component={renderComponentTag()}></Dynamic>} when={shouldWrap()}>
       <Show when={isEmptyHtmlElement(tag())}>
-        <Dynamic {...attributes()} component={tag()}></Dynamic>
+        <Dynamic {...attributes()} {...actions()} component={tag()}></Dynamic>
       </Show>
       <Show when={!isEmptyHtmlElement(tag()) && repeatItemData()}>
         <For each={repeatItemData()}>
@@ -180,7 +189,7 @@ function RenderBlock(props) {
         </For>
       </Show>
       <Show when={!isEmptyHtmlElement(tag()) && !repeatItemData()}>
-        <Dynamic {...attributes()} component={tag()}>
+        <Dynamic {...attributes()} {...actions()} component={tag()}>
           <Dynamic {...renderComponentProps()} component={renderComponentTag()}></Dynamic>
           <For each={childrenWithoutParentComponent()}>
             {(child, _index) => {

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

@@ -3,7 +3,6 @@ import { Dynamic } from "solid-js/web";
 import { createStore, reconcile } from "solid-js/store";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { getFetch } from "../../functions/get-fetch.js";
@@ -14,11 +13,13 @@ import { components, createRegisterComponentMessage } from "../../functions/regi
 import { _track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.jsx";
 import RenderContentStyles from "./components/render-styles.jsx";
+import BuilderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing } from "../../scripts/init-editing.js";
 function RenderContent(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
   const [overrideContent, setOverrideContent] = createSignal(null);
   const [update, setUpdate] = createSignal(0);
+  const [useBreakpoints, setUseBreakpoints] = createSignal(null);
   const [overrideState, setOverrideState] = createSignal({});
   function canTrackToUse() {
     return props.canTrack || true;
@@ -27,6 +28,9 @@ function RenderContent(props) {
     return {
       ...props.content?.data?.state,
       ...props.data,
+      ...(props.locale ? {
+        locale: props.locale
+      } : {}),
       ...overrideState()
     };
   }
@@ -53,6 +57,20 @@ function RenderContent(props) {
     } = event;
     if (data) {
       switch (data.type) {
+        case "builder.configureSdk":
+          {
+            const messageContent = data.data;
+            const {
+              breakpoints,
+              contentId
+            } = messageContent;
+            if (!contentId || contentId !== useContent?.id) {
+              return;
+            }
+            setUseBreakpoints(breakpoints);
+            setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
+            break;
+          }
         case "builder.contentUpdate":
           {
             const messageContent = data.data;
@@ -159,19 +177,34 @@ function RenderContent(props) {
         ...props.content?.data,
         ...props.data,
         ...overrideContent()?.data
+      },
+      meta: {
+        ...props.content?.meta,
+        ...overrideContent()?.meta,
+        breakpoints: useBreakpoints() || overrideContent()?.meta?.breakpoints || props.content?.meta?.breakpoints
       }
     };
     return mergedContent;
   };
   const [useContent, setUseContent] = createStore(updateUseContent());
-  createEffect(on(() => [overrideContent(), props.content, props.data], () => setUseContent(reconcile(updateUseContent()))));
+  createEffect(on(() => [overrideContent(), useBreakpoints(), props.content, props.data], () => setUseContent(reconcile(updateUseContent()))));
   let elementRef;
   onMount(() => {
+    if (!props.apiKey) {
+      console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+    }
     if (isBrowser()) {
       if (isEditing()) {
         setForceReRenderCount(forceReRenderCount() + 1);
         registerInsertMenu();
-        setupBrowserForEditing();
+        setupBrowserForEditing({
+          ...(props.locale ? {
+            locale: props.locale
+          } : {}),
+          ...(props.includeRefs ? {
+            includeRefs: props.includeRefs
+          } : {})
+        });
         Object.values(allRegisteredComponents()).forEach(registeredComponent => {
           const message = createRegisterComponentMessage(registeredComponent);
           window.parent?.postMessage(message, "*");
@@ -216,7 +249,7 @@ function RenderContent(props) {
   function onUpdateFn_0() {
     evaluateJsCode();
   }
-  createEffect(on(() => [useContent?.data?.jsCode], onUpdateFn_0));
+  createEffect(on(() => [useContent?.data?.jsCode, contentState()], onUpdateFn_0));
   function onUpdateFn_1() {
     runHttpRequests();
   }

package/src/functions/evaluate.js

@@ -4,7 +4,8 @@ function evaluate({
   code,
   context,
   state,
-  event
+  event,
+  isExpression = true
 }) {
   if (code === "") {
     console.warn("Skipping evaluation of empty code block.");
@@ -15,12 +16,12 @@ function evaluate({
     isBrowser: isBrowser(),
     isServer: !isBrowser()
   };
-  const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
+  const useReturn = isExpression && !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
   const useCode = useReturn ? `return (${code});` : code;
   try {
     return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
   } catch (e) {
-    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e.message || e);
+    console.warn("Builder custom code error: \n While Evaluating: \n ", useCode, "\n", e);
   }
 }
 export {

package/src/functions/get-block-actions-handler.js

@@ -1,12 +1,11 @@
 import { evaluate } from "./evaluate.js";
-function crateEventHandler(value, options) {
-  return (event) => evaluate({
-    code: value,
-    context: options.context,
-    state: options.state,
-    event
-  });
-}
+const createEventHandler = (value, options) => (event) => evaluate({
+  code: value,
+  context: options.context,
+  state: options.state,
+  event,
+  isExpression: false
+});
 export {
-  crateEventHandler
+  createEventHandler
 };

package/src/functions/get-block-actions.js

@@ -1,5 +1,5 @@
 import { getEventHandlerName } from "./event-handler-name.js";
-import { crateEventHandler } from "./get-block-actions-handler.js";
+import { createEventHandler } from "./get-block-actions-handler.js";
 function getBlockActions(options) {
   var _a;
   const obj = {};
@@ -9,7 +9,7 @@ function getBlockActions(options) {
       continue;
     }
     const value = optionActions[key];
-    obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+    obj[getEventHandlerName(key)] = createEventHandler(value, options);
   }
   return obj;
 }

package/src/functions/get-block-properties.js

@@ -17,12 +17,33 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { TARGET } from "../constants/target.js";
+import { convertStyleMapToCSSArray } from "../helpers/css.js";
+import { transformBlockProperties } from "./transform-block-properties.js";
 function getBlockProperties(block) {
   var _a;
-  return __spreadProps(__spreadValues({}, block.properties), {
+  const properties = __spreadProps(__spreadValues({}, block.properties), {
     "builder-id": block.id,
+    style: getStyleAttribute(block.style),
     class: [block.id, "builder-block", block.class, (_a = block.properties) == null ? void 0 : _a.class].filter(Boolean).join(" ")
   });
+  return transformBlockProperties(properties);
+}
+function getStyleAttribute(style) {
+  if (!style) {
+    return void 0;
+  }
+  switch (TARGET) {
+    case "svelte":
+    case "vue2":
+    case "vue3":
+    case "solid":
+      return convertStyleMapToCSSArray(style).join(" ");
+    case "qwik":
+    case "reactNative":
+    case "react":
+      return style;
+  }
 }
 export {
   getBlockProperties

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

@@ -1,5 +1,6 @@
 import { isBrowser } from "../is-browser.js";
 const BUILDER_SEARCHPARAMS_PREFIX = "builder.";
+const BUILDER_OPTIONS_PREFIX = "options.";
 const convertSearchParamsToQueryObject = (searchParams) => {
   const options = {};
   searchParams.forEach((value, key) => {
@@ -15,7 +16,7 @@ const getBuilderSearchParams = (_options) => {
   const newOptions = {};
   Object.keys(options).forEach((key) => {
     if (key.startsWith(BUILDER_SEARCHPARAMS_PREFIX)) {
-      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "");
+      const trimmedKey = key.replace(BUILDER_SEARCHPARAMS_PREFIX, "").replace(BUILDER_OPTIONS_PREFIX, "");
       newOptions[trimmedKey] = options[key];
     }
   });

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

@@ -57,12 +57,13 @@ const generateContentUrl = (options) => {
     noTraverse = false,
     model,
     apiKey,
-    includeRefs = true
+    includeRefs = true,
+    locale
   } = options;
   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 url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}${locale ? `&locale=${locale}` : ""}`);
   const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
   const flattened = flatten(queryOptions);
   for (const key in flattened) {
@@ -85,7 +86,7 @@ function getAllContent(options) {
     const fetch = yield getFetch();
     const content = yield fetch(url.href).then((res) => res.json());
     const canTrack = options.canTrack !== false;
-    if (canTrack) {
+    if (canTrack && Array.isArray(content.results)) {
       for (const item of content.results) {
         yield handleABTesting({ item, canTrack });
       }

package/src/functions/get-react-native-block-styles.js

@@ -17,13 +17,14 @@ var __spreadValues = (a, b) => {
 import { sanitizeReactNativeBlockStyles } from "./sanitize-react-native-block-styles.js";
 function getReactNativeBlockStyles({
   block,
-  context
+  context,
+  blockStyles
 }) {
   const responsiveStyles = block.responsiveStyles;
   if (!responsiveStyles) {
     return {};
   }
-  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {});
+  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {}), blockStyles);
   const newStyles = sanitizeReactNativeBlockStyles(styles);
   return newStyles;
 }

package/src/functions/track.js

@@ -90,6 +90,10 @@ const createEvent = (_a) => __async(void 0, null, function* () {
 });
 function _track(eventProps) {
   return __async(this, null, function* () {
+    if (!eventProps.apiKey) {
+      console.error("[Builder.io]: Missing API key for track call. Please provide your API key.");
+      return;
+    }
     if (!eventProps.canTrack) {
       return;
     }

package/src/functions/transform-block-properties.js

@@ -0,0 +1,6 @@
+function transformBlockProperties(properties) {
+  return properties;
+}
+export {
+  transformBlockProperties
+};

package/src/helpers/css.js

@@ -1,19 +1,23 @@
 import { camelToKebabCase } from "../functions/camel-to-kebab-case.js";
-const convertStyleMaptoCSS = (style) => {
+import { checkIsDefined } from "./nullable.js";
+const convertStyleMapToCSSArray = (style) => {
   const cssProps = Object.entries(style).map(([key, value]) => {
     if (typeof value === "string") {
       return `${camelToKebabCase(key)}: ${value};`;
+    } else {
+      return void 0;
     }
   });
-  return cssProps.join("\n");
+  return cssProps.filter(checkIsDefined);
 };
+const convertStyleMapToCSS = (style) => convertStyleMapToCSSArray(style).join("\n");
 const createCssClass = ({
   mediaQuery,
   className,
   styles
 }) => {
   const cssClass = `.${className} {
-    ${convertStyleMaptoCSS(styles)}
+    ${convertStyleMapToCSS(styles)}
   }`;
   if (mediaQuery) {
     return `${mediaQuery} {
@@ -24,5 +28,7 @@ const createCssClass = ({
   }
 };
 export {
+  convertStyleMapToCSS,
+  convertStyleMapToCSSArray,
   createCssClass
 };

package/src/scripts/init-editing.js

@@ -20,8 +20,8 @@ const registerInsertMenu = () => {
   });
 };
 let isSetupForEditing = false;
-const setupBrowserForEditing = () => {
-  var _a;
+const setupBrowserForEditing = (options = {}) => {
+  var _a, _b;
   if (isSetupForEditing) {
     return;
   }
@@ -36,8 +36,14 @@ const setupBrowserForEditing = () => {
         supportsCustomBreakpoints: true
       }
     }, "*");
+    (_b = window.parent) == null ? void 0 : _b.postMessage({
+      type: "builder.updateContent",
+      data: {
+        options
+      }
+    }, "*");
     window.addEventListener("message", ({ data }) => {
-      var _a2, _b;
+      var _a2, _b2;
       if (!(data == null ? void 0 : data.type)) {
         return;
       }
@@ -69,7 +75,7 @@ const setupBrowserForEditing = () => {
                 }, "*");
               }).catch(console.error);
             } else {
-              (_b = window.parent) == null ? void 0 : _b.postMessage({
+              (_b2 = window.parent) == null ? void 0 : _b2.postMessage({
                 type: "builder.evaluateResult",
                 data: { result, id }
               }, "*");

package/src/functions/mark-mutable.js

@@ -1,10 +0,0 @@
-function markMutable(value) {
-  return value;
-}
-function markPropsMutable(props) {
-  return props;
-}
-export {
-  markMutable,
-  markPropsMutable
-};