@builder.io/sdk-solid 0.0.17 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.17",
+  "version": "0.0.19",
   "description": "",
   "type": "module",
   "main": "./solid-index.jsx",
@@ -17,11 +17,11 @@
     "solid-styled-components": "^0.27.6"
   },
   "peerDependencies": {
-    "solid-js": "^1.4.3"
+    "solid-js": "^1.5.7"
   },
   "devDependencies": {
     "babel-preset-solid": "^1.3.17",
-    "solid-js": "^1.4.3",
+    "solid-js": "^1.5.7",
     "vite": "^3.0.4",
     "vite-plugin-solid": "^2.2.6"
   }

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/symbol/symbol.jsx

@@ -1,4 +1,4 @@
-import { useContext, onMount, on, createEffect, createSignal } from "solid-js";
+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";
@@ -6,11 +6,13 @@ import { markMutable } from "../../functions/mark-mutable";
 
 function Symbol(props) {
   const [className, setClassName] = createSignal("builder-symbol");
-  const [content, setContent] = createSignal(null);
+  const [fetchedContent, setFetchedContent] = createSignal(null);
+
+  function contentToUse() {
+    return props.symbol?.content || fetchedContent();
+  }
+
   const builderContext = useContext(BuilderContext);
-  onMount(() => {
-    setContent(props.symbol?.content);
-  });
 
   function onUpdateFn_0() {
     const symbolToUse = props.symbol;
@@ -24,7 +26,7 @@ function Symbol(props) {
      * then we want to re-fetch the symbol content.
      */
 
-    if (symbolToUse && !symbolToUse.content && !content() && symbolToUse.model) {
+    if (symbolToUse && !symbolToUse.content && !fetchedContent() && symbolToUse.model) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
@@ -32,19 +34,19 @@ function Symbol(props) {
           id: symbolToUse.entry
         }
       }).then(response => {
-        setContent(response);
+        setFetchedContent(response);
       });
     }
   }
 
-  createEffect(on(() => [props.symbol, content()], onUpdateFn_0));
+  createEffect(on(() => [props.symbol, fetchedContent()], onUpdateFn_0));
   return <div class={className()} {...props.attributes} dataSet={{
     class: className()
   }}>
       <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} customComponents={markMutable(Object.values(builderContext.registeredComponents))} data={markMutable({ ...props.symbol?.data,
       ...builderContext.state,
       ...props.symbol?.content?.data?.state
-    })} model={props.symbol?.model} content={markMutable(content())}></RenderContent>
+    })} model={props.symbol?.model} content={markMutable(contentToUse())}></RenderContent>
     </div>;
 }
 

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

@@ -269,7 +269,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/scripts/init-editing.js

@@ -26,48 +26,50 @@ const setupBrowserForEditing = () => {
       type: "builder.sdkInfo",
       data: {
         target: TARGET,
-        supportsPatchUpdates: false
+        supportsPatchUpdates: false,
+        supportsAddBlockScoping: true
       }
     }, "*");
     window.addEventListener("message", ({ data }) => {
       var _a2, _b;
-      if (data) {
-        switch (data.type) {
-          case "builder.evaluate": {
-            const text = data.data.text;
-            const args = data.data.arguments || [];
-            const id = data.data.id;
-            const fn = new Function(text);
-            let result;
-            let error = null;
-            try {
-              result = fn.apply(null, args);
-            } catch (err) {
-              error = err;
-            }
-            if (error) {
-              (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
-                type: "builder.evaluateError",
-                data: { id, error: error.message }
-              }, "*");
-            } else {
-              if (result && typeof result.then === "function") {
-                result.then((finalResult) => {
-                  var _a3;
-                  (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
-                    type: "builder.evaluateResult",
-                    data: { id, result: finalResult }
-                  }, "*");
-                }).catch(console.error);
-              } else {
-                (_b = window.parent) == null ? void 0 : _b.postMessage({
+      if (!(data == null ? void 0 : data.type)) {
+        return;
+      }
+      switch (data.type) {
+        case "builder.evaluate": {
+          const text = data.data.text;
+          const args = data.data.arguments || [];
+          const id = data.data.id;
+          const fn = new Function(text);
+          let result;
+          let error = null;
+          try {
+            result = fn.apply(null, args);
+          } catch (err) {
+            error = err;
+          }
+          if (error) {
+            (_a2 = window.parent) == null ? void 0 : _a2.postMessage({
+              type: "builder.evaluateError",
+              data: { id, error: error.message }
+            }, "*");
+          } else {
+            if (result && typeof result.then === "function") {
+              result.then((finalResult) => {
+                var _a3;
+                (_a3 = window.parent) == null ? void 0 : _a3.postMessage({
                   type: "builder.evaluateResult",
-                  data: { result, id }
+                  data: { id, result: finalResult }
                 }, "*");
-              }
+              }).catch(console.error);
+            } else {
+              (_b = window.parent) == null ? void 0 : _b.postMessage({
+                type: "builder.evaluateResult",
+                data: { result, id }
+              }, "*");
             }
-            break;
           }
+          break;
         }
       }
     });

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
-};