@storyblok/svelte 6.1.10 → 7.0.1

package/dist/StoryblokComponent.svelte

@@ -1,16 +1,18 @@
-<script>
-  import { getComponent } from './index';
+<script lang="ts" generics="T extends SbBlokData">
+  import { getComponent, type SbBlokData } from './index';
+  import type { Component } from 'svelte';
 
-  const { blok = null, ...rest } = $props();
+  type Props = {
+    blok: T;
+  } & Record<string, unknown>;
 
-  if (!blok) {
-    console.error('Please provide a \'blok\' property to the StoryblokComponent');
-  }
+  const props: Props = $props();
 
-  const component = $state(blok ? getComponent(blok.component) : null);
-  const SvelteComponent = $derived(component);
+  const SvelteComponent = $derived(
+    props.blok.component ? (getComponent(props.blok.component) as Component<Props>) : null,
+  );
 </script>
 
 {#if SvelteComponent}
-  <SvelteComponent {blok} {...rest} />
+  <SvelteComponent {...props} />
 {/if}

package/dist/StoryblokComponent.svelte.d.ts

@@ -1,11 +1,27 @@
-export default StoryblokComponent;
-type StoryblokComponent = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
+import { type SbBlokData } from './index';
+declare function $$render<T extends SbBlokData>(): {
+    props: {
+        blok: T;
+    } & Record<string, unknown>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
 };
-declare const StoryblokComponent: import("svelte").Component<{
-    blok?: any;
-} & Record<string, any>, {}, "">;
-type $$ComponentProps = {
-    blok?: any;
-} & Record<string, any>;
+declare class __sveltets_Render<T extends SbBlokData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends SbBlokData>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends SbBlokData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const StoryblokComponent: $$IsomorphicComponent;
+type StoryblokComponent<T extends SbBlokData> = InstanceType<typeof StoryblokComponent<T>>;
+export default StoryblokComponent;

package/dist/StoryblokRichText.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { normalizeNodes, type SbRichTextInput } from '@storyblok/richtext';
+  import RenderChildren from './richtext/RenderChildren.svelte';
+  import type { SbSvelteRichTextRenderContext } from './richtext-helpers';
+
+  type Props = SbSvelteRichTextRenderContext & {
+    document: SbRichTextInput;
+  } & Record<string, unknown>;
+
+  const { document, components = {}, optimizeImage }: Props = $props();
+  const nodes = $derived.by(() => normalizeNodes(document, true));
+</script>
+
+<RenderChildren {nodes} options={{ components, optimizeImage }} />

package/dist/StoryblokRichText.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type SbRichTextInput } from '@storyblok/richtext';
+import type { SbSvelteRichTextRenderContext } from './richtext-helpers';
+type Props = SbSvelteRichTextRenderContext & {
+    document: SbRichTextInput;
+} & Record<string, unknown>;
+declare const StoryblokRichText: import("svelte").Component<Props, {}, "">;
+type StoryblokRichText = ReturnType<typeof StoryblokRichText>;
+export default StoryblokRichText;

package/dist/index.d.ts

@@ -1,4 +1,8 @@
+export { type SbSvelteRichTextComponentMap, type SbSvelteRichTextProps, type SbSvelteRichTextRenderContext } from './richtext-helpers';
 export * from './storyblok';
 export { default as StoryblokComponent } from './StoryblokComponent.svelte';
+export { default as StoryblokRichText } from './StoryblokRichText.svelte';
 export * from './types';
-export { apiPlugin, renderRichText, useStoryblokBridge, } from '@storyblok/js';
+export { apiPlugin, useStoryblokBridge, } from '@storyblok/js';
+export { buildStoryblokImage, renderRichText, splitTableRows } from '@storyblok/richtext';
+export type { SbRichTextDoc, SbRichTextImageOptions, SbRichTextMark, SbRichTextNode, SbRichTextProps, SbRichTextRenderContext, } from '@storyblok/richtext';

package/dist/index.js

@@ -1,4 +1,7 @@
+export {} from './richtext-helpers';
 export * from './storyblok';
 export { default as StoryblokComponent } from './StoryblokComponent.svelte';
+export { default as StoryblokRichText } from './StoryblokRichText.svelte';
 export * from './types';
-export { apiPlugin, renderRichText, useStoryblokBridge, } from '@storyblok/js';
+export { apiPlugin, useStoryblokBridge, } from '@storyblok/js';
+export { buildStoryblokImage, renderRichText, splitTableRows } from '@storyblok/richtext';

package/dist/richtext/ElementTag.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { buildSvelteAttrs } from '../richtext-helpers';
+  import { isSelfClosing, resolveTag, type SbRichTextMark, type SbRichTextNode } from '@storyblok/richtext';
+  import type { Snippet } from 'svelte';
+
+  type Props = {
+    node: SbRichTextNode | SbRichTextMark;
+    children?: Snippet;
+  };
+
+  const { node, children }: Props = $props();
+  const Tag = $derived(resolveTag(node));
+  const processedAttrs = $derived(node.type !== 'text' ? buildSvelteAttrs(node.type, node?.attrs ?? {}) : {});
+  const selfClosing = $derived(Tag && isSelfClosing(Tag));
+</script>
+
+{#if Tag}
+  {#if selfClosing}
+    <svelte:element this={Tag} {...processedAttrs} />
+  {:else}
+    <svelte:element this={Tag} {...processedAttrs}>
+      {@render children?.()}
+    </svelte:element>
+  {/if}
+{:else}
+  {@render children?.()}
+{/if}

package/dist/richtext/ElementTag.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type SbRichTextMark, type SbRichTextNode } from '@storyblok/richtext';
+import type { Snippet } from 'svelte';
+type Props = {
+    node: SbRichTextNode | SbRichTextMark;
+    children?: Snippet;
+};
+declare const ElementTag: import("svelte").Component<Props, {}, "">;
+type ElementTag = ReturnType<typeof ElementTag>;
+export default ElementTag;

package/dist/richtext/RenderChildren.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { groupLinkNodes, type SbRichTextNode } from '@storyblok/richtext';
+
+  import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+  import RenderLinkGroup from './RenderLinkGroup.svelte';
+  import RenderNode from './RenderNode.svelte';
+
+  type Props = {
+    nodes: SbRichTextNode[];
+    options: SbSvelteRichTextRenderContext;
+  };
+
+  const { nodes, options }: Props = $props();
+  const groups = $derived.by(() => groupLinkNodes(nodes));
+</script>
+
+{#each groups as group (group._key)}
+  {#if group.linkMark}
+    <RenderLinkGroup nodes={group.nodes.filter(node => node.type === 'text')} linkMark={group.linkMark} {options} />
+  {:else}
+    <RenderNode node={group.nodes[0]} {options} />
+  {/if}
+{/each}

package/dist/richtext/RenderChildren.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type SbRichTextNode } from '@storyblok/richtext';
+import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+type Props = {
+    nodes: SbRichTextNode[];
+    options: SbSvelteRichTextRenderContext;
+};
+declare const RenderChildren: import("svelte").Component<Props, {}, "">;
+type RenderChildren = ReturnType<typeof RenderChildren>;
+export default RenderChildren;

package/dist/richtext/RenderImage.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { buildStoryblokImage, type SbRichTextNode } from '@storyblok/richtext';
+  import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+  import ElementTag from './ElementTag.svelte';
+
+  type ImageNode = SbRichTextNode & { type: 'image' };
+  type Props = {
+    node: ImageNode;
+    options: SbSvelteRichTextRenderContext;
+  };
+
+  const { node, options }: Props = $props();
+  const optimizedNode: ImageNode = $derived(
+    options.optimizeImage && node?.attrs?.src
+      ? {
+          ...node,
+          attrs: {
+            ...node.attrs,
+            ...buildStoryblokImage(node.attrs.src as string, options.optimizeImage),
+          },
+          type: 'image',
+        }
+      : node,
+  );
+</script>
+
+<ElementTag node={optimizedNode} />

package/dist/richtext/RenderImage.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type SbRichTextNode } from '@storyblok/richtext';
+import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+type ImageNode = SbRichTextNode & {
+    type: 'image';
+};
+type Props = {
+    node: ImageNode;
+    options: SbSvelteRichTextRenderContext;
+};
+declare const RenderImage: import("svelte").Component<Props, {}, "">;
+type RenderImage = ReturnType<typeof RenderImage>;
+export default RenderImage;

package/dist/richtext/RenderLinkGroup.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { type SbRichTextMark, type SbRichTextTextNode } from '@storyblok/richtext';
+
+  import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+  import ElementTag from './ElementTag.svelte';
+  import RenderLinkInner from './RenderLinkInner.svelte';
+
+  type Props = {
+    nodes: SbRichTextTextNode[];
+    linkMark: SbRichTextMark & { type: 'link' };
+    options: SbSvelteRichTextRenderContext;
+  };
+
+  const { nodes, linkMark, options }: Props = $props();
+  const CustomComponent = $derived(options.components ? options.components[linkMark.type] : undefined);
+</script>
+
+{#if CustomComponent}
+  <CustomComponent {...linkMark}>
+    <RenderLinkInner {nodes} {options} />
+  </CustomComponent>
+{:else}
+  <ElementTag node={linkMark}>
+    <RenderLinkInner {nodes} {options} />
+  </ElementTag>
+{/if}

package/dist/richtext/RenderLinkGroup.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type SbRichTextMark, type SbRichTextTextNode } from '@storyblok/richtext';
+import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+type Props = {
+    nodes: SbRichTextTextNode[];
+    linkMark: SbRichTextMark & {
+        type: 'link';
+    };
+    options: SbSvelteRichTextRenderContext;
+};
+declare const RenderLinkGroup: import("svelte").Component<Props, {}, "">;
+type RenderLinkGroup = ReturnType<typeof RenderLinkGroup>;
+export default RenderLinkGroup;

package/dist/richtext/RenderLinkInner.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { getInnerMarks, type SbRichTextNode, type SbRichTextTextNode } from '@storyblok/richtext';
+
+  import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+  import RenderTextNodeWithMarks from './RenderTextNodeWithMarks.svelte';
+
+  type Props = {
+    nodes: SbRichTextNode[];
+    options: SbSvelteRichTextRenderContext;
+  };
+
+  const { nodes, options }: Props = $props();
+</script>
+
+{#each nodes as node (node._key)}
+  {@const innerMarks = getInnerMarks(node)}
+
+  <RenderTextNodeWithMarks node={node as SbRichTextTextNode} marks={innerMarks} {options} />
+{/each}

package/dist/richtext/RenderLinkInner.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type SbRichTextNode } from '@storyblok/richtext';
+import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+type Props = {
+    nodes: SbRichTextNode[];
+    options: SbSvelteRichTextRenderContext;
+};
+declare const RenderLinkInner: import("svelte").Component<Props, {}, "">;
+type RenderLinkInner = ReturnType<typeof RenderLinkInner>;
+export default RenderLinkInner;

package/dist/richtext/RenderNode.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { getStaticChildren, type SbRichTextNode } from '@storyblok/richtext';
+  import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+  import RenderTextNodeWithMarks from './RenderTextNodeWithMarks.svelte';
+  import RenderChildren from './RenderChildren.svelte';
+  import RenderImage from './RenderImage.svelte';
+  import RenderTable from './RenderTable.svelte';
+  import RenderStaticChildren from './RenderStaticChildren.svelte';
+  import ElementTag from './ElementTag.svelte';
+  import StoryblokComponent from '../StoryblokComponent.svelte';
+
+  type Props = {
+    node: SbRichTextNode;
+    options: SbSvelteRichTextRenderContext;
+  };
+
+  const { node, options }: Props = $props();
+  const CustomComponent = $derived(
+    options.components && node.type !== 'text' ? options.components[node.type] : undefined,
+  );
+</script>
+
+{#if node.type === 'text'}
+  <RenderTextNodeWithMarks {node} marks={node.marks} {options} />
+{:else if CustomComponent}
+  <CustomComponent {...node} context={options}>
+    {#if node.content}
+      <RenderChildren nodes={node.content} {options} />
+    {/if}
+  </CustomComponent>
+{:else if node.type === 'image'}
+  <RenderImage {node} {options} />
+{:else if node.type === 'blok'}
+  {#if Array.isArray(node.attrs?.body)}
+    {#each node.attrs.body as blok (blok._uid)}
+      <StoryblokComponent {blok} />
+    {/each}
+  {/if}
+{:else if node.type === 'table'}
+  <RenderTable {node} {options} />
+{:else if getStaticChildren(node)}
+  <RenderStaticChildren {node} {options} />
+{:else}
+  <ElementTag {node}>
+    {#if node.content}
+      <RenderChildren nodes={node.content} {options} />
+    {/if}
+  </ElementTag>
+{/if}

package/dist/richtext/RenderNode.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type SbRichTextNode } from '@storyblok/richtext';
+import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+type Props = {
+    node: SbRichTextNode;
+    options: SbSvelteRichTextRenderContext;
+};
+declare const RenderNode: import("svelte").Component<Props, {}, "">;
+type RenderNode = ReturnType<typeof RenderNode>;
+export default RenderNode;

package/dist/richtext/RenderStaticChildren.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { getStaticChildren, resolveTag, type SbRichTextNode } from '@storyblok/richtext';
+  import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+  import RenderStaticStructure from './RenderStaticStructure.svelte';
+  import RenderChildren from './RenderChildren.svelte';
+
+  type Props = {
+    node: Exclude<SbRichTextNode, { type: 'text' }>;
+    options: SbSvelteRichTextRenderContext;
+  };
+
+  const { node, options }: Props = $props();
+  const staticChildren = $derived(getStaticChildren(node));
+  const OuterTag = $derived(resolveTag(node));
+</script>
+
+{#if staticChildren && OuterTag}
+  <svelte:element this={OuterTag}>
+    <RenderStaticStructure type={node.type} specs={staticChildren} parentAttrs={node.attrs}>
+      {#if node.content}
+        <RenderChildren nodes={node.content} {options} />
+      {/if}
+    </RenderStaticStructure>
+  </svelte:element>
+{/if}

package/dist/richtext/RenderStaticChildren.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type SbRichTextNode } from '@storyblok/richtext';
+import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+type Props = {
+    node: Exclude<SbRichTextNode, {
+        type: 'text';
+    }>;
+    options: SbSvelteRichTextRenderContext;
+};
+declare const RenderStaticChildren: import("svelte").Component<Props, {}, "">;
+type RenderStaticChildren = ReturnType<typeof RenderStaticChildren>;
+export default RenderStaticChildren;

package/dist/richtext/RenderStaticStructure.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { buildSvelteAttrs } from '../richtext-helpers';
+  import { isSelfClosing, type RenderSpec, type SbRichTextElement } from '@storyblok/richtext';
+  import type { Snippet } from 'svelte';
+  // eslint-disable-next-line import/no-self-import
+  import RenderStaticStructure from './RenderStaticStructure.svelte';
+
+  type Props = {
+    type: SbRichTextElement;
+    specs: readonly RenderSpec[];
+    parentAttrs?: Record<string, unknown>;
+    children?: Snippet;
+  };
+
+  const { type, specs, parentAttrs, ...rest }: Props = $props();
+</script>
+
+{#each specs as spec, index (index)}
+  {@const { tag, children, attrs: specAttrs } = spec}
+  {@const Tag = tag}
+  {@const mergedAttrs = { ...specAttrs, ...parentAttrs }}
+  {@const processedAttrs = buildSvelteAttrs(type, mergedAttrs)}
+
+  {#if isSelfClosing(Tag)}
+    <svelte:element this={Tag} {...processedAttrs} />
+  {:else}
+    <svelte:element this={Tag} {...processedAttrs}>
+      {#if children}
+        <RenderStaticStructure {type} specs={children} {parentAttrs}>
+          {@render rest.children?.()}
+        </RenderStaticStructure>
+      {:else}
+        {@render rest.children?.()}
+      {/if}
+    </svelte:element>
+  {/if}
+{/each}

package/dist/richtext/RenderStaticStructure.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type RenderSpec, type SbRichTextElement } from '@storyblok/richtext';
+import type { Snippet } from 'svelte';
+import RenderStaticStructure from './RenderStaticStructure.svelte';
+type Props = {
+    type: SbRichTextElement;
+    specs: readonly RenderSpec[];
+    parentAttrs?: Record<string, unknown>;
+    children?: Snippet;
+};
+declare const RenderStaticStructure: import("svelte").Component<Props, {}, "">;
+type RenderStaticStructure = ReturnType<typeof RenderStaticStructure>;
+export default RenderStaticStructure;

package/dist/richtext/RenderTable.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { type SbRichTextNode, splitTableRows } from '@storyblok/richtext';
+  import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+  import ElementTag from './ElementTag.svelte';
+  import RenderNode from './RenderNode.svelte';
+
+  type Props = {
+    node: SbRichTextNode & { type: 'table' };
+    options: SbSvelteRichTextRenderContext;
+  };
+
+  const { node, options }: Props = $props();
+  const { headerRows, bodyRows } = $derived(splitTableRows(node.content));
+</script>
+
+<ElementTag {node}
+  >{#if headerRows.length > 0}<thead>
+      {#each headerRows as row (row._key)}
+        <RenderNode node={row} {options} />
+      {/each}
+    </thead>{/if}{#if bodyRows.length > 0}<tbody>
+      {#each bodyRows as row (row._key)}
+        <RenderNode node={row} {options} />
+      {/each}
+    </tbody>{/if}</ElementTag
+>

package/dist/richtext/RenderTable.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type SbRichTextNode } from '@storyblok/richtext';
+import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+type Props = {
+    node: SbRichTextNode & {
+        type: 'table';
+    };
+    options: SbSvelteRichTextRenderContext;
+};
+declare const RenderTable: import("svelte").Component<Props, {}, "">;
+type RenderTable = ReturnType<typeof RenderTable>;
+export default RenderTable;

package/dist/richtext/RenderTextNodeWithMarks.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { type SbRichTextMark, type SbRichTextTextNode } from '@storyblok/richtext';
+  // eslint-disable-next-line import/no-self-import
+  import RenderTextNodeWithMarks from './RenderTextNodeWithMarks.svelte';
+  import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+  import ElementTag from './ElementTag.svelte';
+
+  type Props = {
+    node: SbRichTextTextNode;
+    marks?: SbRichTextMark[];
+    options: SbSvelteRichTextRenderContext;
+  };
+
+  const { node, marks = [], options }: Props = $props();
+  const reversedMarks = $derived([...marks].reverse());
+
+  const mark = $derived(reversedMarks[0]);
+
+  const rest = $derived(reversedMarks.slice(1));
+
+  const MarkComponent = $derived(mark && options.components ? options.components[mark.type] : undefined);
+</script>
+
+{#if reversedMarks.length === 0}
+  {node.text}
+{:else if MarkComponent}
+  <MarkComponent {...mark}>
+    <RenderTextNodeWithMarks {node} marks={rest} {options} />
+  </MarkComponent>
+{:else}
+  <ElementTag node={mark}>
+    <RenderTextNodeWithMarks {node} marks={rest} {options} />
+  </ElementTag>
+{/if}

package/dist/richtext/RenderTextNodeWithMarks.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type SbRichTextMark, type SbRichTextTextNode } from '@storyblok/richtext';
+import RenderTextNodeWithMarks from './RenderTextNodeWithMarks.svelte';
+import type { SbSvelteRichTextRenderContext } from '../richtext-helpers';
+type Props = {
+    node: SbRichTextTextNode;
+    marks?: SbRichTextMark[];
+    options: SbSvelteRichTextRenderContext;
+};
+declare const RenderTextNodeWithMarks: import("svelte").Component<Props, {}, "">;
+type RenderTextNodeWithMarks = ReturnType<typeof RenderTextNodeWithMarks>;
+export default RenderTextNodeWithMarks;

package/dist/richtext-helpers.d.ts

@@ -0,0 +1,15 @@
+import { type SbRichTextElement, type SbRichTextElementByType, type SbRichTextImageOptions } from '@storyblok/richtext';
+import type { Component, Snippet } from 'svelte';
+export interface SbSvelteRichTextRenderContext {
+    optimizeImage?: boolean | SbRichTextImageOptions;
+    components?: SbSvelteRichTextComponentMap;
+}
+type AnyComponent = Component<any>;
+export type SbSvelteRichTextComponentMap = {
+    [k in SbRichTextElement]?: AnyComponent;
+};
+export type SbSvelteRichTextProps<T extends SbRichTextElement> = SbRichTextElementByType<SbSvelteRichTextRenderContext>[T] & {
+    children?: Snippet;
+};
+export declare function buildSvelteAttrs(type: SbRichTextElement, attrs: Record<string, unknown>): Record<string, unknown>;
+export {};

package/dist/richtext-helpers.js

@@ -0,0 +1,13 @@
+import { processAttrs, styleToString } from '@storyblok/richtext';
+export function buildSvelteAttrs(type, attrs) {
+    const processedAttrs = processAttrs(type, attrs, {
+        colspan: 'colspan',
+        rowspan: 'rowspan',
+    });
+    const styleObj = processedAttrs?.style;
+    const finalAttrs = { ...processedAttrs };
+    if (styleObj) {
+        finalAttrs.style = styleToString(styleObj);
+    }
+    return finalAttrs;
+}

package/dist/types.d.ts

@@ -1,9 +1,12 @@
-import type { SbSDKOptions } from '@storyblok/js';
+import type { SbBlokData, SbSDKOptions } from '@storyblok/js';
 import type { Component } from 'svelte';
+export type StoryblokComponentProps<T> = {
+    blok: T;
+} & Record<string, unknown>;
 export interface SbSvelteComponentsMap {
-    [name: string]: Component;
+    [name: string]: Component<StoryblokComponentProps<SbBlokData>>;
 }
 export interface SbSvelteSDKOptions extends SbSDKOptions {
     components?: SbSvelteComponentsMap | CallableFunction;
 }
-export type { BlockTypes, ISbAlternateObject, ISbCache, ISbConfig, ISbManagmentApiResult, ISbResult, ISbStories, ISbStoriesParams, ISbStory, ISbStoryData, ISbStoryParams, MarkTypes, SbBlokData, SbBlokKeyDataTypes, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, StoryblokRichTextDocumentNode, StoryblokRichTextImageOptimizationOptions, StoryblokRichTextNode, StoryblokRichTextNodeTypes, StoryblokRichTextOptions, TextTypes, useStoryblokBridge, } from '@storyblok/js';
+export type { ISbAlternateObject, ISbCache, ISbConfig, ISbManagmentApiResult, ISbResult, ISbStories, ISbStoriesParams, ISbStory, ISbStoryData, ISbStoryParams, SbBlokData, SbBlokKeyDataTypes, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, useStoryblokBridge, } from '@storyblok/js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@storyblok/svelte",
   "type": "module",
-  "version": "6.1.10",
+  "version": "7.0.1",
   "private": false,
   "description": "SDK to integrate Storyblok into your project using Svelte.",
   "author": "Storyblok",
@@ -9,7 +9,7 @@
   "homepage": "https://github.com/storyblok/monoblok/tree/main/packages/svelte#readme",
   "repository": {
     "type": "git",
-    "url": "https://github.com/storyblok/monoblok.git",
+    "url": "git+https://github.com/storyblok/monoblok.git",
     "directory": "packages/svelte"
   },
   "bugs": {
@@ -39,7 +39,8 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@storyblok/js": "5.1.10"
+    "@storyblok/js": "6.0.1",
+    "@storyblok/richtext": "5.0.1"
   },
   "devDependencies": {
     "@cypress/svelte": "^3.0.0",