@builder.io/sdk-react 0.1.2 → 0.1.4

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

@@ -1,24 +1,5 @@
-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;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import * as React from "react";
-import { useState, useRef, useEffect } from "react";
+import { useState, useContext, useRef, useEffect } from "react";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import { evaluate } from "../../functions/evaluate.js";
@@ -29,207 +10,283 @@ import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import {
   components,
-  createRegisterComponentMessage
+  createRegisterComponentMessage,
 } from "../../functions/register-component.js";
 import { _track } from "../../functions/track.js";
-import RenderBlocks from "../render-blocks.jsx";
-import RenderContentStyles from "./components/render-styles.jsx";
+import RenderBlocks from "../render-blocks.js";
+import RenderContentStyles from "./components/render-styles.js";
 import BuilderContext from "../../context/builder.context.js";
 import {
   registerInsertMenu,
-  setupBrowserForEditing
+  setupBrowserForEditing,
 } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
-function RenderContent(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+
+export default function RenderContent(props) {
   const elementRef = useRef(null);
   const [forceReRenderCount, setForceReRenderCount] = useState(() => 0);
+
   const [overrideContent, setOverrideContent] = useState(() => null);
+
   function useContent() {
-    var _a2, _b2, _c2, _d2, _e2;
     if (!props.content && !overrideContent) {
-      return void 0;
+      return undefined;
     }
-    const mergedContent = __spreadProps(__spreadValues(__spreadValues({}, props.content), overrideContent), {
-      data: __spreadValues(__spreadValues(__spreadValues({}, (_a2 = props.content) == null ? void 0 : _a2.data), props.data), overrideContent == null ? void 0 : overrideContent.data),
-      meta: __spreadProps(__spreadValues(__spreadValues({}, (_b2 = props.content) == null ? void 0 : _b2.meta), overrideContent == null ? void 0 : overrideContent.meta), {
-        breakpoints: useBreakpoints || ((_c2 = overrideContent == null ? void 0 : overrideContent.meta) == null ? void 0 : _c2.breakpoints) || ((_e2 = (_d2 = props.content) == null ? void 0 : _d2.meta) == null ? void 0 : _e2.breakpoints)
-      })
-    });
+    const mergedContent = {
+      ...props.content,
+      ...overrideContent,
+      data: {
+        ...props.content?.data,
+        ...props.data,
+        ...overrideContent?.data,
+      },
+      meta: {
+        ...props.content?.meta,
+        ...overrideContent?.meta,
+        breakpoints:
+          useBreakpoints ||
+          overrideContent?.meta?.breakpoints ||
+          props.content?.meta?.breakpoints,
+      },
+    };
     return mergedContent;
   }
+
   const [update, setUpdate] = useState(() => 0);
+
   const [useBreakpoints, setUseBreakpoints] = useState(() => null);
+
   function canTrackToUse() {
     return checkIsDefined(props.canTrack) ? props.canTrack : true;
   }
+
   const [overrideState, setOverrideState] = useState(() => ({}));
+
   function contentState() {
-    var _a2, _b2;
-    return __spreadValues(__spreadValues(__spreadValues(__spreadValues({}, (_b2 = (_a2 = props.content) == null ? void 0 : _a2.data) == null ? void 0 : _b2.state), props.data), props.locale ? {
-      locale: props.locale
-    } : {}), overrideState);
+    return {
+      ...props.content?.data?.state,
+      ...props.data,
+      ...(props.locale
+        ? {
+            locale: props.locale,
+          }
+        : {}),
+      ...overrideState,
+    };
   }
+
   function contextContext() {
     return props.context || {};
   }
+
   function allRegisteredComponents() {
     const allComponentsArray = [
       ...getDefaultRegisteredComponents(),
+      // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
       ...components,
-      ...props.customComponents || []
+      ...(props.customComponents || []),
     ];
-    const allComponents = allComponentsArray.reduce((acc, curr) => __spreadProps(__spreadValues({}, acc), {
-      [curr.name]: curr
-    }), {});
+    const allComponents = allComponentsArray.reduce(
+      (acc, curr) => ({
+        ...acc,
+        [curr.name]: curr,
+      }),
+      {}
+    );
     return allComponents;
   }
+
   function processMessage(event) {
-    var _a2;
     const { data } = event;
     if (data) {
       switch (data.type) {
         case "builder.configureSdk": {
           const messageContent = data.data;
           const { breakpoints, contentId } = messageContent;
-          if (!contentId || contentId !== ((_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.id)) {
+          if (!contentId || contentId !== useContent?.()?.id) {
             return;
           }
           setUseBreakpoints(breakpoints);
-          setForceReRenderCount(forceReRenderCount + 1);
+          setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
           break;
         }
         case "builder.contentUpdate": {
           const messageContent = data.data;
-          const key = messageContent.key || messageContent.alias || messageContent.entry || messageContent.modelName;
+          const key =
+            messageContent.key ||
+            messageContent.alias ||
+            messageContent.entry ||
+            messageContent.modelName;
           const contentData = messageContent.data;
           if (key === props.model) {
             setOverrideContent(contentData);
-            setForceReRenderCount(forceReRenderCount + 1);
+            setForceReRenderCount(forceReRenderCount + 1); // This is a hack to force Qwik to re-render.
           }
+
           break;
         }
         case "builder.patchUpdates": {
+          // TODO
           break;
         }
       }
     }
   }
+
   function evaluateJsCode() {
-    var _a2, _b2;
-    const jsCode = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.jsCode;
+    // run any dynamic JS code attached to content
+    const jsCode = useContent?.()?.data?.jsCode;
     if (jsCode) {
       evaluate({
         code: jsCode,
         context: contextContext(),
-        state: contentState()
+        state: contentState(),
       });
     }
   }
+
   function httpReqsData() {
     return {};
   }
+
   function onClick(_event) {
-    var _a2, _b2;
     if (useContent()) {
-      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;
+      const variationId = useContent?.()?.testVariationId;
+      const contentId = useContent?.()?.id;
       _track({
         type: "click",
         canTrack: canTrackToUse(),
         contentId,
         apiKey: props.apiKey,
-        variationId: variationId !== contentId ? variationId : void 0
+        variationId: variationId !== contentId ? variationId : undefined,
       });
     }
   }
+
   function evalExpression(expression) {
-    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
-      code: group,
-      context: contextContext(),
-      state: contentState()
-    }));
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+      evaluate({
+        code: group,
+        context: contextContext(),
+        state: contentState(),
+      })
+    );
   }
+
   function handleRequest({ url, key }) {
-    fetch(url).then((response) => response.json()).then((json) => {
-      const newOverrideState = __spreadProps(__spreadValues({}, overrideState), {
-        [key]: json
+    fetch(url)
+      .then((response) => response.json())
+      .then((json) => {
+        const newOverrideState = {
+          ...overrideState,
+          [key]: json,
+        };
+        setOverrideState(newOverrideState);
+      })
+      .catch((err) => {
+        console.log("error fetching dynamic data", url, err);
       });
-      setOverrideState(newOverrideState);
-    }).catch((err) => {
-      console.log("error fetching dynamic data", url, err);
-    });
   }
+
   function runHttpRequests() {
-    var _a2, _b2, _c2;
-    const requests = (_c2 = (_b2 = (_a2 = useContent == null ? void 0 : useContent()) == null ? void 0 : _a2.data) == null ? void 0 : _b2.httpRequests) != null ? _c2 : {};
+    const requests = useContent?.()?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
       if (url && (!httpReqsData()[key] || isEditing())) {
         const evaluatedUrl = evalExpression(url);
         handleRequest({
           url: evaluatedUrl,
-          key
+          key,
         });
       }
     });
   }
+
   function emitStateUpdate() {
     if (isEditing()) {
-      window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
-        detail: {
-          state: contentState(),
-          ref: {
-            name: props.model
-          }
-        }
-      }));
+      window.dispatchEvent(
+        new CustomEvent("builder:component:stateChange", {
+          detail: {
+            state: contentState(),
+            ref: {
+              name: props.model,
+            },
+          },
+        })
+      );
     }
   }
+
   function shouldRenderContentStyles() {
-    var _a2, _b2, _c2, _d2, _e2;
-    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");
+    return Boolean(
+      (useContent?.()?.data?.cssCode ||
+        useContent?.()?.data?.customFonts?.length) &&
+        TARGET !== "reactNative"
+    );
   }
+
   useEffect(() => {
-    var _a2, _b2;
     if (!props.apiKey) {
-      console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+      console.error(
+        "[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      );
     }
     if (isBrowser()) {
       if (isEditing()) {
         setForceReRenderCount(forceReRenderCount + 1);
         registerInsertMenu();
-        setupBrowserForEditing(__spreadValues(__spreadValues({}, props.locale ? {
-          locale: props.locale
-        } : {}), props.includeRefs ? {
-          includeRefs: props.includeRefs
-        } : {}));
-        Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
-          var _a3;
-          const message = createRegisterComponentMessage(registeredComponent);
-          (_a3 = window.parent) == null ? void 0 : _a3.postMessage(message, "*");
+        setupBrowserForEditing({
+          ...(props.locale
+            ? {
+                locale: props.locale,
+              }
+            : {}),
+          ...(props.includeRefs
+            ? {
+                includeRefs: props.includeRefs,
+              }
+            : {}),
         });
+        Object.values(allRegisteredComponents()).forEach(
+          (registeredComponent) => {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
+        );
         window.addEventListener("message", processMessage);
-        window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+        window.addEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
       }
       if (useContent()) {
-        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;
+        const variationId = useContent?.()?.testVariationId;
+        const contentId = useContent?.()?.id;
         _track({
           type: "impression",
           canTrack: canTrackToUse(),
           contentId,
           apiKey: props.apiKey,
-          variationId: variationId !== contentId ? variationId : void 0
+          variationId: variationId !== contentId ? variationId : undefined,
         });
       }
+
+      // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
-        if (props.model && searchParams.get("builder.preview") === props.model) {
-          const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
+        if (
+          props.model &&
+          searchParams.get("builder.preview") === props.model
+        ) {
+          const previewApiKey =
+            searchParams.get("apiKey") || searchParams.get("builder.space");
           if (previewApiKey) {
             getContent({
               model: props.model,
-              apiKey: previewApiKey
+              apiKey: previewApiKey,
             }).then((content) => {
               if (content) {
                 setOverrideContent(content);
@@ -243,54 +300,71 @@ function RenderContent(props) {
       emitStateUpdate();
     }
   }, []);
+
   useEffect(() => {
     evaluateJsCode();
-  }, [(_b = (_a = useContent == null ? void 0 : useContent()) == null ? void 0 : _a.data) == null ? void 0 : _b.jsCode, contentState()]);
+  }, [useContent?.()?.data?.jsCode, contentState()]);
   useEffect(() => {
     runHttpRequests();
-  }, [(_d = (_c = useContent == null ? void 0 : useContent()) == null ? void 0 : _c.data) == null ? void 0 : _d.httpRequests]);
+  }, [useContent?.()?.data?.httpRequests]);
   useEffect(() => {
     emitStateUpdate();
   }, [contentState()]);
+
   useEffect(() => {
     return () => {
       if (isBrowser()) {
         window.removeEventListener("message", processMessage);
-        window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+        window.removeEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
       }
     };
   }, []);
-  return /* @__PURE__ */ React.createElement(BuilderContext.Provider, {
-    value: {
-      get content() {
-        return useContent();
-      },
-      get state() {
-        return contentState();
-      },
-      get context() {
-        return contextContext();
-      },
-      get apiKey() {
-        return props.apiKey;
-      },
-      get registeredComponents() {
-        return allRegisteredComponents();
-      }
-    }
-  }, useContent() ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
-    ref: elementRef,
-    onClick: (event) => onClick(event),
-    "builder-content-id": (_e = useContent == null ? void 0 : useContent()) == null ? void 0 : _e.id,
-    "builder-model": props.model
-  }, shouldRenderContentStyles() ? /* @__PURE__ */ React.createElement(RenderContentStyles, {
-    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: (_k = (_j = useContent == null ? void 0 : useContent()) == null ? void 0 : _j.data) == null ? void 0 : _k.blocks,
-    key: forceReRenderCount
-  }))) : null);
+
+  return (
+    <BuilderContext.Provider
+      value={{
+        get content() {
+          return useContent();
+        },
+        get state() {
+          return contentState();
+        },
+        get context() {
+          return contextContext();
+        },
+        get apiKey() {
+          return props.apiKey;
+        },
+        get registeredComponents() {
+          return allRegisteredComponents();
+        },
+      }}
+    >
+      {useContent() ? (
+        <>
+          <div
+            ref={elementRef}
+            onClick={(event) => onClick(event)}
+            builder-content-id={useContent?.()?.id}
+            builder-model={props.model}
+          >
+            {shouldRenderContentStyles() ? (
+              <RenderContentStyles
+                cssCode={useContent?.()?.data?.cssCode}
+                customFonts={useContent?.()?.data?.customFonts}
+              />
+            ) : null}
+
+            <RenderBlocks
+              blocks={useContent?.()?.data?.blocks}
+              key={forceReRenderCount}
+            />
+          </div>
+        </>
+      ) : null}
+    </BuilderContext.Provider>
+  );
 }
-export {
-  RenderContent as default
-};

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

@@ -1,17 +1,28 @@
 import * as React from "react";
 import { TARGET } from "../constants/target.js";
-function RenderInlinedStyles(props) {
+
+export default function RenderInlinedStyles(props) {
   function injectedStyleScript() {
     return `<${tag()}>${props.styles}</${tag()}>`;
   }
+
   function tag() {
-    return "style";
+    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+    return "sty" + "le";
   }
+
   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(TagRef, null, props.styles));
+
+  return (
+    <>
+      {TARGET === "svelte" ? (
+        <>
+          <div dangerouslySetInnerHTML={{ __html: injectedStyleScript() }} />
+        </>
+      ) : (
+        <TagRef>{props.styles}</TagRef>
+      )}
+    </>
+  );
 }
-export {
-  RenderInlinedStyles as default
-};

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

@@ -14,27 +14,27 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { default as Button } from "../blocks/button/button.jsx";
+import { default as Button } from "../blocks/button/button.js";
 import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info.js";
-import { default as Columns } from "../blocks/columns/columns.jsx";
+import { default as Columns } from "../blocks/columns/columns.js";
 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.jsx";
+import { default as Fragment } from "../blocks/fragment/fragment.js";
 import { componentInfo as imageComponentInfo } from "../blocks/image/component-info.js";
-import { default as Image } from "../blocks/image/image.jsx";
+import { default as Image } from "../blocks/image/image.js";
 import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info.js";
-import { default as Section } from "../blocks/section/section.jsx";
+import { default as Section } from "../blocks/section/section.js";
 import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info.js";
-import { default as Symbol } from "../blocks/symbol/symbol.jsx";
+import { default as Symbol } from "../blocks/symbol/symbol.js";
 import { componentInfo as textComponentInfo } from "../blocks/text/component-info.js";
-import { default as Text } from "../blocks/text/text.jsx";
+import { default as Text } from "../blocks/text/text.js";
 import { componentInfo as videoComponentInfo } from "../blocks/video/component-info.js";
-import { default as Video } from "../blocks/video/video.jsx";
+import { default as Video } from "../blocks/video/video.js";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info.js";
-import { default as embed } from "../blocks/embed/embed.jsx";
-import { default as Img } from "../blocks/img/img.jsx";
+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.js";
-import { default as customCode } from "../blocks/custom-code/custom-code.jsx";
+import { default as customCode } from "../blocks/custom-code/custom-code.js";
 import { componentInfo as customCodeInfo } from "../blocks/custom-code/component-info.js";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),

package/src/index-helpers/blocks-exports.js

@@ -1,13 +1,13 @@
-import { default as default2 } from "../blocks/columns/columns.jsx";
-import { default as default3 } from "../blocks/image/image.jsx";
-import { default as default4 } from "../blocks/text/text.jsx";
-import { default as default5 } from "../blocks/video/video.jsx";
-import { default as default6 } from "../blocks/symbol/symbol.jsx";
-import { default as default7 } from "../blocks/button/button.jsx";
-import { default as default8 } from "../blocks/section/section.jsx";
-import { default as default9 } from "../blocks/fragment/fragment.jsx";
-import { default as default10 } from "../components/render-content/render-content.jsx";
-import { default as default11 } from "../components/render-blocks.jsx";
+import { default as default2 } from "../blocks/columns/columns.js";
+import { default as default3 } from "../blocks/image/image.js";
+import { default as default4 } from "../blocks/text/text.js";
+import { default as default5 } from "../blocks/video/video.js";
+import { default as default6 } from "../blocks/symbol/symbol.js";
+import { default as default7 } from "../blocks/button/button.js";
+import { default as default8 } from "../blocks/section/section.js";
+import { default as default9 } from "../blocks/fragment/fragment.js";
+import { default as default10 } from "../components/render-content/render-content.js";
+import { default as default11 } from "../components/render-blocks.js";
 export {
   default7 as Button,
   default2 as Columns,

package/tsconfig.base.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react"
+  }
+}

package/tsconfig.react.json

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

package/tsconfig.rsc.json

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