@builder.io/sdk-svelte 0.10.0 → 0.11.1

package/lib/browser/components/block/components/component-ref/component-ref.helpers.js

@@ -1,12 +1,6 @@
 import { getBlockProperties } from '../../../../functions/get-block-properties.js';
 export const getWrapperProps = ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }) => {
-    const interactiveElementProps = {
-        Wrapper: componentRef,
-        block: builderBlock,
-        context,
-        wrapperProps: componentOptions
-    };
-    return isInteractive ? interactiveElementProps : {
+    const wrapperPropsWithAttributes = {
         ...componentOptions,
         /**
          * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
@@ -19,4 +13,12 @@ export const getWrapperProps = ({ componentOptions, builderBlock, context, compo
             })
         } : {})
     };
+    const interactiveElementProps = {
+        Wrapper: componentRef,
+        block: builderBlock,
+        context,
+        wrapperProps: componentOptions,
+        includeBlockProps
+    };
+    return isInteractive ? interactiveElementProps : wrapperPropsWithAttributes;
 };

package/lib/browser/components/block/components/interactive-element.svelte

@@ -4,6 +4,7 @@
 import { getBlockProperties } from "../../../functions/get-block-properties.js";
 export let Wrapper;
 export let wrapperProps;
+export let includeBlockProps;
 export let block;
 export let context;
 </script>
@@ -11,19 +12,21 @@ export let context;
 <svelte:component
   this={Wrapper}
   {...wrapperProps}
-  attributes={{
-    ...getBlockProperties({
-      block: block,
-      context: $context,
-    }),
-    ...getBlockActions({
-      block: block,
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-    }),
-  }}
+  attributes={includeBlockProps
+    ? {
+        ...getBlockProperties({
+          block: block,
+          context: $context,
+        }),
+        ...getBlockActions({
+          block: block,
+          rootState: $context.rootState,
+          rootSetState: $context.rootSetState,
+          localState: $context.localState,
+          context: $context.context,
+        }),
+      }
+    : {}}
 >
   <slot />
 </svelte:component>

package/lib/browser/components/content-variants/helpers.js

@@ -33,7 +33,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
      * NOTE: For Vue: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
      * This isn't necessary, just a nice to have.
      */
-    if (TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte')
+    if (TARGET === 'vue' || TARGET === 'svelte')
         return true;
     if (isBrowser())
         return false;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.10.0";
+export declare const SDK_VERSION = "0.11.1";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.10.0";
+export const SDK_VERSION = "0.11.1";

package/lib/browser/functions/get-block-actions.js

@@ -13,8 +13,7 @@ export function getBlockActions(options) {
         let eventHandlerName = getEventHandlerName(key);
         if (options.stripPrefix) {
             switch (TARGET) {
-                case 'vue2':
-                case 'vue3':
+                case 'vue':
                     eventHandlerName = eventHandlerName.replace('v-on:', '');
                     break;
                 case 'svelte':

package/lib/browser/functions/get-block-properties.js

@@ -55,8 +55,7 @@ export function getBlockProperties({ block, context }) {
 function getStyleAttribute(style) {
     switch (TARGET) {
         case 'svelte':
-        case 'vue2':
-        case 'vue3':
+        case 'vue':
         case 'solid':
             return convertStyleMapToCSSArray(style).join(' ');
         case 'qwik':

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

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

package/lib/edge/components/block/components/component-ref/component-ref.helpers.js

@@ -1,12 +1,6 @@
 import { getBlockProperties } from '../../../../functions/get-block-properties.js';
 export const getWrapperProps = ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }) => {
-    const interactiveElementProps = {
-        Wrapper: componentRef,
-        block: builderBlock,
-        context,
-        wrapperProps: componentOptions
-    };
-    return isInteractive ? interactiveElementProps : {
+    const wrapperPropsWithAttributes = {
         ...componentOptions,
         /**
          * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
@@ -19,4 +13,12 @@ export const getWrapperProps = ({ componentOptions, builderBlock, context, compo
             })
         } : {})
     };
+    const interactiveElementProps = {
+        Wrapper: componentRef,
+        block: builderBlock,
+        context,
+        wrapperProps: componentOptions,
+        includeBlockProps
+    };
+    return isInteractive ? interactiveElementProps : wrapperPropsWithAttributes;
 };

package/lib/edge/components/block/components/interactive-element.svelte

@@ -4,6 +4,7 @@
 import { getBlockProperties } from "../../../functions/get-block-properties.js";
 export let Wrapper;
 export let wrapperProps;
+export let includeBlockProps;
 export let block;
 export let context;
 </script>
@@ -11,19 +12,21 @@ export let context;
 <svelte:component
   this={Wrapper}
   {...wrapperProps}
-  attributes={{
-    ...getBlockProperties({
-      block: block,
-      context: $context,
-    }),
-    ...getBlockActions({
-      block: block,
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-    }),
-  }}
+  attributes={includeBlockProps
+    ? {
+        ...getBlockProperties({
+          block: block,
+          context: $context,
+        }),
+        ...getBlockActions({
+          block: block,
+          rootState: $context.rootState,
+          rootSetState: $context.rootSetState,
+          localState: $context.localState,
+          context: $context.context,
+        }),
+      }
+    : {}}
 >
   <slot />
 </svelte:component>

package/lib/edge/components/content-variants/helpers.js

@@ -33,7 +33,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
      * NOTE: For Vue: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
      * This isn't necessary, just a nice to have.
      */
-    if (TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte')
+    if (TARGET === 'vue' || TARGET === 'svelte')
         return true;
     if (isBrowser())
         return false;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.10.0";
+export declare const SDK_VERSION = "0.11.1";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.10.0";
+export const SDK_VERSION = "0.11.1";

package/lib/edge/functions/get-block-actions.js

@@ -13,8 +13,7 @@ export function getBlockActions(options) {
         let eventHandlerName = getEventHandlerName(key);
         if (options.stripPrefix) {
             switch (TARGET) {
-                case 'vue2':
-                case 'vue3':
+                case 'vue':
                     eventHandlerName = eventHandlerName.replace('v-on:', '');
                     break;
                 case 'svelte':

package/lib/edge/functions/get-block-properties.js

@@ -55,8 +55,7 @@ export function getBlockProperties({ block, context }) {
 function getStyleAttribute(style) {
     switch (TARGET) {
         case 'svelte':
-        case 'vue2':
-        case 'vue3':
+        case 'vue':
         case 'solid':
             return convertStyleMapToCSSArray(style).join(' ');
         case 'qwik':

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

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

package/lib/node/components/block/components/component-ref/component-ref.helpers.js

@@ -1,12 +1,6 @@
 import { getBlockProperties } from '../../../../functions/get-block-properties.js';
 export const getWrapperProps = ({ componentOptions, builderBlock, context, componentRef, includeBlockProps, isInteractive, contextValue }) => {
-    const interactiveElementProps = {
-        Wrapper: componentRef,
-        block: builderBlock,
-        context,
-        wrapperProps: componentOptions
-    };
-    return isInteractive ? interactiveElementProps : {
+    const wrapperPropsWithAttributes = {
         ...componentOptions,
         /**
          * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
@@ -19,4 +13,12 @@ export const getWrapperProps = ({ componentOptions, builderBlock, context, compo
             })
         } : {})
     };
+    const interactiveElementProps = {
+        Wrapper: componentRef,
+        block: builderBlock,
+        context,
+        wrapperProps: componentOptions,
+        includeBlockProps
+    };
+    return isInteractive ? interactiveElementProps : wrapperPropsWithAttributes;
 };

package/lib/node/components/block/components/interactive-element.svelte

@@ -4,6 +4,7 @@
 import { getBlockProperties } from "../../../functions/get-block-properties.js";
 export let Wrapper;
 export let wrapperProps;
+export let includeBlockProps;
 export let block;
 export let context;
 </script>
@@ -11,19 +12,21 @@ export let context;
 <svelte:component
   this={Wrapper}
   {...wrapperProps}
-  attributes={{
-    ...getBlockProperties({
-      block: block,
-      context: $context,
-    }),
-    ...getBlockActions({
-      block: block,
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-    }),
-  }}
+  attributes={includeBlockProps
+    ? {
+        ...getBlockProperties({
+          block: block,
+          context: $context,
+        }),
+        ...getBlockActions({
+          block: block,
+          rootState: $context.rootState,
+          rootSetState: $context.rootSetState,
+          localState: $context.localState,
+          context: $context.context,
+        }),
+      }
+    : {}}
 >
   <slot />
 </svelte:component>

package/lib/node/components/content-variants/helpers.js

@@ -33,7 +33,7 @@ export const checkShouldRenderVariants = ({ canTrack, content }) => {
      * NOTE: For Vue: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
      * This isn't necessary, just a nice to have.
      */
-    if (TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte')
+    if (TARGET === 'vue' || TARGET === 'svelte')
         return true;
     if (isBrowser())
         return false;

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

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.10.0";
+export declare const SDK_VERSION = "0.11.1";

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

@@ -1 +1 @@
-export const SDK_VERSION = "0.10.0";
+export const SDK_VERSION = "0.11.1";

package/lib/node/functions/get-block-actions.js

@@ -13,8 +13,7 @@ export function getBlockActions(options) {
         let eventHandlerName = getEventHandlerName(key);
         if (options.stripPrefix) {
             switch (TARGET) {
-                case 'vue2':
-                case 'vue3':
+                case 'vue':
                     eventHandlerName = eventHandlerName.replace('v-on:', '');
                     break;
                 case 'svelte':

package/lib/node/functions/get-block-properties.js

@@ -55,8 +55,7 @@ export function getBlockProperties({ block, context }) {
 function getStyleAttribute(style) {
     switch (TARGET) {
         case 'svelte':
-        case 'vue2':
-        case 'vue3':
+        case 'vue':
         case 'solid':
             return convertStyleMapToCSSArray(style).join(' ');
         case 'qwik':

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

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

package/package.json

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

package/src/components/block/components/component-ref/component-ref.helpers.ts

@@ -31,13 +31,7 @@ export const getWrapperProps = ({
 }: Omit<ComponentProps, 'blockChildren' | 'registeredComponents'> & {
   contextValue: BuilderContextInterface;
 }) => {
-  const interactiveElementProps: InteractiveElementProps = {
-    Wrapper: componentRef,
-    block: builderBlock,
-    context,
-    wrapperProps: componentOptions
-  };
-  return isInteractive ? interactiveElementProps : {
+  const wrapperPropsWithAttributes = {
     ...componentOptions,
     /**
      * If `noWrap` is set to `true`, then the block's props/attributes are provided to the
@@ -50,4 +44,12 @@ export const getWrapperProps = ({
       })
     } : {})
   };
+  const interactiveElementProps: InteractiveElementProps = {
+    Wrapper: componentRef,
+    block: builderBlock,
+    context,
+    wrapperProps: componentOptions,
+    includeBlockProps
+  };
+  return isInteractive ? interactiveElementProps : wrapperPropsWithAttributes;
 }

package/src/components/block/components/interactive-element.svelte

@@ -3,7 +3,8 @@
     Wrapper: any;
     block: BuilderBlock;
     context: Writable<BuilderContextInterface>;
-    wrapperProps: object;
+    wrapperProps: Dictionary<any>;
+    includeBlockProps: boolean;
   };
 </script>
 
@@ -12,11 +13,15 @@
   import { getBlockActions } from "../../../functions/get-block-actions.js";
   import { getBlockProperties } from "../../../functions/get-block-properties.js";
   import type { BuilderBlock } from "../../../types/builder-block.js";
-  import type { PropsWithChildren } from "../../../types/typescript.js";
+  import type {
+    Dictionary,
+    PropsWithChildren,
+  } from "../../../types/typescript.js";
   import type { Writable } from "svelte/store";
 
   export let Wrapper: PropsWithChildren<InteractiveElementProps>["Wrapper"];
   export let wrapperProps: PropsWithChildren<InteractiveElementProps>["wrapperProps"];
+  export let includeBlockProps: PropsWithChildren<InteractiveElementProps>["includeBlockProps"];
   export let block: PropsWithChildren<InteractiveElementProps>["block"];
   export let context: PropsWithChildren<InteractiveElementProps>["context"];
 </script>
@@ -24,19 +29,21 @@
 <svelte:component
   this={Wrapper}
   {...wrapperProps}
-  attributes={{
-    ...getBlockProperties({
-      block: block,
-      context: $context,
-    }),
-    ...getBlockActions({
-      block: block,
-      rootState: $context.rootState,
-      rootSetState: $context.rootSetState,
-      localState: $context.localState,
-      context: $context.context,
-    }),
-  }}
+  attributes={includeBlockProps
+    ? {
+        ...getBlockProperties({
+          block: block,
+          context: $context,
+        }),
+        ...getBlockActions({
+          block: block,
+          rootState: $context.rootState,
+          rootSetState: $context.rootSetState,
+          localState: $context.localState,
+          context: $context.context,
+        }),
+      }
+    : {}}
 >
   <slot />
 </svelte:component>

package/src/components/content-variants/helpers.ts

@@ -42,7 +42,7 @@ export const checkShouldRenderVariants = ({
    * NOTE: For Vue: after the app is hydrated, we strip the variants from the DOM (on mount) to reduce the amount of HTML in the DOM.
    * This isn't necessary, just a nice to have.
    */
-  if (TARGET === 'vue2' || TARGET === 'vue3' || TARGET === 'svelte') return true;
+  if (TARGET === 'vue' || TARGET === 'svelte') return true;
   if (isBrowser()) return false;
   return true;
 };

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.10.0"
+export const SDK_VERSION = "0.11.1"

package/src/functions/get-block-actions.ts

@@ -21,8 +21,7 @@ export function getBlockActions(options: {
     let eventHandlerName = getEventHandlerName(key);
     if (options.stripPrefix) {
       switch (TARGET) {
-        case 'vue2':
-        case 'vue3':
+        case 'vue':
           eventHandlerName = eventHandlerName.replace('v-on:', '');
           break;
         case 'svelte':

package/src/functions/get-block-properties.ts

@@ -65,8 +65,7 @@ export function getBlockProperties({
 function getStyleAttribute(style: Partial<CSSStyleDeclaration>): string | Partial<CSSStyleDeclaration> {
   switch (TARGET) {
     case 'svelte':
-    case 'vue2':
-    case 'vue3':
+    case 'vue':
     case 'solid':
       return convertStyleMapToCSSArray(style).join(' ');
     case 'qwik':

package/src/types/targets.ts

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