@builder.io/sdk-svelte 0.5.7 → 0.5.9

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.5.7",
+  "version": "0.5.9",
   "type": "module",
   "files": [
     "package",
@@ -98,12 +98,15 @@
     "./context/types": "./context/types.js",
     "./functions/apply-patch-with-mutation": "./functions/apply-patch-with-mutation.js",
     "./functions/camel-to-kebab-case": "./functions/camel-to-kebab-case.js",
-    "./functions/evaluate/acorn-interpreter": "./functions/evaluate/acorn-interpreter.js",
+    "./functions/evaluate/browser-runtime/browser": "./functions/evaluate/browser-runtime/browser.js",
+    "./functions/evaluate/browser-runtime": "./functions/evaluate/browser-runtime/index.js",
     "./functions/evaluate/evaluate": "./functions/evaluate/evaluate.js",
+    "./functions/evaluate/helpers": "./functions/evaluate/helpers.js",
     "./functions/evaluate": "./functions/evaluate/index.js",
+    "./functions/evaluate/node-runtime": "./functions/evaluate/node-runtime/index.js",
+    "./functions/evaluate/non-node-runtime/acorn-interpreter": "./functions/evaluate/non-node-runtime/acorn-interpreter.js",
     "./functions/evaluate/non-node-runtime": "./functions/evaluate/non-node-runtime/index.js",
     "./functions/evaluate/non-node-runtime/non-node-runtime": "./functions/evaluate/non-node-runtime/non-node-runtime.js",
-    "./functions/evaluate/types": "./functions/evaluate/types.js",
     "./functions/event-handler-name": "./functions/event-handler-name.js",
     "./functions/extract-text-styles": "./functions/extract-text-styles.js",
     "./functions/fast-clone": "./functions/fast-clone.js",
@@ -157,6 +160,7 @@
     "./index-helpers/blocks-exports": "./index-helpers/blocks-exports.js",
     "./index-helpers/top-of-file": "./index-helpers/top-of-file.js",
     "./scripts/init-editing": "./scripts/init-editing.js",
+    "./server-index": "./server-index.js",
     "./types/api-version": "./types/api-version.js",
     "./types/builder-block": "./types/builder-block.js",
     "./types/builder-content": "./types/builder-content.js",

package/package/CHANGELOG.md

@@ -1,3 +1,11 @@
+### 0.5.9
+
+No Changes.
+
+### 0.5.8
+
+- Fix: properly serialize messages sent to visual editor.
+
 ### 0.5.7
 
 - No Changes.

package/package/blocks/button/button.svelte

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

package/package/blocks/button/button.svelte.d.ts

@@ -9,10 +9,10 @@ import { SvelteComponentTyped } from "svelte";
 }
 declare const __propDef: {
     props: {
-        attributes: ButtonProps["attributes"];
-        text: ButtonProps["text"];
-        link: ButtonProps["link"];
-        openLinkInNewTab: ButtonProps["openLinkInNewTab"];
+        attributes?: ButtonProps["attributes"];
+        text?: ButtonProps["text"];
+        link?: ButtonProps["link"];
+        openLinkInNewTab?: ButtonProps["openLinkInNewTab"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/columns/columns.svelte

@@ -5,10 +5,10 @@ import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
 import InlinedStyles from "../../components/inlined-styles.svelte";
 import { TARGET } from "../../constants/target.js";
 export let js;
-export let space;
-export let columns;
-export let stackColumnsAt;
-export let reverseColumnsWhenStacked;
+export let space = undefined;
+export let columns = undefined;
+export let stackColumnsAt = undefined;
+export let reverseColumnsWhenStacked = undefined;
 export let builderContext;
 export let builderBlock;
 export let builderComponents;

package/package/blocks/columns/columns.svelte.d.ts

@@ -16,10 +16,10 @@ import type { BuilderComponentsProp, PropsWithBuilderData } from "../../types/bu
 declare const __propDef: {
     props: {
         js: any;
-        space: PropsWithBuilderData<ColumnProps>["space"];
-        columns: PropsWithBuilderData<ColumnProps>["columns"];
-        stackColumnsAt: PropsWithBuilderData<ColumnProps>["stackColumnsAt"];
-        reverseColumnsWhenStacked: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
+        space?: PropsWithBuilderData<ColumnProps>["space"];
+        columns?: PropsWithBuilderData<ColumnProps>["columns"];
+        stackColumnsAt?: PropsWithBuilderData<ColumnProps>["stackColumnsAt"];
+        reverseColumnsWhenStacked?: PropsWithBuilderData<ColumnProps>["reverseColumnsWhenStacked"];
         builderContext: PropsWithBuilderData<ColumnProps>["builderContext"];
         builderBlock: PropsWithBuilderData<ColumnProps>["builderBlock"];
         builderComponents: PropsWithBuilderData<ColumnProps>["builderComponents"];

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

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
 <script>import { onMount } from "svelte";
-export let replaceNodes;
+export let replaceNodes = undefined;
 export let code;
 function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'

package/package/blocks/custom-code/custom-code.svelte.d.ts

@@ -5,7 +5,7 @@ export interface CustomCodeProps {
 }
 declare const __propDef: {
     props: {
-        replaceNodes: CustomCodeProps["replaceNodes"];
+        replaceNodes?: CustomCodeProps["replaceNodes"];
         code: CustomCodeProps["code"];
     };
     events: {

package/package/blocks/image/image.svelte

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

package/package/blocks/image/image.svelte.d.ts

@@ -22,17 +22,17 @@ import type { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         image: ImageProps["image"];
-        src: ImageProps["src"];
-        srcset: ImageProps["srcset"];
-        noWebp: ImageProps["noWebp"];
-        aspectRatio: ImageProps["aspectRatio"];
-        altText: ImageProps["altText"];
-        backgroundPosition: ImageProps["backgroundPosition"];
-        backgroundSize: ImageProps["backgroundSize"];
-        className: ImageProps["className"];
-        sizes: ImageProps["sizes"];
-        builderBlock: ImageProps["builderBlock"];
-        fitContent: ImageProps["fitContent"];
+        src?: ImageProps["src"];
+        srcset?: ImageProps["srcset"];
+        noWebp?: ImageProps["noWebp"];
+        aspectRatio?: ImageProps["aspectRatio"];
+        altText?: ImageProps["altText"];
+        backgroundPosition?: ImageProps["backgroundPosition"];
+        backgroundSize?: ImageProps["backgroundSize"];
+        className?: ImageProps["className"];
+        sizes?: ImageProps["sizes"];
+        builderBlock?: ImageProps["builderBlock"];
+        fitContent?: ImageProps["fitContent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/img/img.svelte

@@ -3,12 +3,12 @@
 <script>import { isEditing } from "../../functions/is-editing.js";
 import { filterAttrs } from "../helpers.js";
 import { setAttrs } from "../helpers.js";
-export let backgroundSize;
-export let backgroundPosition;
-export let imgSrc;
-export let altText;
-export let image;
-export let attributes;
+export let backgroundSize = undefined;
+export let backgroundPosition = undefined;
+export let imgSrc = undefined;
+export let altText = undefined;
+export let image = undefined;
+export let attributes = undefined;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
         if (p.startsWith("--")) {

package/package/blocks/img/img.svelte.d.ts

@@ -11,12 +11,12 @@ import { SvelteComponentTyped } from "svelte";
 }
 declare const __propDef: {
     props: {
-        backgroundSize: ImgProps["backgroundSize"];
-        backgroundPosition: ImgProps["backgroundPosition"];
-        imgSrc: ImgProps["imgSrc"];
-        altText: ImgProps["altText"];
-        image: ImgProps["image"];
-        attributes: ImgProps["attributes"];
+        backgroundSize?: ImgProps["backgroundSize"];
+        backgroundPosition?: ImgProps["backgroundPosition"];
+        imgSrc?: ImgProps["imgSrc"];
+        altText?: ImgProps["altText"];
+        image?: ImgProps["image"];
+        attributes?: ImgProps["attributes"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/input/input.svelte

@@ -3,13 +3,13 @@
 <script>import { isEditing } from "../../functions/is-editing.js";
 import { filterAttrs } from "../helpers.js";
 import { setAttrs } from "../helpers.js";
-export let attributes;
-export let defaultValue;
-export let placeholder;
-export let type;
-export let name;
-export let value;
-export let required;
+export let attributes = undefined;
+export let defaultValue = undefined;
+export let placeholder = undefined;
+export let type = undefined;
+export let name = undefined;
+export let value = undefined;
+export let required = undefined;
 </script>
 
 <input

package/package/blocks/input/input.svelte.d.ts

@@ -12,13 +12,13 @@ import { SvelteComponentTyped } from "svelte";
 }
 declare const __propDef: {
     props: {
-        attributes: FormInputProps["attributes"];
-        defaultValue: FormInputProps["defaultValue"];
-        placeholder: FormInputProps["placeholder"];
-        type: FormInputProps["type"];
-        name: FormInputProps["name"];
-        value: FormInputProps["value"];
-        required: FormInputProps["required"];
+        attributes?: FormInputProps["attributes"];
+        defaultValue?: FormInputProps["defaultValue"];
+        placeholder?: FormInputProps["placeholder"];
+        type?: FormInputProps["type"];
+        name?: FormInputProps["name"];
+        value?: FormInputProps["value"];
+        required?: FormInputProps["required"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -1,7 +1,7 @@
 <script context="module"></script>
 
-<script>export let text;
-export let attributes;
+<script>export let text = undefined;
+export let attributes = undefined;
 </script>
 
 <span class={attributes.class}>{@html text?.toString() || ""}</span>

package/package/blocks/raw-text/raw-text.svelte.d.ts

@@ -5,8 +5,8 @@ export interface RawTextProps {
 }
 declare const __propDef: {
     props: {
-        text: RawTextProps["text"];
-        attributes: RawTextProps["attributes"];
+        text?: RawTextProps["text"];
+        attributes?: RawTextProps["attributes"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/section/section.svelte

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

package/package/blocks/section/section.svelte.d.ts

@@ -9,8 +9,8 @@ import { SvelteComponentTyped } from "svelte";
 }
 declare const __propDef: {
     props: {
-        attributes: SectionProps["attributes"];
-        maxWidth: SectionProps["maxWidth"];
+        attributes?: SectionProps["attributes"];
+        maxWidth?: SectionProps["maxWidth"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/select/select.svelte

@@ -3,11 +3,11 @@
 <script>import { isEditing } from "../../functions/is-editing.js";
 import { filterAttrs } from "../helpers.js";
 import { setAttrs } from "../helpers.js";
-export let attributes;
-export let value;
-export let defaultValue;
-export let name;
-export let options;
+export let attributes = undefined;
+export let value = undefined;
+export let defaultValue = undefined;
+export let name = undefined;
+export let options = undefined;
 </script>
 
 <select

package/package/blocks/select/select.svelte.d.ts

@@ -13,11 +13,11 @@ import { SvelteComponentTyped } from "svelte";
 }
 declare const __propDef: {
     props: {
-        attributes: FormSelectProps["attributes"];
-        value: FormSelectProps["value"];
-        defaultValue: FormSelectProps["defaultValue"];
-        name: FormSelectProps["name"];
-        options: FormSelectProps["options"];
+        attributes?: FormSelectProps["attributes"];
+        value?: FormSelectProps["value"];
+        defaultValue?: FormSelectProps["defaultValue"];
+        name?: FormSelectProps["name"];
+        options?: FormSelectProps["options"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

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

package/package/blocks/submit-button/submit-button.svelte.d.ts

@@ -7,8 +7,8 @@ import { SvelteComponentTyped } from "svelte";
 }
 declare const __propDef: {
     props: {
-        attributes: ButtonProps["attributes"];
-        text: ButtonProps["text"];
+        attributes?: ButtonProps["attributes"];
+        text?: ButtonProps["text"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/symbol/symbol.svelte

@@ -6,9 +6,9 @@ import { filterAttrs } from "../helpers.js";
 import { setAttrs } from "../helpers.js";
 import { fetchSymbolContent } from "./symbol.helpers.js";
 export let js;
-export let attributes;
-export let symbol;
-export let dynamic;
+export let attributes = undefined;
+export let symbol = undefined;
+export let dynamic = undefined;
 export let builderContext;
 export let builderComponents;
 function setContent() {

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

@@ -23,9 +23,9 @@ import type { BuilderComponentsProp, PropsWithBuilderData } from "../../types/bu
 declare const __propDef: {
     props: {
         js: any;
-        attributes: PropsWithBuilderData<SymbolProps>["attributes"];
-        symbol: PropsWithBuilderData<SymbolProps>["symbol"];
-        dynamic: PropsWithBuilderData<SymbolProps>["dynamic"];
+        attributes?: PropsWithBuilderData<SymbolProps>["attributes"];
+        symbol?: PropsWithBuilderData<SymbolProps>["symbol"];
+        dynamic?: PropsWithBuilderData<SymbolProps>["dynamic"];
         builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
         builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
     };

package/package/blocks/text/text.svelte

@@ -1,6 +1,6 @@
 <script context="module"></script>
 
-<script>export let text;
+<script>export let text = undefined;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
         if (p.startsWith("--")) {

package/package/blocks/text/text.svelte.d.ts

@@ -4,7 +4,7 @@ export interface TextProps {
 }
 declare const __propDef: {
     props: {
-        text: TextProps["text"];
+        text?: TextProps["text"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/textarea/textarea.svelte

@@ -2,11 +2,11 @@
 
 <script>import { filterAttrs } from "../helpers.js";
 import { setAttrs } from "../helpers.js";
-export let attributes;
-export let placeholder;
-export let name;
-export let value;
-export let defaultValue;
+export let attributes = undefined;
+export let placeholder = undefined;
+export let name = undefined;
+export let value = undefined;
+export let defaultValue = undefined;
 </script>
 
 <textarea

package/package/blocks/textarea/textarea.svelte.d.ts

@@ -10,11 +10,11 @@ import { SvelteComponentTyped } from "svelte";
 }
 declare const __propDef: {
     props: {
-        attributes: TextareaProps["attributes"];
-        placeholder: TextareaProps["placeholder"];
-        name: TextareaProps["name"];
-        value: TextareaProps["value"];
-        defaultValue: TextareaProps["defaultValue"];
+        attributes?: TextareaProps["attributes"];
+        placeholder?: TextareaProps["placeholder"];
+        name?: TextareaProps["name"];
+        value?: TextareaProps["value"];
+        defaultValue?: TextareaProps["defaultValue"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/video/video.svelte

@@ -1,16 +1,16 @@
 <script context="module"></script>
 
-<script>export let autoPlay;
-export let muted;
-export let controls;
-export let loop;
-export let playsInline;
-export let attributes;
-export let preload;
-export let fit;
-export let position;
-export let video;
-export let posterImage;
+<script>export let autoPlay = undefined;
+export let muted = undefined;
+export let controls = undefined;
+export let loop = undefined;
+export let playsInline = undefined;
+export let attributes = undefined;
+export let preload = undefined;
+export let fit = undefined;
+export let position = undefined;
+export let video = undefined;
+export let posterImage = undefined;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
         if (p.startsWith("--")) {

package/package/blocks/video/video.svelte.d.ts

@@ -18,17 +18,17 @@ export interface VideoProps {
 }
 declare const __propDef: {
     props: {
-        autoPlay: VideoProps["autoPlay"];
-        muted: VideoProps["muted"];
-        controls: VideoProps["controls"];
-        loop: VideoProps["loop"];
-        playsInline: VideoProps["playsInline"];
-        attributes: VideoProps["attributes"];
-        preload: VideoProps["preload"];
-        fit: VideoProps["fit"];
-        position: VideoProps["position"];
-        video: VideoProps["video"];
-        posterImage: VideoProps["posterImage"];
+        autoPlay?: VideoProps["autoPlay"];
+        muted?: VideoProps["muted"];
+        controls?: VideoProps["controls"];
+        loop?: VideoProps["loop"];
+        playsInline?: VideoProps["playsInline"];
+        attributes?: VideoProps["attributes"];
+        preload?: VideoProps["preload"];
+        fit?: VideoProps["fit"];
+        position?: VideoProps["position"];
+        video?: VideoProps["video"];
+        posterImage?: VideoProps["posterImage"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -2,6 +2,7 @@
 import Block from "../../block.svelte";
 import InteractiveElement from "../interactive-element.svelte";
 import { getWrapperProps } from "./component-ref.helpers.js";
+import "../../../content/wrap-component-ref.js";
 export let isInteractive;
 export let componentRef;
 export let componentOptions;

package/package/components/blocks/blocks.svelte

@@ -10,8 +10,8 @@ export let blocks;
 export let parent;
 export let path;
 export let styleProp;
-export let context;
-export let registeredComponents;
+export let context = undefined;
+export let registeredComponents = undefined;
 let builderContext = getContext(BuilderContext.key);
 let componentsContext = getContext(ComponentsContext.key);
 </script>

package/package/components/blocks/blocks.svelte.d.ts

@@ -12,8 +12,8 @@ declare const __propDef: {
         parent: BlocksProps["parent"];
         path: BlocksProps["path"];
         styleProp: BlocksProps["styleProp"];
-        context: BlocksProps["context"];
-        registeredComponents: BlocksProps["registeredComponents"];
+        context?: BlocksProps["context"];
+        registeredComponents?: BlocksProps["registeredComponents"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -15,17 +15,18 @@ import { logger } from "../../../helpers/logger.js";
 import { fetchOneEntry } from "../../../functions/get-content/index.js";
 import { isPreviewing } from "../../../functions/is-previewing.js";
 import "../../../helpers/preview-lru-cache/set.js";
-export let canTrack;
+import { fastClone } from "../../../functions/fast-clone.js";
+export let canTrack = undefined;
 export let builderContextSignal;
-export let model;
-export let context;
+export let model = undefined;
+export let context = undefined;
 export let apiKey;
 export let showContent;
 export let classNameProp;
-export let content;
-export let locale;
-export let includeRefs;
-export let enrich;
+export let content = undefined;
+export let locale = undefined;
+export let includeRefs = undefined;
+export let enrich = undefined;
 function mergeNewContent(newContent) {
     const newContentValue = {
         ...$builderContextSignal.content,
@@ -150,7 +151,7 @@ function emitStateUpdate() {
     if (isEditing()) {
         window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
             detail: {
-                state: $builderContextSignal.rootState,
+                state: fastClone($builderContextSignal.rootState),
                 ref: {
                     name: model,
                 },

package/package/components/content/components/enable-editor.svelte.d.ts

@@ -9,17 +9,17 @@ import type { ContentProps } from "../content.types.js";
 import type { Writable } from "svelte/store";
 declare const __propDef: {
     props: {
-        canTrack: BuilderEditorProps["canTrack"];
+        canTrack?: BuilderEditorProps["canTrack"];
         builderContextSignal: BuilderEditorProps["builderContextSignal"];
-        model: BuilderEditorProps["model"];
-        context: BuilderEditorProps["context"];
+        model?: BuilderEditorProps["model"];
+        context?: BuilderEditorProps["context"];
         apiKey: BuilderEditorProps["apiKey"];
         showContent: BuilderEditorProps["showContent"];
         classNameProp: BuilderEditorProps["classNameProp"];
-        content: BuilderEditorProps["content"];
-        locale: BuilderEditorProps["locale"];
-        includeRefs: BuilderEditorProps["includeRefs"];
-        enrich: BuilderEditorProps["enrich"];
+        content?: BuilderEditorProps["content"];
+        locale?: BuilderEditorProps["locale"];
+        includeRefs?: BuilderEditorProps["includeRefs"];
+        enrich?: BuilderEditorProps["enrich"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

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

@@ -3,9 +3,9 @@
 <script>import InlinedStyles from "../../inlined-styles.svelte";
 import { getCss } from "./styles.helpers.js";
 import { getFontCss } from "./styles.helpers.js";
-export let cssCode;
-export let contentId;
-export let customFonts;
+export let cssCode = undefined;
+export let contentId = undefined;
+export let customFonts = undefined;
 let injectedStyles = `
 ${getCss({
     cssCode: cssCode,