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

package/src/components/{render-block.lite.tsx → render-block/render-block.lite.tsx}

@@ -2,17 +2,18 @@ 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 { components } from "../../functions/register-component.js";
 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;
@@ -21,7 +22,7 @@ export default function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[state.useBlock.component?.name!];
+      const ref = components[componentName];
 
       if (componentName && !ref) {
         // TODO: Public doc page with more info about this message
@@ -86,7 +87,9 @@ export default function RenderBlock(props) {
           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}
@@ -94,15 +97,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.js";
+import RenderBlock from "./render-block/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

@@ -3,10 +3,10 @@ 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";
 
-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.js → render-styles.jsx}

@@ -1,10 +1,7 @@
-import { template as _$template } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<style></style>`, 2);
-
 import { createMutable } from "solid-js/store";
-export default function RenderStyles(props) {
+import RenderInlinedStyles from "../../render-inlined-styles";
+
+function RenderContentStyles(props) {
   const state = createMutable({
     getCssFromFont(font) {
       // TODO: compute what font sizes are used and only load those.......
@@ -62,20 +59,16 @@ export default 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 (() => {
-    const _el$ = _tmpl$.cloneNode(true);
-
-    _$insert(_el$, () => state.getInjectedStyles());
+  return <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>;
+}
 
-    return _el$;
-  })();
-}
+export default RenderContentStyles;

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

@@ -1,6 +1,8 @@
 import { createMutable } from "solid-js/store";
 
-export default 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,14 +59,18 @@ export default 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 RenderContentStyles;

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

@@ -1,30 +1,21 @@
-import { template as _$template } from "solid-js/web";
-import { delegateEvents as _$delegateEvents } from "solid-js/web";
-import { setAttribute as _$setAttribute } from "solid-js/web";
-import { effect as _$effect } from "solid-js/web";
-import { insert as _$insert } from "solid-js/web";
-import { createComponent as _$createComponent } from "solid-js/web";
-import { memo as _$memo } from "solid-js/web";
-
-const _tmpl$ = /*#__PURE__*/_$template(`<div></div>`, 2);
-
 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 { 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 { 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";
-export default function RenderContent(props) {
+import RenderContentStyles from "./components/render-styles";
+
+function RenderContent(props) {
   const state = createMutable({
     get useContent() {
       const mergedContent = { ...props.content,
@@ -41,7 +32,7 @@ export default function RenderContent(props) {
     update: 0,
     overrideState: {},
 
-    get state() {
+    get contentState() {
       return { ...props.content?.data?.state,
         ...props.data,
         ...state.overrideState
@@ -89,7 +80,7 @@ export default function RenderContent(props) {
         evaluate({
           code: jsCode,
           context: state.context,
-          state: state.state
+          state: state.contentState
         });
       }
     },
@@ -102,7 +93,7 @@ export default function RenderContent(props) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
         context: state.context,
-        state: state.state
+        state: state.contentState
       }));
     },
 
@@ -111,7 +102,8 @@ export default 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
@@ -138,7 +130,7 @@ export default function RenderContent(props) {
     emitStateUpdate() {
       window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
         detail: {
-          state: state.state,
+          state: state.contentState,
           ref: {
             name: props.model
           }
@@ -185,79 +177,35 @@ export default function RenderContent(props) {
       state.emitStateUpdate();
     }
   });
-  return _$createComponent(Dynamic, {
-    value: {
-      get content() {
-        return state.useContent;
-      },
-
-      get state() {
-        return state.state;
-      },
-
-      get context() {
-        return state.context;
-      },
-
-      get apiKey() {
-        return props.apiKey;
-      }
-
+  return <Dynamic value={{
+    get content() {
+      return state.useContent;
     },
 
-    get component() {
-      return BuilderContext.Provider;
+    get state() {
+      return state.contentState;
     },
 
-    get children() {
-      return _$createComponent(Show, {
-        get when() {
-          return state.useContent;
-        },
-
-        get children() {
-          const _el$ = _tmpl$.cloneNode(true);
-
-          _el$.$$click = event => track("click", {
-            contentId: state.useContent.id
-          });
-
-          _$insert(_el$, _$createComponent(Show, {
-            get when() {
-              return (state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative";
-            },
-
-            get children() {
-              return _$createComponent(RenderStyles, {
-                get cssCode() {
-                  return state.useContent.data.cssCode;
-                },
-
-                get customFonts() {
-                  return state.useContent.data.customFonts;
-                }
-
-              });
-            }
-
-          }), null);
-
-          _$insert(_el$, _$createComponent(RenderBlocks, {
-            get blocks() {
-              return state.useContent?.data?.blocks;
-            }
-
-          }), null);
-
-          _$effect(() => _$setAttribute(_el$, "data-builder-content-id", state.useContent?.id));
-
-          return _el$;
-        }
+    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"}>
+            <RenderContentStyles cssCode={state.useContent.data.cssCode} customFonts={state.useContent.data.customFonts}></RenderContentStyles>
+          </Show>
+          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
+        </div>
+      </Show>
+    </Dynamic>;
 }
 
-_$delegateEvents(["click"]);
+export default RenderContent;

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

@@ -2,24 +2,24 @@ import { useContext, Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 
-import { isBrowser } from "../../functions/is-browser";
+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 { evaluate } from "../../functions/evaluate.js";
 import {
   convertSearchParamsToQueryObject,
   getBuilderSearchParams,
-} from "../../functions/get-builder-search-params";
+} 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 { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.lite";
-import { evaluate } from "../../functions/evaluate";
-import { getFetch } from "../../functions/get-fetch";
-import { TARGET } from "../../constants/target";
-import RenderStyles from "./components/render-styles.lite";
+import RenderContentStyles from "./components/render-styles.lite";
 
-export default function RenderContent(props) {
+function RenderContent(props) {
   const state = createMutable({
     get useContent() {
       const mergedContent: BuilderContent = {
@@ -36,7 +36,7 @@ export default function RenderContent(props) {
     overrideContent: null,
     update: 0,
     overrideState: {},
-    get state() {
+    get contentState() {
       return {
         ...props.content?.data?.state,
         ...props.data,
@@ -84,7 +84,7 @@ export default function RenderContent(props) {
         evaluate({
           code: jsCode,
           context: state.context,
-          state: state.state,
+          state: state.contentState,
         });
       }
     },
@@ -96,13 +96,14 @@ export default function RenderContent(props) {
         evaluate({
           code: group,
           context: state.context,
-          state: state.state,
+          state: state.contentState,
         })
       );
     },
     handleRequest({ url, key }: { key: string; url: string }) {
       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 };
         state.overrideState = newOverrideState;
@@ -128,7 +129,7 @@ export default function RenderContent(props) {
           "builder:component:stateChange",
           {
             detail: {
-              state: state.state,
+              state: state.contentState,
               ref: {
                 name: props.model,
               },
@@ -189,7 +190,7 @@ export default function RenderContent(props) {
           return state.useContent;
         },
         get state() {
-          return state.state;
+          return state.contentState;
         },
         get context() {
           return state.context;
@@ -216,10 +217,10 @@ export default function RenderContent(props) {
               TARGET !== "reactNative"
             }
           >
-            <RenderStyles
+            <RenderContentStyles
               cssCode={state.useContent.data.cssCode}
               customFonts={state.useContent.data.customFonts}
-            ></RenderStyles>
+            ></RenderContentStyles>
           </Show>
           <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
         </div>
@@ -227,3 +228,5 @@ export default function RenderContent(props) {
     </Dynamic>
   );
 }
+
+export default RenderContent;

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

@@ -0,0 +1,23 @@
+import { Show } from "solid-js";
+import { createMutable } from "solid-js/store";
+import { TARGET } from "../constants/target.js";
+
+function RenderInlinedStyles(props) {
+  const state = createMutable({
+    get injectedStyleScript() {
+      return `<${state.tagName}>${props.styles}</${state.tagName}>`;
+    },
+
+    get tagName() {
+      // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+      // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+      return "sty" + "le";
+    }
+
+  });
+  return <Show when={TARGET === "svelte"}>
+      <div innerHTML={state.injectedStyleScript}></div>
+    </Show>;
+}
+
+export default RenderInlinedStyles;

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

@@ -0,0 +1,26 @@
+import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { createMutable } from "solid-js/store";
+
+import { TARGET } from "../constants/target.js";
+
+function RenderInlinedStyles(props) {
+  const state = createMutable({
+    get injectedStyleScript() {
+      return `<${state.tagName}>${props.styles}</${state.tagName}>`;
+    },
+    get tagName() {
+      // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+      // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+      return "sty" + "le";
+    },
+  });
+
+  return (
+    <Show when={TARGET === "svelte"}>
+      <div innerHTML={state.injectedStyleScript}></div>
+    </Show>
+  );
+}
+
+export default RenderInlinedStyles;

package/src/functions/evaluate.js

@@ -1,5 +1,5 @@
-import { isBrowser } from "./is-browser";
-import { isEditing } from "./is-editing";
+import { isBrowser } from "./is-browser.js";
+import { isEditing } from "./is-editing.js";
 function evaluate({
   code,
   context,

package/src/functions/get-block-actions.js

@@ -1,5 +1,5 @@
-import { evaluate } from "./evaluate";
-import { getEventHandlerName } from "./event-handler-name";
+import { evaluate } from "./evaluate.js";
+import { getEventHandlerName } from "./event-handler-name.js";
 function getBlockActions(options) {
   var _a;
   const obj = {};

package/src/functions/get-builder-search-params/fn.test.js

@@ -1,4 +1,4 @@
-import { getBuilderSearchParams, convertSearchParamsToQueryObject } from ".";
+import { convertSearchParamsToQueryObject, getBuilderSearchParams } from ".";
 const querystring = "someotherValue=jklsjfdal&abc=klfdjklgfds&builder.cachebust=true&builder.preview=page&builder.noCache=true&__builder_editing__=true&builder.overrides.page=037948e52eaf4743afed464f02c70da4&builder.overrides.037948e52eaf4743afed464f02c70da4=037948e52eaf4743afed464f02c70da4&builder.overrides.page%3A%2F=037948e52eaf4743afed464f02c70da4&preview_theme_id=128854393017";
 const url = new URL(`localhost:3000/about-us?${querystring}`);
 describe("Get Builder SearchParams", () => {

package/src/functions/get-content/index.js

@@ -37,8 +37,8 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { getFetch } from "../get-fetch";
-const fetch = getFetch();
+import { getFetch } from "../get-fetch.js";
+const fetch$ = getFetch();
 function flatten(object, path = null, separator = ".") {
   return Object.keys(object).reduce((acc, key) => {
     const value = object[key];
@@ -123,6 +123,7 @@ const handleABTesting = (content, testGroups) => {
 function getAllContent(options) {
   return __async(this, null, function* () {
     const url = generateContentUrl(options);
+    const fetch = yield fetch$;
     const content = yield fetch(url.href).then((res) => res.json());
     if (options.testGroups) {
       handleABTesting(content, options.testGroups);