@builder.io/sdk-solid 0.0.8-12 → 0.0.8-15

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

@@ -1,56 +0,0 @@
-import { useContext, Show } from "solid-js";
-
-import { createMutable } from "solid-js/store";
-
-import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context";
-import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import RenderInlinedStyles from "../render-inlined-styles.jsx";
-
-function BlockStyles(props) {
-  const state = createMutable({
-    get useBlock() {
-      return getProcessedBlock({
-        block: props.block,
-        state: builderContext.state,
-        context: builderContext.context,
-      });
-    },
-    camelToKebabCase(string: string) {
-      return string
-        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, "$1-$2")
-        .toLowerCase();
-    },
-    get css() {
-      // TODO: media queries
-      const styleObject = state.useBlock.responsiveStyles?.large;
-
-      if (!styleObject) {
-        return "";
-      }
-
-      let str = `.${state.useBlock.id} {`;
-
-      for (const key in styleObject) {
-        const value = styleObject[key];
-
-        if (typeof value === "string") {
-          str += `${state.camelToKebabCase(key)}: ${value};`;
-        }
-      }
-
-      str += "}";
-      return str;
-    },
-  });
-
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <Show when={TARGET === "vue" || TARGET === "svelte"}>
-      <RenderInlinedStyles styles={state.css}></RenderInlinedStyles>
-    </Show>
-  );
-}
-
-export default BlockStyles;

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

@@ -1,156 +0,0 @@
-import { useContext, Show, For } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { createMutable } from "solid-js/store";
-
-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 BlockStyles from "./block-styles.jsx";
-import { isEmptyHtmlElement } from "./render-block.helpers.js";
-import RenderComponent from "./render-component.jsx";
-
-function RenderBlock(props) {
-  const state = createMutable({
-    get component() {
-      const componentName = state.useBlock.component?.name;
-
-      if (!componentName) {
-        return null;
-      }
-
-      const ref = builderContext.registeredComponents[componentName];
-
-      if (!ref) {
-        // TODO: Public doc page with more info about this message
-        console.warn(`
-        Could not find a registered component named "${componentName}". 
-        If you registered it, is the file that registered it imported by the file that needs to render it?`);
-        return undefined;
-      } else {
-        return ref;
-      }
-    },
-    get componentInfo() {
-      if (state.component) {
-        const { component: _, ...info } = state.component;
-        return info;
-      } else {
-        return undefined;
-      }
-    },
-    get componentRef() {
-      return state.component?.component;
-    },
-    get tagName() {
-      return getBlockTag(state.useBlock);
-    },
-    get useBlock() {
-      return getProcessedBlock({
-        block: props.block,
-        state: builderContext.state,
-        context: builderContext.context,
-      });
-    },
-    get attributes() {
-      return {
-        ...getBlockProperties(state.useBlock),
-        ...getBlockActions({
-          block: state.useBlock,
-          state: builderContext.state,
-          context: builderContext.context,
-        }),
-        style: getBlockStyles(state.useBlock),
-      };
-    },
-    get shouldWrap() {
-      return !state.componentInfo?.noWrap;
-    },
-    get componentOptions() {
-      return {
-        ...getBlockComponentOptions(state.useBlock),
-
-        /**
-         * These attributes are passed to the wrapper element when there is one. If `noWrap` is set to true, then
-         * they are provided to the component itself directly.
-         */
-        ...(state.shouldWrap
-          ? {}
-          : {
-              attributes: state.attributes,
-            }),
-      };
-    },
-    get children() {
-      // TO-DO: When should `canHaveChildren` dictate rendering?
-      // This is currently commented out because some Builder components (e.g. Box) do not have `canHaveChildren: true`,
-      // but still receive and need to render children.
-      // return state.componentInfo?.canHaveChildren ? state.useBlock.children : [];
-      return state.useBlock.children ?? [];
-    },
-    get noCompRefChildren() {
-      /**
-       * When there is no `componentRef`, there might still be children that need to be rendered. In this case,
-       * we render them outside of `componentRef`
-       */
-      return state.componentRef ? [] : state.children;
-    },
-  });
-
-  const builderContext = useContext(BuilderContext);
-
-  return (
-    <Show
-      fallback={
-        <RenderComponent
-          blockChildren={state.children}
-          componentRef={state.componentRef}
-          componentOptions={state.componentOptions}
-        ></RenderComponent>
-      }
-      when={state.shouldWrap}
-    >
-      <Show
-        fallback={
-          <Dynamic {...state.attributes} component={state.tagName}></Dynamic>
-        }
-        when={!isEmptyHtmlElement(state.tagName)}
-      >
-        <Dynamic {...state.attributes} component={state.tagName}>
-          <RenderComponent
-            blockChildren={state.children}
-            componentRef={state.componentRef}
-            componentOptions={state.componentOptions}
-          ></RenderComponent>
-          <For each={state.noCompRefChildren}>
-            {(child, _index) => {
-              const index = _index();
-              return (
-                <RenderBlock
-                  key={"render-block-" + child.id}
-                  block={child}
-                ></RenderBlock>
-              );
-            }}
-          </For>
-          <For each={state.noCompRefChildren}>
-            {(child, _index) => {
-              const index = _index();
-              return (
-                <BlockStyles
-                  key={"block-style-" + child.id}
-                  block={child}
-                ></BlockStyles>
-              );
-            }}
-          </For>
-        </Dynamic>
-      </Show>
-    </Show>
-  );
-}
-
-export default RenderBlock;

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

@@ -1,38 +0,0 @@
-import { Show, For } from "solid-js";
-import { Dynamic } from "solid-js/web";
-
-import BlockStyles from "./block-styles.jsx";
-import RenderBlock from "./render-block.jsx";
-
-function RenderComponent(props) {
-  return (
-    <Show when={props.componentRef}>
-      <Dynamic {...props.componentOptions} component={props.componentRef}>
-        <For each={props.blockChildren}>
-          {(child, _index) => {
-            const index = _index();
-            return (
-              <RenderBlock
-                key={"render-block-" + child.id}
-                block={child}
-              ></RenderBlock>
-            );
-          }}
-        </For>
-        <For each={props.blockChildren}>
-          {(child, _index) => {
-            const index = _index();
-            return (
-              <BlockStyles
-                key={"block-style-" + child.id}
-                block={child}
-              ></BlockStyles>
-            );
-          }}
-        </For>
-      </Dynamic>
-    </Show>
-  );
-}
-
-export default RenderComponent;

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

@@ -1,94 +0,0 @@
-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 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" : "");
-    },
-    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={"render-block-" + block.id}
-                block={block}
-              ></RenderBlock>
-            );
-          }}
-        </For>
-      </Show>
-      <Show when={props.blocks}>
-        <For each={props.blocks}>
-          {(block, _index) => {
-            const index = _index();
-            return (
-              <BlockStyles
-                key={"block-style-" + block.id}
-                block={block}
-              ></BlockStyles>
-            );
-          }}
-        </For>
-      </Show>
-    </div>
-  );
-}
-
-export default RenderBlocks;

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

@@ -1,76 +0,0 @@
-import { createMutable } from "solid-js/store";
-
-import RenderInlinedStyles from "../../render-inlined-styles.jsx";
-
-function RenderContentStyles(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(" ") || ""
-      );
-    },
-    get injectedStyles() {
-      return `
-${props.cssCode || ""}
-${state.getFontCss({
-  customFonts: props.customFonts,
-})}`;
-    },
-  });
-
-  return (
-    <RenderInlinedStyles styles={state.injectedStyles}></RenderInlinedStyles>
-  );
-}
-
-export default RenderContentStyles;

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

@@ -1,262 +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.jsx";
-import RenderContentStyles from "./components/render-styles.jsx";
-
-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.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() {
-      if (isEditing()) {
-        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;