@builder.io/sdk-react-native 2.0.0 → 2.0.2

package/lib/node/typescript/types/builder-props.d.ts

@@ -10,4 +10,7 @@ export type BuilderComponentsProp = {
 export type BuilderLinkComponentProp = {
     builderLinkComponent?: any;
 };
+export type BuilderNonceProp = {
+    nonce: string;
+};
 //# sourceMappingURL=builder-props.d.ts.map

package/lib/node/typescript/types/builder-props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"builder-props.d.ts","sourceRoot":"","sources":["../../../../src/types/builder-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,uBAAuB,CAAC;CACzC,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,EAAE,oBAAoB,CAAC;CACzC,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG;IACrC,oBAAoB,CAAC,EAAE,GAAG,CAAC;CAC5B,CAAA"}
+{"version":3,"file":"builder-props.d.ts","sourceRoot":"","sources":["../../../../src/types/builder-props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,uBAAuB,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACtF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AACpD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,cAAc,EAAE,uBAAuB,CAAC;CACzC,CAAC;AACF,MAAM,MAAM,qBAAqB,GAAG;IAClC,iBAAiB,EAAE,oBAAoB,CAAC;CACzC,CAAC;AACF,MAAM,MAAM,wBAAwB,GAAG;IACrC,oBAAoB,CAAC,EAAE,GAAG,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-react-native",
   "description": "Builder.io SDK for React Native",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/react-native",
   "repository": {
     "type": "git",

package/src/blocks/columns/columns.tsx

@@ -169,7 +169,11 @@ function Columns(props: ColumnProps) {
       }}
     >
       {TARGET !== "reactNative" ? (
-        <InlinedStyles id="builderio-columns" styles={columnsStyles()} />
+        <InlinedStyles
+          id="builderio-columns"
+          styles={columnsStyles()}
+          nonce={props.builderContext.nonce}
+        />
       ) : null}
       {props.columns?.map((column, index) => (
         <DynamicRenderer

package/src/blocks/symbol/symbol.tsx

@@ -73,6 +73,7 @@ function Symbol(props: SymbolProps) {
       }}
     >
       <ContentVariants
+        nonce={props.builderContext.nonce}
         isNestedRender
         apiVersion={props.builderContext.apiVersion}
         apiKey={props.builderContext.apiKey!}

package/src/components/block/components/block-styles.tsx

@@ -126,7 +126,11 @@ function BlockStyles(props: BlockStylesProps) {
     <>
       {TARGET !== "reactNative" && css() && canShowBlock() ? (
         <>
-          <InlinedStyles id="builderio-block" styles={css()} />
+          <InlinedStyles
+            id="builderio-block"
+            styles={css()}
+            nonce={props.context.nonce}
+          />
         </>
       ) : null}
     </>

package/src/components/content/components/styles.tsx

@@ -11,13 +11,14 @@ import {
 } from "react-native";
 import { useState } from "react";
 
-interface Props {
+interface Props extends BuilderNonceProp {
   cssCode?: string;
   customFonts?: CustomFont[];
   contentId?: string;
   isNestedRender?: boolean;
 }
 
+import type { BuilderNonceProp } from "../../../types/builder-props";
 import InlinedStyles from "../../inlined-styles";
 import type { CustomFont } from "./styles.helpers";
 import { getCss, getDefaultStyles, getFontCss } from "./styles.helpers";
@@ -36,7 +37,13 @@ ${getDefaultStyles(props.isNestedRender)}
 `.trim()
   );
 
-  return <InlinedStyles id="builderio-content" styles={injectedStyles} />;
+  return (
+    <InlinedStyles
+      id="builderio-content"
+      styles={injectedStyles}
+      nonce={props.nonce}
+    />
+  );
 }
 
 export default ContentStyles;

package/src/components/content/content.tsx

@@ -54,7 +54,11 @@ function ContentComponent(props: ContentProps) {
   const [registeredComponents, setRegisteredComponents] = useState(() =>
     [
       ...getDefaultRegisteredComponents(),
-      ...(props.customComponents || []),
+      ...(props.customComponents?.filter(({ models }) => {
+        if (!models?.length) return true;
+        if (!props.model) return true;
+        return models.includes(props.model);
+      }) || []),
     ].reduce<RegisteredComponents>(
       (acc, { component, ...info }) => ({
         ...acc,
@@ -85,7 +89,11 @@ function ContentComponent(props: ContentProps) {
     apiVersion: props.apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...(props.customComponents || []),
+      ...(props.customComponents?.filter(({ models }) => {
+        if (!models?.length) return true;
+        if (!props.model) return true;
+        return models.includes(props.model);
+      }) || []),
     ].reduce<Dictionary<ComponentInfo>>(
       (acc, { component: _, ...info }) => ({
         ...acc,
@@ -96,6 +104,7 @@ function ContentComponent(props: ContentProps) {
     inheritedStyles: {},
     BlocksWrapper: props.blocksWrapper || ScrollView,
     BlocksWrapperProps: props.blocksWrapperProps || {},
+    nonce: props.nonce || "",
   }));
 
   return (
@@ -105,6 +114,7 @@ function ContentComponent(props: ContentProps) {
       }}
     >
       <EnableEditor
+        nonce={props.nonce}
         content={props.content}
         data={props.data}
         model={props.model}
@@ -126,10 +136,12 @@ function ContentComponent(props: ContentProps) {
           <InlinedScript
             id="builderio-variant-visibility"
             scriptStr={scriptStr}
+            nonce={props.nonce || ""}
           />
         ) : null}
         {TARGET !== "reactNative" ? (
           <ContentStyles
+            nonce={props.nonce || ""}
             isNestedRender={props.isNestedRender}
             contentId={builderContextSignal.content?.id}
             cssCode={builderContextSignal.content?.data?.cssCode}

package/src/components/content-variants/content-variants.tsx

@@ -73,14 +73,13 @@ function ContentVariants(props: VariantsProviderProps) {
      */
   }, []);
 
-  useEffect(() => {});
-
   return (
     <>
       {!props.isNestedRender && TARGET !== "reactNative" ? (
         <InlinedScript
           id="builderio-init-variants-fns"
           scriptStr={getInitVariantsFnsScriptString()}
+          nonce={props.nonce || ""}
         />
       ) : null}
       {shouldRenderVariants ? (
@@ -88,15 +87,18 @@ function ContentVariants(props: VariantsProviderProps) {
           <InlinedStyles
             id="builderio-variants"
             styles={hideVariantsStyleString()}
+            nonce={props.nonce || ""}
           />
           <InlinedScript
             id="builderio-variants-visibility"
             scriptStr={updateCookieAndStylesScriptStr()}
+            nonce={props.nonce || ""}
           />
           {getVariants(props.content)?.map((variant) => (
             <ContentComponent
               isNestedRender={props.isNestedRender}
               key={variant.testVariationId}
+              nonce={props.nonce}
               content={variant}
               showContent={false}
               model={props.model}
@@ -120,6 +122,7 @@ function ContentVariants(props: VariantsProviderProps) {
         </>
       ) : null}
       <ContentComponent
+        nonce={props.nonce}
         isNestedRender={props.isNestedRender}
         {...{}}
         content={defaultContent()}

package/src/components/content-variants/content-variants.types.ts

@@ -81,4 +81,9 @@ export interface ContentVariantsPrps {
    * List of hosts to allow editing content from.
    */
   trustedHosts?: string[];
+
+  /**
+   * A CSP nonce to use for the SDK's inlined `<script>` and `<style>` tags.
+   */
+  nonce?: string;
 }

package/src/components/inlined-script.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 interface Props {
   scriptStr: string;
   id: string;
+  nonce: string;
 }
 
 export default function InlinedScript(_props: Props) {

package/src/components/inlined-styles.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 interface Props {
   styles: string;
   id: string;
+  nonce: string;
 }
 
 export default function InlinedStyles(_props: Props) {

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.0"
+export const SDK_VERSION = "2.0.2"

package/src/context/builder.context.ts

@@ -12,4 +12,5 @@ export default createContext<any>({
   inheritedStyles: {},
   BlocksWrapper: "div",
   BlocksWrapperProps: {},
+  nonce: "",
 });

package/src/context/types.ts

@@ -34,5 +34,6 @@ export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'Block
   componentInfos: Dictionary<ComponentInfo>;
   // Used to recursively store all CSS coming from a parent that would apply to a Text block
   inheritedStyles: Record<string, unknown>;
+  nonce: string;
   canTrack?: boolean;
 }

package/src/types/builder-props.ts

@@ -9,4 +9,7 @@ export type BuilderComponentsProp = {
 };
 export type BuilderLinkComponentProp = {
   builderLinkComponent?: any;
+};
+export type BuilderNonceProp = {
+  nonce: string;
 }