@builder.io/sdk-react-native 0.0.10 → 0.0.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "main": "src/index.js",
   "files": [
     "src"
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.17.10",
+    "node-fetch": "^2.6.1",
     "react-native-render-html": "^6.3.4",
     "react-native-storage": "^1.0.1",
     "react-native-video": "^5.1.1"

package/src/blocks/button/button.js

@@ -21,8 +21,9 @@ import BaseText from "../BaseText";
 import * as React from "react";
 import { View, StyleSheet } from "react-native";
 function Button(props) {
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
-    role: "button",
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, props.link ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({
+    role: "button"
+  }, props.attributes), {
     href: props.link,
     target: props.openLinkInNewTab ? "_blank" : void 0
   }), /* @__PURE__ */ React.createElement(BaseText, null, props.text))) : /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {

package/src/blocks/columns/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util.js";
+import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Columns",
   builtIn: true,
@@ -187,7 +187,7 @@ const componentInfo = {
           ]
         }
       ],
-      onChange: markSerializable((options) => {
+      onChange: serializeFn((options) => {
         function clearWidths() {
           columns.forEach((col) => {
             col.delete("width");

package/src/blocks/embed/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util.js";
+import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Embed",
   static: true,
@@ -10,7 +10,7 @@ const componentInfo = {
       required: true,
       defaultValue: "",
       helperText: "e.g. enter a youtube url, google map, etc",
-      onChange: markSerializable((options) => {
+      onChange: serializeFn((options) => {
         const url = options.get("url");
         if (url) {
           options.set("content", "Loading...");

package/src/blocks/form/form.js

@@ -1,6 +1,4 @@
 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;
@@ -16,7 +14,6 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __async = (__this, __arguments, generator) => {
   return new Promise((resolve, reject) => {
     var fulfilled = (value) => {
@@ -194,14 +191,14 @@ function FormComponent(props) {
     }
   }
   const builderContext = useContext(BuilderContext);
-  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+  return /* @__PURE__ */ React.createElement(View, __spreadValues({
     validate: props.validate,
     ref: formRef,
     action: !props.sendWithJs && props.action,
     method: props.method,
     name: props.name,
     onSubmit: (event) => onSubmit(event)
-  }), " ", props.builderBlock && props.builderBlock.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }, props.attributes), " ", props.builderBlock && props.builderBlock.children ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.map((block) => /* @__PURE__ */ React.createElement(RenderBlock, {
     block,
     context: builderContext
   }))) : null, " ", submissionState() === "error" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BuilderBlocks, {

package/src/blocks/image/component-info.js

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util.js";
+import { serializeFn } from "../util.js";
 const componentInfo = {
   name: "Image",
   static: true,
@@ -19,7 +19,7 @@ const componentInfo = {
       allowedFileTypes: ["jpeg", "jpg", "png", "svg"],
       required: true,
       defaultValue: "https://cdn.builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d",
-      onChange: markSerializable((options) => {
+      onChange: serializeFn((options) => {
         const DEFAULT_ASPECT_RATIO = 0.7041;
         options.delete("srcset");
         options.delete("noWebp");

package/src/blocks/img/img.js

@@ -1,6 +1,4 @@
 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;
@@ -16,12 +14,11 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import { View } from "react-native";
 import { isEditing } from "../../functions/is-editing.js";
 function ImgComponent(props) {
-  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+  return /* @__PURE__ */ React.createElement(View, __spreadValues({
     style: {
       objectFit: props.backgroundSize || "cover",
       objectPosition: props.backgroundPosition || "center"
@@ -29,7 +26,7 @@ function ImgComponent(props) {
     key: isEditing() && props.imgSrc || "default-key",
     alt: props.altText,
     src: props.imgSrc || props.image
-  }));
+  }, props.attributes));
 }
 export {
   ImgComponent as default

package/src/blocks/submit-button/submit-button.js

@@ -1,6 +1,4 @@
 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;
@@ -16,14 +14,13 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import BaseText from "../BaseText";
 import * as React from "react";
 import { View } from "react-native";
 function SubmitButton(props) {
-  return /* @__PURE__ */ React.createElement(View, __spreadProps(__spreadValues({}, props.attributes), {
+  return /* @__PURE__ */ React.createElement(View, __spreadValues({
     type: "submit"
-  }), /* @__PURE__ */ React.createElement(BaseText, null, props.text));
+  }, props.attributes), /* @__PURE__ */ React.createElement(BaseText, null, props.text));
 }
 export {
   SubmitButton as default

package/src/blocks/util.js

@@ -1,7 +1,8 @@
-function markSerializable(fn) {
-  fn.__qwik_serializable__ = true;
-  return fn;
-}
+const serializeFn = (fnValue) => {
+  const fnStr = fnValue.toString().trim();
+  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
+  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
+};
 export {
-  markSerializable
+  serializeFn
 };

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

@@ -30,6 +30,7 @@ var __objRest = (source, exclude) => {
   return target;
 };
 import * as React from "react";
+import { View } from "react-native";
 import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
@@ -68,7 +69,7 @@ function RenderBlock(props) {
       return ref;
     }
   }
-  function tagName() {
+  function tag() {
     return getBlockTag(useBlock());
   }
   function useBlock() {
@@ -98,7 +99,7 @@ function RenderBlock(props) {
   function renderComponentProps() {
     var _a2;
     return {
-      blockChildren: children(),
+      blockChildren: useChildren(),
       componentRef: (_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component,
       componentOptions: __spreadValues(__spreadValues({}, getBlockComponentOptions(useBlock())), shouldWrap() ? {} : {
         attributes: attributes()
@@ -106,14 +107,14 @@ function RenderBlock(props) {
       context: childrenContext()
     };
   }
-  function children() {
+  function useChildren() {
     var _a2;
     return (_a2 = useBlock().children) != null ? _a2 : [];
   }
   function childrenWithoutParentComponent() {
     var _a2;
     const shouldRenderChildrenOutsideRef = !((_a2 = component == null ? void 0 : component()) == null ? void 0 : _a2.component) && !repeatItemData();
-    return shouldRenderChildrenOutsideRef ? children() : [];
+    return shouldRenderChildrenOutsideRef ? useChildren() : [];
   }
   function repeatItemData() {
     const _a2 = props.block, { repeat } = _a2, blockWithoutRepeat = __objRest(_a2, ["repeat"]);
@@ -174,12 +175,11 @@ function RenderBlock(props) {
   }
   const [componentInfo, setComponentInfo] = useState(() => null);
   const RenderComponentTagRef = renderComponentTag();
-  const TagNameRef = tagName();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, isEmptyHtmlElement(tagName()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()))) : null, !isEmptyHtmlElement(tagName()) && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, shouldWrap() ? /* @__PURE__ */ React.createElement(React.Fragment, null, isEmptyHtmlElement(tag()) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadValues({}, attributes()))) : null, !isEmptyHtmlElement(tag()) && repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = repeatItemData()) == null ? void 0 : _a.map((data, index) => /* @__PURE__ */ React.createElement(RenderRepeatedBlock, {
     key: index,
     repeatContext: data.context,
     block: data.block
-  }))) : null, !isEmptyHtmlElement(tagName()) && !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TagNameRef, __spreadValues({}, attributes()), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
+  }))) : null, !isEmptyHtmlElement(tag()) && !repeatItemData() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(View, __spreadValues({}, attributes()), /* @__PURE__ */ React.createElement(RenderComponentTagRef, __spreadValues({}, renderComponentProps())), (_b = childrenWithoutParentComponent()) == null ? void 0 : _b.map((child) => /* @__PURE__ */ React.createElement(RenderBlock, {
     key: "render-block-" + child.id,
     block: child,
     context: childrenContext()

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

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { View } from "react-native";
+function BuilderEditing(props) {
+  return /* @__PURE__ */ React.createElement(View, null);
+}
+export {
+  BuilderEditing as default
+};

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

@@ -33,7 +33,7 @@ import {
   components,
   createRegisterComponentMessage
 } from "../../functions/register-component.js";
-import { track } from "../../functions/track.js";
+import { _track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.js";
 import RenderContentStyles from "./components/render-styles.js";
 import {
@@ -114,13 +114,16 @@ function RenderContent(props) {
     return {};
   }
   function onClick(_event) {
-    var _a2;
+    var _a2, _b2;
     if (useContent()) {
-      track({
+      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: (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id,
-        orgId: props.apiKey
+        contentId,
+        apiKey: props.apiKey,
+        variationId: variationId !== contentId ? variationId : void 0
       });
     }
   }
@@ -171,7 +174,7 @@ function RenderContent(props) {
     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;
+    var _a2, _b2;
     if (isBrowser()) {
       if (isEditing()) {
         setForceReRenderCount(forceReRenderCount + 1);
@@ -186,11 +189,14 @@ function RenderContent(props) {
         window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
       }
       if (useContent()) {
-        track({
+        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: (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id,
-          orgId: props.apiKey
+          contentId,
+          apiKey: props.apiKey,
+          variationId: variationId !== contentId ? variationId : void 0
         });
       }
       if (isPreviewing()) {

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

@@ -3,15 +3,14 @@ import { View, Text } from "react-native";
 import { TARGET } from "../constants/target.js";
 function RenderInlinedStyles(props) {
   function injectedStyleScript() {
-    return `<${tagName()}>${props.styles}</${tagName()}>`;
+    return `<${tag()}>${props.styles}</${tag()}>`;
   }
-  function tagName() {
+  function tag() {
     return "style";
   }
-  const TagNameRef = tagName();
   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(TagNameRef, null, /* @__PURE__ */ React.createElement(Text, null, props.styles)));
+  })) : /* @__PURE__ */ React.createElement(View, null, /* @__PURE__ */ React.createElement(Text, null, props.styles)));
 }
 export {
   RenderInlinedStyles as default

package/src/functions/get-content/index.js

@@ -56,9 +56,13 @@ const generateContentUrl = (options) => {
     query,
     noTraverse = false,
     model,
-    apiKey
+    apiKey,
+    includeRefs = true
   } = options;
-  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}`);
+  if (!apiKey) {
+    throw new Error("Missing API key");
+  }
+  const url = new URL(`https://cdn.builder.io/api/v2/content/${model}?apiKey=${apiKey}&limit=${limit}&noTraverse=${noTraverse}&includeRefs=${includeRefs}`);
   const queryOptions = __spreadValues(__spreadValues({}, getBuilderSearchParamsFromWindow()), normalizeSearchParams(options.options || {}));
   const flattened = flatten(queryOptions);
   for (const key in flattened) {

package/src/functions/register-component.js

@@ -29,6 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+import { serializeFn } from "../blocks/util.js";
 import { fastClone } from "./fast-clone.js";
 const components = [];
 function registerComponent(component, info) {
@@ -48,11 +49,6 @@ const createRegisterComponentMessage = (_a) => {
   };
 };
 const serializeValue = (value) => typeof value === "function" ? serializeFn(value) : fastClone(value);
-const serializeFn = (fnValue) => {
-  const fnStr = fnValue.toString().trim();
-  const appendFunction = !fnStr.startsWith("function") && !fnStr.startsWith("(");
-  return `return (${appendFunction ? "function " : ""}${fnStr}).apply(this, arguments)`;
-};
 const prepareComponentInfoToSend = (_c) => {
   var _d = _c, {
     inputs

package/src/functions/track.js

@@ -71,23 +71,24 @@ const createEvent = (_a) => __async(void 0, null, function* () {
   var _b = _a, {
     type: eventType,
     canTrack,
-    orgId,
-    contentId
+    apiKey,
+    metadata
   } = _b, properties = __objRest(_b, [
     "type",
     "canTrack",
-    "orgId",
-    "contentId"
+    "apiKey",
+    "metadata"
   ]);
   return {
     type: eventType,
-    data: __spreadProps(__spreadValues(__spreadValues({}, properties), yield getTrackingEventData({ canTrack })), {
-      ownerId: orgId,
-      contentId
+    data: __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, properties), {
+      metadata: JSON.stringify(metadata)
+    }), yield getTrackingEventData({ canTrack })), {
+      ownerId: apiKey
     })
   };
 });
-function track(eventProps) {
+function _track(eventProps) {
   return __async(this, null, function* () {
     if (!eventProps.canTrack) {
       return;
@@ -112,6 +113,8 @@ function track(eventProps) {
     });
   });
 }
+const track = (args) => _track(__spreadProps(__spreadValues({}, args), { canTrack: true }));
 export {
+  _track,
   track
 };

package/src/index.js

@@ -1,4 +1,4 @@
-import "./index-helpers/top-of-file.js";
+export * from "./index-helpers/top-of-file.js";
 import "./scripts/init-editing.js";
 export * from "./index-helpers/blocks-exports.js";
 export * from "./functions/is-editing.js";
@@ -8,3 +8,7 @@ export * from "./functions/register.js";
 export * from "./functions/set-editor-settings.js";
 export * from "./functions/get-content/index.js";
 export * from "./functions/get-builder-search-params/index.js";
+import { track } from "./functions/track";
+export {
+  track
+};

package/src/scripts/init-editing.js

@@ -19,8 +19,13 @@ const registerInsertMenu = () => {
     ]
   });
 };
+let isSetupForEditing = false;
 const setupBrowserForEditing = () => {
   var _a;
+  if (isSetupForEditing) {
+    return;
+  }
+  isSetupForEditing = true;
   if (isBrowser()) {
     (_a = window.parent) == null ? void 0 : _a.postMessage({
       type: "builder.sdkInfo",