@builder.io/sdk-svelte 1.0.23 → 1.0.25

package/lib/edge/blocks/tabs/index.js

@@ -0,0 +1 @@
+export { default } from './tabs.svelte';

package/lib/edge/blocks/tabs/tabs.svelte

@@ -0,0 +1,76 @@
+<script>import Blocks from "../../components/blocks/blocks.svelte";
+export let defaultActiveTab = undefined;
+export let tabs;
+export let activeTabStyle = undefined;
+export let tabHeaderLayout = undefined;
+export let collapsible = undefined;
+export let builderBlock;
+export let builderContext;
+export let builderComponents;
+export let builderLinkComponent = undefined;
+function stringifyStyles(stylesObj) {
+    let styles = "";
+    for (let key in stylesObj) {
+        const dashedKey = key.replace(/[A-Z]/g, function (match) {
+            return "-" + match.toLowerCase();
+        });
+        styles += dashedKey + ":" + stylesObj[key] + ";";
+    }
+    return styles;
+}
+function activeTabContent(active) {
+    return tabs && tabs[active].content;
+}
+function getActiveTabStyle(index) {
+    return activeTab === index ? activeTabStyle : {};
+}
+let activeTab = defaultActiveTab ? defaultActiveTab - 1 : 0;
+</script>
+
+<div>
+  <div
+    style={stringifyStyles({
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: tabHeaderLayout || "flex-start",
+      overflow: "auto",
+    })}
+    class="builder-tabs-wrap"
+  >
+    {#each tabs as tab, index (index)}
+      <span
+        style={stringifyStyles(getActiveTabStyle(index))}
+        class={`builder-tab-wrap ${
+          activeTab === index ? "builder-tab-active" : ""
+        }`}
+        on:click={(event) => {
+          if (index === activeTab && collapsible) {
+            activeTab = -1;
+          } else {
+            activeTab = index;
+          }
+        }}
+        ><Blocks
+          parent={builderBlock.id}
+          path={`component.options.tabs.${index}.label`}
+          blocks={tab.label}
+          context={builderContext}
+          registeredComponents={builderComponents}
+          linkComponent={builderLinkComponent}
+        /></span
+      >
+    {/each}
+  </div>
+  {#if activeTabContent(activeTab)}
+    <div>
+      <Blocks
+        parent={builderBlock.id}
+        path={`component.options.tabs.${activeTab}.content`}
+        blocks={activeTabContent(activeTab)}
+        context={builderContext}
+        registeredComponents={builderComponents}
+        linkComponent={builderLinkComponent}
+      />
+    </div>
+  {/if}
+</div>

package/lib/edge/blocks/tabs/tabs.svelte.d.ts

@@ -0,0 +1,25 @@
+import { SvelteComponent } from "svelte";
+import type { TabsProps } from "./tabs.types";
+declare const __propDef: {
+    props: {
+        defaultActiveTab?: TabsProps["defaultActiveTab"];
+        tabs: TabsProps["tabs"];
+        activeTabStyle?: TabsProps["activeTabStyle"];
+        tabHeaderLayout?: TabsProps["tabHeaderLayout"];
+        collapsible?: TabsProps["collapsible"];
+        builderBlock: TabsProps["builderBlock"];
+        builderContext: TabsProps["builderContext"];
+        builderComponents: TabsProps["builderComponents"];
+        builderLinkComponent?: TabsProps["builderLinkComponent"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TabsProps_ = typeof __propDef.props;
+export { TabsProps_ as TabsProps };
+export type TabsEvents = typeof __propDef.events;
+export type TabsSlots = typeof __propDef.slots;
+export default class Tabs extends SvelteComponent<TabsProps, TabsEvents, TabsSlots> {
+}

package/lib/edge/blocks/tabs/tabs.types.d.ts

@@ -0,0 +1,13 @@
+import type { BuilderBlock } from '../../types/builder-block';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
+export interface TabsProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
+    tabs: {
+        label: BuilderBlock[];
+        content: BuilderBlock[];
+    }[];
+    builderBlock: BuilderBlock;
+    defaultActiveTab?: number;
+    collapsible?: boolean;
+    tabHeaderLayout?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+    activeTabStyle?: any;
+}

package/lib/edge/blocks/tabs/tabs.types.js

@@ -0,0 +1 @@
+export {};

package/lib/edge/blocks/text/text.types.d.ts

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

package/lib/edge/components/block/block.helpers.d.ts

@@ -1,11 +1,11 @@
-import type { BuilderContextInterface, RegisteredComponents } from '../../context/types';
+import type { BuilderContextInterface, RegisteredComponent, RegisteredComponents } from '../../context/types';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
 export declare const getComponent: ({ block, context, registeredComponents }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
     registeredComponents: RegisteredComponents;
-}) => import("../../context/types").RegisteredComponent | null | undefined;
+}) => RegisteredComponent | null | undefined;
 export declare const getRepeatItemData: ({ block, context }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
@@ -14,3 +14,5 @@ export declare const getInheritedStyles: ({ block, context }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => Partial<CSSStyleDeclaration>;
+export declare const shouldPassLinkComponent: (block: RegisteredComponent | null | undefined) => boolean | null | undefined;
+export declare const shouldPassRegisteredComponents: (block: RegisteredComponent | null | undefined) => boolean | null | undefined;

package/lib/edge/components/block/block.helpers.js

@@ -73,3 +73,9 @@ export const getInheritedStyles = ({ block, context }) => {
     }
     return extractTextStyles(style);
 };
+export const shouldPassLinkComponent = (block) => {
+    return block && (block.isRSC || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+};
+export const shouldPassRegisteredComponents = (block) => {
+    return block && (block.isRSC || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs'].includes(block.name));
+};

package/lib/edge/components/block/block.svelte

@@ -4,11 +4,12 @@
 import { getBlockComponentOptions } from "../../functions/get-block-component-options";
 import { getProcessedBlock } from "../../functions/get-processed-block";
 import { bindAnimations } from "./animator";
-import { getComponent, getRepeatItemData, } from "./block.helpers";
+import { getComponent, getRepeatItemData, shouldPassLinkComponent, shouldPassRegisteredComponents, } from "./block.helpers";
 import BlockStyles from "./components/block-styles.svelte";
 import BlockWrapper from "./components/block-wrapper.svelte";
 import ComponentRef from "./components/component-ref/component-ref.svelte";
 import RepeatedBlock from "./components/repeated-block.svelte";
+import "../dynamic-div.svelte";
 export let block;
 export let context;
 export let registeredComponents;
@@ -76,17 +77,12 @@ $: componentRefProps = () => {
         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/lib/edge/components/block/components/interactive-element.svelte

@@ -2,29 +2,30 @@
 
 <script>import { getBlockActions } from "../../../functions/get-block-actions";
 import { getBlockProperties } from "../../../functions/get-block-properties";
-export let wrapperProps;
 export let includeBlockProps;
 export let block;
 export let context;
+export let wrapperProps;
 export let 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/lib/edge/components/content/components/enable-editor.svelte

@@ -18,6 +18,8 @@ import "../../../helpers/preview-lru-cache/set";
 import { createEditorListener } from "../../../helpers/subscribe-to-editor";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../../scripts/init-editing";
 import { triggerAnimation } from "../../block/animator";
+import { getWrapperClassName } from "./styles.helpers";
+import "../../dynamic-div.svelte";
 export let builderContextSignal;
 export let canTrack = undefined;
 export let apiKey;
@@ -27,9 +29,9 @@ export let trustedHosts = undefined;
 export let model = undefined;
 export let content = undefined;
 export let data = undefined;
+export let showContent;
 export let contentWrapper = undefined;
 export let context = undefined;
-export let showContent;
 export let contentWrapperProps = undefined;
 function mergeNewRootState(newData) {
     const combinedState = {
@@ -224,6 +226,14 @@ function elementRef_onInitpreviewingbldr(event) {
         });
     }
 }
+$: showContentProps = () => {
+    return showContent
+        ? {}
+        : {
+            hidden: true,
+            "aria-hidden": true,
+        };
+};
 let elementRef;
 let ContentWrapper = contentWrapper || "div";
 let httpReqsData = {};
@@ -326,14 +336,9 @@ onDestroy(() => {
     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/lib/edge/components/content/components/enable-editor.svelte.d.ts

@@ -18,9 +18,9 @@ declare const __propDef: {
         model?: BuilderEditorProps["model"];
         content?: BuilderEditorProps["content"];
         data?: BuilderEditorProps["data"];
+        showContent: BuilderEditorProps["showContent"];
         contentWrapper?: BuilderEditorProps["contentWrapper"];
         context?: BuilderEditorProps["context"];
-        showContent: BuilderEditorProps["showContent"];
         contentWrapperProps?: BuilderEditorProps["contentWrapperProps"];
     };
     events: {

package/lib/edge/components/content/components/styles.helpers.d.ts

@@ -14,3 +14,4 @@ export declare const getCss: ({ cssCode, contentId }: {
     contentId?: string | undefined;
 }) => string;
 export declare const getDefaultStyles: (isNested: boolean | undefined) => "" | "\n.builder-button {\n  all: unset;\n}\n\n.builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {\n  margin: 0;\n}\n.builder-text > p, .builder-text > .builder-paragraph {\n  color: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  text-align: inherit;\n  font-family: inherit;\n}\n";
+export declare const getWrapperClassName: (variationId?: string) => string;

package/lib/edge/components/content/components/styles.helpers.js

@@ -77,3 +77,6 @@ const DEFAULT_STYLES = `
 export const getDefaultStyles = (isNested) => {
     return !isNested ? DEFAULT_STYLES : '';
 };
+export const getWrapperClassName = (variationId) => {
+    return `variant-${variationId}`;
+};

package/lib/edge/components/content/content.svelte

@@ -11,6 +11,7 @@ import EnableEditor from "./components/enable-editor.svelte";
 import ContentStyles from "./components/styles.svelte";
 import { getContentInitialValue, getRootStateInitialValue, } from "./content.helpers";
 import "./wrap-component-ref";
+import "../dynamic-div.svelte";
 export let content = undefined;
 export let customComponents = undefined;
 export let data = undefined;

package/lib/edge/components/dynamic-div.svelte

@@ -0,0 +1,5 @@
+<script context="module"></script>
+
+<script></script>
+
+<div><slot /></div>

package/lib/edge/constants/builder-registered-components.js

@@ -12,9 +12,12 @@ 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 { getExtraComponents } from './extra-components';
+import { TARGET } from './target';
 /**
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
@@ -43,4 +46,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Text,
         ...textComponentInfo
-    }, ...getExtraComponents()];
+    }, ...(TARGET === 'rsc' ? [] : [{
+            component: Tabs,
+            ...tabsComponentInfo
+        }]), ...getExtraComponents()];

package/lib/edge/constants/sdk-version.d.ts

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

package/lib/edge/constants/sdk-version.js

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

package/lib/edge/functions/evaluate/node-runtime/init.d.ts

@@ -1,3 +1,17 @@
+/**
+ * This file:
+ * - imports `isolated-vm`, which can only be made from a file that never runs
+ * on the client (e.g. Next's `_document.tsx`)
+ * - stores the ivm instance in a global variable using `setIvm`
+ *
+ * This is needed for when bundlers/meta-frameworks are not able to reliably
+ * import the `isolated-vm` package using our `safeDynamicRequire` trick.
+ *
+ * The `isolated-vm` import must exist in this separate file, or it will end up
+ * in the SDK's main entry point, causing errors for users.
+ */
+import ivm from 'isolated-vm';
+import type { IsolateOptions } from 'isolated-vm';
 /**
  * This function initializes the SDK on a Node server. It handles importing the
  * `isolated-vm` package which is needed for dynamic bindings.
@@ -7,4 +21,6 @@
  * - The NextJS Pages router's `_document.tsx`
  * - Your Remix route's `loader`
  */
-export declare const initializeNodeRuntime: () => void;
+export declare const initializeNodeRuntime: ({ ivmIsolateOptions }: {
+    ivmIsolateOptions?: ivm.IsolateOptions | undefined;
+}) => void;

package/lib/edge/functions/evaluate/node-runtime/init.js

@@ -21,6 +21,6 @@ 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 }) => {
+    setIvm(ivm, ivmIsolateOptions);
 };

package/lib/edge/functions/evaluate/node-runtime/node-runtime.d.ts

@@ -1,8 +1,11 @@
+import type { IsolateOptions } from 'isolated-vm';
 import type { ExecutorArgs } from '../helpers';
+type IsolatedVMImport = typeof import('isolated-vm');
 /**
  * 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 declare const setIvm: (ivm: typeof import('isolated-vm')) => void;
+export declare const setIvm: (ivm: IsolatedVMImport, options?: IsolateOptions) => void;
 export declare const runInNode: ({ code, builder, context, event, localState, rootSetState, rootState }: ExecutorArgs) => any;
+export {};

package/lib/edge/functions/evaluate/node-runtime/node-runtime.js

@@ -45,23 +45,25 @@ 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 = null;
+let IVM_CONTEXT = 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) => {
+export const setIvm = (ivm, options = {}) => {
     IVM_INSTANCE = ivm;
+    setIsolateContext(options);
 };
 const getIvm = () => {
     try {
@@ -83,12 +85,29 @@ const getIvm = () => {
     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 = {
+    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) {
+        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, builder, context, event, localState, rootSetState, rootState }) => {
     const ivm = getIvm();
@@ -104,13 +123,6 @@ export const runInNode = ({ code, builder, context, event, localState, rootSetSt
     });
     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) {
-        console.log(...logArgs);
-    });
     /**
      * Propagate state changes back to the reactive root state.
      */
@@ -130,12 +142,11 @@ export const runInNode = ({ code, builder, context, event, localState, rootSetSt
         } : 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/lib/edge/functions/get-class-prop-name.js

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

package/lib/edge/functions/get-style.js

@@ -18,6 +18,7 @@ export function mapStyleObjToStrIfNeeded(style) {
         case 'svelte':
         case 'vue':
         case 'solid':
+        case 'angular':
             return convertStyleMapToCSSArray(style).join(' ');
         case 'qwik':
         case 'reactNative':

package/lib/edge/types/targets.d.ts

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

package/lib/node/blocks/button/button.svelte

@@ -6,24 +6,25 @@ export let link = undefined;
 export let openLinkInNewTab = undefined;
 export let builderLinkComponent = undefined;
 export let text = undefined;
+function attrs() {
+    return {
+        ...filterAttrs(attributes, "on:", false),
+        [getClassPropName()]: `${link ? "" : "builder-button"} ${attributes[getClassPropName()] || ""}`,
+        ...(link
+            ? {
+                href: link,
+                target: openLinkInNewTab ? "_blank" : undefined,
+                role: "link",
+            }
+            : {
+                role: "button",
+            }),
+    };
+}
 </script>
 
 <DynamicRenderer
-  attributes={{
-    ...filterAttrs(attributes, "on:", false),
-    [getClassPropName()]: `${link ? "" : "builder-button"} ${
-      attributes[getClassPropName()] || ""
-    }`,
-    ...(link
-      ? {
-          href: link,
-          target: openLinkInNewTab ? "_blank" : undefined,
-          role: "link",
-        }
-      : {
-          role: "button",
-        }),
-  }}
+  attributes={attrs()}
   TagName={link ? builderLinkComponent || "a" : "button"}
   actionAttributes={filterAttrs(attributes, "on:", true)}
   >{text}</DynamicRenderer