@builder.io/sdk-solid 0.0.3 → 0.0.6

package/src/components/{render-block.js → render-block.jsx}

@@ -1,5 +1,3 @@
-import { mergeProps as _$mergeProps } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
 import { useContext, Show, For } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
@@ -12,7 +10,8 @@ import BuilderContext from "../context/builder.context";
 import { getBlockActions } from "../functions/get-block-actions";
 import { getProcessedBlock } from "../functions/get-processed-block";
 import BlockStyles from "./block-styles";
-export default function RenderBlock(props) {
+
+function RenderBlock(props) {
   const state = createMutable({
     get component() {
       const componentName = state.useBlock.component?.name;
@@ -85,70 +84,31 @@ export default function RenderBlock(props) {
 
   });
   const builderContext = useContext(BuilderContext);
-  return _$createComponent(Show, {
-    get when() {
-      return !state.componentInfo?.noWrap;
-    },
-
-    get children() {
-      return _$createComponent(Dynamic, _$mergeProps(() => state.propertiesAndActions, {
-        get style() {
-          return state.css;
-        },
-
-        get component() {
-          return state.tagName;
-        },
-
-        get children() {
-          return [_$createComponent(BlockStyles, {
-            get block() {
-              return state.useBlock;
-            }
-
-          }), _$createComponent(Show, {
-            get when() {
-              return state.componentRef;
-            },
-
-            get children() {
-              return _$createComponent(Dynamic, _$mergeProps(() => state.componentOptions, {
-                get builderBlock() {
-                  return state.useBlock;
-                },
-
-                get component() {
-                  return state.componentRef;
-                },
-
-                get children() {
-                  return _$createComponent(For, {
-                    get each() {
-                      return state.children;
-                    },
-
-                    children: (child, index) => _$createComponent(RenderBlock, {
-                      block: child
-                    })
-                  });
-                }
-
-              }));
-            }
-
-          }), _$createComponent(For, {
-            get each() {
-              return state.noCompRefChildren;
-            },
-
-            children: (child, index) => _$createComponent(RenderBlock, {
-              block: child
-            })
-          })];
-        }
-
-      }));
-    }
-
-  });
-}
+  return <>
+      <Show when={!state.componentInfo?.noWrap}>
+        <Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}>
+          <BlockStyles block={state.useBlock}></BlockStyles>
+          <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>
+          <For each={state.noCompRefChildren}>
+            {(child, _index) => {
+            const index = _index();
+
+            return <RenderBlock block={child}></RenderBlock>;
+          }}
+          </For>
+        </Dynamic>
+      </Show>
+    </>;
+}
+
+export default RenderBlock;

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

@@ -12,7 +12,7 @@ import { getBlockActions } from "../functions/get-block-actions";
 import { getProcessedBlock } from "../functions/get-processed-block";
 import BlockStyles from "./block-styles.lite";
 
-export default function RenderBlock(props) {
+function RenderBlock(props) {
   const state = createMutable({
     get component() {
       const componentName = state.useBlock.component?.name;
@@ -94,15 +94,23 @@ export default function RenderBlock(props) {
               component={state.componentRef}
             >
               <For each={state.children}>
-                {(child, index) => <RenderBlock block={child}></RenderBlock>}
+                {(child, _index) => {
+                  const index = _index();
+                  return <RenderBlock block={child}></RenderBlock>;
+                }}
               </For>
             </Dynamic>
           </Show>
           <For each={state.noCompRefChildren}>
-            {(child, index) => <RenderBlock block={child}></RenderBlock>}
+            {(child, _index) => {
+              const index = _index();
+              return <RenderBlock block={child}></RenderBlock>;
+            }}
           </For>
         </Dynamic>
       </Show>
     </>
   );
 }
+
+export default RenderBlock;

package/src/components/render-blocks.jsx

@@ -0,0 +1,57 @@
+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";
+
+function RenderBlocks(props) {
+  const state = createMutable({
+    get className() {
+      return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
+    },
+
+    onClick() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage({
+          type: "builder.clickEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path
+          }
+        }, "*");
+      }
+    },
+
+    onMouseEnter() {
+      if (isEditing() && !props.blocks?.length) {
+        window.parent?.postMessage({
+          type: "builder.hoverEmptyBlocks",
+          data: {
+            parentElementId: props.parent,
+            dataPath: props.path
+          }
+        }, "*");
+      }
+    }
+
+  });
+  return <div class={state.className + " " + css({
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "stretch"
+  })} builder-path={props.path} builder-parent-id={props.parent} dataSet={{
+    class: state.className
+  }} onClick={event => state.onClick()} onMouseEnter={event => state.onMouseEnter()}>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+          const index = _index();
+
+          return <RenderBlock key={block.id} block={block}></RenderBlock>;
+        }}
+        </For>
+      </Show>
+    </div>;
+}
+
+export default RenderBlocks;

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

@@ -6,7 +6,7 @@ import { css } from "solid-styled-components";
 import { isEditing } from "../functions/is-editing";
 import RenderBlock from "./render-block.lite";
 
-export default function RenderBlocks(props) {
+function RenderBlocks(props) {
   const state = createMutable({
     get className() {
       return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
@@ -62,11 +62,14 @@ export default function RenderBlocks(props) {
     >
       <Show when={props.blocks}>
         <For each={props.blocks}>
-          {(block, index) => (
-            <RenderBlock key={block.id} block={block}></RenderBlock>
-          )}
+          {(block, _index) => {
+            const index = _index();
+            return <RenderBlock key={block.id} block={block}></RenderBlock>;
+          }}
         </For>
       </Show>
     </div>
   );
 }
+
+export default RenderBlocks;

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

@@ -0,0 +1,73 @@
+import { createMutable } from "solid-js/store";
+
+function RenderStyles(props) {
+  const state = createMutable({
+    getCssFromFont(font) {
+      // TODO: compute what font sizes are used and only load those.......
+      const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+      const name = family.split(",")[0];
+      const url = font.fileUrl ?? font?.files?.regular;
+      let str = "";
+
+      if (url && family && name) {
+        str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+      }
+
+      if (font.files) {
+        for (const weight in font.files) {
+          const isNumber = String(Number(weight)) === weight;
+
+          if (!isNumber) {
+            continue;
+          } // TODO: maybe limit number loaded
+
+
+          const weightUrl = font.files[weight];
+
+          if (weightUrl && weightUrl !== url) {
+            str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+          }
+        }
+      }
+
+      return str;
+    },
+
+    getFontCss({
+      customFonts
+    }) {
+      // TODO: flag for this
+      // if (!this.builder.allowCustomFonts) {
+      //   return '';
+      // }
+      // TODO: separate internal data from external
+      return customFonts?.map(font => this.getCssFromFont(font))?.join(" ") || "";
+    },
+
+    getInjectedStyles() {
+      return `
+${props.cssCode}
+${state.getFontCss({
+        customFonts: props.customFonts
+      })}`;
+    }
+
+  });
+  return <style>{state.getInjectedStyles()}</style>;
+}
+
+export default RenderStyles;

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

@@ -0,0 +1,72 @@
+import { createMutable } from "solid-js/store";
+
+function RenderStyles(props) {
+  const state = createMutable({
+    getCssFromFont(font: CustomFont) {
+      // TODO: compute what font sizes are used and only load those.......
+      const family =
+        font.family +
+        (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
+      const name = family.split(",")[0];
+      const url = font.fileUrl ?? font?.files?.regular;
+      let str = "";
+
+      if (url && family && name) {
+        str += `
+@font-face {
+  font-family: "${family}";
+  src: local("${name}"), url('${url}') format('woff2');
+  font-display: fallback;
+  font-weight: 400;
+}
+        `.trim();
+      }
+
+      if (font.files) {
+        for (const weight in font.files) {
+          const isNumber = String(Number(weight)) === weight;
+
+          if (!isNumber) {
+            continue;
+          } // TODO: maybe limit number loaded
+
+          const weightUrl = font.files[weight];
+
+          if (weightUrl && weightUrl !== url) {
+            str += `
+@font-face {
+  font-family: "${family}";
+  src: url('${weightUrl}') format('woff2');
+  font-display: fallback;
+  font-weight: ${weight};
+}
+          `.trim();
+          }
+        }
+      }
+
+      return str;
+    },
+    getFontCss({ customFonts }: { customFonts?: CustomFont[] }) {
+      // TODO: flag for this
+      // if (!this.builder.allowCustomFonts) {
+      //   return '';
+      // }
+      // TODO: separate internal data from external
+      return (
+        customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
+      );
+    },
+    getInjectedStyles() {
+      return `
+${props.cssCode}
+${state.getFontCss({
+  customFonts: props.customFonts,
+})}`;
+    },
+  });
+
+  return <style>{state.getInjectedStyles()}</style>;
+}
+
+export default RenderStyles;

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

@@ -0,0 +1,210 @@
+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 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 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";
+
+function RenderContent(props) {
+  const state = createMutable({
+    get useContent() {
+      const mergedContent = { ...props.content,
+        ...state.overrideContent,
+        data: { ...props.content?.data,
+          ...props.data,
+          ...state.overrideContent?.data
+        }
+      };
+      return mergedContent;
+    },
+
+    overrideContent: null,
+    update: 0,
+    overrideState: {},
+
+    get state() {
+      return { ...props.content?.data?.state,
+        ...props.data,
+        ...state.overrideState
+      };
+    },
+
+    get context() {
+      return {};
+    },
+
+    processMessage(event) {
+      const {
+        data
+      } = event;
+
+      if (data) {
+        switch (data.type) {
+          case "builder.contentUpdate":
+            {
+              const messageContent = data.data;
+              const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+              const contentData = messageContent.data;
+
+              if (key === props.model) {
+                state.overrideContent = contentData;
+              }
+
+              break;
+            }
+
+          case "builder.patchUpdates":
+            {
+              // TODO
+              break;
+            }
+        }
+      }
+    },
+
+    evaluateJsCode() {
+      // run any dynamic JS code attached to content
+      const jsCode = state.useContent?.data?.jsCode;
+
+      if (jsCode) {
+        evaluate({
+          code: jsCode,
+          context: state.context,
+          state: state.state
+        });
+      }
+    },
+
+    get httpReqsData() {
+      return {};
+    },
+
+    evalExpression(expression) {
+      return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+        code: group,
+        context: state.context,
+        state: state.state
+      }));
+    },
+
+    handleRequest({
+      url,
+      key
+    }) {
+      const fetchAndSetState = async () => {
+        const response = await getFetch()(url);
+        const json = await response.json();
+        const newOverrideState = { ...state.overrideState,
+          [key]: json
+        };
+        state.overrideState = newOverrideState;
+      };
+
+      fetchAndSetState();
+    },
+
+    runHttpRequests() {
+      const requests = state.useContent?.data?.httpRequests ?? {};
+      Object.entries(requests).forEach(([key, url]) => {
+        if (url && (!state.httpReqsData[key] || isEditing())) {
+          const evaluatedUrl = state.evalExpression(url);
+          state.handleRequest({
+            url: evaluatedUrl,
+            key
+          });
+        }
+      });
+    },
+
+    emitStateUpdate() {
+      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+        detail: {
+          state: state.state,
+          ref: {
+            name: props.model
+          }
+        }
+      }));
+    }
+
+  });
+  onMount(() => {
+    if (isBrowser()) {
+      if (isEditing()) {
+        window.addEventListener("message", state.processMessage);
+        window.addEventListener("builder:component:stateChangeListenerActivated", state.emitStateUpdate);
+      }
+
+      if (state.useContent) {
+        track("impression", {
+          contentId: state.useContent.id
+        });
+      } // override normal content in preview mode
+
+
+      if (isPreviewing()) {
+        if (props.model && previewingModelName() === props.model) {
+          const currentUrl = new URL(location.href);
+          const previewApiKey = currentUrl.searchParams.get("apiKey");
+
+          if (previewApiKey) {
+            getContent({
+              model: props.model,
+              apiKey: previewApiKey,
+              options: getBuilderSearchParams(convertSearchParamsToQueryObject(currentUrl.searchParams))
+            }).then(content => {
+              if (content) {
+                state.overrideContent = content;
+              }
+            });
+          }
+        }
+      }
+
+      state.evaluateJsCode();
+      state.runHttpRequests();
+      state.emitStateUpdate();
+    }
+  });
+  return <Dynamic value={{
+    get content() {
+      return state.useContent;
+    },
+
+    get state() {
+      return state.state;
+    },
+
+    get context() {
+      return state.context;
+    },
+
+    get apiKey() {
+      return props.apiKey;
+    }
+
+  }} component={BuilderContext.Provider}>
+      <Show when={state.useContent}>
+        <div onClick={event => track("click", {
+        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>
+          </Show>
+          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
+        </div>
+      </Show>
+    </Dynamic>;
+}
+
+export default RenderContent;