@builder.io/sdk-solid 3.0.0 → 3.0.2

package/lib/node/dev.js

@@ -115,27 +115,11 @@ var builder_context_default = createContext({
   inheritedStyles: {},
   BlocksWrapper: "div",
   BlocksWrapperProps: {},
-  nonce: ""
+  nonce: "",
+  model: ""
 });
 var components_context_default = createContext({ registeredComponents: {} });
 
-// src/functions/get-block-component-options.ts
-function getBlockComponentOptions(block) {
-  return {
-    ...block.component?.options,
-    ...block.options
-  };
-}
-
-// src/helpers/omit.ts
-function omit(obj, ...values) {
-  const newObject = Object.assign({}, obj);
-  for (const key of values) {
-    delete newObject[key];
-  }
-  return newObject;
-}
-
 // src/helpers/logger.ts
 var MSG_PREFIX = "[Builder.io]: ";
 var logger = {
@@ -583,6 +567,109 @@ function evaluate({
   }
 }
 
+// src/functions/get-block-component-options.ts
+function getBlockComponentOptions(block, context) {
+  return {
+    ...block.component?.options,
+    ...block.options,
+    ...evaluateTextComponentTextOption(block, context)
+  };
+}
+var evaluateTextComponentTextOption = (block, context) => {
+  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, group) => evaluate({
+        code: group,
+        context,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState
+      }))
+    };
+  }
+};
+
+// src/helpers/omit.ts
+function omit(obj, ...values) {
+  const newObject = Object.assign({}, obj);
+  for (const key of values) {
+    delete newObject[key];
+  }
+  return newObject;
+}
+
+// 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/transform-block.ts
 function transformBlock(block) {
   return block;
@@ -663,23 +750,19 @@ var evaluateBindings = ({
 function getProcessedBlock({
   block,
   context,
-  shouldEvaluateBindings,
   localState,
   rootState,
   rootSetState
 }) {
-  const transformedBlock = transformBlock(block);
-  if (shouldEvaluateBindings) {
-    return evaluateBindings({
-      block: transformedBlock,
-      localState,
-      rootState,
-      rootSetState,
-      context
-    });
-  } else {
-    return transformedBlock;
-  }
+  let transformedBlock = resolveLocalizedValues(block, rootState.locale);
+  transformedBlock = transformBlock(transformedBlock);
+  return evaluateBindings({
+    block: transformedBlock,
+    localState,
+    rootState,
+    rootSetState,
+    context
+  });
 }
 
 // src/functions/camel-to-kebab-case.ts
@@ -926,16 +1009,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?`);
@@ -989,11 +1080,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) => {
@@ -1447,15 +1542,15 @@ function Block(props) {
       localState: props.context.localState,
       rootState: props.context.rootState,
       rootSetState: props.context.rootSetState,
-      context: props.context.context,
-      shouldEvaluateBindings: true
+      context: props.context.context
     });
     return blockToUse;
   });
   const blockComponent = createMemo(() => {
     return getComponent({
       block: processedBlock(),
-      registeredComponents: props.registeredComponents
+      registeredComponents: props.registeredComponents,
+      model: props.context.model
     });
   });
   const Tag = createMemo(() => {
@@ -1484,11 +1579,11 @@ function Block(props) {
       blockChildren: processedBlock().children ?? [],
       componentRef: blockComponent()?.component,
       componentOptions: {
-        ...getBlockComponentOptions(processedBlock()),
+        ...getBlockComponentOptions(processedBlock(), props.context),
         ...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,
@@ -2086,16 +2181,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;
@@ -2111,7 +2206,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) {
@@ -2160,7 +2255,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()
@@ -3026,6 +3121,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",
@@ -3042,7 +3141,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) => {
@@ -3560,26 +3659,10 @@ var componentInfo10 = {
 };
 var _tmpl$10 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
-  const processedText = createMemo(() => {
-    const context = props.builderContext;
-    const {
-      context: contextContext,
-      localState,
-      rootState,
-      rootSetState
-    } = context;
-    return String(props.text?.toString() || "").replace(/{{([^}]+)}}/g, (match, group) => evaluate({
-      code: group,
-      context: contextContext,
-      localState,
-      rootState,
-      rootSetState
-    }));
-  });
   return (() => {
     const _el$ = _tmpl$10();
     _el$.style.setProperty("outline", "none");
-    effect(() => _el$.innerHTML = processedText());
+    effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
   })();
 }
@@ -4574,7 +4657,7 @@ var componentInfo18 = {
     name: "image",
     bubble: true,
     type: "file",
-    allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
+    allowedFileTypes: IMAGE_FILE_TYPES,
     required: true
   }],
   noWrap: true,
@@ -4618,14 +4701,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",
@@ -4881,7 +4964,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) {
@@ -4964,7 +5047,7 @@ function getPreviewContent(_searchParams) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "3.0.0";
+var SDK_VERSION = "3.0.2";
 
 // src/helpers/sdk-headers.ts
 var getSdkHeaders = () => ({
@@ -5029,6 +5112,23 @@ function flattenMongoQuery(obj, _current, _res = {}) {
   }
   return _res;
 }
+function unflatten(obj) {
+  const result = {};
+  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;
+}
 
 // src/types/api-version.ts
 var DEFAULT_API_VERSION = "v3";
@@ -5093,7 +5193,7 @@ var generateContentUrl = (options) => {
   url.searchParams.set("noTraverse", String(noTraverse));
   url.searchParams.set("includeRefs", String(true));
   const finalLocale = locale || userAttributes?.locale;
-  let finalUserAttributes = userAttributes;
+  let finalUserAttributes = userAttributes || {};
   if (finalLocale) {
     url.searchParams.set("locale", finalLocale);
     finalUserAttributes = {
@@ -5131,11 +5231,15 @@ var generateContentUrl = (options) => {
     ...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) {
@@ -5148,6 +5252,28 @@ var generateContentUrl = (options) => {
   }
   return url;
 };
+var getUserAttributesFromQueryOptions = (queryOptions) => {
+  const newUserAttributes = {};
+  for (const key in queryOptions) {
+    if (key.startsWith("userAttributes.")) {
+      newUserAttributes[key] = queryOptions[key];
+      delete queryOptions[key];
+    }
+  }
+  return newUserAttributes;
+};
+var getUserAttributesAsJSON = (queryOptions) => {
+  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 {};
+};
 
 // src/functions/get-content/index.ts
 var checkContentHasResults = (content) => "results" in content;
@@ -5682,6 +5808,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 : "");
@@ -5917,8 +6049,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);
       }
@@ -5941,11 +6075,16 @@ function EnableEditor(props) {
         const searchParamPreviewModel = searchParams.get("builder.preview");
         const searchParamPreviewId = searchParams.get(`builder.overrides.${searchParamPreviewModel}`);
         const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
-        if (searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
+        if (searchParamPreviewModel === "BUILDER_STUDIO" || searchParamPreviewModel === props.model && previewApiKey === props.apiKey && (!props.content || searchParamPreviewId === props.content.id)) {
           fetchOneEntry({
-            model: props.model,
+            model: props.model || "",
             apiKey: props.apiKey,
-            apiVersion: props.builderContextSignal.apiVersion
+            apiVersion: props.builderContextSignal.apiVersion,
+            ...searchParamPreviewModel === "BUILDER_STUDIO" && props.context?.symbolId ? {
+              query: {
+                id: props.context.symbolId
+              }
+            } : {}
           }).then((content) => {
             if (content) {
               mergeNewContent(content);
@@ -5990,7 +6129,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({
@@ -6008,6 +6147,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() {
@@ -6090,15 +6234,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
   }) => ({
@@ -6124,15 +6260,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
     }) => ({
@@ -6142,7 +6270,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) => ({