@builder.io/sdk-solid 0.0.16 → 0.0.18

package/src/components/render-blocks.jsx

@@ -1,53 +1,62 @@
-import { Show, For } from "solid-js";
-import { createMutable } from "solid-js/store";
+import { useContext, Show, For } from "solid-js";
 import { css } from "solid-styled-components";
+import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import RenderBlock from "./render-block/render-block.js";
+import BlockStyles from "./render-block/block-styles.jsx";
+import RenderBlock from "./render-block/render-block.jsx";
 
 function RenderBlocks(props) {
-  const state = createMutable({
-    get className() {
-      return "builder-blocks" + (!props.blocks?.length ? " no-blocks" : "");
-    },
+  function 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
-          }
-        }, "*");
-      }
-    },
+  function 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
-          }
-        }, "*");
-      }
+  function 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({
+  const builderContext = useContext(BuilderContext);
+  return <div class={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()}>
+    class: className()
+  }} style={props.style} onClick={event => onClick()} onMouseEnter={event => onMouseEnter()}>
+      <Show when={props.blocks}>
+        <For each={props.blocks}>
+          {(block, _index) => {
+          const index = _index();
+
+          return <RenderBlock key={"render-block-" + block.id} block={block} context={builderContext}></RenderBlock>;
+        }}
+        </For>
+      </Show>
       <Show when={props.blocks}>
         <For each={props.blocks}>
           {(block, _index) => {
           const index = _index();
 
-          return <RenderBlock key={block.id} block={block}></RenderBlock>;
+          return <BlockStyles key={"block-style-" + block.id} block={block} context={builderContext}></BlockStyles>;
         }}
         </For>
       </Show>

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

@@ -1,17 +1,15 @@
-import { createMutable } from "solid-js/store";
-import RenderInlinedStyles from "../../render-inlined-styles.js";
+import RenderInlinedStyles from "../../render-inlined-styles.jsx";
 
 function RenderContentStyles(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 = "";
+  function 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 += `
+    if (url && family && name) {
+      str += `
 @font-face {
   font-family: "${family}";
   src: local("${name}"), url('${url}') format('woff2');
@@ -19,21 +17,21 @@ function RenderContentStyles(props) {
   font-weight: 400;
 }
         `.trim();
-      }
+    }
 
-      if (font.files) {
-        for (const weight in font.files) {
-          const isNumber = String(Number(weight)) === weight;
+    if (font.files) {
+      for (const weight in font.files) {
+        const isNumber = String(Number(weight)) === weight;
 
-          if (!isNumber) {
-            continue;
-          } // TODO: maybe limit number loaded
+        if (!isNumber) {
+          continue;
+        } // TODO: maybe limit number loaded
 
 
-          const weightUrl = font.files[weight];
+        const weightUrl = font.files[weight];
 
-          if (weightUrl && weightUrl !== url) {
-            str += `
+        if (weightUrl && weightUrl !== url) {
+          str += `
 @font-face {
   font-family: "${family}";
   src: url('${weightUrl}') format('woff2');
@@ -41,34 +39,33 @@ function RenderContentStyles(props) {
   font-weight: ${weight};
 }
           `.trim();
-          }
         }
       }
+    }
 
-      return str;
-    },
+    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(" ") || "";
-    },
+  function 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(" ") || "";
+  }
 
-    get injectedStyles() {
-      return `
+  function injectedStyles() {
+    return `
 ${props.cssCode || ""}
-${state.getFontCss({
-        customFonts: props.customFonts
-      })}`;
-    }
+${getFontCss({
+      customFonts: props.customFonts
+    })}`;
+  }
 
-  });
-  return <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>;
+  return <RenderInlinedStyles styles={injectedStyles()}></RenderInlinedStyles>;
 }
 
 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,208 +1,279 @@
-import { Show, onMount } from "solid-js";
+import { Show, onMount, on, createEffect, createSignal } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { createMutable } from "solid-js/store";
+import { createStore, reconcile } from "solid-js/store";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context.js";
 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.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks.jsx";
+import RenderContentStyles from "./components/render-styles.jsx";
+import { registerInsertMenu, setupBrowserForEditing } from "../../scripts/init-editing.js";
+import { markMutable } from "../../functions/mark-mutable.js";
 
 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;
-    },
+  const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
+  const [overrideContent, setOverrideContent] = createSignal(null);
+  const [update, setUpdate] = createSignal(0);
+  const [overrideState, setOverrideState] = createSignal({});
 
-    overrideContent: null,
-    update: 0,
-    overrideState: {},
+  function canTrackToUse() {
+    return props.canTrack || true;
+  }
 
-    get contentState() {
-      return { ...props.content?.data?.state,
-        ...props.data,
-        ...state.overrideState
-      };
-    },
+  function contentState() {
+    return { ...props.content?.data?.state,
+      ...props.data,
+      ...overrideState()
+    };
+  }
 
-    get context() {
-      return {};
-    },
+  function contextContext() {
+    return props.context || {};
+  }
 
-    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;
-              }
+  function 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;
+  }
 
-              break;
-            }
+  function 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;
 
-          case "builder.patchUpdates":
-            {
-              // TODO
-              break;
+            if (key === props.model) {
+              setOverrideContent(contentData);
+              setForceReRenderCount(forceReRenderCount() + 1); // This is a hack to force Qwik to re-render.
             }
-        }
-      }
-    },
 
-    evaluateJsCode() {
-      // run any dynamic JS code attached to content
-      const jsCode = state.useContent?.data?.jsCode;
+            break;
+          }
 
-      if (jsCode) {
-        evaluate({
-          code: jsCode,
-          context: state.context,
-          state: state.contentState
-        });
+        case "builder.patchUpdates":
+          {
+            // TODO
+            break;
+          }
       }
-    },
+    }
+  }
 
-    get httpReqsData() {
-      return {};
-    },
+  function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = useContent?.data?.jsCode;
 
-    evalExpression(expression) {
-      return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-        code: group,
-        context: state.context,
-        state: state.contentState
-      }));
-    },
-
-    handleRequest({
-      url,
-      key
-    }) {
-      const fetchAndSetState = async () => {
-        const fetch = await getFetch();
-        const response = await fetch(url);
-        const json = await response.json();
-        const newOverrideState = { ...state.overrideState,
-          [key]: json
-        };
-        state.overrideState = newOverrideState;
-      };
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: contextContext(),
+        state: contentState()
+      });
+    }
+  }
 
-      fetchAndSetState();
-    },
+  function httpReqsData() {
+    return {};
+  }
 
-    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
-          });
-        }
+  function onClick(_event) {
+    if (useContent) {
+      track({
+        type: "click",
+        canTrack: canTrackToUse(),
+        contentId: useContent?.id,
+        orgId: props.apiKey
       });
-    },
+    }
+  }
+
+  function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+      code: group,
+      context: contextContext(),
+      state: contentState()
+    }));
+  }
+
+  function handleRequest({
+    url,
+    key
+  }) {
+    getFetch().then(fetch => fetch(url)).then(response => response.json()).then(json => {
+      const newOverrideState = { ...overrideState(),
+        [key]: json
+      };
+      setOverrideState(newOverrideState);
+    }).catch(err => {
+      console.log("error fetching dynamic data", url, err);
+    });
+  }
+
+  function runHttpRequests() {
+    const requests = useContent?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+      if (url && (!httpReqsData()[key] || isEditing())) {
+        const evaluatedUrl = evalExpression(url);
+        handleRequest({
+          url: evaluatedUrl,
+          key
+        });
+      }
+    });
+  }
 
-    emitStateUpdate() {
+  function emitStateUpdate() {
+    if (isEditing()) {
       window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
         detail: {
-          state: state.contentState,
+          state: contentState(),
           ref: {
             name: props.model
           }
         }
       }));
     }
+  }
 
-  });
+  function shouldRenderContentStyles() {
+    return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
+  }
+
+  const updateUseContent = function useContent() {
+    if (!props.content && !overrideContent()) {
+      return undefined;
+    }
+
+    const mergedContent = { ...props.content,
+      ...overrideContent(),
+      data: { ...props.content?.data,
+        ...props.data,
+        ...overrideContent()?.data
+      }
+    };
+    return mergedContent;
+  };
+
+  const [useContent, setUseContent] = createStore(updateUseContent());
+  createEffect(on(() => [overrideContent(), props.content, props.data], () => setUseContent(reconcile(updateUseContent()))));
+  let elementRef;
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        window.addEventListener("message", state.processMessage);
-        window.addEventListener("builder:component:stateChangeListenerActivated", state.emitStateUpdate);
+        setForceReRenderCount(forceReRenderCount() + 1); // QWIK-REPLACE: _useMutableProps
+
+        registerInsertMenu();
+        setupBrowserForEditing();
+        Object.values(allRegisteredComponents()).forEach(registeredComponent => {
+          const message = createRegisterComponentMessage(registeredComponent);
+          window.parent?.postMessage(message, "*");
+        });
+        window.addEventListener("message", processMessage);
+        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
       }
 
-      if (state.useContent) {
-        track("impression", {
-          contentId: state.useContent.id
+      if (useContent) {
+        track({
+          type: "impression",
+          canTrack: canTrackToUse(),
+          contentId: useContent?.id,
+          orgId: props.apiKey
         });
       } // 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");
+        const searchParams = new URL(location.href).searchParams;
+
+        if (props.model && searchParams.get("builder.preview") === props.model) {
+          const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
 
           if (previewApiKey) {
             getContent({
               model: props.model,
-              apiKey: previewApiKey,
-              options: getBuilderSearchParams(convertSearchParamsToQueryObject(currentUrl.searchParams))
+              apiKey: previewApiKey
             }).then(content => {
               if (content) {
-                state.overrideContent = content;
+                setOverrideContent(content);
               }
             });
           }
         }
       }
 
-      state.evaluateJsCode();
-      state.runHttpRequests();
-      state.emitStateUpdate();
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
     }
   });
+
+  function onUpdateFn_0() {
+    evaluateJsCode();
+  }
+
+  createEffect(on(() => [useContent?.data?.jsCode], onUpdateFn_0));
+
+  function onUpdateFn_1() {
+    runHttpRequests();
+  }
+
+  createEffect(on(() => [useContent?.data?.httpRequests], onUpdateFn_1));
+
+  function onUpdateFn_2() {
+    emitStateUpdate();
+  }
+
+  createEffect(on(() => [contentState()], onUpdateFn_2));
   return <Dynamic value={{
     get content() {
-      return state.useContent;
+      return useContent;
     },
 
     get state() {
-      return state.contentState;
+      return contentState();
     },
 
     get context() {
-      return state.context;
+      return contextContext();
     },
 
     get apiKey() {
       return props.apiKey;
+    },
+
+    get registeredComponents() {
+      return allRegisteredComponents();
     }
 
   }} 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 when={useContent}>
+        <div ref={elementRef} onClick={event => onClick(event)} builder-content-id={useContent?.id}>
+          <Show when={shouldRenderContentStyles()}>
+            <RenderContentStyles cssCode={useContent?.data?.cssCode} customFonts={useContent?.data?.customFonts}></RenderContentStyles>
           </Show>
-          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
+          <RenderBlocks blocks={markMutable(useContent?.data?.blocks)} key={forceReRenderCount()}></RenderBlocks>
         </div>
       </Show>
     </Dynamic>;

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

@@ -1,5 +1,21 @@
-// HACK: this file isn't being generated, it may be an error being eated.
-// This is just a short term workaround
-export default function RenderInlinedStyles() {
-  return null;
-}
+import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { TARGET } from "../constants/target.js";
+
+function RenderInlinedStyles(props) {
+  function injectedStyleScript() {
+    return `<${tagName()}>${props.styles}</${tagName()}>`;
+  }
+
+  function 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 fallback={<Dynamic component={tagName()}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
+      <div innerHTML={injectedStyleScript()}></div>
+    </Show>;
+}
+
+export default RenderInlinedStyles;