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

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

@@ -0,0 +1,38 @@
+import { createMutable } from "solid-js/store";
+
+import RenderInlinedStyles from "../render-inlined-styles.lite";
+
+function BlockStyles(props) {
+  const state = createMutable({
+    camelToKebabCase(string: 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;
+
+      if (!styleObject) {
+        return "";
+      }
+
+      let str = `.${props.block.id} {`;
+
+      for (const key in styleObject) {
+        const value = styleObject[key];
+
+        if (typeof value === "string") {
+          str += `${state.camelToKebabCase(key)}: ${value};`;
+        }
+      }
+
+      str += "}";
+      return str;
+    },
+  });
+
+  return <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>;
+}
+
+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.jsx → render-block/render-block.jsx}

@@ -1,15 +1,16 @@
 import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
-import { getBlockComponentOptions } from "../functions/get-block-component-options";
-import { getBlockProperties } from "../functions/get-block-properties";
-import { getBlockStyles } from "../functions/get-block-styles";
-import { getBlockTag } from "../functions/get-block-tag";
-import { components } from "../functions/register-component";
-import BuilderContext from "../context/builder.context";
-import { getBlockActions } from "../functions/get-block-actions";
-import { getProcessedBlock } from "../functions/get-processed-block";
+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";
+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 { isEmptyHtmlElement } from "./render-block.helpers.js";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -20,20 +21,29 @@ function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[state.useBlock.component?.name];
+      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() {
@@ -84,19 +94,27 @@ function RenderBlock(props) {
 
   });
   const builderContext = useContext(BuilderContext);
-  console.log('props.block.options', props.block.component?.options)
-  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}>
-          <BlockStyles block={state.useBlock}></BlockStyles>
+          <Show when={TARGET === "vue" || TARGET === "svelte"}>
+            <BlockStyles block={state.useBlock}></BlockStyles>
+          </Show>
           <Show when={state.componentRef}>
-            <Dynamic {...props.block.component.options} builderBlock={props.block} component={state.componentRef}>
+            <Dynamic {...state.componentOptions} builderBlock={state.useBlock} component={state.componentRef}>
               <For each={state.children}>
                 {(child, _index) => {
                 const index = _index();
-                console.log('render block?')
 
-                return <RenderBlock block={child}></RenderBlock>;
+                return <RenderBlock key={child.id} block={child}></RenderBlock>;
               }}
               </For>
             </Dynamic>
@@ -105,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.lite.tsx → render-block/render-block.lite.tsx}

@@ -2,15 +2,16 @@ import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 
-import { getBlockComponentOptions } from "../functions/get-block-component-options";
-import { getBlockProperties } from "../functions/get-block-properties";
-import { getBlockStyles } from "../functions/get-block-styles";
-import { getBlockTag } from "../functions/get-block-tag";
-import { components } from "../functions/register-component";
-import BuilderContext from "../context/builder.context";
-import { getBlockActions } from "../functions/get-block-actions";
-import { getProcessedBlock } from "../functions/get-processed-block";
+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";
+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.lite";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
 
 function RenderBlock(props) {
   const state = createMutable({
@@ -21,19 +22,25 @@ function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[state.useBlock.component?.name!];
+      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;
@@ -79,14 +86,43 @@ 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}
           component={state.tagName}
         >
-          <BlockStyles block={state.useBlock}></BlockStyles>
+          <Show when={TARGET === "vue" || TARGET === "svelte"}>
+            <BlockStyles block={state.useBlock}></BlockStyles>
+          </Show>
           <Show when={state.componentRef}>
             <Dynamic
               {...state.componentOptions}
@@ -96,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>
@@ -104,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-blocks.jsx

@@ -1,8 +1,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";
-import RenderBlock from "./render-block";
+import { isEditing } from "../functions/is-editing.js";
+import RenderBlock from "./render-block/render-block";
 
 function RenderBlocks(props) {
   const state = createMutable({

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

@@ -3,8 +3,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";
-import RenderBlock from "./render-block.lite";
+import { isEditing } from "../functions/is-editing.js";
+import RenderBlock from "./render-block/render-block.lite";
 
 function RenderBlocks(props) {
   const state = createMutable({

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

@@ -1,6 +1,7 @@
 import { createMutable } from "solid-js/store";
+import RenderInlinedStyles from "../../render-inlined-styles";
 
-function RenderStyles(props) {
+function RenderContentStyles(props) {
   const state = createMutable({
     getCssFromFont(font) {
       // TODO: compute what font sizes are used and only load those.......
@@ -58,16 +59,16 @@ function RenderStyles(props) {
       return customFonts?.map(font => this.getCssFromFont(font))?.join(" ") || "";
     },
 
-    getInjectedStyles() {
+    get injectedStyles() {
       return `
-${props.cssCode}
+${props.cssCode || ""}
 ${state.getFontCss({
         customFonts: props.customFonts
       })}`;
     }
 
   });
-  return <style>{state.getInjectedStyles()}</style>;
+  return <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>;
 }
 
-export default RenderStyles;
+export default RenderContentStyles;

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

@@ -1,6 +1,8 @@
 import { createMutable } from "solid-js/store";
 
-function RenderStyles(props) {
+import RenderInlinedStyles from "../../render-inlined-styles.lite";
+
+function RenderContentStyles(props) {
   const state = createMutable({
     getCssFromFont(font: CustomFont) {
       // TODO: compute what font sizes are used and only load those.......
@@ -57,16 +59,18 @@ function RenderStyles(props) {
         customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
       );
     },
-    getInjectedStyles() {
+    get injectedStyles() {
       return `
-${props.cssCode}
+${props.cssCode || ""}
 ${state.getFontCss({
   customFonts: props.customFonts,
 })}`;
     },
   });
 
-  return <style>{state.getInjectedStyles()}</style>;
+  return (
+    <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>
+  );
 }
 
-export default RenderStyles;
+export default RenderContentStyles;

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,19 +1,21 @@
 import { Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
-import { isBrowser } from "../../functions/is-browser";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
-import { track } from "../../functions/track";
-import { isEditing } from "../../functions/is-editing";
-import { isPreviewing } from "../../functions/is-previewing";
-import { previewingModelName } from "../../functions/previewing-model-name";
-import { getContent } from "../../functions/get-content";
-import { convertSearchParamsToQueryObject, getBuilderSearchParams } from "../../functions/get-builder-search-params";
+import { evaluate } from "../../functions/evaluate.js";
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from "../../functions/get-builder-search-params/index.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { getFetch } from "../../functions/get-fetch.js";
+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 { evaluate } from "../../functions/evaluate";
-import { getFetch } from "../../functions/get-fetch";
-import { TARGET } from "../../constants/target";
-import RenderStyles from "./components/render-styles";
+import RenderContentStyles from "./components/render-styles";
 
 function RenderContent(props) {
   const state = createMutable({
@@ -32,7 +34,7 @@ function RenderContent(props) {
     update: 0,
     overrideState: {},
 
-    get state() {
+    get contentState() {
       return { ...props.content?.data?.state,
         ...props.data,
         ...state.overrideState
@@ -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
@@ -80,7 +95,7 @@ function RenderContent(props) {
         evaluate({
           code: jsCode,
           context: state.context,
-          state: state.state
+          state: state.contentState
         });
       }
     },
@@ -93,7 +108,7 @@ function RenderContent(props) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
         context: state.context,
-        state: state.state
+        state: state.contentState
       }));
     },
 
@@ -102,7 +117,8 @@ function RenderContent(props) {
       key
     }) {
       const fetchAndSetState = async () => {
-        const response = await getFetch()(url);
+        const fetch = await getFetch();
+        const response = await fetch(url);
         const json = await response.json();
         const newOverrideState = { ...state.overrideState,
           [key]: json
@@ -127,20 +143,26 @@ function RenderContent(props) {
     },
 
     emitStateUpdate() {
-      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-        detail: {
-          state: state.state,
-          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);
       }
@@ -182,7 +204,7 @@ function RenderContent(props) {
     },
 
     get state() {
-      return state.state;
+      return state.contentState;
     },
 
     get context() {
@@ -191,6 +213,10 @@ function RenderContent(props) {
 
     get apiKey() {
       return props.apiKey;
+    },
+
+    get registeredComponents() {
+      return state.allRegisteredComponents;
     }
 
   }} component={BuilderContext.Provider}>
@@ -199,7 +225,7 @@ function RenderContent(props) {
         contentId: state.useContent.id
       })} data-builder-content-id={state.useContent?.id}>
           <Show when={(state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative"}>
-            <RenderStyles cssCode={state.useContent.data.cssCode} customFonts={state.useContent.data.customFonts}></RenderStyles>
+            <RenderContentStyles cssCode={state.useContent.data.cssCode} customFonts={state.useContent.data.customFonts}></RenderContentStyles>
           </Show>
           <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>