@builder.io/sdk-svelte 1.0.23 → 1.0.25

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

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

package/lib/node/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/node/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/node/constants/sdk-version.js

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

package/lib/node/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/node/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/node/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/node/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/node/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/node/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/node/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "1.0.23",
+  "version": "1.0.25",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/button/button.svelte

@@ -10,24 +10,28 @@
   export let builderLinkComponent: ButtonProps["builderLinkComponent"] =
     undefined;
   export let text: ButtonProps["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

package/src/blocks/columns/columns.svelte

@@ -13,17 +13,19 @@
   import { getClassPropName } from "../../functions/get-class-prop-name";
   import { mapStyleObjToStrIfNeeded } from "../../functions/get-style";
   import type { Dictionary } from "../../types/typescript";
-  import type { ColumnProps } from "./columns.types";
+  import type { Column, ColumnProps } from "./columns.types";
+  import { getColumnsClass } from "./helpers";
+  import DynamicDiv from "../../components/dynamic-div.svelte";
 
   export let space: ColumnProps["space"] = undefined;
   export let columns: ColumnProps["columns"] = undefined;
   export let stackColumnsAt: ColumnProps["stackColumnsAt"] = undefined;
+  export let builderLinkComponent: ColumnProps["builderLinkComponent"] =
+    undefined;
   export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"] =
     undefined;
   export let builderContext: ColumnProps["builderContext"];
   export let builderBlock: ColumnProps["builderBlock"];
-  export let builderLinkComponent: ColumnProps["builderLinkComponent"] =
-    undefined;
   export let builderComponents: ColumnProps["builderComponents"];
   function stringifyStyles(stylesObj) {
     let styles = "";
@@ -36,6 +38,9 @@
     return styles;
   }
 
+  function getTagName(column: Column) {
+    return column.link ? builderLinkComponent || "a" : "div";
+  }
   function getWidth(index: number) {
     return cols[index]?.width || 100 / cols.length;
   }
@@ -61,6 +66,15 @@
   }) {
     return stackAt === "never" ? desktopStyle : stackedStyle;
   }
+  function columnsCssVars() {
+    return {
+      "--flex-dir": flexDir,
+      "--flex-dir-tablet": getTabletStyle({
+        stackedStyle: flexDir,
+        desktopStyle: "row",
+      }),
+    } as Dictionary<string>;
+  }
   function columnCssVars(index: number) {
     const gutter = index === 0 ? 0 : gutterSize;
     const width = getColumnCssWidth(index);
@@ -101,16 +115,7 @@
     );
     return breakpointSizes[size].max;
   }
-  $: columnsCssVars = () => {
-    return {
-      "--flex-dir": flexDir,
-      "--flex-dir-tablet": getTabletStyle({
-        stackedStyle: flexDir,
-        desktopStyle: "row",
-      }),
-    } as Dictionary<string>;
-  };
-  $: columnsStyles = () => {
+  function columnsStyles() {
     return `
         @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
           .${builderBlock.id}-breakpoints {
@@ -136,7 +141,19 @@
           }
         },
       `;
-  };
+  }
+  function getAttributes(column: any, index: number) {
+    return {
+      ...{},
+      ...(column.link
+        ? {
+            href: column.link,
+          }
+        : {}),
+      [getClassPropName()]: "builder-column",
+      style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
+    };
+  }
 
   let gutterSize = typeof space === "number" ? space || 0 : 20;
   let cols = columns || [];
@@ -151,7 +168,7 @@
 
 <div
   style={stringifyStyles(columnsCssVars())}
-  class={`builder-columns ${builderBlock.id}-breakpoints` + " div"}
+  class={getColumnsClass(builderBlock?.id) + " div"}
   {...{}}
 >
   {#if TARGET !== "reactNative"}
@@ -159,18 +176,9 @@
   {/if}
   {#each columns as column, index (index)}
     <DynamicRenderer
-      TagName={column.link ? builderLinkComponent || "a" : "div"}
+      TagName={getTagName(column)}
       actionAttributes={{}}
-      attributes={{
-        ...{},
-        ...(column.link
-          ? {
-              href: column.link,
-            }
-          : {}),
-        [getClassPropName()]: "builder-column",
-        style: mapStyleObjToStrIfNeeded(columnCssVars(index)),
-      }}
+      attributes={getAttributes(column, index)}
       ><Blocks
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}

package/src/blocks/columns/columns.types.ts

@@ -1,6 +1,6 @@
 import type { BuilderBlock } from '../../types/builder-block';
 import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props';
-type Column = {
+export type Column = {
   blocks: BuilderBlock[];
   width?: number;
   link?: string;

package/src/blocks/columns/helpers.ts

@@ -0,0 +1,3 @@
+export const getColumnsClass = (id?: string) => {
+  return `builder-columns ${id}-breakpoints`;
+}

package/src/blocks/image/image.svelte

@@ -99,7 +99,7 @@
   <slot />
 {/if}
 
-{#if !fitContent && $$slots.default}
+{#if !fitContent && builderBlock?.children?.length}
   <div class="div-2"><slot /></div>
 {/if}
 

package/src/blocks/symbol/symbol.helpers.ts

@@ -1,6 +1,6 @@
 import type { BuilderContextInterface } from '../../context/types';
+import { fetchOneEntry } from '../../functions/get-content/index';
 import { logger } from '../../helpers/logger';
-import { fetchOneEntry } from '../../index';
 import type { BuilderContent } from '../../types/builder-content';
 export interface SymbolInfo {
   model?: string;

package/src/blocks/symbol/symbol.svelte

@@ -9,6 +9,7 @@
   import { setAttrs } from "../helpers";
   import { fetchSymbolContent } from "./symbol.helpers";
   import type { SymbolProps } from "./symbol.types";
+  import DynamicDiv from "../../components/dynamic-div.svelte";
 
   export let symbol: SymbolProps["symbol"] = undefined;
   export let attributes: SymbolProps["attributes"] = undefined;
@@ -30,6 +31,12 @@
       }
     });
   }
+  $: blocksWrapper = () => {
+    return "div";
+  };
+  $: contentWrapper = () => {
+    return "div";
+  };
   $: className = () => {
     return [
       ...[attributes[getClassPropName()]],
@@ -77,7 +84,7 @@
     model={symbol?.model}
     content={contentToUse}
     linkComponent={builderLinkComponent}
-    blocksWrapper={"div"}
-    contentWrapper={"div"}
+    blocksWrapper={blocksWrapper()}
+    contentWrapper={contentWrapper()}
   />
 </div>

package/src/blocks/tabs/component-info.ts

@@ -0,0 +1,139 @@
+import type { ComponentInfo } from '../../types/components';
+const defaultTab = {
+  '@type': '@builder.io/sdk:Element',
+  responsiveStyles: {
+    large: {
+      paddingLeft: '20px',
+      paddingRight: '20px',
+      paddingTop: '10px',
+      paddingBottom: '10px',
+      minWidth: '100px',
+      textAlign: 'center',
+      display: 'flex',
+      flexDirection: 'column',
+      cursor: 'pointer',
+      userSelect: 'none'
+    }
+  },
+  component: {
+    name: 'Text',
+    options: {
+      text: 'New tab'
+    }
+  }
+};
+const defaultElement = {
+  '@type': '@builder.io/sdk:Element',
+  responsiveStyles: {
+    large: {
+      height: '200px',
+      display: 'flex',
+      marginTop: '20px',
+      flexDirection: 'column'
+    }
+  },
+  component: {
+    name: 'Text',
+    options: {
+      text: 'New tab content '
+    }
+  }
+};
+export const componentInfo: ComponentInfo = {
+  name: 'Builder: Tabs',
+  inputs: [{
+    name: 'tabs',
+    type: 'list',
+    broadcast: true,
+    subFields: [{
+      name: 'label',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultTab]
+    }, {
+      name: 'content',
+      type: 'uiBlocks',
+      hideFromUI: true,
+      defaultValue: [defaultElement]
+    }],
+    defaultValue: [{
+      label: [{
+        ...defaultTab,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 1'
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 1 content'
+          }
+        }
+      }]
+    }, {
+      label: [{
+        ...defaultTab,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 2'
+          }
+        }
+      }],
+      content: [{
+        ...defaultElement,
+        component: {
+          name: 'Text',
+          options: {
+            text: 'Tab 2 content'
+          }
+        }
+      }]
+    }]
+  }, {
+    name: 'activeTabStyle',
+    type: 'uiStyle',
+    helperText: 'CSS styles for the active tab',
+    defaultValue: {
+      backgroundColor: 'rgba(0, 0, 0, 0.1)'
+    }
+  }, {
+    name: 'defaultActiveTab',
+    type: 'number',
+    helperText: 'Default tab to open to. Set to "1" for the first tab, "2" for the second, or choose "0" for none',
+    defaultValue: 1,
+    advanced: true
+  }, {
+    name: 'collapsible',
+    type: 'boolean',
+    helperText: 'If on, clicking an open tab closes it so no tabs are active',
+    defaultValue: false,
+    advanced: true
+  }, {
+    name: 'tabHeaderLayout',
+    type: 'enum',
+    helperText: 'Change the layout of the tab headers (uses justify-content)',
+    defaultValue: 'flex-start',
+    enum: [{
+      label: 'Center',
+      value: 'center'
+    }, {
+      label: 'Space between',
+      value: 'space-between'
+    }, {
+      label: 'Space around',
+      value: 'space-around'
+    }, {
+      label: 'Left',
+      value: 'flex-start'
+    }, {
+      label: 'Right',
+      value: 'flex-end'
+    }]
+  }]
+}

package/src/blocks/tabs/index.ts

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

package/src/blocks/tabs/tabs.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import Blocks from "../../components/blocks/blocks.svelte";
+  import type { BuilderBlock } from "../../types/builder-block";
+  import type { TabsProps } from "./tabs.types";
+
+  export let defaultActiveTab: TabsProps["defaultActiveTab"] = undefined;
+  export let tabs: TabsProps["tabs"];
+  export let activeTabStyle: TabsProps["activeTabStyle"] = undefined;
+  export let tabHeaderLayout: TabsProps["tabHeaderLayout"] = undefined;
+  export let collapsible: TabsProps["collapsible"] = undefined;
+  export let builderBlock: TabsProps["builderBlock"];
+  export let builderContext: TabsProps["builderContext"];
+  export let builderComponents: TabsProps["builderComponents"];
+  export let builderLinkComponent: TabsProps["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: number) {
+    return tabs && tabs[active].content;
+  }
+  function getActiveTabStyle(index: number) {
+    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/src/blocks/tabs/tabs.types.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;
+}