@builder.io/sdk-react-native 2.0.11 → 2.0.13

package/src/components/block/block.tsx

@@ -13,7 +13,7 @@ import {
   Button,
   Linking,
 } from "react-native";
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 
 export type BlockProps = {
   block: BuilderBlock;
@@ -28,6 +28,7 @@ import type {
 } from "../../context/types";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options";
 import { getProcessedBlock } from "../../functions/get-processed-block";
+import { isPreviewing } from "../../server-index";
 import type { BuilderBlock } from "../../types/builder-block";
 import DynamicDiv from "../dynamic-div";
 import { bindAnimations } from "./animator";
@@ -47,14 +48,6 @@ import ComponentRef from "./components/component-ref/component-ref";
 import RepeatedBlock from "./components/repeated-block";
 
 function Block(props: BlockProps) {
-  function blockComponent() {
-    return getComponent({
-      block: props.block,
-      context: props.context,
-      registeredComponents: props.registeredComponents,
-    });
-  }
-
   function repeatItem() {
     return getRepeatItemData({
       block: props.block,
@@ -62,8 +55,16 @@ function Block(props: BlockProps) {
     });
   }
 
+  const [_processedBlock, set_processedBlock] = useState(() => ({
+    value: null as BuilderBlock | null,
+    update: false,
+  }));
+
   function processedBlock() {
-    return props.block.repeat?.collection
+    if (_processedBlock.value && !_processedBlock.update && !isPreviewing()) {
+      return _processedBlock.value;
+    }
+    const blockToUse = props.block.repeat?.collection
       ? props.block
       : getProcessedBlock({
           block: props.block,
@@ -73,6 +74,16 @@ function Block(props: BlockProps) {
           context: props.context.context,
           shouldEvaluateBindings: true,
         });
+    _processedBlock.value = blockToUse;
+    _processedBlock.update = false;
+    return blockToUse;
+  }
+
+  function blockComponent() {
+    return getComponent({
+      block: processedBlock(),
+      registeredComponents: props.registeredComponents,
+    });
   }
 
   function Tag() {
@@ -143,11 +154,15 @@ function Block(props: BlockProps) {
 
   useEffect(() => {}, []);
 
+  useEffect(() => {
+    _processedBlock.update = true;
+  });
+
   return (
     <>
       {canShowBlock() ? (
         <>
-          <BlockStyles block={props.block} context={props.context} />
+          <BlockStyles block={processedBlock()} context={props.context} />
           {!blockComponent?.()?.noWrap ? (
             <>
               {!repeatItem() ? (
@@ -201,19 +216,29 @@ function Block(props: BlockProps) {
                 </>
               )}
             </>
+          ) : !repeatItem() ? (
+            <ComponentRef
+              componentRef={componentRefProps().componentRef}
+              componentOptions={componentRefProps().componentOptions}
+              blockChildren={componentRefProps().blockChildren}
+              context={componentRefProps().context}
+              registeredComponents={componentRefProps().registeredComponents}
+              linkComponent={componentRefProps().linkComponent}
+              builderBlock={componentRefProps().builderBlock}
+              includeBlockProps={componentRefProps().includeBlockProps}
+              isInteractive={componentRefProps().isInteractive}
+            />
           ) : (
             <>
-              <ComponentRef
-                componentRef={componentRefProps().componentRef}
-                componentOptions={componentRefProps().componentOptions}
-                blockChildren={componentRefProps().blockChildren}
-                context={componentRefProps().context}
-                registeredComponents={componentRefProps().registeredComponents}
-                linkComponent={componentRefProps().linkComponent}
-                builderBlock={componentRefProps().builderBlock}
-                includeBlockProps={componentRefProps().includeBlockProps}
-                isInteractive={componentRefProps().isInteractive}
-              />
+              {repeatItem()?.map((data, index) => (
+                <RepeatedBlock
+                  key={index}
+                  repeatContext={data.context}
+                  block={data.block}
+                  registeredComponents={props.registeredComponents}
+                  linkComponent={props.linkComponent}
+                />
+              ))}
             </>
           )}
         </>

package/src/components/block/components/block-styles.tsx

@@ -24,7 +24,6 @@ import {
 import { TARGET } from "../../../constants/target";
 import type { BuilderContextInterface } from "../../../context/types";
 import { camelToKebabCase } from "../../../functions/camel-to-kebab-case";
-import { getProcessedBlock } from "../../../functions/get-processed-block";
 import { createCssClass } from "../../../helpers/css";
 import { checkIsDefined } from "../../../helpers/nullable";
 import type { BuilderBlock } from "../../../types/builder-block";
@@ -32,14 +31,7 @@ import InlinedStyles from "../../inlined-styles";
 
 function BlockStyles(props: BlockStylesProps) {
   function canShowBlock() {
-    const processedBlock = getProcessedBlock({
-      block: props.block,
-      localState: props.context.localState,
-      rootState: props.context.rootState,
-      rootSetState: props.context.rootSetState,
-      context: props.context.context,
-      shouldEvaluateBindings: true,
-    });
+    const processedBlock = props.block;
     // only render styles for blocks that are visible
     if (checkIsDefined(processedBlock.hide)) {
       return !processedBlock.hide;
@@ -51,14 +43,7 @@ function BlockStyles(props: BlockStylesProps) {
   }
 
   function css() {
-    const processedBlock = getProcessedBlock({
-      block: props.block,
-      localState: props.context.localState,
-      rootState: props.context.rootState,
-      rootSetState: props.context.rootSetState,
-      context: props.context.context,
-      shouldEvaluateBindings: true,
-    });
+    const processedBlock = props.block;
     const styles = processedBlock.responsiveStyles;
     const content = props.context.content;
     const sizesWithUpdatedBreakpoints = getSizesForBreakpoints(

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "2.0.11"
+export const SDK_VERSION = "2.0.13"

package/src/functions/evaluate/evaluate.ts

@@ -2,6 +2,20 @@ import { logger } from '../../helpers/logger';
 import { chooseBrowserOrServerEval } from './choose-eval';
 import type { EvaluatorArgs, ExecutorArgs } from './helpers';
 import { getBuilderGlobals, parseCode } from './helpers';
+
+// Caching is dangerous for several reasons
+// - JSON.stringify is not safe to run on things like `context`
+//   because anything can be passed, including non-stringifiable objects,
+//   circiular references, etc.
+// - JSON.stringify is expensive to run as a cache key
+// - This likely only helped because we were running processBlock multiple times
+//   but that is not fixed, and this will cause bugs and issues if enabled
+//
+// Perhaps the best approach is to allow users to configure if caching  is enabled or not
+// for instance on edge runtimes with slower evaluation times via the interpreter
+// That said, the repeat processBLock calls was making any evaluation time 10x+ slower
+// which is now fixed, so this still may not be necessary
+const DISABLE_CACHE = true;
 type EvalValue = unknown;
 class EvalCache {
   static cacheLimit = 20;
@@ -53,7 +67,7 @@ export function evaluate({
     rootState,
     localState
   };
-  if (enableCache) {
+  if (enableCache && !DISABLE_CACHE) {
     const cacheKey = EvalCache.getCacheKey(args);
     const cachedValue = EvalCache.getCachedValue(cacheKey);
     if (cachedValue) {

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

@@ -22,6 +22,7 @@ import type { IsolateOptions } from 'isolated-vm';
  * from a server-only location, such as:
  * - The NextJS Pages router's `_document.tsx`
  * - Your Remix route's `loader`
+ * - Qwik's `entry.ssr.tsx` file
  */
 export const initializeNodeRuntime = (args?: {
   ivmIsolateOptions?: IsolateOptions;

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';
+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 getIvm = (): IsolatedVMImport => {
   try {
     if (IVM_INSTANCE) return IVM_INSTANCE;
@@ -93,7 +93,7 @@ const getIvm = (): IsolatedVMImport => {
     
     SOLUTION: In a server-only execution path within your application, do one of the following:
   
-    ${SHOULD_MENTION_INITIALIZE_SCRIPT ? '- import and call `initializeNodeRuntime()` from "${SDK_NAME}/node/init".' : ''}
+    ${SHOULD_MENTION_INITIALIZE_SCRIPT ? `- import and call \`initializeNodeRuntime()\` from "${SDK_NAME}/node/init".` : ''}
     - add the following import: \`await import('isolated-vm')\`.
 
     For more information, visit https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments`;

package/src/functions/get-processed-block.ts

@@ -1,9 +1,60 @@
+import { TARGET } from '../constants/target';
 import type { BuilderContextInterface } from '../context/types';
+import { omit } from '../helpers/omit';
 import type { BuilderBlock } from '../types/builder-block';
 import { evaluate } from './evaluate/index';
 import { fastClone } from './fast-clone';
 import { set } from './set';
 import { transformBlock } from './transform-block';
+
+// Deep clone a block but without cloning any child blocks
+export function deepCloneWithConditions<T = any>(obj: T): T {
+  if (obj === null || typeof obj !== 'object') {
+    return obj;
+  }
+  if (Array.isArray(obj)) {
+    return (obj.map((item: any) => deepCloneWithConditions(item)) as T);
+  }
+  if ((obj as any)['@type'] === '@builder.io/sdk:Element') {
+    return obj;
+  }
+  const clonedObj: any = {};
+  for (const key in obj) {
+    if (key !== 'meta' && Object.prototype.hasOwnProperty.call(obj, key)) {
+      clonedObj[key] = deepCloneWithConditions(obj[key]);
+    }
+  }
+  return clonedObj;
+}
+const IS_SDK_WITHOUT_CACHED_PROCESSED_BLOCK = ['svelte', 'vue', 'angular', 'qwik', 'solid'].includes(TARGET);
+const getCopy = (block: BuilderBlock): BuilderBlock => {
+  if (IS_SDK_WITHOUT_CACHED_PROCESSED_BLOCK) {
+    const copy = fastClone(block);
+    const copied = {
+      ...copy,
+      properties: {
+        ...copy.properties
+      },
+      actions: {
+        ...copy.actions
+      }
+    };
+    return copied;
+  } else {
+    const copy = (deepCloneWithConditions(omit(block, 'children', 'meta')) as BuilderBlock);
+    return {
+      ...copy,
+      properties: {
+        ...copy.properties
+      },
+      actions: {
+        ...copy.actions
+      },
+      children: block.children,
+      meta: block.meta
+    };
+  }
+};
 const evaluateBindings = ({
   block,
   context,
@@ -16,16 +67,7 @@ const evaluateBindings = ({
   if (!block.bindings) {
     return block;
   }
-  const copy = fastClone(block);
-  const copied = {
-    ...copy,
-    properties: {
-      ...copy.properties
-    },
-    actions: {
-      ...copy.actions
-    }
-  };
+  const copied = getCopy(block);
   for (const binding in block.bindings) {
     const expression = block.bindings[binding];
     const value = evaluate({