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

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.1.2",
+  "version": "0.1.3-0",
   "description": "",
   "type": "module",
-  "main": "./solid-index.jsx",
-  "module": "./solid-index.jsx",
+  "main": "./dist/sdk-solid.js",
+  "module": "./dist/sdk-solid.js",
   "exports": {
-    ".": "./solid-index.jsx"
+    ".": "./dist/sdk-solid.js"
   },
   "scripts": {
-    "build": "echo 'no need to build solid SDK'",
+    "build": "vite build",
     "release:patch": "yarn run build && npm version patch && npm publish",
     "release:minor": "yarn run build && npm version minor && npm publish",
     "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"
@@ -21,7 +21,6 @@
     "solid-js": "^1.5.7"
   },
   "devDependencies": {
-    "babel-preset-solid": "^1.3.17",
     "solid-js": "^1.5.7",
     "vite": "^3.0.4",
     "vite-plugin-solid": "^2.2.6"

package/src/blocks/BaseText.jsx

@@ -1,7 +1,11 @@
 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;
+
+export default BaseText;

package/src/blocks/button/button.jsx

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

package/src/blocks/columns/columns.jsx

@@ -1,38 +1,52 @@
-import { Show, For } from "solid-js";
+import { Show, For, createSignal } from "solid-js";
+
 import { css } from "solid-styled-components";
+
 import RenderBlocks from "../../components/render-blocks.jsx";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.jsx";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
+
 function Columns(props) {
   function getGutterSize() {
     return typeof props.space === "number" ? props.space || 0 : 20;
   }
+
   function getColumns() {
     return props.columns || [];
   }
+
   function getWidth(index) {
     const columns = getColumns();
     return columns[index]?.width || 100 / columns.length;
   }
+
   function getColumnCssWidth(index) {
     const columns = getColumns();
     const gutterSize = getGutterSize();
-    const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
     return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
   }
+
   function maybeApplyForTablet(prop) {
     const _stackColumnsAt = props.stackColumnsAt || "tablet";
     return _stackColumnsAt === "tablet" ? prop : "inherit";
   }
+
   function columnsCssVars() {
-    const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
+    const flexDir =
+      props.stackColumnsAt === "never"
+        ? "inherit"
+        : props.reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
     return {
       "--flex-dir": flexDir,
-      "--flex-dir-tablet": maybeApplyForTablet(flexDir)
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
     };
   }
+
   function columnCssVars() {
     const width = "100%";
     const marginLeft = "0";
@@ -40,37 +54,42 @@ function Columns(props) {
       "--column-width": width,
       "--column-margin-left": marginLeft,
       "--column-width-tablet": maybeApplyForTablet(width),
-      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft)
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
     };
   }
+
   function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+    const breakpointSizes = getSizesForBreakpoints(
+      props.customBreakpoints || {}
+    );
     return breakpointSizes[size].max;
   }
+
   function columnStyleObjects() {
     return {
       columns: {
         small: {
           flexDirection: "var(--flex-dir)",
-          alignItems: "stretch"
+          alignItems: "stretch",
         },
         medium: {
           flexDirection: "var(--flex-dir-tablet)",
-          alignItems: "stretch"
-        }
+          alignItems: "stretch",
+        },
       },
       column: {
         small: {
           width: "var(--column-width) !important",
-          marginLeft: "var(--column-margin-left) !important"
+          marginLeft: "var(--column-margin-left) !important",
         },
         medium: {
           width: "var(--column-width-tablet) !important",
-          marginLeft: "var(--column-margin-left-tablet) !important"
-        }
-      }
+          marginLeft: "var(--column-margin-left-tablet) !important",
+        },
+      },
     };
   }
+
   function columnsStyles() {
     return `
       @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
@@ -94,41 +113,68 @@ function Columns(props) {
       },
     `;
   }
+
   function reactNativeColumnsStyles() {
     return this.columnStyleObjects.columns.small;
   }
+
   function reactNativeColumnStyles() {
     return this.columnStyleObjects.column.small;
   }
-  return <div class={`builder-columns ${props.builderBlock.id}-breakpoints` + " " + css({
-    display: "flex",
-    lineHeight: "normal"
-  })} style={{
-    ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
-    ...columnsCssVars()
-  }}>
+
+  return (
+    <div
+      class={
+        `builder-columns ${props.builderBlock.id}-breakpoints` +
+        " " +
+        css({
+          display: "flex",
+          lineHeight: "normal",
+        })
+      }
+      style={{
+        ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
+        ...columnsCssVars(),
+      }}
+    >
       <Show when={TARGET !== "reactNative"}>
         <RenderInlinedStyles styles={columnsStyles()}></RenderInlinedStyles>
       </Show>
       <For each={props.columns}>
         {(column, _index) => {
-        const index = _index();
-        return <div class={"builder-column " + css({
-          display: "flex",
-          flexDirection: "column",
-          alignItems: "stretch"
-        })} style={{
-          width: getColumnCssWidth(index),
-          "margin-left": `${index === 0 ? 0 : getGutterSize()}px`,
-          ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
-          ...columnCssVars()
-        }} key={index}>
-              <RenderBlocks blocks={column.blocks} path={`component.options.columns.${index}.blocks`} parent={props.builderBlock.id} styleProp={{
-            flexGrow: "1"
-          }}></RenderBlocks>
-            </div>;
-      }}
+          const index = _index();
+          return (
+            <div
+              class={
+                "builder-column " +
+                css({
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "stretch",
+                })
+              }
+              style={{
+                width: getColumnCssWidth(index),
+                "margin-left": `${index === 0 ? 0 : getGutterSize()}px`,
+                ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
+                ...columnCssVars(),
+              }}
+              key={index}
+            >
+              <RenderBlocks
+                blocks={column.blocks}
+                path={`component.options.columns.${index}.blocks`}
+                parent={props.builderBlock.id}
+                styleProp={{
+                  flexGrow: "1",
+                }}
+              ></RenderBlocks>
+            </div>
+          );
+        }}
       </For>
-    </div>;
+    </div>
+  );
 }
-export default Columns;
+
+export default Columns;

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

@@ -1,7 +1,10 @@
 import { onMount, createSignal } from "solid-js";
+
 function CustomCode(props) {
   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") {
@@ -17,7 +20,14 @@ function CustomCode(props) {
           newScript.async = true;
           newScript.src = script.src;
           document.head.appendChild(newScript);
-        } else if (!script.type || ["text/javascript", "application/javascript", "application/ecmascript"].includes(script.type)) {
+        } else if (
+          !script.type ||
+          [
+            "text/javascript",
+            "application/javascript",
+            "application/ecmascript",
+          ].includes(script.type)
+        ) {
           if (scriptsRun().includes(script.innerText)) {
             continue;
           }
@@ -31,10 +41,22 @@ function CustomCode(props) {
       }
     }
   }
+
   let elem;
+
   onMount(() => {
     findAndRunScripts();
   });
-  return <div class={"builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")} ref={elem} innerHTML={props.code}></div>;
+
+  return (
+    <div
+      class={
+        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
+      }
+      ref={elem}
+      innerHTML={props.code}
+    ></div>
+  );
 }
-export default CustomCode;
+
+export default CustomCode;

package/src/blocks/embed/embed.jsx

@@ -1,9 +1,14 @@
 import { on, createEffect, createSignal } from "solid-js";
+
 import { isJsScript } from "./helpers.js";
+
 function Embed(props) {
   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");
@@ -15,7 +20,10 @@ function Embed(props) {
         newScript.async = true;
         newScript.src = script.src;
         document.head.appendChild(newScript);
-      } else if (isJsScript(script) && !scriptsRun().includes(script.innerText)) {
+      } else if (
+        isJsScript(script) &&
+        !scriptsRun().includes(script.innerText)
+      ) {
         try {
           scriptsRun().push(script.innerText);
           new Function(script.innerText)();
@@ -25,7 +33,9 @@ function Embed(props) {
       }
     }
   }
+
   let elem;
+
   function onUpdateFn_0() {
     if (elem && !ranInitFn()) {
       setRanInitFn(true);
@@ -33,6 +43,8 @@ function Embed(props) {
     }
   }
   createEffect(on(() => [elem, ranInitFn()], onUpdateFn_0));
+
   return <div class="builder-embed" ref={elem} innerHTML={props.content}></div>;
 }
-export default Embed;
+
+export default Embed;