@builder.io/sdk-solid 2.0.15 → 2.0.21

package/dist/index.d.ts

@@ -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;
 
@@ -323,24 +323,30 @@ function isNodeRuntime() {
 }
 
 // src/functions/evaluate/should-force-browser-runtime-in-node.ts
-var shouldForceBrowserRuntimeInNode = () => {
+var shouldForceBrowserRuntimeInNode = ({
+  shouldLogWarning
+}) => {
   if (!isNodeRuntime())
     return false;
   const isArm64 = process.arch === "arm64";
   const isNode20 = process.version.startsWith("v20");
   const hasNoNodeSnapshotNodeOption = process.env.NODE_OPTIONS?.includes("--no-node-snapshot");
   if (isArm64 && isNode20 && !hasNoNodeSnapshotNodeOption) {
-    logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
+    if (shouldLogWarning) {
+      logger.log(`Skipping usage of \`isolated-vm\` to avoid crashes in Node v20 on an arm64 machine.
     If you would like to use the \`isolated-vm\` package on this machine, please provide the \`NODE_OPTIONS=--no-node-snapshot\` config to your Node process.
     See https://github.com/BuilderIO/builder/blob/main/packages/sdks/README.md#node-v20--m1-macs-apple-silicon-support for more information.
     `);
+    }
     return true;
   }
   return false;
 };
 
 // src/functions/evaluate/choose-eval.ts
-var chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode() ? runInBrowser(args) : runInBrowser(args);
+var chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode({
+  shouldLogWarning: true
+}) ? runInBrowser(args) : runInBrowser(args);
 
 // src/functions/evaluate/evaluate.ts
 var DISABLE_CACHE = true;
@@ -1102,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 ? {
@@ -1118,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;
 
@@ -1503,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;
@@ -1539,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;
@@ -1635,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;
 }`);
@@ -1756,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();
@@ -1881,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;
@@ -1955,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()
@@ -5245,7 +5285,7 @@ function isFromTrustedHost(trustedHosts, e) {
 }
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "2.0.15";
+var SDK_VERSION = "2.0.21";
 
 // src/functions/register.ts
 var registry = {};
@@ -5599,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;
@@ -5651,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
         });
@@ -5676,6 +5700,8 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
+  runHttpRequests();
+  emitStateUpdate();
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
@@ -5730,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) {
@@ -5745,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;
@@ -5943,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 {