@builder.io/sdk-svelte 0.5.8 → 0.6.0

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

@@ -0,0 +1,121 @@
+export interface Input {
+    /** This is the name of the component prop this input represents */
+    name: string;
+    /** A friendlier name to show in the UI if the component prop name is not ideal for end users */
+    friendlyName?: string;
+    /** @hidden @deprecated */
+    description?: string;
+    /** A default value to use */
+    defaultValue?: any;
+    /**
+     * The type of input to use, such as 'text'
+     *
+     * See all available inputs [here](https://www.builder.io/c/docs/custom-react-components#input-types)
+     * and you can create your own custom input types and associated editor UIs with [plugins](https://www.builder.io/c/docs/extending/plugins)
+     */
+    type: string;
+    /** Is this input mandatory or not */
+    required?: boolean;
+    /** @hidden */
+    autoFocus?: boolean;
+    subFields?: Input[];
+    /**
+     * Additional text to render in the UI to give guidance on how to use this
+     *
+     * @example
+     * ```js
+     * helperText: 'Be sure to use a proper URL, starting with "https://"'
+     * 111
+     */
+    helperText?: string;
+    /** @hidden */
+    allowedFileTypes?: string[];
+    /** @hidden */
+    imageHeight?: number;
+    /** @hidden */
+    imageWidth?: number;
+    /** @hidden */
+    mediaHeight?: number;
+    /** @hidden */
+    mediaWidth?: number;
+    /** @hidden */
+    hideFromUI?: boolean;
+    /** @hidden */
+    modelId?: string;
+    /**
+     * Number field type validation maximum accepted input
+     */
+    max?: number;
+    /**
+     * Number field type validation minimum accepted input
+     */
+    min?: number;
+    /**
+     * Number field type step size when using arrows
+     */
+    step?: number;
+    /**
+     * Set this to `true` to show the editor for this input when
+     * children of this component are selected. This is useful for things
+     * like Tabs, such that users may not always select the Tabs component
+     * directly but will still be looking for how to add additional tabs
+     */
+    broadcast?: boolean;
+    /**
+     * Set this to `true` to show the editor for this input when
+     * group locked parents of this component are selected. This is useful
+     * to bubble up important inputs for locked groups, like text and images
+     */
+    bubble?: boolean;
+    /**
+     * Set this to `true` if you want this component to be translatable
+     */
+    localized?: boolean;
+    /** @hidden */
+    options?: {
+        [key: string]: any;
+    };
+    /**
+     * For "text" input type, specifying an enum will show a dropdown of options instead
+     */
+    enum?: string[] | {
+        label: string;
+        value: any;
+        helperText?: string;
+    }[];
+    /** Regex field validation for all string types (text, longText, html, url, etc) */
+    regex?: {
+        /** pattern to test, like "^\/[a-z]$" */
+        pattern: string;
+        /** flags for the RegExp constructor, e.g. "gi"  */
+        options?: string;
+        /**
+         * Friendly message to display to end-users if the regex fails, e.g.
+         * "You must use a relative url starting with '/...' "
+         */
+        message: string;
+    };
+    /**
+     * Set this to `true` to put this under the "show more" section of
+     * the options editor. Useful for things that are more advanced
+     * or more rarely used and don't need to be too prominent
+     */
+    advanced?: boolean;
+    /** @hidden */
+    /** @hidden */
+    code?: boolean;
+    /** @hidden */
+    richText?: boolean;
+    /** @hidden */
+    showIf?: ((options: Map<string, any>) => boolean) | string;
+    /** @hidden */
+    copyOnAdd?: boolean;
+    /**
+     * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
+     */
+    model?: string;
+    valueType?: {
+        type?: string;
+    };
+    onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
+}

package/lib/node/types/input.js

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

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

@@ -0,0 +1 @@
+export type Target = 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc';

package/lib/node/types/targets.js

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

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

@@ -0,0 +1,11 @@
+export type Nullable<T> = T | null | undefined;
+export type Dictionary<T> = {
+    [key: string]: T;
+};
+export type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type PropsWithChildren<P> = P & {
+    children?: any;
+};

package/lib/node/types/typescript.js

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

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "type": "module",
   "files": [
-    "package",
+    "lib",
     "src"
   ],
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
@@ -13,33 +13,45 @@
     "url": "https://github.com/BuilderIO/builder.git",
     "directory": "packages/sdks/output/svelte"
   },
-  "main": "./package/index.js",
-  "module": "./package/index.js",
-  "svelte": "./package/index.js",
+  "main": "./lib/node/index.js",
+  "module": "./lib/node/index.js",
+  "svelte": "./lib/browser/index.js",
   "exports": {
-    "./src": {
-      "import": "./src/index.js",
-      "require": "./src/index.js"
-    },
     ".": {
-      "import": "./package/index.js",
-      "require": "./package/index.js"
-    }
+      "svelte": "./lib/browser/index.js",
+      "node": "./lib/node/index.js",
+      "browser": "./lib/browser/index.js",
+      "edge-routine": "./lib/edge/index.js",
+      "workerd": "./lib/edge/index.js",
+      "deno": "./lib/edge/index.js",
+      "lagon": "./lib/edge/index.js",
+      "netlify": "./lib/edge/index.js",
+      "edge-light": "./lib/edge/index.js",
+      "bun": "./lib/edge/index.js",
+      "electron": "./lib/node/index.js",
+      "default": "./lib/browser/index.js"
+    },
+    "./edge": "./lib/edge/index.js",
+    "./node": "./lib/node/index.js",
+    "./browser": "./lib/browser/index.js"
   },
-  "types": "./package/index.d.ts",
+  "types": "./lib/browser/index.d.ts",
   "scripts": {
-    "build": "svelte-kit sync && svelte-package",
-    "build:watch": "svelte-kit sync && svelte-package --watch",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    "prepare": "SDK_ENV=browser svelte-kit sync",
+    "build": "nx run-many -p @builder.io/sdk-svelte -t build:node build:edge build:browser",
+    "build:node": "SDK_ENV=node svelte-package -i src/ -o lib/node",
+    "build:edge": "SDK_ENV=edge svelte-package -i src/ -o lib/edge",
+    "build:browser": "SDK_ENV=browser svelte-package -i src/ -o lib/browser",
+    "check": "SDK_ENV=browser svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "1.0.0-next.71",
-    "@sveltejs/kit": "^1.16.2",
-    "@sveltejs/package": "1.0.0-next.1",
+    "@builder.io/sdks": "workspace:*",
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/kit": "^1.22.4",
+    "@sveltejs/package": "^2.2.0",
     "nx": "^16.6.0",
     "nx-cloud": "^16.2.0",
-    "svelte": "^3.59.1",
+    "svelte": "^4.1.2",
     "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.4",
     "tslib": "^2.3.1",
@@ -47,19 +59,29 @@
     "vite": "^4.4.8"
   },
   "nx": {
-    "implicitDependencies": [
-      "@builder.io/sdks"
-    ],
     "targets": {
-      "build": {
+      "prepare": {
         "dependsOn": [
           "^build:svelte",
           "^build"
         ],
         "outputs": [
-          "{projectRoot}/package"
+          "{projectRoot}/.svelte-kit"
+        ]
+      },
+      "build": {
+        "dependsOn": [
+          "^build:svelte",
+          "^build",
+          "prepare"
+        ],
+        "outputs": [
+          "{projectRoot}/lib"
         ]
       }
     }
+  },
+  "peerDependencies": {
+    "svelte": "^4.1.2"
   }
 }

package/src/blocks/button/button.svelte

@@ -14,10 +14,10 @@
   import { filterAttrs } from "../helpers.js";
   import { setAttrs } from "../helpers.js";
 
-  export let attributes: ButtonProps["attributes"];
-  export let text: ButtonProps["text"];
-  export let link: ButtonProps["link"];
-  export let openLinkInNewTab: ButtonProps["openLinkInNewTab"];
+  export let attributes: ButtonProps["attributes"] = undefined;
+  export let text: ButtonProps["text"] = undefined;
+  export let link: ButtonProps["link"] = undefined;
+  export let openLinkInNewTab: ButtonProps["openLinkInNewTab"] = undefined;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {

package/src/blocks/columns/columns.svelte

@@ -29,12 +29,15 @@
     BuilderComponentsProp,
     PropsWithBuilderData,
   } from "../../types/builder-props.js";
+  import { deoptSignal } from "../../functions/deopt.js";
 
   export let js: PropsWithBuilderData<ColumnProps>["js"];
-  export let space: PropsWithBuilderData<ColumnProps>["space"];
-  export let columns: PropsWithBuilderData<ColumnProps>["columns"];
-  export let stackColumnsAt: PropsWithBuilderData<ColumnProps>["stackColumnsAt"];
-  export let reverseColumnsWhenStacked: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
+  export let space: PropsWithBuilderData<ColumnProps>["space"] = undefined;
+  export let columns: PropsWithBuilderData<ColumnProps>["columns"] = undefined;
+  export let stackColumnsAt: PropsWithBuilderData<ColumnProps>["stackColumnsAt"] =
+    undefined;
+  export let reverseColumnsWhenStacked: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"] =
+    undefined;
   export let builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
   export let builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
   export let builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];
@@ -76,11 +79,6 @@
   }
   function columnCssVars(index: number) {
     const gutter = index === 0 ? 0 : gutterSize;
-    if (TARGET === "reactNative") {
-      return {
-        marginLeft: stackColumnsAt === "never" ? gutter : 0,
-      } as any as Dictionary<string>;
-    }
     const width = getColumnCssWidth(index);
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
@@ -105,7 +103,7 @@
         stackedStyle: mobileMarginLeft,
         desktopStyle: gutterPixels,
       }),
-    } as any as Dictionary<string>;
+    } as Dictionary<string>;
   }
   function getWidthForBreakpointSize(size: SizeName) {
     const breakpointSizes = getSizesForBreakpoints(
@@ -177,7 +175,6 @@
       {...{}}
     >
       <Blocks
-        blocks={column.blocks}
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
@@ -185,6 +182,7 @@
         }}
         context={builderContext}
         registeredComponents={builderComponents}
+        blocks={column.blocks}
       />
     </div>
   {/each}

package/src/blocks/custom-code/custom-code.svelte

@@ -8,7 +8,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
-  export let replaceNodes: CustomCodeProps["replaceNodes"];
+  export let replaceNodes: CustomCodeProps["replaceNodes"] = undefined;
   export let code: CustomCodeProps["code"];
 
   function findAndRunScripts() {

package/src/blocks/image/image.svelte

@@ -24,17 +24,17 @@
   import { getSrcSet } from "./image.helpers.js";
 
   export let image: ImageProps["image"];
-  export let src: ImageProps["src"];
-  export let srcset: ImageProps["srcset"];
-  export let noWebp: ImageProps["noWebp"];
-  export let aspectRatio: ImageProps["aspectRatio"];
-  export let altText: ImageProps["altText"];
-  export let backgroundPosition: ImageProps["backgroundPosition"];
-  export let backgroundSize: ImageProps["backgroundSize"];
-  export let className: ImageProps["className"];
-  export let sizes: ImageProps["sizes"];
-  export let builderBlock: ImageProps["builderBlock"];
-  export let fitContent: ImageProps["fitContent"];
+  export let src: ImageProps["src"] = undefined;
+  export let srcset: ImageProps["srcset"] = undefined;
+  export let noWebp: ImageProps["noWebp"] = undefined;
+  export let aspectRatio: ImageProps["aspectRatio"] = undefined;
+  export let altText: ImageProps["altText"] = undefined;
+  export let backgroundPosition: ImageProps["backgroundPosition"] = undefined;
+  export let backgroundSize: ImageProps["backgroundSize"] = undefined;
+  export let className: ImageProps["className"] = undefined;
+  export let sizes: ImageProps["sizes"] = undefined;
+  export let builderBlock: ImageProps["builderBlock"] = undefined;
+  export let fitContent: ImageProps["fitContent"] = undefined;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {

package/src/blocks/img/img.svelte

@@ -26,12 +26,12 @@
   import { filterAttrs } from "../helpers.js";
   import { setAttrs } from "../helpers.js";
 
-  export let backgroundSize: ImgProps["backgroundSize"];
-  export let backgroundPosition: ImgProps["backgroundPosition"];
-  export let imgSrc: ImgProps["imgSrc"];
-  export let altText: ImgProps["altText"];
-  export let image: ImgProps["image"];
-  export let attributes: ImgProps["attributes"];
+  export let backgroundSize: ImgProps["backgroundSize"] = undefined;
+  export let backgroundPosition: ImgProps["backgroundPosition"] = undefined;
+  export let imgSrc: ImgProps["imgSrc"] = undefined;
+  export let altText: ImgProps["altText"] = undefined;
+  export let image: ImgProps["image"] = undefined;
+  export let attributes: ImgProps["attributes"] = undefined;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {

package/src/blocks/input/input.svelte

@@ -18,13 +18,13 @@
   import { filterAttrs } from "../helpers.js";
   import { setAttrs } from "../helpers.js";
 
-  export let attributes: FormInputProps["attributes"];
-  export let defaultValue: FormInputProps["defaultValue"];
-  export let placeholder: FormInputProps["placeholder"];
-  export let type: FormInputProps["type"];
-  export let name: FormInputProps["name"];
-  export let value: FormInputProps["value"];
-  export let required: FormInputProps["required"];
+  export let attributes: FormInputProps["attributes"] = undefined;
+  export let defaultValue: FormInputProps["defaultValue"] = undefined;
+  export let placeholder: FormInputProps["placeholder"] = undefined;
+  export let type: FormInputProps["type"] = undefined;
+  export let name: FormInputProps["name"] = undefined;
+  export let value: FormInputProps["value"] = undefined;
+  export let required: FormInputProps["required"] = undefined;
 </script>
 
 <input

package/src/blocks/raw-text/raw-text.svelte

@@ -6,8 +6,8 @@
 </script>
 
 <script lang="ts">
-  export let text: RawTextProps["text"];
-  export let attributes: RawTextProps["attributes"];
+  export let text: RawTextProps["text"] = undefined;
+  export let attributes: RawTextProps["attributes"] = undefined;
 </script>
 
 <span class={attributes.class}>{@html text?.toString() || ""}</span>

package/src/blocks/section/section.svelte

@@ -14,8 +14,8 @@
   import { filterAttrs } from "../helpers.js";
   import { setAttrs } from "../helpers.js";
 
-  export let attributes: SectionProps["attributes"];
-  export let maxWidth: SectionProps["maxWidth"];
+  export let attributes: SectionProps["attributes"] = undefined;
+  export let maxWidth: SectionProps["maxWidth"] = undefined;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {

package/src/blocks/select/select.svelte

@@ -19,11 +19,11 @@
   import { filterAttrs } from "../helpers.js";
   import { setAttrs } from "../helpers.js";
 
-  export let attributes: FormSelectProps["attributes"];
-  export let value: FormSelectProps["value"];
-  export let defaultValue: FormSelectProps["defaultValue"];
-  export let name: FormSelectProps["name"];
-  export let options: FormSelectProps["options"];
+  export let attributes: FormSelectProps["attributes"] = undefined;
+  export let value: FormSelectProps["value"] = undefined;
+  export let defaultValue: FormSelectProps["defaultValue"] = undefined;
+  export let name: FormSelectProps["name"] = undefined;
+  export let options: FormSelectProps["options"] = undefined;
 </script>
 
 <select

package/src/blocks/submit-button/submit-button.svelte

@@ -12,8 +12,8 @@
   import { filterAttrs } from "../helpers.js";
   import { setAttrs } from "../helpers.js";
 
-  export let attributes: ButtonProps["attributes"];
-  export let text: ButtonProps["text"];
+  export let attributes: ButtonProps["attributes"] = undefined;
+  export let text: ButtonProps["text"] = undefined;
 </script>
 
 <button

package/src/blocks/symbol/symbol.svelte

@@ -38,9 +38,10 @@
   import type { Nullable } from "../../types/typescript.js";
 
   export let js: PropsWithBuilderData<SymbolProps>["js"];
-  export let attributes: PropsWithBuilderData<SymbolProps>["attributes"];
-  export let symbol: PropsWithBuilderData<SymbolProps>["symbol"];
-  export let dynamic: PropsWithBuilderData<SymbolProps>["dynamic"];
+  export let attributes: PropsWithBuilderData<SymbolProps>["attributes"] =
+    undefined;
+  export let symbol: PropsWithBuilderData<SymbolProps>["symbol"] = undefined;
+  export let dynamic: PropsWithBuilderData<SymbolProps>["dynamic"] = undefined;
   export let builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
   export let builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
 

package/src/blocks/text/text.svelte

@@ -5,7 +5,7 @@
 </script>
 
 <script lang="ts">
-  export let text: TextProps["text"];
+  export let text: TextProps["text"] = undefined;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -22,6 +22,5 @@
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text"
-  {...{}}>{@html text?.toString() || ""}</span
+  class="builder-text">{@html text?.toString() || ""}</span
 >

package/src/blocks/textarea/textarea.svelte

@@ -15,11 +15,11 @@
   import { filterAttrs } from "../helpers.js";
   import { setAttrs } from "../helpers.js";
 
-  export let attributes: TextareaProps["attributes"];
-  export let placeholder: TextareaProps["placeholder"];
-  export let name: TextareaProps["name"];
-  export let value: TextareaProps["value"];
-  export let defaultValue: TextareaProps["defaultValue"];
+  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;
 </script>
 
 <textarea

package/src/blocks/video/video.svelte

@@ -28,17 +28,17 @@
 </script>
 
 <script lang="ts">
-  export let autoPlay: VideoProps["autoPlay"];
-  export let muted: VideoProps["muted"];
-  export let controls: VideoProps["controls"];
-  export let loop: VideoProps["loop"];
-  export let playsInline: VideoProps["playsInline"];
-  export let attributes: VideoProps["attributes"];
-  export let preload: VideoProps["preload"];
-  export let fit: VideoProps["fit"];
-  export let position: VideoProps["position"];
-  export let video: VideoProps["video"];
-  export let posterImage: VideoProps["posterImage"];
+  export let autoPlay: VideoProps["autoPlay"] = undefined;
+  export let muted: VideoProps["muted"] = undefined;
+  export let controls: VideoProps["controls"] = undefined;
+  export let loop: VideoProps["loop"] = undefined;
+  export let playsInline: VideoProps["playsInline"] = undefined;
+  export let attributes: VideoProps["attributes"] = undefined;
+  export let preload: VideoProps["preload"] = undefined;
+  export let fit: VideoProps["fit"] = undefined;
+  export let position: VideoProps["position"] = undefined;
+  export let video: VideoProps["video"] = undefined;
+  export let posterImage: VideoProps["posterImage"] = undefined;
 
   function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {

package/src/components/block/components/component-ref/component-ref.svelte

@@ -4,6 +4,7 @@
   import InteractiveElement from "../interactive-element.svelte";
   import type { ComponentProps } from "./component-ref.helpers.js";
   import { getWrapperProps } from "./component-ref.helpers.js";
+  import { wrapComponentRef } from "../../../content/wrap-component-ref.js";
 
   export let isInteractive: ComponentProps["isInteractive"];
   export let componentRef: ComponentProps["componentRef"];

package/src/components/blocks/blocks.svelte

@@ -24,8 +24,9 @@
   export let parent: BlocksProps["parent"];
   export let path: BlocksProps["path"];
   export let styleProp: BlocksProps["styleProp"];
-  export let context: BlocksProps["context"];
-  export let registeredComponents: BlocksProps["registeredComponents"];
+  export let context: BlocksProps["context"] = undefined;
+  export let registeredComponents: BlocksProps["registeredComponents"] =
+    undefined;
 
   let builderContext = getContext(BuilderContext.key);
   let componentsContext = getContext(ComponentsContext.key);

package/src/components/content/components/enable-editor.svelte

@@ -39,18 +39,18 @@
   import { fastClone } from "../../../functions/fast-clone.js";
   import type { Writable } from "svelte/store";
 
-  export let canTrack: BuilderEditorProps["canTrack"];
+  export let canTrack: BuilderEditorProps["canTrack"] = undefined;
   export let builderContextSignal: BuilderEditorProps["builderContextSignal"];
-  export let model: BuilderEditorProps["model"];
-  export let context: BuilderEditorProps["context"];
+  export let model: BuilderEditorProps["model"] = undefined;
+  export let context: BuilderEditorProps["context"] = undefined;
   export let apiKey: BuilderEditorProps["apiKey"];
   export let showContent: BuilderEditorProps["showContent"];
   export let classNameProp: BuilderEditorProps["classNameProp"];
 
-  export let content: BuilderEditorProps["content"];
-  export let locale: BuilderEditorProps["locale"];
-  export let includeRefs: BuilderEditorProps["includeRefs"];
-  export let enrich: BuilderEditorProps["enrich"];
+  export let content: BuilderEditorProps["content"] = undefined;
+  export let locale: BuilderEditorProps["locale"] = undefined;
+  export let includeRefs: BuilderEditorProps["includeRefs"] = undefined;
+  export let enrich: BuilderEditorProps["enrich"] = undefined;
 
   function mergeNewContent(newContent: BuilderContent) {
     const newContentValue = {

package/src/components/content/components/styles.svelte

@@ -12,9 +12,9 @@
   import { getCss } from "./styles.helpers.js";
   import { getFontCss } from "./styles.helpers.js";
 
-  export let cssCode: Props["cssCode"];
-  export let contentId: Props["contentId"];
-  export let customFonts: Props["customFonts"];
+  export let cssCode: Props["cssCode"] = undefined;
+  export let contentId: Props["contentId"] = undefined;
+  export let customFonts: Props["customFonts"] = undefined;
 
   let injectedStyles = `
 ${getCss({

package/src/components/content/content.svelte

@@ -28,17 +28,17 @@
   import type { Dictionary } from "../../types/typescript.js";
   import ComponentsContext from "../../context/components.context.js";
 
-  export let content: ContentProps["content"];
-  export let customComponents: ContentProps["customComponents"];
-  export let data: ContentProps["data"];
-  export let locale: ContentProps["locale"];
-  export let context: ContentProps["context"];
+  export let content: ContentProps["content"] = undefined;
+  export let customComponents: ContentProps["customComponents"] = undefined;
+  export let data: ContentProps["data"] = undefined;
+  export let locale: ContentProps["locale"] = undefined;
+  export let context: ContentProps["context"] = undefined;
   export let apiKey: ContentProps["apiKey"];
-  export let apiVersion: ContentProps["apiVersion"];
-  export let model: ContentProps["model"];
-  export let canTrack: ContentProps["canTrack"];
-  export let includeRefs: ContentProps["includeRefs"];
-  export let enrich: ContentProps["enrich"];
+  export let apiVersion: ContentProps["apiVersion"] = undefined;
+  export let model: ContentProps["model"] = undefined;
+  export let canTrack: ContentProps["canTrack"] = undefined;
+  export let includeRefs: ContentProps["includeRefs"] = undefined;
+  export let enrich: ContentProps["enrich"] = undefined;
   export let classNameProp: ContentProps["classNameProp"];
   export let showContent: ContentProps["showContent"];
   export let isSsrAbTest: ContentProps["isSsrAbTest"];