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

package/package.json

@@ -1,23 +1,27 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-1",
-  "type": "module",
+  "version": "0.0.8-10",
   "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

@@ -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

@@ -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: 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 } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function CustomCode(props) {

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

@@ -1,3 +1,5 @@
+import { onMount } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
 function CustomCode(props) {

package/src/blocks/embed/embed.jsx

@@ -1,3 +1,4 @@
+import { onMount } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function Embed(props) {
@@ -45,7 +46,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 } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
 function Embed(props) {
@@ -53,7 +55,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

@@ -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

@@ -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} />
+      }} 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={css({
+        <div class={"builder-image-sizer " + css({
         width: "100%",
         pointerEvents: "none",
         fontSize: "0"

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

@@ -27,13 +27,13 @@ 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",
           }}
           src={props.image}
-          srcset={props.srcset}
+          srcSet={props.srcset}
           sizes={props.sizes}
         />
         <source srcSet={props.srcset} />
@@ -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,3 +1,4 @@
+import { useContext, onMount } from "solid-js";
 import { createMutable } from "solid-js/store";
 import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context";
@@ -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,3 +1,5 @@
+import { useContext, onMount } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
 import RenderContent from "../../components/render-content/render-content.lite";
@@ -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/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
+};

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

@@ -9,8 +9,8 @@ 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 { components } from "../../functions/register-component.js";
 import BlockStyles from "./block-styles";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -21,20 +21,29 @@ function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[componentName];
+      const ref = builderContext.registeredComponents[componentName];
 
-      if (componentName && !ref) {
+      if (!ref) {
         // TODO: Public doc page with more info about this message
         console.warn(`
         Could not find a registered component named "${componentName}". 
         If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return undefined;
+      } else {
+        return ref;
       }
-
-      return ref;
     },
 
     get componentInfo() {
-      return state.component?.info;
+      if (state.component) {
+        const {
+          component: _,
+          ...info
+        } = state.component;
+        return info;
+      } else {
+        return undefined;
+      }
     },
 
     get componentRef() {
@@ -85,8 +94,16 @@ function RenderBlock(props) {
 
   });
   const builderContext = useContext(BuilderContext);
-  return <>
-      <Show when={!state.componentInfo?.noWrap}>
+  return <Show fallback={<Dynamic {...state.componentOptions} attributes={state.propertiesAndActions} builderBlock={state.useBlock} style={state.css} component={state.componentRef}>
+          <For each={state.children}>
+            {(child, _index) => {
+        const index = _index();
+
+        return <RenderBlock key={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>
@@ -97,7 +114,7 @@ function RenderBlock(props) {
                 {(child, _index) => {
                 const index = _index();
 
-                return <RenderBlock block={child}></RenderBlock>;
+                return <RenderBlock key={child.id} block={child}></RenderBlock>;
               }}
               </For>
             </Dynamic>
@@ -106,12 +123,12 @@ function RenderBlock(props) {
             {(child, _index) => {
             const index = _index();
 
-            return <RenderBlock block={child}></RenderBlock>;
+            return <RenderBlock key={child.id} block={child}></RenderBlock>;
           }}
           </For>
         </Dynamic>
       </Show>
-    </>;
+    </Show>;
 }
 
 export default RenderBlock;

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

@@ -10,8 +10,8 @@ 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 { components } from "../../functions/register-component.js";
 import BlockStyles from "./block-styles.lite";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -22,19 +22,25 @@ function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[componentName];
+      const ref = builderContext.registeredComponents[componentName];
 
-      if (componentName && !ref) {
+      if (!ref) {
         // TODO: Public doc page with more info about this message
         console.warn(`
         Could not find a registered component named "${componentName}". 
         If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return undefined;
+      } else {
+        return ref;
       }
-
-      return ref;
     },
     get componentInfo() {
-      return state.component?.info;
+      if (state.component) {
+        const { component: _, ...info } = state.component;
+        return info;
+      } else {
+        return undefined;
+      }
     },
     get componentRef() {
       return state.component?.component;
@@ -80,8 +86,35 @@ function RenderBlock(props) {
   const builderContext = useContext(BuilderContext);
 
   return (
-    <>
-      <Show when={!state.componentInfo?.noWrap}>
+    <Show
+      fallback={
+        <Dynamic
+          {...state.componentOptions}
+          attributes={state.propertiesAndActions}
+          builderBlock={state.useBlock}
+          style={state.css}
+          component={state.componentRef}
+        >
+          <For each={state.children}>
+            {(child, _index) => {
+              const index = _index();
+              return <RenderBlock key={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}
@@ -99,7 +132,9 @@ function RenderBlock(props) {
               <For each={state.children}>
                 {(child, _index) => {
                   const index = _index();
-                  return <RenderBlock block={child}></RenderBlock>;
+                  return (
+                    <RenderBlock key={child.id} block={child}></RenderBlock>
+                  );
                 }}
               </For>
             </Dynamic>
@@ -107,12 +142,12 @@ function RenderBlock(props) {
           <For each={state.noCompRefChildren}>
             {(child, _index) => {
               const index = _index();
-              return <RenderBlock block={child}></RenderBlock>;
+              return <RenderBlock key={child.id} block={child}></RenderBlock>;
             }}
           </For>
         </Dynamic>
       </Show>
-    </>
+    </Show>
   );
 }
 

package/src/components/render-content/index.js

@@ -0,0 +1,4 @@
+import { default as default2 } from "./render-content.jsx";
+export {
+  default2 as default
+};

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

@@ -1,6 +1,7 @@
 import { Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { evaluate } from "../../functions/evaluate.js";
@@ -11,6 +12,7 @@ import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 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";
@@ -43,6 +45,19 @@ function RenderContent(props) {
       return {};
     },
 
+    get allRegisteredComponents() {
+      const allComponentsArray = [...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components, ...(props.customComponents || [])];
+      const allComponents = allComponentsArray.reduce((acc, curr) => ({ ...acc,
+        [curr.name]: curr
+      }), {});
+      return allComponents;
+    },
+
     processMessage(event) {
       const {
         data
@@ -128,20 +143,26 @@ function RenderContent(props) {
     },
 
     emitStateUpdate() {
-      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-        detail: {
-          state: state.contentState,
-          ref: {
-            name: props.model
+      if (isEditing()) {
+        window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+          detail: {
+            state: state.contentState,
+            ref: {
+              name: props.model
+            }
           }
-        }
-      }));
+        }));
+      }
     }
 
   });
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
+        Object.values(state.allRegisteredComponents).forEach(registeredComponent => {
+          const message = createRegisterComponentMessage(registeredComponent);
+          window.parent?.postMessage(message, "*");
+        });
         window.addEventListener("message", state.processMessage);
         window.addEventListener("builder:component:stateChangeListenerActivated", state.emitStateUpdate);
       }
@@ -192,6 +213,10 @@ function RenderContent(props) {
 
     get apiKey() {
       return props.apiKey;
+    },
+
+    get registeredComponents() {
+      return state.allRegisteredComponents;
     }
 
   }} component={BuilderContext.Provider}>

package/src/components/render-content/render-content.lite.tsx

@@ -2,6 +2,7 @@ import { useContext, Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { evaluate } from "../../functions/evaluate.js";
@@ -15,6 +16,10 @@ import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 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.lite";
 import RenderContentStyles from "./components/render-styles.lite";
@@ -44,9 +49,23 @@ function RenderContent(props) {
       };
     },
     get context() {
-      return {} as {
-        [index: string]: any;
-      };
+      return {} as Dictionary<any>;
+    },
+    get allRegisteredComponents() {
+      const allComponentsArray = [
+        ...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(props.customComponents || []),
+      ];
+      const allComponents = allComponentsArray.reduce(
+        (acc, curr) => ({ ...acc, [curr.name]: curr }),
+        {} as RegisteredComponents
+      );
+      return allComponents;
     },
     processMessage(event: MessageEvent) {
       const { data } = event;
@@ -124,25 +143,33 @@ function RenderContent(props) {
       });
     },
     emitStateUpdate() {
-      window.dispatchEvent(
-        new CustomEvent<BuilderComponentStateChange>(
-          "builder:component:stateChange",
-          {
-            detail: {
-              state: state.contentState,
-              ref: {
-                name: props.model,
+      if (isEditing()) {
+        window.dispatchEvent(
+          new CustomEvent<BuilderComponentStateChange>(
+            "builder:component:stateChange",
+            {
+              detail: {
+                state: state.contentState,
+                ref: {
+                  name: props.model,
+                },
               },
-            },
-          }
-        )
-      );
+            }
+          )
+        );
+      }
     },
   });
 
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
+        Object.values(state.allRegisteredComponents).forEach(
+          (registeredComponent) => {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
+        );
         window.addEventListener("message", state.processMessage);
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
@@ -198,6 +225,9 @@ function RenderContent(props) {
         get apiKey() {
           return props.apiKey;
         },
+        get registeredComponents() {
+          return state.allRegisteredComponents;
+        },
       }}
       component={BuilderContext.Provider}
     >

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

@@ -1,4 +1,5 @@
 import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 import { TARGET } from "../constants/target.js";
 
@@ -15,7 +16,7 @@ function RenderInlinedStyles(props) {
     }
 
   });
-  return <Show when={TARGET === "svelte"}>
+  return <Show fallback={<Dynamic component={state.tagName}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
       <div innerHTML={state.injectedStyleScript}></div>
     </Show>;
 }

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

@@ -17,7 +17,10 @@ function RenderInlinedStyles(props) {
   });
 
   return (
-    <Show when={TARGET === "svelte"}>
+    <Show
+      fallback={<Dynamic component={state.tagName}>{props.styles}</Dynamic>}
+      when={TARGET === "svelte"}
+    >
       <div innerHTML={state.injectedStyleScript}></div>
     </Show>
   );

package/src/constants/builder-registered-components.js

@@ -0,0 +1,45 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { default as Button } from "../blocks/button/button.jsx";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
+import { default as Columns } from "../blocks/columns/columns.jsx";
+import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
+import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
+import { default as Fragment } from "../blocks/fragment/fragment.jsx";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
+import { default as Image } from "../blocks/image/image.jsx";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
+import { default as Section } from "../blocks/section/section.jsx";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
+import { default as Symbol } from "../blocks/symbol/symbol.jsx";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
+import { default as Text } from "../blocks/text/text.jsx";
+import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
+import { default as Video } from "../blocks/video/video.jsx";
+const getDefaultRegisteredComponents = () => [
+  __spreadValues({ component: Columns }, columnsComponentInfo),
+  __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Text }, textComponentInfo),
+  __spreadValues({ component: Video }, videoComponentInfo),
+  __spreadValues({ component: Symbol }, symbolComponentInfo),
+  __spreadValues({ component: Button }, buttonComponentInfo),
+  __spreadValues({ component: Section }, sectionComponentInfo),
+  __spreadValues({ component: Fragment }, fragmentComponentInfo)
+];
+export {
+  getDefaultRegisteredComponents
+};

package/src/context/builder.context.js

@@ -3,7 +3,8 @@ var stdin_default = createContext({
   content: null,
   context: {},
   state: {},
-  apiKey: null
+  apiKey: null,
+  registeredComponents: {}
 });
 export {
   stdin_default as default

package/src/functions/fast-clone.js

@@ -0,0 +1,4 @@
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

package/src/functions/get-block-styles.js

@@ -30,10 +30,10 @@ function getBlockStyles(block) {
   var _a, _b, _c, _d, _e;
   const styles = __spreadValues({}, convertStyleObject((_a = block.responsiveStyles) == null ? void 0 : _a.large));
   if ((_b = block.responsiveStyles) == null ? void 0 : _b.medium) {
-    styles[`@media (max-width: ${sizes.medium})`] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
+    styles[`@media (max-width: ${sizes.medium.max})`] = convertStyleObject((_c = block.responsiveStyles) == null ? void 0 : _c.medium);
   }
   if ((_d = block.responsiveStyles) == null ? void 0 : _d.small) {
-    styles[`@media (max-width: ${sizes.small})`] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
+    styles[`@media (max-width: ${sizes.small.max})`] = convertStyleObject((_e = block.responsiveStyles) == null ? void 0 : _e.small);
   }
   return styles;
 }

package/src/functions/register-component.js

@@ -17,27 +17,43 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isBrowser } from "./is-browser.js";
-const components = {};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { fastClone } from "./fast-clone.js";
+const components = [];
 function registerComponent(component, info) {
-  var _a;
-  components[info.name] = { component, info };
-  if (isBrowser()) {
-    const sendInfo = prepareComponentInfoToSend(info);
-    (_a = window.parent) == null ? void 0 : _a.postMessage({
-      type: "builder.registerComponent",
-      data: sendInfo
-    }, "*");
-  }
+  components.push(__spreadValues({ component }, info));
+  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
   return component;
 }
+const createRegisterComponentMessage = (_a) => {
+  var _b = _a, {
+    component
+  } = _b, info = __objRest(_b, [
+    "component"
+  ]);
+  return {
+    type: "builder.registerComponent",
+    data: prepareComponentInfoToSend(fastClone(info))
+  };
+};
 function prepareComponentInfoToSend(info) {
   return __spreadValues(__spreadValues({}, info), info.inputs && {
     inputs: info.inputs.map((input) => {
       const keysToConvertFnToString = ["onChange", "showIf"];
       for (const key of keysToConvertFnToString) {
-        if (input[key] && typeof input[key] === "function") {
-          const fn = input[key];
+        const fn = input[key];
+        if (fn && typeof fn === "function") {
           input = __spreadProps(__spreadValues({}, input), {
             [key]: `return (${fn.toString()}).apply(this, arguments)`
           });
@@ -49,5 +65,6 @@ function prepareComponentInfoToSend(info) {
 }
 export {
   components,
+  createRegisterComponentMessage,
   registerComponent
 };

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

@@ -1,12 +1,12 @@
-import { default as default2 } from "../blocks/columns/index.js";
-import { default as default3 } from "../blocks/image/index.js";
-import { default as default4 } from "../blocks/text/index.js";
-import { default as default5 } from "../blocks/video/index.js";
-import { default as default6 } from "../blocks/symbol/index.js";
-import { default as default7 } from "../blocks/button/index.js";
-import { default as default8 } from "../blocks/section/index.js";
-import { default as default9 } from "../blocks/fragment/index.js";
-import { default as default10 } from "../components/render-content/render-content";
+import { default as default2 } from "../blocks/columns/columns.jsx";
+import { default as default3 } from "../blocks/image/image.jsx";
+import { default as default4 } from "../blocks/text/text.jsx";
+import { default as default5 } from "../blocks/video/video.jsx";
+import { default as default6 } from "../blocks/symbol/symbol.jsx";
+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";
 export {
   default7 as Button,
   default2 as Columns,

package/src/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/button/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import component from "./button";
-import { componentInfo } from "./component-info.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/columns/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import component from "./columns";
-import { componentInfo } from "./component-info.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/custom-code/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./custom-code";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/embed/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./embed";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/form/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./form";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/fragment/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./fragment";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/image/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./image";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/img/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./img";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/input/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./input";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/raw-text/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./raw-text";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/section/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./section";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/select/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./select";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/submit-button/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./submit-button";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/symbol/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./symbol";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/text/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./text";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/textarea/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./textarea";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/video/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./video";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/functions/macro-eval.js

@@ -1,5 +0,0 @@
-function macroEval(items, string) {
-}
-export {
-  macroEval
-};