INT-3242: Update to Svelte4

.eslintrc.js

@@ -1,18 +1,19 @@
 module.exports = {
-  parser: '@typescript-eslint/parser',
-  plugins: ['svelte3', '@typescript-eslint'],
+
   env: {
     browser: true,
     node: true
   },
   overrides: [
     {
       files: ['*.svelte'],
-      processor: 'svelte3/svelte3',
+      parser: 'svelte-eslint-parser',
       extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:@typescript-eslint/recommended-requiring-type-checking'],
       parserOptions: {
-        project: 'tsconfig.json',
-        sourceType: 'module'
+        project: './tsconfig.json',
+        sourceType: 'module',
+        parser: '@typescript-eslint/parser',
+        extraFileExtensions: ['.svelte']
       },
       rules: {
         "eqeqeq": "error"
@@ -26,12 +27,10 @@ module.exports = {
         sourceType: "module"
       },
       rules: {
-        "@tinymce/prefer-fun": "off"
+        "@tinymce/prefer-fun": "off",
+        "@typescript-eslint/no-duplicate-imports": "off",
+        "@typescript-eslint/no-parameter-properties": "off"
       }
     }
-  ],
-  settings: {
-    'svelte3/typescript': () => require('typescript'),
-    'svelte3/typescript': true
-  }
+  ]
 }

.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   "core": {
     "builder": "webpack5"
@@ -13,5 +15,9 @@ module.exports = {
   ],
   "svelteOptions": {
     "preprocess": require("svelte-preprocess")()
+  },
+  'webpackFinal': (config) => {
+    config.resolve.alias.svelte = path.resolve('node_modules', 'svelte/src/runtime');
+    return config;
   }
 }

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+- Upgrade to Svelte 4
+
 ## 1.0.1 - 2023-03-17
 
 ### Fixed

package.json

@@ -1,13 +1,13 @@
 {
   "name": "@tinymce/tinymce-svelte",
-  "version": "1.0.2-rc",
+  "version": "2.0.0-rc",
   "description": "TinyMCE Svelte Component",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "repository": {
-    "url": "https://github.com/tinymce/tinymce-svelte"
+    "url": "git+https://github.com/tinymce/tinymce-svelte.git"
   },
   "main": "dist/index.umd.js",
   "module": "dist/index.mjs",
@@ -55,22 +55,23 @@
     "@tinymce/beehive-flow": "^0.19.0",
     "@tinymce/eslint-plugin": "^1.9.2",
     "@tsconfig/svelte": "^2.0.0",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
+    "@typescript-eslint/eslint-plugin": "^6.9.0",
+    "@typescript-eslint/parser": "^6.9.0",
     "babel-loader": "^8.2.2",
     "eslint": "^7.32.0",
-    "eslint-plugin-svelte3": "^3.2.0",
+    "eslint-plugin-svelte": "^2.34.0",
     "rollup": "^2.56.2",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-livereload": "^2.0.0",
-    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-svelte": "^7.1.5",
     "rollup-plugin-terser": "^7.0.0",
-    "svelte": "^3.42.1",
-    "svelte-check": "^2.2.4",
-    "svelte-loader": "^3.1.2",
-    "svelte-preprocess": "^4.0.0",
+    "svelte": "^4.0.0",
+    "svelte-check": "^3.4.3",
+    "svelte-loader": "^3.1.8",
+    "svelte-preprocess": "^5.0.3",
+    "tinymce": "^6.7.2",
     "tslib": "^2.3.1",
-    "typescript": "^4.0.0",
+    "typescript": "^5.0.0",
     "webpack": "^5.76.2"
   },
   "resolutions": {

src/main/component/Editor.svelte

@@ -1,16 +1,24 @@
 <script lang="ts" context="module">
+  declare let global: { tinymce: TinyMCE }
+  declare let window: Window & { tinymce: TinyMCE }
+
   const uuid = (prefix: string): string => {
     return prefix + '_' + Math.floor(Math.random() * 1000000000) + String(Date.now());
   };
 
   const createScriptLoader = () => {
-    let state = {
+    let state: {
+      listeners: Array<() => void>,
+      scriptId: string,
+      scriptLoaded: boolean,
+      injected: boolean
+    } = {
       listeners: [],
       scriptId: uuid('tiny-script'),
       scriptLoaded: false,
       injected: false
     };
- 
+
     const injectScript = (scriptId: string, doc: Document, url: string, cb: () => void) => {
       state.injected = true;
       const script = doc.createElement('script');
@@ -44,24 +52,24 @@
 </script>
 
 <script lang="ts">
-  import { onMount, createEventDispatcher, onDestroy } from 'svelte';
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
+  import type { RawEditorOptions, TinyMCE, Editor as TinyMCEEditor } from 'tinymce';
   import { bindHandlers } from './Utils';
   export let id: string = uuid('tinymce-svelte'); // default values
   export let inline: boolean | undefined = undefined;
   export let disabled: boolean = false;
   export let apiKey: string = 'no-api-key';
   export let channel: string = '6';
   export let scriptSrc: string = undefined;
-  export let conf: any = {};
+  export let conf: RawEditorOptions = {};
   export let modelEvents: string = 'change input undo redo';
   export let value: string = '';
   export let text: string = '';
   export let cssClass: string = 'tinymce-wrapper';
 
   let container: HTMLElement;
   let element: HTMLElement;
-  let editorRef: any;
-
+  let editorRef: TinyMCEEditor | null;
   let lastVal = value;
   let disablindCache = disabled;
 
@@ -77,13 +85,16 @@
       if (typeof editorRef.mode?.set === 'function') {
         editorRef.mode.set(disabled ? 'readonly' : 'design');
       } else {
-        editorRef.setMode(disabled ? 'readonly' : 'design');
+        interface TinyMCEEditor4 extends TinyMCEEditor {
+          setMode: (input: string) => void
+        }
+        (editorRef as TinyMCEEditor4).setMode(disabled ? 'readonly' : 'design');
       }
     }
   }
 
-  const getTinymce = () => {
-    const getSink = () => {
+  const getTinymce = (): TinyMCE | null => {
+    const getSink = (): { tinymce: TinyMCE } => {
       return typeof window !== 'undefined' ? window : global;
     };
     const sink = getSink();
@@ -92,12 +103,12 @@
 
   const init = () => {
     //
-    const finalInit = {
+    const finalInit: RawEditorOptions = {
       ...conf,
       target: element,
       inline: inline !== undefined ? inline : conf.inline !== undefined ? conf.inline : false,
       readonly: disabled,
-      setup: (editor: any) => {
+      setup: (editor: TinyMCEEditor) => {
         editorRef = editor;
         editor.on('init', () => {
           editor.setContent(value);
@@ -117,7 +128,7 @@
       },
     };
     element.style.visibility = '';
-    getTinymce().init(finalInit);
+    void getTinymce().init(finalInit);
   };
 
   onMount(() => {

tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "@tsconfig/svelte/tsconfig.json",
   "compilerOptions": {
     "sourceMap": true,
-    "types": ["svelte"]
+    "types": ["svelte"],
+    "ignoreDeprecations": "5.0"
   },
 
   "include": ["src/**/*"],