@builder.io/sdk-react 0.1.3 → 0.1.5

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

@@ -12,8 +12,8 @@ import {
   createRegisterComponentMessage,
 } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import RenderBlocks from "../render-blocks.js";
-import RenderContentStyles from "./components/render-styles.js";
+import RenderBlocks from "../render-blocks";
+import RenderContentStyles from "./components/render-styles";
 import builderContext from "../../context/builder.context.js";
 import {
   registerInsertMenu,
@@ -21,6 +21,10 @@ import {
 } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import {
+  getContentInitialValue,
+  getContextStateInitialValue,
+} from "./render-content.helpers.js";
 
 export default function RenderContent(props) {
   const _context = { ...props["_context"] };
@@ -28,45 +32,46 @@ export default function RenderContent(props) {
   const state = {
     forceReRenderCount: 0,
     overrideContent: null,
-    get useContent() {
-      if (!props.content && !state.overrideContent) {
-        return undefined;
-      }
-      return {
-        ...props.content,
-        ...state.overrideContent,
+    useContent: getContentInitialValue({
+      content: props.content,
+      data: props.data,
+    }),
+    mergeNewContent(newContent) {
+      state.useContent = {
+        ...state.useContent,
+        ...newContent,
         data: {
-          ...props.content?.data,
-          ...props.data,
-          ...state.overrideContent?.data,
+          ...state.useContent?.data,
+          ...newContent?.data,
         },
         meta: {
-          ...props.content?.meta,
-          ...state.overrideContent?.meta,
+          ...state.useContent?.meta,
+          ...newContent?.meta,
           breakpoints:
-            state.useBreakpoints ||
-            state.overrideContent?.meta?.breakpoints ||
-            props.content?.meta?.breakpoints,
+            newContent?.meta?.breakpoints ||
+            state.useContent?.meta?.breakpoints,
+        },
+      };
+    },
+    setBreakpoints(breakpoints) {
+      state.useContent = {
+        ...state.useContent,
+        meta: {
+          ...state.useContent?.meta,
+          breakpoints,
         },
       };
     },
     update: 0,
-    useBreakpoints: null,
     canTrackToUse: checkIsDefined(props.canTrack) ? props.canTrack : true,
-    overrideState: {},
-    get contentState() {
-      return {
-        ...props.content?.data?.state,
-        ...props.data,
-        ...(props.locale
-          ? {
-              locale: props.locale,
-            }
-          : {}),
-        ...state.overrideState,
-      };
+    contentState: getContextStateInitialValue({
+      content: props.content,
+      data: props.data,
+      locale: props.locale,
+    }),
+    setContextState(newState) {
+      state.contentState = newState;
     },
-    contextContext: props.context || {},
     allRegisteredComponents: [
       ...getDefaultRegisteredComponents(),
       // While this `components` object is deprecated, we must maintain support for it.
@@ -93,7 +98,9 @@ export default function RenderContent(props) {
             if (!contentId || contentId !== state.useContent?.id) {
               return;
             }
-            state.useBreakpoints = breakpoints;
+            if (breakpoints) {
+              state.setBreakpoints(breakpoints);
+            }
             state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
             break;
           }
@@ -106,7 +113,7 @@ export default function RenderContent(props) {
               messageContent.modelName;
             const contentData = messageContent.data;
             if (key === props.model) {
-              state.overrideContent = contentData;
+              state.mergeNewContent(contentData);
               state.forceReRenderCount = state.forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
             }
 
@@ -125,7 +132,7 @@ export default function RenderContent(props) {
       if (jsCode) {
         evaluate({
           code: jsCode,
-          context: state.contextContext,
+          context: props.context || {},
           state: state.contentState,
         });
       }
@@ -154,7 +161,7 @@ export default function RenderContent(props) {
       return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
         evaluate({
           code: group,
-          context: state.contextContext,
+          context: props.context || {},
           state: state.contentState,
         })
       );
@@ -163,11 +170,11 @@ export default function RenderContent(props) {
       fetch(url)
         .then((response) => response.json())
         .then((json) => {
-          const newOverrideState = {
-            ...state.overrideState,
+          const newState = {
+            ...state.contentState,
             [key]: json,
           };
-          state.overrideState = newOverrideState;
+          state.setContextState(newState);
         })
         .catch((err) => {
           console.log("error fetching dynamic data", url, err);
@@ -211,7 +218,8 @@ export default function RenderContent(props) {
   _context.builderContext = {
     content: state.useContent,
     state: state.contentState,
-    context: state.contextContext,
+    setState: state.setContextState,
+    context: props.context || {},
     apiKey: props.apiKey,
     registeredComponents: state.allRegisteredComponents,
   };
@@ -226,6 +234,7 @@ export default function RenderContent(props) {
           >
             {state.shouldRenderContentStyles ? (
               <RenderContentStyles
+                contentId={state.useContent?.id}
                 cssCode={state.useContent?.data?.cssCode}
                 customFonts={state.useContent?.data?.customFonts}
                 _context={_context}

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

@@ -19,11 +19,9 @@ export default function RenderInlinedStyles(props) {
 
   return (
     <>
-      {TARGET === "svelte" ? (
+      {TARGET === "svelte" || TARGET === "qwik" ? (
         <>
-          <div
-            dangerouslySetInnerHTML={{ __html: state.injectedStyleScript }}
-          />
+          <TagRef dangerouslySetInnerHTML={{ __html: props.styles }} />
         </>
       ) : (
         <TagRef>{props.styles}</TagRef>

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

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

package/packages/rsc/src/context/builder.context.js

@@ -2,6 +2,8 @@ var stdin_default = {
   content: null,
   context: {},
   state: {},
+  setState() {
+  },
   apiKey: null,
   registeredComponents: {},
   inheritedStyles: {}

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

@@ -1,22 +1,22 @@
-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";
+import { default as default2 } from "../blocks/button/button";
+import { default as default3 } from "../blocks/columns/columns";
+import { default as default4 } from "../blocks/fragment/fragment";
+import { default as default5 } from "../blocks/image/image";
+import { default as default6 } from "../components/render-blocks";
+import { default as default7 } from "../components/render-content/render-content";
+import { default as default8 } from "../blocks/section/section";
+import { default as default9 } from "../blocks/symbol/symbol";
+import { default as default10 } from "../blocks/text/text";
+import { default as default11 } from "../blocks/video/video";
 export {
-  default7 as Button,
-  default2 as Columns,
-  default9 as Fragment,
-  default3 as Image,
-  default11 as RenderBlocks,
-  default10 as RenderContent,
+  default2 as Button,
+  default3 as Columns,
+  default4 as Fragment,
+  default5 as Image,
+  default6 as RenderBlocks,
+  default7 as RenderContent,
   default8 as Section,
-  default6 as Symbol,
-  default4 as Text,
-  default5 as Video
+  default9 as Symbol,
+  default10 as Text,
+  default11 as Video
 };

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

@@ -1,10 +0,0 @@
-import * as React from "react";
-import BuilderContext from "../context/builder.context.js";
-
-export default function BaseText(props) {
-  const _context = { ...props["_context"] };
-
-  const builderContext = _context["BuilderContext"];
-
-  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
-}

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

@@ -1,29 +0,0 @@
-import * as React from "react";
-
-export default function Button(props) {
-  const _context = { ...props["_context"] };
-
-  return (
-    <>
-      {props.link ? (
-        <>
-          <a
-            role="button"
-            {...props.attributes}
-            href={props.link}
-            target={props.openLinkInNewTab ? "_blank" : undefined}
-          >
-            {props.text}
-          </a>
-        </>
-      ) : (
-        <button className="button-12870b9c" {...props.attributes}>
-          {props.text}
-        </button>
-      )}
-      <style>{`.button-12870b9c {
-all: unset;
-}`}</style>
-    </>
-  );
-}

package/packages/_rsc/src/blocks/button/component-info.js

@@ -1,41 +0,0 @@
-const componentInfo = {
-  name: "Core:Button",
-  builtIn: true,
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
-  defaultStyles: {
-    appearance: "none",
-    paddingTop: "15px",
-    paddingBottom: "15px",
-    paddingLeft: "25px",
-    paddingRight: "25px",
-    backgroundColor: "#000000",
-    color: "white",
-    borderRadius: "4px",
-    textAlign: "center",
-    cursor: "pointer"
-  },
-  inputs: [
-    {
-      name: "text",
-      type: "text",
-      defaultValue: "Click me!",
-      bubble: true
-    },
-    {
-      name: "link",
-      type: "url",
-      bubble: true
-    },
-    {
-      name: "openLinkInNewTab",
-      type: "boolean",
-      defaultValue: false,
-      friendlyName: "Open link in new tab"
-    }
-  ],
-  static: true,
-  noWrap: true
-};
-export {
-  componentInfo
-};

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

@@ -1,172 +0,0 @@
-import * as React from "react";
-import RenderBlocks from "../../components/render-blocks.js";
-import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import RenderInlinedStyles from "../../components/render-inlined-styles.js";
-import { TARGET } from "../../constants/target.js";
-import { convertStyleMapToCSS } from "../../helpers/css";
-
-export default function Columns(props) {
-  const _context = { ...props["_context"] };
-
-  const state = {
-    getGutterSize() {
-      return typeof props.space === "number" ? props.space || 0 : 20;
-    },
-    getColumns() {
-      return props.columns || [];
-    },
-    getWidth(index) {
-      const columns = state.getColumns();
-      return columns[index]?.width || 100 / columns.length;
-    },
-    getColumnCssWidth(index) {
-      const columns = state.getColumns();
-      const gutterSize = state.getGutterSize();
-      const subtractWidth =
-        (gutterSize * (columns.length - 1)) / columns.length;
-      return `calc(${state.getWidth(index)}% - ${subtractWidth}px)`;
-    },
-    maybeApplyForTablet(prop) {
-      const _stackColumnsAt = props.stackColumnsAt || "tablet";
-      return _stackColumnsAt === "tablet" ? prop : "inherit";
-    },
-    get columnsCssVars() {
-      const flexDir =
-        props.stackColumnsAt === "never"
-          ? "inherit"
-          : props.reverseColumnsWhenStacked
-          ? "column-reverse"
-          : "column";
-      return {
-        "--flex-dir": flexDir,
-        "--flex-dir-tablet": state.maybeApplyForTablet(flexDir),
-      };
-    },
-    get columnCssVars() {
-      const width = "100%";
-      const marginLeft = "0";
-      return {
-        "--column-width": width,
-        "--column-margin-left": marginLeft,
-        "--column-width-tablet": state.maybeApplyForTablet(width),
-        "--column-margin-left-tablet": state.maybeApplyForTablet(marginLeft),
-      };
-    },
-    getWidthForBreakpointSize(size) {
-      const breakpointSizes = getSizesForBreakpoints(
-        props.customBreakpoints || {}
-      );
-      return breakpointSizes[size].max;
-    },
-    get columnStyleObjects() {
-      return {
-        columns: {
-          small: {
-            flexDirection: "var(--flex-dir)",
-            alignItems: "stretch",
-          },
-          medium: {
-            flexDirection: "var(--flex-dir-tablet)",
-            alignItems: "stretch",
-          },
-        },
-        column: {
-          small: {
-            width: "var(--column-width) !important",
-            marginLeft: "var(--column-margin-left) !important",
-          },
-          medium: {
-            width: "var(--column-width-tablet) !important",
-            marginLeft: "var(--column-margin-left-tablet) !important",
-          },
-        },
-      };
-    },
-    get columnsStyles() {
-      return `
-      @media (max-width: ${state.getWidthForBreakpointSize("medium")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(state.columnStyleObjects.columns.medium)}
-        }
-
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(state.columnStyleObjects.column.medium)}
-        }
-      }
-
-      @media (max-width: ${state.getWidthForBreakpointSize("small")}px) {
-        .${props.builderBlock.id}-breakpoints {
-          ${convertStyleMapToCSS(state.columnStyleObjects.columns.small)}
-        }
-
-        .${props.builderBlock.id}-breakpoints > .builder-column {
-          ${convertStyleMapToCSS(state.columnStyleObjects.column.small)}
-        }
-      },
-    `;
-    },
-    get reactNativeColumnsStyles() {
-      return this.columnStyleObjects.columns.small;
-    },
-    get reactNativeColumnStyles() {
-      return this.columnStyleObjects.column.small;
-    },
-  };
-
-  return (
-    <>
-      <div
-        className={
-          `builder-columns ${props.builderBlock.id}-breakpoints` +
-          " div-540739f0"
-        }
-        style={{
-          ...(TARGET === "reactNative" ? state.reactNativeColumnsStyles : {}),
-          ...state.columnsCssVars,
-        }}
-      >
-        {TARGET !== "reactNative" ? (
-          <>
-            <RenderInlinedStyles
-              styles={state.columnsStyles}
-              _context={_context}
-            />
-          </>
-        ) : null}
-
-        {props.columns?.map((column, index) => (
-          <div
-            className="builder-column div-540739f0-2"
-            style={{
-              width: state.getColumnCssWidth(index),
-              marginLeft: `${index === 0 ? 0 : state.getGutterSize()}px`,
-              ...(TARGET === "reactNative"
-                ? state.reactNativeColumnStyles
-                : {}),
-              ...state.columnCssVars,
-            }}
-            key={index}
-          >
-            <RenderBlocks
-              blocks={column.blocks}
-              path={`component.options.columns.${index}.blocks`}
-              parent={props.builderBlock.id}
-              styleProp={{
-                flexGrow: "1",
-              }}
-              _context={_context}
-            />
-          </div>
-        ))}
-      </div>
-      <style>{`.div-540739f0 {
-display: flex;
-line-height: normal;
-}.div-540739f0-2 {
-display: flex;
-flex-direction: column;
-align-items: stretch;
-}`}</style>
-    </>
-  );
-}