@builder.io/react 7.0.0 → 8.0.0

package/dist/lib/src/functions/extract-localized-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"extract-localized-values.js","sourceRoot":"","sources":["../../../../src/functions/extract-localized-values.ts"],"names":[],"mappings":";;;AAAA,uCAAsC;AAEtC,IAAM,gBAAgB,GAAG,UAAC,KAAU;IAClC,OAAO,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,iCAAiC,CAAC;AACpG,CAAC,CAAC;AAEK,IAAM,uBAAuB,GAAG,UAAC,IAAyB;IAC/D,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE;QACrD,OAAO,KAAK,CAAC;KACd;IACD,IAAI,kBAAkB,GAAG,KAAK,CAAC;IAC/B,IAAA,mBAAQ,EAAC,IAAI,EAAE,UAAA,KAAK;QAClB,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,kBAAkB,GAAG,IAAI,CAAC;YAC1B,OAAO;SACR;IACH,CAAC,CAAC,CAAC;IACH,OAAO,kBAAkB,CAAC;AAC5B,CAAC,CAAC;AAZW,QAAA,uBAAuB,2BAYlC;AAEK,IAAM,sBAAsB,GAAG,UAAC,IAAyB,EAAE,MAAc;IAC9E,IAAI,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE;QACrD,OAAO,EAAE,CAAC;KACX;IAED,IAAA,mBAAQ,EAAC,IAAI,EAAE,UAAC,KAAK,EAAE,MAAM;;QAC3B,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAE;YAC3B,MAAM,CAAC,MAAA,KAAK,CAAC,MAAM,CAAC,mCAAI,SAAS,CAAC,CAAC;SACpC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAZW,QAAA,sBAAsB,0BAYjC"}

package/dist/lib/src/functions/traverse.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.traverse = void 0;
+/**
+ * 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
+ */
+function traverse(obj, callback, parent, key, visited) {
+    if (parent === void 0) { parent = null; }
+    if (key === void 0) { key = null; }
+    if (visited === void 0) { visited = new WeakSet(); }
+    if (obj == null || typeof obj !== 'object') {
+        callback(obj, function (newValue) {
+            if (parent !== null && key !== null) {
+                parent[key] = newValue;
+            }
+        });
+        return;
+    }
+    if (visited.has(obj)) {
+        return;
+    }
+    visited.add(obj);
+    if (Array.isArray(obj)) {
+        obj.forEach(function (item, index) {
+            var update = function (newValue) {
+                obj[index] = newValue;
+            };
+            callback(item, update);
+            traverse(item, callback, obj, index, visited);
+        });
+    }
+    else {
+        Object.entries(obj).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            var update = function (newValue) {
+                obj[key] = newValue;
+            };
+            callback(value, update);
+            traverse(value, callback, obj, key, visited);
+        });
+    }
+}
+exports.traverse = traverse;
+//# sourceMappingURL=traverse.js.map

package/dist/lib/src/functions/traverse.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"traverse.js","sourceRoot":"","sources":["../../../../src/functions/traverse.ts"],"names":[],"mappings":";;;AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,SAAgB,QAAQ,CACtB,GAAQ,EACR,QAA0B,EAC1B,MAAkB,EAClB,GAAe,EACf,OAAuB;IAFvB,uBAAA,EAAA,aAAkB;IAClB,oBAAA,EAAA,UAAe;IACf,wBAAA,EAAA,cAAc,OAAO,EAAE;IAEvB,IAAI,GAAG,IAAI,IAAI,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE;QAC1C,QAAQ,CAAC,GAAG,EAAE,UAAC,QAAa;YAC1B,IAAI,MAAM,KAAK,IAAI,IAAI,GAAG,KAAK,IAAI,EAAE;gBACnC,MAAM,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;aACxB;QACH,CAAC,CAAC,CAAC;QACH,OAAO;KACR;IAED,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;QACpB,OAAO;KACR;IACD,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEjB,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;QACtB,GAAG,CAAC,OAAO,CAAC,UAAC,IAAI,EAAE,KAAK;YACtB,IAAM,MAAM,GAAG,UAAC,QAAa;gBAC3B,GAAG,CAAC,KAAK,CAAC,GAAG,QAAQ,CAAC;YACxB,CAAC,CAAC;YACF,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;YACvB,QAAQ,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;KACJ;SAAM;QACL,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,UAAC,EAAY;gBAAX,GAAG,QAAA,EAAE,KAAK,QAAA;YACtC,IAAM,MAAM,GAAG,UAAC,QAAa;gBAC3B,GAAG,CAAC,GAAG,CAAC,GAAG,QAAQ,CAAC;YACtB,CAAC,CAAC;YACF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;YACxB,QAAQ,CAAC,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;KACJ;AACH,CAAC;AAtCD,4BAsCC"}

package/dist/lib/src/sdk-version.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SDK_VERSION = void 0;
-exports.SDK_VERSION = '7.0.0';
+exports.SDK_VERSION = '8.0.0';
 //# sourceMappingURL=sdk-version.js.map

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

@@ -24,6 +24,7 @@ export declare class BuilderBlock extends React.Component<BuilderBlockProps, {
     private _asyncRequests?;
     private _errors?;
     private _logs?;
+    hydrated: boolean;
     state: {
         hasError: boolean;
         updates: number;

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

@@ -15,10 +15,12 @@ export interface BuilderBlocksProps {
 interface BuilderBlocksState {
 }
 export declare class BuilderBlocks extends React.Component<BuilderBlocksProps, BuilderBlocksState> {
+    hydrated: boolean;
     get isRoot(): boolean;
     get noBlocks(): boolean;
     get path(): string;
     get parentId(): any;
+    componentDidMount(): void;
     onClickEmptyBlocks: () => void;
     onHoverEmptyBlocks: () => void;
     render(): JSX.Element;

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

@@ -57,7 +57,6 @@ export declare class BuilderContent<ContentType extends object = any> extends Re
     get renderedVariantId(): any;
     get options(): {
         apiVersion?: "v1" | undefined;
-        apiEndpoint?: "content" | "query" | undefined;
         fetchOptions?: object | undefined;
         userAttributes?: import("@builder.io/sdk/dist/src/builder.class").UserAttributes | undefined;
         url?: string | undefined;
@@ -97,7 +96,6 @@ export declare class BuilderContent<ContentType extends object = any> extends Re
     } | {
         apiVersion?: "v3" | undefined;
         enrich?: boolean | undefined;
-        apiEndpoint?: "content" | "query" | undefined;
         fetchOptions?: object | undefined;
         userAttributes?: import("@builder.io/sdk/dist/src/builder.class").UserAttributes | undefined;
         url?: string | undefined;
@@ -137,7 +135,6 @@ export declare class BuilderContent<ContentType extends object = any> extends Re
     } | {
         apiVersion?: undefined;
         enrich?: boolean | undefined;
-        apiEndpoint?: "content" | "query" | undefined;
         fetchOptions?: object | undefined;
         userAttributes?: import("@builder.io/sdk/dist/src/builder.class").UserAttributes | undefined;
         url?: string | undefined;

package/dist/types/src/constants/file-types.constant.d.ts

@@ -0,0 +1,2 @@
+export declare const IMAGE_FILE_TYPES: string[];
+export declare const VIDEO_FILE_TYPES: string[];

package/dist/types/src/functions/extract-localized-values.d.ts

@@ -0,0 +1,2 @@
+export declare const containsLocalizedValues: (data: Record<string, any>) => boolean;
+export declare const extractLocalizedValues: (data: Record<string, any>, locale: string) => Record<string, any>;

package/dist/types/src/functions/traverse.d.ts

@@ -0,0 +1,34 @@
+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 declare function traverse(obj: any, callback: TraverseCallback, parent?: any, key?: any, visited?: WeakSet<object>): void;
+export {};

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "7.0.0";
+export declare const SDK_VERSION = "8.0.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/react",
-  "version": "7.0.0",
+  "version": "8.0.0",
   "description": "",
   "keywords": [],
   "main": "dist/builder-react.cjs.js",
@@ -97,7 +97,7 @@
     "react-dom": ">=16.8.0 || ^19.0.0-rc"
   },
   "dependencies": {
-    "@builder.io/sdk": "5.0.0",
+    "@builder.io/sdk": "6.0.0",
     "@emotion/core": "^10.0.17",
     "hash-sum": "^2.0.0",
     "isolated-vm": "^5.0.0",

package/src/blocks/Image.tsx

@@ -8,6 +8,7 @@ import { BuilderMetaContext } from '../store/builder-meta';
 import { withBuilder } from '../functions/with-builder';
 import { throttle } from '../functions/throttle';
 import { Breakpoints, getSizesForBreakpoints } from '../constants/device-sizes.constant';
+import { IMAGE_FILE_TYPES } from 'src/constants/file-types.constant';
 
 // Taken from (and modified) the shopify theme script repo
 // https://github.com/Shopify/theme-scripts/blob/bcfb471f2a57d439e2f964a1bb65b67708cc90c3/packages/theme-images/images.js#L59
@@ -262,7 +263,7 @@ class ImageComponent extends React.Component<any, { imageLoaded: boolean; load:
 
   getSrcSet(): string | undefined {
     const url = this.image;
-    if (!url) {
+    if (!url || typeof url !== 'string') {
       return;
     }
 
@@ -442,7 +443,7 @@ export const Image = withBuilder(ImageComponent, {
       name: 'image',
       type: 'file',
       bubble: true,
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
       defaultValue:
         'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',

package/src/blocks/Symbol.tsx

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/core';
 import React, { PropsWithChildren } from 'react';
 import { BuilderComponent } from '../components/builder-component.component';
-import { Builder, BuilderElement } from '@builder.io/sdk';
+import { Builder, BuilderElement, builder } from '@builder.io/sdk';
 import hash from 'hash-sum';
 import { NoWrap } from '../components/no-wrap';
 import { BuilderStoreContext } from '../store/builder-store';
@@ -50,6 +50,7 @@ export interface SymbolProps {
 class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
   ref: BuilderComponent | null = null;
   staticRef: HTMLDivElement | null = null;
+  isEditingThisSymbol = false;
 
   get placeholder() {
     return (
@@ -64,6 +65,16 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
     if (this.useStatic && this.staticRef && refs[this.props.builderBlock?.id!]) {
       this.staticRef.parentNode?.replaceChild(refs[this.props.builderBlock?.id!], this.staticRef);
     }
+    Builder.nextTick(() => {
+      const { model, entry } = this.props.symbol || {};
+      // allows editing of symbols in the context of a parent page
+      this.isEditingThisSymbol = Boolean(
+        Builder.isEditing &&
+          model === builder.editingModel &&
+          entry &&
+          location.search.includes(`overrides.${entry}`)
+      );
+    });
   }
 
   get useStatic() {
@@ -97,6 +108,10 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
       showPlaceholder = true;
     }
 
+    if (this.isEditingThisSymbol) {
+      showPlaceholder = false;
+    }
+
     let key = dynamic ? undefined : [model, entry].join(':');
     const dataString = Builder.isEditing ? null : data && size(data) && hash(data);
 
@@ -105,7 +120,9 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
     }
     const attributes = this.props.attributes || {};
     return (
-      <BuilderStoreContext.Consumer key={(model || 'no model') + ':' + (entry || 'no entry')}>
+      <BuilderStoreContext.Consumer
+        key={(model || 'no model') + ':' + (entry || 'no entry' + this.isEditingThisSymbol)}
+      >
         {state => {
           const builderComponentKey = `${key}_${state?.state?.locale || 'Default'}`;
           return (
@@ -139,7 +156,18 @@ class SymbolComponent extends React.Component<PropsWithChildren<SymbolProps>> {
                   inlineContent={symbol?.inline}
                   {...(content && { content })}
                   key={builderComponentKey}
-                  options={{ key: builderComponentKey, noEditorUpdates: true }}
+                  options={{
+                    ...(!this.isEditingThisSymbol && {
+                      key: builderComponentKey,
+                      noEditorUpdates: true,
+                    }),
+                    ...(Builder.singletonInstance.apiEndpoint === 'content' &&
+                      entry && {
+                        query: {
+                          id: entry,
+                        },
+                      }),
+                  }}
                   codegen={!!content?.data?.blocksJs}
                   hydrate={state.state?._hydrate}
                   builderBlock={this.props.builderBlock}

package/src/blocks/Video.tsx

@@ -5,6 +5,7 @@ import React, { PropsWithChildren } from 'react';
 import { throttle } from '../functions/throttle';
 import { withChildren } from '../functions/with-children';
 import { Builder } from '@builder.io/sdk';
+import { IMAGE_FILE_TYPES, VIDEO_FILE_TYPES } from 'src/constants/file-types.constant';
 
 const DEFAULT_ASPECT_RATIO = 0.7004048582995948;
 
@@ -195,7 +196,7 @@ export const Video = Builder.registerComponent(withChildren(VideoComponent), {
     {
       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',
@@ -204,7 +205,7 @@ export const Video = Builder.registerComponent(withChildren(VideoComponent), {
     {
       name: 'posterImage',
       type: 'file',
-      allowedFileTypes: ['jpeg', 'png'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       helperText: 'Image to show before the video plays',
     },
     {

package/src/blocks/raw/Img.tsx

@@ -2,6 +2,7 @@
 import React from 'react';
 import { BuilderElement } from '@builder.io/sdk';
 import { withBuilder } from '../../functions/with-builder';
+import { IMAGE_FILE_TYPES } from 'src/constants/file-types.constant';
 
 export interface ImgProps {
   attributes?: any;
@@ -36,7 +37,7 @@ export const Img = withBuilder(ImgComponent, {
       name: 'image',
       bubble: true,
       type: 'file',
-      allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
+      allowedFileTypes: IMAGE_FILE_TYPES,
       required: true,
     },
   ],

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

@@ -11,6 +11,10 @@ import { applyPatchWithMinimalMutationChain } from '../functions/apply-patch-wit
 import { blockToHtmlString } from '../functions/block-to-html-string';
 import { Link } from './Link';
 import { fastClone } from '../functions/utils';
+import {
+  containsLocalizedValues,
+  extractLocalizedValues,
+} from 'src/functions/extract-localized-values';
 
 const camelCaseToKebabCase = (str?: string) =>
   str ? str.replace(/([A-Z])/g, g => `-${g[0].toLowerCase()}`) : '';
@@ -124,6 +128,8 @@ export class BuilderBlock extends React.Component<
   private _errors?: Error[];
   private _logs?: string[];
 
+  hydrated = false;
+
   state = {
     hasError: false,
     updates: 0,
@@ -283,6 +289,7 @@ export class BuilderBlock extends React.Component<
   };
 
   componentDidMount() {
+    this.hydrated = true;
     const block = this.block;
     const animations = block && block.animations;
 
@@ -474,11 +481,23 @@ export class BuilderBlock extends React.Component<
       }
     }
 
-    const innerComponentProperties = (options.component || options.options) && {
+    let innerComponentProperties = (options.component || options.options) && {
       ...options.options,
       ...(options.component.options || options.component.data),
     };
 
+    if (containsLocalizedValues(innerComponentProperties)) {
+      if (!this.privateState.state.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'
+        );
+      }
+      innerComponentProperties = extractLocalizedValues(
+        innerComponentProperties,
+        this.privateState.state.locale ?? 'Default'
+      );
+    }
+
     const isVoid = voidElements.has(TagName);
 
     const noWrap = componentInfo && (componentInfo.fragment || componentInfo.noWrap);
@@ -521,7 +540,7 @@ export class BuilderBlock extends React.Component<
             : ''
         }` +
         (options.class ? ' ' + options.class : '') +
-        (Builder.isEditing && this.privateState.state._spacer?.parent === block.id
+        (this.hydrated && Builder.isEditing && this.privateState.state._spacer?.parent === block.id
           ? ' builder-spacer-parent'
           : ''),
       key: this.id + index,
@@ -541,7 +560,7 @@ export class BuilderBlock extends React.Component<
     // tslint:disable-next-line:comment-format
     ///REACT15ONLY finalOptions.className = finalOptions.class
 
-    if (Builder.isEditing) {
+    if (Builder.isEditing && this.hydrated) {
       // TODO: removed bc JS can add styles inline too?
       (finalOptions as any)['builder-inline-styles'] = !(options.attr && options.attr.style)
         ? ''

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

@@ -29,6 +29,7 @@ interface BuilderBlocksState {
 
 // TODO: options to set direciotn
 export class BuilderBlocks extends React.Component<BuilderBlocksProps, BuilderBlocksState> {
+  hydrated = false;
   get isRoot() {
     return !this.props.child;
   }
@@ -58,6 +59,10 @@ export class BuilderBlocks extends React.Component<BuilderBlocksProps, BuilderBl
     return this.props.parent && this.props.parent.id;
   }
 
+  componentDidMount() {
+    this.hydrated = true;
+  }
+
   onClickEmptyBlocks = () => {
     if (Builder.isIframe && this.noBlocks) {
       window.parent?.postMessage(
@@ -105,8 +110,7 @@ export class BuilderBlocks extends React.Component<BuilderBlocksProps, BuilderBl
           (this.props.className ? ' ' + this.props.className : '')
         }
         builder-type="blocks"
-        // TODO: only fi in iframe?
-        builder-path={Builder.isIframe ? this.path : undefined}
+        builder-path={Builder.isIframe && this.hydrated ? this.path : undefined}
         builder-parent-id={this.parentId}
         css={
           {

package/src/constants/file-types.constant.ts

@@ -0,0 +1,69 @@
+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/functions/extract-localized-values.ts

@@ -0,0 +1,33 @@
+import { traverse } from './traverse';
+
+const isLocalizedField = (value: any) => {
+  return value && typeof value === 'object' && value['@type'] === '@builder.io/core:LocalizedValue';
+};
+
+export const 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;
+};
+
+export const 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;
+};

package/src/functions/traverse.ts

@@ -0,0 +1,72 @@
+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);
+    });
+  }
+}