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

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

@@ -2,7 +2,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";
@@ -10,8 +9,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.lite";
+import { isEmptyHtmlElement } from "./render-block.helpers.js";
+import RenderComponent from "./render-component.lite";
 
 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;
@@ -49,7 +55,7 @@ function RenderBlock(props) {
         context: builderContext.context,
       });
     },
-    get propertiesAndActions() {
+    get attributes() {
       return {
         ...getBlockProperties(state.useBlock),
         ...getBlockActions({
@@ -57,13 +63,26 @@ function RenderBlock(props) {
           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() {
       // TO-DO: When should `canHaveChildren` dictate rendering?
@@ -73,6 +92,10 @@ function RenderBlock(props) {
       return state.useBlock.children ?? [];
     },
     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;
     },
   });
@@ -80,39 +103,53 @@ function RenderBlock(props) {
   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>
+    <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>
   );
 }
 

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

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

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

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

package/src/components/render-blocks.jsx

@@ -2,6 +2,7 @@ import { Show, For } from "solid-js";
 import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles";
 import RenderBlock from "./render-block/render-block";
 
 function RenderBlocks(props) {
@@ -47,7 +48,16 @@ function RenderBlocks(props) {
           {(block, _index) => {
           const index = _index();
 
-          return <RenderBlock key={block.id} block={block}></RenderBlock>;
+          return <RenderBlock key={"render-block-" + block.id} block={block}></RenderBlock>;
+        }}
+        </For>
+      </Show>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+          const index = _index();
+
+          return <BlockStyles key={"block-style-" + block.id} block={block}></BlockStyles>;
         }}
         </For>
       </Show>

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

@@ -4,6 +4,7 @@ import { createMutable } from "solid-js/store";
 import { css } from "solid-styled-components";
 
 import { isEditing } from "../functions/is-editing.js";
+import BlockStyles from "./render-block/block-styles.lite";
 import RenderBlock from "./render-block/render-block.lite";
 
 function RenderBlocks(props) {
@@ -64,7 +65,25 @@ function RenderBlocks(props) {
         <For each={props.blocks}>
           {(block, _index) => {
             const index = _index();
-            return <RenderBlock key={block.id} block={block}></RenderBlock>;
+            return (
+              <RenderBlock
+                key={"render-block-" + block.id}
+                block={block}
+              ></RenderBlock>
+            );
+          }}
+        </For>
+      </Show>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+            const index = _index();
+            return (
+              <BlockStyles
+                key={"block-style-" + block.id}
+                block={block}
+              ></BlockStyles>
+            );
           }}
         </For>
       </Show>

package/src/components/render-content/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-component-options.js

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

package/src/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;
 }