@builder.io/sdk-solid 0.0.8-23 → 0.0.8-24

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

@@ -1,6 +1,5 @@
-import { Show, onMount, on, createEffect } 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 { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
@@ -14,182 +13,186 @@ import { components, createRegisterComponentMessage } from "../../functions/regi
 import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.jsx";
 import RenderContentStyles from "./components/render-styles.jsx";
+import { registerInsertMenu, setupBrowserForEditing } from "../../scripts/init-editing.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;
-    },
-
-    overrideContent: null,
-    update: 0,
-
-    get canTrackToUse() {
-      return props.canTrack || true;
-    },
-
-    overrideState: {},
-
-    get contentState() {
-      return { ...props.content?.data?.state,
+  const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
+  const [overrideContent, setOverrideContent] = createSignal(null);
+  const [update, setUpdate] = createSignal(0);
+  const [overrideState, setOverrideState] = createSignal({});
+
+  function useContent() {
+    const mergedContent = { ...props.content,
+      ...overrideContent(),
+      data: { ...props.content?.data,
         ...props.data,
-        ...state.overrideState
-      };
-    },
+        ...overrideContent()?.data
+      }
+    };
+    return mergedContent;
+  }
 
-    get contextContext() {
-      return props.context || {};
-    },
+  function canTrackToUse() {
+    return props.canTrack || true;
+  }
 
-    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;
-    },
+  function contentState() {
+    return { ...props.content?.data?.state,
+      ...props.data,
+      ...overrideState()
+    };
+  }
 
-    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 contextContext() {
+    return props.context || {};
+  }
 
-              break;
-            }
+  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;
+  }
 
-          case "builder.patchUpdates":
-            {
-              // TODO
-              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;
+
+            if (key === props.model) {
+              setOverrideContent(contentData);
             }
-        }
-      }
-    },
 
-    evaluateJsCode() {
-      // run any dynamic JS code attached to content
-      const jsCode = state.useContent?.data?.jsCode;
+            break;
+          }
 
-      if (jsCode) {
-        evaluate({
-          code: jsCode,
-          context: state.contextContext,
-          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;
 
-    onClick(_event) {
-      if (state.useContent) {
-        track({
-          type: "click",
-          canTrack: state.canTrackToUse,
-          contentId: state.useContent.id,
-          orgId: props.apiKey
-        });
-      }
-    },
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: contextContext(),
+        state: contentState()
+      });
+    }
+  }
 
-    evalExpression(expression) {
-      return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-        code: group,
-        context: state.contextContext,
-        state: state.contentState
-      }));
-    },
+  function httpReqsData() {
+    return {};
+  }
 
-    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;
-      };
+  function onClick(_event) {
+    if (useContent()) {
+      track({
+        type: "click",
+        canTrack: canTrackToUse(),
+        contentId: useContent().id,
+        orgId: props.apiKey
+      });
+    }
+  }
 
-      fetchAndSetState();
-    },
+  function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+      code: group,
+      context: contextContext(),
+      state: contentState()
+    }));
+  }
 
-    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 handleRequest({
+    url,
+    key
+  }) {
+    const fetchAndSetState = async () => {
+      const fetch = await getFetch();
+      const response = await fetch(url);
+      const json = await response.json();
+      const newOverrideState = { ...overrideState(),
+        [key]: json
+      };
+      setOverrideState(newOverrideState);
+    };
 
-    emitStateUpdate() {
-      if (isEditing()) {
-        window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-          detail: {
-            state: state.contentState,
-            ref: {
-              name: props.model
-            }
-          }
-        }));
+    fetchAndSetState();
+  }
+
+  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
+        });
       }
-    },
+    });
+  }
 
-    get shouldRenderContentStyles() {
-      return Boolean((state.useContent?.data?.cssCode || state.useContent?.data?.customFonts?.length) && TARGET !== "reactNative");
+  function emitStateUpdate() {
+    if (isEditing()) {
+      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+        detail: {
+          state: contentState(),
+          ref: {
+            name: props.model
+          }
+        }
+      }));
     }
+  }
 
-  });
+  function shouldRenderContentStyles() {
+    return Boolean((useContent()?.data?.cssCode || useContent()?.data?.customFonts?.length) && TARGET !== "reactNative");
+  }
+
+  let elementRef;
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
-        Object.values(state.allRegisteredComponents).forEach(registeredComponent => {
+        setForceReRenderCount(forceReRenderCount() + 1); // QWIK-REPLACE: _useMutableProps
+
+        registerInsertMenu();
+        setupBrowserForEditing();
+        Object.values(allRegisteredComponents()).forEach(registeredComponent => {
           const message = createRegisterComponentMessage(registeredComponent);
           window.parent?.postMessage(message, "*");
         });
-        window.addEventListener("message", state.processMessage);
-        window.addEventListener("builder:component:stateChangeListenerActivated", state.emitStateUpdate);
+        window.addEventListener("message", processMessage);
+        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
       }
 
-      if (state.useContent) {
+      if (useContent()) {
         track({
           type: "impression",
-          canTrack: state.canTrackToUse,
-          contentId: state.useContent.id,
+          canTrack: canTrackToUse(),
+          contentId: useContent().id,
           orgId: props.apiKey
         });
       } // override normal content in preview mode
@@ -207,47 +210,47 @@ function RenderContent(props) {
               apiKey: previewApiKey
             }).then(content => {
               if (content) {
-                state.overrideContent = content;
+                setOverrideContent(content);
               }
             });
           }
         }
       }
 
-      state.evaluateJsCode();
-      state.runHttpRequests();
-      state.emitStateUpdate();
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
     }
   });
 
   function onUpdateFn_0() {
-    state.evaluateJsCode();
+    evaluateJsCode();
   }
 
-  createEffect(on(() => [state.useContent?.data?.jsCode], onUpdateFn_0));
+  createEffect(on(() => [useContent()?.data?.jsCode], onUpdateFn_0));
 
   function onUpdateFn_1() {
-    state.runHttpRequests();
+    runHttpRequests();
   }
 
-  createEffect(on(() => [state.useContent?.data?.httpRequests], onUpdateFn_1));
+  createEffect(on(() => [useContent()?.data?.httpRequests], onUpdateFn_1));
 
   function onUpdateFn_2() {
-    state.emitStateUpdate();
+    emitStateUpdate();
   }
 
-  createEffect(on(() => [state.contentState], onUpdateFn_2));
+  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.contextContext;
+      return contextContext();
     },
 
     get apiKey() {
@@ -255,16 +258,16 @@ function RenderContent(props) {
     },
 
     get registeredComponents() {
-      return state.allRegisteredComponents;
+      return allRegisteredComponents();
     }
 
   }} component={BuilderContext.Provider}>
-      <Show when={state.useContent}>
-        <div onClick={event => state.onClick(event)} builder-content-id={state.useContent?.id}>
-          <Show when={state.shouldRenderContentStyles}>
-            <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={useContent()?.data?.blocks} key={forceReRenderCount()}></RenderBlocks>
         </div>
       </Show>
     </Dynamic>;

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

@@ -1,23 +1,20 @@
 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}>`;
-    },
+  function injectedStyleScript() {
+    return `<${tagName()}>${props.styles}</${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";
-    }
+  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={state.tagName}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
-      <div innerHTML={state.injectedStyleScript}></div>
+  return <Show fallback={<Dynamic component={tagName()}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
+      <div innerHTML={injectedStyleScript()}></div>
     </Show>;
 }
 

package/src/constants/builder-registered-components.js

@@ -32,9 +32,12 @@ import { componentInfo as videoComponentInfo } from "../blocks/video/component-i
 import { default as Video } from "../blocks/video/video.jsx";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
 import { default as embed } from "../blocks/embed/embed.jsx";
+import { default as Img } from "../blocks/img/img.jsx";
+import { componentInfo as imgComponentInfo } from "../blocks/img/component-info";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Img }, imgComponentInfo),
   __spreadValues({ component: Text }, textComponentInfo),
   __spreadValues({ component: Video }, videoComponentInfo),
   __spreadValues({ component: Symbol }, symbolComponentInfo),

package/src/functions/get-fetch.js

@@ -24,9 +24,9 @@ function getFetch() {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
       const nodeFetch = import("node-fetch").then((d) => d.default);
-      return nodeFetch;
+      return nodeFetch.default || nodeFetch;
     }
-    return globalFetch;
+    return globalFetch.default || globalFetch;
   });
 }
 export {

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

@@ -39,13 +39,17 @@ const evaluateBindings = ({
   }
   return copied;
 };
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
-  if (evaluateBindings) {
-    return evaluateBindings({ block, state, context });
+function getProcessedBlock({
+  block,
+  context,
+  shouldEvaluateBindings,
+  state
+}) {
+  const transformedBlock = transformBlock(block);
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({ block: transformedBlock, state, context });
   } else {
-    return block;
+    return transformedBlock;
   }
 }
 export {

package/src/functions/get-processed-block.test.js

@@ -21,7 +21,7 @@ test("Can process bindings", () => {
     block,
     context: {},
     state: { test: "hello" },
-    evaluateBindings: true
+    shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);
   expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual("baz");

package/src/scripts/init-editing.js

@@ -1,6 +1,5 @@
 import { TARGET } from "../constants/target.js";
 import { isBrowser } from "../functions/is-browser.js";
-import { isEditing } from "../functions/is-editing.js";
 import { register } from "../functions/register.js";
 const registerInsertMenu = () => {
   register("insertMenu", {
@@ -74,7 +73,7 @@ const setupBrowserForEditing = () => {
     });
   }
 };
-if (isEditing()) {
-  registerInsertMenu();
-  setupBrowserForEditing();
-}
+export {
+  registerInsertMenu,
+  setupBrowserForEditing
+};