Refactor/update2svelte5

.github/ISSUE_TEMPLATE/config.yml

@@ -1 +1 @@
-blank_issues_enabled: false
+blank_issues_enabled: false

README.md

@@ -30,9 +30,11 @@
 </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!
 
 ## 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.
 
 ## Compatibility
@@ -226,8 +228,9 @@ You can easily render rich text by using the `renderRichText` function that come
 ```html
 <script>
   import { renderRichText } from "@storyblok/svelte";
+
   export let blok;
-  $: articleHTML = renderRichText(blok.article);
+  articleHTML = renderRichText(blok.article);
 </script>
 
 <div class="prose">{@html articleHTML}</div>

eslint.config.js

@@ -0,0 +1,42 @@
+import prettier from "eslint-config-prettier";
+import js from "@eslint/js";
+import { includeIgnoreFile } from "@eslint/compat";
+import svelte from "eslint-plugin-svelte";
+import globals from "globals";
+import { fileURLToPath } from "node:url";
+import ts from "typescript-eslint";
+const gitignorePath = fileURLToPath(new URL("./.gitignore", import.meta.url));
+
+export default ts.config(
+  includeIgnoreFile(gitignorePath),
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...svelte.configs["flat/recommended"],
+  prettier,
+  ...svelte.configs["flat/prettier"],
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+    },
+  },
+  {
+    files: ["**/*.svelte"],
+
+    languageOptions: {
+      parserOptions: {
+        parser: ts.parser,
+      },
+    },
+  },
+  {
+    ignores: ["lib/__tests__/*"],
+  },
+  {
+    rules: {
+      "svelte/no-at-html-tags": "off",
+    },
+  }
+);

lib/Testing.svelte

@@ -8,10 +8,12 @@
     StoryblokComponent,
   } from "./pkg";
 
-  export let accessToken;
-  export let bridge;
-  export let components;
-  export let blok;
+  let {
+    accessToken,
+    bridge,
+    components,
+    blok
+  } = $props();
 
   storyblokInit({
     accessToken,

lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storyblok/svelte",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "type": "module",
   "description": "Storyblok SDK to connect Storyblok with Svelte",
   "main": "./dist/index.js",
@@ -22,27 +22,27 @@
   "scripts": {
     "dev": "svelte-package -i pkg --watch",
     "build": "svelte-package -i pkg",
-    "test": "npm run test:unit && npm run test:e2e",
+    "test": "npm run test:unit",
     "test:unit": "jest __tests__",
     "prepublishOnly": "npm run build && cp ../README.md ."
   },
   "dependencies": {
-    "@storyblok/js": "^3.1.1"
+    "@storyblok/js": "^3.1.9"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "@sveltejs/package": "^2.3.4",
+    "@sveltejs/package": "^2.3.7",
     "@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",
+    "svelte": "^5.0.0",
+    "svelte-preprocess": "^6.0.0",
     "typescript": "^5.5.4",
-    "vite": "^5.4.2"
+    "vite": "^5.4.4"
   },
   "peerDependencies": {
-    "svelte": "^3.0.0 || ^4.0.0"
+    "svelte": "^5.0.0"
   },
   "eslintConfig": {
     "env": {
@@ -67,6 +67,9 @@
     "storyblok"
   ],
   "author": "Josefine Schaefer",
+  "contributors": [
+    "Amar Tupo<[email protected]>"
+  ],
   "bugs": {
     "url": "https://github.com/storyblok/storyblok-svelte/issues"
   },

lib/pkg/StoryblokComponent.svelte

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

lib/pkg/index.ts

@@ -68,7 +68,7 @@ export const getComponent = (componentName: string) => {
 storyblokInit({
     accessToken: "<your-token>",
     components: {
-      "teaser": Teaser
+      "${componentName.toLowerCase()}": ${componentName}
     }
 })
 `);

lib/pkg/types.ts

@@ -1,9 +1,8 @@
 import type { SbSDKOptions } from "@storyblok/js";
-import type { SvelteComponent } from "svelte";
+import type { Component } from "svelte";
 
 export interface SbSvelteComponentsMap {
-  // @ts-ignore
-  [name: string]: typeof SvelteComponent<any>;
+  [name: string]: Component;
 }
 
 export interface SbSvelteSDKOptions extends SbSDKOptions {