@builder.io/sdk-solid 0.0.8-11 → 0.0.8-14

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,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-11",
+  "version": "0.0.8-14",
   "description": "",
   "type": "module",
   "main": "./src/solid-index.jsx",

package/src/blocks/columns/columns.jsx

@@ -1,7 +1,7 @@
 import { For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
-import RenderBlocks from "../../components/render-blocks";
+import RenderBlocks from "../../components/render-blocks.jsx";
 
 function Columns(props) {
   const state = createMutable({

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

@@ -1,4 +1,4 @@
-import { onMount } from "solid-js";
+import { onMount, useRef } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function CustomCode(props) {
@@ -9,7 +9,6 @@ function CustomCode(props) {
     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++) {

package/src/blocks/embed/embed.jsx

@@ -1,4 +1,4 @@
-import { onMount } from "solid-js";
+import { onMount, useRef } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function Embed(props) {
@@ -9,7 +9,6 @@ function Embed(props) {
     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++) {

package/src/blocks/form/form.jsx

@@ -1,7 +1,7 @@
-import { Show, For } from "solid-js";
+import { Show, For, useRef } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
-import RenderBlock from "../../components/render-block/render-block";
+import RenderBlock from "../../components/render-block/render-block.jsx";
 import { isEditing } from "../../functions/is-editing.js";
 
 function FormComponent(props) {

package/src/blocks/image/image.jsx

@@ -17,8 +17,8 @@ function Image(props) {
       })} loading="lazy" alt={props.altText} role={props.altText ? "presentation" : undefined} style={{
         "object-position": props.backgroundSize || "center",
         "object-fit": props.backgroundSize || "cover"
-      }} src={props.image} srcSet={props.srcset} sizes={props.sizes} />
-        <source srcSet={props.srcset} />
+      }} src={props.image} srcset={props.srcset} sizes={props.sizes} />
+        <source srcset={props.srcset} />
       </picture>
       <Show when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}>
         <div class={"builder-image-sizer " + css({
@@ -27,9 +27,7 @@ function Image(props) {
         fontSize: "0"
       })} style={{
         "padding-top": props.aspectRatio * 100 + "%"
-      }}>
-          {" "}
-        </div>
+      }}></div>
       </Show>
       <Show when={props.builderBlock?.children?.length && props.fitContent}>
         {props.children}

package/src/blocks/symbol/symbol.jsx

@@ -1,6 +1,6 @@
 import { useContext, onMount } from "solid-js";
 import { createMutable } from "solid-js/store";
-import RenderContent from "../../components/render-content/render-content";
+import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context";
 
 function Symbol(props) {

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

@@ -3,7 +3,9 @@ import { createMutable } from "solid-js/store";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import RenderInlinedStyles from "../render-inlined-styles";
+import RenderInlinedStyles from "../render-inlined-styles.jsx";
+import { convertStyleMaptoCSS } from "../../helpers/css.js";
+import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
 
 function BlockStyles(props) {
   const state = createMutable({
@@ -15,35 +17,25 @@ function BlockStyles(props) {
       });
     },
 
-    camelToKebabCase(string) {
-      return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
-    },
-
     get css() {
-      // TODO: media queries
-      const styleObject = state.useBlock.responsiveStyles?.large;
-
-      if (!styleObject) {
-        return "";
-      }
-
-      let str = `.${state.useBlock.id} {`;
-
-      for (const key in styleObject) {
-        const value = styleObject[key];
-
-        if (typeof value === "string") {
-          str += `${state.camelToKebabCase(key)}: ${value};`;
-        }
-      }
-
-      str += "}";
-      return str;
+      const styles = state.useBlock.responsiveStyles;
+      const largeStyles = styles?.large;
+      const mediumStyles = styles?.medium;
+      const smallStyles = styles?.small;
+      return `
+      ${largeStyles ? `.${state.useBlock.id} {${convertStyleMaptoCSS(largeStyles)}}` : ""}
+      ${mediumStyles ? `${getMaxWidthQueryForSize("medium")} {
+            .${state.useBlock.id} {${convertStyleMaptoCSS(mediumStyles)}}
+          }` : ""}
+      ${smallStyles ? `${getMaxWidthQueryForSize("small")} {
+            .${state.useBlock.id} {${convertStyleMaptoCSS(smallStyles)}}
+          }` : ""}
+    }`;
     }
 
   });
   const builderContext = useContext(BuilderContext);
-  return <Show when={TARGET === "vue" || TARGET === "svelte"}>
+  return <Show when={TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}>
       <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
     </Show>;
 }

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

@@ -8,9 +8,9 @@ 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 BlockStyles from "./block-styles";
+import BlockStyles from "./block-styles.jsx";
 import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderComponent from "./render-component";
+import RenderComponent from "./render-component.jsx";
 
 function RenderBlock(props) {
   const state = createMutable({

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

@@ -1,7 +1,7 @@
 import { Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import BlockStyles from "./block-styles";
-import RenderBlock from "./render-block";
+import BlockStyles from "./block-styles.jsx";
+import RenderBlock from "./render-block.jsx";
 
 function RenderComponent(props) {
   return <Show when={props.componentRef}>

package/src/components/render-blocks.jsx

@@ -2,8 +2,8 @@ import { Show, For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 import { isEditing } from "../functions/is-editing.js";
-import BlockStyles from "./render-block/block-styles";
-import RenderBlock from "./render-block/render-block";
+import BlockStyles from "./render-block/block-styles.jsx";
+import RenderBlock from "./render-block/render-block.jsx";
 
 function RenderBlocks(props) {
   const state = createMutable({

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

@@ -1,5 +1,5 @@
 import { createMutable } from "solid-js/store";
-import RenderInlinedStyles from "../../render-inlined-styles";
+import RenderInlinedStyles from "../../render-inlined-styles.jsx";
 
 function RenderContentStyles(props) {
   const state = createMutable({

package/src/components/render-content/render-content.jsx

@@ -14,8 +14,8 @@ import { isPreviewing } from "../../functions/is-previewing.js";
 import { previewingModelName } from "../../functions/previewing-model-name.js";
 import { components, createRegisterComponentMessage } from "../../functions/register-component.js";
 import { track } from "../../functions/track.js";
-import RenderBlocks from "../render-blocks";
-import RenderContentStyles from "./components/render-styles";
+import RenderBlocks from "../render-blocks.jsx";
+import RenderContentStyles from "./components/render-styles.jsx";
 
 function RenderContent(props) {
   const state = createMutable({

package/src/constants/device-sizes.js

@@ -1,10 +1,4 @@
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
+const SIZES = {
   small: {
     min: 320,
     default: 321,
@@ -19,21 +13,9 @@ const sizes = {
     min: 990,
     default: 991,
     max: 1200
-  },
-  getWidthForSize(size) {
-    return this[size].default;
-  },
-  getSizeForWidth(width) {
-    for (const size of sizeNames) {
-      const value = this[size];
-      if (width <= value.max) {
-        return size;
-      }
-    }
-    return "large";
   }
 };
+const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
 export {
-  sizeNames,
-  sizes
+  getMaxWidthQueryForSize
 };

package/src/functions/camel-to-kebab-case.js

@@ -0,0 +1,4 @@
+const camelToKebabCase = (string) => string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
+export {
+  camelToKebabCase
+};

package/src/helpers/css.js

@@ -0,0 +1,12 @@
+import { camelToKebabCase } from "../functions/camel-to-kebab-case";
+const convertStyleMaptoCSS = (style) => {
+  const cssProps = Object.entries(style).map(([key, value]) => {
+    if (typeof value === "string") {
+      return `${camelToKebabCase(key)}: ${value};`;
+    }
+  });
+  return cssProps.join("\n");
+};
+export {
+  convertStyleMaptoCSS
+};

package/src/index-helpers/blocks-exports.js

@@ -7,11 +7,13 @@ import { default as default7 } from "../blocks/button/button.jsx";
 import { default as default8 } from "../blocks/section/section.jsx";
 import { default as default9 } from "../blocks/fragment/fragment.jsx";
 import { default as default10 } from "../components/render-content/render-content.jsx";
+import { default as default11 } from "../components/render-blocks.jsx";
 export {
   default7 as Button,
   default2 as Columns,
   default9 as Fragment,
   default3 as Image,
+  default11 as RenderBlocks,
   default10 as RenderContent,
   default8 as Section,
   default6 as Symbol,

package/src/blocks/button/button.lite.tsx

@@ -1,23 +0,0 @@
-import { Show } from "solid-js";
-
-function Button(props) {
-  return (
-    <>
-      <Show
-        fallback={<span {...props.attributes}>{props.text}</span>}
-        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.lite.tsx

@@ -1,109 +0,0 @@
-import { For } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-import { css } from "solid-styled-components";
-
-import RenderBlocks from "../../components/render-blocks.lite";
-
-function Columns(props) {
-  const state = createMutable({
-    getGutterSize() {
-      return typeof props.space === "number" ? props.space || 0 : 20;
-    },
-    getColumns() {
-      return props.columns || [];
-    },
-    getWidth(index: number) {
-      const columns = this.getColumns();
-      return columns[index]?.width || 100 / columns.length;
-    },
-    getColumnCssWidth(index: number) {
-      const columns = this.getColumns();
-      const gutterSize = this.getGutterSize();
-      const subtractWidth =
-        (gutterSize * (columns.length - 1)) / columns.length;
-      return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
-    },
-    maybeApplyForTablet(prop: CSSProperties["flexDirection"]) {
-      const _stackColumnsAt = props.stackColumnsAt || "tablet";
-
-      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),
-      };
-    },
-    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),
-      };
-    },
-  });
-
-  return (
-    <div
-      class={
-        "builder-columns " +
-        css({
-          display: "flex",
-          alignItems: "stretch",
-          lineHeight: "normal",
-          "@media (max-width: 999px)": {
-            flexDirection: "var(--flex-dir-tablet)",
-          },
-          "@media (max-width: 639px)": {
-            flexDirection: "var(--flex-dir)",
-          },
-        })
-      }
-      style={state.columnsCssVars}
-    >
-      <For each={props.columns}>
-        {(column, _index) => {
-          const index = _index();
-          return (
-            <div
-              class={
-                "builder-column " +
-                css({
-                  flexGrow: "1",
-                  "@media (max-width: 999px)": {
-                    width: "var(--column-width-tablet) !important",
-                    marginLeft: "var(--column-margin-left-tablet) !important",
-                  },
-                  "@media (max-width: 639px)": {
-                    width: "var(--column-width) !important",
-                    marginLeft: "var(--column-margin-left) !important",
-                  },
-                })
-              }
-              style={{
-                width: state.getColumnCssWidth(index),
-                "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
-                ...state.columnCssVars,
-              }}
-              key={index}
-            >
-              <RenderBlocks blocks={column.blocks}></RenderBlocks>
-            </div>
-          );
-        }}
-      </For>
-    </div>
-  );
-}
-
-export default Columns;

package/src/blocks/custom-code/custom-code.lite.tsx

@@ -1,69 +0,0 @@
-import { onMount } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-
-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 elem = useRef();
-
-  onMount(() => {
-    state.findAndRunScripts();
-  });
-
-  return (
-    <div
-      class={
-        "builder-custom-code" + (props.replaceNodes ? " replace-nodes" : "")
-      }
-      ref={elem}
-      innerHTML={props.code}
-    ></div>
-  );
-}
-
-export default CustomCode;

package/src/blocks/embed/embed.lite.tsx

@@ -1,61 +0,0 @@
-import { onMount } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-
-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 elem = useRef();
-
-  onMount(() => {
-    state.findAndRunScripts();
-  });
-
-  return <div class="builder-embed" ref={elem} innerHTML={props.content}></div>;
-}
-
-export default Embed;