@builder.io/sdk-solid 0.0.18 → 0.0.20

package/package.json

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

package/src/blocks/columns/columns.jsx

@@ -81,8 +81,8 @@ function Columns(props) {
           "margin-left": `${index === 0 ? 0 : getGutterSize()}px`,
           ...columnCssVars()
         }} key={index}>
-              <RenderBlocks blocks={markMutable(column.blocks)} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id} style={{
-            "flex-grow": "1"
+              <RenderBlocks blocks={markMutable(column.blocks)} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id} styleProp={{
+            flexGrow: "1"
           }}></RenderBlocks>
             </div>;
       }}

package/src/blocks/form/form.jsx

@@ -120,9 +120,9 @@ function FormComponent(props) {
 
       setFormState("sending");
       const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(props.sendSubmissionsToEmail || "")}&name=${encodeURIComponent(props.name || "")}`;
-      fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action,
+      fetch(props.sendSubmissionsTo === "email" ? formUrl : props.action
       /* TODO: throw error if no action URL */
-      {
+      , {
         body,
         headers,
         method: props.method || "post"

package/src/blocks/image/image.jsx

@@ -58,8 +58,8 @@ function Image(props) {
         pointerEvents: "none",
         fontSize: "0"
       })} style={{
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        "padding-top": props.aspectRatio * 100 + "%"
+        "padding-top": // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        props.aspectRatio * 100 + "%"
       }}></div>
       </Show>
       <Show when={props.builderBlock?.children?.length && props.fitContent}>

package/src/blocks/video/video.jsx

@@ -18,7 +18,13 @@ function Video(props) {
     };
   }
 
-  return <video {...videoProps()} style={{
+  function spreadProps() {
+    return { ...props.attributes,
+      ...videoProps()
+    };
+  }
+
+  return <video {...spreadProps()} style={{
     width: "100%",
     height: "100%",
     ...props.attributes?.style,

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

@@ -3,7 +3,6 @@ import { Dynamic } from "solid-js/web";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
-import { getBlockStyles } from "../../functions/get-block-styles.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { evaluate } from "../../functions/evaluate.js";
@@ -14,6 +13,7 @@ import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponentWithContext from "./render-component-with-context.jsx";
 import RenderComponent from "./render-component.jsx";
+import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
 
 function RenderBlock(props) {
   function component() {
@@ -61,10 +61,12 @@ function RenderBlock(props) {
         state: props.context.state,
         context: props.context.context
       }),
-      style: getBlockStyles({
-        block: useBlock(),
-        context: props.context
-      })
+      ...(TARGET === "reactNative" ? {
+        style: getReactNativeBlockStyles({
+          block: useBlock(),
+          context: props.context
+        })
+      } : {})
     };
   }
 
@@ -154,7 +156,7 @@ function RenderBlock(props) {
       return {};
     }
 
-    const styles = getBlockStyles({
+    const styles = getReactNativeBlockStyles({
       block: useBlock(),
       context: props.context
     });
@@ -187,18 +189,7 @@ function RenderBlock(props) {
       <Show when={isEmptyHtmlElement(tagName())}>
         <Dynamic {...attributes()} component={tagName()}></Dynamic>
       </Show>
-      <Show when={!isEmptyHtmlElement(tagName()) && TARGET === "vue2" && repeatItemData()}>
-        <div class="vue2-root-element-workaround">
-          <For each={repeatItemData()}>
-            {(data, _index) => {
-            const index = _index();
-
-            return <RenderRepeatedBlock key={index} repeatContext={data.context} block={data.block}></RenderRepeatedBlock>;
-          }}
-          </For>
-        </div>
-      </Show>
-      <Show when={!isEmptyHtmlElement(tagName()) && TARGET !== "vue2" && repeatItemData()}>
+      <Show when={!isEmptyHtmlElement(tagName()) && repeatItemData()}>
         <For each={repeatItemData()}>
           {(data, _index) => {
           const index = _index();

package/src/components/render-block/render-component-with-context.jsx

@@ -29,7 +29,7 @@ function RenderComponentWithContext(props) {
     }
 
   }} component={BuilderContext.Provider}>
-      <RenderComponent {...props}></RenderComponent>
+      <RenderComponent componentRef={props.componentRef} componentOptions={props.componentOptions} blockChildren={props.blockChildren} context={props.context}></RenderComponent>
     </Dynamic>;
 }
 

package/src/components/render-blocks.jsx

@@ -41,7 +41,7 @@ function RenderBlocks(props) {
     alignItems: "stretch"
   })} builder-path={props.path} builder-parent-id={props.parent} dataSet={{
     class: className()
-  }} style={props.style} onClick={event => onClick()} onMouseEnter={event => onMouseEnter()}>
+  }} style={props.styleProp} onClick={event => onClick()} onMouseEnter={event => onMouseEnter()}>
       <Show when={props.blocks}>
         <For each={props.blocks}>
           {(block, _index) => {

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

@@ -11,7 +11,7 @@ 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.js";
+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";
@@ -100,11 +100,15 @@ function RenderContent(props) {
 
   function onClick(_event) {
     if (useContent) {
-      track({
+      const variationId = useContent?.testVariationId;
+      const contentId = useContent?.id;
+
+      _track({
         type: "click",
         canTrack: canTrackToUse(),
-        contentId: useContent?.id,
-        orgId: props.apiKey
+        contentId,
+        apiKey: props.apiKey,
+        variationId: variationId !== contentId ? variationId : undefined
       });
     }
   }
@@ -195,11 +199,15 @@ function RenderContent(props) {
       }
 
       if (useContent) {
-        track({
+        const variationId = useContent?.testVariationId;
+        const contentId = useContent?.id;
+
+        _track({
           type: "impression",
           canTrack: canTrackToUse(),
-          contentId: useContent?.id,
-          orgId: props.apiKey
+          contentId,
+          apiKey: props.apiKey,
+          variationId: variationId !== contentId ? variationId : undefined
         });
       } // override normal content in preview mode
 
@@ -269,7 +277,7 @@ function RenderContent(props) {
 
   }} component={BuilderContext.Provider}>
       <Show when={useContent}>
-        <div ref={elementRef} onClick={event => onClick(event)} builder-content-id={useContent?.id}>
+        <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>

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

@@ -0,0 +1,32 @@
+var __defProp = Object.defineProperty;
+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 __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]);
+    }
+  return a;
+};
+import { sanitizeReactNativeBlockStyles } from "./sanitize-react-native-block-styles.js";
+function getReactNativeBlockStyles({
+  block,
+  context
+}) {
+  const responsiveStyles = block.responsiveStyles;
+  if (!responsiveStyles) {
+    return {};
+  }
+  const styles = __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), responsiveStyles.large || {}), responsiveStyles.medium || {}), responsiveStyles.small || {});
+  const newStyles = sanitizeReactNativeBlockStyles(styles);
+  return newStyles;
+}
+export {
+  getReactNativeBlockStyles
+};

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

@@ -0,0 +1,66 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+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 __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]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const propertiesThatMustBeNumber = new Set(["lineHeight"]);
+const displayValues = new Set(["flex", "none"]);
+const SHOW_WARNINGS = false;
+const normalizeNumber = (value) => {
+  if (Number.isNaN(value)) {
+    return void 0;
+  } else if (value < 0) {
+    return 0;
+  } else {
+    return value;
+  }
+};
+const sanitizeReactNativeBlockStyles = (styles) => {
+  return Object.keys(styles).reduce((acc, key) => {
+    const propertyValue = styles[key];
+    if (key === "display" && !displayValues.has(propertyValue)) {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style value for key "display" must be "flex" or "none" but had ${propertyValue}`);
+      }
+      return acc;
+    }
+    if (propertiesThatMustBeNumber.has(key) && typeof propertyValue !== "number") {
+      if (SHOW_WARNINGS) {
+        console.warn(`Style key ${key} must be a number, but had value \`${styles[key]}\``);
+      }
+      return acc;
+    }
+    if (typeof propertyValue === "string") {
+      const isPixelUnit = propertyValue.match(/^-?(\d*)(\.?)(\d*)*px$/);
+      if (isPixelUnit) {
+        const newValue = parseFloat(propertyValue);
+        const normalizedValue = normalizeNumber(newValue);
+        if (normalizedValue) {
+          return __spreadProps(__spreadValues({}, acc), { [key]: normalizedValue });
+        } else {
+          return acc;
+        }
+      } else if (propertyValue === "0") {
+        return __spreadProps(__spreadValues({}, acc), { [key]: 0 });
+      }
+    }
+    return __spreadProps(__spreadValues({}, acc), { [key]: propertyValue });
+  }, {});
+};
+export {
+  sanitizeReactNativeBlockStyles
+};

package/src/functions/track.js

@@ -71,23 +71,24 @@ const createEvent = (_a) => __async(void 0, null, function* () {
   var _b = _a, {
     type: eventType,
     canTrack,
-    orgId,
-    contentId
+    apiKey,
+    metadata
   } = _b, properties = __objRest(_b, [
     "type",
     "canTrack",
-    "orgId",
-    "contentId"
+    "apiKey",
+    "metadata"
   ]);
   return {
     type: eventType,
-    data: __spreadProps(__spreadValues(__spreadValues({}, properties), yield getTrackingEventData({ canTrack })), {
-      ownerId: orgId,
-      contentId
+    data: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, properties), {
+      metadata: JSON.stringify(metadata)
+    }), yield getTrackingEventData({ canTrack })), {
+      ownerId: apiKey
     })
   };
 });
-function track(eventProps) {
+function _track(eventProps) {
   return __async(this, null, function* () {
     if (!eventProps.canTrack) {
       return;
@@ -112,6 +113,8 @@ function track(eventProps) {
     });
   });
 }
+const track = (args) => _track(__spreadProps(__spreadValues({}, args), { canTrack: true }));
 export {
+  _track,
   track
 };

package/src/index.js

@@ -8,3 +8,7 @@ export * from "./functions/register.js";
 export * from "./functions/set-editor-settings.js";
 export * from "./functions/get-content/index.js";
 export * from "./functions/get-builder-search-params/index.js";
+import { track } from "./functions/track";
+export {
+  track
+};

package/src/scripts/init-editing.js

@@ -26,7 +26,8 @@ const setupBrowserForEditing = () => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
-        supportsPatchUpdates: false
+        supportsPatchUpdates: false,
+        supportsAddBlockScoping: true
       }
     }, "*");
     window.addEventListener("message", ({ data }) => {

package/src/functions/convert-style-object.js

@@ -1,14 +0,0 @@
-const camelCaseToDashCase = (str = "") => str.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
-const convertStyleObject = (obj) => {
-  if (!obj) {
-    return obj;
-  }
-  const newObj = {};
-  for (const key in obj) {
-    newObj[camelCaseToDashCase(key)] = obj[key];
-  }
-  return newObj;
-};
-export {
-  convertStyleObject
-};

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

@@ -1,50 +0,0 @@
-var __defProp = Object.defineProperty;
-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 __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]);
-    }
-  return a;
-};
-import { getMaxWidthQueryForSize } from "../constants/device-sizes.js";
-import { TARGET } from "../constants/target.js";
-import { convertStyleObject } from "./convert-style-object.js";
-import { sanitizeBlockStyles } from "./sanitize-styles.js";
-const getStyleForTarget = ({
-  styles,
-  context
-}) => {
-  switch (TARGET) {
-    case "reactNative": {
-      return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, context.inheritedStyles), styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? convertStyleObject(styles.medium) : {}), styles.small ? convertStyleObject(styles.small) : {});
-    }
-    default:
-      return __spreadValues(__spreadValues(__spreadValues({}, styles.large ? convertStyleObject(styles.large) : {}), styles.medium ? {
-        [getMaxWidthQueryForSize("medium")]: convertStyleObject(styles.medium)
-      } : {}), styles.small ? {
-        [getMaxWidthQueryForSize("small")]: convertStyleObject(styles.small)
-      } : {});
-  }
-};
-function getBlockStyles({
-  block,
-  context
-}) {
-  if (!block.responsiveStyles) {
-    return {};
-  }
-  const styles = getStyleForTarget({ styles: block.responsiveStyles, context });
-  const newStyles = sanitizeBlockStyles(styles);
-  return newStyles;
-}
-export {
-  getBlockStyles
-};

package/src/functions/sanitize-styles.js

@@ -1,4 +0,0 @@
-const sanitizeBlockStyles = (styles) => styles;
-export {
-  sanitizeBlockStyles
-};