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

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-0",
-  "type": "module",
+  "version": "0.0.8-11",
   "description": "",
-  "module": "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/block-styles.jsx

@@ -1,21 +1,33 @@
+import { useContext, Show } from "solid-js";
 import { createMutable } from "solid-js/store";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context";
+import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import RenderInlinedStyles from "../render-inlined-styles";
 
 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 { 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.lite";
 
 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
+};

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 { components } from "../../functions/register-component.js";
 import BlockStyles from "./block-styles";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component";
 
 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() {
@@ -53,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() {
@@ -80,38 +99,36 @@ 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 when={!state.componentInfo?.noWrap}>
-        <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 block={child}></RenderBlock>;
-              }}
-              </For>
-            </Dynamic>
-          </Show>
+  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();
+
+            return <RenderBlock key={"render-block-" + child.id} block={child}></RenderBlock>;
+          }}
+          </For>
           <For each={state.noCompRefChildren}>
             {(child, _index) => {
             const index = _index();
 
-            return <RenderBlock block={child}></RenderBlock>;
+            return <BlockStyles key={"block-style-" + child.id} block={child}></BlockStyles>;
           }}
           </For>
         </Dynamic>
       </Show>
-    </>;
+    </Show>;
 }
 
 export default RenderBlock;