feat: refactoring the main library exports

cypress.config.ts

@@ -1,5 +1,5 @@
 import { defineConfig } from 'cypress';
-import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { svelte } from '@sveltejs/vite-plugin-svelte';
 
 export default defineConfig({
   e2e: {
@@ -12,8 +12,8 @@ export default defineConfig({
       bundler: 'vite',
       viteConfig: () => {
         return {
-          plugins: [svelte()]
-        }
+          plugins: [svelte()],
+        };
       },
     },
   },

cypress/component/page.cy.ts

@@ -1,7 +1,7 @@
 /**
   Cypress is not working well with Svelte 5, so for now no StoryblokComponent tests are available.
   @todo Fix Cypress to work with Svelte 5
-*/
+ */
 describe('Basic Test', () => {
   it('can find an element', () => {
     // Create a basic element

package.json

@@ -73,6 +73,7 @@
     "cypress": "^13.17.0",
     "eslint": "^9.18.0",
     "eslint-plugin-svelte": "^2.36.0",
+    "jsdom": "^26.0.0",
     "publint": "^0.2.0",
     "simple-git-hooks": "^2.11.1",
     "start-server-and-test": "^2.0.10",
@@ -88,7 +89,11 @@
       "@commitlint/config-conventional"
     ],
     "rules": {
-      "body-max-line-length": [2, "always", 200]
+      "body-max-line-length": [
+        2,
+        "always",
+        200
+      ]
     }
   },
   "release": {

playground/sveltekit/src/lib/Page.svelte

@@ -1,13 +1,19 @@
-<script lang="ts">
-  import { storyblokEditable, StoryblokComponent } from '@storyblok/svelte';
+<script>
+  import {
+    storyblokEditable,
+    StoryblokComponent,
+    renderRichText,
+  } from "@storyblok/svelte";
 
   let { blok } = $props();
+  let resolvedRichText = $derived(renderRichText(blok.richText));
 </script>
 
-<div use:storyblokEditable={blok} class="container">
-  {#each blok.body as item}
-    <div>
-      <StoryblokComponent blok={item} />
-    </div>
-  {/each}
-</div>
+{#key blok}
+  <div use:storyblokEditable={blok} class="px-6">
+    {#each blok.body as bodyBlok}
+      <StoryblokComponent blok={bodyBlok} />
+    {/each}
+    <div class="prose">{@html resolvedRichText}</div>
+  </div>
+{/key}

playground/sveltekit/src/routes/+layout.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import type { LayoutData } from './$types';
 	import type { Snippet } from 'svelte';
 
-	let { data, children }: { data: LayoutData, children: Snippet } = $props();
+	let { children }: { children: Snippet } = $props();
 </script>
 
-{@render children()}
+{@render children?.()}

playground/sveltekit/src/routes/+layout.ts

@@ -1,5 +1,5 @@
 import type { LayoutLoad } from './$types';
-import { storyblokInit, apiPlugin, useStoryblokApi } from "@storyblok/svelte";
+import { storyblokInit, apiPlugin, getStoryblokApi } from "@storyblok/svelte";
 import Teaser from '$lib/Teaser.svelte';
 import Page from '$lib/Page.svelte';
 import Feature from '$lib/Feature.svelte';
@@ -26,6 +26,6 @@ export const load: LayoutLoad = () => {
   });
 
 	return {
-	  storyblokApi: useStoryblokApi()
+	  storyblokApi: getStoryblokApi(),
 	};
 };

playground/sveltekit/src/routes/[...slug]/+page.svelte

@@ -3,7 +3,7 @@
   import type { PageData } from './$types';
   import { onMount } from 'svelte';
 
-  let { data }: { data: PageData } = $props();
+  let { data = $bindable() }: { data: PageData } = $props();
   let story = $state(data.story);
   let loaded = $state(false);