@builder.io/sdk-solid 0.0.8-10 → 0.0.8-13

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-10",
+  "version": "0.0.8-13",
   "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({

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

@@ -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/render-block.jsx

@@ -1,7 +1,6 @@
 import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
-import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -9,8 +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.jsx";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -62,22 +62,32 @@ function RenderBlock(props) {
       });
     },
 
-    get propertiesAndActions() {
+    get attributes() {
       return { ...getBlockProperties(state.useBlock),
         ...getBlockActions({
           block: state.useBlock,
           state: builderContext.state,
           context: builderContext.context
-        })
+        }),
+        style: getBlockStyles(state.useBlock)
       };
     },
 
-    get css() {
-      return getBlockStyles(state.useBlock);
+    get shouldWrap() {
+      return !state.componentInfo?.noWrap;
     },
 
     get componentOptions() {
-      return getBlockComponentOptions(state.useBlock);
+      return { ...getBlockComponentOptions(state.useBlock),
+
+        /**
+         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
+         * they are provided to the component itself directly.
+         */
+        ...(state.shouldWrap ? {} : {
+          attributes: state.attributes
+        })
+      };
     },
 
     get children() {
@@ -89,41 +99,31 @@ function RenderBlock(props) {
     },
 
     get noCompRefChildren() {
+      /**
+       * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
+       * we render them outside of `componentRef`
+       */
       return state.componentRef ? [] : state.children;
     }
 
   });
   const builderContext = useContext(BuilderContext);
-  return <Show fallback={<Dynamic {...state.componentOptions} attributes={state.propertiesAndActions} builderBlock={state.useBlock} style={state.css} component={state.componentRef}>
-          <For each={state.children}>
+  return <Show fallback={<RenderComponent blockChildren={state.children} componentRef={state.componentRef} componentOptions={state.componentOptions}></RenderComponent>} when={state.shouldWrap}>
+      <Show fallback={<Dynamic {...state.attributes} component={state.tagName}></Dynamic>} when={!isEmptyHtmlElement(state.tagName)}>
+        <Dynamic {...state.attributes} component={state.tagName}>
+          <RenderComponent blockChildren={state.children} componentRef={state.componentRef} componentOptions={state.componentOptions}></RenderComponent>
+          <For each={state.noCompRefChildren}>
             {(child, _index) => {
-        const index = _index();
+            const index = _index();
 
-        return <RenderBlock key={child.id} block={child}></RenderBlock>;
-      }}
+            return <RenderBlock key={"render-block-" + child.id} block={child}></RenderBlock>;
+          }}
           </For>
-        </Dynamic>} when={!state.componentInfo?.noWrap}>
-      <Show fallback={<Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}></Dynamic>} when={!isEmptyHtmlElement(state.tagName)}>
-        <Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}>
-          <Show when={TARGET === "vue" || TARGET === "svelte"}>
-            <BlockStyles block={state.useBlock}></BlockStyles>
-          </Show>
-          <Show when={state.componentRef}>
-            <Dynamic {...state.componentOptions} builderBlock={state.useBlock} component={state.componentRef}>
-              <For each={state.children}>
-                {(child, _index) => {
-                const index = _index();
-
-                return <RenderBlock key={child.id} block={child}></RenderBlock>;
-              }}
-              </For>
-            </Dynamic>
-          </Show>
           <For each={state.noCompRefChildren}>
             {(child, _index) => {
             const index = _index();
 
-            return <RenderBlock key={child.id} block={child}></RenderBlock>;
+            return <BlockStyles key={"block-style-" + child.id} block={child}></BlockStyles>;
           }}
           </For>
         </Dynamic>

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

@@ -0,0 +1,27 @@
+import { Show, For } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import BlockStyles from "./block-styles.jsx";
+import RenderBlock from "./render-block.jsx";
+
+function RenderComponent(props) {
+  return <Show when={props.componentRef}>
+      <Dynamic {...props.componentOptions} component={props.componentRef}>
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+          const index = _index();
+
+          return <RenderBlock key={"render-block-" + child.id} block={child}></RenderBlock>;
+        }}
+        </For>
+        <For each={props.blockChildren}>
+          {(child, _index) => {
+          const index = _index();
+
+          return <BlockStyles key={"block-style-" + child.id} block={child}></BlockStyles>;
+        }}
+        </For>
+      </Dynamic>
+    </Show>;
+}
+
+export default RenderComponent;

package/src/components/render-blocks.jsx

@@ -2,7 +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 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({
@@ -47,7 +48,16 @@ function RenderBlocks(props) {
           {(block, _index) => {
           const index = _index();
 
-          return <RenderBlock key={block.id} block={block}></RenderBlock>;
+          return <RenderBlock key={"render-block-" + block.id} block={block}></RenderBlock>;
+        }}
+        </For>
+      </Show>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+          const index = _index();
+
+          return <BlockStyles key={"block-style-" + block.id} block={block}></BlockStyles>;
         }}
         </For>
       </Show>

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/functions/get-block-component-options.js

@@ -1,4 +1,6 @@
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -14,9 +16,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 function getBlockComponentOptions(block) {
   var _a;
-  return __spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options);
+  return __spreadProps(__spreadValues(__spreadValues({}, (_a = block.component) == null ? void 0 : _a.options), block.options), {
+    builderBlock: block
+  });
 }
 export {
   getBlockComponentOptions

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;