@builder.io/sdk-react-native 0.1.2 → 0.1.3

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

@@ -1,297 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import * as React from "react";
-import { View } from "react-native";
-import { useState, useRef, useEffect } 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";
-function RenderContent(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
-  const elementRef = useRef(null);
-  const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
-  const [overrideContent, setOverrideContent] = useState(() => null);
-  function useContent() {
-    var _a2, _b2, _c2, _d2, _e2;
-    if (!props.content && !overrideContent) {
-      return void 0;
-    }
-    const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
-      data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), overrideContent == null ? void 0 : overrideContent.data),
-      meta: __spreadProps(__spreadValues(__spreadValues({}, (_b2 = props.content) == null ? void 0 : _b2.meta), overrideContent == null ? void 0 : overrideContent.meta), {
-        breakpoints: useBreakpoints || ((_c2 = overrideContent == null ? void 0 : overrideContent.meta) == null ? void 0 : _c2.breakpoints) || ((_e2 = (_d2 = props.content) == null ? void 0 : _d2.meta) == null ? void 0 : _e2.breakpoints)
-      })
-    });
-    return mergedContent;
-  }
-  const [update, setUpdate] = useState(() => 0);
-  const [useBreakpoints, setUseBreakpoints] = useState(() => null);
-  function canTrackToUse() {
-    return checkIsDefined(props.canTrack) ? props.canTrack : true;
-  }
-  const [overrideState, setOverrideState] = useState(() => ({}));
-  function contentState() {
-    var _a2, _b2;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), props.locale ? {
-      locale: props.locale
-    } : {}), overrideState);
-  }
-  function contextContext() {
-    return props.context || {};
-  }
-  function allRegisteredComponents() {
-    const allComponentsArray = [
-      ...getDefaultRegisteredComponents(),
-      ...components,
-      ...props.customComponents || []
-    ];
-    const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), {
-      [curr.name]: curr
-    }), {});
-    return allComponents;
-  }
-  function processMessage(event) {
-    var _a2;
-    const { data } = event;
-    if (data) {
-      switch (data.type) {
-        case "builder.configureSdk": {
-          const messageContent = data.data;
-          const { breakpoints, contentId } = messageContent;
-          if (!contentId || contentId !== ((_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id)) {
-            return;
-          }
-          setUseBreakpoints(breakpoints);
-          setForceReRenderCount(forceReRenderCount + 1);
-          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) {
-            setOverrideContent(contentData);
-            setForceReRenderCount(forceReRenderCount + 1);
-          }
-          break;
-        }
-        case "builder.patchUpdates": {
-          break;
-        }
-      }
-    }
-  }
-  function evaluateJsCode() {
-    var _a2, _b2;
-    const jsCode = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.jsCode;
-    if (jsCode) {
-      evaluate({
-        code: jsCode,
-        context: contextContext(),
-        state: contentState()
-      });
-    }
-  }
-  function httpReqsData() {
-    return {};
-  }
-  function onClick(_event) {
-    var _a2, _b2;
-    if (useContent()) {
-      const variationId = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.testVariationId;
-      const contentId = (_b2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _b2.id;
-      _track({
-        type: "click",
-        canTrack: canTrackToUse(),
-        contentId,
-        apiKey: props.apiKey,
-        variationId: variationId !== contentId ? variationId : void 0
-      });
-    }
-  }
-  function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-      code: group,
-      context: contextContext(),
-      state: contentState()
-    }));
-  }
-  function handleRequest({ url, key }) {
-    fetch(url).then((response) => response.json()).then((json) => {
-      const newOverrideState = __spreadProps(__spreadValues({}, overrideState), {
-        [key]: json
-      });
-      setOverrideState(newOverrideState);
-    }).catch((err) => {
-      console.log("error fetching dynamic data", url, err);
-    });
-  }
-  function runHttpRequests() {
-    var _a2, _b2, _c2;
-    const requests = (_c2 = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.httpRequests) != null ? _c2 : {};
-    Object.entries(requests).forEach(([key, url]) => {
-      if (url && (!httpReqsData()[key] || isEditing())) {
-        const evaluatedUrl = evalExpression(url);
-        handleRequest({
-          url: evaluatedUrl,
-          key
-        });
-      }
-    });
-  }
-  function emitStateUpdate() {
-    if (isEditing()) {
-      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-        detail: {
-          state: contentState(),
-          ref: {
-            name: props.model
-          }
-        }
-      }));
-    }
-  }
-  function shouldRenderContentStyles() {
-    var _a2, _b2, _c2, _d2, _e2;
-    return Boolean((((_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.cssCode) || ((_e2 = (_d2 = (_c2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _c2.data) == null ? void 0 : _d2.customFonts) == null ? void 0 : _e2.length)) && TARGET !== "reactNative");
-  }
-  useEffect(() => {
-    var _a2, _b2;
-    if (!props.apiKey) {
-      console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
-    }
-    if (isBrowser()) {
-      if (isEditing()) {
-        setForceReRenderCount(forceReRenderCount + 1);
-        registerInsertMenu();
-        setupBrowserForEditing(__spreadValues(__spreadValues({}, props.locale ? {
-          locale: props.locale
-        } : {}), props.includeRefs ? {
-          includeRefs: props.includeRefs
-        } : {}));
-        Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
-          var _a3;
-          const message = createRegisterComponentMessage(registeredComponent);
-          (_a3 = window.parent) == null ? void 0 : _a3.postMessage(message, "*");
-        });
-        window.addEventListener("message", processMessage);
-        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
-      }
-      if (useContent()) {
-        const variationId = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.testVariationId;
-        const contentId = (_b2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _b2.id;
-        _track({
-          type: "impression",
-          canTrack: canTrackToUse(),
-          contentId,
-          apiKey: props.apiKey,
-          variationId: variationId !== contentId ? variationId : void 0
-        });
-      }
-      if (isPreviewing()) {
-        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
-            }).then((content) => {
-              if (content) {
-                setOverrideContent(content);
-              }
-            });
-          }
-        }
-      }
-      evaluateJsCode();
-      runHttpRequests();
-      emitStateUpdate();
-    }
-  }, []);
-  useEffect(() => {
-    evaluateJsCode();
-  }, [(_b = (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode, contentState()]);
-  useEffect(() => {
-    runHttpRequests();
-  }, [(_d = (_c = useContent == null ? void 0 : useContent()) == null ? void 0 : _c.data) == null ? void 0 : _d.httpRequests]);
-  useEffect(() => {
-    emitStateUpdate();
-  }, [contentState()]);
-  useEffect(() => {
-    return () => {
-      if (isBrowser()) {
-        window.removeEventListener("message", processMessage);
-        window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
-    value: {
-      get content() {
-        return useContent();
-      },
-      get state() {
-        return contentState();
-      },
-      get context() {
-        return contextContext();
-      },
-      get apiKey() {
-        return props.apiKey;
-      },
-      get registeredComponents() {
-        return allRegisteredComponents();
-      }
-    }
-  }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
-    ref: elementRef,
-    onClick: (event) => onClick(event),
-    "builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id,
-    "builder-model": props.model
-  }, shouldRenderContentStyles() ? /* @__PURE__ */ React.createElement(RenderContentStyles, {
-    cssCode: (_g = (_f = useContent == null ? void 0 : useContent()) == null ? void 0 : _f.data) == null ? void 0 : _g.cssCode,
-    customFonts: (_i = (_h = useContent == null ? void 0 : useContent()) == null ? void 0 : _h.data) == null ? void 0 : _i.customFonts
-  }) : null, /* @__PURE__ */ React.createElement(RenderBlocks, {
-    blocks: (_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks,
-    key: forceReRenderCount
-  }))) : null);
-}
-export {
-  RenderContent as default
-};

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

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { View, Text } from "react-native";
-import { TARGET } from "../constants/target.js";
-function RenderInlinedStyles(props) {
-  function injectedStyleScript() {
-    return `<${tag()}>${props.styles}</${tag()}>`;
-  }
-  function tag() {
-    return "style";
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, {
-    dangerouslySetInnerHTML: { __html: injectedStyleScript() }
-  })) : /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, props.styles)));
-}
-export {
-  RenderInlinedStyles as default
-};