@builder.io/sdk-solid 0.11.2 → 0.11.4

package/dist/index.d.ts

@@ -1,14 +1,12 @@
 import * as solid_js from 'solid-js';
 
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
 interface ButtonProps {
     attributes?: any;
     text?: string;
     link?: string;
     openLinkInNewTab?: boolean;
 }
+
 declare function Button(props: ButtonProps): solid_js.JSX.Element;
 
 type JSONValue$1 = string | number | boolean | JSONObject$1 | JSONArray$1;
@@ -81,9 +79,6 @@ type Nullable<T> = T | null | undefined;
 type Dictionary<T> = {
     [key: string]: T;
 };
-type Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
 
 type BlocksWrapperProps = {
     blocks: BuilderBlock[] | undefined;
@@ -477,7 +472,7 @@ type Column = {
     blocks: BuilderBlock[];
     width?: number;
 };
-type StackColumnsAt = "tablet" | "mobile" | "never";
+type StackColumnsAt = 'tablet' | 'mobile' | 'never';
 interface ColumnProps extends BuilderComponentsProp {
     columns?: Column[];
     builderBlock: BuilderBlock;
@@ -493,6 +488,7 @@ interface FragmentProps {
     attributes?: any;
     children?: any;
 }
+
 declare function FragmentComponent(props: FragmentProps): solid_js.JSX.Element;
 
 interface ImageProps {
@@ -503,7 +499,7 @@ interface ImageProps {
     height?: number;
     width?: number;
     altText?: string;
-    backgroundSize?: "cover" | "contain";
+    backgroundSize?: 'cover' | 'contain';
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
@@ -516,20 +512,15 @@ interface ImageProps {
 
 declare function Image(props: ImageProps): solid_js.JSX.Element;
 
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
 interface SectionProps {
     maxWidth?: number;
     attributes?: any;
     children?: any;
     builderBlock?: any;
 }
+
 declare function SectionComponent(props: SectionProps): solid_js.JSX.Element;
 
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
 interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -538,9 +529,6 @@ interface SymbolInfo {
     inline?: boolean;
     dynamic?: boolean;
 }
-/**
- * This import is used by the Svelte SDK. Do not remove.
- */
 interface SymbolProps extends BuilderComponentsProp {
     symbol?: SymbolInfo;
     dataOnly?: boolean;
@@ -551,9 +539,10 @@ interface SymbolProps extends BuilderComponentsProp {
 
 declare function Symbol(props: PropsWithBuilderData<SymbolProps>): solid_js.JSX.Element;
 
-interface TextProps {
+type TextProps = {
     text?: string;
-}
+};
+
 declare function Text(props: TextProps): solid_js.JSX.Element;
 
 interface VideoProps {
@@ -567,9 +556,9 @@ interface VideoProps {
     aspectRatio?: number;
     width?: number;
     height?: number;
-    fit?: "contain" | "cover" | "fill";
-    preload?: "auto" | "metadata" | "none";
-    position?: "center" | "top" | "left" | "right" | "bottom" | "top left" | "top right" | "bottom left" | "bottom right";
+    fit?: 'contain' | 'cover' | 'fill';
+    preload?: 'auto' | 'metadata' | 'none';
+    position?: 'center' | 'top' | 'left' | 'right' | 'bottom' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
     posterImage?: string;
     lazyLoad?: boolean;
     children?: any;
@@ -579,7 +568,7 @@ interface VideoProps {
 
 declare function Video(props: VideoProps): solid_js.JSX.Element;
 
-type BlocksProps = Partial<Omit<BlocksWrapperProps, "BlocksWrapper" | "BlocksWrapperProps">> & {
+type BlocksProps = Partial<Omit<BlocksWrapperProps, 'BlocksWrapper' | 'BlocksWrapperProps'>> & {
     context?: BuilderContextInterface;
     registeredComponents?: RegisteredComponents;
 };
@@ -587,19 +576,48 @@ type BlocksProps = Partial<Omit<BlocksWrapperProps, "BlocksWrapper" | "BlocksWra
 declare function Blocks(props: BlocksProps): solid_js.JSX.Element;
 
 interface ContentVariantsPrps {
+    /**
+     * The Builder content JSON to render (required).
+     */
     content?: Nullable<BuilderContent>;
+    /**
+     * The Builder content `model` to render (required).
+     */
     model?: string;
+    /**
+     * Additional data to inject into your Builder content (optional).
+     */
     data?: {
         [key: string]: any;
     };
+    /**
+     *
+     */
     context?: BuilderRenderContext;
+    /**
+     * Your API Key: needed to dynamically fetch symbols (required).
+     */
     apiKey: string;
     apiVersion?: ApiVersion;
+    /**
+     * An array of custom components to register (optional).
+     */
     customComponents?: RegisteredComponent[];
+    /**
+     * A boolean to enable or disable tracking (optional). Defaults to `true`.
+     */
     canTrack?: boolean;
+    /**
+     * If provided, the API will auto-resolve localized objects to the value of this `locale` key (optional).
+     */
     locale?: string;
-    /** @deprecated use `enrich` instead **/
+    /** @deprecated use `enrich` instead */
     includeRefs?: boolean;
+    /**
+     * A boolean to enable or disable enriching API content (optional).
+     *
+     * Enriching will Include multilevel references in the response. Defaults to `false`.
+     */
     enrich?: boolean;
     /**
      * The element that wraps your content. Defaults to `div` ('ScrollView' in React Native).
@@ -671,9 +689,9 @@ type Settings = {
 declare function setEditorSettings(newSettings: Settings): void;
 
 interface GetContentOptions {
-    /** The model to get content for */
+    /** The model to get content for (required) */
     model: string;
-    /** Your public API key */
+    /** Your public API key (required) */
     apiKey: string;
     /** Number of items to fetch. Default is 1 */
     limit?: number;
@@ -814,7 +832,7 @@ interface GetContentOptions {
 }
 
 /**
- * Returns a the first entry that matches the given options.
+ * Returns the first content entry that matches the given options.
  */
 declare function fetchOneEntry(options: GetContentOptions): Promise<BuilderContent | null>;
 /**
@@ -895,37 +913,6 @@ type EventProperties = Pick<Event, 'type'> & Pick<Event['data'], 'contentId' | '
 };
 declare const track: (args: EventProperties) => Promise<void | Response>;
 
-/**
- * Lol Typescript
- * https://stackoverflow.com/questions/49927523/disallow-call-with-any/49928360#49928360
- */
-type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
-type OptionalFieldsOnly<T> = {
-    [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], K, never> : K]: T[K];
-};
-type RequiredFieldsOnly<T> = {
-    [K in keyof T as T[K] extends Required<T>[K] ? IfAny<T[K], never, K> : never]: T[K];
-};
-type Enforced<T> = {
-    [K in keyof T]-?: T[K];
-};
-type AndUndefined<T> = {
-    [K in keyof T]: T[K] | undefined;
-};
-/**
- * Enforce that all optional fields are undefined
- * @example
- * type Foo = { a: string, b?: number }
- * type Bar = EnforcePartials<Foo> // { a: string, b: number | undefined }
- */
-type EnforcePartials<From> = Prettify<AndUndefined<Enforced<OptionalFieldsOnly<From>>> & RequiredFieldsOnly<From>>;
-
-interface InternalRenderProps {
-    showContent: boolean;
-    isSsrAbTest: boolean;
-}
-type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
-
 type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
     model?: string;
 }) & ({
@@ -976,4 +963,4 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
  */
 declare const fetchBuilderProps: (_args: GetBuilderPropsOptions) => Promise<ContentVariantsPrps>;
 
-export { Blocks, Button, Columns, ComponentInfo, ContentVariants as Content, ContentProps, FragmentComponent as Fragment, Image, InsertMenuConfig, InsertMenuItem, RegisteredComponent, RenderBlocks, RenderContent, SectionComponent as Section, Settings, Symbol, Text, Video, _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getAllContent, getBuilderSearchParams, getContent, isEditing, isPreviewing, register, setEditorSettings, track };
+export { Blocks, BlocksProps, Button, ButtonProps, ColumnProps, Columns, ComponentInfo, ContentVariants as Content, ContentVariantsPrps as ContentProps, FragmentComponent as Fragment, FragmentProps, Image, ImageProps, InsertMenuConfig, InsertMenuItem, RegisteredComponent, RenderBlocks, RenderContent, SectionComponent as Section, SectionProps, Settings, Symbol, SymbolProps, Text, TextProps, Video, VideoProps, _processContentResult, createRegisterComponentMessage, fetchBuilderProps, fetchEntries, fetchOneEntry, getAllContent, getBuilderSearchParams, getContent, isEditing, isPreviewing, register, setEditorSettings, track };

package/lib/browser/dev.js

@@ -785,7 +785,7 @@ function ComponentRef(props) {
           return Wrapper();
         },
         get children() {
-          return [createComponent(For, {
+          return createComponent(For, {
             get each() {
               return props.blockChildren;
             },
@@ -793,7 +793,7 @@ function ComponentRef(props) {
               _index();
               return createComponent(block_default, {
                 get key() {
-                  return "block-" + child.id;
+                  return child.id;
                 },
                 block: child,
                 get context() {
@@ -804,23 +804,7 @@ function ComponentRef(props) {
                 }
               });
             }
-          }), createComponent(For, {
-            get each() {
-              return props.blockChildren;
-            },
-            children: (child, _index) => {
-              _index();
-              return createComponent(block_styles_default, {
-                get key() {
-                  return "block-style-" + child.id;
-                },
-                block: child,
-                get context() {
-                  return props.context;
-                }
-              });
-            }
-          })];
+          });
         }
       }));
     }
@@ -916,7 +900,14 @@ function Block(props) {
       return canShowBlock();
     },
     get children() {
-      return createComponent(Show, {
+      return [createComponent(block_styles_default, {
+        get block() {
+          return props.block;
+        },
+        get context() {
+          return props.context;
+        }
+      }), createComponent(Show, {
         get fallback() {
           return createComponent(component_ref_default, {
             get componentRef() {
@@ -1043,7 +1034,7 @@ function Block(props) {
                       _index();
                       return createComponent(Block, {
                         get key() {
-                          return "block-" + child.id;
+                          return child.id;
                         },
                         block: child,
                         get context() {
@@ -1054,29 +1045,13 @@ function Block(props) {
                         }
                       });
                     }
-                  }), createComponent(For, {
-                    get each() {
-                      return childrenWithoutParentComponent();
-                    },
-                    children: (child, _index) => {
-                      _index();
-                      return createComponent(block_styles_default, {
-                        get key() {
-                          return "block-style-" + child.id;
-                        },
-                        block: child,
-                        get context() {
-                          return childrenContext();
-                        }
-                      });
-                    }
                   })];
                 }
               });
             }
           })];
         }
-      });
+      })];
     }
   });
 }
@@ -1163,7 +1138,7 @@ function Blocks(props) {
       return props.context?.BlocksWrapperProps;
     },
     get children() {
-      return [createComponent(Show, {
+      return createComponent(Show, {
         get when() {
           return props.blocks;
         },
@@ -1176,7 +1151,7 @@ function Blocks(props) {
               _index();
               return createComponent(block_default, {
                 get key() {
-                  return "render-block-" + block.id;
+                  return block.id;
                 },
                 block,
                 get context() {
@@ -1189,30 +1164,7 @@ function Blocks(props) {
             }
           });
         }
-      }), createComponent(Show, {
-        get when() {
-          return props.blocks;
-        },
-        get children() {
-          return createComponent(For, {
-            get each() {
-              return props.blocks;
-            },
-            children: (block, _index) => {
-              _index();
-              return createComponent(block_styles_default, {
-                get key() {
-                  return "block-style-" + block.id;
-                },
-                block,
-                get context() {
-                  return props.context || builderContext;
-                }
-              });
-            }
-          });
-        }
-      })];
+      });
     }
   });
 }
@@ -3298,7 +3250,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.11.2";
+var SDK_VERSION = "0.11.4";
 
 // src/functions/register.ts
 var registry = {};
@@ -3434,11 +3386,26 @@ var setupBrowserForEditing = (options = {}) => {
 // src/components/content/components/enable-editor.tsx
 function EnableEditor(props) {
   const [forceReRenderCount, setForceReRenderCount] = createSignal(0);
+  createSignal(true);
   createSignal(0);
   const [shouldSendResetCookie, setShouldSendResetCookie] = createSignal(false);
   const [ContentWrapper, setContentWrapper] = createSignal(props.contentWrapper || "div");
   const [httpReqsData, setHttpReqsData] = createSignal({});
   const [clicked, setClicked] = createSignal(false);
+  function mergeNewRootState(newData) {
+    const combinedState = {
+      ...props.builderContextSignal.rootState,
+      ...newData
+    };
+    if (props.builderContextSignal.rootSetState) {
+      props.builderContextSignal.rootSetState?.(combinedState);
+    } else {
+      props.setBuilderContextSignal((PREVIOUS_VALUE) => ({
+        ...PREVIOUS_VALUE,
+        rootState: combinedState
+      }));
+    }
+  }
   function mergeNewContent(newContent) {
     const newContentValue = {
       ...props.builderContextSignal.content,
@@ -3659,6 +3626,20 @@ function EnableEditor(props) {
     emitStateUpdate();
   }
   createEffect(on(() => [props.builderContextSignal.rootState], onUpdateFn_4));
+  function onUpdateFn_5() {
+    if (props.data) {
+      mergeNewRootState(props.data);
+    }
+  }
+  createEffect(on(() => [props.data], onUpdateFn_5));
+  function onUpdateFn_6() {
+    if (props.locale) {
+      mergeNewRootState({
+        locale: props.locale
+      });
+    }
+  }
+  createEffect(on(() => [props.locale], onUpdateFn_6));
   return createComponent(builder_context_default.Provider, {
     get value() {
       return props.builderContextSignal;
@@ -3794,7 +3775,7 @@ ${getFontCss({
 var styles_default = ContentStyles;
 
 // src/components/content/content.helpers.ts
-var getContextStateInitialValue = ({
+var getRootStateInitialValue = ({
   content,
   data,
   locale
@@ -3862,7 +3843,7 @@ function ContentComponent(props) {
       data: props.data
     }),
     localState: void 0,
-    rootState: getContextStateInitialValue({
+    rootState: getRootStateInitialValue({
       content: props.content,
       data: props.data,
       locale: props.locale
@@ -3908,6 +3889,9 @@ function ContentComponent(props) {
         get content() {
           return props.content;
         },
+        get data() {
+          return props.data;
+        },
         get model() {
           return props.model;
         },