@builder.io/react 3.0.7 → 3.0.8-1

package/src/blocks/Video.tsx

@@ -19,6 +19,7 @@ class VideoComponent extends React.Component<{
   width?: number;
   height?: number;
   fit?: 'contain' | 'cover' | 'fill';
+  preload?: 'auto' | 'metadata' | 'none';
   position?: string;
   posterImage?: string;
   lazyLoad?: boolean;
@@ -121,6 +122,7 @@ class VideoComponent extends React.Component<{
           muted={this.props.muted}
           controls={this.props.controls}
           loop={this.props.loop}
+          preload={this.props.preload || 'metadata'}
           className="builder-video"
           css={{
             width: '100%',
@@ -234,6 +236,12 @@ export const Video = Builder.registerComponent(withChildren(VideoComponent), {
       defaultValue: 'cover',
       enum: ['contain', 'cover', 'fill', 'auto'],
     },
+    {
+      name: 'preload',
+      type: 'text',
+      defaultValue: 'metadata',
+      enum: ['auto', 'metadata', 'none'],
+    },
     {
       name: 'fitContent',
       type: 'boolean',

package/src/components/builder-component.component.tsx

@@ -33,6 +33,7 @@ import { BuilderMetaContext } from '../store/builder-meta';
 import { tryEval } from '../functions/try-eval';
 import { toError } from '../to-error';
 import { getBuilderPixel } from '../functions/get-builder-pixel';
+import { isDebug } from '../functions/is-debug';
 
 function pick<T, K extends keyof T>(obj: T, ...keys: K[]): Pick<T, K> {
   const ret: any = {};
@@ -389,7 +390,33 @@ export class BuilderComponent extends React.Component<
 
     // TODO: pass this all the way down - symbols, etc
     // this.asServer = Boolean(props.hydrate && Builder.isBrowser)
+    if (this.inlinedContent?.data) {
+      const contentData = this.inlinedContent.data;
+      if (contentData.inputs) {
+        if (
+          contentData &&
+          contentData.inputs &&
+          Array.isArray(contentData.inputs) &&
+          contentData.inputs.length
+        ) {
+          if (!contentData.state) {
+            contentData.state = {};
+          }
 
+          contentData.inputs.forEach((input: any) => {
+            if (input) {
+              if (
+                input.name &&
+                input.defaultValue !== undefined &&
+                contentData.state![input.name] === undefined
+              ) {
+                contentData.state![input.name] = input.defaultValue;
+              }
+            }
+          });
+        }
+      }
+    }
     this.state = {
       // TODO: should change if this prop changes
       context: {
@@ -1389,11 +1416,7 @@ export class BuilderComponent extends React.Component<
               error.stack
             );
           } else {
-            if (
-              typeof process !== 'undefined' &&
-              typeof process.env !== 'undefined' &&
-              process.env.DEBUG
-            ) {
+            if (isDebug()) {
               console.debug(
                 'Builder custom code error:',
                 error.message,

package/src/functions/is-debug.ts

@@ -0,0 +1,5 @@
+export function isDebug(): boolean {
+  return Boolean(
+    typeof process !== 'undefined' && typeof process.env !== 'undefined' && process.env.DEBUG
+  );
+}

package/src/functions/string-to-function.ts

@@ -1,5 +1,6 @@
 import { Builder, builder } from '@builder.io/sdk';
 import { safeDynamicRequire } from './safe-dynamic-require';
+import { isDebug } from './is-debug';
 
 const fnCache: { [key: string]: BuilderEvanFunction | undefined } = {};
 
@@ -83,6 +84,7 @@ export function stringToFunction(
           }
           /* Alias */
           var ctx = context;
+          var log = console.log.bind(console);
           with (rootState) {
             ${useReturn ? `return (${str});` : str};
           }
@@ -117,21 +119,35 @@ export function stringToFunction(
         // browser bundler's like rollup and webpack. Our rollup plugin strips these comments only
         // for the server build
         // TODO: cache these for better performancs with new VmScript
-        // tslint:disable:comment-format
-        const { VM } = safeDynamicRequire('vm2') as typeof import('vm2');
-        const [state, event, _block, _builder, _Device, _update, _Builder, context] = args;
+        const isolateContext: import('isolated-vm').Context = getIsolateContext();
+        const jail = isolateContext.global;
+        // This makes the global object available in the context as `global`. We use `derefInto()` here
+        // because otherwise `global` would actually be a Reference{} object in the new isolate.
+        jail.setSync('global', jail.derefInto());
 
-        return new VM({
-          timeout: 100,
-          sandbox: {
-            ...state,
-            ...{ state },
-            ...{ context },
-            ...{ builder: api },
-            event,
-          },
-        }).run(str.replace(/(^|;)return /, '$1'));
-        // tslint:enable:comment-format
+        // We will create a basic `log` function for the new isolate to use.
+        jail.setSync('log', function (...args: any[]) {
+          if (isDebug()) {
+            console.log(...args);
+          }
+        });
+
+        const ivm = safeDynamicRequire('isolated-vm') as typeof import('isolated-vm');
+        return isolateContext.evalClosureSync(
+          makeFn(str, useReturn),
+          args.map((arg, index) =>
+            typeof arg === 'object'
+              ? new ivm.Reference(
+                  index === 3
+                    ? {
+                        ...arg,
+                        getUserAttributes: () => arg.getUserAttributes(''),
+                      }
+                    : arg
+                )
+              : null
+          )
+        );
       }
     } catch (error: any) {
       if (Builder.isBrowser) {
@@ -143,11 +159,7 @@ export function stringToFunction(
           error.stack || error
         );
       } else {
-        if (
-          typeof process !== 'undefined' &&
-          typeof process.env !== 'undefined' &&
-          process.env.DEBUG
-        ) {
+        if (isDebug()) {
           console.debug(
             'Builder custom code error:',
             error.message || error,
@@ -170,3 +182,43 @@ export function stringToFunction(
 
   return final;
 }
+
+const makeFn = (code: string, useReturn: boolean) => {
+  const names = ['state', 'event', 'block', 'builder', 'Device', 'update', 'Builder', 'context'];
+  return `
+  const refToProxy = (obj) => {
+  if (typeof obj !== 'object' || obj === null) {
+    return obj;
+  }
+  return new Proxy({}, {
+      get(target, key) {
+          const val = obj.getSync(key);
+          if (typeof val?.getSync === 'function') {
+              return refToProxy(val);
+          }
+          return val;
+      },
+      set(target, key, value) {
+          obj.setSync(key, value);
+      },
+      deleteProperty(target, key) {
+          obj.deleteSync(key);
+      }
+    })
+}
+`.concat(names.map((arg, index) => `var ${arg} = refToProxy($${index});`).join('\n')).concat(`
+var ctx = context;
+${useReturn ? `return (${code});` : code};
+`);
+};
+
+const getIsolateContext = () => {
+  const _Builder = Builder as any;
+  if (_Builder.serverContext) {
+    return _Builder.serverContext;
+  }
+  const ivm = safeDynamicRequire('isolated-vm') as typeof import('isolated-vm');
+  const isolate = new ivm.Isolate({ memoryLimit: 128 });
+  _Builder.serverContext = isolate.createContextSync();
+  return _Builder.serverContext;
+};

package/src/functions/try-eval.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { Builder } from '@builder.io/sdk';
 import { safeDynamicRequire } from './safe-dynamic-require';
+import { isDebug } from './is-debug';
 
 export const tryEval = (str?: string, data: any = {}, errors?: Error[]): any => {
   const value = str;
@@ -70,11 +71,7 @@ export const tryEval = (str?: string, data: any = {}, errors?: Error[]): any =>
     if (Builder.isBrowser) {
       console.warn('Builder custom code error:', error.message, 'in', str, error.stack);
     } else {
-      if (
-        typeof process !== 'undefined' &&
-        typeof process.env !== 'undefined' &&
-        process.env.DEBUG
-      ) {
+      if (isDebug()) {
         console.debug('Builder custom code error:', error.message, 'in', str, error.stack);
       }
       // Add to req.options.errors to return to client