@builder.io/sdk-react 0.1.1 → 0.1.3

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

@@ -0,0 +1,259 @@
+import * as React from "react";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.js";
+import { evaluate } from "../../functions/evaluate.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { fetch } 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 {
+  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 BuilderContext from "../../context/builder.context.js";
+import {
+  registerInsertMenu,
+  setupBrowserForEditing,
+} from "../../scripts/init-editing.js";
+import { checkIsDefined } from "../../helpers/nullable.js";
+
+export default function RenderContent(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    forceReRenderCount: 0,
+    overrideContent: null,
+    get useContent() {
+      if (!props.content && !state.overrideContent) {
+        return undefined;
+      }
+      const mergedContent = {
+        ...props.content,
+        ...state.overrideContent,
+        data: {
+          ...props.content?.data,
+          ...props.data,
+          ...state.overrideContent?.data,
+        },
+        meta: {
+          ...props.content?.meta,
+          ...state.overrideContent?.meta,
+          breakpoints:
+            state.useBreakpoints ||
+            state.overrideContent?.meta?.breakpoints ||
+            props.content?.meta?.breakpoints,
+        },
+      };
+      return mergedContent;
+    },
+    update: 0,
+    useBreakpoints: null,
+    get canTrackToUse() {
+      return checkIsDefined(props.canTrack) ? props.canTrack : true;
+    },
+    overrideState: {},
+    get contentState() {
+      return {
+        ...props.content?.data?.state,
+        ...props.data,
+        ...(props.locale
+          ? {
+              locale: props.locale,
+            }
+          : {}),
+        ...state.overrideState,
+      };
+    },
+    get contextContext() {
+      return props.context || {};
+    },
+    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;
+    },
+    processMessage(event) {
+      const { data } = event;
+      if (data) {
+        switch (data.type) {
+          case "builder.configureSdk": {
+            const messageContent = data.data;
+            const { breakpoints, contentId } = messageContent;
+            if (!contentId || contentId !== state.useContent?.id) {
+              return;
+            }
+            state.useBreakpoints = breakpoints;
+            state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+            break;
+          }
+          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;
+              state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+            }
+
+            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.contextContext,
+          state: state.contentState,
+        });
+      }
+    },
+    get httpReqsData() {
+      return {};
+    },
+    onClick(_event) {
+      if (state.useContent) {
+        const variationId = state.useContent?.testVariationId;
+        const contentId = state.useContent?.id;
+        _track({
+          type: "click",
+          canTrack: state.canTrackToUse,
+          contentId,
+          apiKey: props.apiKey,
+          variationId: variationId !== contentId ? variationId : undefined,
+        });
+      }
+    },
+    evalExpression(expression) {
+      return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+        evaluate({
+          code: group,
+          context: state.contextContext,
+          state: state.contentState,
+        })
+      );
+    },
+    handleRequest({ url, key }) {
+      fetch(url)
+        .then((response) => response.json())
+        .then((json) => {
+          const newOverrideState = {
+            ...state.overrideState,
+            [key]: json,
+          };
+          state.overrideState = newOverrideState;
+        })
+        .catch((err) => {
+          console.log("error fetching dynamic data", url, err);
+        });
+    },
+    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("builder:component:stateChange", {
+            detail: {
+              state: state.contentState,
+              ref: {
+                name: props.model,
+              },
+            },
+          })
+        );
+      }
+    },
+    get shouldRenderContentStyles() {
+      return Boolean(
+        (state.useContent?.data?.cssCode ||
+          state.useContent?.data?.customFonts?.length) &&
+          TARGET !== "reactNative"
+      );
+    },
+  };
+
+  _context.BuilderContext = {
+    get content() {
+      return state.useContent;
+    },
+    get state() {
+      return state.contentState;
+    },
+    get context() {
+      return state.contextContext;
+    },
+    get apiKey() {
+      return props.apiKey;
+    },
+    get registeredComponents() {
+      return state.allRegisteredComponents;
+    },
+  };
+
+  return (
+    <>
+      {state.useContent ? (
+        <>
+          <div
+            builder-content-id={state.useContent?.id}
+            builder-model={props.model}
+          >
+            {state.shouldRenderContentStyles ? (
+              <RenderContentStyles
+                cssCode={state.useContent?.data?.cssCode}
+                customFonts={state.useContent?.data?.customFonts}
+                _context={_context}
+              />
+            ) : null}
+
+            <RenderBlocks
+              blocks={state.useContent?.data?.blocks}
+              key={state.forceReRenderCount}
+              _context={_context}
+            />
+          </div>
+        </>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { TARGET } from "../constants/target.js";
+
+export default function RenderInlinedStyles(props) {
+  const _context = { ...props["_context"] };
+
+  const state = {
+    get injectedStyleScript() {
+      return `<${state.tag}>${props.styles}</${state.tag}>`;
+    },
+    get tag() {
+      // 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";
+    },
+  };
+
+  const TagRef = state.tag;
+
+  return (
+    <>
+      {TARGET === "svelte" ? (
+        <>
+          <div
+            dangerouslySetInnerHTML={{ __html: state.injectedStyleScript }}
+          />
+        </>
+      ) : (
+        <TagRef>{props.styles}</TagRef>
+      )}
+    </>
+  );
+}

package/packages/_rsc/src/helpers/cookie.js

@@ -19,6 +19,7 @@ var __async = (__this, __arguments, generator) => {
   });
 };
 import { isBrowser } from "../functions/is-browser.js";
+import { checkIsDefined } from "./nullable.js";
 import { getTopLevelDomain } from "./url.js";
 const getCookie = (_0) => __async(void 0, [_0], function* ({
   name,
@@ -32,9 +33,10 @@ const getCookie = (_0) => __async(void 0, [_0], function* ({
     return (_a = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`))) == null ? void 0 : _a.split("=")[1];
   } catch (err) {
     console.debug("[COOKIE] GET error: ", err);
+    return void 0;
   }
 });
-const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).join("; ");
+const stringifyCookie = (cookie) => cookie.map(([key, value]) => value ? `${key}=${value}` : key).filter(checkIsDefined).join("; ");
 const SECURE_CONFIG = [
   ["secure", ""],
   ["SameSite", "None"]
@@ -65,7 +67,7 @@ const setCookie = (_0) => __async(void 0, [_0], function* ({
 }) {
   try {
     if (!canTrack) {
-      return void 0;
+      return;
     }
     const cookie = createCookieString({ name, value, expires });
     document.cookie = cookie;

package/packages/_rsc/src/helpers/localStorage.js

@@ -12,6 +12,7 @@ const getLocalStorageItem = ({
     return void 0;
   } catch (err) {
     console.debug("[LocalStorage] GET error: ", err);
+    return void 0;
   }
 };
 const setLocalStorageItem = ({

package/packages/_rsc/src/helpers/sessionId.js

@@ -22,7 +22,9 @@ import { getCookie, setCookie } from "./cookie.js";
 import { checkIsDefined } from "./nullable.js";
 import { uuid } from "./uuid.js";
 const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
-const getSessionId = (_0) => __async(void 0, [_0], function* ({ canTrack }) {
+const getSessionId = (_0) => __async(void 0, [_0], function* ({
+  canTrack
+}) {
   if (!canTrack) {
     return void 0;
   }
@@ -35,6 +37,7 @@ const getSessionId = (_0) => __async(void 0, [_0], function* ({ canTrack }) {
   } else {
     const newSessionId = createSessionId();
     setSessionId({ id: newSessionId, canTrack });
+    return newSessionId;
   }
 });
 const createSessionId = () => uuid();

package/packages/_rsc/src/helpers/url.js

@@ -1,4 +1,7 @@
 const getTopLevelDomain = (host) => {
+  if (host === "localhost" || host === "127.0.0.1") {
+    return host;
+  }
   const parts = host.split(".");
   if (parts.length > 2) {
     return parts.slice(1).join(".");

package/packages/_rsc/src/helpers/url.test.js

@@ -12,4 +12,10 @@ describe("getTopLevelDomain", () => {
     const output = getTopLevelDomain("www.example.co.uk");
     expect(output).toBe("example.co.uk");
   });
+  test("handles localhost", () => {
+    const output = getTopLevelDomain("localhost");
+    expect(output).toBe("localhost");
+    const output2 = getTopLevelDomain("127.0.0.1");
+    expect(output2).toBe("127.0.0.1");
+  });
 });

package/packages/_rsc/src/helpers/visitorId.js

@@ -15,6 +15,7 @@ const getVisitorId = ({ canTrack }) => {
   } else {
     const newVisitorId = createVisitorId();
     setVisitorId({ id: newVisitorId, canTrack });
+    return newVisitorId;
   }
 };
 const createVisitorId = () => uuid();

package/packages/react/src/blocks/BaseText.jsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { useContext } from "react";
+import BuilderContext from "../context/builder.context.js";
+
+export default function BaseText(props) {
+  const builderContext = useContext(BuilderContext);
+
+  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
+}

package/packages/react/src/blocks/button/button.jsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export default function Button(props) {
+  return (
+    <>
+      {props.link ? (
+        <>
+          <a
+            role="button"
+            {...props.attributes}
+            href={props.link}
+            target={props.openLinkInNewTab ? "_blank" : undefined}
+          >
+            {props.text}
+          </a>
+        </>
+      ) : (
+        <button className="button-7028b0a4" {...props.attributes}>
+          {props.text}
+        </button>
+      )}
+      <style>{`.button-7028b0a4 {
+all: unset;
+}`}</style>
+    </>
+  );
+}

package/packages/react/src/blocks/button/component-info.js

@@ -0,0 +1,41 @@
+const componentInfo = {
+  name: "Core:Button",
+  builtIn: true,
+  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
+  defaultStyles: {
+    appearance: "none",
+    paddingTop: "15px",
+    paddingBottom: "15px",
+    paddingLeft: "25px",
+    paddingRight: "25px",
+    backgroundColor: "#000000",
+    color: "white",
+    borderRadius: "4px",
+    textAlign: "center",
+    cursor: "pointer"
+  },
+  inputs: [
+    {
+      name: "text",
+      type: "text",
+      defaultValue: "Click me!",
+      bubble: true
+    },
+    {
+      name: "link",
+      type: "url",
+      bubble: true
+    },
+    {
+      name: "openLinkInNewTab",
+      type: "boolean",
+      defaultValue: false,
+      friendlyName: "Open link in new tab"
+    }
+  ],
+  static: true,
+  noWrap: true
+};
+export {
+  componentInfo
+};

package/packages/react/src/blocks/columns/columns.jsx

@@ -0,0 +1,172 @@
+import * as React from "react";
+import RenderBlocks from "../../components/render-blocks.js";
+import { getSizesForBreakpoints } from "../../constants/device-sizes";
+import RenderInlinedStyles from "../../components/render-inlined-styles.js";
+import { TARGET } from "../../constants/target.js";
+import { convertStyleMapToCSS } from "../../helpers/css";
+
+export default function Columns(props) {
+  function getGutterSize() {
+    return typeof props.space === "number" ? props.space || 0 : 20;
+  }
+
+  function getColumns() {
+    return props.columns || [];
+  }
+
+  function getWidth(index) {
+    const columns = getColumns();
+    return columns[index]?.width || 100 / columns.length;
+  }
+
+  function getColumnCssWidth(index) {
+    const columns = getColumns();
+    const gutterSize = getGutterSize();
+    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
+    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+  }
+
+  function maybeApplyForTablet(prop) {
+    const _stackColumnsAt = props.stackColumnsAt || "tablet";
+    return _stackColumnsAt === "tablet" ? prop : "inherit";
+  }
+
+  function columnsCssVars() {
+    const flexDir =
+      props.stackColumnsAt === "never"
+        ? "inherit"
+        : props.reverseColumnsWhenStacked
+        ? "column-reverse"
+        : "column";
+    return {
+      "--flex-dir": flexDir,
+      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
+    };
+  }
+
+  function columnCssVars() {
+    const width = "100%";
+    const marginLeft = "0";
+    return {
+      "--column-width": width,
+      "--column-margin-left": marginLeft,
+      "--column-width-tablet": maybeApplyForTablet(width),
+      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
+    };
+  }
+
+  function getWidthForBreakpointSize(size) {
+    const breakpointSizes = getSizesForBreakpoints(
+      props.customBreakpoints || {}
+    );
+    return breakpointSizes[size].max;
+  }
+
+  function columnStyleObjects() {
+    return {
+      columns: {
+        small: {
+          flexDirection: "var(--flex-dir)",
+          alignItems: "stretch",
+        },
+        medium: {
+          flexDirection: "var(--flex-dir-tablet)",
+          alignItems: "stretch",
+        },
+      },
+      column: {
+        small: {
+          width: "var(--column-width) !important",
+          marginLeft: "var(--column-margin-left) !important",
+        },
+        medium: {
+          width: "var(--column-width-tablet) !important",
+          marginLeft: "var(--column-margin-left-tablet) !important",
+        },
+      },
+    };
+  }
+
+  function columnsStyles() {
+    return `
+      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.medium)}
+        }
+      }
+
+      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+        .${props.builderBlock.id}-breakpoints {
+          ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
+        }
+
+        .${props.builderBlock.id}-breakpoints > .builder-column {
+          ${convertStyleMapToCSS(columnStyleObjects().column.small)}
+        }
+      },
+    `;
+  }
+
+  function reactNativeColumnsStyles() {
+    return columnStyleObjects.columns.small;
+  }
+
+  function reactNativeColumnStyles() {
+    return columnStyleObjects.column.small;
+  }
+
+  return (
+    <>
+      <div
+        className={
+          `builder-columns ${props.builderBlock.id}-breakpoints` +
+          " div-bda7d4e0"
+        }
+        style={{
+          ...(TARGET === "reactNative" ? reactNativeColumnsStyles() : {}),
+          ...columnsCssVars(),
+        }}
+      >
+        {TARGET !== "reactNative" ? (
+          <>
+            <RenderInlinedStyles styles={columnsStyles()} />
+          </>
+        ) : null}
+
+        {props.columns?.map((column, index) => (
+          <div
+            className="builder-column div-bda7d4e0-2"
+            style={{
+              width: getColumnCssWidth(index),
+              marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
+              ...(TARGET === "reactNative" ? reactNativeColumnStyles() : {}),
+              ...columnCssVars(),
+            }}
+            key={index}
+          >
+            <RenderBlocks
+              blocks={column.blocks}
+              path={`component.options.columns.${index}.blocks`}
+              parent={props.builderBlock.id}
+              styleProp={{
+                flexGrow: "1",
+              }}
+            />
+          </div>
+        ))}
+      </div>
+      <style>{`.div-bda7d4e0 {
+display: flex;
+line-height: normal;
+}.div-bda7d4e0-2 {
+display: flex;
+flex-direction: column;
+align-items: stretch;
+}`}</style>
+    </>
+  );
+}