@builder.io/sdk-svelte 0.13.1 → 0.13.3

package/lib/node/blocks/slot/slot.svelte.d.ts

@@ -1,15 +1,12 @@
 import { SvelteComponent } from "svelte";
-export interface DropzoneProps {
+export type DropzoneProps = BuilderDataProps & {
     name: string;
-    builderBlock: BuilderBlock;
-    builderContext: Writable<BuilderContextInterface>;
     attributes: any;
-}
-import type { BuilderContextInterface } from "../../context/types.js";
-import type { BuilderBlock } from "../../types/builder-block.js";
-import type { Writable } from "svelte/store";
+};
+import type { BuilderDataProps } from "../../types/builder-props.js";
 declare const __propDef: {
     props: {
+        js: any;
         builderContext: DropzoneProps["builderContext"];
         name: DropzoneProps["name"];
     };

package/lib/node/blocks/symbol/symbol.svelte

@@ -4,7 +4,6 @@ import { filterAttrs } from "../helpers.js";
 import { getClassPropName } from "../../functions/get-class-prop-name.js";
 import { setAttrs } from "../helpers.js";
 import { fetchSymbolContent } from "./symbol.helpers.js";
-export let js;
 export let attributes = undefined;
 export let symbol = undefined;
 export let dynamic = undefined;

package/lib/node/blocks/symbol/symbol.svelte.d.ts

@@ -1,16 +1,14 @@
 import { SvelteComponent } from "svelte";
-import type { PropsWithBuilderData } from "../../types/builder-props.js";
 import type { SymbolProps } from "./symbol.types.js";
 declare const __propDef: {
     props: {
-        js: any;
-        attributes?: PropsWithBuilderData<SymbolProps>["attributes"];
-        symbol?: PropsWithBuilderData<SymbolProps>["symbol"];
-        dynamic?: PropsWithBuilderData<SymbolProps>["dynamic"];
-        builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
-        builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
-        builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
-        builderLinkComponent?: PropsWithBuilderData<SymbolProps>["builderLinkComponent"];
+        attributes?: SymbolProps["attributes"];
+        symbol?: SymbolProps["symbol"];
+        dynamic?: SymbolProps["dynamic"];
+        builderContext: SymbolProps["builderContext"];
+        builderBlock: SymbolProps["builderBlock"];
+        builderComponents: SymbolProps["builderComponents"];
+        builderLinkComponent?: SymbolProps["builderLinkComponent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/blocks/symbol/symbol.types.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderContent } from '../../types/builder-content.js';
-import type { BuilderComponentsProp, BuilderLinkComponentProp } from '../../types/builder-props.js';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props.js';
 interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -8,7 +8,7 @@ interface SymbolInfo {
     inline?: boolean;
     dynamic?: boolean;
 }
-export interface SymbolProps extends BuilderComponentsProp, BuilderLinkComponentProp {
+export interface SymbolProps extends BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp {
     symbol?: SymbolInfo;
     dataOnly?: boolean;
     dynamic?: boolean;

package/lib/node/components/block/block.svelte

@@ -81,13 +81,15 @@ $: componentRefProps = () => {
             builderContext: context,
             ...(blockComponent?.()?.name === "Core:Button" ||
                 blockComponent?.()?.name === "Symbol" ||
-                blockComponent?.()?.name === "Columns"
+                blockComponent?.()?.name === "Columns" ||
+                blockComponent?.()?.name === "Form:Form"
                 ? {
                     builderLinkComponent: linkComponent,
                 }
                 : {}),
             ...(blockComponent?.()?.name === "Symbol" ||
-                blockComponent?.()?.name === "Columns"
+                blockComponent?.()?.name === "Columns" ||
+                blockComponent?.()?.name === "Form:Form"
                 ? {
                     builderComponents: registeredComponents,
                 }

package/lib/node/components/block/components/block-wrapper.svelte.d.ts

@@ -4,16 +4,16 @@ type BlockWrapperProps = {
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
     linkComponent: any;
+    children?: any;
 };
 import type { BuilderContextInterface } from "../../../context/types.js";
 import type { BuilderBlock } from "../../../types/builder-block.js";
-import type { PropsWithChildren } from "../../../types/typescript.js";
 import type { Writable } from "svelte/store";
 declare const __propDef: {
     props: {
-        Wrapper: PropsWithChildren<BlockWrapperProps>["Wrapper"];
-        block: PropsWithChildren<BlockWrapperProps>["block"];
-        context: PropsWithChildren<BlockWrapperProps>["context"];
+        Wrapper: BlockWrapperProps["Wrapper"];
+        block: BlockWrapperProps["block"];
+        context: BlockWrapperProps["context"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/lib/node/components/block/components/component-ref/component-ref.helpers.d.ts

@@ -2,14 +2,14 @@
 import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponents } from '../../../../context/types.js';
 import type { BuilderBlock } from '../../../../types/builder-block.js';
-import type { PropsWithBuilderData } from '../../../../types/builder-props.js';
+import type { BuilderDataProps } from '../../../../types/builder-props.js';
 import type { InteractiveElementProps } from '../interactive-element.svelte';
-type ComponentOptions = PropsWithBuilderData<{
+type ComponentOptions = BuilderDataProps & {
     [index: string]: any;
     attributes?: {
         [index: string]: any;
     };
-}>;
+};
 export interface ComponentProps {
     componentRef: any;
     componentOptions: ComponentOptions;

package/lib/node/components/content/content.types.d.ts

@@ -1,11 +1,5 @@
 import type { BuilderRenderState } from '../../context/types.js';
-import type { EnforcePartials } from '../../types/enforced-partials.js';
-import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
-interface InternalRenderProps {
-    showContent: boolean;
-    isSsrAbTest: boolean;
-}
-export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export type { ContentProps } from './contentProps.types.js';
 export interface BuilderComponentStateChange {
     state: BuilderRenderState;
     ref: {
@@ -17,4 +11,3 @@ export interface BuilderComponentStateChange {
         };
     };
 }
-export {};

package/lib/node/components/content/contentProps.types.d.ts

@@ -0,0 +1,12 @@
+import type { EnforcePartials } from '../../types/enforced-partials.js';
+import type { ContentVariantsPrps } from '../content-variants/content-variants.types.js';
+interface InternalRenderProps {
+    showContent: boolean;
+    isSsrAbTest: boolean;
+}
+/**
+ * This is in a separate file so that we can override it (most notably in Vue,
+ * where prop types cannot be wrapped by generics like `EnforcePartials`).
+ */
+export type ContentProps = InternalRenderProps & EnforcePartials<ContentVariantsPrps>;
+export {};

package/lib/node/components/content/contentProps.types.js

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

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

@@ -1,3 +1,5 @@
+<script context="module"></script>
+
 <script>import { isEmptyElement } from "./dynamic-renderer.helpers.js";
 import { setAttrs } from "../../blocks/helpers.js";
 export let attributes;

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

@@ -2,16 +2,10 @@ import { default as Button } from '../blocks/button/button.svelte';
 import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
 import { default as Columns } from '../blocks/columns/columns.svelte';
 import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
-import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
-import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
-import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
-import { default as embed } from '../blocks/embed/embed.svelte';
 import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
 import { default as Fragment } from '../blocks/fragment/fragment.svelte';
 import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
 import { default as Image } from '../blocks/image/image.svelte';
-import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
-import { default as Img } from '../blocks/img/img.svelte';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
 import { default as Section } from '../blocks/section/section.svelte';
 import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info.js';
@@ -20,8 +14,7 @@ import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component
 import { default as Symbol } from '../blocks/symbol/symbol.svelte';
 import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
 import { default as Text } from '../blocks/text/text.svelte';
-import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
-import { default as Video } from '../blocks/video/video.svelte';
+import { getExtraComponents } from './extra-components.js';
 /**
  * Returns a list of all registered components.
  * NOTE: This needs to be a function to work around ESM circular dependencies.
@@ -32,34 +25,22 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Columns,
         ...columnsComponentInfo
-    }, {
-        component: customCode,
-        ...customCodeInfo
-    }, {
-        component: embed,
-        ...embedComponentInfo
     }, {
         component: Fragment,
         ...fragmentComponentInfo
     }, {
         component: Image,
         ...imageComponentInfo
-    }, {
-        component: Img,
-        ...imgComponentInfo
     }, {
         component: Section,
         ...sectionComponentInfo
+    }, {
+        component: Slot,
+        ...slotComponentInfo
     }, {
         component: Symbol,
         ...symbolComponentInfo
     }, {
         component: Text,
         ...textComponentInfo
-    }, {
-        component: Video,
-        ...videoComponentInfo
-    }, {
-        component: Slot,
-        ...slotComponentInfo
-    }];
+    }, ...getExtraComponents()];

package/lib/node/constants/extra-components.d.ts

@@ -0,0 +1,7 @@
+/**
+ * These are in a separate file because React Native does not support them (yet).
+ * Having them in a separate file allows us to override it to be empty in the
+ * React Native SDK.
+ */
+import type { RegisteredComponent } from '../context/types.js';
+export declare const getExtraComponents: () => RegisteredComponent[];

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

@@ -0,0 +1,47 @@
+/**
+ * These are in a separate file because React Native does not support them (yet).
+ * Having them in a separate file allows us to override it to be empty in the
+ * React Native SDK.
+ */
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed.svelte';
+import { componentInfo as formComponentInfo } from '../blocks/form/form/component-info.js';
+import { default as Form } from '../blocks/form/form/form.svelte';
+import { componentInfo as formInputComponentInfo } from '../blocks/form/input/component-info.js';
+import { default as FormInput } from '../blocks/form/input/input.svelte';
+import { componentInfo as formSelectComponentInfo } from '../blocks/form/select/component-info.js';
+import { default as FormSelect } from '../blocks/form/select/select.svelte';
+import { componentInfo as formSubmitButtonComponentInfo } from '../blocks/form/submit-button/component-info.js';
+import { default as FormSubmitButton } from '../blocks/form/submit-button/submit-button.svelte';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as Img } from '../blocks/img/img.svelte';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video.svelte';
+import { TARGET } from './target.js';
+export const getExtraComponents = () => [{
+        component: customCode,
+        ...customCodeInfo
+    }, {
+        component: embed,
+        ...embedComponentInfo
+    }, ...(TARGET === 'rsc' ? [] : [{
+            component: Form,
+            ...formComponentInfo
+        }, {
+            component: FormInput,
+            ...formInputComponentInfo
+        }, {
+            component: FormSubmitButton,
+            ...formSubmitButtonComponentInfo
+        }, {
+            component: FormSelect,
+            ...formSelectComponentInfo
+        }]), {
+        component: Img,
+        ...imgComponentInfo
+    }, {
+        component: Video,
+        ...videoComponentInfo
+    }];

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.13.1";
+export declare const SDK_VERSION = "0.13.3";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.13.1";
+export const SDK_VERSION = "0.13.3";

package/lib/node/functions/get-env.d.ts

@@ -0,0 +1,2 @@
+export declare const validEnvList: string[];
+export declare const getEnv: () => string;

package/lib/node/functions/get-env.js

@@ -0,0 +1,5 @@
+export const validEnvList = ['production', 'qa', 'test', 'development', 'dev', 'cdn-qa', 'cloud', 'fast', 'cdn2', 'cdn-prod'];
+export const getEnv = () => {
+    const env = process.env.NODE_ENV || 'production';
+    return validEnvList.includes(env) ? env : 'production';
+};

package/lib/node/functions/get.d.ts

@@ -0,0 +1 @@
+export declare const get: (obj: any, path: string, defaultValue?: any) => any;

package/lib/node/functions/get.js

@@ -0,0 +1,4 @@
+export const get = (obj, path, defaultValue) => {
+    const result = String.prototype.split.call(path, /[,[\].]+?/).filter(Boolean).reduce((res, key) => res !== null && res !== undefined ? res[key] : res, obj);
+    return result === undefined || result === obj ? defaultValue : result;
+};

package/lib/node/types/builder-props.d.ts

@@ -2,7 +2,7 @@
 import type { Writable } from "svelte/store";
 import type { BuilderContextInterface, RegisteredComponents } from '../context/types.js';
 import type { BuilderBlock } from './builder-block.js';
-export type PropsWithBuilderData<T> = T & {
+export type BuilderDataProps = {
     builderBlock: BuilderBlock;
     builderContext: Writable<BuilderContextInterface>;
 };

package/lib/node/types/input.d.ts

@@ -118,4 +118,5 @@ export interface Input {
         type?: string;
     };
     onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
+    meta?: Record<string, any>;
 }

package/lib/node/types/typescript.d.ts

@@ -6,6 +6,3 @@ export type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T,
 export type Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
-export type PropsWithChildren<P> = P & {
-    children?: any;
-};

package/package.json

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

package/src/blocks/columns/columns.svelte

@@ -12,22 +12,19 @@
   import { deoptSignal } from "../../functions/deopt.js";
   import { getClassPropName } from "../../functions/get-class-prop-name.js";
   import { mapStyleObjToStrIfNeeded } from "../../functions/get-style.js";
-  import type { PropsWithBuilderData } from "../../types/builder-props.js";
   import type { Dictionary } from "../../types/typescript.js";
   import type { ColumnProps } from "./columns.types.js";
 
-  export let js: PropsWithBuilderData<ColumnProps>["js"];
-  export let space: PropsWithBuilderData<ColumnProps>["space"] = undefined;
-  export let columns: PropsWithBuilderData<ColumnProps>["columns"] = undefined;
-  export let stackColumnsAt: PropsWithBuilderData<ColumnProps>["stackColumnsAt"] =
+  export let space: ColumnProps["space"] = undefined;
+  export let columns: ColumnProps["columns"] = undefined;
+  export let stackColumnsAt: ColumnProps["stackColumnsAt"] = undefined;
+  export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"] =
     undefined;
-  export let reverseColumnsWhenStacked: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"] =
+  export let builderContext: ColumnProps["builderContext"];
+  export let builderBlock: ColumnProps["builderBlock"];
+  export let builderLinkComponent: ColumnProps["builderLinkComponent"] =
     undefined;
-  export let builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
-  export let builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
-  export let builderLinkComponent: PropsWithBuilderData<ColumnProps>["builderLinkComponent"] =
-    undefined;
-  export let builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
+  export let builderComponents: ColumnProps["builderComponents"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {

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

@@ -1,12 +1,12 @@
 import type { BuilderBlock } from '../../types/builder-block.js';
-import type { BuilderComponentsProp, BuilderLinkComponentProp } from '../../types/builder-props.js';
+import type { BuilderComponentsProp, BuilderDataProps, BuilderLinkComponentProp } from '../../types/builder-props.js';
 type Column = {
   blocks: BuilderBlock[];
   width?: number;
   link?: string;
 };
 type StackColumnsAt = 'tablet' | 'mobile' | 'never';
-export interface ColumnProps extends BuilderComponentsProp, BuilderLinkComponentProp {
+export interface ColumnProps extends BuilderComponentsProp, BuilderLinkComponentProp, BuilderDataProps {
   columns?: Column[];
   space?: number;
   stackColumnsAt?: StackColumnsAt;

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

@@ -1,4 +1,4 @@
-import type { ComponentInfo } from '../../types/components.js';
+import type { ComponentInfo } from '../../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Form:Form',
   // editableTags: ['builder-form-error']