@builder.io/sdk-react 0.4.5 → 0.5.0

package/dist/{sdk/components/render-content-variants → components/content-variants}/helpers.js

@@ -1,11 +1,11 @@
-import { TARGET } from '../../constants/target';
-import { isBrowser } from '../../functions/is-browser';
-export const getVariants = (content) => Object.values(content?.variations || {}).map((variant) => ({
+import { TARGET } from '../../constants/target.js';
+import { isBrowser } from '../../functions/is-browser.js';
+export const getVariants = (content) => Object.values(content?.variations || {}).map(variant => ({
     ...variant,
     testVariationId: variant.id,
-    id: content?.id,
+    id: content?.id
 }));
-export const checkShouldRunVariants = ({ canTrack, content, }) => {
+export const checkShouldRunVariants = ({ canTrack, content }) => {
     const hasVariants = getVariants(content).length > 0;
     /**
      * We cannot SSR in React-Native.
@@ -42,13 +42,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
                 date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
                 expires = '; expires=' + date.toUTCString();
             }
-            document.cookie =
-                name +
-                    '=' +
-                    (value || '') +
-                    expires +
-                    '; path=/' +
-                    '; Secure; SameSite=None';
+            document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';
         }
         function getCookie(name) {
             const nameEQ = name + '=';
@@ -64,7 +58,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         }
         const cookieName = `builder.tests.${contentId}`;
         const variantInCookie = getCookie(cookieName);
-        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
+        const availableIDs = variants.map(vr => vr.id).concat(contentId);
         /**
          * cookie already exists
          */
@@ -92,8 +86,7 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
         return contentId;
     }
     const winningVariantId = getAndSetVariantId();
-    const styleEl = document.currentScript
-        ?.previousElementSibling;
+    const styleEl = document.currentScript?.previousElementSibling;
     /**
      * For React to work, we need hydration to match SSR, so we completely remove this node and the styles tag.
      */
@@ -104,14 +97,12 @@ function bldrAbTest(contentId, variants, isHydrationTarget) {
     }
     else {
         /* update styles to hide all variants except the winning variant */
-        const newStyleStr = variants
-            .concat({ id: contentId })
-            .filter((variant) => variant.id !== winningVariantId)
-            .map((value) => {
+        const newStyleStr = variants.concat({
+            id: contentId
+        }).filter(variant => variant.id !== winningVariantId).map(value => {
             return `.variant-${value.id} {  display: none; }
         `;
-        })
-            .join('');
+        }).join('');
         styleEl.innerHTML = newStyleStr;
     }
 }
@@ -192,7 +183,7 @@ export const getVariantsScriptString = (variants, contentId) => {
     return `
   window.${AB_TEST_FN_NAME}("${contentId}",${JSON.stringify(variants)}, ${isHydrationTarget})`;
 };
-export const getRenderContentScriptString = ({ contentId, variationId, }) => {
+export const getRenderContentScriptString = ({ contentId, variationId }) => {
     return `
   window.${CONTENT_FN_NAME}("${variationId}", "${contentId}", ${isHydrationTarget})`;
 };

package/dist/{sdk/components → components}/inlined-script.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     scriptStr: string;
     id?: string;

package/dist/{sdk/components → components}/inlined-script.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 function InlinedScript(props) {
     return (React.createElement("script", { dangerouslySetInnerHTML: { __html: props.scriptStr }, id: props.id }));

package/dist/{sdk/components → components}/inlined-styles.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface Props {
     styles: string;
     id?: string;

package/dist/{sdk/components → components}/inlined-styles.js

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import * as React from "react";
 function InlinedStyles(props) {
     return (React.createElement("style", { dangerouslySetInnerHTML: { __html: props.styles }, id: props.id }));

package/dist/{sdk/constants → constants}/builder-registered-components.js

@@ -24,16 +24,37 @@ import { componentInfo as customCodeInfo } from '../blocks/custom-code/component
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
  */
-export const getDefaultRegisteredComponents = () => [
-    { component: Button, ...buttonComponentInfo },
-    { component: Columns, ...columnsComponentInfo },
-    { component: customCode, ...customCodeInfo },
-    { component: embed, ...embedComponentInfo },
-    { component: Fragment, ...fragmentComponentInfo },
-    { component: Image, ...imageComponentInfo },
-    { component: Img, ...imgComponentInfo },
-    { component: Section, ...sectionComponentInfo },
-    { component: Symbol, ...symbolComponentInfo },
-    { component: Text, ...textComponentInfo },
-    { component: Video, ...videoComponentInfo },
-];
+export const getDefaultRegisteredComponents = () => [{
+        component: Button,
+        ...buttonComponentInfo
+    }, {
+        component: Columns,
+        ...columnsComponentInfo
+    }, {
+        component: customCode,
+        ...customCodeInfo
+    }, {
+        component: embed,
+        ...embedComponentInfo
+    }, {
+        component: Fragment,
+        ...fragmentComponentInfo
+    }, {
+        component: Image,
+        ...imageComponentInfo
+    }, {
+        component: Img,
+        ...imgComponentInfo
+    }, {
+        component: Section,
+        ...sectionComponentInfo
+    }, {
+        component: Symbol,
+        ...symbolComponentInfo
+    }, {
+        component: Text,
+        ...textComponentInfo
+    }, {
+        component: Video,
+        ...videoComponentInfo
+    }];

package/dist/{sdk/constants → constants}/device-sizes.js

@@ -1,20 +1,20 @@
-import { fastClone } from '../functions/fast-clone';
+import { fastClone } from '../functions/fast-clone.js';
 const SIZES = {
     small: {
         min: 320,
         default: 321,
-        max: 640,
+        max: 640
     },
     medium: {
         min: 641,
         default: 642,
-        max: 991,
+        max: 991
     },
     large: {
         min: 990,
         default: 991,
-        max: 1200,
-    },
+        max: 1200
+    }
 };
 export const getMaxWidthQueryForSize = (size, sizeValues = SIZES) => `@media (max-width: ${sizeValues[size].max}px)`;
 export const getSizesForBreakpoints = ({ small, medium }) => {
@@ -26,19 +26,20 @@ export const getSizesForBreakpoints = ({ small, medium }) => {
     newSizes.small = {
         max: small,
         min: smallMin,
-        default: smallMin + 1,
+        default: smallMin + 1
     };
     const mediumMin = newSizes.small.max + 1;
     newSizes.medium = {
         max: medium,
         min: mediumMin,
-        default: mediumMin + 1,
+        default: mediumMin + 1
     };
     const largeMin = newSizes.medium.max + 1;
     newSizes.large = {
         max: 2000,
+        // TODO: decide upper limit
         min: largeMin,
-        default: largeMin + 1,
+        default: largeMin + 1
     };
     return newSizes;
 };

package/dist/constants/sdk-version.d.ts

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "0.5.0";

package/dist/constants/sdk-version.js

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.5.0";

package/dist/{sdk/context → context}/builder.context.js

@@ -7,6 +7,6 @@ export default createContext({
     rootState: {},
     apiKey: null,
     apiVersion: undefined,
-    registeredComponents: {},
+    componentInfos: {},
     inheritedStyles: {},
 });

package/dist/{sdk/context → context}/types.d.ts

@@ -30,6 +30,6 @@ export interface BuilderContextInterface {
     localState: BuilderRenderState | undefined;
     apiKey: string | null;
     apiVersion: ApiVersion | undefined;
-    registeredComponents: RegisteredComponents;
+    componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
 }

package/dist/functions/acorn_interpreter.d.ts

@@ -0,0 +1 @@
+export const j: {};