@storyblok/svelte 4.0.11 → 5.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Storyblok GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -29,8 +29,15 @@
   </a>
 </p>
 
+<p align="center">
+  <a href="https://www.npmjs.com/package/@storyblok/svelte">
+    <img src="https://img.shields.io/npm/v/@storyblok/svelte/latest.svg?style=flat-square" alt="npm package" />
+  </a>
+  <img src="https://img.shields.io/badge/Svelte-5.x%20Ready-FF3E00?style=flat-square&logo=svelte" alt="Svelte 5 Ready" />
+</p>
+
 ## Kickstart a new project
-Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and Svelte](https://www.storyblok.com/technologies#sveltekit?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte)**, and get started in just a few minutes!
+Are you eager to dive into coding? **[Follow these steps to kickstart a new project with Storyblok and Svelte](https://www.storyblok.com/technologies?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte#sveltekit)**, and get started in just a few minutes!
 
 ## Ultimate Tutorial
 Are you looking for a hands-on, step-by-step tutorial? The **[SvelteKit Ultimate Tutorial](https://www.storyblok.com/tp/the-storyblok-sveltekit-ultimate-tutorial?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte)** has you covered! It provides comprehensive instructions on building a complete, multilingual website using Storyblok and SvelteKit from start to finish.
@@ -39,10 +46,16 @@ Are you looking for a hands-on, step-by-step tutorial? The **[SvelteKit Ultimate
 
 | Version to install                                                                                                                      | Support                                              |
 | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
-| Latest (from v3) `@storyblok/svelte`                                                                                                    | Modern browsers + Node 18+                           |
+| Latest (from v3) `@storyblok/svelte`                                                                                                    | Modern browsers + Node 18+ (Compatible with Svelte 5)|
 | Latest (from v3) `@storyblok/svelte` <br> + Fetch polyfill like [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) | Browsers and Node versions with no Fetch API support |
 | [Version 2](https://github.com/storyblok/@storyblok/svelte/tree/v2.5.0) `@storyblok/svelte@2`                                           | Internet Explorer support                            |
 
+### Upgrading to Svelte 5
+
+We recommend upgrading to Svelte 5 for the latest features and improvements. The latest version of `@storyblok/svelte` is fully compatible with Svelte 5.
+
+If you're migrating from Svelte 3/4 to Svelte 5, please follow the [official Svelte migration guide](https://svelte.dev/docs/svelte/v5-migration-guide) and then ensure you're using the latest version of `@storyblok/svelte`.
+
 ## Usage
 
 `@storyblok/svelte` helps you connect your Svelte project to Storyblok by:
@@ -59,16 +72,14 @@ Install `@storyblok/svelte`
 npm install @storyblok/svelte
 ```
 
-Please note that you have to use `npm` - unfortunately, we are currently not supporting `yarn` or `pnpm` for this SDK.
-
 Initialize the library in your application by adding the `apiPlugin` and the [access token](https://www.storyblok.com/docs/api/content-delivery/v2?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte) of your Storyblok space:
 
 ```js
-import App from "./App.svelte";
-import { storyblokInit, apiPlugin } from "@storyblok/svelte";
+import App from './App.svelte';
+import { apiPlugin, storyblokInit } from '@storyblok/svelte';
 
 storyblokInit({
-  accessToken: "<your-token>",
+  accessToken: '<your-token>',
   // bridge: false,
   use: [apiPlugin],
 
@@ -78,7 +89,9 @@ storyblokInit({
 });
 ```
 
-The best place to initialize the Storyblok library is in the `main.ts.` or `main.js` file if you are using `svelte` or in the `load()` function in the `src/routes/+layout.js` file if you are using `SvelteKit`.
+The best place to initialize the Storyblok library is in the `main.(ts|js).` or `main.(ts|js)` file if you are using `svelte` or in the `load()` function in the `src/routes/+layout.(ts|js)` file if you are using `SvelteKit`.
+
+You can find a good example with SvelteKit in the `playground` folder.
 
 List all your components to the components object in the storyblokInit function. You can load all of them by adding them to the list.
 
@@ -114,12 +127,12 @@ Use the `getStoryblokApi`()` to get your stories from the Storyblok CDN API:
 
 ```html
 <script>
-  import { onMount } from "svelte";
-  import { getStoryblokApi } from "@storyblok/svelte";
+  import { onMount } from 'svelte';
+  import { getStoryblokApi } from '@storyblok/svelte';
   onMount(async () => {
     const storyblokApi = getStoryblokApi();
-    const { data } = await storyblokApi.get("cdn/stories/home", {
-      version: "draft",
+    const { data } = await storyblokApi.get('cdn/stories/home', {
+      version: 'draft',
     });
   });
 </script>
@@ -134,13 +147,13 @@ Use `useStoryBridge` to get the updated story every time a change event is trigg
 
 ```html
 <script>
-  import { onMount } from "svelte";
-  import { getStoryblokApi, useStoryblokBridge } from "@storyblok/svelte";
+  import { onMount } from 'svelte';
+  import { getStoryblokApi, useStoryblokBridge } from '@storyblok/svelte';
   let story = null;
   onMount(async () => {
     const storyblokApi = getStoryblokApi();
-    const { data } = await storyblokApi.get("cdn/stories/home", {
-      version: "draft",
+    const { data } = await storyblokApi.get('cdn/stories/home', {
+      version: 'draft',
     });
     story = data.story;
     useStoryblokBridge(story.id, (newStory) => (story = newStory));
@@ -151,9 +164,9 @@ Use `useStoryBridge` to get the updated story every time a change event is trigg
 You can pass [Bridge options](https://www.storyblok.com/docs/Guides/storyblok-latest-js?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte) as a third parameter as well:
 
 ```js
-useStoryblokBridge(story.id, (newStory) => (story = newStory), {
-  resolveRelations: ["Article.author"],
-  resolveLinks: "url",
+useStoryblokBridge(story.id, newStory => (story = newStory), {
+  resolveRelations: ['Article.author'],
+  resolveLinks: 'url',
 });
 ```
 
@@ -172,7 +185,7 @@ To link the Storyblok components, you have to
 - Use the `StoryblokComponent` to load them by passing the `blok` property
 
 ```html
-<StoryblokComponent {blok} />
+<StoryblokComponent blok={blok} />
 ```
 
 > The `blok` is the actual blok data coming from [Storyblok's Content Delivery API](https://www.storyblok.com/docs/api/content-delivery/v2?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte).
@@ -187,10 +200,10 @@ You can use an `apiOptions` object. This is passed down to the [storyblok-js-cli
 
 ```js
 storyblokInit({
-  accessToken: "<your-token>",
+  accessToken: '<your-token>',
   apiOptions: {
-    //storyblok-js-client config object
-    cache: { type: "memory" },
+    // storyblok-js-client config object
+    cache: { type: 'memory' },
   },
   use: [apiPlugin],
 });
@@ -204,7 +217,7 @@ You can conditionally load it by using the `bridge` option. Very useful if you w
 
 ```js
 storyblokInit({
-  bridge: process.env.NODE_ENV !== "production",
+  bridge: process.env.NODE_ENV !== 'production',
 });
 ```
 
@@ -212,7 +225,7 @@ Keep in mind you have still access to the raw `window.StoryblokBridge`:
 
 ```js
 const sbBridge = new window.StoryblokBridge(options);
-sbBridge.on(["input", "published", "change"], (event) => {
+sbBridge.on(['input', 'published', 'change'], (event) => {
   // ...
 });
 ```
@@ -225,9 +238,11 @@ You can easily render rich text by using the `renderRichText` function that come
 
 ```html
 <script>
-  import { renderRichText } from "@storyblok/svelte";
+  import { renderRichText } from '@storyblok/svelte';
+
+  let articleHTML = $derived(renderRichText(blok.article));
+
   export let blok;
-  $: articleHTML = renderRichText(blok.article);
 </script>
 
 <div class="prose">{@html articleHTML}</div>
@@ -243,21 +258,21 @@ npm i clone-deep
 You can set a **custom Schema and component resolver globally** at init time by using the `richText` init option:
 
 ```js
-import { RichTextSchema, storyblokInit } from "@storyblok/svelte";
-import cloneDeep from "clone-deep";
+import { RichTextSchema, storyblokInit } from '@storyblok/svelte';
+import cloneDeep from 'clone-deep';
 const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
 // ... and edit the nodes and marks, or add your own.
 // Check the base RichTextSchema source here https://github.com/storyblok/storyblok-js-client/blob/master/source/schema.js
 storyblokInit({
-  accessToken: "<your-token>",
+  accessToken: '<your-token>',
   richText: {
     schema: mySchema,
     resolver: (component, blok) => {
       switch (component) {
-        case "my-custom-component":
+        case 'my-custom-component':
           return `<div class="my-component-class">${blok.text}</div>`;
         default:
-          return "Resolver not defined";
+          return 'Resolver not defined';
       }
     },
   },
@@ -317,7 +332,7 @@ and then, activating the plugin in `plugins` configuration array:
 
 ### Compatibility
 
-This plugin is for Svelte. Thus, it supports the [same browsers as Svelte 3](https://github.com/sveltejs/svelte/issues/558). In short: all modern browsers and IE10+.
+This plugin was made and tested with Svelte 5.
 
 ## Troubleshooting
 
@@ -326,10 +341,10 @@ This plugin is for Svelte. Thus, it supports the [same browsers as Svelte 3](htt
 When working with a component library, create an alias pointing '@storyblok/svelte' to './node_modules/@storyblok/svelte'. This will ensure the imported module will use the local version of Storyblok SDK. In your `vite.config.js`, include:
 
 ```js
-import { sveltekit } from "@sveltejs/kit/vite";
-import basicSsl from "@vitejs/plugin-basic-ssl";
-import path from "path";
-import { fileURLToPath } from "url";
+import { sveltekit } from '@sveltejs/kit/vite';
+import basicSsl from '@vitejs/plugin-basic-ssl';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 const __filename = fileURLToPath(import.meta.url);
 
@@ -343,9 +358,9 @@ const config = {
   },
   resolve: {
     alias: {
-      "@storyblok/svelte": path.resolve(
+      '@storyblok/svelte': path.resolve(
         __dirname,
-        "./node_modules/@storyblok/svelte"
+        './node_modules/@storyblok/svelte'
       ),
     },
   },
@@ -379,5 +394,5 @@ Another option might also be using npm / yarn workspaces.
 
 ## Contributing
 
-Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center#code-of-conduct?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte).
+Please see our [contributing guidelines](https://github.com/storyblok/.github/blob/master/contributing.md) and our [code of conduct](https://www.storyblok.com/trust-center?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-svelte#code-of-conduct).
 This project uses [semantic-release](https://semantic-release.gitbook.io/semantic-release/) for generating new versions by using commit messages and we use the [Angular Convention](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y/edit#) to name the commits. Check [this question](https://semantic-release.gitbook.io/semantic-release/support/faq#how-can-i-change-the-type-of-commits-that-trigger-a-release) about it in semantic-release FAQ.

package/dist/StoryblokComponent.svelte

@@ -1,15 +1,16 @@
 <script>
-  import { getComponent } from "./index";
+  import { getComponent } from './index';
 
-  let component;
-  export let blok;
+  const { blok = null, ...rest } = $props();
 
-  if (blok) {
-    component = getComponent(blok.component);
-  } else {
-    console.error("Please provide a 'blok' property to the StoryblokComponent");
+  if (!blok) {
+    console.error('Please provide a \'blok\' property to the StoryblokComponent');
   }
+
+  const component = $state(blok ? getComponent(blok.component) : null);
+  const SvelteComponent = $derived(component);
 </script>
 
-<!-- svelte-ignore missing-declaration -->
-<svelte:component this={component} {blok} {...$$restProps} />
+{#if SvelteComponent}
+  <SvelteComponent {blok} {...rest} />
+{/if}

package/dist/StoryblokComponent.svelte.d.ts

@@ -1,25 +1,11 @@
-/** @typedef {typeof __propDef.props}  StoryblokComponentProps */
-/** @typedef {typeof __propDef.events}  StoryblokComponentEvents */
-/** @typedef {typeof __propDef.slots}  StoryblokComponentSlots */
-export default class StoryblokComponent extends SvelteComponentTyped<{
-    [x: string]: any;
-    blok: any;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type StoryblokComponentProps = typeof __propDef.props;
-export type StoryblokComponentEvents = typeof __propDef.events;
-export type StoryblokComponentSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        blok: any;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
+export default StoryblokComponent;
+type StoryblokComponent = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
 };
-export {};
+declare const StoryblokComponent: import("svelte").Component<{
+    blok?: any;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    blok?: any;
+} & Record<string, any>;

package/dist/index.d.ts

@@ -1,11 +1,4 @@
-export { useStoryblokBridge, apiPlugin, renderRichText, RichTextSchema, } from "@storyblok/js";
-import type { SbSvelteSDKOptions, StoryblokClient, SbBlokData } from "./types";
-export declare const storyblokEditable: (node: HTMLElement, value: SbBlokData) => {
-    update(newValue: SbBlokData): void;
-};
-export declare const useStoryblokApi: () => StoryblokClient;
-export { useStoryblokApi as getStoryblokApi };
-export declare const storyblokInit: (options: SbSvelteSDKOptions) => void;
-export declare const getComponent: (componentName: string) => any;
-export * from "./types";
-export { default as StoryblokComponent } from "./StoryblokComponent.svelte";
+export * from './storyblok';
+export { default as StoryblokComponent } from './StoryblokComponent.svelte';
+export * from './types';
+export { apiPlugin, renderRichText, RichTextSchema, useStoryblokBridge, } from '@storyblok/js';

package/dist/index.js

@@ -1,53 +1,4 @@
-import { storyblokEditable as sbEdit, storyblokInit as sbInit, } from "@storyblok/js";
-export { useStoryblokBridge, apiPlugin, renderRichText, RichTextSchema, } from "@storyblok/js";
-export const storyblokEditable = (node, value) => {
-    const updateDom = (value) => {
-        const options = sbEdit(value);
-        if (options["data-blok-c"]) {
-            node.setAttribute("data-blok-c", options["data-blok-c"]);
-            node.setAttribute("data-blok-uid", options["data-blok-uid"]);
-            node.classList.add("storyblok__outline");
-        }
-    };
-    updateDom(value); // when is mounted
-    return {
-        update(newValue) {
-            // when value changes
-            updateDom(newValue);
-        },
-    };
-};
-let storyblokApiInstance = null;
-export const useStoryblokApi = () => {
-    if (!storyblokApiInstance) {
-        console.log(`You can't use getStoryblokApi if you're not loading apiPlugin.`);
-    }
-    return storyblokApiInstance;
-};
-export { useStoryblokApi as getStoryblokApi };
-let componentsMap = null;
-export const storyblokInit = (options) => {
-    const { storyblokApi } = sbInit(options);
-    storyblokApiInstance = storyblokApi;
-    componentsMap = options.components || {};
-};
-export const getComponent = (componentName) => {
-    let component = null;
-    component =
-        typeof componentsMap === "function"
-            ? componentsMap()[componentName]
-            : componentsMap[componentName];
-    if (!component) {
-        console.error(`You didn't load the ${componentName} component. Please load it in storyblokInit. For example:
-storyblokInit({
-    accessToken: "<your-token>",
-    components: {
-      "teaser": Teaser
-    }
-})
-`);
-    }
-    return component;
-};
-export * from "./types";
-export { default as StoryblokComponent } from "./StoryblokComponent.svelte";
+export * from './storyblok';
+export { default as StoryblokComponent } from './StoryblokComponent.svelte';
+export * from './types';
+export { apiPlugin, renderRichText, RichTextSchema, useStoryblokBridge, } from '@storyblok/js';

package/dist/storyblok-store.d.ts

@@ -0,0 +1,2 @@
+import type { SbSvelteSDKOptions, StoryblokClient } from './types';
+export declare const storyblokInit: (options: SbSvelteSDKOptions) => void, getStoryblokApi: () => StoryblokClient, getComponent: (componentName: string) => any;

package/dist/storyblok-store.js

@@ -0,0 +1,52 @@
+import { storyblokInit as sbInit } from '@storyblok/js';
+/**
+ * Creates a singleton store for managing Storyblok state
+ */
+const createStoryblokStore = () => {
+    let api = null;
+    let components = {};
+    /**
+     * Retrieves the Storyblok API instance
+     */
+    const getApi = () => {
+        if (!api) {
+            console.error('Storyblok API not initialized. Make sure to load apiPlugin.');
+        }
+        return api;
+    };
+    /**
+     * Initializes the Storyblok SDK with provided options
+     */
+    const init = (options) => {
+        const { storyblokApi } = sbInit(options);
+        api = storyblokApi ?? api;
+        components = options.components ?? {};
+    };
+    /**
+     * Retrieves a component from the registered components map
+     */
+    const getComponent = (componentName) => {
+        const resolvedComponent = typeof components === 'function'
+            ? components()[componentName]
+            : components[componentName];
+        if (!resolvedComponent) {
+            console.error(`Component "${componentName}" not found. Please register it in storyblokInit:\n`
+                + `storyblokInit({
+          accessToken: "<your-token>",
+          components: {
+            "${componentName}": YourComponent
+          }
+        })`);
+        }
+        return resolvedComponent;
+    };
+    return {
+        init,
+        getApi,
+        getComponent,
+    };
+};
+// Create singleton instance
+const storyblokStore = createStoryblokStore();
+// Export store methods
+export const { init: storyblokInit, getApi: getStoryblokApi, getComponent, } = storyblokStore;

package/dist/storyblok.d.ts

@@ -0,0 +1,12 @@
+import type { SbBlokData } from './types';
+/**
+ * Svelte action to make a component editable in Storyblok
+ */
+export declare const storyblokEditable: (node: HTMLElement, value: SbBlokData) => {
+    update: (value: SbBlokData) => void;
+};
+export { getComponent, getStoryblokApi, storyblokInit, } from './storyblok-store';
+/**
+ * @deprecated Use getStoryblokApi() instead. This will be removed in a next major version.
+ */
+export { getStoryblokApi as useStoryblokApi } from './storyblok-store';

package/dist/storyblok.js

@@ -0,0 +1,45 @@
+import { storyblokEditable as sbEdit, } from '@storyblok/js';
+/**
+ * Creates options object for Storyblok editable elements
+ */
+const createEditableOptions = (value) => {
+    const options = sbEdit(value);
+    return options['data-blok-c']
+        ? {
+            'data-blok-c': options['data-blok-c'],
+            'data-blok-uid': options['data-blok-uid'],
+            'className': 'storyblok__outline',
+        }
+        : null;
+};
+/**
+ * Applies Storyblok editable attributes to a DOM node
+ */
+const applyEditableOptions = (node, options) => {
+    if (!options) {
+        return;
+    }
+    node.setAttribute('data-blok-c', options['data-blok-c']);
+    node.setAttribute('data-blok-uid', options['data-blok-uid']);
+    node.classList.add(options.className);
+};
+/**
+ * Svelte action to make a component editable in Storyblok
+ */
+export const storyblokEditable = (node, value) => {
+    const updateDom = (value) => {
+        const options = createEditableOptions(value);
+        if (options) {
+            applyEditableOptions(node, options);
+        }
+    };
+    updateDom(value);
+    return {
+        update: updateDom,
+    };
+};
+export { getComponent, getStoryblokApi, storyblokInit, } from './storyblok-store';
+/**
+ * @deprecated Use getStoryblokApi() instead. This will be removed in a next major version.
+ */
+export { getStoryblokApi as useStoryblokApi } from './storyblok-store';

package/dist/types.d.ts

@@ -1,10 +1,9 @@
-import type { SbSDKOptions } from "@storyblok/js";
-import type { SvelteComponent } from "svelte";
+import type { SbSDKOptions } from '@storyblok/js';
+import type { Component } from 'svelte';
 export interface SbSvelteComponentsMap {
-    [name: string]: typeof SvelteComponent<any>;
+    [name: string]: Component;
 }
 export interface SbSvelteSDKOptions extends SbSDKOptions {
     components?: SbSvelteComponentsMap | CallableFunction;
 }
-export { apiPlugin } from "@storyblok/js";
-export type { ISbAlternateObject, ISbRichtext, RichTextResolver, SbBlokData, SbBlokKeyDataTypes, SbSDKOptions, ISbStories, ISbStoriesParams, ISbStory, ISbStoryData, ISbStoryParams, StoryblokBridgeConfigV2, StoryblokBridgeV2, ISbCache, StoryblokClient, StoryblokComponentType, ISbConfig, ISbManagmentApiResult, ISbResult, useStoryblokBridge, } from "@storyblok/js";
+export type { ISbAlternateObject, ISbCache, ISbConfig, ISbManagmentApiResult, ISbResult, ISbRichtext, ISbStories, ISbStoriesParams, ISbStory, ISbStoryData, ISbStoryParams, RichTextResolver, SbBlokData, SbBlokKeyDataTypes, SbSDKOptions, StoryblokBridgeConfigV2, StoryblokBridgeV2, StoryblokClient, StoryblokComponentType, useStoryblokBridge, } from '@storyblok/js';

package/dist/types.js

@@ -1 +1 @@
-export { apiPlugin } from "@storyblok/js";
+export {};

package/package.json

@@ -1,89 +1,120 @@
 {
   "name": "@storyblok/svelte",
-  "version": "4.0.11",
   "type": "module",
-  "description": "Storyblok SDK to connect Storyblok with Svelte",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist",
-    "README.md"
+  "version": "5.0.0",
+  "private": false,
+  "packageManager": "pnpm@9.15.9",
+  "description": "SDK to integrate Storyblok into your project using Svelte.",
+  "author": "Storyblok",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storyblok/storyblok-svelte.git"
+  },
+  "bugs": {
+    "url": "https://github.com/storyblok/storyblok-svelte/issues"
+  },
+  "sideEffects": [
+    "**/*.css"
   ],
   "exports": {
     ".": {
-      "svelte": "./dist/index.js",
       "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
       "import": "./dist/index.js",
       "require": "./dist/index.js"
     }
   },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "!dist/**/*.spec.*",
+    "!dist/**/*.test.*",
+    "dist"
+  ],
+  "svelte": "./dist/index.js",
   "scripts": {
-    "dev": "svelte-package -i pkg --watch",
-    "build": "svelte-package -i pkg",
-    "test": "npm run test:unit && npm run test:e2e",
-    "test:unit": "jest __tests__",
-    "prepublishOnly": "npm run build && cp ../README.md ."
+    "dev": "vite dev",
+    "build": "pnpm package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "test": "pnpm run test:unit:ci && pnpm run test:e2e",
+    "test:unit": "vitest",
+    "test:unit:ci": "vitest run",
+    "test:unit:ui": "vitest --ui",
+    "playground": "pnpm run --filter ./playground/sveltekit dev",
+    "test:e2e": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test playground https://localhost:5173/ cy:run",
+    "test:e2e-watch": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test playground https://localhost:5173/ cy:open",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "prepublishOnly": "pnpm package",
+    "prepare": "simple-git-hooks",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
   },
   "dependencies": {
-    "@storyblok/js": "3.2.1"
+    "@storyblok/js": "3.3.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@sveltejs/package": "^2.3.4",
-    "@tsconfig/svelte": "^5.0.4",
-    "babel-jest": "^29",
-    "eslint-plugin-jest": "^28.8.0",
-    "jest": "^29.7.0",
-    "svelte": "^4.2.16",
-    "svelte-preprocess": "^5.1.4",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2"
-  },
-  "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0"
-  },
-  "eslintConfig": {
-    "env": {
-      "node": true
-    }
+    "@commitlint/cli": "^19.8.0",
+    "@commitlint/config-conventional": "^19.8.0",
+    "@cypress/svelte": "^3.0.0",
+    "@eslint/compat": "^1.2.7",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@storyblok/eslint-config": "^0.3.0",
+    "@sveltejs/adapter-auto": "^5.0.0",
+    "@sveltejs/kit": "^2.20.2",
+    "@sveltejs/package": "^2.3.10",
+    "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "cypress": "^14.2.0",
+    "eslint": "^9.23.0",
+    "eslint-plugin-svelte": "^3.3.3",
+    "jsdom": "^26.0.0",
+    "pathe": "^2.0.3",
+    "publint": "^0.3.9",
+    "simple-git-hooks": "^2.12.1",
+    "start-server-and-test": "^2.0.11",
+    "svelte": "^5.25.3",
+    "svelte-check": "^4.1.5",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.28.0",
+    "vite": "^6.2.3",
+    "vite-plugin-dts": "^4.5.3",
+    "vitest": "^3.0.9"
   },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "json"
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
     ],
-    "transform": {
-      "^.+\\.js$": "babel-jest"
+    "rules": {
+      "body-max-line-length": [
+        2,
+        "always",
+        200
+      ],
+      "footer-max-line-length": [
+        2,
+        "always",
+        "Infinity"
+      ]
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storyblok/storyblok-svelte"
-  },
-  "keywords": [
-    "svelte",
-    "storyblok"
-  ],
-  "author": "Josefine Schaefer",
-  "bugs": {
-    "url": "https://github.com/storyblok/storyblok-svelte/issues"
-  },
-  "homepage": "https://github.com/storyblok/storyblok-svelte",
   "release": {
     "branches": [
-      {
-        "name": "v2",
-        "range": "2.x",
-        "channel": "v2"
-      },
-      {
-        "name": "main"
-      }
+      "main"
     ]
   },
   "publishConfig": {
     "access": "public"
+  },
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint",
+    "pre-push": "pnpm commitlint --last --verbose"
   }
 }