From 34c0cea03b1dc7f6ba5b5f62e3efe14dfdbf5e29 Mon Sep 17 00:00:00 2001 From: Colin Mitchell Date: Mon, 23 Dec 2024 18:17:24 -0500 Subject: [PATCH] Update to svelte 5 --- eslint.config.mjs | 4 + package-lock.json | 153 ++++++++---------- package.json | 6 +- src/renderer/AboutScreen.svelte | 19 ++- src/renderer/EditorScreen.svelte | 65 +++++--- src/renderer/NewScreensaverScreen.svelte | 14 +- src/renderer/PrefsScreen.svelte | 51 +++--- src/renderer/SettingsScreen.svelte | 18 +-- src/renderer/components/FolderChooser.svelte | 6 +- src/renderer/components/SaverForm.svelte | 2 +- src/renderer/components/SaverList.svelte | 11 +- .../components/SaverOptionInput.svelte | 22 +-- src/renderer/components/SaverOptions.svelte | 10 +- src/renderer/components/SaverSummary.svelte | 8 +- src/renderer/main.js | 4 +- test/ui/editor.js | 18 +-- 16 files changed, 198 insertions(+), 213 deletions(-) diff --git a/eslint.config.mjs b/eslint.config.mjs index cf332f2f..a920fe62 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -34,4 +34,8 @@ export default [...compat.extends( }, rules: {}, + ignores: [ + "output/*", + "data/*" + ] }]; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 9ee2c728..55667100 100644 --- a/package-lock.json +++ b/package-lock.json @@ -53,7 +53,7 @@ "eslint-plugin-mocha": "^10.4.3", "eslint-plugin-n": "^17.9.0", "eslint-plugin-promise": "^7.1.0", - "eslint-plugin-svelte": "^2.42.0", + "eslint-plugin-svelte": "^2.46.1", "eslint-webpack-plugin": "^4.2.0", "globals": "^15.8.0", "html-webpack-plugin": "^5.6.0", @@ -73,8 +73,8 @@ "sass-loader": "^16.0.2", "sinon": "^19.0.2", "style-loader": "^4.0.0", - "svelte": "^4.2.19", - "svelte-eslint-parser": "^0.41.1", + "svelte": "^5.15.0", + "svelte-eslint-parser": "^0.42.0", "svelte-loader": "^3.2.3", "tmp": "^0.2.3", "url-loader": "^4.1.0", @@ -5213,6 +5213,15 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/acorn-typescript": { + "version": "1.4.13", + "resolved": "https://registry.npmjs.org/acorn-typescript/-/acorn-typescript-1.4.13.tgz", + "integrity": "sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==", + "dev": true, + "peerDependencies": { + "acorn": ">=8.9.0" + } + }, "node_modules/agent-base": { "version": "6.0.2", "dev": true, @@ -6662,19 +6671,6 @@ "dev": true, "license": "MIT" }, - "node_modules/code-red": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz", - "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==", - "dev": true, - "dependencies": { - "@jridgewell/sourcemap-codec": "^1.4.15", - "@types/estree": "^1.0.1", - "acorn": "^8.10.0", - "estree-walker": "^3.0.3", - "periscopic": "^3.1.0" - } - }, "node_modules/color-convert": { "version": "1.9.3", "dev": true, @@ -7206,19 +7202,6 @@ "url": "https://github.com/sponsors/fb55" } }, - "node_modules/css-tree": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", - "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", - "dev": true, - "dependencies": { - "mdn-data": "2.0.30", - "source-map-js": "^1.0.1" - }, - "engines": { - "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0" - } - }, "node_modules/css-what": { "version": "6.1.0", "dev": true, @@ -8473,21 +8456,22 @@ } }, "node_modules/eslint-plugin-svelte": { - "version": "2.42.0", + "version": "2.46.1", + "resolved": "https://registry.npmjs.org/eslint-plugin-svelte/-/eslint-plugin-svelte-2.46.1.tgz", + "integrity": "sha512-7xYr2o4NID/f9OEYMqxsEQsCsj4KaMy4q5sANaKkAb6/QeCjYFxRmDm2S3YC3A3pl1kyPZ/syOx/i7LcWYSbIw==", "dev": true, - "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@jridgewell/sourcemap-codec": "^1.4.15", "eslint-compat-utils": "^0.5.1", "esutils": "^2.0.3", - "known-css-properties": "^0.34.0", + "known-css-properties": "^0.35.0", "postcss": "^8.4.38", "postcss-load-config": "^3.1.4", "postcss-safe-parser": "^6.0.0", "postcss-selector-parser": "^6.1.0", "semver": "^7.6.2", - "svelte-eslint-parser": "^0.40.0" + "svelte-eslint-parser": "^0.43.0" }, "engines": { "node": "^14.17.0 || >=16.0.0" @@ -8497,7 +8481,7 @@ }, "peerDependencies": { "eslint": "^7.0.0 || ^8.0.0-0 || ^9.0.0-0", - "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.181" + "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0" }, "peerDependenciesMeta": { "svelte": { @@ -8557,9 +8541,9 @@ } }, "node_modules/eslint-plugin-svelte/node_modules/svelte-eslint-parser": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.40.0.tgz", - "integrity": "sha512-M+v1HhC5T1WKYVxWexUCS4o6oIBS88XKzOZuhl2ew+eGxol7eC21e+VE8TC4rXJ3iT3iXT0qlZsZcpKjVo5/zQ==", + "version": "0.43.0", + "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.43.0.tgz", + "integrity": "sha512-GpU52uPKKcVnh8tKN5P4UZpJ/fUDndmq7wfsvoVXsyP+aY0anol7Yqo01fyrlaWGMFfm4av5DyrjlaXdLRJvGA==", "dev": true, "dependencies": { "eslint-scope": "^7.2.2", @@ -8575,7 +8559,7 @@ "url": "https://github.com/sponsors/ota-meshi" }, "peerDependencies": { - "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0-next.181" + "svelte": "^3.37.0 || ^4.0.0 || ^5.0.0" }, "peerDependenciesMeta": { "svelte": { @@ -8832,6 +8816,12 @@ "node": ">=8" } }, + "node_modules/esm-env": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.1.tgz", + "integrity": "sha512-U9JedYYjCnadUlXk7e1Kr+aENQhtUaoaV9+gZm1T8LC/YBAPJx3NSPIAurFOC0U5vrdSevnUJS2/wUVxGwPhng==", + "dev": true + }, "node_modules/espree": { "version": "9.6.1", "dev": true, @@ -8890,6 +8880,15 @@ "node": ">=4.0" } }, + "node_modules/esrap": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.3.2.tgz", + "integrity": "sha512-C4PXusxYhFT98GjLSmb20k9PREuUdporer50dhzGuJu9IJXktbMddVCMLAERl5dAHyAi73GWWCE4FVHGP1794g==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15" + } + }, "node_modules/esrecurse": { "version": "4.3.0", "dev": true, @@ -8917,15 +8916,6 @@ "node": ">=4.0" } }, - "node_modules/estree-walker": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", - "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", - "dev": true, - "dependencies": { - "@types/estree": "^1.0.0" - } - }, "node_modules/esutils": { "version": "2.0.3", "dev": true, @@ -11105,9 +11095,10 @@ } }, "node_modules/known-css-properties": { - "version": "0.34.0", - "dev": true, - "license": "MIT" + "version": "0.35.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.35.0.tgz", + "integrity": "sha512-a/RAk2BfKk+WFGhhOCAYqSiFLc34k8Mt/6NWRI4joER0EYUzXIcFivjjnoD3+XU1DggLn/tZc3DOAgke7l8a4A==", + "dev": true }, "node_modules/launch-editor": { "version": "2.8.0", @@ -11438,12 +11429,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/mdn-data": { - "version": "2.0.30", - "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", - "dev": true - }, "node_modules/media-typer": { "version": "0.3.0", "dev": true, @@ -12809,17 +12794,6 @@ "version": "1.2.0", "license": "MIT" }, - "node_modules/periscopic": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", - "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==", - "dev": true, - "dependencies": { - "@types/estree": "^1.0.0", - "estree-walker": "^3.0.0", - "is-reference": "^3.0.0" - } - }, "node_modules/pg-int8": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/pg-int8/-/pg-int8-1.0.1.tgz", @@ -14780,28 +14754,27 @@ } }, "node_modules/svelte": { - "version": "4.2.19", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.19.tgz", - "integrity": "sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==", + "version": "5.15.0", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.15.0.tgz", + "integrity": "sha512-YWl8rAd4hSjERLtLvP6h2pflGtmrJwv+L12BgrOtHYJCpvLS9WKp/YNAdyolw3FymXtcYZqhSWvWlu5O1X7tgQ==", "dev": true, "dependencies": { - "@ampproject/remapping": "^2.2.1", - "@jridgewell/sourcemap-codec": "^1.4.15", - "@jridgewell/trace-mapping": "^0.3.18", - "@types/estree": "^1.0.1", - "acorn": "^8.9.0", - "aria-query": "^5.3.0", - "axobject-query": "^4.0.0", - "code-red": "^1.0.3", - "css-tree": "^2.3.1", - "estree-walker": "^3.0.3", - "is-reference": "^3.0.1", + "@ampproject/remapping": "^2.3.0", + "@jridgewell/sourcemap-codec": "^1.5.0", + "@types/estree": "^1.0.5", + "acorn": "^8.12.1", + "acorn-typescript": "^1.4.13", + "aria-query": "^5.3.1", + "axobject-query": "^4.1.0", + "esm-env": "^1.2.1", + "esrap": "^1.3.2", + "is-reference": "^3.0.3", "locate-character": "^3.0.0", - "magic-string": "^0.30.4", - "periscopic": "^3.1.0" + "magic-string": "^0.30.11", + "zimmerframe": "^1.1.2" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/svelte-dev-helper": { @@ -14810,9 +14783,9 @@ "license": "MIT" }, "node_modules/svelte-eslint-parser": { - "version": "0.41.1", - "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.41.1.tgz", - "integrity": "sha512-08ndI6zTghzI8SuJAFpvMbA/haPSGn3xz19pjre19yYMw8Nw/wQJ2PrZBI/L8ijGTgtkWCQQiLLy+Z1tfaCwNA==", + "version": "0.42.0", + "resolved": "https://registry.npmjs.org/svelte-eslint-parser/-/svelte-eslint-parser-0.42.0.tgz", + "integrity": "sha512-e7LyqFPTuF43ZYhKOf0Gq1lzP+G64iWVJXAIcwVxohGx5FFyqdUkw7DEXNjZ+Fm+TAA98zPmDqWvgD1OpyMi5A==", "dev": true, "dependencies": { "eslint-scope": "^7.2.2", @@ -16498,6 +16471,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/zimmerframe": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz", + "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==", + "dev": true + }, "node_modules/zip-stream": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz", diff --git a/package.json b/package.json index 8ef16338..76c3ce7a 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "eslint-plugin-mocha": "^10.4.3", "eslint-plugin-n": "^17.9.0", "eslint-plugin-promise": "^7.1.0", - "eslint-plugin-svelte": "^2.42.0", + "eslint-plugin-svelte": "^2.46.1", "eslint-webpack-plugin": "^4.2.0", "globals": "^15.8.0", "html-webpack-plugin": "^5.6.0", @@ -97,8 +97,8 @@ "sass-loader": "^16.0.2", "sinon": "^19.0.2", "style-loader": "^4.0.0", - "svelte": "^4.2.19", - "svelte-eslint-parser": "^0.41.1", + "svelte": "^5.15.0", + "svelte-eslint-parser": "^0.42.0", "svelte-loader": "^3.2.3", "tmp": "^0.2.3", "url-loader": "^4.1.0", diff --git a/src/renderer/AboutScreen.svelte b/src/renderer/AboutScreen.svelte index 7324fecc..66eabf6c 100644 --- a/src/renderer/AboutScreen.svelte +++ b/src/renderer/AboutScreen.svelte @@ -2,13 +2,14 @@

Before Dawn

// screensaver fun //

+ {#await loadData() then}

{globals.APP_VERSION}

- + {/await}

An open-source screensaver project.
learn more @@ -18,7 +19,7 @@ Having trouble? + onclick={open}> please let us know!

@@ -77,7 +78,7 @@ + onclick={open}> App icon Sun by Ale Estrada from the Noun Project @@ -88,7 +89,7 @@ Powered by Electron @@ -98,17 +99,15 @@
diff --git a/src/renderer/components/SaverOptions.svelte b/src/renderer/components/SaverOptions.svelte index b9e90f7f..19748da8 100644 --- a/src/renderer/components/SaverOptions.svelte +++ b/src/renderer/components/SaverOptions.svelte @@ -13,7 +13,7 @@ name="{option.name}" value="true" checked="{saver.settings[option.name] == true || saver.settings[option.name] === "true"}" - on:change={notifyPreviewChange} + onchange={notifyPreviewChange} > @@ -35,7 +35,7 @@ max="{option.max}" bind:value="{saver.settings[option.name]}" class="inputClass" - on:change={notifyPreviewChange} + onchange={notifyPreviewChange} > {option.description} @@ -48,7 +48,7 @@ name="{option.name}" bind:value="{saver.settings[option.name]}" class="inputClass" - on:change={notifyPreviewChange} + onchange={notifyPreviewChange} > {option.description} @@ -63,7 +63,7 @@ import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); - export let saver; + let { saver = $bindable() } = $props(); function notifyPreviewChange() { dispatch("optionsChanged", { diff --git a/src/renderer/components/SaverSummary.svelte b/src/renderer/components/SaverSummary.svelte index b9b287cf..bc69f498 100644 --- a/src/renderer/components/SaverSummary.svelte +++ b/src/renderer/components/SaverSummary.svelte @@ -2,21 +2,21 @@ {#if saver}

{saver.name} - {#if saver.aboutUrl && saver.aboutUrl !== ""}learn more{/if} + {#if saver.aboutUrl && saver.aboutUrl !== ""}learn more{/if}

{#if saver.editable}
@@ -37,7 +37,7 @@ const dispatch = createEventDispatcher(); - export let saver; + let { saver } = $props(); function open(event) { event.preventDefault(); diff --git a/src/renderer/main.js b/src/renderer/main.js index 1bd215fb..67f3e267 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -1,5 +1,7 @@ import "~/css/styles.scss"; +import { mount } from 'svelte'; + import PrefsScreen from "./PrefsScreen.svelte"; import SettingsScreen from "./SettingsScreen.svelte"; import AboutScreen from "./AboutScreen.svelte"; @@ -26,7 +28,7 @@ const actions = { const id = document.querySelector("body").dataset.id; const klass = actions[id]; -const app = new klass({ +const app = mount(klass, { target: document.getElementById("root"), // entry point in ../public/index.html }); diff --git a/test/ui/editor.js b/test/ui/editor.js index b4123791..7ee1a106 100644 --- a/test/ui/editor.js +++ b/test/ui/editor.js @@ -48,20 +48,20 @@ describe("Editor", function() { }); it("adds and removes options", async function() { - await window.fill(".saver-option-input [data-index='0'] [name='name']", "My Option"); - await window.fill(".saver-option-input [data-index='0'] [name='description']", "An Option I Guess?"); + await window.fill(".saver-option-input[data-index='0'] [name='name']", "My Option"); + await window.fill(".saver-option-input[data-index='0'] [name='description']", "An Option I Guess?"); await window.click("button.add-option"); - await window.fill(".saver-option-input [data-index='1'] [name='name']", "My Second Option"); - await window.fill(".saver-option-input [data-index='1'] [name='description']", "Another Option I Guess?"); + await window.fill(".saver-option-input[data-index='1'] [name='name']", "My Second Option"); + await window.fill(".saver-option-input[data-index='1'] [name='description']", "Another Option I Guess?"); - await window.selectOption(".saver-option-input [data-index='1'] select", {label: "yes/no"}); + await window.selectOption(".saver-option-input[data-index='1'] select", {label: "yes/no"}); await window.click("button.add-option"); - await window.fill(".saver-option-input [data-index='2'] [name='name']", "My Third Option"); - await window.fill(".saver-option-input [data-index='2'] [name='description']", "Here We Go Again"); + await window.fill(".saver-option-input[data-index='2'] [name='name']", "My Third Option"); + await window.fill(".saver-option-input[data-index='2'] [name='description']", "Here We Go Again"); - await window.selectOption(".saver-option-input [data-index='2'] select", {label: "slider"}); + await window.selectOption(".saver-option-input[data-index='2'] select", {label: "slider"}); await window.click("button.save"); @@ -84,7 +84,7 @@ describe("Editor", function() { assert.strictEqual("Here We Go Again", opt.description); assert.strictEqual("slider", opt.type); - await window.click(".saver-option-input [data-index='1'] button.remove-option"); + await window.click(".saver-option-input[data-index='1'] button.remove-option"); await window.click("button.save"); await helpers.sleep(100);