@builder.io/sdk-solid 0.0.8-4 → 0.0.8-7

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-4",
+  "version": "0.0.8-7",
   "description": "",
   "type": "module",
-  "main": "./entry-point/index.jsx",
-  "module": "./entry-point/index.jsx",
+  "main": "./src/solid-index.jsx",
+  "module": "./src/solid-index.jsx",
   "exports": {
-    ".": "./entry-point/index.jsx"
+    ".": "./src/solid-index.jsx"
   },
   "scripts": {
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
@@ -16,11 +16,11 @@
     "solid-styled-components": "^0.27.6"
   },
   "peerDependencies": {
-    "solid-js": "^1.3.15"
+    "solid-js": "^1.4.3"
   },
   "devDependencies": {
     "babel-preset-solid": "^1.3.17",
-    "solid-js": "^1.3.15",
+    "solid-js": "^1.4.3",
     "vite": "^2.9.8",
     "vite-plugin-solid": "^2.2.6"
   }

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

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

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

@@ -55,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} />
         <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",
@@ -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/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

@@ -10,6 +10,7 @@ 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 { isEmptyHtmlElement } from "./render-block.helpers.js";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -85,16 +86,16 @@ function RenderBlock(props) {
 
   });
   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}>
-              {(child, _index) => {
-          const index = _index();
-
-          return <RenderBlock block={child}></RenderBlock>;
-        }}
-            </For>
-          </Dynamic>} 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>
@@ -105,7 +106,7 @@ function RenderBlock(props) {
                 {(child, _index) => {
                 const index = _index();
 
-                return <RenderBlock block={child}></RenderBlock>;
+                return <RenderBlock key={child.id} block={child}></RenderBlock>;
               }}
               </For>
             </Dynamic>
@@ -114,12 +115,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

@@ -11,6 +11,7 @@ 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.lite";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -80,25 +81,34 @@ function RenderBlock(props) {
   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}>
+            {(child, _index) => {
+              const index = _index();
+              return <RenderBlock key={child.id} block={child}></RenderBlock>;
+            }}
+          </For>
+        </Dynamic>
+      }
+      when={!state.componentInfo?.noWrap}
+    >
       <Show
         fallback={
           <Dynamic
-            {...state.componentOptions}
-            attributes={state.propertiesAndActions}
-            builderBlock={state.useBlock}
+            {...state.propertiesAndActions}
             style={state.css}
-            component={state.componentRef}
-          >
-            <For each={state.children}>
-              {(child, _index) => {
-                const index = _index();
-                return <RenderBlock block={child}></RenderBlock>;
-              }}
-            </For>
-          </Dynamic>
+            component={state.tagName}
+          ></Dynamic>
         }
-        when={!state.componentInfo?.noWrap}
+        when={!isEmptyHtmlElement(state.tagName)}
       >
         <Dynamic
           {...state.propertiesAndActions}
@@ -117,7 +127,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>
@@ -125,12 +137,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/render-content.jsx

@@ -143,14 +143,16 @@ 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
+            }
           }
-        }
-      }));
+        }));
+      }
     }
 
   });

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

@@ -143,19 +143,21 @@ 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,
+                },
               },
-            },
-          }
-        )
-      );
+            }
+          )
+        );
+      }
     },
   });
 

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/{entry-point/index.jsx → src/solid-index.jsx}

@@ -2,4 +2,4 @@
  * 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'
+export * from '../src/index.js';