@builder.io/sdk-solid 2.0.15 → 2.0.21

package/lib/edge/index.js

@@ -261,29 +261,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,
@@ -318,14 +295,27 @@ function flattenState({
   });
 }
 
-// src/functions/set.ts
-var set = (obj, _path, value) => {
-  if (Object(obj) !== obj) {
-    return obj;
-  }
-  const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
-  path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
-  return obj;
+// 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/functions/evaluate/edge-runtime/acorn-interpreter.ts
@@ -3397,22 +3387,56 @@ t.VALUE_IN_DESCRIPTOR = Ia;
 var acorn_interpreter_default = t;
 
 // src/functions/evaluate/edge-runtime/edge-runtime.ts
+function patchInterpreter() {
+  const originalGetProperty = acorn_interpreter_default.prototype.getProperty;
+  const originalSetProperty = acorn_interpreter_default.prototype.setProperty;
+  function newGetProperty(obj, name) {
+    if (obj == null || !obj._connected) {
+      return originalGetProperty.call(this, obj, name);
+    }
+    const value = obj._connected[name];
+    if (Array.isArray(value)) {
+      return this.nativeToPseudo(value);
+    }
+    if (typeof value === "object") {
+      return this.createConnectedObject(value);
+    }
+    return value;
+  }
+  function newSetProperty(obj, name, value, opt_descriptor) {
+    if (obj == null || !obj._connected) {
+      return originalSetProperty.call(this, obj, name, value, opt_descriptor);
+    }
+    obj._connected[name] = this.pseudoToNative(value);
+  }
+  const getKeys = [];
+  const setKeys = [];
+  for (const key of Object.keys(acorn_interpreter_default.prototype)) {
+    if (acorn_interpreter_default.prototype[key] === originalGetProperty) {
+      getKeys.push(key);
+    }
+    if (acorn_interpreter_default.prototype[key] === originalSetProperty) {
+      setKeys.push(key);
+    }
+  }
+  for (const key of getKeys) {
+    acorn_interpreter_default.prototype[key] = newGetProperty;
+  }
+  for (const key of setKeys) {
+    acorn_interpreter_default.prototype[key] = newSetProperty;
+  }
+  acorn_interpreter_default.prototype.createConnectedObject = function(obj) {
+    const connectedObject = this.createObject(this.OBJECT);
+    connectedObject._connected = obj;
+    return connectedObject;
+  };
+}
+patchInterpreter();
 var processCode = (code) => {
-  return code.split("\n").map((line) => {
-    const trimmed = line.trim();
-    if (line.includes("__awaiter"))
-      return void 0;
-    const isStateSetter = trimmed.startsWith("state.");
-    if (!isStateSetter)
-      return line;
-    const [lhs, rhs] = trimmed.split("=");
-    const setStr = lhs.replace("state.", "").trim();
-    const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
-    return `
-  ${line}
-  ${setExpr}
-  `;
-  }).filter(Boolean).join("\n");
+  return code.replace(/^.*?function main\(\)/, `
+var __awaiter = function (e, t, n, r) {return r()},
+__generator = function (e, t) { return t() };
+function main()`).replace(/\?\./g, ".");
 };
 var getJSONValName = (val) => val + "JSON";
 var runInEdge = ({
@@ -3424,10 +3448,11 @@ var runInEdge = ({
   rootSetState,
   code
 }) => {
-  const state = {
-    ...rootState,
-    ...localState
-  };
+  const state = flattenState({
+    rootState,
+    localState,
+    rootSetState
+  });
   const properties = getFunctionArguments({
     builder,
     context,
@@ -3436,6 +3461,9 @@ var runInEdge = ({
   });
   const prependedCode = properties.map(([key]) => {
     const jsonValName = getJSONValName(key);
+    if (key === "state") {
+      return ``;
+    }
     return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
   }).join("\n");
   const cleanedCode = processCode(code);
@@ -3451,16 +3479,15 @@ function theFunction() {
 }
 theFunction();
 `;
-  const setRootState = (prop, value) => {
-    const newState = set(state, prop, value);
-    rootSetState?.(newState);
-  };
   const initFunc = function(interpreter, globalObject) {
     properties.forEach(([key, val]) => {
-      const jsonVal = JSON.stringify(val);
-      interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+      if (key === "state") {
+        interpreter.setProperty(globalObject, key, interpreter.createConnectedObject(val), interpreter.READONLY_DESCRIPTOR);
+      } else {
+        const jsonVal = JSON.stringify(val);
+        interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+      }
     });
-    interpreter.setProperty(globalObject, "setRootState", interpreter.createNativeFunction(setRootState));
   };
   const myInterpreter = new acorn_interpreter_default(transformed, initFunc);
   myInterpreter.run();
@@ -3477,24 +3504,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) : runInEdge(args);
+var chooseBrowserOrServerEval = (args) => isBrowser() || shouldForceBrowserRuntimeInNode({
+  shouldLogWarning: true
+}) ? runInBrowser(args) : runInEdge(args);
 
 // src/functions/evaluate/evaluate.ts
 var DISABLE_CACHE = true;
@@ -3571,6 +3604,16 @@ function evaluate({
 // src/functions/fast-clone.ts
 var fastClone = (obj) => JSON.parse(JSON.stringify(obj));
 
+// src/functions/set.ts
+var set = (obj, _path, value) => {
+  if (Object(obj) !== obj) {
+    return obj;
+  }
+  const path = Array.isArray(_path) ? _path : _path.toString().match(/[^.[\]]+/g);
+  path.slice(0, -1).reduce((a, c, i) => Object(a[c]) === a[c] ? a[c] : a[c] = Math.abs(Number(path[i + 1])) >> 0 === +path[i + 1] ? [] : {}, obj)[path[path.length - 1]] = value;
+  return obj;
+};
+
 // src/functions/transform-block.ts
 function transformBlock(block) {
   return block;
@@ -4242,6 +4285,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 ? {
@@ -4258,17 +4309,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;
 
@@ -4643,7 +4720,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;
@@ -4679,7 +4756,7 @@ function BlocksWrapper(props) {
   });
   return [createComponent(Dynamic, mergeProps({
     get ["class"]() {
-      return className() + " dynamic-4da8c6f4";
+      return className() + " dynamic-68b2d7fe";
     },
     ref(r$) {
       const _ref$ = blocksWrapperRef;
@@ -4775,7 +4852,7 @@ var getColumnsClass = (id2) => {
 
 // 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;
 }`);
@@ -4896,7 +4973,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();
@@ -5021,16 +5098,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;
@@ -5094,7 +5171,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()
@@ -8376,7 +8453,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 = {};
@@ -8729,22 +8806,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;
@@ -8781,7 +8842,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
         });
@@ -8805,6 +8866,8 @@ function EnableEditor(props) {
     }
   }
   let elementRef;
+  runHttpRequests();
+  emitStateUpdate();
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
@@ -8859,14 +8922,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) {
@@ -8874,37 +8929,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;
@@ -9072,6 +9117,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 {