INT-3311: Support Svelte 5 (#92)

* INT-3311: Upgrade to support Svelte 5

* Update storybook

* Replace run() with $effect as it does not concern about SSR

* Resolve rollup warnings

* Add changelog entries and readme

* Update readme

* Reduce the number of reactive variables

* Update dependencies

* Resolve type checks

* Change how events are handled

* Add a story for event bindings

* Fix linting errors

* Move eslint parser to dev dependencies

* Improve type checking

Author: tiny-ben-tran

.storybook/main.ts

@@ -4,15 +4,15 @@ const config: StorybookConfig = {
   core: {
     disableTelemetry: true,
   },
+
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+
   framework: {
     name: '@storybook/svelte-vite',
     options: {},
   },
-  addons: ['@storybook/addon-essentials', '@storybook/addon-svelte-csf'],
-  docs: {
-    autodocs: 'tag',
-  },
+
+  addons: ['@storybook/addon-svelte-csf', '@storybook/addon-docs']
 };
 
 export default config;

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- `svelte` to peer dependency. #INT-3311
+
+#### Changed
+- Upgraded to support Svelte 5. #INT-3311
+
 ## 3.2.0 - 2025-07-31
 
 ### Changed

README.md

@@ -10,6 +10,15 @@ This package is a thin wrapper around [TinyMCE](https://github.com/tinymce/tinym
 * For the TinyMCE Svelte Technical Reference, see: [TinyMCE Documentation - TinyMCE Svelte Technical Reference](https://www.tiny.cloud/docs/tinymce/8/svelte-ref/).
 * For our quick demos, check out the TinyMCE Svelte [Storybook](https://tinymce.github.io/tinymce-svelte/).
 
+### Supported Versions
+
+|`tinymce-svelte`         |Svelte         |
+|---                      |---            |
+|4.x                      |>= 5.x         |
+|<= 3.x                   |<= 5.x  (*)    |
+
+- (*): Svelte 5 projects can use `tinymce-svelte` 3.x because Svelte 5 still supports the old Svelte 4 syntax.
+
 
 ### Issues
 

eslint.config.mjs

@@ -1,3 +1,6 @@
+// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
+import storybook from "eslint-plugin-storybook";
+
 // eslint.config.js
 import tinymceEslintPlugin from "@tinymce/eslint-plugin";
 import tseslint from '@typescript-eslint/eslint-plugin';
@@ -6,47 +9,44 @@ import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
 import svelteParser from 'svelte-eslint-parser';
 
-export default [
-  {
-    files: ['**/*.svelte'],
-    languageOptions: {
-      ecmaVersion: 2020,
-      sourceType: 'module',
-      parser: svelteParser,
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-      },
-      parserOptions: {
-        parser: tsparser,
-        extraFileExtensions: ['.svelte'],
-      },
-    },
-    plugins: {
-      svelte,
-      '@typescript-eslint': tseslint
-    },
-    rules: {
-      ...svelte.configs.recommended.rules,
-      eqeqeq: 'error',
+export default [{
+  files: ['**/*.svelte'],
+  languageOptions: {
+    ecmaVersion: 2022,
+    sourceType: 'module',
+    parser: svelteParser,
+    globals: {
+      ...globals.browser,
+      ...globals.node
     },
-  },
-  {
-    files: ['**/*.ts'],
-    languageOptions: {
+    parserOptions: {
       parser: tsparser,
-      parserOptions: {
-        project: './tsconfig.json',
-      },
-    },
-    plugins: {
-      '@typescript-eslint': tseslint,
-      "@tinymce": tinymceEslintPlugin
-    },
-    rules: {
-      '@tinymce/prefer-fun': 'off',
-      '@typescript-eslint/no-duplicate-imports': 'off',
-      '@typescript-eslint/no-parameter-properties': 'off',
+      extraFileExtensions: ['.svelte']
+    }
+  },
+  plugins: {
+    svelte,
+    '@typescript-eslint': tseslint
+  },
+  rules: {
+    ...svelte.configs.recommended.rules,
+    eqeqeq: 'error'
+  }
+}, {
+  files: ['**/*.ts'],
+  languageOptions: {
+    parser: tsparser,
+    parserOptions: {
+      project: './tsconfig.json'
     },
   },
-];
+  plugins: {
+    '@typescript-eslint': tseslint,
+    "@tinymce": tinymceEslintPlugin
+  },
+  rules: {
+    '@tinymce/prefer-fun': 'off',
+    '@typescript-eslint/no-duplicate-imports': 'off',
+    '@typescript-eslint/no-parameter-properties': 'off'
+  }
+}, ...storybook.configs["flat/recommended"]];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinymce/tinymce-svelte",
-  "version": "3.2.1-rc",
+  "version": "4.0.0-rc",
   "description": "TinyMCE Svelte Component",
   "private": false,
   "publishConfig": {
@@ -46,6 +46,7 @@
     "LICENSE.txt"
   ],
   "peerDependencies": {
+    "svelte": "^5.0.0",
     "tinymce": "^8.0.0 || ^7.0.0 || ^6.0.0 || ^5.0.0"
   },
   "peerDependenciesMeta": {
@@ -54,42 +55,39 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.28.4",
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-typescript": "^8.5.0",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-svelte-csf": "^4.2.0",
-    "@storybook/svelte": "^8.6.14",
-    "@storybook/svelte-vite": "^8.6.14",
-    "@sveltejs/vite-plugin-svelte": "^3.1.2",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-svelte-csf": "^5.0.11",
+    "@storybook/svelte": "^10.2.17",
+    "@storybook/svelte-vite": "^10.2.17",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "3.0.0",
-    "@tsconfig/svelte": "^5.0.5",
-    "@typescript-eslint/eslint-plugin": "^8.46.2",
+    "@tsconfig/svelte": "^5.0.8",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
     "@typescript-eslint/parser": "^8.46.2",
-    "babel-loader": "^8.4.1",
     "eslint": "^9.38.0",
-    "eslint-plugin-svelte": "^3.12.5",
+    "eslint-plugin-storybook": "10.2.17",
+    "eslint-plugin-svelte": "^3.15.2",
     "gh-pages": "^6.3.0",
-    "react": "^18",
-    "react-dom": "^18",
     "rollup": "^2.79.2",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-execute": "^1.1.1",
     "rollup-plugin-livereload": "^2.0.5",
     "rollup-plugin-svelte": "^7.2.3",
     "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^8.6.14",
-    "svelte": "^4.2.20",
-    "svelte-check": "^3.8.6",
+    "storybook": "^10.2.17",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "svelte-eslint-parser": "^1.6.0",
     "svelte-loader": "^3.2.4",
-    "svelte-preprocess": "^5.1.4",
+    "svelte-preprocess": "^6.0.0",
     "tinymce": "^8.1.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
-    "vite": "^5.4.21",
-    "webpack": "^5.102.1"
+    "vite": "^5.4.21"
   },
   "resolutions": {
     "browserslist": "^4.16.5",

rollup.config.js

@@ -3,7 +3,7 @@ import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
-import sveltePreprocess from 'svelte-preprocess';
+import { sveltePreprocess } from 'svelte-preprocess';
 import typescript from '@rollup/plugin-typescript';
 import execute from "rollup-plugin-execute";
 import pkg from './package.json';
@@ -37,20 +37,25 @@ export default {
 	// input: 'src/main.ts',
   input: 'src/main/index.ts',
   output: [
-    { file: pkg.module, format: 'es', sourcemap: true },
+    { file: pkg.module, format: 'es', sourcemap: !production },
     { 
       file: pkg.main,
       format: 'umd',
       name,
-      sourcemap: true,
+      sourcemap: !production,
       plugins: [
         execute([
           'tsc --outDir ./dist --declaration',
           'node scripts/preprocess.js'
         ])
       ]
     },
-    { file: pkg.main.replace('.js','.min.js'), format: 'iife', name, plugins: [terser()] }
+    {
+      file: pkg.main.replace('.js','.min.js'),
+      format: 'iife',
+      name,
+      plugins: [terser()]
+    }
   ],
 	// output: {
 	// 	sourcemap: true,
@@ -89,8 +94,10 @@ export default {
 
 		// If we're building for production (npm run build
 		// instead of npm run dev), minify
-		// production && terser()
+		// production && terser(),
 	],
+  // Mark node:async_hoooks as external because it is a server-side feature in the Node.js runtime
+  external: ['node:async_hooks'],
 	watch: {
 		clearScreen: false
 	}

scripts/preprocess.js

@@ -3,7 +3,7 @@ const fs = require("fs-extra");
 const glob = require("glob");
 const path = require("path");
 const svelte = require("svelte/compiler");
-const sveltePreprocess = require("svelte-preprocess");
+const { sveltePreprocess } = require("svelte-preprocess");
 
 const basePath = path.resolve(__dirname, "../");
 const srcPath = path.resolve(basePath, "src/main");