From 1640eb32a86aba6a49323f6bee6503c4312808ab Mon Sep 17 00:00:00 2001 From: Danielo Rodriguez Date: Mon, 8 Jul 2024 11:08:10 +0200 Subject: [PATCH 01/10] WIP: migrating to svelte 5 --- package-lock.json | 144 ++++++++------------ package.json | 2 +- src/FormModal.ts | 4 +- src/views/EditFormView.ts | 67 ++++----- src/views/FormBuilder.svelte | 6 +- src/views/FormImport.svelte | 2 +- src/views/FormImportView.ts | 6 +- src/views/ManageFormsView.ts | 4 +- src/views/SvelteModal.ts | 4 +- src/views/TemplateBuilderModal.ts | 4 +- src/views/TemplateBuilderView.ts | 4 +- src/views/components/Label.svelte | 6 +- src/views/components/TemplateBuilder.svelte | 2 +- 13 files changed, 120 insertions(+), 135 deletions(-) diff --git a/package-lock.json b/package-lock.json index 03130205..65515103 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,7 +32,7 @@ "obsidian": "^1.4.11", "prettier": "^3.0.3", "prettier-plugin-svelte": "^3.0.3", - "svelte": "^4.2.0", + "svelte": "^5.0.0-next.175", "svelte-check": "^3.8.4", "svelte-preprocess": "^5.0.4", "ts-jest": "^29.1.5", @@ -1941,9 +1941,9 @@ } }, "node_modules/@types/estree": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz", - "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==", + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz", + "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==", "dev": true }, "node_modules/@types/graceful-fs": { @@ -2358,9 +2358,9 @@ "dev": true }, "node_modules/acorn": { - "version": "8.11.2", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", - "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==", + "version": "8.12.1", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz", + "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, "bin": { "acorn": "bin/acorn" @@ -2378,6 +2378,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/acorn-walk": { "version": "8.2.0", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz", @@ -2512,9 +2521,9 @@ } }, "node_modules/axobject-query": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", - "integrity": "sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz", + "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==", "dev": true, "dependencies": { "dequal": "^2.0.3" @@ -2900,19 +2909,6 @@ "node": ">= 0.12.0" } }, - "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/collect-v8-coverage": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz", @@ -2990,19 +2986,6 @@ "node": ">= 8" } }, - "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/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -3430,6 +3413,12 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/esm-env": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz", + "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==", + "dev": true + }, "node_modules/espree": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", @@ -3473,6 +3462,16 @@ "node": ">=0.10" } }, + "node_modules/esrap": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/esrap/-/esrap-1.2.2.tgz", + "integrity": "sha512-F2pSJklxx1BlQIQgooczXCPHmcWpn6EsP5oo73LQfonG9fIlIENQ8vMmfGXeojP9MrkzUNAfyU5vdFlR9shHAw==", + "dev": true, + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.4.15", + "@types/estree": "^1.0.1" + } + }, "node_modules/esrecurse": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", @@ -3494,15 +3493,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", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", @@ -4049,9 +4039,9 @@ } }, "node_modules/is-reference": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.1.tgz", - "integrity": "sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==", + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", + "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==", "dev": true, "dependencies": { "@types/estree": "*" @@ -4899,12 +4889,6 @@ "tmpl": "1.0.5" } }, - "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/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", @@ -5227,17 +5211,6 @@ "node": ">=8" } }, - "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/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -5714,15 +5687,6 @@ "node": ">=0.10.0" } }, - "node_modules/source-map-js": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", - "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", - "dev": true, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/source-map-support": { "version": "0.5.13", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz", @@ -5873,27 +5837,27 @@ } }, "node_modules/svelte": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.0.tgz", - "integrity": "sha512-kVsdPjDbLrv74SmLSUzAsBGquMs4MPgWGkGLpH+PjOYnFOziAvENVzgJmyOCV2gntxE32aNm8/sqNKD6LbIpeQ==", + "version": "5.0.0-next.175", + "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.0.0-next.175.tgz", + "integrity": "sha512-fWMI0O3PiKFWvTohAEJRkd6RymR3uo7PO8GrNfyx57KDvmmK1KYRzAdHjx+RsKl8oZhfWeJHiot6iebgY8lJng==", "dev": true, "dependencies": { "@ampproject/remapping": "^2.2.1", "@jridgewell/sourcemap-codec": "^1.4.15", - "@jridgewell/trace-mapping": "^0.3.18", - "acorn": "^8.9.0", + "@types/estree": "^1.0.5", + "acorn": "^8.11.3", + "acorn-typescript": "^1.4.13", "aria-query": "^5.3.0", - "axobject-query": "^3.2.1", - "code-red": "^1.0.3", - "css-tree": "^2.3.1", - "estree-walker": "^3.0.3", - "is-reference": "^3.0.1", + "axobject-query": "^4.0.0", + "esm-env": "^1.0.0", + "esrap": "^1.2.2", + "is-reference": "^3.0.2", "locate-character": "^3.0.0", - "magic-string": "^0.30.0", - "periscopic": "^3.1.0" + "magic-string": "^0.30.5", + "zimmerframe": "^1.1.2" }, "engines": { - "node": ">=16" + "node": ">=18" } }, "node_modules/svelte-check": { @@ -6404,6 +6368,12 @@ "funding": { "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 } } } diff --git a/package.json b/package.json index a74942e6..ab38aab7 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "obsidian": "^1.4.11", "prettier": "^3.0.3", "prettier-plugin-svelte": "^3.0.3", - "svelte": "^4.2.0", + "svelte": "^5.0.0-next.175", "svelte-check": "^3.8.4", "svelte-preprocess": "^5.0.4", "ts-jest": "^29.1.5", diff --git a/src/FormModal.ts b/src/FormModal.ts index 43cbc593..73d7583d 100644 --- a/src/FormModal.ts +++ b/src/FormModal.ts @@ -1,6 +1,7 @@ import { throttle } from "@std"; import { App, Modal, Setting } from "obsidian"; import { SvelteComponent } from "svelte"; +import { createClassComponent } from "svelte/legacy"; import FormModalComponent from "./FormModal.svelte"; import FormResult, { type ModalFormData } from "./core/FormResult"; import { formDataFromFormDefaults } from "./core/formDataFromFormDefaults"; @@ -52,7 +53,8 @@ export class FormModal extends Modal { contentEl.addClass(this.modalDefinition.customClassname); contentEl.createEl("h1", { text: this.modalDefinition.title }); this.svelteComponents.push( - new FormModalComponent({ + createClassComponent({ + component: FormModalComponent, target: contentEl, props: { formEngine: this.formEngine, diff --git a/src/views/EditFormView.ts b/src/views/EditFormView.ts index a62738ba..bbf637c0 100644 --- a/src/views/EditFormView.ts +++ b/src/views/EditFormView.ts @@ -1,21 +1,22 @@ -import ModalFormPlugin from "../main"; import { ItemView, type ViewStateResult, WorkspaceLeaf } from "obsidian"; -import type { FormDefinition, EditableFormDefinition } from "../core/formDefinition"; -import FormEditor from './FormBuilder.svelte' -import { log_notice } from "src/utils/Log"; import { settingsStore } from "src/store/store"; +import { log_notice } from "src/utils/Log"; +import { createClassComponent } from "svelte/legacy"; +import type { EditableFormDefinition, FormDefinition } from "../core/formDefinition"; +import ModalFormPlugin from "../main"; +import FormEditor from "./FormBuilder.svelte"; export const EDIT_FORM_VIEW = "modal-form-edit-form-view"; function parseState(maybeState: unknown): maybeState is EditableFormDefinition { if (maybeState === null) { - return false + return false; } - if (typeof maybeState !== 'object') { - return false + if (typeof maybeState !== "object") { + return false; } - if ('title' in maybeState && 'name' in maybeState && 'fields' in maybeState) { - return true + if ("title" in maybeState && "name" in maybeState && "fields" in maybeState) { + return true; } return false; } @@ -26,12 +27,15 @@ function parseState(maybeState: unknown): maybeState is EditableFormDefinition { * Simple, right? */ export class EditFormView extends ItemView { - formState: EditableFormDefinition = { title: '', name: '', version: '1', fields: [] }; + formState: EditableFormDefinition = { title: "", name: "", version: "1", fields: [] }; originalFormName?: string; formEditor!: FormEditor; - constructor(readonly leaf: WorkspaceLeaf, readonly plugin: ModalFormPlugin) { + constructor( + readonly leaf: WorkspaceLeaf, + readonly plugin: ModalFormPlugin, + ) { super(leaf); - this.icon = 'note-glyph' + this.icon = "note-glyph"; } getViewType() { @@ -43,49 +47,50 @@ export class EditFormView extends ItemView { } async onOpen() { - this.containerEl.empty() - this.formEditor = new FormEditor({ + this.containerEl.empty(); + this.formEditor = createClassComponent({ + component: FormEditor, target: this.containerEl, props: { definition: this.formState, app: this.app, onChange: () => { - console.log('Save form state', this.formState) - this.app.workspace.requestSaveLayout() + console.log("Save form state", this.formState); + this.app.workspace.requestSaveLayout(); }, onSubmit: (formDefinition: FormDefinition) => { - console.log('Submitting form', { formDefinition }); - if (this.originalFormName && this.originalFormName !== '') { - settingsStore.updateForm(this.originalFormName, formDefinition) + console.log("Submitting form", { formDefinition }); + if (this.originalFormName && this.originalFormName !== "") { + settingsStore.updateForm(this.originalFormName, formDefinition); } else { - settingsStore.addNewForm(formDefinition) + settingsStore.addNewForm(formDefinition); } - this.plugin.closeEditForm() + this.plugin.closeEditForm(); }, onCancel: () => { - this.plugin.closeEditForm() + this.plugin.closeEditForm(); }, onPreview: async (formDefinition: FormDefinition) => { - const result = await this.plugin.api.openForm(formDefinition) - const result_str = JSON.stringify(result, null, 2) - log_notice('Form result', result_str) - console.log(result_str) + const result = await this.plugin.api.openForm(formDefinition); + const result_str = JSON.stringify(result, null, 2); + log_notice("Form result", result_str); + console.log(result_str); }, - } + }, }); } async onClose() { - console.log('onClose of edit form called') + console.log("onClose of edit form called"); this.formEditor.$destroy(); } async setState(state: unknown, result: ViewStateResult): Promise { - console.log('setState of edit form called', state) + console.log("setState of edit form called", state); if (parseState(state)) { this.formState = state; this.originalFormName = state.name; - this.formEditor.$set({ definition: this.formState }) + this.formEditor.$set({ definition: this.formState }); } return super.setState(state, result); } @@ -93,5 +98,3 @@ export class EditFormView extends ItemView { return this.formState; } } - - diff --git a/src/views/FormBuilder.svelte b/src/views/FormBuilder.svelte index 97f81153..547692c4 100644 --- a/src/views/FormBuilder.svelte +++ b/src/views/FormBuilder.svelte @@ -355,13 +355,13 @@ disabled={index === 0} use:setIcon={"arrow-up"} on:click={() => moveField(index, "up")} - /> + > @@ -374,7 +374,7 @@ (_, i) => i !== index, ); }} - /> + >
{:else} diff --git a/src/views/FormImport.svelte b/src/views/FormImport.svelte index 062336e2..b4359f83 100644 --- a/src/views/FormImport.svelte +++ b/src/views/FormImport.svelte @@ -19,7 +19,7 @@ class="form-input" placeholder="Paste your form JSON here" on:input={() => validate(value)} - /> + >
{#if ui.errors.length > 0} diff --git a/src/views/FormImportView.ts b/src/views/FormImportView.ts index bf08b6ef..7c216f5c 100644 --- a/src/views/FormImportView.ts +++ b/src/views/FormImportView.ts @@ -1,6 +1,7 @@ import { App, Modal } from "obsidian"; -import FormImport from "./FormImport.svelte"; +import { createClassComponent } from "svelte/legacy"; import { FormImportDeps, makeFormInputModel } from "./FormImport"; +import FormImport from "./FormImport.svelte"; /** * This class is just the minimum glue code to bind our core logic * with the svelte UI and obsidian API modal. @@ -21,7 +22,8 @@ export class FormImportModal extends Modal { onOpen() { const { contentEl } = this; - this._component = new FormImport({ + this._component = createClassComponent({ + component: FormImport, target: contentEl, props: { model: makeFormInputModel(this.deps) }, }); diff --git a/src/views/ManageFormsView.ts b/src/views/ManageFormsView.ts index 42b00e49..52af0d20 100644 --- a/src/views/ManageFormsView.ts +++ b/src/views/ManageFormsView.ts @@ -1,6 +1,7 @@ import { ItemView, Notice, WorkspaceLeaf } from "obsidian"; import { FormDefinition } from "src/core/formDefinition"; import { formsStore, invalidFormsStore, settingsStore } from "src/store/store"; +import { createClassComponent } from "svelte/legacy"; import ModalFormPlugin from "../main"; import ManageForms from "./ManageForms.svelte"; @@ -32,7 +33,8 @@ export class ManageFormsView extends ItemView { const container = this.containerEl.children[1] || this.containerEl.createDiv(); container.empty(); - this.component = new ManageForms({ + this.component = createClassComponent({ + component: ManageForms, target: container, props: { forms: formsStore, diff --git a/src/views/SvelteModal.ts b/src/views/SvelteModal.ts index 119fad58..c7e58c0e 100644 --- a/src/views/SvelteModal.ts +++ b/src/views/SvelteModal.ts @@ -1,5 +1,6 @@ import { App, Modal } from "obsidian"; import { SvelteComponent } from "svelte"; +import { createClassComponent } from "svelte/legacy"; type SvelteProps = ConstructorParameters[0]; @@ -24,7 +25,8 @@ export class SvelteModal extends Modal { onOpen() { const { contentEl } = this; - this._component = new this.component({ + this._component = createClassComponent({ + component: this.component, target: contentEl, props: this.getProps(this), }); diff --git a/src/views/TemplateBuilderModal.ts b/src/views/TemplateBuilderModal.ts index 2e1df1c1..6305330d 100644 --- a/src/views/TemplateBuilderModal.ts +++ b/src/views/TemplateBuilderModal.ts @@ -1,4 +1,5 @@ import { App, Modal } from "obsidian"; +import { createClassComponent } from "svelte/legacy"; import { TemplateBuilderModel } from "./components/TemplateBuilder"; import TemplateBuilder from "./components/TemplateBuilder.svelte"; import { copyToClipboard } from "./copyToClipboard"; @@ -22,7 +23,8 @@ export class TemplateBuilderModal extends Modal { onOpen() { const { contentEl } = this; - this._component = new TemplateBuilder({ + this._component = createClassComponent({ + component: TemplateBuilder, target: contentEl, props: { model: this.deps, copyToClipboard }, }); diff --git a/src/views/TemplateBuilderView.ts b/src/views/TemplateBuilderView.ts index 9c76a41b..cca8f250 100644 --- a/src/views/TemplateBuilderView.ts +++ b/src/views/TemplateBuilderView.ts @@ -1,6 +1,7 @@ import { ItemView, ViewStateResult, WorkspaceLeaf } from "obsidian"; import { FormDefinition } from "src/core/formDefinition"; import ModalFormPlugin from "src/main"; +import { createClassComponent } from "svelte/legacy"; import { makeModel } from "./components/TemplateBuilder"; import TemplateBuilder from "./components/TemplateBuilder.svelte"; import { copyToClipboard } from "./copyToClipboard"; @@ -38,7 +39,8 @@ export class TemplateBuilderView extends ItemView { return; } contentEl.empty(); - this._component = new TemplateBuilder({ + this._component = createClassComponent({ + component: TemplateBuilder, target: contentEl, props: { model: makeModel(this.model), copyToClipboard }, }); diff --git a/src/views/components/Label.svelte b/src/views/components/Label.svelte index 60fc7ac6..75213806 100644 --- a/src/views/components/Label.svelte +++ b/src/views/components/Label.svelte @@ -1,11 +1,11 @@