@builder.io/sdk-solid 0.0.8-4 → 0.0.8-5

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

@@ -1,234 +0,0 @@
-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";
-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";
-import RenderContentStyles 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 contentState() {
-      return { ...props.content?.data?.state,
-        ...props.data,
-        ...state.overrideState
-      };
-    },
-
-    get context() {
-      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.info.name]: curr
-      }), {});
-      return allComponents;
-    },
-
-    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.contentState
-        });
-      }
-    },
-
-    get httpReqsData() {
-      return {};
-    },
-
-    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;
-      };
-
-      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.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);
-      }
-
-      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.contentState;
-    },
-
-    get context() {
-      return state.context;
-    },
-
-    get apiKey() {
-      return props.apiKey;
-    },
-
-    get registeredComponents() {
-      return state.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>
-          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
-        </div>
-      </Show>
-    </Dynamic>;
-}
-
-export default RenderContent;

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

@@ -1,260 +0,0 @@
-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";
-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.lite";
-import RenderContentStyles from "./components/render-styles.lite";
-
-function RenderContent(props) {
-  const state = createMutable({
-    get useContent() {
-      const mergedContent: BuilderContent = {
-        ...props.content,
-        ...state.overrideContent,
-        data: {
-          ...props.content?.data,
-          ...props.data,
-          ...state.overrideContent?.data,
-        },
-      };
-      return mergedContent;
-    },
-    overrideContent: null,
-    update: 0,
-    overrideState: {},
-    get contentState() {
-      return {
-        ...props.content?.data?.state,
-        ...props.data,
-        ...state.overrideState,
-      };
-    },
-    get context() {
-      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.info.name]: curr }),
-        {} as RegisteredComponents
-      );
-      return allComponents;
-    },
-    processMessage(event: MessageEvent) {
-      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.contentState,
-        });
-      }
-    },
-    get httpReqsData() {
-      return {};
-    },
-    evalExpression(expression: string) {
-      return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
-        evaluate({
-          code: group,
-          context: state.context,
-          state: state.contentState,
-        })
-      );
-    },
-    handleRequest({ url, key }: { key: string; url: string }) {
-      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;
-      };
-
-      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<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",
-          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.contentState;
-        },
-        get context() {
-          return state.context;
-        },
-        get apiKey() {
-          return props.apiKey;
-        },
-        get registeredComponents() {
-          return state.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>
-          <RenderBlocks blocks={state.useContent?.data?.blocks}></RenderBlocks>
-        </div>
-      </Show>
-    </Dynamic>
-  );
-}
-
-export default RenderContent;

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

@@ -1,24 +0,0 @@
-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 fallback={<Dynamic component={state.tagName}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
-      <div innerHTML={state.injectedStyleScript}></div>
-    </Show>;
-}
-
-export default RenderInlinedStyles;

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

@@ -1,29 +0,0 @@
-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
-      fallback={<Dynamic component={state.tagName}>{props.styles}</Dynamic>}
-      when={TARGET === "svelte"}
-    >
-      <div innerHTML={state.injectedStyleScript}></div>
-    </Show>
-  );
-}
-
-export default RenderInlinedStyles;

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

@@ -1,29 +0,0 @@
-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 = () => [
-  { component: Columns, info: columnsComponentInfo },
-  { component: Image, info: imageComponentInfo },
-  { component: Text, info: textComponentInfo },
-  { component: Video, info: videoComponentInfo },
-  { component: Symbol, info: symbolComponentInfo },
-  { component: Button, info: buttonComponentInfo },
-  { component: Section, info: sectionComponentInfo },
-  { component: Fragment, info: fragmentComponentInfo }
-];
-export {
-  getDefaultRegisteredComponents
-};

package/src/constants/device-sizes.js

@@ -1,39 +0,0 @@
-const sizeNames = ["xsmall", "small", "medium", "large"];
-const sizes = {
-  xsmall: {
-    min: 0,
-    default: 0,
-    max: 0
-  },
-  small: {
-    min: 320,
-    default: 321,
-    max: 640
-  },
-  medium: {
-    min: 641,
-    default: 642,
-    max: 991
-  },
-  large: {
-    min: 990,
-    default: 991,
-    max: 1200
-  },
-  getWidthForSize(size) {
-    return this[size].default;
-  },
-  getSizeForWidth(width) {
-    for (const size of sizeNames) {
-      const value = this[size];
-      if (width <= value.max) {
-        return size;
-      }
-    }
-    return "large";
-  }
-};
-export {
-  sizeNames,
-  sizes
-};

package/src/constants/target.js

@@ -1,4 +0,0 @@
-const TARGET = "solid";
-export {
-  TARGET
-};

package/src/context/builder.context.js

@@ -1,11 +0,0 @@
-import { createContext } from "solid-js";
-var stdin_default = createContext({
-  content: null,
-  context: {},
-  state: {},
-  apiKey: null,
-  registeredComponents: {}
-});
-export {
-  stdin_default as default
-};

package/src/functions/evaluate.js

@@ -1,28 +0,0 @@
-import { isBrowser } from "./is-browser.js";
-import { isEditing } from "./is-editing.js";
-function evaluate({
-  code,
-  context,
-  state,
-  event
-}) {
-  if (code === "") {
-    console.warn("Skipping evaluation of empty code block.");
-    return;
-  }
-  const builder = {
-    isEditing: isEditing(),
-    isBrowser: isBrowser(),
-    isServer: !isBrowser()
-  };
-  const useReturn = !(code.includes(";") || code.includes(" return ") || code.trim().startsWith("return "));
-  const useCode = useReturn ? `return (${code});` : code;
-  try {
-    return new Function("builder", "Builder", "state", "context", "event", useCode)(builder, builder, state, context, event);
-  } catch (e) {
-    console.warn("Builder custom code error: ", e);
-  }
-}
-export {
-  evaluate
-};

package/src/functions/event-handler-name.js

@@ -1,7 +0,0 @@
-function capitalizeFirstLetter(string) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
-}
-const getEventHandlerName = (key) => `on${capitalizeFirstLetter(key)}`;
-export {
-  getEventHandlerName
-};

package/src/functions/fast-clone.js

@@ -1,4 +0,0 @@
-const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
-export {
-  fastClone
-};