@builder.io/sdk-react 0.0.1-3 → 0.0.1-6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.0.1-3",
+  "version": "0.0.1-6",
   "main": "src/index.js",
   "type": "module",
   "exports": {

package/src/blocks/columns/columns.js

@@ -57,10 +57,10 @@ function Columns(props) {
     };
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-columns div-01f6ab8c",
+    className: "builder-columns div-6588dcca",
     style: columnsCssVars()
   }, (_a = props.columns) == null ? void 0 : _a.map((column, index) => /* @__PURE__ */ React.createElement("div", {
-    className: "builder-column div-01f6ab8c-2",
+    className: "builder-column div-6588dcca-2",
     style: __spreadValues({
       width: getColumnCssWidth(index),
       marginLeft: `${index === 0 ? 0 : getGutterSize()}px`
@@ -70,15 +70,15 @@ function Columns(props) {
     blocks: column.blocks,
     path: `component.options.columns.${index}.blocks`,
     parent: props.builderBlock.id
-  })))), /* @__PURE__ */ React.createElement("style", null, `.div-01f6ab8c { 
+  })))), /* @__PURE__ */ React.createElement("style", null, `.div-6588dcca { 
 display: flex;
 align-items: stretch;
-line-height: normal; }@media (max-width: 991px) { .div-01f6ab8c { 
-flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-01f6ab8c { 
-flex-direction: var(--flex-dir); } }.div-01f6ab8c-2 { 
-flex-grow: 1; }@media (max-width: 991px) { .div-01f6ab8c-2 { 
+line-height: normal; }@media (max-width: 991px) { .div-6588dcca { 
+flex-direction: var(--flex-dir-tablet); } }@media (max-width: 639px) { .div-6588dcca { 
+flex-direction: var(--flex-dir); } }.div-6588dcca-2 { 
+flex-grow: 1; }@media (max-width: 991px) { .div-6588dcca-2 { 
 width: var(--column-width-tablet) !important;
-margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-01f6ab8c-2 { 
+margin-left: var(--column-margin-left-tablet) !important; } }@media (max-width: 639px) { .div-6588dcca-2 { 
 width: var(--column-width) !important;
 margin-left: var(--column-margin-left) !important; } }`));
 }

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

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util";
+import { markSerializable } from "../util.js";
 const componentInfo = {
   name: "Columns",
   builtIn: true,

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

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util";
+import { markSerializable } from "../util.js";
 const componentInfo = {
   name: "Embed",
   static: true,

package/src/blocks/embed/embed.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
-import { isJsScript } from "./helpers";
+import { isJsScript } from "./helpers.js";
 function Embed(props) {
   const elem = useRef(null);
   const [scriptsInserted, setScriptsInserted] = useState(() => []);

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

@@ -1,4 +1,4 @@
-import { markSerializable } from "../util";
+import { markSerializable } from "../util.js";
 const componentInfo = {
   name: "Image",
   static: true,

package/src/blocks/image/image.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { getSrcSet } from "./image.helpers";
+import { getSrcSet } from "./image.helpers.js";
 function Image(props) {
   var _a, _b, _c, _d;
   function srcSetToUse() {
@@ -28,7 +28,7 @@ function Image(props) {
     }
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "div-4c804184"
+    className: "div-95472e7c"
   }, /* @__PURE__ */ React.createElement("picture", null, webpSrcSet() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("source", {
     type: "image/webp",
     srcset: webpSrcSet()
@@ -40,31 +40,31 @@ function Image(props) {
       objectPosition: props.backgroundSize || "center",
       objectFit: props.backgroundSize || "cover"
     },
-    className: "builder-image" + (props.className ? " " + props.className : "") + " img-4c804184",
+    className: "builder-image" + (props.className ? " " + props.className : "") + " img-95472e7c",
     src: props.image,
     srcset: srcSetToUse(),
     sizes: props.sizes
   }), /* @__PURE__ */ React.createElement("source", {
     srcset: srcSetToUse()
   })), props.aspectRatio && !(props.fitContent && ((_b = (_a = props.builderBlock) == null ? void 0 : _a.children) == null ? void 0 : _b.length)) ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "builder-image-sizer div-4c804184-2",
+    className: "builder-image-sizer div-95472e7c-2",
     style: {
       paddingTop: props.aspectRatio * 100 + "%"
     }
   })) : null, ((_d = (_c = props.builderBlock) == null ? void 0 : _c.children) == null ? void 0 : _d.length) && props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.children) : null, !props.fitContent ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    className: "div-4c804184-3"
-  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.div-4c804184 { 
-position: relative; }.img-4c804184 { 
+    className: "div-95472e7c-3"
+  }, props.children)) : null), /* @__PURE__ */ React.createElement("style", null, `.div-95472e7c { 
+position: relative; }.img-95472e7c { 
 opacity: 1;
 transition: opacity 0.2s ease-in-out;
 position: absolute;
 height: 100%;
 width: 100%;
 top: 0px;
-left: 0px; }.div-4c804184-2 { 
+left: 0px; }.div-95472e7c-2 { 
 width: 100%;
 pointer-events: none;
-font-size: 0; }.div-4c804184-3 { 
+font-size: 0; }.div-95472e7c-3 { 
 display: flex;
 flex-direction: column;
 align-items: stretch;

package/src/blocks/symbol/symbol.js

@@ -20,7 +20,7 @@ var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
 import RenderContent from "../../components/render-content/render-content.js";
-import BuilderContext from "../../context/builder.context";
+import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
 function Symbol(props) {
   var _a, _b, _c, _d, _e, _f, _g, _h;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import BuilderContext from "../../context/builder.context";
+import BuilderContext from "../../context/builder.context.js";
 import RenderBlock from "./render-block.js";
 function RenderRepeatedBlock(props) {
   return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {

package/src/components/render-blocks.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { useContext } from "react";
-import BuilderContext from "../context/builder.context";
+import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
 import BlockStyles from "./render-block/block-styles.js";
 import RenderBlock from "./render-block/render-block.js";

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

@@ -41,7 +41,7 @@ import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
-import BuilderContext from "../../context/builder.context";
+import BuilderContext from "../../context/builder.context.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { getFetch } from "../../functions/get-fetch.js";

package/src/constants/builder-registered-components.js

@@ -15,25 +15,25 @@ var __spreadValues = (a, b) => {
   return a;
 };
 import { default as Button } from "../blocks/button/button.js";
-import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
 import { default as Columns } from "../blocks/columns/columns.js";
-import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
-import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
+import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info.js";
+import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info.js";
 import { default as Fragment } from "../blocks/fragment/fragment.js";
-import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
 import { default as Image } from "../blocks/image/image.js";
-import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
 import { default as Section } from "../blocks/section/section.js";
-import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
 import { default as Symbol } from "../blocks/symbol/symbol.js";
-import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
 import { default as Text } from "../blocks/text/text.js";
-import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
+import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
 import { default as Video } from "../blocks/video/video.js";
-import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
+import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
 import { default as embed } from "../blocks/embed/embed.js";
 import { default as Img } from "../blocks/img/img.js";
-import { componentInfo as imgComponentInfo } from "../blocks/img/component-info";
+import { componentInfo as imgComponentInfo } from "../blocks/img/component-info.js";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),

package/src/functions/track.js

@@ -29,6 +29,26 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 import { TARGET } from "../constants/target.js";
 import { getSessionId } from "../helpers/sessionId.js";
 import { getVisitorId } from "../helpers/visitorId.js";
@@ -66,24 +86,28 @@ const createEvent = (_a) => {
   };
 };
 function track(eventProps) {
-  if (!eventProps.canTrack) {
-    return;
-  }
-  if (isEditing()) {
-    return;
-  }
-  if (!(isBrowser() || TARGET === "reactNative")) {
-    return;
-  }
-  return fetch(`https://builder.io/api/v1/track`, {
-    method: "POST",
-    body: JSON.stringify({
-      events: [createEvent(eventProps)]
-    }),
-    headers: {
-      "content-type": "application/json"
-    },
-    mode: "cors"
+  return __async(this, null, function* () {
+    if (!eventProps.canTrack) {
+      return;
+    }
+    if (isEditing()) {
+      return;
+    }
+    if (!(isBrowser() || TARGET === "reactNative")) {
+      return;
+    }
+    return fetch(`https://builder.io/api/v1/track`, {
+      method: "POST",
+      body: JSON.stringify({
+        events: [createEvent(eventProps)]
+      }),
+      headers: {
+        "content-type": "application/json"
+      },
+      mode: "cors"
+    }).catch((err) => {
+      console.error("Failed to track: ", err);
+    });
   });
 }
 export {

package/src/helpers/css.js

@@ -1,4 +1,4 @@
-import { camelToKebabCase } from "../functions/camel-to-kebab-case";
+import { camelToKebabCase } from "../functions/camel-to-kebab-case.js";
 const convertStyleMaptoCSS = (style) => {
   const cssProps = Object.entries(style).map(([key, value]) => {
     if (typeof value === "string") {

package/src/helpers/sessionId.js

@@ -1,6 +1,6 @@
-import { getCookie, setCookie } from "./cookie";
-import { checkIsDefined } from "./nullable";
-import { uuid } from "./uuid";
+import { getCookie, setCookie } from "./cookie.js";
+import { checkIsDefined } from "./nullable.js";
+import { uuid } from "./uuid.js";
 const SESSION_LOCAL_STORAGE_KEY = "builderSessionId";
 const getSessionId = ({ canTrack }) => {
   if (!canTrack) {

package/src/helpers/visitorId.js

@@ -1,6 +1,6 @@
-import { getLocalStorageItem, setLocalStorageItem } from "./localStorage";
-import { checkIsDefined } from "./nullable";
-import { uuid } from "./uuid";
+import { getLocalStorageItem, setLocalStorageItem } from "./localStorage.js";
+import { checkIsDefined } from "./nullable.js";
+import { uuid } from "./uuid.js";
 const VISITOR_LOCAL_STORAGE_KEY = "builderVisitorId";
 const getVisitorId = ({ canTrack }) => {
   if (!canTrack) {