@builder.io/sdk-solid 3.0.0 → 3.0.1

package/lib/browser/dev.jsx

@@ -95,7 +95,8 @@ var builder_context_default = createContext({
   inheritedStyles: {},
   BlocksWrapper: "div",
   BlocksWrapperProps: {},
-  nonce: ""
+  nonce: "",
+  model: ""
 });
 
 // src/context/components.context.ts
@@ -394,6 +395,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));
 
@@ -492,7 +564,8 @@ function getProcessedBlock({
   rootState,
   rootSetState
 }) {
-  const transformedBlock = transformBlock(block);
+  let transformedBlock = resolveLocalizedValues(block, rootState.locale);
+  transformedBlock = transformBlock(transformedBlock);
   if (shouldEvaluateBindings) {
     return evaluateBindings({
       block: transformedBlock,
@@ -750,16 +823,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?`);
@@ -813,11 +894,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) => {
@@ -1221,7 +1306,8 @@ function Block(props) {
   const blockComponent = createMemo5(() => {
     return getComponent({
       block: processedBlock(),
-      registeredComponents: props.registeredComponents
+      registeredComponents: props.registeredComponents,
+      model: props.context.model
     });
   });
   const Tag = createMemo5(() => {
@@ -1256,7 +1342,8 @@ function Block(props) {
         ...provideLinkComponent(blockComponent(), props.linkComponent),
         ...provideRegisteredComponents(
           blockComponent(),
-          props.registeredComponents
+          props.registeredComponents,
+          props.context.model
         )
       },
       context: props.context,
@@ -1680,7 +1767,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) {
@@ -1721,7 +1808,7 @@ function Image(props) {
       <picture>
         <Show8 when={webpSrcSet()}><source type="image/webp" srcset={webpSrcSet()} /></Show8>
         <img
-          class={"builder-image" + (props.className ? " " + props.className : "") + " img-7e6ffddc"}
+          class={"builder-image" + (props.className ? " " + props.className : "") + " img-070d7e88"}
           loading={props.highPriority ? "eager" : "lazy"}
           fetchpriority={props.highPriority ? "high" : "auto"}
           alt={props.altText}
@@ -1739,22 +1826,22 @@ function Image(props) {
       <Show8
         when={props.aspectRatio && !(props.builderBlock?.children?.length && props.fitContent)}
       ><div
-        class="builder-image-sizer div-7e6ffddc"
+        class="builder-image-sizer div-070d7e88"
         style={{
           "padding-top": props.aspectRatio * 100 + "%"
         }}
       /></Show8>
       <Show8 when={props.builderBlock?.children?.length && props.fitContent}>{props.children}</Show8>
-      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-7e6ffddc-2">{props.children}</div></Show8>
+      <Show8 when={!props.fitContent && props.builderBlock?.children?.length}><div class="div-070d7e88-2">{props.children}</div></Show8>
     </>
-    <style>{`.img-7e6ffddc {
+    <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;
@@ -2547,6 +2634,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",
@@ -2563,7 +2654,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) => {
@@ -3923,7 +4014,7 @@ var componentInfo18 = {
     name: "image",
     bubble: true,
     type: "file",
-    allowedFileTypes: ["jpeg", "jpg", "png", "svg", "gif", "webp"],
+    allowedFileTypes: IMAGE_FILE_TYPES,
     required: true
   }],
   noWrap: true,
@@ -3958,14 +4049,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",
@@ -4191,7 +4282,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) {
@@ -4276,7 +4367,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 = () => ({
@@ -4994,6 +5085,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 : "");
@@ -5240,8 +5337,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",
@@ -5318,7 +5417,9 @@ function EnableEditor(props) {
     }
   }
   createEffect3(on3(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
-  return <><builder_context_default.Provider value={props.builderContextSignal}><Show13 when={props.builderContextSignal.content}><Dynamic5
+  return <><builder_context_default.Provider value={props.builderContextSignal}><Show13
+    when={props.builderContextSignal.content || needsElementRefDivForEditing()}
+  ><Dynamic5
     class={getWrapperClassName(
       props.content?.testVariationId || props.content?.id
     )}
@@ -5327,6 +5428,9 @@ function EnableEditor(props) {
     onClick={(event) => onClick(event)}
     builder-content-id={props.builderContextSignal.content?.id}
     builder-model={props.model}
+    style={{
+      display: !props.builderContextSignal.content && needsElementRefDivForEditing() ? "none" : void 0
+    }}
     {...{}}
     {...showContentProps()}
     {...props.contentWrapperProps}
@@ -5407,13 +5511,7 @@ function ContentComponent(props) {
   const [registeredComponents, setRegisteredComponents] = createSignal18(
     [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents?.filter(({ models }) => {
-        if (!models?.length)
-          return true;
-        if (!props.model)
-          return true;
-        return models.includes(props.model);
-      }) || []
+      ...props.customComponents || []
     ].reduce(
       (acc, { component, ...info }) => ({
         ...acc,
@@ -5443,13 +5541,7 @@ function ContentComponent(props) {
     apiVersion: props.apiVersion,
     componentInfos: [
       ...getDefaultRegisteredComponents(),
-      ...props.customComponents?.filter(({ models }) => {
-        if (!models?.length)
-          return true;
-        if (!props.model)
-          return true;
-        return models.includes(props.model);
-      }) || []
+      ...props.customComponents || []
     ].reduce(
       (acc, { component: _, ...info }) => ({
         ...acc,
@@ -5460,7 +5552,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) => ({