refactor: adopt svelte 5 for subsequent development

package.json

@@ -25,16 +25,16 @@
 		"@types/webextension-polyfill": "^0.10.7",
 		"autoprefixer": "^10.4.19",
 		"cm-show-invisibles": "^3.1.0",
-		"codemirror": "^5.65.15",
-		"eslint": "^9.0.0",
+		"codemirror": "^5.65.16",
+		"eslint": "^9.2.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.37.0",
+		"eslint-plugin-svelte": "^2.38.0",
 		"prettier": "3.0.3",
-		"prettier-plugin-svelte": "3.0.3",
-		"stylelint": "^16.3.1",
+		"prettier-plugin-svelte": "3.2.3",
+		"stylelint": "^16.5.0",
 		"stylelint-config-html": "^1.1.0",
 		"stylelint-config-standard": "^36.0.0",
-		"svelte": "^4.2.14",
-		"vite": "^5.2.8"
+		"svelte": "^5.0.0-next.123",
+		"vite": "^5.2.11"
 	}
 }

scripts/utils.js

@@ -1,3 +1,18 @@
+/**
+ * node:process
+ * @see {@link https://nodejs.org/api/process.html#processchdirdirectory chdir}
+ * @see {@link https://nodejs.org/api/process.html#processcwd cwd}
+ * node:url
+ * @see {@link https://nodejs.org/api/url.html#urlfileurltopathurl fileURLToPath}
+ * node:fs/promises
+ * @see {@link https://nodejs.org/api/fs.html#fspromisescopyfilesrc-dest-mode copyFile}
+ * @see {@link https://nodejs.org/api/fs.html#fspromisesmkdirpath-options mkdir}
+ * @see {@link https://nodejs.org/api/fs.html#fspromisesreaddirpath-options readdir}
+ * @see {@link https://nodejs.org/api/fs.html#fspromisesreadfilepath-options readFile}
+ * @see {@link https://nodejs.org/api/fs.html#fspromisesrealpathpath-options realpath}
+ * @see {@link https://nodejs.org/api/fs.html#fspromisesrmpath-options rm}
+ * @see {@link https://nodejs.org/api/fs.html#fspromisesstatpath-options stat}
+ */
 import { chdir, cwd } from "node:process";
 import { fileURLToPath } from "node:url";
 import {
@@ -16,6 +31,7 @@ export const SAFARI_EXT_RESOURCES = "xcode/Ext-Safari/Resources";
 
 /**
  * If not then cd to root dir and returns the path
+ * @see {@link https://nodejs.org/api/esm.html#importmetaurl}
  * @returns {Promise<string>} project root directory
  */
 export async function rootDir() {
@@ -29,6 +45,7 @@ export async function rootDir() {
 
 /**
  * Empty the build directory safely
+ * @see {@link https://nodejs.org/api/errors.html#common-system-errors ENOENT}
  * @param {string} dir
  * @returns {Promise<boolean>}
  */
@@ -47,6 +64,10 @@ export async function emptyBuildDir(dir) {
 		}
 		return true;
 	} catch (error) {
+		if (error.code === "ENOENT") {
+			console.info("[SKIPPED] emptyBuildDir:", error.message);
+			return true;
+		}
 		console.error("emptyBuildDir:", error);
 		return false;
 	}

src/app/main.js

@@ -1,10 +1,9 @@
 import "./reset.css";
 import "./variables.css";
 import "./app.css";
+import { mount } from "svelte";
 import App from "./App.svelte";
 
-const app = new App({
-	target: document.getElementById("app"),
-});
+const app = mount(App, { target: document.getElementById("app") });
 
 export default app;

src/dev/main.js

@@ -1,8 +1,7 @@
 import "./app.css";
+import { mount } from "svelte";
 import App from "./App.svelte";
 
-const app = new App({
-	target: document.getElementById("app"),
-});
+const app = mount(App, { target: document.getElementById("app") });
 
 export default app;

src/ext/action-popup/App.svelte

@@ -660,7 +660,7 @@
 		align-items: center;
 		border-bottom: 1px solid var(--color-black);
 		display: flex;
-		padding: 0.5rem 1rem calc(0.5rem - 1px) 1rem;
+		padding: 0.5rem 1rem calc(0.5rem - 1px);
 	}
 
 	.header .buttons :global(button:nth-of-type(2)) {

src/ext/action-popup/Components/View.svelte

@@ -54,7 +54,7 @@
 		border-bottom: 1px solid var(--color-black);
 		flex-shrink: 0;
 		font-weight: 600;
-		padding: 0.5rem 1rem calc(0.5rem - 1px) 1rem;
+		padding: 0.5rem 1rem calc(0.5rem - 1px);
 		position: sticky;
 		top: 0;
 		z-index: 5;

src/ext/action-popup/main.js

@@ -1,6 +1,7 @@
 import "../shared/reset.css";
 import "../shared/variables.css";
 import "./app.css";
+import { mount } from "svelte";
 import App from "./App.svelte";
 
 // vite feat that only import in dev mode
@@ -37,8 +38,6 @@ body:before {
 	}
 }
 
-const app = new App({
-	target: document.getElementById("app"),
-});
+const app = mount(App, { target: document.getElementById("app") });
 
 export default app;

src/ext/extension-page/Components/Editor/CodeMirror.svelte

@@ -26,7 +26,6 @@
 </script>
 
 <script>
-	import { createEventDispatcher } from "svelte";
 	import CodeMirror from "../../codemirror.js";
 	import "../../codemirror.css";
 	import { settings, state } from "../../store.js";
@@ -38,10 +37,10 @@
 	} from "../../../shared/utils.js";
 
 	// the function to be called when save keybind is pressed
-	export let saveHandler = () => {};
+	export let saveHandler;
 
-	// message dispatcher
-	const dispatch = createEventDispatcher();
+	// message handler
+	export let handleMessage;
 
 	// indicates whether the codemirror instance has completed initialization
 	let initialized = false;
@@ -223,11 +222,11 @@
 		// below is all other input actions
 		if (inputAction !== "setValue") {
 			sessionCode = cm.getValue();
-			if (cmChanged()) dispatch("message", { name: "enableButtons" });
+			if (cmChanged()) handleMessage({ name: "enableButtons" });
 		}
 		if ((inputAction === "undo" || inputAction === "redo") && !cmChanged()) {
 			// back to the point where session and saved code are equal, and buttons enabled
-			dispatch("message", { name: "disableButtons" });
+			handleMessage({ name: "disableButtons" });
 		}
 	}
 
@@ -403,7 +402,7 @@
 			instance.setValue(savedCode);
 			sessionCode = null;
 			instance.focus();
-			dispatch("message", { name: "disableButtons" });
+			handleMessage({ name: "disableButtons" });
 		}
 	}
 

src/ext/extension-page/Components/Editor/Editor.svelte

@@ -149,7 +149,7 @@
 	}
 
 	function handleMessage(e) {
-		const n = e.detail.name;
+		const n = e.name;
 		// temp files keep save button enabled until save
 		if (n === "enableButtons" && !temp) {
 			toggleButtons(false, false);
@@ -215,11 +215,7 @@
 		</div>
 	</div>
 	<div class="editor__code">
-		<CodeMirror
-			bind:this={codemirror}
-			on:message={handleMessage}
-			saveHandler={save}
-		/>
+		<CodeMirror bind:this={codemirror} {handleMessage} saveHandler={save} />
 	</div>
 	<div class="editor__footer">
 		<button on:click={discard} disabled={disabled || discardDisabled}>

src/ext/extension-page/Components/ModalWrapper.svelte

@@ -35,8 +35,8 @@
 	out:fade={{ duration: 150, delay: 75 }}
 >
 	<!-- This is just an auxiliary close method, no need to consider a11y -->
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="mask" on:click|self={closeHandler}></div>
 	<div
 		class="modal"

src/ext/extension-page/Components/Settings.svelte

@@ -528,7 +528,7 @@
 		font: var(--text-default);
 		font-weight: 500;
 		letter-spacing: var(--letter-spacing-default);
-		padding: calc(1rem - 2px) 1rem 1rem 1rem;
+		padding: calc(1rem - 2px) 1rem 1rem;
 	}
 
 	.section_header .name {

src/ext/extension-page/main.js

@@ -1,6 +1,7 @@
 import "../shared/reset.css";
 import "../shared/variables.css";
 import "./app.css";
+import { mount } from "svelte";
 import App from "./App.svelte";
 import Appios from "./Appios.svelte";
 
@@ -44,20 +45,16 @@ if (import.meta.env.MODE === "development") {
 	const platform = await browser.runtime.getPlatformInfo();
 	// @ts-ignore -- incomplete polyfill types
 	if (platform.os === "ios") {
-		app = new Appios({ target });
+		app = mount(Appios, { target });
 	} else {
-		app = new App({ target });
+		app = mount(App, { target });
 	}
 } else {
 	if (import.meta.env.SAFARI_PLATFORM === "ios") {
-		app = new Appios({ target });
+		app = mount(Appios, { target });
 	} else {
-		app = new App({ target });
+		app = mount(App, { target });
 	}
 }
 
-// const app = new App({
-// 	target: document.getElementById("app"),
-// });
-
 export default app;