@builder.io/sdk-solid 0.1.2 → 0.1.3-0

package/src/blocks/select/select.jsx

@@ -1,13 +1,28 @@
 import { For } from "solid-js";
+
 import { isEditing } from "../../functions/is-editing.js";
+
 function SelectComponent(props) {
-  return <select {...props.attributes} value={props.value} key={isEditing() && props.defaultValue ? props.defaultValue : "default-key"} defaultValue={props.defaultValue} name={props.name}>
+  return (
+    <select
+      {...props.attributes}
+      value={props.value}
+      key={
+        isEditing() && props.defaultValue ? props.defaultValue : "default-key"
+      }
+      defaultValue={props.defaultValue}
+      name={props.name}
+    >
       <For each={props.options}>
         {(option, _index) => {
-        const index = _index();
-        return <option value={option.value}>{option.name || option.value}</option>;
-      }}
+          const index = _index();
+          return (
+            <option value={option.value}>{option.name || option.value}</option>
+          );
+        }}
       </For>
-    </select>;
+    </select>
+  );
 }
-export default SelectComponent;
+
+export default SelectComponent;

package/src/blocks/submit-button/submit-button.jsx

@@ -1,6 +1,9 @@
 function SubmitButton(props) {
-  return <button type="submit" {...props.attributes}>
+  return (
+    <button type="submit" {...props.attributes}>
       {props.text}
-    </button>;
+    </button>
+  );
 }
-export default SubmitButton;
+
+export default SubmitButton;

package/src/blocks/symbol/symbol.jsx

@@ -1,17 +1,34 @@
 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 [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(" ");
+    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();
   }
+
   const builderContext = useContext(BuilderContext);
+
   function onUpdateFn_0() {
     const symbolToUse = props.symbol;
 
@@ -24,27 +41,49 @@ function Symbol(props) {
      *
      * then we want to re-fetch the symbol content.
      */
-    if (symbolToUse && !symbolToUse.content && !fetchedContent() && symbolToUse.model) {
+    if (
+      symbolToUse &&
+      !symbolToUse.content &&
+      !fetchedContent() &&
+      symbolToUse.model &&
+      // This is a hack, we should not need to check for this, but it is needed for Svelte.
+      builderContext?.apiKey
+    ) {
       getContent({
         model: symbolToUse.model,
         apiKey: builderContext.apiKey,
         query: {
-          id: symbolToUse.entry
-        }
-      }).then(response => {
+          id: symbolToUse.entry,
+        },
+      }).then((response) => {
         setFetchedContent(response);
       });
     }
   }
   createEffect(on(() => [props.symbol, fetchedContent()], onUpdateFn_0));
-  return <div class={className()} {...props.attributes} dataSet={{
-    class: className()
-  }}>
-      <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={contentToUse()}></RenderContent>
-    </div>;
+
+  return (
+    <div
+      class={className()}
+      {...props.attributes}
+      dataSet={{
+        class: className(),
+      }}
+    >
+      <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={contentToUse()}
+      ></RenderContent>
+    </div>
+  );
 }
-export default Symbol;
+
+export default Symbol;

package/src/blocks/text/text.jsx

@@ -1,4 +1,5 @@
 function Text(props) {
   return <span class="builder-text" innerHTML={props.text}></span>;
 }
-export default Text;
+
+export default Text;

package/src/blocks/textarea/textarea.jsx

@@ -1,4 +1,13 @@
 function Textarea(props) {
-  return <textarea {...props.attributes} placeholder={props.placeholder} name={props.name} value={props.value} defaultValue={props.defaultValue}></textarea>;
+  return (
+    <textarea
+      {...props.attributes}
+      placeholder={props.placeholder}
+      name={props.name}
+      value={props.value}
+      defaultValue={props.defaultValue}
+    ></textarea>
+  );
 }
-export default Textarea;
+
+export default Textarea;

package/src/blocks/video/video.jsx

@@ -1,38 +1,60 @@
+import { createSignal } from "solid-js";
+
 function Video(props) {
   function videoProps() {
     return {
-      ...(props.autoPlay === true ? {
-        autoPlay: true
-      } : {}),
-      ...(props.muted === true ? {
-        muted: true
-      } : {}),
-      ...(props.controls === true ? {
-        controls: true
-      } : {}),
-      ...(props.loop === true ? {
-        loop: true
-      } : {}),
-      ...(props.playsInline === true ? {
-        playsInline: true
-      } : {})
+      ...(props.autoPlay === true
+        ? {
+            autoPlay: true,
+          }
+        : {}),
+      ...(props.muted === true
+        ? {
+            muted: true,
+          }
+        : {}),
+      ...(props.controls === true
+        ? {
+            controls: true,
+          }
+        : {}),
+      ...(props.loop === true
+        ? {
+            loop: true,
+          }
+        : {}),
+      ...(props.playsInline === true
+        ? {
+            playsInline: true,
+          }
+        : {}),
     };
   }
+
   function spreadProps() {
     return {
       ...props.attributes,
-      ...videoProps()
+      ...videoProps(),
     };
   }
-  return <video {...spreadProps()} style={{
-    width: "100%",
-    height: "100%",
-    ...props.attributes?.style,
-    "object-fit": props.fit,
-    "object-position": props.position,
-    // Hack to get object fit to work as expected and
-    // not have the video overflow
-    "border-radius": 1
-  }} src={props.video || "no-src"} poster={props.posterImage}></video>;
+
+  return (
+    <video
+      {...spreadProps()}
+      style={{
+        width: "100%",
+        height: "100%",
+        ...props.attributes?.style,
+        "object-fit": props.fit,
+        "object-position": props.position,
+        // Hack to get object fit to work as expected and
+        // not have the video overflow
+        "border-radius": 1,
+      }}
+      src={props.video || "no-src"}
+      poster={props.posterImage}
+    ></video>
+  );
 }
-export default Video;
+
+export default Video;

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

@@ -1,44 +1,68 @@
-import { Show } from "solid-js";
-import { getMaxWidthQueryForSize, getSizesForBreakpoints } from "../../constants/device-sizes.js";
+import { Show, createSignal } from "solid-js";
+
+import {
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints,
+} from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import RenderInlinedStyles from "../render-inlined-styles.jsx";
+
 function BlockStyles(props) {
   function useBlock() {
     return getProcessedBlock({
       block: props.block,
       state: props.context.state,
       context: props.context.context,
-      shouldEvaluateBindings: true
+      shouldEvaluateBindings: true,
     });
   }
+
   function css() {
     const styles = useBlock().responsiveStyles;
     const content = props.context.content;
-    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(content?.meta?.breakpoints || {});
+    const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(
+      content?.meta?.breakpoints || {}
+    );
     const largeStyles = styles?.large;
     const mediumStyles = styles?.medium;
     const smallStyles = styles?.small;
     const className = useBlock().id;
-    const largeStylesClass = largeStyles ? createCssClass({
-      className,
-      styles: largeStyles
-    }) : "";
-    const mediumStylesClass = mediumStyles ? createCssClass({
-      className,
-      styles: mediumStyles,
-      mediaQuery: getMaxWidthQueryForSize("medium", sizesWithUpdatedBreakpoints)
-    }) : "";
-    const smallStylesClass = smallStyles ? createCssClass({
-      className,
-      styles: smallStyles,
-      mediaQuery: getMaxWidthQueryForSize("small", sizesWithUpdatedBreakpoints)
-    }) : "";
+    const largeStylesClass = largeStyles
+      ? createCssClass({
+          className,
+          styles: largeStyles,
+        })
+      : "";
+    const mediumStylesClass = mediumStyles
+      ? createCssClass({
+          className,
+          styles: mediumStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "medium",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
+    const smallStylesClass = smallStyles
+      ? createCssClass({
+          className,
+          styles: smallStyles,
+          mediaQuery: getMaxWidthQueryForSize(
+            "small",
+            sizesWithUpdatedBreakpoints
+          ),
+        })
+      : "";
     return [largeStylesClass, mediumStylesClass, smallStylesClass].join(" ");
   }
-  return <Show when={TARGET !== "reactNative" && css()}>
+
+  return (
+    <Show when={TARGET !== "reactNative" && css()}>
       <RenderInlinedStyles styles={css()}></RenderInlinedStyles>
-    </Show>;
+    </Show>
+  );
 }
-export default BlockStyles;
+
+export default BlockStyles;

package/src/components/render-block/render-block.helpers.js

@@ -1,3 +1,36 @@
+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));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { evaluate } from "../../functions/evaluate";
+import { getProcessedBlock } from "../../functions/get-processed-block";
 const EMPTY_HTML_ELEMENTS = [
   "area",
   "base",
@@ -18,6 +51,63 @@ const EMPTY_HTML_ELEMENTS = [
 const isEmptyHtmlElement = (tagName) => {
   return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
 };
+const getComponent = ({
+  block,
+  context
+}) => {
+  var _a;
+  const componentName = (_a = getProcessedBlock({
+    block,
+    state: context.state,
+    context: context.context,
+    shouldEvaluateBindings: false
+  }).component) == null ? void 0 : _a.name;
+  if (!componentName) {
+    return null;
+  }
+  const ref = context.registeredComponents[componentName];
+  if (!ref) {
+    console.warn(`
+      Could not find a registered component named "${componentName}". 
+      If you registered it, is the file that registered it imported by the file that needs to render it?`);
+    return void 0;
+  } else {
+    return ref;
+  }
+};
+const getRepeatItemData = ({
+  block,
+  context
+}) => {
+  const _a = block, { repeat } = _a, blockWithoutRepeat = __objRest(_a, ["repeat"]);
+  if (!(repeat == null ? void 0 : repeat.collection)) {
+    return void 0;
+  }
+  const itemsArray = evaluate({
+    code: repeat.collection,
+    state: context.state,
+    context: context.context
+  });
+  if (!Array.isArray(itemsArray)) {
+    return void 0;
+  }
+  const collectionName = repeat.collection.split(".").pop();
+  const itemNameToUse = repeat.itemName || (collectionName ? collectionName + "Item" : "item");
+  const repeatArray = itemsArray.map((item, index) => ({
+    context: __spreadProps(__spreadValues({}, context), {
+      state: __spreadProps(__spreadValues({}, context.state), {
+        $index: index,
+        $item: item,
+        [itemNameToUse]: item,
+        [`$${itemNameToUse}Index`]: index
+      })
+    }),
+    block: blockWithoutRepeat
+  }));
+  return repeatArray;
+};
 export {
+  getComponent,
+  getRepeatItemData,
   isEmptyHtmlElement
 };