@builder.io/sdk-solid 3.0.0 → 3.0.1

package/dist/index.d.ts

@@ -478,6 +478,9 @@ interface ComponentInfo {
          */
         builderLinkComponent?: boolean;
     };
+    meta?: {
+        [key: string]: any;
+    };
 }
 type Permission = 'read' | 'publish' | 'editCode' | 'editDesigns' | 'admin' | 'create';
 
@@ -524,6 +527,7 @@ interface BuilderContextInterface extends Pick<BlocksWrapperProps, 'BlocksWrappe
     componentInfos: Dictionary<ComponentInfo>;
     inheritedStyles: Record<string, unknown>;
     nonce: string;
+    model: string;
     canTrack?: boolean;
 }
 
@@ -761,6 +765,7 @@ declare const _default: solid_js.Context<{
     BlocksWrapper: string;
     BlocksWrapperProps: {};
     nonce: string;
+    model: string;
 }>;
 
 type QueryObject = Record<string, string | string[]>;

package/lib/browser/dev.js

@@ -114,7 +114,8 @@ var builder_context_default = createContext({
   inheritedStyles: {},
   BlocksWrapper: "div",
   BlocksWrapperProps: {},
-  nonce: ""
+  nonce: "",
+  model: ""
 });
 var components_context_default = createContext({ registeredComponents: {} });
 
@@ -401,6 +402,77 @@ function evaluate({
   }
 }
 
+// src/functions/traverse.ts
+function traverse(obj, callback, parent2 = null, key = null, visited = /* @__PURE__ */ new WeakSet()) {
+  if (obj == null || typeof obj !== "object") {
+    callback(obj, (newValue) => {
+      if (parent2 !== null && key !== null) {
+        parent2[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(([key2, value]) => {
+      const update = (newValue) => {
+        obj[key2] = newValue;
+      };
+      callback(value, update);
+      traverse(value, callback, obj, key2, visited);
+    });
+  }
+}
+
+// src/functions/extract-localized-values.ts
+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] ?? void 0);
+    }
+  });
+  return data;
+}
+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;
+}
+
 // src/functions/fast-clone.ts
 var fastClone = (obj) => JSON.parse(JSON.stringify(obj));
 
@@ -499,7 +571,8 @@ function getProcessedBlock({
   rootState,
   rootSetState
 }) {
-  const transformedBlock = transformBlock(block);
+  let transformedBlock = resolveLocalizedValues(block, rootState.locale);
+  transformedBlock = transformBlock(transformedBlock);
   if (shouldEvaluateBindings) {
     return evaluateBindings({
       block: transformedBlock,
@@ -757,16 +830,24 @@ function mapStyleObjToStrIfNeeded(style) {
 }
 
 // src/components/block/block.helpers.ts
+var checkIsComponentRestricted = (component, model) => {
+  if (!component)
+    return true;
+  if (!model)
+    return false;
+  return component.models && component.models.length > 0 && !component.models.includes(model);
+};
 var getComponent = ({
   block,
-  registeredComponents
+  registeredComponents,
+  model
 }) => {
   const componentName = block.component?.name;
   if (!componentName) {
     return null;
   }
   const ref = registeredComponents[componentName];
-  if (!ref) {
+  if (!ref || checkIsComponentRestricted(ref, model)) {
     console.warn(`
       Could not find a registered component named "${componentName}". 
       If you registered it, is the file that registered it imported by the file that needs to render it?`);
@@ -820,11 +901,15 @@ var provideLinkComponent = (block, linkComponent) => {
     };
   return {};
 };
-var provideRegisteredComponents = (block, registeredComponents) => {
-  if (block?.shouldReceiveBuilderProps?.builderComponents)
+var provideRegisteredComponents = (block, registeredComponents, model) => {
+  if (block?.shouldReceiveBuilderProps?.builderComponents) {
+    const filteredRegisteredComponents = Object.fromEntries(Object.entries(registeredComponents).filter(([_, component]) => {
+      return !checkIsComponentRestricted(component, model);
+    }));
     return {
-      builderComponents: registeredComponents
+      builderComponents: filteredRegisteredComponents
     };
+  }
   return {};
 };
 var provideBuilderBlock = (block, builderBlock) => {
@@ -1286,7 +1371,8 @@ function Block(props) {
   const blockComponent = createMemo(() => {
     return getComponent({
       block: processedBlock(),
-      registeredComponents: props.registeredComponents
+      registeredComponents: props.registeredComponents,
+      model: props.context.model
     });
   });
   const Tag = createMemo(() => {
@@ -1319,7 +1405,7 @@ function Block(props) {
         ...provideBuilderBlock(blockComponent(), processedBlock()),
         ...provideBuilderContext(blockComponent(), props.context),
         ...provideLinkComponent(blockComponent(), props.linkComponent),
-        ...provideRegisteredComponents(blockComponent(), props.registeredComponents)
+        ...provideRegisteredComponents(blockComponent(), props.registeredComponents, props.context.model)
       },
       context: props.context,
       linkComponent: props.linkComponent,
@@ -1917,16 +2003,16 @@ function getSrcSet(url) {
 // src/blocks/image/image.tsx
 var _tmpl$5 = /* @__PURE__ */ template(`<source type=image/webp>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<picture><img>`);
-var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-7e6ffddc">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-7e6ffddc-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-7e6ffddc {
+var _tmpl$32 = /* @__PURE__ */ template(`<div class="builder-image-sizer div-070d7e88">`);
+var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-070d7e88-2>`);
+var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-070d7e88 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-7e6ffddc {
+}.div-070d7e88 {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-7e6ffddc-2 {
+}.div-070d7e88-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1942,7 +2028,7 @@ function Image(props) {
     const url = imageToUse;
     if (!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 props.srcset;
     }
     if (props.noWebp) {
@@ -1991,7 +2077,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-7e6ffddc", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
+      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-070d7e88", _v$2 = props.highPriority ? "eager" : "lazy", _v$3 = props.highPriority ? "high" : "auto", _v$4 = props.altText, _v$5 = props.altText ? void 0 : "presentation", _v$6 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -2857,6 +2943,10 @@ var componentInfo4 = {
   noWrap: true
 };
 
+// src/constants/file-types.ts
+var 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"];
+var 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"];
+
 // src/blocks/image/component-info.ts
 var componentInfo5 = {
   name: "Image",
@@ -2873,7 +2963,7 @@ var componentInfo5 = {
     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) => {
@@ -4405,7 +4495,7 @@ var componentInfo18 = {
     name: "image",
     bubble: true,
     type: "file",
-    allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
+    allowedFileTypes: IMAGE_FILE_TYPES,
     required: true
   }],
   noWrap: true,
@@ -4449,14 +4539,14 @@ var componentInfo19 = {
   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",
@@ -4712,7 +4802,7 @@ var createRegisterComponentMessage = (info) => ({
 var serializeFn = (fnValue) => {
   const fnStr = fnValue.toString().trim();
   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)`;
 };
 function serializeIncludingFunctions(info) {
@@ -4795,7 +4885,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.0";
+var SDK_VERSION = "3.0.1";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5513,6 +5603,12 @@ var subscribeToEditor = (model, callback, options) => {
   };
 };
 
+// src/components/content/components/enable-editor.helpers.ts
+var SDKS_USING_ELEMENT_REF_APPROACH = ["svelte", "qwik", "vue"];
+var needsElementRefDivForEditing = () => {
+  return SDKS_USING_ELEMENT_REF_APPROACH.includes(TARGET) && (isEditing() || isPreviewing());
+};
+
 // src/components/content/components/styles.helpers.ts
 var getCssFromFont = (font) => {
   const family = font.family + (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
@@ -5748,8 +5844,10 @@ function EnableEditor(props) {
           } : {}
         });
         Object.values(props.builderContextSignal.componentInfos).forEach((registeredComponent) => {
-          const message = createRegisterComponentMessage(registeredComponent);
-          window.parent?.postMessage(message, "*");
+          if (!props.model || !registeredComponent.models?.length || registeredComponent.models.includes(props.model)) {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
         });
         window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
       }
@@ -5821,7 +5919,7 @@ function EnableEditor(props) {
     get children() {
       return createComponent(Show, {
         get when() {
-          return props.builderContextSignal.content;
+          return props.builderContextSignal.content || needsElementRefDivForEditing();
         },
         get children() {
           return createComponent(Dynamic, mergeProps({
@@ -5839,6 +5937,11 @@ function EnableEditor(props) {
             },
             get ["builder-model"]() {
               return props.model;
+            },
+            get style() {
+              return {
+                display: !props.builderContextSignal.content && needsElementRefDivForEditing() ? "none" : void 0
+              };
             }
           }, {}, showContentProps, () => props.contentWrapperProps, {
             get component() {
@@ -5921,15 +6024,7 @@ function ContentComponent(props) {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
     contentId: props.content?.id
   }));
-  const [registeredComponents, setRegisteredComponents] = createSignal([...getDefaultRegisteredComponents(), ...props.customComponents?.filter(({
-    models
-  }) => {
-    if (!models?.length)
-      return true;
-    if (!props.model)
-      return true;
-    return models.includes(props.model);
-  }) || []].reduce((acc, {
+  const [registeredComponents, setRegisteredComponents] = createSignal([...getDefaultRegisteredComponents(), ...props.customComponents || []].reduce((acc, {
     component,
     ...info
   }) => ({
@@ -5955,15 +6050,7 @@ function ContentComponent(props) {
     canTrack: props.canTrack,
     apiKey: props.apiKey,
     apiVersion: props.apiVersion,
-    componentInfos: [...getDefaultRegisteredComponents(), ...props.customComponents?.filter(({
-      models
-    }) => {
-      if (!models?.length)
-        return true;
-      if (!props.model)
-        return true;
-      return models.includes(props.model);
-    }) || []].reduce((acc, {
+    componentInfos: [...getDefaultRegisteredComponents(), ...props.customComponents || []].reduce((acc, {
       component: _,
       ...info
     }) => ({
@@ -5973,7 +6060,8 @@ function ContentComponent(props) {
     inheritedStyles: {},
     BlocksWrapper: props.blocksWrapper || "div",
     BlocksWrapperProps: props.blocksWrapperProps || {},
-    nonce: props.nonce || ""
+    nonce: props.nonce || "",
+    model: props.model || ""
   });
   function contentSetState(newRootState) {
     setBuilderContextSignal((PREVIOUS_VALUE) => ({