@builder.io/sdk-react 0.2.2 → 0.2.3-1

package/package.json

@@ -1,23 +1,22 @@
 {
   "name": "@builder.io/sdk-react",
   "description": "Builder.io SDK for React",
-  "version": "0.2.2",
-  "main": "src/index.js",
+  "version": "0.2.3-1",
   "type": "module",
   "exports": {
     ".": {
-      "import": "./dist/react/index.js",
-      "require": "./dist/react/index.js"
+      "import": "./dist/react/esm/index.js",
+      "require": "./dist/react/cjs/index.cjs"
     },
-    "./rsc": {
-      "import": "./dist/rsc/index.js",
-      "require": "./dist/rsc/index.js"
+    "./get-content": {
+      "import": "./dist/react/esm/functions/get-content/index.js",
+      "require": "./dist/react/cjs/functions/get-content/index.cjs"
     }
   },
   "scripts": {
-    "build:react": "tsc -p ./tsconfig.react.json",
+    "build:react": "tsc -p ./tsconfig.react-cjs.json && tsc -p ./tsconfig.react-esm.json",
     "build:rsc": "tsc -p ./tsconfig.rsc.json",
-    "build": "yarn run build:react && yarn run build:rsc",
+    "build": "yarn run build:react",
     "release:patch": "yarn run build && npm version patch && npm publish",
     "release:minor": "yarn run build && npm version minor && npm publish",
     "release:dev": "yarn run build && npm version prerelease && npm publish --tag dev"

package/packages/react/src/blocks/BaseText.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";

package/packages/react/src/blocks/button/button.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function Button(props) {

package/packages/react/src/blocks/columns/columns.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useContext } from "react";
 import RenderBlocks from "../../components/render-blocks";

package/packages/react/src/blocks/custom-code/custom-code.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 

package/packages/react/src/blocks/embed/embed.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useRef, useEffect } from "react";
 import { isJsScript } from "./helpers.js";

package/packages/react/src/blocks/form/form.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useContext, useRef } from "react";
 import RenderBlock from "../../components/render-block/render-block";

package/packages/react/src/blocks/fragment/fragment.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function FragmentComponent(props) {

package/packages/react/src/blocks/image/image.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { getSrcSet } from "./image.helpers.js";
 

package/packages/react/src/blocks/img/img.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 

package/packages/react/src/blocks/input/input.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 

package/packages/react/src/blocks/raw-text/raw-text.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function RawText(props) {

package/packages/react/src/blocks/section/section.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function SectionComponent(props) {

package/packages/react/src/blocks/select/select.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { isEditing } from "../../functions/is-editing.js";
 

package/packages/react/src/blocks/submit-button/submit-button.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function SubmitButton(props) {

package/packages/react/src/blocks/symbol/symbol.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useContext, useEffect } from "react";
 import RenderContent from "../../components/render-content/render-content";

package/packages/react/src/blocks/text/text.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function Text(props) {

package/packages/react/src/blocks/textarea/textarea.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function Textarea(props) {

package/packages/react/src/blocks/video/video.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function Video(props) {

package/packages/react/src/components/render-block/block-styles.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import {
   getMaxWidthQueryForSize,

package/packages/react/src/components/render-block/render-block.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState } from "react";
 import { getBlockActions } from "../../functions/get-block-actions.js";

package/packages/react/src/components/render-block/render-component.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import BlockStyles from "./block-styles";
 import RenderBlock from "./render-block";

package/packages/react/src/components/render-block/render-repeated-block.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../../context/builder.context.js";

package/packages/react/src/components/render-blocks.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useContext } from "react";
 import BuilderContext from "../context/builder.context.js";

package/packages/react/src/components/render-content/builder-editing.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 
 function BuilderEditing(props) {

package/packages/react/src/components/render-content/components/render-styles.jsx

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState } from "react";
 import RenderInlinedStyles from "../../render-inlined-styles";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { useState, useContext, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";

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

@@ -1,3 +1,4 @@
+"use client";
 import * as React from "react";
 import { TARGET } from "../constants/target.js";
 

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

@@ -57,7 +57,7 @@ function getAllContent(options) {
       const res = yield fetch(url.href);
       const content = yield res.json();
       if ("status" in content && !("results" in content)) {
-        logger.error("Error fetching data. ", content, options);
+        logger.error("Error fetching data. ", { url, content, options });
         return content;
       }
       const canTrack = options.canTrack !== false;

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

@@ -57,7 +57,7 @@ function getAllContent(options) {
       const res = yield fetch(url.href);
       const content = yield res.json();
       if ("status" in content && !("results" in content)) {
-        logger.error("Error fetching data. ", content, options);
+        logger.error("Error fetching data. ", { url, content, options });
         return content;
       }
       const canTrack = options.canTrack !== false;

package/tsconfig.base.json

@@ -2,7 +2,11 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": false,
@@ -13,6 +17,7 @@
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "react"
+    "jsx": "react",
+    "declaration": true
   }
-}
+}

package/tsconfig.react-cjs.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist/react/cjs",
+    "module": "CommonJS",
+  },
+  "include": [
+    "./packages/react/src/**/*"
+  ]
+}

package/tsconfig.react-esm.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist/react/esm",
+    "module": "ESNext",
+  },
+  "include": [
+    "./packages/react/src/**/*"
+  ]
+}

package/dist/react/components/render-block/render-component-with-context.js

@@ -1,27 +0,0 @@
-import * as React from "react";
-import { useContext } from "react";
-import BuilderContext from "../../context/builder.context.js";
-import RenderComponent from "./render-component.js";
-export default function RenderComponentWithContext(props) {
-    return (React.createElement(BuilderContext.Provider, { value: {
-            get content() {
-                return props.context.content;
-            },
-            get state() {
-                return props.context.state;
-            },
-            get context() {
-                return props.context.context;
-            },
-            get apiKey() {
-                return props.context.apiKey;
-            },
-            get registeredComponents() {
-                return props.context.registeredComponents;
-            },
-            get inheritedStyles() {
-                return props.context.inheritedStyles;
-            },
-        } },
-        React.createElement(RenderComponent, { componentRef: props.componentRef, componentOptions: props.componentOptions, blockChildren: props.blockChildren, context: props.context })));
-}

package/dist/react/components/render-content-variants/helpers.js

@@ -1,98 +0,0 @@
-const variantScriptFn = function main(contentId, variants) {
-    console.log("Running variant script", JSON.stringify({ contentId, variants }));
-    if (!navigator.cookieEnabled) {
-        console.log("Cookies are disabled, skipping variant script");
-        return;
-    }
-    const templateSelectorById = (id) => `template[data-template-variant-id="${id}"]`;
-    function removeTemplates() {
-        console.log("Removing variants");
-        variants.forEach((template) => {
-            const el2 = document.querySelector(templateSelectorById(template.id));
-            if (el2) {
-                console.log("Removing variant", template.id);
-                el2.remove();
-            }
-        });
-        const el = document.getElementById(`variants-script-${contentId}`);
-        if (el) {
-            console.log("Removing variant script");
-            el.remove();
-        }
-    }
-    if (typeof document.createElement("template").content === "undefined") {
-        console.log("Template polyfill not found, skipping variant script");
-        removeTemplates();
-        return;
-    }
-    function setCookie(name, value, days) {
-        let expires = "";
-        if (days) {
-            const date = new Date();
-            date.setTime(date.getTime() + days * 24 * 60 * 60 * 1e3);
-            expires = "; expires=" + date.toUTCString();
-        }
-        document.cookie = name + "=" + (value || "") + expires + "; path=/; Secure; SameSite=None";
-    }
-    function getCookie(name) {
-        const nameEQ = name + "=";
-        const ca = document.cookie.split(";");
-        for (let i = 0; i < ca.length; i++) {
-            let c = ca[i];
-            while (c.charAt(0) == " ")
-                c = c.substring(1, c.length);
-            if (c.indexOf(nameEQ) == 0)
-                return c.substring(nameEQ.length, c.length);
-        }
-        return null;
-    }
-    function getAndSetVariantId() {
-        const cookieName = `builder.tests.${contentId}`;
-        const variantInCookie = getCookie(cookieName);
-        const availableIDs = variants.map((vr) => vr.id).concat(contentId);
-        if (variantInCookie && availableIDs.indexOf(variantInCookie) > -1) {
-            return variantInCookie;
-        }
-        let n = 0;
-        const random = Math.random();
-        for (let i = 0; i < variants.length; i++) {
-            const variant = variants[i];
-            const testRatio = variant.testRatio;
-            n += testRatio;
-            if (random < n) {
-                setCookie(cookieName, variant.id);
-                return variant.id;
-            }
-        }
-        setCookie(cookieName, contentId);
-        return contentId;
-    }
-    const variantId = getAndSetVariantId();
-    if (variantId !== contentId) {
-        console.log("Variant found", variantId);
-        const winningTemplate = document.querySelector(templateSelectorById(variantId));
-        console.log("winningTemplate", winningTemplate);
-        if (!winningTemplate) {
-            console.log("No template found for variant", variantId);
-            console.log("selector: ", templateSelectorById(variantId));
-            return;
-        }
-        const templatesParent = winningTemplate.parentNode;
-        if (templatesParent) {
-            templatesParent.replaceChild(winningTemplate.content.firstElementChild, winningTemplate);
-        }
-    }
-    else if (variants.length > 0) {
-        console.log("No variant found, removing all variants");
-    }
-    removeTemplates();
-    console.log("Variant script complete");
-};
-const getVariantsScriptString = (variants, contentId) => {
-    const fnStr = variantScriptFn.toString().replace(/\s+/g, " ");
-    return `
-  ${fnStr}
-  main("${contentId}", ${JSON.stringify(variants)})
-  `;
-};
-export { getVariantsScriptString };

package/dist/react/components/render-content-variants/render-content-variants.js

@@ -1,45 +0,0 @@
-import * as React from "react";
-import { useState, useEffect } from "react";
-import { isBrowser } from "../../functions/is-browser";
-import { getVariantsScriptString } from "./helpers";
-import RenderContent from "../render-content/render-content";
-import { checkIsDefined } from "../../helpers/nullable";
-import { handleABTestingSync } from "../../helpers/ab-tests";
-import { TARGET } from "../../constants/target";
-function RenderContentVariants(props) {
-    const [variantScriptStr, setVariantScriptStr] = useState(() => getVariantsScriptString(Object.values(props.content?.variations || {}).map((value) => ({
-        id: value.id,
-        testRatio: value.testRatio,
-    })), props.content?.id || ""));
-    const [variants, setVariants] = useState(() => [
-        ...Object.values(props.content?.variations || {}),
-        props.content,
-    ]);
-    const [contentToUse, setContentToUse] = useState(() => ((isBrowser() && props.canTrack) || !isBrowser()) &&
-        Object.keys(props.content?.variations || {}).length > 0
-        ? undefined
-        : handleABTestingSync({
-            item: props.content,
-            canTrack: checkIsDefined(props.canTrack) ? props.canTrack : true,
-        }));
-    const [shouldRenderVariants, setShouldRenderVariants] = useState(() => ((isBrowser() && props.canTrack) || !isBrowser()) &&
-        Object.keys(props.content?.variations || {}).length > 0);
-    useEffect(() => {
-        if (TARGET === "svelte" && shouldRenderVariants) {
-            // get first template in loop
-            const templates = document.querySelectorAll(`template[data-template-variant-id="${variants[0]?.id}"]`);
-            const lastTemplate = templates[templates.length - 1];
-            // create and append script as sibling of template
-            const script = document.createElement("script");
-            script.id = `variants-script-${props.content?.id}`;
-            script.innerHTML = variantScriptStr;
-            lastTemplate?.parentNode?.append(script, lastTemplate);
-        }
-    }, []);
-    return (React.createElement(React.Fragment, null, shouldRenderVariants ? (React.createElement(React.Fragment, null,
-        variants?.map((variant) => (React.createElement("template", { key: variant?.id, "data-template-variant-id": variant?.id },
-            React.createElement(RenderContent, { content: variant, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents })))),
-        React.createElement("script", { id: `variants-script-${props.content?.id}`, dangerouslySetInnerHTML: { __html: variantScriptStr } }),
-        React.createElement(RenderContent, { content: contentToUse, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents }))) : (React.createElement(RenderContent, { content: contentToUse, apiKey: props.apiKey, apiVersion: props.apiVersion, canTrack: props.canTrack, customComponents: props.customComponents }))));
-}
-export default RenderContentVariants;

package/dist/react/functions/get-block-tag.js

@@ -1,4 +0,0 @@
-function getBlockTag(block) {
-    return block.tagName || "div";
-}
-export { getBlockTag };

package/tsconfig.react.json

@@ -1,7 +0,0 @@
-{
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "outDir": "dist/react"
-  },
-  "include": ["./packages/react/src/**/*"]
-}