@builder.io/sdk-svelte 1.0.35 → 1.1.0

package/src/blocks/{textarea → form/textarea}/component-info.ts

@@ -1,5 +1,11 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
+  shouldReceiveBuilderProps: {
+    builderBlock: false,
+    builderContext: false,
+    builderComponents: false,
+    builderLinkComponent: false
+  },
   name: 'Form:TextArea',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
   inputs: [{

package/src/blocks/{textarea → form/textarea}/textarea.svelte

@@ -9,18 +9,20 @@
     value?: string;
     defaultValue?: string;
     placeholder?: string;
+    required?: boolean;
   }
 </script>
 
 <script lang="ts">
-  import { filterAttrs } from "../helpers";
-  import { setAttrs } from "../helpers";
+  import { filterAttrs } from "../../helpers";
+  import { setAttrs } from "../../helpers";
 
   export let attributes: TextareaProps["attributes"] = undefined;
   export let placeholder: TextareaProps["placeholder"] = undefined;
   export let name: TextareaProps["name"] = undefined;
   export let value: TextareaProps["value"] = undefined;
   export let defaultValue: TextareaProps["defaultValue"] = undefined;
+  export let required: TextareaProps["required"] = undefined;
 </script>
 
 <textarea
@@ -29,5 +31,6 @@
   {name}
   {value}
   {defaultValue}
+  {required}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

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

@@ -1,5 +1,11 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
+  shouldReceiveBuilderProps: {
+    builderBlock: false,
+    builderContext: false,
+    builderComponents: false,
+    builderLinkComponent: false
+  },
   name: 'Fragment',
   static: true,
   hidden: true,

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

@@ -125,5 +125,11 @@ export const componentInfo: ComponentInfo = {
     helperText: "This is the ratio of height/width, e.g. set to 1.5 for a 300px wide and 200px tall photo. Set to 0 to not force the image to maintain it's aspect ratio",
     advanced: true,
     defaultValue: 0.7041
-  }]
+  }],
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: false,
+    builderComponents: false,
+    builderLinkComponent: false
+  }
 }

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

@@ -1,5 +1,11 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
+  shouldReceiveBuilderProps: {
+    builderBlock: false,
+    builderContext: false,
+    builderComponents: false,
+    builderLinkComponent: false
+  },
   // friendlyName?
   name: 'Raw:Img',
   hideFromInsertMenu: true,

package/src/blocks/raw-text/component-info.ts

@@ -1,5 +1,11 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
+  shouldReceiveBuilderProps: {
+    builderBlock: false,
+    builderContext: false,
+    builderComponents: false,
+    builderLinkComponent: false
+  },
   name: 'Builder:RawText',
   hideFromInsertMenu: true,
   inputs: [{

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

@@ -1,5 +1,11 @@
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
+  shouldReceiveBuilderProps: {
+    builderBlock: false,
+    builderContext: false,
+    builderComponents: false,
+    builderLinkComponent: false
+  },
   name: 'Core:Section',
   static: true,
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',

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

@@ -11,5 +11,11 @@ export const componentInfo: ComponentInfo = {
     type: 'string',
     required: true,
     defaultValue: 'children'
-  }]
+  }],
+  shouldReceiveBuilderProps: {
+    builderBlock: false,
+    builderContext: true,
+    builderComponents: false,
+    builderLinkComponent: false
+  }
 }

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

@@ -31,5 +31,11 @@ export const componentInfo: ComponentInfo = {
     name: 'useChildren',
     hideFromUI: true,
     type: 'boolean'
-  }]
+  }],
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: true,
+    builderComponents: true,
+    builderLinkComponent: true
+  }
 }

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

@@ -135,5 +135,11 @@ export const componentInfo: ComponentInfo = {
       label: 'Right',
       value: 'flex-end'
     }]
-  }]
+  }],
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: true,
+    builderComponents: true,
+    builderLinkComponent: true
+  }
 }

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

@@ -1,5 +1,12 @@
+import { TARGET } from '../../constants/target';
 import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
+  shouldReceiveBuilderProps: {
+    builderBlock: TARGET === 'reactNative' ? true : false,
+    builderContext: false,
+    builderComponents: false,
+    builderLinkComponent: false
+  },
   name: 'Text',
   static: true,
   isRSC: true,

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

@@ -79,5 +79,11 @@ export const componentInfo: ComponentInfo = {
     helperText: 'Load this video "lazily" - as in only when a user scrolls near the video. Recommended for optmized performance and bandwidth consumption',
     defaultValue: true,
     advanced: true
-  }]
+  }],
+  shouldReceiveBuilderProps: {
+    builderBlock: true,
+    builderContext: false,
+    builderComponents: false,
+    builderLinkComponent: false
+  }
 }

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

@@ -1,10 +1,10 @@
 import type { Writable } from "svelte/store";
-import { TARGET } from '../../constants/target';
 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';
 import { getStyle } from '../../functions/get-style';
+import type { ComponentInfo } from '../../server-index';
 import type { BuilderBlock } from '../../types/builder-block';
 import type { RepeatData } from './types';
 export const getComponent = ({
@@ -100,26 +100,46 @@ export const getInheritedStyles = ({
   }
   return extractTextStyles(style);
 };
+const applyDefaults = (shouldReceiveBuilderProps: ComponentInfo['shouldReceiveBuilderProps']) => {
+  return {
+    // once we bump to a major version, toggle this to `false`.
+    builderBlock: true,
+    // once we bump to a major version, toggle this to `false`.
+    builderContext: true,
+    builderComponents: false,
+    builderLinkComponent: false,
+    ...shouldReceiveBuilderProps
+  };
+};
 export const provideLinkComponent = (block: RegisteredComponent | null | undefined, linkComponent: any) => {
-  return block && (block.isRSC && TARGET === 'rsc' || ['Core:Button', 'Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+  if (!block) return {};
+  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderLinkComponent;
+  if (!shouldReceiveProp) return {};
+  return {
     builderLinkComponent: linkComponent
-  } : {};
+  };
 };
 export const provideRegisteredComponents = (block: RegisteredComponent | null | undefined, registeredComponents: RegisteredComponents) => {
-  return block && (block.isRSC && TARGET === 'rsc' || ['Symbol', 'Columns', 'Form:Form', 'Builder: Tabs', 'Builder:Accordion'].includes(block.name)) ? {
+  if (!block) return {};
+  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderComponents;
+  if (!shouldReceiveProp) return {};
+  return {
     builderComponents: registeredComponents
-  } : {};
+  };
 };
 export const provideBuilderBlock = (block: RegisteredComponent | null | undefined, builderBlock: BuilderBlock) => {
-  /**
-   * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
-   */
-  return block && (block.isRSC && TARGET === 'rsc' || TARGET === 'reactNative' && block.name === 'Text' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Image', 'Video'].includes(block.name)) ? {
+  if (!block) return {};
+  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderBlock;
+  if (!shouldReceiveProp) return {};
+  return {
     builderBlock
-  } : {};
+  };
 };
 export const provideBuilderContext = (block: RegisteredComponent | null | undefined, context: Writable<BuilderContextInterface>) => {
-  return block && (block.isRSC && TARGET === 'rsc' || ['Builder:Accordion', 'Columns', 'Form:Form', 'Builder: Tabs', 'Symbol', 'Slot'].includes(block.name)) ? {
+  if (!block) return {};
+  const shouldReceiveProp = applyDefaults(block.shouldReceiveBuilderProps).builderContext;
+  if (!shouldReceiveProp) return {};
+  return {
     builderContext: context
-  } : {};
+  };
 }

package/src/components/content-variants/content-variants.svelte

@@ -8,7 +8,7 @@
 </script>
 
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { afterUpdate, onMount } from "svelte";
 
   import { TARGET } from "../../constants/target";
   import { handleABTestingSync } from "../../helpers/ab-tests";
@@ -84,6 +84,8 @@
      */
     shouldRenderVariants = false;
   });
+
+  afterUpdate(() => {});
 </script>
 
 {#if !isNestedRender && TARGET !== "reactNative"}

package/src/components/content-variants/inlined-fns.ts

@@ -15,7 +15,7 @@ type VariantData = {
 
 /**
  * For more information on how this works,
- * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/src/SSR_AB_TEST.md)
+ * see our [SSR A/B Test Docs](https://github.com/BuilderIO/builder/tree/main/packages/sdks/docs/SSR_AB_TEST.md)
  */
 
 export const UPDATE_COOKIES_AND_STYLES_SCRIPT = "function updateCookiesAndStyles(contentId, variants, isHydrationTarget) {\n  function getAndSetVariantId() {\n    function setCookie(name, value, days) {\n      let expires = '';\n      if (days) {\n        const date = new Date();\n        date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\n        expires = '; expires=' + date.toUTCString();\n      }\n      document.cookie = name + '=' + (value || '') + expires + '; path=/' + '; Secure; SameSite=None';\n    }\n    function getCookie(name) {\n      const nameEQ = name + '=';\n      const ca = document.cookie.split(';');\n      for (let i = 0; i < ca.length; i++) {\n        let c = ca[i];\n        while (c.charAt(0) === ' ') c = c.substring(1, c.length);\n        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);\n      }\n      return null;\n    }\n    const cookieName = `builder.tests.${contentId}`;\n    const variantInCookie = getCookie(cookieName);\n    const availableIDs = variants.map(vr => vr.id).concat(contentId);\n    if (variantInCookie && availableIDs.includes(variantInCookie)) {\n      return variantInCookie;\n    }\n    let n = 0;\n    const random = Math.random();\n    for (let i = 0; i < variants.length; i++) {\n      const variant = variants[i];\n      const testRatio = variant.testRatio;\n      n += testRatio;\n      if (random < n) {\n        setCookie(cookieName, variant.id);\n        return variant.id;\n      }\n    }\n    setCookie(cookieName, contentId);\n    return contentId;\n  }\n  const winningVariantId = getAndSetVariantId();\n  const styleEl = document.currentScript?.previousElementSibling;\n  if (isHydrationTarget) {\n    styleEl.remove();\n    const thisScriptEl = document.currentScript;\n    thisScriptEl?.remove();\n  } else {\n    const newStyleStr = variants.concat({\n      id: contentId\n    }).filter(variant => variant.id !== winningVariantId).map(value => {\n      return `.variant-${value.id} {  display: none; }\n        `;\n    }).join('');\n    styleEl.innerHTML = newStyleStr;\n  }\n}";

package/src/constants/extra-components.ts

@@ -16,6 +16,8 @@ import { componentInfo as formSelectComponentInfo } from '../blocks/form/select/
 import { default as FormSelect } from '../blocks/form/select/index';
 import { componentInfo as formSubmitButtonComponentInfo } from '../blocks/form/submit-button/component-info';
 import { default as FormSubmitButton } from '../blocks/form/submit-button/index';
+import { componentInfo as textAreaComponentInfo } from '../blocks/form/textarea/component-info';
+import { default as Textarea } from '../blocks/form/textarea/index';
 import { componentInfo as imgComponentInfo } from '../blocks/img/component-info';
 import { default as Img } from '../blocks/img/index';
 import { componentInfo as videoComponentInfo } from '../blocks/video/component-info';
@@ -40,6 +42,9 @@ export const getExtraComponents: () => RegisteredComponent[] = () => [{
 }, {
   component: FormSelect,
   ...formSelectComponentInfo
+}, {
+  component: Textarea,
+  ...textAreaComponentInfo
 }]), {
   component: Img,
   ...imgComponentInfo

package/src/constants/sdk-name.ts

@@ -0,0 +1,12 @@
+import { TARGET } from './target';
+const SDK_NAME_FOR_TARGET = (() => {
+  switch (TARGET) {
+    case 'rsc':
+      return 'react-nextjs';
+    case 'reactNative':
+      return 'react-native';
+    default:
+      return TARGET;
+  }
+})();
+export const SDK_NAME = (`@builder.io/sdk-${SDK_NAME_FOR_TARGET}` as const)

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.35"
+export const SDK_VERSION = "1.1.0"

package/src/functions/evaluate/choose-eval.ts

@@ -1,3 +1,7 @@
+/*
+ * THIS FILE IS EXPECTED TO EXIST WITH THIS EXACT NAME BY SUBSEQUENT BUNDLE STEPS THAT TRANSFORM IT.
+ * DO NOT RENAME THIS FILE.
+ */
 import { isBrowser } from '../is-browser';
 import { runInBrowser } from './browser-runtime/browser';
 import type { ExecutorArgs } from './helpers';

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

@@ -1,4 +1,5 @@
 import type { Context, IsolateOptions } from 'isolated-vm';
+import { SDK_NAME } from '../../../constants/sdk-name';
 import { MSG_PREFIX, logger } from '../../../helpers/logger';
 import { fastClone } from '../../fast-clone';
 import { set } from '../../set';
@@ -77,6 +78,9 @@ export const setIvm = (ivm: IsolatedVMImport, options: IsolateOptions = {}) => {
   IVM_INSTANCE = ivm;
   setIsolateContext(options);
 };
+
+// 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 getIvm = (): IsolatedVMImport => {
   try {
     if (IVM_INSTANCE) return IVM_INSTANCE;
@@ -85,14 +89,15 @@ const getIvm = (): IsolatedVMImport => {
   } catch (error) {
     logger.error('isolated-vm import error.', error);
   }
-  throw new Error(`${MSG_PREFIX}could not import \`isolated-vm\` module for safe script execution on Node server.
+  const ERROR_MESSAGE = `${MSG_PREFIX}could not import \`isolated-vm\` module for safe script execution on a Node server.
     
-    In certain Node environments, the SDK requires additional initialization steps. This can be achieved by 
-    importing and calling \`initializeNodeRuntime()\` from "@builder.io/sdk-react/node/init". This must be done in
-    a server-only execution path within your application.
+    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".' : ''}
+    - add the following import: \`await import('isolated-vm')\`.
 
-    Please see the documentation for more information: https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments
-    `);
+    For more information, visit https://builder.io/c/docs/integration-tips#enabling-data-bindings-in-node-environments`;
+  throw new Error(ERROR_MESSAGE);
 };
 function setIsolateContext(options: IsolateOptions = {
   memoryLimit: 128

package/src/types/components.ts

@@ -115,5 +115,40 @@ export interface ComponentInfo {
 
   // TO-DO: is this used?
   hidden?: boolean;
+
+  /**
+   * Whether or not the component should receive SDK-related props.
+   */
+  shouldReceiveBuilderProps?: {
+    /**
+     * Whether or not the component should receive the `builderBlock` prop, containing the current Builder block being rendered.
+     *
+     * Defaults to `true`.
+     */
+    builderBlock?: boolean;
+
+    /**
+     * Whether or not the component should receive the `builderContext` prop, containing the current context.
+     * The Builder Context contains a lot of data relevant to the current `Content` render.
+     * You can see more information [here](https://github.com/BuilderIO/builder/blob/main/packages/sdks/src/context/types.ts).
+     *
+     * Defaults to `true`.
+     */
+    builderContext?: boolean;
+
+    /**
+     * Whether or not the component should receive the `builderComponents` array, containing the all registered components (custom and built-in).
+     *
+     * Defaults to `false`.
+     */
+    builderComponents?: boolean;
+
+    /**
+     * Whether or not the component should receive the `builderLinkComponent` prop, containing the custom link component provided to `Content`.
+     *
+     * Defaults to `false`.
+     */
+    builderLinkComponent?: boolean;
+  };
 }
 type Permission = 'read' | 'publish' | 'editCode' | 'editDesigns' | 'admin' | 'create'

package/lib/browser/blocks/textarea/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/lib/edge/blocks/textarea/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;

package/lib/node/blocks/textarea/component-info.d.ts

@@ -1,2 +0,0 @@
-import type { ComponentInfo } from '../../types/components';
-export declare const componentInfo: ComponentInfo;