@builder.io/sdk-react 0.0.1 → 0.0.3

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

@@ -32,14 +32,13 @@ 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.jsx";
 import RenderContentStyles from "./components/render-styles.jsx";
 import {
   registerInsertMenu,
   setupBrowserForEditing
 } from "../../scripts/init-editing.js";
-import { markMutable } from "../../functions/mark-mutable.js";
 function RenderContent(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const elementRef = useRef(null);
@@ -113,13 +112,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
       });
     }
   }
@@ -170,7 +172,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);
@@ -185,11 +187,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()) {
@@ -257,7 +262,7 @@ function RenderContent(props) {
     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: markMutable((_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks),
+    blocks: (_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks,
     key: forceReRenderCount
   }))) : null);
 }

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

@@ -2,15 +2,15 @@ import * as React from "react";
 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();
+  const TagRef = tag();
   return /* @__PURE__ */ React.createElement(React.Fragment, null, TARGET === "svelte" ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
     dangerouslySetInnerHTML: { __html: injectedStyleScript() }
-  })) : /* @__PURE__ */ React.createElement(TagNameRef, null, props.styles));
+  })) : /* @__PURE__ */ React.createElement(TagRef, null, props.styles));
 }
 export {
   RenderInlinedStyles as default

package/src/constants/device-sizes.js

@@ -1,3 +1,4 @@
+import { fastClone } from "../functions/fast-clone";
 const SIZES = {
   small: {
     min: 320,
@@ -15,7 +16,33 @@ const SIZES = {
     max: 1200
   }
 };
-const getMaxWidthQueryForSize = (size) => `@media (max-width: ${SIZES[size].max}px)`;
+const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
+const getSizesForBreakpoints = ({ small, medium }) => {
+  const newSizes = fastClone(SIZES);
+  if (!small || !medium) {
+    return newSizes;
+  }
+  const smallMin = Math.floor(small / 2);
+  newSizes.small = {
+    max: small,
+    min: smallMin,
+    default: smallMin + 1
+  };
+  const mediumMin = newSizes.small.max + 1;
+  newSizes.medium = {
+    max: medium,
+    min: mediumMin,
+    default: mediumMin + 1
+  };
+  const largeMin = newSizes.medium.max + 1;
+  newSizes.large = {
+    max: 2e3,
+    min: largeMin,
+    default: largeMin + 1
+  };
+  return newSizes;
+};
 export {
-  getMaxWidthQueryForSize
+  getMaxWidthQueryForSize,
+  getSizesForBreakpoints
 };

package/src/constants/target.js

@@ -1,4 +1,4 @@
-const TARGET = "reactNative";
+const TARGET = "react";
 export {
   TARGET
 };

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,15 +19,21 @@ 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",
       data: {
         target: TARGET,
         supportsPatchUpdates: false,
-        supportsAddBlockScoping: true
+        supportsAddBlockScoping: true,
+        supportsCustomBreakpoints: true
       }
     }, "*");
     window.addEventListener("message", ({ data }) => {