@builder.io/sdk-svelte 3.0.0 → 3.0.1

package/lib/node/components/content/components/enable-editor.svelte

@@ -18,6 +18,7 @@ import { createEditorListener } from "../../../helpers/subscribe-to-editor";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing";
 import { triggerAnimation } from "../../block/animator";
 import "../../dynamic-div.svelte";
+import { needsElementRefDivForEditing } from "./enable-editor.helpers";
 import { getWrapperClassName } from "./styles.helpers";
 export let isNestedRender = undefined;
 export let builderContextSignal;
@@ -34,6 +35,16 @@ export let showContent;
 export let contentWrapper = undefined;
 export let context = undefined;
 export let 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) {
     const combinedState = {
         ...$builderContextSignal.rootState,
@@ -178,8 +189,12 @@ function elementRef_onIniteditingbldr(event) {
             : {}),
     });
     Object.values($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("builder:component:stateChangeListenerActivated", emitStateUpdate);
 }
@@ -293,9 +308,15 @@ onDestroy(() => {
 });
 </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/lib/node/components/content/content.svelte

@@ -18,7 +18,6 @@ export let apiKey;
 export let context = undefined;
 export let content = undefined;
 export let customComponents = undefined;
-export let model = undefined;
 export let data = undefined;
 export let locale = undefined;
 export let canTrack = undefined;
@@ -26,6 +25,7 @@ export let apiVersion = undefined;
 export let blocksWrapper = undefined;
 export let blocksWrapperProps = undefined;
 export let nonce = undefined;
+export let model = undefined;
 export let apiHost = undefined;
 export let enrich = undefined;
 export let showContent;
@@ -46,13 +46,7 @@ let scriptStr = getUpdateVariantVisibilityScript({
 });
 let registeredComponents = [
     ...getDefaultRegisteredComponents(),
-    ...(customComponents?.filter(({ models }) => {
-        if (!models?.length)
-            return true;
-        if (!model)
-            return true;
-        return models.includes(model);
-    }) || []),
+    ...(customComponents || []),
 ].reduce((acc, { component, ...info }) => ({
     ...acc,
     [info.name]: {
@@ -78,13 +72,7 @@ let builderContextSignal = writable({
     apiVersion: apiVersion,
     componentInfos: [
         ...getDefaultRegisteredComponents(),
-        ...(customComponents?.filter(({ models }) => {
-            if (!models?.length)
-                return true;
-            if (!model)
-                return true;
-            return models.includes(model);
-        }) || []),
+        ...(customComponents || []),
     ].reduce((acc, { component: _, ...info }) => ({
         ...acc,
         [info.name]: serializeIncludingFunctions(info),
@@ -93,6 +81,7 @@ let builderContextSignal = writable({
     BlocksWrapper: blocksWrapper || "div",
     BlocksWrapperProps: blocksWrapperProps || {},
     nonce: nonce || "",
+    model: model || "",
 });
 if (!apiKey) {
     logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");

package/lib/node/components/content/content.svelte.d.ts

@@ -6,7 +6,6 @@ declare const __propDef: {
         context?: ContentProps["context"];
         content?: ContentProps["content"];
         customComponents?: ContentProps["customComponents"];
-        model?: ContentProps["model"];
         data?: ContentProps["data"];
         locale?: ContentProps["locale"];
         canTrack?: ContentProps["canTrack"];
@@ -14,6 +13,7 @@ declare const __propDef: {
         blocksWrapper?: ContentProps["blocksWrapper"];
         blocksWrapperProps?: ContentProps["blocksWrapperProps"];
         nonce?: ContentProps["nonce"];
+        model?: ContentProps["model"];
         apiHost?: ContentProps["apiHost"];
         enrich?: ContentProps["enrich"];
         showContent: ContentProps["showContent"];

package/lib/node/constants/file-types.d.ts

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

package/lib/node/constants/file-types.js

@@ -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/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "3.0.0";
+export declare const SDK_VERSION = "3.0.1";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "3.0.0";
+export const SDK_VERSION = "3.0.1";

package/lib/node/context/builder.context.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
         BlocksWrapper: string;
         BlocksWrapperProps: {};
         nonce: string;
+        model: string;
     }>;
     key: symbol;
 };

package/lib/node/context/builder.context.js

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

package/lib/node/context/types.d.ts

@@ -36,5 +36,6 @@ export interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'Block
     componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
     nonce: string;
+    model: string;
     canTrack?: boolean;
 }

package/lib/node/functions/extract-localized-values.d.ts

@@ -0,0 +1,2 @@
+import type { BuilderBlock } from '../types/builder-block';
+export declare function resolveLocalizedValues(block: BuilderBlock, locale: string | undefined): BuilderBlock;

package/lib/node/functions/extract-localized-values.js

@@ -0,0 +1,37 @@
+import { traverse } from './traverse';
+function isLocalizedField(value) {
+    return value && typeof value === 'object' && value['@type'] === '@builder.io/core:LocalizedValue';
+}
+function containsLocalizedValues(data) {
+    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, locale) {
+    if (!data || !Object.getOwnPropertyNames(data).length) {
+        return {};
+    }
+    traverse(data, (value, update) => {
+        if (isLocalizedField(value)) {
+            update(value[locale] ?? undefined);
+        }
+    });
+    return data;
+}
+export function resolveLocalizedValues(block, locale) {
+    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/lib/node/functions/get-processed-block.js

@@ -1,6 +1,7 @@
 import { TARGET } from '../constants/target';
 import { omit } from '../helpers/omit';
 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';
@@ -72,7 +73,8 @@ const evaluateBindings = ({ block, context, localState, rootState, rootSetState
     return copied;
 };
 export function getProcessedBlock({ block, context, shouldEvaluateBindings, localState, rootState, rootSetState }) {
-    const transformedBlock = transformBlock(block);
+    let transformedBlock = resolveLocalizedValues(block, rootState.locale);
+    transformedBlock = transformBlock(transformedBlock);
     if (shouldEvaluateBindings) {
         return evaluateBindings({
             block: transformedBlock,

package/lib/node/functions/register-component.js

@@ -10,8 +10,11 @@ const serializeFn = (fnValue) => {
     // 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) {

package/lib/node/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<WeakKey>): void;
+export {};

package/lib/node/functions/traverse.js

@@ -0,0 +1,63 @@
+/**
+ * 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, callback, parent = null, key = null, visited = new WeakSet()) {
+    if (obj == null || typeof obj !== 'object') {
+        callback(obj, (newValue) => {
+            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) => {
+                obj[index] = newValue;
+            };
+            callback(item, update);
+            traverse(item, callback, obj, index, visited);
+        });
+    }
+    else {
+        Object.entries(obj).forEach(([key, value]) => {
+            const update = (newValue) => {
+                obj[key] = newValue;
+            };
+            callback(value, update);
+            traverse(value, callback, obj, key, visited);
+        });
+    }
+}

package/lib/node/types/components.d.ts

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "type": "module",
   "files": [
     "lib",

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

@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES } from '../../constants/file-types';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Image',
@@ -14,7 +15,7 @@ export const componentInfo: ComponentInfo = {
     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',
     onChange: (options: Map<string, any>): void | Promise<void> => {

package/src/blocks/image/image.svelte

@@ -36,7 +36,10 @@
       !url ||
       // We can auto add srcset for cdn.builder.io and shopify
       // images, otherwise you can supply this prop manually
-      !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))
+      !(
+        typeof url === "string" &&
+        (url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))
+      )
     ) {
       return srcset;
     }

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

@@ -1,3 +1,4 @@
+import { IMAGE_FILE_TYPES } from '../../constants/file-types';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   // friendlyName?
@@ -8,7 +9,7 @@ export const componentInfo: ComponentInfo = {
     name: 'image',
     bubble: true,
     type: 'file',
-    allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'gif', 'webp'],
+    allowedFileTypes: IMAGE_FILE_TYPES,
     required: true
   }],
   noWrap: true,

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

@@ -65,6 +65,7 @@
     return getComponent({
       block: processedBlock(),
       registeredComponents: registeredComponents,
+      model: $context.model,
     });
   };
   $: Tag = () => {
@@ -110,7 +111,11 @@
         ...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";
 
@@ -65,6 +66,17 @@
   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(
@@ -362,9 +380,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.1"

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