@builder.io/sdk-svelte 1.0.23 → 1.0.25

package/src/blocks/text/text.types.ts

@@ -1,3 +1,4 @@
+import type { BuilderDataProps } from '../../types/builder-props';
 export type TextProps = {
   text?: string;
-}
+} & BuilderDataProps

package/src/components/block/block.helpers.ts

@@ -1,4 +1,4 @@
-import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
+import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import { evaluate } from '../../functions/evaluate/index';
 import { extractTextStyles } from '../../functions/extract-text-styles';
 import { getProcessedBlock } from '../../functions/get-processed-block';
@@ -97,4 +97,10 @@ export const getInheritedStyles = ({
     return {};
   }
   return extractTextStyles(style);
+};
+export const shouldPassLinkComponent = (block: RegisteredComponent | null | undefined) => {
+  return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+};
+export const shouldPassRegisteredComponents = (block: RegisteredComponent | null | undefined) => {
+  return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
 }

package/src/components/block/block.svelte

@@ -22,12 +22,15 @@
     getComponent,
     getInheritedStyles,
     getRepeatItemData,
+    shouldPassLinkComponent,
+    shouldPassRegisteredComponents,
   } from "./block.helpers";
   import BlockStyles from "./components/block-styles.svelte";
   import BlockWrapper from "./components/block-wrapper.svelte";
   import type { ComponentProps } from "./components/component-ref/component-ref.helpers";
   import ComponentRef from "./components/component-ref/component-ref.svelte";
   import RepeatedBlock from "./components/repeated-block.svelte";
+  import DynamicDiv from "../dynamic-div.svelte";
   import type { Writable } from "svelte/store";
 
   export let block: BlockProps["block"];
@@ -101,17 +104,12 @@
       componentOptions: {
         ...getBlockComponentOptions(processedBlock()),
         builderContext: context,
-        ...(blockComponent?.()?.name === "Core:Button" ||
-        blockComponent?.()?.name === "Symbol" ||
-        blockComponent?.()?.name === "Columns" ||
-        blockComponent?.()?.name === "Form:Form"
+        ...(shouldPassLinkComponent(blockComponent())
           ? {
               builderLinkComponent: linkComponent,
             }
           : {}),
-        ...(blockComponent?.()?.name === "Symbol" ||
-        blockComponent?.()?.name === "Columns" ||
-        blockComponent?.()?.name === "Form:Form"
+        ...(shouldPassRegisteredComponents(blockComponent())
           ? {
               builderComponents: registeredComponents,
             }

package/src/components/block/components/interactive-element.svelte

@@ -17,29 +17,31 @@
   import type { Dictionary } from "../../../types/typescript";
   import type { Writable } from "svelte/store";
 
-  export let wrapperProps: InteractiveElementProps["wrapperProps"];
   export let includeBlockProps: InteractiveElementProps["includeBlockProps"];
   export let block: InteractiveElementProps["block"];
   export let context: InteractiveElementProps["context"];
+  export let wrapperProps: InteractiveElementProps["wrapperProps"];
   export let Wrapper: InteractiveElementProps["Wrapper"];
+
+  $: attributes = () => {
+    return includeBlockProps
+      ? {
+          ...getBlockProperties({
+            block: block,
+            context: $context,
+          }),
+          ...getBlockActions({
+            block: block,
+            rootState: $context.rootState,
+            rootSetState: $context.rootSetState,
+            localState: $context.localState,
+            context: $context.context,
+          }),
+        }
+      : {};
+  };
 </script>
 
-<svelte:component
-  this={Wrapper}
-  {...wrapperProps}
-  attributes={includeBlockProps
-    ? {
-        ...getBlockProperties({
-          block: block,
-          context: $context,
-        }),
-        ...getBlockActions({
-          block: block,
-          rootState: $context.rootState,
-          rootSetState: $context.rootSetState,
-          localState: $context.localState,
-          context: $context.context,
-        }),
-      }
-    : {}}><slot /></svelte:component
+<svelte:component this={Wrapper} {...wrapperProps} attributes={attributes()}
+  ><slot /></svelte:component
 >

package/src/components/content/components/enable-editor.svelte

@@ -45,6 +45,8 @@
     BuilderComponentStateChange,
     ContentProps,
   } from "../content.types";
+  import { getWrapperClassName } from "./styles.helpers";
+  import DynamicDiv from "../../dynamic-div.svelte";
   import type { Writable } from "svelte/store";
 
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
@@ -56,9 +58,9 @@
   export let model: BuilderEditorProps["model"] = undefined;
   export let content: BuilderEditorProps["content"] = undefined;
   export let data: BuilderEditorProps["data"] = undefined;
+  export let showContent: BuilderEditorProps["showContent"];
   export let contentWrapper: BuilderEditorProps["contentWrapper"] = undefined;
   export let context: BuilderEditorProps["context"] = undefined;
-  export let showContent: BuilderEditorProps["showContent"];
   export let contentWrapperProps: BuilderEditorProps["contentWrapperProps"] =
     undefined;
 
@@ -276,6 +278,14 @@
       });
     }
   }
+  $: showContentProps = () => {
+    return showContent
+      ? {}
+      : {
+          hidden: true,
+          "aria-hidden": true,
+        };
+  };
 
   let elementRef;
 
@@ -401,14 +411,9 @@
     builder-content-id={$builderContextSignal.content?.id}
     builder-model={model}
     {...{}}
-    {...showContent
-      ? {}
-      : {
-          hidden: true,
-          "aria-hidden": true,
-        }}
+    {...showContentProps()}
     {...contentWrapperProps}
-    class={`variant-${content?.testVariationId || content?.id}`}
+    class={getWrapperClassName(content?.testVariationId || content?.id)}
     on:initeditingbldr={(event) => {
       elementRef_onIniteditingbldr(event);
     }}

package/src/components/content/components/styles.helpers.ts

@@ -95,4 +95,7 @@ const DEFAULT_STYLES = `
 `;
 export const getDefaultStyles = (isNested: boolean | undefined) => {
   return !isNested ? DEFAULT_STYLES : '';
+};
+export const getWrapperClassName = (variationId?: string) => {
+  return `variant-${variationId}`;
 }

package/src/components/content/content.svelte

@@ -24,6 +24,7 @@
   } from "./content.helpers";
   import type { ContentProps } from "./content.types";
   import { wrapComponentRef } from "./wrap-component-ref";
+  import DynamicDiv from "../dynamic-div.svelte";
 
   export let content: ContentProps["content"] = undefined;
   export let customComponents: ContentProps["customComponents"] = undefined;

package/src/components/dynamic-div.svelte

@@ -0,0 +1,19 @@
+<script context="module" lang="ts">
+  export interface DynamicDivProps {
+    children?: any;
+    attributes: any;
+    actionAttributes: any;
+    BlockWrapperProps: any;
+    builderPath: any;
+    builderParentId: any;
+    BlocksWrapperProps: any;
+    contentWrapperProps: any;
+    builderModel: any;
+    ref: any;
+  }
+</script>
+
+<script lang="ts">
+</script>
+
+<div><slot /></div>

package/src/constants/builder-registered-components.ts

@@ -12,10 +12,13 @@ import { componentInfo as slotComponentInfo } from '../blocks/slot/component-inf
 import { default as Slot } from '../blocks/slot/index';
 import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info';
 import { default as Symbol } from '../blocks/symbol/index';
+import { componentInfo as tabsComponentInfo } from '../blocks/tabs/component-info';
+import { default as Tabs } from '../blocks/tabs/index';
 import { componentInfo as textComponentInfo } from '../blocks/text/component-info';
 import { default as Text } from '../blocks/text/index';
 import type { RegisteredComponent } from '../context/types';
 import { getExtraComponents } from './extra-components';
+import { TARGET } from './target';
 
 /**
  * Returns a list of all registered components.
@@ -45,4 +48,7 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Text,
   ...textComponentInfo
-}, ...getExtraComponents()]
+}, ...(TARGET === 'rsc' ? [] : [{
+  component: Tabs,
+  ...tabsComponentInfo
+}]), ...getExtraComponents()]

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.23"
+export const SDK_VERSION = "1.0.25"

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

@@ -12,6 +12,7 @@
  */
 import ivm from 'isolated-vm';
 import { setIvm } from './node-runtime';
+import type { IsolateOptions } from 'isolated-vm';
 
 /**
  * This function initializes the SDK on a Node server. It handles importing the
@@ -22,6 +23,10 @@ import { setIvm } from './node-runtime';
  * - The NextJS Pages router's `_document.tsx`
  * - Your Remix route's `loader`
  */
-export const initializeNodeRuntime = () => {
-  setIvm(ivm);
+export const initializeNodeRuntime = ({
+  ivmIsolateOptions
+}: {
+  ivmIsolateOptions?: IsolateOptions;
+}) => {
+  setIvm(ivm, ivmIsolateOptions);
 }

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

@@ -1,3 +1,4 @@
+import type { Context, IsolateOptions } from 'isolated-vm';
 import { MSG_PREFIX, logger } from '../../../helpers/logger';
 import { fastClone } from '../../fast-clone';
 import { set } from '../../set';
@@ -54,26 +55,29 @@ function theFunction() {
   ${code}
 }
 
-let output = theFunction()
+const output = theFunction()
 
 if (typeof output === 'object' && output !== null) {
-  output = JSON.stringify(output.copySync ? output.copySync() : output);
+  return JSON.stringify(output.copySync ? output.copySync() : output);
+} else {
+  return output;
 }
-
-output;
 `;
 };
-let IVM_INSTANCE: typeof import('isolated-vm') | null = null;
+type IsolatedVMImport = typeof import('isolated-vm');
+let IVM_INSTANCE: IsolatedVMImport | null = null;
+let IVM_CONTEXT: Context | null = null;
 
 /**
  * Set the `isolated-vm` instance to be used by the node runtime.
  * This is useful for environments that are not able to rely on our
  * `safeDynamicRequire` trick to import the `isolated-vm` package.
  */
-export const setIvm = (ivm: typeof import('isolated-vm')) => {
+export const setIvm = (ivm: IsolatedVMImport, options: IsolateOptions = {}) => {
   IVM_INSTANCE = ivm;
+  setIsolateContext(options);
 };
-const getIvm = (): typeof import('isolated-vm') => {
+const getIvm = (): IsolatedVMImport => {
   try {
     if (IVM_INSTANCE) return IVM_INSTANCE;
     const dynRequiredIvm = safeDynamicRequire('isolated-vm');
@@ -90,12 +94,30 @@ const getIvm = (): typeof import('isolated-vm') => {
     Please see the documentation for more information: https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments
     `);
 };
-const getIsolateContext = () => {
+function setIsolateContext(options: IsolateOptions = {
+  memoryLimit: 128
+}) {
   const ivm = getIvm();
-  const isolate = new ivm.Isolate({
-    memoryLimit: 128
+  const isolate = new ivm.Isolate(options);
+  const context = isolate.createContextSync();
+  const jail = context.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());
+
+  // We will create a basic `log` function for the new isolate to use.
+  jail.setSync('log', function (...logArgs: any[]) {
+    console.log(...logArgs);
   });
-  return isolate.createContextSync();
+  jail.setSync(INJECTED_IVM_GLOBAL, ivm);
+  IVM_CONTEXT = context;
+  return context;
+}
+const getIsolateContext = () => {
+  if (IVM_CONTEXT) return IVM_CONTEXT;
+  const context = setIsolateContext();
+  return context;
 };
 export const runInNode = ({
   code,
@@ -119,14 +141,6 @@ export const runInNode = ({
   });
   const isolateContext = 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());
-
-  // We will create a basic `log` function for the new isolate to use.
-  jail.setSync('log', function (...logArgs: any[]) {
-    console.log(...logArgs);
-  });
 
   /**
    * Propagate state changes back to the reactive root state.
@@ -147,12 +161,11 @@ export const runInNode = ({
     } : arg) : null;
     jail.setSync(getSyncValName(key), val);
   });
-  jail.setSync(INJECTED_IVM_GLOBAL, ivm);
   const evalStr = processCode({
     code,
     args
   });
-  const resultStr = isolateContext.evalSync(evalStr);
+  const resultStr = isolateContext.evalClosureSync(evalStr);
   try {
     // returning objects throw errors in isolated vm, so we stringify it and parse it back
     const res = JSON.parse(resultStr);

package/src/functions/get-class-prop-name.ts

@@ -9,6 +9,7 @@ export const getClassPropName = () => {
     case 'vue':
     case 'solid':
     case 'qwik':
+    case 'angular':
       return 'class';
   }
 }

package/src/functions/get-style.ts

@@ -27,6 +27,7 @@ export function mapStyleObjToStrIfNeeded(style: Partial<CSSStyleDeclaration>): s
     case 'svelte':
     case 'vue':
     case 'solid':
+    case 'angular':
       return convertStyleMapToCSSArray(style).join(' ');
     case 'qwik':
     case 'reactNative':

package/src/types/targets.ts

@@ -1 +1 @@
-export type Target = 'vue' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc'
+export type Target = 'vue' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc' | 'angular'