@builder.io/sdk-svelte 1.0.33 → 1.0.36

package/lib/browser/blocks/embed/component-info.js

@@ -11,8 +11,7 @@ export const componentInfo = {
                 const url = options.get('url');
                 if (url) {
                     options.set('content', 'Loading...');
-                    // TODO: get this out of here!
-                    const apiKey = 'ae0e60e78201a3f2b0de4b';
+                    const apiKey = _iframelyApiKey;
                     return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
                         if (options.get('url') === url) {
                             if (data.html) {

package/lib/browser/blocks/form/select/select.svelte

@@ -10,6 +10,7 @@ export let attributes = undefined;
 export let value = undefined;
 export let defaultValue = undefined;
 export let name = undefined;
+export let required = undefined;
 export let options = undefined;
 </script>
 
@@ -19,6 +20,7 @@ export let options = undefined;
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {defaultValue}
   {name}
+  {required}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   {#each options as option, index (`${option.name}-${index}`)}

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

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

package/lib/browser/blocks/{textarea → form/textarea}/textarea.svelte

@@ -3,13 +3,14 @@
  */
 </script>
 
-<script>import { filterAttrs } from "../helpers";
-import { setAttrs } from "../helpers";
+<script>import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
 export let attributes = undefined;
 export let placeholder = undefined;
 export let name = undefined;
 export let value = undefined;
 export let defaultValue = undefined;
+export let required = undefined;
 </script>
 
 <textarea
@@ -18,5 +19,6 @@ export let defaultValue = undefined;
   {name}
   {value}
   {defaultValue}
+  {required}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

package/lib/browser/blocks/image/component-info.js

@@ -13,7 +13,7 @@ export const componentInfo = {
             name: 'image',
             type: 'file',
             bubble: true,
-            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
+            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
             required: true,
             defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
             onChange: (options) => {

package/lib/browser/constants/extra-components.js

@@ -15,6 +15,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';
@@ -38,6 +40,9 @@ export const getExtraComponents = () => [{
         }, {
             component: FormSelect,
             ...formSelectComponentInfo
+        }, {
+            component: Textarea,
+            ...textAreaComponentInfo
         }]), {
         component: Img,
         ...imgComponentInfo

package/lib/browser/constants/sdk-name.d.ts

@@ -0,0 +1 @@
+export declare const SDK_NAME: "@builder.io/sdk-vue" | "@builder.io/sdk-svelte" | "@builder.io/sdk-qwik" | "@builder.io/sdk-react" | "@builder.io/sdk-solid" | "@builder.io/sdk-angular" | "@builder.io/sdk-react-nextjs" | "@builder.io/sdk-react-native";

package/lib/browser/constants/sdk-name.js

@@ -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}`;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.33";
+export declare const SDK_VERSION = "1.0.36";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.33";
+export const SDK_VERSION = "1.0.36";

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

@@ -1,3 +1,4 @@
+import { SDK_NAME } from '../../../constants/sdk-name';
 import { MSG_PREFIX, logger } from '../../../helpers/logger';
 import { fastClone } from '../../fast-clone';
 import { set } from '../../set';
@@ -65,6 +66,8 @@ export const setIvm = (ivm, options = {}) => {
     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 = () => {
     try {
         if (IVM_INSTANCE)
@@ -76,14 +79,15 @@ const getIvm = () => {
     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 = {
     memoryLimit: 128

package/lib/browser/functions/evaluate/node-runtime/safeDynamicRequire.d.ts

@@ -1 +1,3 @@
+/// <reference types="node" />
+/// <reference types="react-native" />
 export declare let safeDynamicRequire: typeof require;

package/lib/browser/functions/extract-css-var-default-value.d.ts

@@ -0,0 +1 @@
+export declare function extractCssVarDefaultValue(value: string): string;

package/lib/browser/functions/extract-css-var-default-value.js

@@ -0,0 +1,11 @@
+export function extractCssVarDefaultValue(value) {
+    // Regular expression to find var() expressions
+    const varRegex = /var\(--[^,]+?,\s*([^)]+)\)/;
+    // Function to replace var() with its fallback
+    let newValue = value;
+    let match;
+    while (match = newValue.match(varRegex)) {
+        newValue = newValue.replace(match[0], match[1].trim());
+    }
+    return newValue;
+}

package/lib/edge/blocks/embed/component-info.js

@@ -11,8 +11,7 @@ export const componentInfo = {
                 const url = options.get('url');
                 if (url) {
                     options.set('content', 'Loading...');
-                    // TODO: get this out of here!
-                    const apiKey = 'ae0e60e78201a3f2b0de4b';
+                    const apiKey = _iframelyApiKey;
                     return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
                         if (options.get('url') === url) {
                             if (data.html) {

package/lib/edge/blocks/form/select/select.svelte

@@ -10,6 +10,7 @@ export let attributes = undefined;
 export let value = undefined;
 export let defaultValue = undefined;
 export let name = undefined;
+export let required = undefined;
 export let options = undefined;
 </script>
 
@@ -19,6 +20,7 @@ export let options = undefined;
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {defaultValue}
   {name}
+  {required}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   {#each options as option, index (`${option.name}-${index}`)}

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

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

package/lib/edge/blocks/{textarea → form/textarea}/textarea.svelte

@@ -3,13 +3,14 @@
  */
 </script>
 
-<script>import { filterAttrs } from "../helpers";
-import { setAttrs } from "../helpers";
+<script>import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
 export let attributes = undefined;
 export let placeholder = undefined;
 export let name = undefined;
 export let value = undefined;
 export let defaultValue = undefined;
+export let required = undefined;
 </script>
 
 <textarea
@@ -18,5 +19,6 @@ export let defaultValue = undefined;
   {name}
   {value}
   {defaultValue}
+  {required}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

package/lib/edge/blocks/image/component-info.js

@@ -13,7 +13,7 @@ export const componentInfo = {
             name: 'image',
             type: 'file',
             bubble: true,
-            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
+            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
             required: true,
             defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
             onChange: (options) => {

package/lib/edge/constants/extra-components.js

@@ -15,6 +15,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';
@@ -38,6 +40,9 @@ export const getExtraComponents = () => [{
         }, {
             component: FormSelect,
             ...formSelectComponentInfo
+        }, {
+            component: Textarea,
+            ...textAreaComponentInfo
         }]), {
         component: Img,
         ...imgComponentInfo

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

@@ -0,0 +1 @@
+export declare const SDK_NAME: "@builder.io/sdk-vue" | "@builder.io/sdk-svelte" | "@builder.io/sdk-qwik" | "@builder.io/sdk-react" | "@builder.io/sdk-solid" | "@builder.io/sdk-angular" | "@builder.io/sdk-react-nextjs" | "@builder.io/sdk-react-native";

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

@@ -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}`;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.33";
+export declare const SDK_VERSION = "1.0.36";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.33";
+export const SDK_VERSION = "1.0.36";

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

@@ -1,3 +1,4 @@
+import { SDK_NAME } from '../../../constants/sdk-name';
 import { MSG_PREFIX, logger } from '../../../helpers/logger';
 import { fastClone } from '../../fast-clone';
 import { set } from '../../set';
@@ -65,6 +66,8 @@ export const setIvm = (ivm, options = {}) => {
     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 = () => {
     try {
         if (IVM_INSTANCE)
@@ -76,14 +79,15 @@ const getIvm = () => {
     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 = {
     memoryLimit: 128

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

@@ -1 +1,3 @@
+/// <reference types="node" />
+/// <reference types="react-native" />
 export declare let safeDynamicRequire: typeof require;

package/lib/edge/functions/extract-css-var-default-value.d.ts

@@ -0,0 +1 @@
+export declare function extractCssVarDefaultValue(value: string): string;

package/lib/edge/functions/extract-css-var-default-value.js

@@ -0,0 +1,11 @@
+export function extractCssVarDefaultValue(value) {
+    // Regular expression to find var() expressions
+    const varRegex = /var\(--[^,]+?,\s*([^)]+)\)/;
+    // Function to replace var() with its fallback
+    let newValue = value;
+    let match;
+    while (match = newValue.match(varRegex)) {
+        newValue = newValue.replace(match[0], match[1].trim());
+    }
+    return newValue;
+}

package/lib/node/blocks/embed/component-info.js

@@ -11,8 +11,7 @@ export const componentInfo = {
                 const url = options.get('url');
                 if (url) {
                     options.set('content', 'Loading...');
-                    // TODO: get this out of here!
-                    const apiKey = 'ae0e60e78201a3f2b0de4b';
+                    const apiKey = _iframelyApiKey;
                     return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
                         if (options.get('url') === url) {
                             if (data.html) {

package/lib/node/blocks/form/select/select.svelte

@@ -10,6 +10,7 @@ export let attributes = undefined;
 export let value = undefined;
 export let defaultValue = undefined;
 export let name = undefined;
+export let required = undefined;
 export let options = undefined;
 </script>
 
@@ -19,6 +20,7 @@ export let options = undefined;
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {defaultValue}
   {name}
+  {required}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   {#each options as option, index (`${option.name}-${index}`)}

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

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

package/lib/node/blocks/{textarea → form/textarea}/textarea.svelte

@@ -3,13 +3,14 @@
  */
 </script>
 
-<script>import { filterAttrs } from "../helpers";
-import { setAttrs } from "../helpers";
+<script>import { filterAttrs } from "../../helpers";
+import { setAttrs } from "../../helpers";
 export let attributes = undefined;
 export let placeholder = undefined;
 export let name = undefined;
 export let value = undefined;
 export let defaultValue = undefined;
+export let required = undefined;
 </script>
 
 <textarea
@@ -18,5 +19,6 @@ export let defaultValue = undefined;
   {name}
   {value}
   {defaultValue}
+  {required}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 />

package/lib/node/blocks/image/component-info.js

@@ -13,7 +13,7 @@ export const componentInfo = {
             name: 'image',
             type: 'file',
             bubble: true,
-            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
+            allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
             required: true,
             defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
             onChange: (options) => {

package/lib/node/constants/extra-components.js

@@ -15,6 +15,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';
@@ -38,6 +40,9 @@ export const getExtraComponents = () => [{
         }, {
             component: FormSelect,
             ...formSelectComponentInfo
+        }, {
+            component: Textarea,
+            ...textAreaComponentInfo
         }]), {
         component: Img,
         ...imgComponentInfo

package/lib/node/constants/sdk-name.d.ts

@@ -0,0 +1 @@
+export declare const SDK_NAME: "@builder.io/sdk-vue" | "@builder.io/sdk-svelte" | "@builder.io/sdk-qwik" | "@builder.io/sdk-react" | "@builder.io/sdk-solid" | "@builder.io/sdk-angular" | "@builder.io/sdk-react-nextjs" | "@builder.io/sdk-react-native";

package/lib/node/constants/sdk-name.js

@@ -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}`;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "1.0.33";
+export declare const SDK_VERSION = "1.0.36";

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

@@ -1 +1 @@
-export const SDK_VERSION = "1.0.33";
+export const SDK_VERSION = "1.0.36";

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

@@ -1,3 +1,4 @@
+import { SDK_NAME } from '../../../constants/sdk-name';
 import { MSG_PREFIX, logger } from '../../../helpers/logger';
 import { fastClone } from '../../fast-clone';
 import { set } from '../../set';
@@ -65,6 +66,8 @@ export const setIvm = (ivm, options = {}) => {
     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 = () => {
     try {
         if (IVM_INSTANCE)
@@ -76,14 +79,15 @@ const getIvm = () => {
     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 = {
     memoryLimit: 128

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

@@ -1 +1,3 @@
+/// <reference types="node" />
+/// <reference types="react-native" />
 export declare let safeDynamicRequire: typeof require;

package/lib/node/functions/extract-css-var-default-value.d.ts

@@ -0,0 +1 @@
+export declare function extractCssVarDefaultValue(value: string): string;

package/lib/node/functions/extract-css-var-default-value.js

@@ -0,0 +1,11 @@
+export function extractCssVarDefaultValue(value) {
+    // Regular expression to find var() expressions
+    const varRegex = /var\(--[^,]+?,\s*([^)]+)\)/;
+    // Function to replace var() with its fallback
+    let newValue = value;
+    let match;
+    while (match = newValue.match(varRegex)) {
+        newValue = newValue.replace(match[0], match[1].trim());
+    }
+    return newValue;
+}

package/package.json

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

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

@@ -1,4 +1,7 @@
 import type { ComponentInfo } from '../../types/components';
+
+// Provided by the web app as a local variable in onChange functions
+declare const _iframelyApiKey: string;
 export const componentInfo: ComponentInfo = {
   name: 'Embed',
   static: true,
@@ -12,8 +15,7 @@ export const componentInfo: ComponentInfo = {
       const url = options.get('url');
       if (url) {
         options.set('content', 'Loading...');
-        // TODO: get this out of here!
-        const apiKey = 'ae0e60e78201a3f2b0de4b';
+        const apiKey = _iframelyApiKey;
         return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
           if (options.get('url') === url) {
             if (data.html) {

package/src/blocks/form/select/select.svelte

@@ -12,6 +12,7 @@
     name?: string;
     value?: string;
     defaultValue?: string;
+    required?: boolean;
   }
 </script>
 
@@ -24,6 +25,7 @@
   export let value: FormSelectProps["value"] = undefined;
   export let defaultValue: FormSelectProps["defaultValue"] = undefined;
   export let name: FormSelectProps["name"] = undefined;
+  export let required: FormSelectProps["required"] = undefined;
   export let options: FormSelectProps["options"] = undefined;
 </script>
 
@@ -33,6 +35,7 @@
   key={isEditing() && defaultValue ? defaultValue : "default-key"}
   {defaultValue}
   {name}
+  {required}
   use:setAttrs={filterAttrs(attributes, "on:", true)}
 >
   {#each options as option, index (`${option.name}-${index}`)}

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

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components';
+import type { ComponentInfo } from '../../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Form:TextArea',
   image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',

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/image/component-info.ts

@@ -14,7 +14,7 @@ export const componentInfo: ComponentInfo = {
     name: 'image',
     type: 'file',
     bubble: true,
-    allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg'],
+    allowedFileTypes: ['jpeg', 'jpg', 'png', 'svg', 'webp'],
     required: true,
     defaultValue: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F72c80f114dc149019051b6852a9e3b7a',
     onChange: (options: Map<string, any>): void | Promise<void> => {

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.33"
+export const SDK_VERSION = "1.0.36"

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/functions/extract-css-var-default-value.ts

@@ -0,0 +1,12 @@
+export function extractCssVarDefaultValue(value: string): string {
+  // Regular expression to find var() expressions
+  const varRegex = /var\(--[^,]+?,\s*([^)]+)\)/;
+
+  // Function to replace var() with its fallback
+  let newValue = value;
+  let match: string[] | null;
+  while (match = newValue.match(varRegex)) {
+    newValue = newValue.replace(match[0], match[1].trim());
+  }
+  return newValue;
+}

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;