@builder.io/sdk-svelte 0.2.2 → 0.3.1

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.2.1",
+  "version": "0.3.1",
   "type": "module",
   "files": [
     "package",
@@ -81,10 +81,12 @@
     "./components/render-inlined-styles.svelte": "./components/render-inlined-styles.svelte",
     "./constants/builder-registered-components": "./constants/builder-registered-components.js",
     "./constants/device-sizes": "./constants/device-sizes.js",
+    "./constants/sdk-version": "./constants/sdk-version.js",
     "./constants/target": "./constants/target.js",
     "./context/builder.context": "./context/builder.context.js",
     "./context/types": "./context/types.js",
     "./functions/camel-to-kebab-case": "./functions/camel-to-kebab-case.js",
+    "./functions/evaluate.test": "./functions/evaluate.test.js",
     "./functions/evaluate": "./functions/evaluate.js",
     "./functions/event-handler-name": "./functions/event-handler-name.js",
     "./functions/extract-text-styles": "./functions/extract-text-styles.js",

package/package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.2.3
+
+- No Changes.
+
 ### 0.2.2
 
 - Fix: dynamic bindings for Link URLs.

package/package/blocks/columns/columns.svelte

@@ -2,13 +2,10 @@
 
 <script>import { getContext } from "svelte";
 import RenderBlocks from "../../components/render-blocks.svelte";
-import "../../types/builder-block";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
-import "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context.js";
-import "../../types/typescript";
 export let space;
 export let columns;
 export let stackColumnsAt;
@@ -46,7 +43,7 @@ function columnCssVars(index) {
         };
     }
     const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutterSize}px`;
+    const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
     const mobileMarginLeft = 0;
     return {
@@ -90,30 +87,30 @@ $: columnsCssVars = () => {
 };
 $: columnsStyles = () => {
     return `
-      @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-        .${builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir-tablet);
-          align-items: stretch;
-        }
+        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir-tablet);
+            align-items: stretch;
+          }
 
-        .${builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-tablet) !important;
-          margin-left: var(--column-margin-left-tablet) !important;
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-tablet) !important;
+            margin-left: var(--column-margin-left-tablet) !important;
+          }
         }
-      }
 
-      @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-        .${builderBlock.id}-breakpoints {
-          flex-direction: var(--flex-dir);
-          align-items: stretch;
-        }
+        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
+          .${builderBlock.id}-breakpoints {
+            flex-direction: var(--flex-dir);
+            align-items: stretch;
+          }
 
-        .${builderBlock.id}-breakpoints > .builder-column {
-          width: var(--column-width-mobile) !important;
-          margin-left: var(--column-margin-left-mobile) !important;
-        }
-      },
-    `;
+          .${builderBlock.id}-breakpoints > .builder-column {
+            width: var(--column-width-mobile) !important;
+            margin-left: var(--column-margin-left-mobile) !important;
+          }
+        },
+      `;
 };
 let gutterSize = typeof space === "number" ? space || 0 : 20;
 let cols = columns || [];

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

@@ -11,7 +11,7 @@ export interface ColumnProps {
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
 }
-import { BuilderBlock } from "../../types/builder-block";
+import type { BuilderBlock } from "../../types/builder-block";
 declare const __propDef: {
     props: {
         space: ColumnProps["space"];

package/package/blocks/image/image.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
-<script>import "../../types/builder-block.js";
-import { getSrcSet } from "./image.helpers.js";
+<script>import { getSrcSet } from "./image.helpers.js";
 export let image;
 export let src;
 export let srcset;

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

@@ -8,7 +8,7 @@ export interface ImageProps {
     height?: number;
     width?: number;
     altText?: string;
-    backgroundSize?: string;
+    backgroundSize?: "cover" | "contain";
     backgroundPosition?: string;
     srcset?: string;
     aspectRatio?: number;
@@ -18,7 +18,7 @@ export interface ImageProps {
     noWebp?: boolean;
     src?: string;
 }
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         image: ImageProps["image"];

package/package/blocks/symbol/symbol.svelte

@@ -4,8 +4,6 @@
 import RenderContent from "../../components/render-content/render-content.svelte";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
-import "../../types/builder-content.js";
-import "../../types/builder-block.js";
 import { TARGET } from "../../constants/target";
 import { logger } from "../../helpers/logger";
 const isEvent = (attr) => attr.startsWith("on:");
@@ -106,7 +104,7 @@ $: onUpdateFn_0(...[symbol]);
     customComponents={Object.values(builderContext.registeredComponents)}
     data={{
       ...symbol?.data,
-      ...builderContext.state,
+      ...builderContext.localState,
       ...contentToUse?.data?.state,
     }}
     model={symbol?.model}

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

@@ -15,8 +15,8 @@ export interface SymbolProps {
     attributes?: any;
     inheritState?: boolean;
 }
-import { BuilderContent } from "../../types/builder-content.js";
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         attributes: SymbolProps["attributes"];

package/package/components/render-block/block-styles.svelte

@@ -2,18 +2,18 @@
 
 <script>import { getMaxWidthQueryForSize, getSizesForBreakpoints, } from "../../constants/device-sizes.js";
 import { TARGET } from "../../constants/target.js";
-import "../../context/types.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
 import { createCssClass } from "../../helpers/css.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
-import "../../types/builder-block.js";
 import RenderInlinedStyles from "../render-inlined-styles.svelte";
 export let block;
 export let context;
 $: useBlock = () => {
     return getProcessedBlock({
         block: block,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
         shouldEvaluateBindings: true,
     });

package/package/components/render-block/block-styles.svelte.d.ts

@@ -3,8 +3,8 @@ export type BlockStylesProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         block: BlockStylesProps["block"];

package/package/components/render-block/render-block.helpers.d.ts

@@ -10,4 +10,3 @@ export declare const getRepeatItemData: ({ block, context, }: {
     block: BuilderBlock;
     context: BuilderContextInterface;
 }) => RepeatData[] | undefined;
-export declare const getProxyState: (context: BuilderContextInterface) => BuilderContextInterface['state'];

package/package/components/render-block/render-block.helpers.js

@@ -27,7 +27,9 @@ export const isEmptyHtmlElement = (tagName) => {
 export const getComponent = ({ block, context, }) => {
     const componentName = getProcessedBlock({
         block,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
         shouldEvaluateBindings: false,
     }).component?.name;
@@ -57,7 +59,9 @@ export const getRepeatItemData = ({ block, context, }) => {
     }
     const itemsArray = evaluate({
         code: repeat.collection,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         context: context.context,
     });
     if (!Array.isArray(itemsArray)) {
@@ -68,8 +72,8 @@ export const getRepeatItemData = ({ block, context, }) => {
     const repeatArray = itemsArray.map((item, index) => ({
         context: {
             ...context,
-            state: {
-                ...context.state,
+            localState: {
+                ...context.localState,
                 $index: index,
                 $item: item,
                 [itemNameToUse]: item,
@@ -80,19 +84,3 @@ export const getRepeatItemData = ({ block, context, }) => {
     }));
     return repeatArray;
 };
-export const getProxyState = (context) => {
-    if (typeof Proxy === 'undefined') {
-        console.error('no Proxy available in this environment, cannot proxy state.');
-        return context.state;
-    }
-    const useState = new Proxy(context.state, {
-        set: (obj, prop, value) => {
-            // set the value on the state object, so that the event handler instantly gets the update.
-            obj[prop] = value;
-            // set the value in the context, so that the rest of the app gets the update.
-            context.setState?.(obj);
-            return true;
-        },
-    });
-    return useState;
-};

package/package/components/render-block/render-block.svelte

@@ -1,14 +1,11 @@
 <script context="module"></script>
 
-<script>import "../../context/types.js";
-import { getBlockActions } from "../../functions/get-block-actions.js";
+<script>import { getBlockActions } from "../../functions/get-block-actions.js";
 import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
 import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import "../../types/builder-block.js";
 import BlockStyles from "./block-styles.svelte";
-import { getComponent, getProxyState, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
-import "./render-component.svelte";
+import { getComponent, getRepeatItemData, isEmptyHtmlElement, } from "./render-block.helpers.js";
 import RenderRepeatedBlock from "./render-repeated-block.svelte";
 import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
@@ -32,12 +29,20 @@ const setAttrs = (node, attrs = {}) => {
 };
 export let block;
 export let context;
+$: repeatItem = () => {
+    return getRepeatItemData({
+        block: block,
+        context: context,
+    });
+};
 $: useBlock = () => {
-    return repeatItemData
+    return repeatItem()
         ? block
         : getProcessedBlock({
             block: block,
-            state: context.state,
+            localState: context.localState,
+            rootState: context.rootState,
+            rootSetState: context.rootSetState,
             context: context.context,
             shouldEvaluateBindings: true,
         });
@@ -54,7 +59,9 @@ $: canShowBlock = () => {
 $: actions = () => {
     return getBlockActions({
         block: useBlock(),
-        state: TARGET === "qwik" ? context.state : proxyState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
+        localState: context.localState,
         context: context.context,
     });
 };
@@ -80,7 +87,7 @@ $: childrenWithoutParentComponent = () => {
      * NOTE: We make sure not to render this if `repeatItemData` is non-null, because that means we are rendering an array of
      * blocks, and the children will be repeated within those blocks.
      */
-    const shouldRenderChildrenOutsideRef = !component?.component && !repeatItemData;
+    const shouldRenderChildrenOutsideRef = !component?.component && !repeatItem();
     return shouldRenderChildrenOutsideRef ? useBlock().children ?? [] : [];
 };
 $: childrenContext = () => {
@@ -97,10 +104,11 @@ $: childrenContext = () => {
     return {
         apiKey: context.apiKey,
         apiVersion: context.apiVersion,
-        state: context.state,
+        localState: context.localState,
+        rootState: context.rootState,
+        rootSetState: context.rootSetState,
         content: context.content,
         context: context.context,
-        setState: context.setState,
         registeredComponents: context.registeredComponents,
         inheritedStyles: getInheritedTextStyles(),
     };
@@ -131,12 +139,7 @@ let component = getComponent({
     block: block,
     context: context,
 });
-let repeatItemData = getRepeatItemData({
-    block: block,
-    context: context,
-});
 let tag = block.tagName || "div";
-let proxyState = getProxyState(context);
 </script>
 
 {#if canShowBlock()}
@@ -145,13 +148,13 @@ let proxyState = getProxyState(context);
       <svelte:element this={tag} {...attributes()} use:setAttrs={actions()} />
     {/if}
 
-    {#if !isEmptyHtmlElement(tag) && repeatItemData}
-      {#each repeatItemData as data, index (index)}
+    {#if !isEmptyHtmlElement(tag) && repeatItem()}
+      {#each repeatItem() as data, index (index)}
         <RenderRepeatedBlock repeatContext={data.context} block={data.block} />
       {/each}
     {/if}
 
-    {#if !isEmptyHtmlElement(tag) && !repeatItemData}
+    {#if !isEmptyHtmlElement(tag) && !repeatItem()}
       <svelte:element this={tag} {...attributes()} use:setAttrs={actions()}>
         <RenderComponent {...renderComponentProps()} />
 

package/package/components/render-block/render-block.svelte.d.ts

@@ -3,8 +3,8 @@ export type RenderBlockProps = {
     block: BuilderBlock;
     context: BuilderContextInterface;
 };
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
         block: RenderBlockProps["block"];

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

@@ -1,9 +1,7 @@
 <script context="module"></script>
 
-<script>import "../../types/builder-block.js";
-import BlockStyles from "./block-styles.svelte";
+<script>import BlockStyles from "./block-styles.svelte";
 import RenderBlock from "./render-block.svelte";
-import "../../context/types.js";
 export let componentRef;
 export let componentOptions;
 export let blockChildren;

package/package/components/render-block/render-component.svelte.d.ts

@@ -11,8 +11,8 @@ export interface RenderComponentProps {
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
 }
-import { BuilderBlock } from "../../types/builder-block.js";
-import { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { BuilderContextInterface } from "../../context/types.js";
 declare const __propDef: {
     props: {
         componentRef: RenderComponentProps["componentRef"];

package/package/components/render-block/render-repeated-block.svelte

@@ -11,19 +11,19 @@
 
 <script>import { setContext } from "svelte";
 import BuilderContext from "../../context/builder.context.js";
-import "../../context/types.js";
-import "../../types/builder-block";
 import RenderBlock from "./render-block.svelte";
 export let block;
 export let repeatContext;
 setContext(BuilderContext.key, {
     content: repeatContext.content,
-    state: repeatContext.state,
-    setState: repeatContext.setState,
+    localState: repeatContext.localState,
+    rootState: repeatContext.rootState,
+    rootSetState: repeatContext.rootSetState,
     context: repeatContext.context,
     apiKey: repeatContext.apiKey,
     registeredComponents: repeatContext.registeredComponents,
     inheritedStyles: repeatContext.inheritedStyles,
+    apiVersion: repeatContext.apiVersion,
 });
 </script>
 

package/package/components/render-block/render-repeated-block.svelte.d.ts

@@ -3,8 +3,8 @@ type Props = {
     block: BuilderBlock;
     repeatContext: BuilderContextInterface;
 };
-import { BuilderContextInterface } from "../../context/types.js";
-import { BuilderBlock } from "../../types/builder-block";
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block";
 declare const __propDef: {
     props: {
         block: Props["block"];

package/package/components/render-blocks.svelte

@@ -3,7 +3,6 @@
 <script>import { getContext } from "svelte";
 import BuilderContext from "../context/builder.context.js";
 import { isEditing } from "../functions/is-editing.js";
-import "../types/builder-block.js";
 import BlockStyles from "./render-block/block-styles.svelte";
 import RenderBlock from "./render-block/render-block.svelte";
 export let blocks;

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

@@ -5,7 +5,7 @@ export type RenderBlockProps = {
     path?: string;
     styleProp?: Record<string, any>;
 };
-import { BuilderBlock } from "../types/builder-block.js";
+import type { BuilderBlock } from "../types/builder-block.js";
 declare const __propDef: {
     props: {
         blocks: RenderBlockProps["blocks"];

package/package/components/render-content/components/render-styles.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
 <script>import RenderInlinedStyles from "../../render-inlined-styles.svelte";
-import "./render-styles.helpers";
 import { getCss } from "./render-styles.helpers";
 import { getFontCss } from "./render-styles.helpers";
 export let cssCode;
@@ -17,16 +16,16 @@ ${getFontCss({
 })}
 
 .builder-text > p:first-of-type, .builder-text > .builder-paragraph:first-of-type {
-margin: 0;
+  margin: 0;
 }
 .builder-text > p, .builder-text > .builder-paragraph {
-color: inherit;
-line-height: inherit;
-letter-spacing: inherit;
-font-weight: inherit;
-font-size: inherit;
-text-align: inherit;
-font-family: inherit;
+  color: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  text-align: inherit;
+  font-family: inherit;
 }
 `;
 </script>

package/package/components/render-content/components/render-styles.svelte.d.ts

@@ -4,7 +4,7 @@ interface Props {
     customFonts?: CustomFont[];
     contentId?: string;
 }
-import { CustomFont } from "./render-styles.helpers";
+import type { CustomFont } from "./render-styles.helpers";
 declare const __propDef: {
     props: {
         cssCode: Props["cssCode"];

package/package/components/render-content/render-content.svelte

@@ -1,6 +1,5 @@
 <script>import { onDestroy, onMount, setContext } from "svelte";
 import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
-import "../../context/types.js";
 import { evaluate } from "../../functions/evaluate.js";
 import { getContent } from "../../functions/get-content/index.js";
 import { fetch } from "../../functions/get-fetch.js";
@@ -9,15 +8,12 @@ import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
 import { _track } from "../../functions/track/index.js";
-import "../../types/builder-content.js";
-import "../../types/typescript.js";
 import RenderBlocks from "../render-blocks.svelte";
 import RenderContentStyles from "./components/render-styles.svelte";
 import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
-import "./render-content.types.js";
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
 import { logger } from "../../helpers/logger.js";
@@ -55,8 +51,8 @@ function setBreakpoints(breakpoints) {
         },
     };
 }
-function setContextState(newState) {
-    contentState = newState;
+function contentSetState(newRootState) {
+    contentState = newRootState;
 }
 function processMessage(event) {
     const { data } = event;
@@ -101,7 +97,9 @@ function evaluateJsCode() {
         evaluate({
             code: jsCode,
             context: context || {},
-            state: contentState,
+            localState: undefined,
+            rootState: contentState,
+            rootSetState: contentSetState,
         });
     }
 }
@@ -127,7 +125,9 @@ function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
         context: context || {},
-        state: contentState,
+        localState: undefined,
+        rootState: contentState,
+        rootSetState: contentSetState,
     }));
 }
 function handleRequest({ url, key }) {
@@ -138,7 +138,7 @@ function handleRequest({ url, key }) {
             ...contentState,
             [key]: json,
         };
-        setContextState(newState);
+        contentSetState(newState);
     })
         .catch((err) => {
         console.error("error fetching dynamic data", url, err);
@@ -291,11 +291,14 @@ setContext(builderContext.key, {
     get content() {
         return useContent;
     },
-    get state() {
+    get localState() {
+        return undefined;
+    },
+    get rootState() {
         return contentState;
     },
-    get setState() {
-        return setContextState;
+    get rootSetState() {
+        return TARGET === "qwik" ? undefined : contentSetState;
     },
     get context() {
         return context || {};
@@ -309,6 +312,9 @@ setContext(builderContext.key, {
     get registeredComponents() {
         return allRegisteredComponents;
     },
+    get inheritedStyles() {
+        return {};
+    },
 });
 onDestroy(() => {
     if (isBrowser()) {

package/package/components/render-content/render-content.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import { RenderContentProps } from "./render-content.types.js";
+import type { RenderContentProps } from "./render-content.types.js";
 declare const __propDef: {
     props: {
         content: RenderContentProps["content"];

package/package/components/render-inlined-styles.svelte

@@ -3,9 +3,9 @@
 <script>import { TARGET } from "../constants/target.js";
 export let styles;
 $: tag = () => {
-    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // NOTE: we have to obfuscate the name of the tag due to a limitation in the svelte-preprocessor plugin.
     // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
-    return "sty" + "le";
+    return ("sty" + "le");
 };
 $: injectedStyleScript = () => {
     return `<${tag()}>${styles}</${tag()}>`;

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

@@ -0,0 +1 @@
+export declare const SDK_VERSION = "0.3.1";

package/package/constants/sdk-version.js

@@ -0,0 +1 @@
+export const SDK_VERSION = "0.3.1";

package/package/context/builder.context.d.ts

@@ -2,8 +2,9 @@ declare const _default: {
     Builder: {
         content: null;
         context: {};
-        state: {};
-        setState(): void;
+        localState: undefined;
+        rootSetState(): void;
+        rootState: {};
         apiKey: null;
         apiVersion: undefined;
         registeredComponents: {};

package/package/context/builder.context.js

@@ -3,8 +3,9 @@ export default {
     Builder: {
         content: null,
         context: {},
-        state: {},
-        setState() { },
+        localState: undefined,
+        rootSetState() { },
+        rootState: {},
         apiKey: null,
         apiVersion: undefined,
         registeredComponents: {},