@builder.io/react 8.2.1 → 8.2.2-3

package/dist/types/src/components/builder-content.component.d.ts

@@ -39,6 +39,10 @@ export type BuilderContentProps<ContentType> = {
      * Required if `inline` is set to `true`.
      */
     content?: Content;
+    /**
+     * CSP nonce to allow the loading and execution of a script or style tag when Content-Security-Policy is enabled.
+     */
+    nonce?: string;
 } & ({
     model: string;
 } | {

package/dist/types/src/components/variants-provider.component.d.ts

@@ -3,6 +3,7 @@ import { BuilderContent } from '@builder.io/sdk';
 interface VariantsProviderProps {
     initialContent: BuilderContent;
     children: (variants: BuilderContent[], renderScript?: () => JSX.Element) => JSX.Element;
+    nonce?: string;
 }
-export declare const VariantsProvider: ({ initialContent, children }: VariantsProviderProps) => React.JSX.Element;
+export declare const VariantsProvider: ({ initialContent, children, nonce }: VariantsProviderProps) => React.JSX.Element;
 export {};

package/dist/types/src/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "8.2.1";
+export declare const SDK_VERSION = "8.2.2-3";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/react",
-  "version": "8.2.1",
+  "version": "8.2.2-3",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",
@@ -36,7 +36,7 @@
     "release:minor": "yarn build && yarn version minor && yarn npm publish",
     "release:patch": "yarn build && yarn version patch && yarn npm publish",
     "release:nightly": "yarn build && yarn version prerelease && yarn npm publish --tag nightly",
-    "release:dev": "yarn build && yarn version prerelease && yarn npm publish --tag dev",
+    "release:dev": "yarn version prerelease && yarn pack && tar -zxvf package.tgz && cp package/package.json ./package.json && rm -rf package package.tgz && yarn build && yarn npm publish --tag dev",
     "fix-core-version": "bash ./scripts/fix-core-version.sh",
     "ci:test": "yarn test",
     "ci:build": "yarn build"
@@ -105,5 +105,6 @@
   },
   "installConfig": {
     "hoistingLimits": "workspaces"
-  }
+  },
+  "stableVersion": "8.2.2"
 }

package/src/blocks/PersonalizationContainer.tsx

@@ -106,6 +106,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
             </template>
           ))}
           <script
+            nonce={builderStore.context.nonce}
             id={`variants-script-${props.builderBlock?.id}`}
             dangerouslySetInnerHTML={{
               __html: getPersonalizationScript(
@@ -123,6 +124,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
           />
         </div>
         <script
+          nonce={builderStore.context.nonce}
           dangerouslySetInnerHTML={{
             __html: `
          window.__hydrated = window.__hydrated || {};
@@ -194,6 +196,7 @@ export function PersonalizationContainer(props: PersonalizationContainerProps) {
         )}
       </div>
       <script
+        nonce={builderStore.context.nonce}
         dangerouslySetInnerHTML={{
           __html: `
          window.__hydrated = window.__hydrated || {};

package/src/blocks/Router.tsx

@@ -262,7 +262,7 @@ class RouterComponent extends React.Component<PropsWithChildren<RouterProps>> {
           return (
             <div className="builder-router" data-model={model}>
               {/* TODO: move to emotion */}
-              <style>{`
+              <style nonce={state.context.nonce}>{`
                 @keyframes builderLoadingSpinner {
                   0% {
                     transform: rotate(0deg);
@@ -297,6 +297,7 @@ class RouterComponent extends React.Component<PropsWithChildren<RouterProps>> {
                 options={{
                   key: Builder.isEditing ? undefined : this.model + ':' + url, // TODO: other custom targets specify if should refetch components on change
                 }}
+                nonce={state.context.nonce}
               >
                 {/* TODO: builder blocks option for loading stuff */}
                 {/* TODO: input for builder blocks for this */}

package/src/blocks/Symbol.tsx

@@ -172,6 +172,7 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
                   hydrate={state.state?._hydrate}
                   builderBlock={this.props.builderBlock}
                   dataOnly={this.props.dataOnly}
+                  nonce={state.context.nonce}
                 >
                   {/* TODO: builder blocks option for loading stuff */}
                   {this.props.children}

package/src/components/builder-component.component.tsx

@@ -298,6 +298,11 @@ export interface BuilderComponentProps {
    * Pass a list of custom components to register with Builder.io.
    */
   customComponents?: Array<RegisteredComponent>;
+
+  /**
+   * CSP nonce to allow the loading and execution of a script or style tag when Content-Security-Policy is enabled.
+   */
+  nonce?: string;
 }
 
 export interface BuilderComponentState {
@@ -439,6 +444,7 @@ export class BuilderComponent extends React.Component<
       context: {
         ...props.context,
         apiKey: this.props.apiKey || builder.apiKey,
+        nonce: this.props.nonce,
       },
       state: Object.assign(this.rootState, {
         ...(this.inlinedContent && this.inlinedContent.data && this.inlinedContent.data.state),
@@ -782,17 +788,21 @@ export class BuilderComponent extends React.Component<
   }
 
   updateState = (fn?: (state: any) => void) => {
+    console.log('DEBUG: updateState', fn);
     const state = this.rootState;
     if (fn) {
+      console.log('DEBUG: updateState fn', fn);
       fn(state);
     }
     if (this.mounted) {
+      console.log('DEBUG: updateState if', state);
       this.setState({
         update: this.updateState,
         state,
         updates: ((this.state && this.state.updates) || 0) + 1,
       });
     } else {
+      console.log('DEBUG: updateState else', state);
       this.state = {
         ...this.state,
         update: this.updateState,
@@ -813,6 +823,7 @@ export class BuilderComponent extends React.Component<
 
   @debounceNextTick
   notifyStateChange() {
+    console.log('DEBUG: notifyStateChange');
     if (Builder.isServer) {
       return;
     }
@@ -1097,6 +1108,7 @@ export class BuilderComponent extends React.Component<
                       }
                       contentError={this.props.contentError}
                       modelName={this.name || 'page'}
+                      nonce={this.props.nonce}
                     >
                       {(data, loading, fullData) => {
                         if (this.props.dataOnly) {
@@ -1191,6 +1203,7 @@ export class BuilderComponent extends React.Component<
                           >
                             {!codegen && this.getCss(data) && (
                               <style
+                                nonce={this.props.nonce}
                                 ref={ref => (this.styleRef = ref)}
                                 className="builder-custom-styles"
                                 dangerouslySetInnerHTML={{
@@ -1254,6 +1267,7 @@ export class BuilderComponent extends React.Component<
       headers?: Record<string, string>;
     }
   ) {
+    console.log('DEBUG: handleRequest', propertyName, httpRequest);
     const { url, method, body, headers } = httpRequest;
 
     const fetchCacheKey = JSON.stringify({ url, method, body, headers });
@@ -1271,13 +1285,17 @@ export class BuilderComponent extends React.Component<
       }
       let json: any;
       try {
+        console.log('DEBUG: handleRequest try', json);
+
         const result = await fetch(url, {
           method,
           headers,
-          body,
+          body: method === 'GET' ? undefined : body,
         });
         json = await result.json();
+        console.log('DEBUG: handleRequest json', json);
       } catch (err) {
+        console.log('DEBUG: handleRequest catch', err);
         const error = toError(err);
         if (this._errors) {
           this._errors.push(error);

package/src/components/builder-content.component.tsx

@@ -50,6 +50,10 @@ export type BuilderContentProps<ContentType> = {
    * Required if `inline` is set to `true`.
    */
   content?: Content;
+  /**
+   * CSP nonce to allow the loading and execution of a script or style tag when Content-Security-Policy is enabled.
+   */
+  nonce?: string;
 } & ({ model: string } | { modelName: string }); // model and modelName are aliases of the same thing¸
 
 /**
@@ -314,7 +318,7 @@ export class BuilderContent<ContentType extends object = any> extends React.Comp
     const useData: any = this.data;
     const TagName = this.props.dataOnly ? NoWrap : 'div';
     return (
-      <VariantsProvider initialContent={useData}>
+      <VariantsProvider initialContent={useData} nonce={this.props.nonce}>
         {(variants, renderScript) => {
           return (
             <React.Fragment>

package/src/components/variants-provider.component.tsx

@@ -99,9 +99,10 @@ const variantsScript = (variantsString: string, contentId: string) =>
 interface VariantsProviderProps {
   initialContent: BuilderContent;
   children: (variants: BuilderContent[], renderScript?: () => JSX.Element) => JSX.Element;
+  nonce?: string;
 }
 
-export const VariantsProvider = ({ initialContent, children }: VariantsProviderProps) => {
+export const VariantsProvider = ({ initialContent, children, nonce }: VariantsProviderProps) => {
   if (Builder.isBrowser && !builder.canTrack) {
     return children([initialContent]);
   }
@@ -126,6 +127,7 @@ export const VariantsProvider = ({ initialContent, children }: VariantsProviderP
     );
     const renderScript = () => (
       <script
+        nonce={nonce}
         id={`variants-script-${initialContent.id}`}
         dangerouslySetInnerHTML={{
           __html: variantsScript(variantsJson, initialContent.id!),