@builder.io/sdk-react-native 1.1.2 → 2.0.1

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": "1.1.2",
+  "version": "2.0.1",
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/react-native",
   "repository": {
     "type": "git",

package/src/blocks/button/component-info.ts

@@ -33,9 +33,6 @@ export const componentInfo: ComponentInfo = {
   static: true,
   noWrap: true,
   shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
     builderLinkComponent: true
   }
 }

package/src/blocks/columns/columns.tsx

@@ -47,8 +47,9 @@ function Columns(props: ColumnProps) {
   }
 
   function getColumnCssWidth(index: number) {
-    const subtractWidth = (gutterSize * (cols.length - 1)) / cols.length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
+    const width = getWidth(index);
+    const subtractWidth = gutterSize * (cols.length - 1) * (width / 100);
+    return `calc(${width}% - ${subtractWidth}px)`;
   }
 
   function getTabletStyle({
@@ -168,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/custom-code/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Custom Code',
   static: true,
   requiredPermissions: ['editCode'],

package/src/blocks/embed/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Embed',
   static: true,
   inputs: [{

package/src/blocks/form/input/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Form:Input',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
   inputs: [{

package/src/blocks/form/select/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Form:Select',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
   defaultStyles: {

package/src/blocks/form/submit-button/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Form:SubmitButton',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
   defaultStyles: {

package/src/blocks/form/textarea/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Form:TextArea',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
   inputs: [{

package/src/blocks/fragment/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Fragment',
   static: true,
   hidden: true,

package/src/blocks/image/component-info.ts

@@ -127,9 +127,6 @@ export const componentInfo: ComponentInfo = {
     defaultValue: 0.7041
   }],
   shouldReceiveBuilderProps: {
-    builderBlock: true,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
+    builderBlock: true
   }
 }

package/src/blocks/img/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,

package/src/blocks/raw-text/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Builder:RawText',
   hideFromInsertMenu: true,
   inputs: [{

package/src/blocks/section/component-info.ts

@@ -1,11 +1,5 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
-  shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
-  },
   name: 'Core:Section',
   static: true,
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',

package/src/blocks/slot/component-info.ts

@@ -13,9 +13,6 @@ export const componentInfo: ComponentInfo = {
     defaultValue: 'children'
   }],
   shouldReceiveBuilderProps: {
-    builderBlock: false,
-    builderContext: true,
-    builderComponents: false,
-    builderLinkComponent: false
+    builderContext: true
   }
 }

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/blocks/text/component-info.ts

@@ -2,10 +2,7 @@ import { TARGET } from '../../constants/target';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   shouldReceiveBuilderProps: {
-    builderBlock: TARGET === 'reactNative' ? true : false,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
+    builderBlock: TARGET === 'reactNative' ? true : false
   },
   name: 'Text',
   static: true,

package/src/blocks/video/component-info.ts

@@ -81,9 +81,6 @@ export const componentInfo: ComponentInfo = {
     advanced: true
   }],
   shouldReceiveBuilderProps: {
-    builderBlock: true,
-    builderContext: false,
-    builderComponents: false,
-    builderLinkComponent: false
+    builderBlock: true
   }
 }

package/src/components/block/block.helpers.ts

@@ -3,7 +3,6 @@ import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getProcessedBlock } from '../../functions/get-processed-block';
 import { getStyle } from '../../functions/get-style';
-import type { ComponentInfo } from '../../server-index';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
 export const getComponent = ({
@@ -99,46 +98,27 @@ export const getInheritedStyles = ({
   }
   return extractTextStyles(style);
 };
-const applyDefaults = (shouldReceiveBuilderProps: ComponentInfo['shouldReceiveBuilderProps']) => {
-  return {
-    // once we bump to a major version, toggle this to `false`.
-    builderBlock: true,
-    // once we bump to a major version, toggle this to `false`.
-    builderContext: true,
-    builderComponents: false,
-    builderLinkComponent: false,
-    ...shouldReceiveBuilderProps
-  };
-};
 export const provideLinkComponent = (block: RegisteredComponent | null | undefined, linkComponent: any) => {
-  if (!block) return {};
-  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderLinkComponent;
-  if (!shouldReceiveProp) return {};
-  return {
+  if (block?.shouldReceiveBuilderProps?.builderLinkComponent) return {
     builderLinkComponent: linkComponent
   };
+  return {};
 };
 export const provideRegisteredComponents = (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
-  if (!block) return {};
-  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderComponents;
-  if (!shouldReceiveProp) return {};
-  return {
+  if (block?.shouldReceiveBuilderProps?.builderComponents) return {
     builderComponents: registeredComponents
   };
+  return {};
 };
 export const provideBuilderBlock = (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
-  if (!block) return {};
-  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderBlock;
-  if (!shouldReceiveProp) return {};
-  return {
+  if (block?.shouldReceiveBuilderProps?.builderBlock) return {
     builderBlock
   };
+  return {};
 };
 export const provideBuilderContext = (block: RegisteredComponent | null | undefined, context: BuilderContextInterface) => {
-  if (!block) return {};
-  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderContext;
-  if (!shouldReceiveProp) return {};
-  return {
+  if (block?.shouldReceiveBuilderProps?.builderContext) return {
     builderContext: context
   };
+  return {};
 }

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

@@ -96,6 +96,7 @@ function ContentComponent(props: ContentProps) {
     inheritedStyles: {},
     BlocksWrapper: props.blocksWrapper || ScrollView,
     BlocksWrapperProps: props.blocksWrapperProps || {},
+    nonce: props.nonce || "",
   }));
 
   return (
@@ -105,6 +106,7 @@ function ContentComponent(props: ContentProps) {
       }}
     >
       <EnableEditor
+        nonce={props.nonce}
         content={props.content}
         data={props.data}
         model={props.model}
@@ -126,10 +128,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

@@ -81,6 +81,7 @@ function ContentVariants(props: VariantsProviderProps) {
         <InlinedScript
           id="builderio-init-variants-fns"
           scriptStr={getInitVariantsFnsScriptString()}
+          nonce={props.nonce || ""}
         />
       ) : null}
       {shouldRenderVariants ? (
@@ -88,15 +89,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 +124,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 = "1.1.2"
+export const SDK_VERSION = "2.0.1"

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;
 }