@builder.io/sdk-solid 2.0.16 → 2.0.22

package/dist/index.d.ts

@@ -221,7 +221,7 @@ interface Input {
     valueType?: {
         type?: string;
     };
-    onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
+    onChange?: ((options: Map<string, any>, previousOptions?: Map<string, any>) => void | Promise<void>) | string;
     meta?: Record<string, any>;
 }
 
@@ -480,6 +480,11 @@ interface ComponentInfo {
 }
 type Permission = 'read' | 'publish' | 'editCode' | 'editDesigns' | 'admin' | 'create';
 
+/**
+ * To be overriden to the correct `Component` type for each framework.
+ */
+type ComponentReference = any;
+
 /**
  * no-op type for extra context types on a per-SDK basis
  * See `overrides/react-native/src/context/extra-context-types.ts` for an example
@@ -488,7 +493,7 @@ interface ExtraContextTypes {
 }
 
 type RegisteredComponent = ComponentInfo & {
-    component: any;
+    component: ComponentReference;
 };
 type RegisteredComponents = Dictionary<RegisteredComponent>;
 type BuilderRenderState = Record<string, unknown>;

package/lib/browser/dev.js

@@ -257,29 +257,6 @@ var parseCode = (code, {
   const useCode = useReturn ? `return (${code});` : code;
   return useCode;
 };
-
-// src/functions/evaluate/browser-runtime/browser.ts
-var runInBrowser = ({
-  code,
-  builder,
-  context,
-  event,
-  localState,
-  rootSetState,
-  rootState
-}) => {
-  const functionArgs = getFunctionArguments({
-    builder,
-    context,
-    event,
-    state: flattenState({
-      rootState,
-      localState,
-      rootSetState
-    })
-  });
-  return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
-};
 function flattenState({
   rootState,
   localState,
@@ -314,6 +291,29 @@ function flattenState({
   });
 }
 
+// src/functions/evaluate/browser-runtime/browser.ts
+var runInBrowser = ({
+  code,
+  builder,
+  context,
+  event,
+  localState,
+  rootSetState,
+  rootState
+}) => {
+  const functionArgs = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state: flattenState({
+      rootState,
+      localState,
+      rootSetState
+    })
+  });
+  return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
+};
+
 // src/helpers/nullable.ts
 var checkIsDefined = (maybeT) => maybeT !== null && maybeT !== void 0;
 
@@ -1108,6 +1108,14 @@ function BlockWrapper(props) {
   });
 }
 var block_wrapper_default = BlockWrapper;
+function Awaiter(props) {
+  onMount(() => {
+  });
+  return memo(() => props.children);
+}
+var awaiter_default = Awaiter;
+
+// src/components/block/components/interactive-element.tsx
 function InteractiveElement(props) {
   const attributes = createMemo(() => {
     return props.includeBlockProps ? {
@@ -1124,17 +1132,43 @@ function InteractiveElement(props) {
       })
     } : {};
   });
-  return createComponent(Dynamic, mergeProps(() => props.wrapperProps, {
-    get attributes() {
-      return attributes();
+  return createComponent(Show, {
+    get fallback() {
+      return createComponent(Dynamic, mergeProps(() => props.wrapperProps, {
+        get attributes() {
+          return attributes();
+        },
+        get component() {
+          return props.Wrapper;
+        },
+        get children() {
+          return props.children;
+        }
+      }));
     },
-    get component() {
-      return props.Wrapper;
+    get when() {
+      return props.Wrapper.load;
     },
     get children() {
-      return props.children;
+      return createComponent(awaiter_default, {
+        get load() {
+          return props.Wrapper.load;
+        },
+        get fallback() {
+          return props.Wrapper.fallback;
+        },
+        get props() {
+          return props.wrapperProps;
+        },
+        get attributes() {
+          return attributes();
+        },
+        get children() {
+          return props.children;
+        }
+      });
     }
-  }));
+  });
 }
 var interactive_element_default = InteractiveElement;
 
@@ -1509,7 +1543,7 @@ function Block(props) {
   });
 }
 var block_default = Block;
-var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-4da8c6f4 {
+var _tmpl$2 = /* @__PURE__ */ template(`<style>.dynamic-68b2d7fe {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1545,7 +1579,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-4da8c6f4";
+      return className() + " dynamic-68b2d7fe";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -1641,7 +1675,7 @@ var getColumnsClass = (id) => {
 
 // src/blocks/columns/columns.tsx
 var _tmpl$3 = /* @__PURE__ */ template(`<div>`);
-var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-3ff242de {
+var _tmpl$22 = /* @__PURE__ */ template(`<style>.div-46766f1c {
   display: flex;
   line-height: normal;
 }`);
@@ -1762,7 +1796,7 @@ function Columns(props) {
     const _el$ = _tmpl$3();
     spread(_el$, mergeProps({
       get ["class"]() {
-        return getColumnsClass(props.builderBlock?.id) + " div-3ff242de";
+        return getColumnsClass(props.builderBlock?.id) + " div-46766f1c";
       },
       get style() {
         return columnsCssVars();
@@ -1887,16 +1921,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-4512e110">`);
-var _tmpl$42 = /* @__PURE__ */ template(`<div class=div-4512e110-2>`);
-var _tmpl$52 = /* @__PURE__ */ template(`<style>.img-4512e110 {
+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 {
   opacity: 1;
   transition: opacity 0.2s ease-in-out;
-}.div-4512e110 {
+}.div-7e6ffddc {
   width: 100%;
   pointer-events: none;
   font-size: 0;
-}.div-4512e110-2 {
+}.div-7e6ffddc-2 {
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -1961,7 +1995,7 @@ function Image(props) {
       }
     }), _el$3);
     effect((_p$) => {
-      const _v$ = "builder-image" + (props.className ? " " + props.className : "") + " img-4512e110", _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-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 = {
         "object-position": props.backgroundPosition || "center",
         "object-fit": props.backgroundSize || "cover",
         ...aspectRatioCss()
@@ -5251,7 +5285,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.16";
+var SDK_VERSION = "2.0.22";
 
 // src/functions/register.ts
 var registry = {};
@@ -5605,22 +5639,6 @@ function EnableEditor(props) {
       }
     })(event);
   }
-  function evaluateJsCode() {
-    const jsCode = props.builderContextSignal.content?.data?.jsCode;
-    if (jsCode) {
-      evaluate({
-        code: jsCode,
-        context: props.context || {},
-        localState: void 0,
-        rootState: props.builderContextSignal.rootState,
-        rootSetState: props.builderContextSignal.rootSetState,
-        /**
-         * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
-         */
-        enableCache: false
-      });
-    }
-  }
   function onClick(event) {
     if (props.builderContextSignal.content) {
       const variationId = props.builderContextSignal.content?.testVariationId;
@@ -5657,7 +5675,7 @@ function EnableEditor(props) {
         rootSetState: props.builderContextSignal.rootSetState,
         enableCache: true
       })));
-      fetch2(evaluatedUrl).then((response) => response.json()).then((json) => {
+      fetch(evaluatedUrl).then((response) => response.json()).then((json) => {
         mergeNewRootState({
           [key]: json
         });
@@ -5682,6 +5700,8 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
+  runHttpRequests();
+  emitStateUpdate();
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
@@ -5736,14 +5756,6 @@ function EnableEditor(props) {
       }
     }
   });
-  onMount(() => {
-    if (!props.apiKey) {
-      logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
-    }
-    evaluateJsCode();
-    runHttpRequests();
-    emitStateUpdate();
-  });
   const onUpdateFn_0_props_content = createMemo(() => props.content);
   function onUpdateFn_0() {
     if (props.content) {
@@ -5751,37 +5763,27 @@ function EnableEditor(props) {
     }
   }
   createEffect(on(() => [onUpdateFn_0_props_content()], onUpdateFn_0));
-  const onUpdateFn_1_props_builderContextSignal_content__data__jsCode = createMemo(() => props.builderContextSignal.content?.data?.jsCode);
+  const onUpdateFn_1_props_builderContextSignal_rootState = createMemo(() => props.builderContextSignal.rootState);
   function onUpdateFn_1() {
-    evaluateJsCode();
-  }
-  createEffect(on(() => [onUpdateFn_1_props_builderContextSignal_content__data__jsCode()], onUpdateFn_1));
-  const onUpdateFn_2_props_builderContextSignal_content__data__httpRequests = createMemo(() => props.builderContextSignal.content?.data?.httpRequests);
-  function onUpdateFn_2() {
-    runHttpRequests();
-  }
-  createEffect(on(() => [onUpdateFn_2_props_builderContextSignal_content__data__httpRequests()], onUpdateFn_2));
-  const onUpdateFn_3_props_builderContextSignal_rootState = createMemo(() => props.builderContextSignal.rootState);
-  function onUpdateFn_3() {
     emitStateUpdate();
   }
-  createEffect(on(() => [onUpdateFn_3_props_builderContextSignal_rootState()], onUpdateFn_3));
-  const onUpdateFn_4_props_data = createMemo(() => props.data);
-  function onUpdateFn_4() {
+  createEffect(on(() => [onUpdateFn_1_props_builderContextSignal_rootState()], onUpdateFn_1));
+  const onUpdateFn_2_props_data = createMemo(() => props.data);
+  function onUpdateFn_2() {
     if (props.data) {
       mergeNewRootState(props.data);
     }
   }
-  createEffect(on(() => [onUpdateFn_4_props_data()], onUpdateFn_4));
-  const onUpdateFn_5_props_locale = createMemo(() => props.locale);
-  function onUpdateFn_5() {
+  createEffect(on(() => [onUpdateFn_2_props_data()], onUpdateFn_2));
+  const onUpdateFn_3_props_locale = createMemo(() => props.locale);
+  function onUpdateFn_3() {
     if (props.locale) {
       mergeNewRootState({
         locale: props.locale
       });
     }
   }
-  createEffect(on(() => [onUpdateFn_5_props_locale()], onUpdateFn_5));
+  createEffect(on(() => [onUpdateFn_3_props_locale()], onUpdateFn_3));
   return createComponent(builder_context_default.Provider, {
     get value() {
       return props.builderContextSignal;
@@ -5949,6 +5951,29 @@ function ContentComponent(props) {
       rootState: newRootState
     }));
   }
+  if (!props.apiKey) {
+    logger.error("No API key provided to `Content` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+  }
+  const jsCode = builderContextSignal().content?.data?.jsCode;
+  if (jsCode) {
+    evaluate({
+      code: jsCode,
+      context: props.context || {},
+      localState: void 0,
+      rootState: builderContextSignal().rootState,
+      rootSetState: (newState) => {
+        setBuilderContextSignal((PREVIOUS_VALUE) => ({
+          ...PREVIOUS_VALUE,
+          rootState: newState
+        }));
+      },
+      isExpression: false,
+      /**
+       * We don't want to cache the result of the JS code, since it's arbitrary side effect code.
+       */
+      enableCache: false
+    });
+  }
   return createComponent(components_context_default.Provider, {
     get value() {
       return {