@builder.io/sdk-solid 0.0.8-1 → 0.0.8-12

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,23 +1,27 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-1",
-  "type": "module",
+  "version": "0.0.8-12",
   "description": "",
-  "module": "src/index.js",
-  "main": "src/index.js",
+  "type": "module",
+  "main": "./src/solid-index.jsx",
+  "module": "./src/solid-index.jsx",
   "exports": {
-    ".": "./src/index.js"
+    ".": "./src/solid-index.jsx"
   },
   "scripts": {
     "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": "^2.9.8",
+    "vite-plugin-solid": "^2.2.6"
   }
 }

package/src/blocks/button/button.jsx

@@ -2,7 +2,7 @@ import { Show } from "solid-js";
 
 function Button(props) {
   return <>
-      <Show when={props.link}>
+      <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>

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

@@ -3,7 +3,10 @@ import { Show } from "solid-js";
 function Button(props) {
   return (
     <>
-      <Show when={props.link}>
+      <Show
+        fallback={<span {...props.attributes}>{props.text}</span>}
+        when={props.link}
+      >
         <a
           {...props.attributes}
           role="button"

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({
@@ -51,7 +51,7 @@ function Columns(props) {
     }
 
   });
-  return <div class={css({
+  return <div class={"builder-columns " + css({
     display: "flex",
     alignItems: "stretch",
     lineHeight: "normal",
@@ -66,7 +66,7 @@ function Columns(props) {
         {(column, _index) => {
         const index = _index();
 
-        return <div class={css({
+        return <div class={"builder-column " + css({
           flexGrow: "1",
           "@media (max-width: 999px)": {
             width: "var(--column-width-tablet) !important",
@@ -80,7 +80,7 @@ function Columns(props) {
           width: state.getColumnCssWidth(index),
           "margin-left": `${index === 0 ? 0 : state.getGutterSize()}px`,
           ...state.columnCssVars
-        }}>
+        }} key={index}>
               <RenderBlocks blocks={column.blocks}></RenderBlocks>
             </div>;
       }}

package/src/blocks/columns/columns.lite.tsx

@@ -3,7 +3,7 @@ import { For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 
-import RenderBlocks from "../../components/render-blocks.lite";
+import RenderBlocks from "../../components/render-blocks.jsx";
 
 function Columns(props) {
   const state = createMutable({
@@ -24,7 +24,7 @@ function Columns(props) {
         (gutterSize * (columns.length - 1)) / columns.length;
       return `calc(${this.getWidth(index)}% - ${subtractWidth}px)`;
     },
-    maybeApplyForTablet(prop: string) {
+    maybeApplyForTablet(prop: JSX.CSSProperties["flexDirection"]) {
       const _stackColumnsAt = props.stackColumnsAt || "tablet";
 
       return _stackColumnsAt === "tablet" ? prop : "inherit";
@@ -55,17 +55,20 @@ function Columns(props) {
 
   return (
     <div
-      class={css({
-        display: "flex",
-        alignItems: "stretch",
-        lineHeight: "normal",
-        "@media (max-width: 999px)": {
-          flexDirection: "var(--flex-dir-tablet)",
-        },
-        "@media (max-width: 639px)": {
-          flexDirection: "var(--flex-dir)",
-        },
-      })}
+      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}>
@@ -73,22 +76,26 @@ function Columns(props) {
           const index = _index();
           return (
             <div
-              class={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",
-                },
-              })}
+              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>

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

@@ -1,3 +1,4 @@
+import { onMount, useRef } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function CustomCode(props) {
@@ -8,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/custom-code/custom-code.lite.tsx

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

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

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

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) {
@@ -236,7 +236,7 @@ function FormComponent(props) {
         <BuilderBlocks dataPath="sendingMessage" blocks={props.sendingMessage}></BuilderBlocks>
       </Show>
       <Show when={state.submissionState === "error" && state.responseData}>
-        <pre class={css({
+        <pre class={"builder-form-error-text " + css({
         padding: "10px",
         color: "red",
         textAlign: "center"

package/src/blocks/form/form.lite.tsx

@@ -1,9 +1,9 @@
-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.lite";
+import RenderBlock from "../../components/render-block/render-block.jsx";
 import { isEditing } from "../../functions/is-editing.js";
 
 function FormComponent(props) {
@@ -271,11 +271,14 @@ function FormComponent(props) {
       </Show>
       <Show when={state.submissionState === "error" && state.responseData}>
         <pre
-          class={css({
-            padding: "10px",
-            color: "red",
-            textAlign: "center",
-          })}
+          class={
+            "builder-form-error-text " +
+            css({
+              padding: "10px",
+              color: "red",
+              textAlign: "center",
+            })
+          }
         >
           {JSON.stringify(state.responseData, null, 2)}
         </pre>

package/src/blocks/image/image.jsx

@@ -14,14 +14,14 @@ function Image(props) {
         width: "100%",
         top: "0px",
         left: "0px"
-      })} loading="lazy" alt={props.altText} aria-role={props.altText ? "presentation" : undefined} style={{
+      })} 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} />
+        <source srcset={props.srcset} />
       </picture>
       <Show when={props.aspectRatio && !(props.fitContent && props.builderBlock?.children?.length)}>
-        <div class={css({
+        <div class={"builder-image-sizer " + css({
         width: "100%",
         pointerEvents: "none",
         fontSize: "0"

package/src/blocks/image/image.lite.tsx

@@ -27,7 +27,7 @@ function Image(props) {
           }
           loading="lazy"
           alt={props.altText}
-          aria-role={props.altText ? "presentation" : undefined}
+          role={props.altText ? "presentation" : undefined}
           style={{
             "object-position": props.backgroundSize || "center",
             "object-fit": props.backgroundSize || "cover",
@@ -36,7 +36,7 @@ function Image(props) {
           srcset={props.srcset}
           sizes={props.sizes}
         />
-        <source srcSet={props.srcset} />
+        <source srcset={props.srcset} />
       </picture>
       <Show
         when={
@@ -45,11 +45,14 @@ function Image(props) {
         }
       >
         <div
-          class={css({
-            width: "100%",
-            pointerEvents: "none",
-            fontSize: "0",
-          })}
+          class={
+            "builder-image-sizer " +
+            css({
+              width: "100%",
+              pointerEvents: "none",
+              fontSize: "0",
+            })
+          }
           style={{
             "padding-top": props.aspectRatio * 100 + "%",
           }}

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

@@ -2,6 +2,7 @@ const componentInfo = {
   name: "Symbol",
   noWrap: true,
   static: true,
+  builtIn: true,
   inputs: [
     {
       name: "symbol",

package/src/blocks/symbol/symbol.jsx

@@ -1,5 +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) {
@@ -16,7 +17,7 @@ function Symbol(props) {
   }}>
       <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} data={{ ...props.symbol?.data,
       ...builderContext.state,
-      ...props.symbol?.state.content?.data?.state
+      ...props.symbol?.content?.data?.state
     }} model={props.symbol?.model} content={state.content}></RenderContent>
     </div>;
 }

package/src/blocks/symbol/symbol.lite.tsx

@@ -1,6 +1,8 @@
+import { useContext, onMount } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
-import RenderContent from "../../components/render-content/render-content.lite";
+import RenderContent from "../../components/render-content/render-content.jsx";
 import BuilderContext from "../../context/builder.context";
 import { getContent } from "../../functions/get-content/index.js";
 
@@ -27,7 +29,7 @@ function Symbol(props) {
         data={{
           ...props.symbol?.data,
           ...builderContext.state,
-          ...props.symbol?.state.content?.data?.state,
+          ...props.symbol?.content?.data?.state,
         }}
         model={props.symbol?.model}
         content={state.content}

package/src/blocks/text/text.jsx

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

package/src/blocks/text/text.lite.tsx

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

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

@@ -1,21 +1,33 @@
+import { useContext, Show } from "solid-js";
 import { createMutable } from "solid-js/store";
-import RenderInlinedStyles from "../render-inlined-styles";
+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.jsx";
 
 function BlockStyles(props) {
   const state = createMutable({
+    get useBlock() {
+      return getProcessedBlock({
+        block: props.block,
+        state: builderContext.state,
+        context: builderContext.context
+      });
+    },
+
     camelToKebabCase(string) {
       return string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2").toLowerCase();
     },
 
     get css() {
       // TODO: media queries
-      const styleObject = props.block.responsiveStyles?.large;
+      const styleObject = state.useBlock.responsiveStyles?.large;
 
       if (!styleObject) {
         return "";
       }
 
-      let str = `.${props.block.id} {`;
+      let str = `.${state.useBlock.id} {`;
 
       for (const key in styleObject) {
         const value = styleObject[key];
@@ -30,7 +42,10 @@ function BlockStyles(props) {
     }
 
   });
-  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+  const builderContext = useContext(BuilderContext);
+  return <Show when={TARGET === "vue" || TARGET === "svelte"}>
+      <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
+    </Show>;
 }
 
 export default BlockStyles;

package/src/components/render-block/block-styles.lite.tsx

@@ -1,9 +1,21 @@
+import { useContext, Show } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
-import RenderInlinedStyles from "../render-inlined-styles.lite";
+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.jsx";
 
 function BlockStyles(props) {
   const state = createMutable({
+    get useBlock() {
+      return getProcessedBlock({
+        block: props.block,
+        state: builderContext.state,
+        context: builderContext.context,
+      });
+    },
     camelToKebabCase(string: string) {
       return string
         .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
@@ -11,13 +23,13 @@ function BlockStyles(props) {
     },
     get css() {
       // TODO: media queries
-      const styleObject = props.block.responsiveStyles?.large;
+      const styleObject = state.useBlock.responsiveStyles?.large;
 
       if (!styleObject) {
         return "";
       }
 
-      let str = `.${props.block.id} {`;
+      let str = `.${state.useBlock.id} {`;
 
       for (const key in styleObject) {
         const value = styleObject[key];
@@ -32,7 +44,13 @@ function BlockStyles(props) {
     },
   });
 
-  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+  const builderContext = useContext(BuilderContext);
+
+  return (
+    <Show when={TARGET === "vue" || TARGET === "svelte"}>
+      <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
+    </Show>
+  );
 }
 
 export default BlockStyles;

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

@@ -0,0 +1,23 @@
+const EMPTY_HTML_ELEMENTS = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+];
+const isEmptyHtmlElement = (tagName) => {
+  return typeof tagName === "string" && EMPTY_HTML_ELEMENTS.includes(tagName.toLowerCase());
+};
+export {
+  isEmptyHtmlElement
+};