@builder.io/sdk-svelte 3.0.0 → 3.0.2

package/src/blocks/text/text.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import { evaluate } from "../../functions/evaluate/index";
   import type { TextProps } from "./text.types";
 
-  export let builderContext: TextProps["builderContext"];
   export let text: TextProps["text"] = undefined;
   function stringifyStyles(stylesObj) {
     let styles = "";
@@ -14,27 +12,6 @@
     }
     return styles;
   }
-
-  $: processedText = () => {
-    const context = $builderContext;
-    const {
-      context: contextContext,
-      localState,
-      rootState,
-      rootSetState,
-    } = context;
-    return String(text?.toString() || "").replace(
-      /{{([^}]+)}}/g,
-      (match, group) =>
-        evaluate({
-          code: group,
-          context: contextContext,
-          localState,
-          rootState,
-          rootSetState,
-        }) as string
-    );
-  };
 </script>
 
 <div
@@ -43,5 +20,5 @@
   })}
   class="builder-text"
 >
-  {@html processedText()}
+  {@html text?.toString() || ""}
 </div>

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

@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES, VIDEO_FILE_TYPES } from '../../constants/file-types';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Video',
@@ -10,14 +11,14 @@ export const componentInfo: ComponentInfo = {
   inputs: [{
     name: 'video',
     type: 'file',
-    allowedFileTypes: ['mp4'],
+    allowedFileTypes: VIDEO_FILE_TYPES,
     bubble: true,
     defaultValue: 'https://cdn.builder.io/o/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fd27731a526464deba0016216f5f9e570%2Fcompressed?apiKey=YJIGb4i01jvw0SRdL5Bt&token=d27731a526464deba0016216f5f9e570&alt=media&optimized=true',
     required: true
   }, {
     name: 'posterImage',
     type: 'file',
-    allowedFileTypes: ['jpeg', 'png'],
+    allowedFileTypes: IMAGE_FILE_TYPES,
     helperText: 'Image to show before the video plays'
   }, {
     name: 'autoPlay',

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

@@ -5,19 +5,26 @@ import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getStyle } from '../../functions/get-style';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
+const checkIsComponentRestricted = (component: RegisteredComponent | null | undefined, model: string) => {
+  if (!component) return true;
+  if (!model) return false;
+  return component.models && component.models.length > 0 && !component.models.includes(model);
+};
 export const getComponent = ({
   block,
-  registeredComponents
+  registeredComponents,
+  model
 }: {
   block: BuilderBlock;
   registeredComponents: RegisteredComponents;
+  model: string;
 }) => {
   const componentName = block.component?.name;
   if (!componentName) {
     return null;
   }
   const ref = registeredComponents[componentName];
-  if (!ref) {
+  if (!ref || checkIsComponentRestricted(ref, model)) {
     // TODO: Public doc page with more info about this message
     console.warn(`
       Could not find a registered component named "${componentName}". 
@@ -94,10 +101,15 @@ export const provideLinkComponent = (block: RegisteredComponent | null | undefin
   };
   return {};
 };
-export const provideRegisteredComponents = (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
-  if (block?.shouldReceiveBuilderProps?.builderComponents) return {
-    builderComponents: registeredComponents
-  };
+export const provideRegisteredComponents = (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents, model: string) => {
+  if (block?.shouldReceiveBuilderProps?.builderComponents) {
+    const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
+      return !checkIsComponentRestricted(component, model);
+    }));
+    return {
+      builderComponents: filteredRegisteredComponents
+    };
+  }
   return {};
 };
 export const provideBuilderBlock = (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {

package/src/components/block/block.svelte

@@ -57,7 +57,6 @@
           rootState: $context.rootState,
           rootSetState: $context.rootSetState,
           context: $context.context,
-          shouldEvaluateBindings: true,
         });
     return blockToUse;
   };
@@ -65,6 +64,7 @@
     return getComponent({
       block: processedBlock(),
       registeredComponents: registeredComponents,
+      model: $context.model,
     });
   };
   $: Tag = () => {
@@ -106,11 +106,15 @@
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent?.()?.component,
       componentOptions: {
-        ...getBlockComponentOptions(processedBlock()),
+        ...getBlockComponentOptions(processedBlock(), $context),
         ...provideBuilderBlock(blockComponent(), processedBlock()),
         ...provideBuilderContext(blockComponent(), context),
         ...provideLinkComponent(blockComponent(), linkComponent),
-        ...provideRegisteredComponents(blockComponent(), registeredComponents),
+        ...provideRegisteredComponents(
+          blockComponent(),
+          registeredComponents,
+          $context.model
+        ),
       },
       context: context,
       linkComponent: linkComponent,

package/src/components/content/components/enable-editor.helpers.ts

@@ -0,0 +1,18 @@
+import { TARGET } from '../../../constants/target';
+import { isEditing } from '../../../functions/is-editing';
+import { isPreviewing } from '../../../functions/is-previewing';
+import type { Target } from '../../../types/targets';
+
+/**
+ * SDKS that use the elementRef approach to enable visual editing.
+ * We don't need to render the div for other SDKs as they attach event listeners to the window.
+ */
+export const SDKS_USING_ELEMENT_REF_APPROACH = (['svelte', 'qwik', 'vue'] as Target[]);
+
+/**
+ * We need to attach this div only when content exists or isPreviewing/isEditing even when content is null,
+ * as we need to set the elementRef and allow previewing and visual editing
+ */
+export const needsElementRefDivForEditing = () => {
+  return SDKS_USING_ELEMENT_REF_APPROACH.includes(TARGET) && (isEditing() || isPreviewing());
+}

package/src/components/content/components/enable-editor.svelte

@@ -45,6 +45,7 @@
     BuilderComponentStateChange,
     ContentProps,
   } from "../content.types";
+  import { needsElementRefDivForEditing } from "./enable-editor.helpers";
   import { getWrapperClassName } from "./styles.helpers";
   import type { Writable } from "svelte/store";
 
@@ -58,13 +59,24 @@
   export let trustedHosts: BuilderEditorProps["trustedHosts"] = undefined;
   export let model: BuilderEditorProps["model"] = undefined;
   export let content: BuilderEditorProps["content"] = undefined;
+  export let context: BuilderEditorProps["context"] = undefined;
   export let data: BuilderEditorProps["data"] = undefined;
   export let showContent: BuilderEditorProps["showContent"];
   export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
-  export let context: BuilderEditorProps["context"] = undefined;
   export let contentWrapperProps: BuilderEditorProps["contentWrapperProps"] =
     undefined;
 
+  function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+      const dashedKey = key.replace(/[A-Z]/g, function (match) {
+        return "-" + match.toLowerCase();
+      });
+      styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
+  }
+
   function mergeNewRootState(newData: Dictionary<any>) {
     const combinedState = {
       ...$builderContextSignal.rootState,
@@ -220,8 +232,14 @@
     });
     Object.values<ComponentInfo>($builderContextSignal.componentInfos).forEach(
       (registeredComponent) => {
-        const message = createRegisterComponentMessage(registeredComponent);
-        window.parent?.postMessage(message, "*");
+        if (
+          !model ||
+          !registeredComponent.models?.length ||
+          registeredComponent.models.includes(model)
+        ) {
+          const message = createRegisterComponentMessage(registeredComponent);
+          window.parent?.postMessage(message, "*");
+        }
       }
     );
     window.addEventListener(
@@ -248,14 +266,22 @@
      * TO-DO: should we only update the state when there is a change?
      **/
     if (
-      searchParamPreviewModel === model &&
-      previewApiKey === apiKey &&
-      (!content || searchParamPreviewId === content.id)
+      searchParamPreviewModel === "BUILDER_STUDIO" ||
+      (searchParamPreviewModel === model &&
+        previewApiKey === apiKey &&
+        (!content || searchParamPreviewId === content.id))
     ) {
       fetchOneEntry({
-        model: model,
+        model: model || "",
         apiKey: apiKey,
         apiVersion: $builderContextSignal.apiVersion,
+        ...(searchParamPreviewModel === "BUILDER_STUDIO" && context?.symbolId
+          ? {
+              query: {
+                id: context.symbolId,
+              },
+            }
+          : {}),
       }).then((content) => {
         if (content) {
           mergeNewContent(content);
@@ -362,9 +388,15 @@
   });
 </script>
 
-{#if $builderContextSignal.content}
+{#if $builderContextSignal.content || needsElementRefDivForEditing()}
   <svelte:element
     this={ContentWrapper}
+    style={stringifyStyles({
+      display:
+        !$builderContextSignal.content && needsElementRefDivForEditing()
+          ? "none"
+          : undefined,
+    })}
     {...{}}
     bind:this={elementRef}
     on:click={(event) => {

package/src/components/content/content.svelte

@@ -32,7 +32,6 @@
   export let context: ContentProps["context"] = undefined;
   export let content: ContentProps["content"] = undefined;
   export let customComponents: ContentProps["customComponents"] = undefined;
-  export let model: ContentProps["model"] = undefined;
   export let data: ContentProps["data"] = undefined;
   export let locale: ContentProps["locale"] = undefined;
   export let canTrack: ContentProps["canTrack"] = undefined;
@@ -40,6 +39,7 @@
   export let blocksWrapper: ContentProps["blocksWrapper"] = undefined;
   export let blocksWrapperProps: ContentProps["blocksWrapperProps"] = undefined;
   export let nonce: ContentProps["nonce"] = undefined;
+  export let model: ContentProps["model"] = undefined;
   export let apiHost: ContentProps["apiHost"] = undefined;
   export let enrich: ContentProps["enrich"] = undefined;
   export let showContent: ContentProps["showContent"];
@@ -63,11 +63,7 @@
   });
   let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents?.filter(({ models }) => {
-      if (!models?.length) return true;
-      if (!model) return true;
-      return models.includes(model);
-    }) || []),
+    ...(customComponents || []),
   ].reduce<RegisteredComponents>(
     (acc, { component, ...info }) => ({
       ...acc,
@@ -96,11 +92,7 @@
     apiVersion: apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...(customComponents?.filter(({ models }) => {
-        if (!models?.length) return true;
-        if (!model) return true;
-        return models.includes(model);
-      }) || []),
+      ...(customComponents || []),
     ].reduce<Dictionary<ComponentInfo>>(
       (acc, { component: _, ...info }) => ({
         ...acc,
@@ -112,6 +104,7 @@
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
+    model: model || "",
   });
   if (!apiKey) {
     logger.error(

package/src/constants/file-types.ts

@@ -0,0 +1,2 @@
+export const IMAGE_FILE_TYPES = ['jpeg', 'jpg', 'png', 'svg', 'webp', 'gif', 'jfif', 'pjpeg', 'pjp', 'apng', 'avif', 'tif', 'tiff', 'heif', 'bmp', 'eps', 'raw', 'cr2', 'nef', 'orf', 'sr2', 'psd', 'heic', 'dib', 'ai'];
+export const VIDEO_FILE_TYPES = ['mp4', 'webm', 'mkv', 'flv', 'vob', 'ogv', 'ogg', 'drc', 'gif', 'gifv', 'mng', 'avi', 'mov', 'qt', 'mts', 'm2ts', 'ts', 'wmv', 'yuv', 'rm', 'rmvb', 'viv', 'asf', 'amv', 'm4p', 'mpeg', 'mpe', 'm2v', 'm4v', 'svi', '3gp', '3g2', 'mxf', 'roq', 'nsv', 'f4v', 'f4p', 'f4a', 'f4b']

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.0"
+export const SDK_VERSION = "3.0.2"

package/src/context/builder.context.ts

@@ -15,6 +15,7 @@ export default {
     BlocksWrapper: "div",
     BlocksWrapperProps: {},
     nonce: "",
+    model: "",
   }),
   key,
 };

package/src/context/types.ts

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

package/src/functions/evaluate/edge-runtime/edge-runtime.ts

@@ -1,4 +1,3 @@
-import { logger } from '../../../helpers/logger';
 import type { ExecutorArgs } from '../helpers';
 import { flattenState, getFunctionArguments } from '../helpers';
 import Interpreter from './acorn-interpreter';
@@ -95,10 +94,7 @@ export const runInEdge = ({
     return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
   }).join('\n');
   const cleanedCode = processCode(code);
-  if (cleanedCode === '') {
-    logger.warn('Skipping evaluation of empty code block.');
-    return;
-  }
+  if (cleanedCode === '') return;
   const transformed = `
 function theFunction() {
   ${prependedCode}

package/src/functions/extract-localized-values.ts

@@ -0,0 +1,38 @@
+import type { BuilderBlock } from '../types/builder-block';
+import { traverse } from './traverse';
+function isLocalizedField(value: any) {
+  return value && typeof value === 'object' && value['@type'] === '@builder.io/core:LocalizedValue';
+}
+function containsLocalizedValues(data: Record<string, any>) {
+  if (!data || !Object.getOwnPropertyNames(data).length) {
+    return false;
+  }
+  let hasLocalizedValues = false;
+  traverse(data, value => {
+    if (isLocalizedField(value)) {
+      hasLocalizedValues = true;
+      return;
+    }
+  });
+  return hasLocalizedValues;
+}
+function extractLocalizedValues(data: Record<string, any>, locale: string) {
+  if (!data || !Object.getOwnPropertyNames(data).length) {
+    return {};
+  }
+  traverse(data, (value, update) => {
+    if (isLocalizedField(value)) {
+      update(value[locale] ?? undefined);
+    }
+  });
+  return data;
+}
+export function resolveLocalizedValues(block: BuilderBlock, locale: string | undefined) {
+  if (block.component?.options && containsLocalizedValues(block.component?.options)) {
+    if (!locale) {
+      console.warn('[Builder.io] In order to use localized fields in Builder, you must pass a locale prop to the BuilderComponent or to options object while fetching the content to resolve localized fields. Learn more: https://www.builder.io/c/docs/localization-inline#targeting-and-inline-localization');
+    }
+    block.component.options = extractLocalizedValues(block.component.options, locale ?? 'Default');
+  }
+  return block;
+}

package/src/functions/get-block-component-options.ts

@@ -1,7 +1,24 @@
+import type { BuilderContextInterface } from '../context/types';
 import type { BuilderBlock } from '../types/builder-block';
-export function getBlockComponentOptions(block: BuilderBlock) {
+import { evaluate } from './evaluate/evaluate';
+export function getBlockComponentOptions(block: BuilderBlock, context: Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>) {
   return {
     ...block.component?.options,
-    ...(block as any).options
+    ...(block as any).options,
+    ...evaluateTextComponentTextOption(block, context)
   };
+}
+const evaluateTextComponentTextOption = (block: BuilderBlock, context: Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>) => {
+  if (block.component?.name === 'Text' && block.component.options?.text && typeof block.component.options.text === 'string') {
+    return {
+      ...block.component.options,
+      text: block.component.options.text.replace(/{{([^}]+)}}/g, (_match: string, group: string) => (evaluate({
+        code: group,
+        context,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState
+      }) as string))
+    };
+  }
 }

package/src/functions/get-content/generate-content-url.ts

@@ -1,7 +1,8 @@
-import { flatten, flattenMongoQuery } from '../../helpers/flatten';
+import { flatten, flattenMongoQuery, unflatten } from '../../helpers/flatten';
 import { normalizeSearchParams } from '../../helpers/search/search';
 import { DEFAULT_API_VERSION } from '../../types/api-version';
 import { getBuilderSearchParamsFromWindow } from '../get-builder-search-params/index';
+import { isBrowser } from '../is-browser';
 import type { GetContentOptions } from './types';
 const isPositiveNumber = (thing: unknown) => typeof thing === 'number' && !isNaN(thing) && thing >= 0;
 export const generateContentUrl = (options: GetContentOptions): URL => {
@@ -39,7 +40,7 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
   url.searchParams.set('noTraverse', String(noTraverse));
   url.searchParams.set('includeRefs', String(true));
   const finalLocale = locale || userAttributes?.locale;
-  let finalUserAttributes = userAttributes;
+  let finalUserAttributes: Record<string, any> = userAttributes || {};
   if (finalLocale) {
     url.searchParams.set('locale', finalLocale);
     finalUserAttributes = {
@@ -79,11 +80,15 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     ...getBuilderSearchParamsFromWindow(),
     ...normalizeSearchParams(options.options || {})
   };
+  finalUserAttributes = {
+    ...finalUserAttributes,
+    ...getUserAttributesAsJSON(queryOptions)
+  };
   const flattened = flatten(queryOptions);
   for (const key in flattened) {
     url.searchParams.set(key, String(flattened[key]));
   }
-  if (finalUserAttributes) {
+  if (Object.keys(finalUserAttributes).length > 0) {
     url.searchParams.set('userAttributes', JSON.stringify(finalUserAttributes));
   }
   if (query) {
@@ -95,4 +100,26 @@ export const generateContentUrl = (options: GetContentOptions): URL => {
     }
   }
   return url;
+};
+const getUserAttributesFromQueryOptions = (queryOptions: any) => {
+  const newUserAttributes: any = {};
+  for (const key in queryOptions) {
+    if (key.startsWith('userAttributes.')) {
+      newUserAttributes[key] = queryOptions[key];
+      delete queryOptions[key];
+    }
+  }
+  return newUserAttributes;
+};
+const getUserAttributesAsJSON = (queryOptions: any) => {
+  if (isBrowser() && queryOptions['preview'] === 'BUILDER_STUDIO') {
+    queryOptions['userAttributes.urlPath'] = window.location.pathname;
+    queryOptions['userAttributes.host'] = window.location.host;
+    const queryOptionsForUserAttributes = getUserAttributesFromQueryOptions(queryOptions);
+    const {
+      userAttributes
+    } = unflatten(queryOptionsForUserAttributes);
+    return userAttributes;
+  }
+  return {};
 }

package/src/functions/get-processed-block.ts

@@ -3,6 +3,7 @@ import type { BuilderContextInterface } from '../context/types';
 import { omit } from '../helpers/omit';
 import type { BuilderBlock } from '../types/builder-block';
 import { evaluate } from './evaluate/index';
+import { resolveLocalizedValues } from './extract-localized-values';
 import { fastClone } from './fast-clone';
 import { set } from './set';
 import { transformBlock } from './transform-block';
@@ -84,28 +85,19 @@ const evaluateBindings = ({
 export function getProcessedBlock({
   block,
   context,
-  shouldEvaluateBindings,
   localState,
   rootState,
   rootSetState
 }: {
   block: BuilderBlock;
-  /**
-   * In some cases, we want to avoid evaluating bindings and only want framework-specific block transformation. It is
-   * also sometimes too early to consider bindings, e.g. when we might be looking at a repeated block.
-   */
-  shouldEvaluateBindings: boolean;
 } & Pick<BuilderContextInterface, 'localState' | 'context' | 'rootState' | 'rootSetState'>): BuilderBlock {
-  const transformedBlock = transformBlock(block);
-  if (shouldEvaluateBindings) {
-    return evaluateBindings({
-      block: transformedBlock,
-      localState,
-      rootState,
-      rootSetState,
-      context
-    });
-  } else {
-    return transformedBlock;
-  }
+  let transformedBlock = resolveLocalizedValues(block, (rootState.locale as string | undefined));
+  transformedBlock = transformBlock(transformedBlock);
+  return evaluateBindings({
+    block: transformedBlock,
+    localState,
+    rootState,
+    rootSetState,
+    context
+  });
 }

package/src/functions/register-component.ts

@@ -13,8 +13,11 @@ const serializeFn = (fnValue: Function) => {
   // 2. `name(args) => {code}`
   // 3. `(args) => {}`
   // 4. `args => {}`
+  // 5. `async function(args) {code}`
+  // 6. `async (args) => {}`
+  // 7. `async args => {}`
   const isArrowWithoutParens = /^[a-zA-Z0-9_]+\s*=>/i.test(fnStr);
-  const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('(') && !isArrowWithoutParens;
+  const appendFunction = !fnStr.startsWith('function') && !fnStr.startsWith('async') && !fnStr.startsWith('(') && !isArrowWithoutParens;
   return `return (${appendFunction ? 'function ' : ''}${fnStr}).apply(this, arguments)`;
 };
 export function serializeIncludingFunctions(info: ComponentInfo) {

package/src/functions/traverse.ts

@@ -0,0 +1,64 @@
+type TraverseCallback = (value: any, update: (newValue: any) => void) => void;
+
+/**
+ * Recursively traverses an object or array, invoking a callback on each value.
+ *
+ * @param {any} obj - The object or array to traverse. Can also handle primitives, null, or undefined.
+ * @param {TraverseCallback} callback - The function to invoke on each value. Receives the current value
+ * and an `update` function to modify the value in its parent container.
+ * @param {any} [parent=null] - The parent object or array of the current value. Used internally.
+ * @param {any} [key=null] - The key or index of the current value in its parent. Used internally.
+ * @param {WeakSet} [visited=new WeakSet()] - Tracks visited objects to handle circular references. Used internally.
+ *
+ * @example
+ * // Example: Doubling all numbers in an object
+ * const obj = { a: 1, b: [2, 3, { c: 4 }] };
+ * traverse(obj, (value, update) => {
+ *   if (typeof value === 'number') {
+ *     update(value * 2);
+ *   }
+ * });
+ * console.log(obj); // { a: 2, b: [4, 6, { c: 8 }] }
+ *
+ * @example
+ * // Example: Handling circular references
+ * const obj = { a: 1 };
+ * obj.self = obj;
+ * traverse(obj, (value, update) => {
+ *   if (typeof value === 'number') {
+ *     update(value * 2);
+ *   }
+ * });
+ * console.log(obj.a); // 2
+ */
+export function traverse(obj: any, callback: TraverseCallback, parent: any = null, key: any = null, visited = new WeakSet()): void {
+  if (obj == null || typeof obj !== 'object') {
+    callback(obj, (newValue: any) => {
+      if (parent !== null && key !== null) {
+        parent[key] = newValue;
+      }
+    });
+    return;
+  }
+  if (visited.has(obj)) {
+    return;
+  }
+  visited.add(obj);
+  if (Array.isArray(obj)) {
+    obj.forEach((item, index) => {
+      const update = (newValue: any) => {
+        obj[index] = newValue;
+      };
+      callback(item, update);
+      traverse(item, callback, obj, index, visited);
+    });
+  } else {
+    Object.entries(obj).forEach(([key, value]) => {
+      const update = (newValue: any) => {
+        obj[key] = newValue;
+      };
+      callback(value, update);
+      traverse(value, callback, obj, key, visited);
+    });
+  }
+}

package/src/helpers/flatten.ts

@@ -38,4 +38,27 @@ export function flattenMongoQuery(obj: any, _current?: any, _res: any = {}): {
     }
   }
   return _res;
+}
+
+/**
+ * Unflatten a flat object with dot-separated keys back into a nested object.
+ *
+ * { 'foo.bar': 'baz' } -> { foo: { bar: 'baz' }}
+ */
+export function unflatten(obj: any): any {
+  const result: any = {};
+  for (const key in obj) {
+    const parts = key.split('.');
+    let current = result;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (i === parts.length - 1) {
+        current[part] = obj[key];
+      } else {
+        current[part] = current[part] || {};
+        current = current[part];
+      }
+    }
+  }
+  return result;
 }

package/src/server-index.ts

@@ -17,7 +17,7 @@ export type { ContentVariantsPrps as ContentProps } from './components/content-v
 /**
  * General Builder types
  */
-export type { RegisteredComponent } from './context/types';
+export type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from './context/types';
 export type { BuilderBlock } from './types/builder-block';
 export type { BuilderContent } from './types/builder-content';
 export type { ComponentInfo } from './types/components';

package/src/types/components.ts

@@ -161,5 +161,8 @@ export interface ComponentInfo {
      */
     builderLinkComponent?: boolean;
   };
+  meta?: {
+    [key: string]: any;
+  };
 }
 type Permission = 'read' | 'publish' | 'editCode' | 'editDesigns' | 'admin' | 'create'