@builder.io/sdk-solid 0.0.8-21 → 0.0.8-24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-21",
+  "version": "0.0.8-24",
   "description": "",
   "type": "module",
   "main": "./src/solid-index.jsx",

package/src/blocks/button/button.jsx

@@ -1,8 +1,13 @@
 import { Show } from "solid-js";
+import { css } from "solid-styled-components";
 
 function Button(props) {
   return <>
-      <Show fallback={<span {...props.attributes}>{props.text}</span>} when={props.link}>
+      <Show fallback={<button class={css({
+      all: "unset"
+    })} {...props.attributes}>
+            {props.text}
+          </button>} when={props.link}>
         <a {...props.attributes} role="button" href={props.link} target={props.openLinkInNewTab ? "_blank" : undefined}>
           {props.text}
         </a>

package/src/blocks/columns/columns.jsx

@@ -1,74 +1,71 @@
 import { For } from "solid-js";
-import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 import RenderBlocks from "../../components/render-blocks.jsx";
 
 function Columns(props) {
-  const state = createMutable({
-    getGutterSize() {
-      return typeof props.space === "number" ? props.space || 0 : 20;
-    },
+  function getGutterSize() {
+    return typeof props.space === "number" ? props.space || 0 : 20;
+  }
 
-    getColumns() {
-      return props.columns || [];
-    },
+  function getColumns() {
+    return props.columns || [];
+  }
 
-    getWidth(index) {
-      const columns = this.getColumns();
-      return columns[index]?.width || 100 / columns.length;
-    },
+  function getWidth(index) {
+    const columns = getColumns();
+    return columns[index]?.width || 100 / columns.length;
+  }
 
-    getColumnCssWidth(index) {
-      const columns = this.getColumns();
-      const gutterSize = this.getGutterSize();
-      const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-    },
+  function getColumnCssWidth(index) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  }
 
-    maybeApplyForTablet(prop) {
-      const _stackColumnsAt = props.stackColumnsAt || "tablet";
+  function maybeApplyForTablet(prop) {
+    const _stackColumnsAt = props.stackColumnsAt || "tablet";
 
-      return _stackColumnsAt === "tablet" ? prop : "inherit";
-    },
+    return _stackColumnsAt === "tablet" ? prop : "inherit";
+  }
 
-    get columnsCssVars() {
-      const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
-      return {
-        "--flex-dir": flexDir,
-        "--flex-dir-tablet": this.maybeApplyForTablet(flexDir)
-      };
-    },
+  function columnsCssVars() {
+    const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
+    return {
+      "--flex-dir": flexDir,
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir)
+    };
+  }
 
-    get columnCssVars() {
-      const width = "100%";
-      const marginLeft = "0";
-      return {
-        "--column-width": width,
-        "--column-margin-left": marginLeft,
-        "--column-width-tablet": this.maybeApplyForTablet(width),
-        "--column-margin-left-tablet": this.maybeApplyForTablet(marginLeft)
-      };
-    }
+  function columnCssVars() {
+    const width = "100%";
+    const marginLeft = "0";
+    return {
+      "--column-width": width,
+      "--column-margin-left": marginLeft,
+      "--column-width-tablet": maybeApplyForTablet(width),
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
+    };
+  }
 
-  });
   return <div class={"builder-columns " + css({
     display: "flex",
     alignItems: "stretch",
     lineHeight: "normal",
-    "@media (max-width: 999px)": {
+    "@media (max-width: 991px)": {
       flexDirection: "var(--flex-dir-tablet)"
     },
     "@media (max-width: 639px)": {
       flexDirection: "var(--flex-dir)"
     }
-  })} style={state.columnsCssVars}>
+  })} style={columnsCssVars()}>
       <For each={props.columns}>
         {(column, _index) => {
         const index = _index();
 
         return <div class={"builder-column " + css({
           flexGrow: "1",
-          "@media (max-width: 999px)": {
+          "@media (max-width: 991px)": {
             width: "var(--column-width-tablet) !important",
             marginLeft: "var(--column-margin-left-tablet) !important"
           },
@@ -77,11 +74,11 @@ function Columns(props) {
             marginLeft: "var(--column-margin-left) !important"
           }
         })} style={{
-          width: state.getColumnCssWidth(index),
-          "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
-          ...state.columnCssVars
+          width: getColumnCssWidth(index),
+          "margin-left": `${index === 0 ? 0 : getGutterSize()}px`,
+          ...columnCssVars()
         }} key={index}>
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
+              <RenderBlocks blocks={column.blocks} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id}></RenderBlocks>
             </div>;
       }}
       </For>

package/src/blocks/columns/component-info.js

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -186,7 +187,7 @@ const componentInfo = {
           ]
         }
       ],
-      onChange(options) {
+      onChange: markSerializable((options) => {
         function clearWidths() {
           columns.forEach((col) => {
             col.delete("width");
@@ -210,7 +211,7 @@ const componentInfo = {
             }
           }
         }
-      }
+      })
     },
     {
       name: "space",

package/src/blocks/custom-code/custom-code.jsx

@@ -1,49 +1,46 @@
-import { onMount } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { onMount, createSignal } from "solid-js";
 
 function CustomCode(props) {
-  const state = createMutable({
-    scriptsInserted: [],
-    scriptsRun: [],
-
-    findAndRunScripts() {
-      // TODO: Move this function to standalone one in '@builder.io/utils'
-      if (elem && typeof window !== "undefined") {
-        const scripts = elem.getElementsByTagName("script");
-
-        for (let i = 0; i < scripts.length; i++) {
-          const script = scripts[i];
-
-          if (script.src) {
-            if (state.scriptsInserted.includes(script.src)) {
-              continue;
-            }
-
-            state.scriptsInserted.push(script.src);
-            const newScript = document.createElement("script");
-            newScript.async = true;
-            newScript.src = script.src;
-            document.head.appendChild(newScript);
-          } else if (!script.type || ["text/javascript", "application/javascript", "application/ecmascript"].includes(script.type)) {
-            if (state.scriptsRun.includes(script.innerText)) {
-              continue;
-            }
-
-            try {
-              state.scriptsRun.push(script.innerText);
-              new Function(script.innerText)();
-            } catch (error) {
-              console.warn("`CustomCode`: Error running script:", error);
-            }
+  const [scriptsInserted, setScriptsInserted] = createSignal([]);
+  const [scriptsRun, setScriptsRun] = createSignal([]);
+
+  function findAndRunScripts() {
+    // TODO: Move this function to standalone one in '@builder.io/utils'
+    if (elem && typeof window !== "undefined") {
+      const scripts = elem.getElementsByTagName("script");
+
+      for (let i = 0; i < scripts.length; i++) {
+        const script = scripts[i];
+
+        if (script.src) {
+          if (scriptsInserted().includes(script.src)) {
+            continue;
+          }
+
+          scriptsInserted().push(script.src);
+          const newScript = document.createElement("script");
+          newScript.async = true;
+          newScript.src = script.src;
+          document.head.appendChild(newScript);
+        } else if (!script.type || ["text/javascript", "application/javascript", "application/ecmascript"].includes(script.type)) {
+          if (scriptsRun().includes(script.innerText)) {
+            continue;
+          }
+
+          try {
+            scriptsRun().push(script.innerText);
+            new Function(script.innerText)();
+          } catch (error) {
+            console.warn("`CustomCode`: Error running script:", error);
           }
         }
       }
     }
+  }
 
-  });
   let elem;
   onMount(() => {
-    state.findAndRunScripts();
+    findAndRunScripts();
   });
   return <div class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")} ref={elem} innerHTML={props.code}></div>;
 }

package/src/blocks/embed/component-info.js

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -9,7 +10,7 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange(options) {
+      onChange: markSerializable((options) => {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");
@@ -28,7 +29,7 @@ const componentInfo = {
         } else {
           options.delete("content");
         }
-      }
+      })
     },
     {
       name: "content",

package/src/blocks/embed/embed.jsx

@@ -1,47 +1,44 @@
-import { on, createEffect } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { on, createEffect, createSignal } from "solid-js";
 import { isJsScript } from "./helpers";
 
 function Embed(props) {
-  const state = createMutable({
-    scriptsInserted: [],
-    scriptsRun: [],
-    ranInitFn: false,
-
-    findAndRunScripts() {
-      const scripts = elem.getElementsByTagName("script");
-
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-
-        if (script.src && !state.scriptsInserted.includes(script.src)) {
-          state.scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (isJsScript(script) && !state.scriptsRun.includes(script.innerText)) {
-          try {
-            state.scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn("`Embed`: Error running script:", error);
-          }
+  const [scriptsInserted, setScriptsInserted] = createSignal([]);
+  const [scriptsRun, setScriptsRun] = createSignal([]);
+  const [ranInitFn, setRanInitFn] = createSignal(false);
+
+  function findAndRunScripts() {
+    const scripts = elem.getElementsByTagName("script");
+
+    for (let i = 0; i < scripts.length; i++) {
+      const script = scripts[i];
+
+      if (script.src && !scriptsInserted().includes(script.src)) {
+        scriptsInserted().push(script.src);
+        const newScript = document.createElement("script");
+        newScript.async = true;
+        newScript.src = script.src;
+        document.head.appendChild(newScript);
+      } else if (isJsScript(script) && !scriptsRun().includes(script.innerText)) {
+        try {
+          scriptsRun().push(script.innerText);
+          new Function(script.innerText)();
+        } catch (error) {
+          console.warn("`Embed`: Error running script:", error);
         }
       }
     }
+  }
 
-  });
   let elem;
 
   function onUpdateFn_0() {
-    if (elem && !state.ranInitFn) {
-      state.ranInitFn = true;
-      state.findAndRunScripts();
+    if (elem && !ranInitFn()) {
+      setRanInitFn(true);
+      findAndRunScripts();
     }
   }
 
-  createEffect(on(() => [elem, state.ranInitFn], onUpdateFn_0));
+  createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
   return <div class="builder-embed" ref={elem} innerHTML={props.content}></div>;
 }