@builder.io/sdk-svelte 2.0.16 → 2.0.21

package/src/functions/evaluate/browser-runtime/browser.ts

@@ -1,6 +1,5 @@
-import type { BuilderRenderState } from '../../../context/types';
 import type { ExecutorArgs } from '../helpers';
-import { getFunctionArguments } from '../helpers';
+import { flattenState, getFunctionArguments } from '../helpers';
 export const runInBrowser = ({
   code,
   builder,
@@ -21,41 +20,4 @@ export const runInBrowser = ({
     })
   });
   return new Function(...functionArgs.map(([name]) => name), code)(...functionArgs.map(([, value]) => value));
-};
-export function flattenState({
-  rootState,
-  localState,
-  rootSetState
-}: {
-  rootState: Record<string | symbol, any>;
-  localState: Record<string | symbol, any> | undefined;
-  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
-}): BuilderRenderState {
-  return new Proxy(rootState, {
-    get: (target, prop) => {
-      if (localState && prop in localState) {
-        return localState[prop];
-      }
-      const val = target[prop];
-      if (typeof val === 'object' && val !== null) {
-        return flattenState({
-          rootState: val,
-          localState: undefined,
-          rootSetState: rootSetState ? subState => {
-            target[prop] = subState;
-            rootSetState(target);
-          } : undefined
-        });
-      }
-      return val;
-    },
-    set: (target, prop, value) => {
-      if (localState && prop in localState) {
-        throw new Error('Writing to local state is not allowed as it is read-only.');
-      }
-      target[prop] = value;
-      rootSetState?.(target);
-      return true;
-    }
-  });
 }

package/src/functions/evaluate/edge-runtime/edge-runtime.ts

@@ -1,26 +1,66 @@
 import { logger } from '../../../helpers/logger';
-import { set } from '../../set';
 import type { ExecutorArgs } from '../helpers';
-import { getFunctionArguments } from '../helpers';
+import { flattenState, getFunctionArguments } from '../helpers';
 import Interpreter from './acorn-interpreter';
-const processCode = (code: string) => {
-  return code.split('\n').map(line => {
-    const trimmed = line.trim();
-
-    // this async wrapper doesn't work in JS-interpreter, so we drop it.
-    if (line.includes('__awaiter')) return undefined;
 
-    // we find all state setter expressions and append a call to setRootState afterwards
-    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');
+/**
+ * https://stackoverflow.com/a/46503625
+ */
+function patchInterpreter() {
+  const originalGetProperty = Interpreter.prototype.getProperty;
+  const originalSetProperty = Interpreter.prototype.setProperty;
+  function newGetProperty(this: typeof Interpreter, obj: any, name: any) {
+    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') {
+      // if the value is an object itself, create another connected object
+      return this.createConnectedObject(value);
+    }
+    return value;
+  }
+  function newSetProperty(this: typeof Interpreter, obj: any, name: any, value: any, opt_descriptor: any) {
+    if (obj == null || !obj._connected) {
+      return originalSetProperty.call(this, obj, name, value, opt_descriptor);
+    }
+    obj._connected[name] = this.pseudoToNative(value);
+  }
+  const getKeys: string[] = [];
+  const setKeys: string[] = [];
+  for (const key of Object.keys(Interpreter.prototype)) {
+    if (Interpreter.prototype[key] === originalGetProperty) {
+      getKeys.push(key);
+    }
+    if (Interpreter.prototype[key] === originalSetProperty) {
+      setKeys.push(key);
+    }
+  }
+  for (const key of getKeys) {
+    Interpreter.prototype[key] = newGetProperty;
+  }
+  for (const key of setKeys) {
+    Interpreter.prototype[key] = newSetProperty;
+  }
+  Interpreter.prototype.createConnectedObject = function (obj: any) {
+    const connectedObject = this.createObject(this.OBJECT);
+    connectedObject._connected = obj;
+    return connectedObject;
+  };
+}
+patchInterpreter();
+const processCode = (code: string) => {
+  return code
+  // strip async/await polyfill: remove anything before 'function main()'
+  .replace(/^.*?function main\(\)/, `
+var __awaiter = function (e, t, n, r) {return r()},
+__generator = function (e, t) { return t() };
+function main()`)
+  // replace ?. with .
+  .replace(/\?\./g, '.');
 };
 const getJSONValName = (val: string) => val + 'JSON';
 export const runInEdge = ({
@@ -32,10 +72,11 @@ export const runInEdge = ({
   rootSetState,
   code
 }: ExecutorArgs) => {
-  const state = {
-    ...rootState,
-    ...localState
-  };
+  const state = flattenState({
+    rootState,
+    localState,
+    rootSetState
+  });
   const properties = getFunctionArguments({
     builder,
     context,
@@ -48,6 +89,9 @@ export const 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);
@@ -63,24 +107,18 @@ function theFunction() {
 }
 theFunction();
 `;
-  const setRootState = (prop: string, value: any) => {
-    const newState = set(state, prop, value);
-    rootSetState?.(newState);
-  };
   const initFunc = function (interpreter: any, globalObject: any) {
     /**
      * serialize all function args to JSON strings
      */
     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);
+      }
     });
-
-    /**
-     * Add a JavaScript function "setRootState" to the interpreter's global object, that will be called whenever a
-     * state property is set. This function will update the state object.
-     */
-    interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
   };
   const myInterpreter = new Interpreter(transformed, initFunc);
   myInterpreter.run();

package/src/functions/evaluate/helpers.ts

@@ -53,4 +53,41 @@ export const parseCode = (code: string, {
   isExpression && !(code.includes(';') || code.includes(' return ') || code.trim().startsWith('return '));
   const useCode = useReturn ? `return (${code});` : code;
   return useCode;
+};
+export function flattenState({
+  rootState,
+  localState,
+  rootSetState
+}: {
+  rootState: Record<string | symbol, any>;
+  localState: Record<string | symbol, any> | undefined;
+  rootSetState: ((rootState: BuilderRenderState) => void) | undefined;
+}): BuilderRenderState {
+  return new Proxy(rootState, {
+    get: (target, prop) => {
+      if (localState && prop in localState) {
+        return localState[prop];
+      }
+      const val = target[prop];
+      if (typeof val === 'object' && val !== null) {
+        return flattenState({
+          rootState: val,
+          localState: undefined,
+          rootSetState: rootSetState ? subState => {
+            target[prop] = subState;
+            rootSetState(target);
+          } : undefined
+        });
+      }
+      return val;
+    },
+    set: (target, prop, value) => {
+      if (localState && prop in localState) {
+        throw new Error('Writing to local state is not allowed as it is read-only.');
+      }
+      target[prop] = value;
+      rootSetState?.(target);
+      return true;
+    }
+  });
 }

package/src/functions/evaluate/node-runtime/node-runtime.ts

@@ -80,7 +80,7 @@ export const setIvm = (ivm: IsolatedVMImport, options: IsolateOptions = {}) => {
 };
 
 // only mention the script for SDKs that have it.
-const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik';
+const SHOULD_MENTION_INITIALIZE_SCRIPT = SDK_NAME === '@builder.io/sdk-react-nextjs' || SDK_NAME === '@builder.io/sdk-react' || SDK_NAME === '@builder.io/sdk-qwik' || SDK_NAME === '@builder.io/sdk-vue';
 const getIvm = (): IsolatedVMImport => {
   try {
     if (IVM_INSTANCE) return IVM_INSTANCE;