@builder.io/sdk-solid 0.0.16 → 0.0.17

package/README.md

@@ -1,3 +1,7 @@
 # Builder.io SDK for Solid
 
-More info comign soon
+More info coming soon.
+
+## Mitosis
+
+This SDK is generated by [Mitosis](https://github.com/BuilderIO/mitosis). To see the Mitosis source-code, go [here](../../).

package/package.json

@@ -1,16 +1,28 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.16",
-  "type": "module",
+  "version": "0.0.17",
   "description": "",
-  "module": "src/index.js",
+  "type": "module",
+  "main": "./solid-index.jsx",
+  "module": "./solid-index.jsx",
+  "exports": {
+    ".": "./solid-index.jsx"
+  },
+  "scripts": {
+    "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"
+  },
   "dependencies": {
+    "node-fetch": "^2.6.7",
     "solid-styled-components": "^0.27.6"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.15"
+    "solid-js": "^1.4.3"
   },
   "devDependencies": {
-    "solid-js": "^1.3.15"
+    "babel-preset-solid": "^1.3.17",
+    "solid-js": "^1.4.3",
+    "vite": "^3.0.4",
+    "vite-plugin-solid": "^2.2.6"
   }
 }

package/solid-index.jsx

@@ -0,0 +1,5 @@
+/**
+ * We need to have a `.jsx` entry point for our SolidJS SDK. To avoid enforcing this to all other frameworks,
+ * we add this file and use it to re-export the index.js file from the Mitosis-generated code.
+ */
+export * from './src/index.js';

package/src/blocks/BaseText.jsx

@@ -0,0 +1,9 @@
+import { useContext } from "solid-js";
+import BuilderContext from "../context/builder.context.js";
+
+function BaseText(props) {
+  const builderContext = useContext(BuilderContext);
+  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
+}
+
+export default BaseText;

package/src/blocks/button/button.jsx

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

package/src/blocks/columns/columns.jsx

@@ -1,74 +1,74 @@
 import { For } from "solid-js";
-import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
-import RenderBlocks from "../../components/render-blocks.js";
+import RenderBlocks from "../../components/render-blocks.jsx";
+import { markMutable } from "../../functions/mark-mutable";
 
 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={css({
+  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={css({
-          flexGrow: "1",
-          "@media (max-width: 999px)": {
+        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"
           },
@@ -77,11 +77,13 @@ function Columns(props) {
             marginLeft: "var(--column-margin-left) !important"
           }
         })} style={{
-          width: state.getColumnCssWidth(index),
-          "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
-          ...state.columnCssVars
-        }}>
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
+          width: getColumnCssWidth(index),
+          "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>
             </div>;
       }}
       </For>

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

@@ -1,3 +1,4 @@
+import { markSerializable } from "../util.js";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -186,7 +187,31 @@ const componentInfo = {
           ]
         }
       ],
-      onChange: "        function clearWidths() {          columns.forEach(col => {            col.delete('width');          });        }        const columns = options.get('columns') as Array<Map<String, any>>;        if (Array.isArray(columns)) {          const containsColumnWithWidth = !!columns.find(col => col.get('width'));          if (containsColumnWithWidth) {            const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));            if (containsColumnWithoutWidth) {              clearWidths();            } else {              const sumWidths = columns.reduce((memo, col) => {                return memo + col.get('width');              }, 0);              const widthsDontAddUp = sumWidths !== 100;              if (widthsDontAddUp) {                clearWidths();              }            }          }        }      "
+      onChange: markSerializable((options) => {
+        function clearWidths() {
+          columns.forEach((col) => {
+            col.delete("width");
+          });
+        }
+        const columns = options.get("columns");
+        if (Array.isArray(columns)) {
+          const containsColumnWithWidth = !!columns.find((col) => col.get("width"));
+          if (containsColumnWithWidth) {
+            const containsColumnWithoutWidth = !!columns.find((col) => !col.get("width"));
+            if (containsColumnWithoutWidth) {
+              clearWidths();
+            } else {
+              const sumWidths = columns.reduce((memo, col) => {
+                return memo + col.get("width");
+              }, 0);
+              const widthsDontAddUp = sumWidths !== 100;
+              if (widthsDontAddUp) {
+                clearWidths();
+              }
+            }
+          }
+        }
+      })
     },
     {
       name: "space",

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

@@ -1,49 +1,46 @@
-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") {
-        /** @type {HTMLScriptElement[]} */
-        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 && elem.getElementsByTagName && 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);
           }
         }
       }
     }
+  }
 
-  });
-  const elem = useRef();
+  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.js";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -9,7 +10,26 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: "        const url = options.get('url');        if (url) {          options.set('content', 'Loading...');          // TODO: get this out of here!          const apiKey = 'ae0e60e78201a3f2b0de4b';          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`)            .then(res => res.json())            .then(data => {              if (options.get('url') === url) {                if (data.html) {                  options.set('content', data.html);                } else {                  options.set('content', 'Invalid url, please try another');                }              }            })            .catch(err => {              options.set(                'content',                'There was an error embedding this URL, please try again or another URL'              );            });        } else {          options.delete('content');        }      "
+      onChange: markSerializable((options) => {
+        const url = options.get("url");
+        if (url) {
+          options.set("content", "Loading...");
+          const apiKey = "ae0e60e78201a3f2b0de4b";
+          return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then((res) => res.json()).then((data) => {
+            if (options.get("url") === url) {
+              if (data.html) {
+                options.set("content", data.html);
+              } else {
+                options.set("content", "Invalid url, please try another");
+              }
+            }
+          }).catch((_err) => {
+            options.set("content", "There was an error embedding this URL, please try again or another URL");
+          });
+        } else {
+          options.delete("content");
+        }
+      })
     },
     {
       name: "content",

package/src/blocks/embed/embed.jsx

@@ -1,51 +1,46 @@
-import { createMutable } from "solid-js/store";
+import { on, createEffect, createSignal } from "solid-js";
+import { isJsScript } from "./helpers.js";
 
 function Embed(props) {
-  const state = createMutable({
-    scriptsInserted: [],
-    scriptsRun: [],
-
-    findAndRunScripts() {
-      // TODO: Move this function to standalone one in '@builder.io/utils'
-      if (elem && typeof window !== "undefined") {
-        /** @type {HTMLScriptElement[]} */
-        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("`Embed`: Error running script:", error);
-            }
-          }
+  const [scriptsInserted, setScriptsInserted] = createSignal([]);
+  const [scriptsRun, setScriptsRun] = createSignal([]);
+  const [ranInitFn, setRanInitFn] = createSignal(false);
+
+  function findAndRunScripts() {
+    if (!elem || !elem.getElementsByTagName) return;
+    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);
         }
       }
     }
+  }
 
-  });
-  const elem = useRef();
-  onMount(() => {
-    state.findAndRunScripts();
-  });
-  return <div ref={elem} innerHTML={props.content}></div>;
+  let elem;
+
+  function onUpdateFn_0() {
+    if (elem && !ranInitFn()) {
+      setRanInitFn(true);
+      findAndRunScripts();
+    }
+  }
+
+  createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
+  return <div class="builder-embed" ref={elem} innerHTML={props.content}></div>;
 }
 
 export default Embed;

package/src/blocks/embed/helpers.js

@@ -0,0 +1,9 @@
+const SCRIPT_MIME_TYPES = [
+  "text/javascript",
+  "application/javascript",
+  "application/ecmascript"
+];
+const isJsScript = (script) => SCRIPT_MIME_TYPES.includes(script.type);
+export {
+  isJsScript
+};