fixes

mProjectsCode · mProjectsCode · commit 4dc698adac15 · 2024-07-14T23:14:45.000+02:00
diff --git a/packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterComponent.svelte b/packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterComponent.svelte
@@ -14,7 +14,7 @@
 		value = v;
 	}
 
-	export function addValue(v: string): void {
+	export function pushValue(v: string): void {
 		value.push(v);
 		props.onValueChange(value);
 	}
diff --git a/packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterComponent.svelte b/packages/core/src/fields/inputFields/fields/ImageSuggester/ImageSuggesterComponent.svelte
@@ -11,7 +11,6 @@
 	let value = $state(props.value);
 
 	export function setValue(v: string): void {
-		console.trace('setValue', v);
 		value = v;
 	}
 
diff --git a/packages/core/src/fields/inputFields/fields/InlineList/InlineListComponent.svelte b/packages/core/src/fields/inputFields/fields/InlineList/InlineListComponent.svelte
@@ -16,7 +16,7 @@
 		value = v;
 	}
 
-	export function addValue(v: MBLiteral): void {
+	export function pushValue(v: MBLiteral): void {
 		value.push(v);
 		props.onValueChange(value);
 	}
diff --git a/packages/core/src/fields/inputFields/fields/List/ListComponent.svelte b/packages/core/src/fields/inputFields/fields/List/ListComponent.svelte
@@ -21,7 +21,7 @@
 		value = v;
 	}
 
-	function add(): void {
+	function pushValue(): void {
 		value.push(addValue);
 		props.onValueChange(value);
 
@@ -118,7 +118,7 @@
 			maxlength={props.limit}
 			onkeyup={e => {
 				if (e.key === 'Enter' && addValue.length > 0) {
-					add();
+					pushValue();
 				}
 			}}
 		/>
@@ -129,7 +129,7 @@
 			>{getLimitString(value.length, props.limit)}</span
 		>
 	{/if}
-	<Button on:click={() => add()} disabled={!addValue}>
+	<Button onclick={() => pushValue()} disabled={!addValue}>
 		<Icon plugin={props.plugin} iconName="plus" />
 	</Button>
 </div>
diff --git a/packages/core/src/fields/inputFields/fields/ListSuggester/ListSuggesterComponent.svelte b/packages/core/src/fields/inputFields/fields/ListSuggester/ListSuggesterComponent.svelte
@@ -18,7 +18,7 @@
 		value = v;
 	}
 
-	export function addValue(v: MBLiteral): void {
+	export function pushValue(v: MBLiteral): void {
 		value.push(v);
 		props.onValueChange(value);
 	}
@@ -78,8 +78,8 @@
 	{/each}
 </div>
 <div class="mb-list-input">
-	<Button variant={ButtonStyleType.DEFAULT} on:click={() => props.showSuggester()}>Add new item</Button>
+	<Button variant={ButtonStyleType.DEFAULT} onclick={() => props.showSuggester()}>Add new item</Button>
 	{#if props.allowOther}
-		<Button variant={ButtonStyleType.DEFAULT} on:click={() => props.showTextPrompt()}>Add other item</Button>
+		<Button variant={ButtonStyleType.DEFAULT} onclick={() => props.showTextPrompt()}>Add other item</Button>
 	{/if}
 </div>
diff --git a/packages/core/src/fields/metaBindTable/MetaBindTableComponent.svelte b/packages/core/src/fields/metaBindTable/MetaBindTableComponent.svelte
@@ -44,7 +44,7 @@
 					{/if}
 
 					<td class="mb-html-table-button-cell">
-						<Button on:click={() => table.removeColumn(tableRow.index)}>
+						<Button onclick={() => table.removeColumn(tableRow.index)}>
 							<Icon plugin={table.plugin} iconName="x" />
 						</Button>
 					</td>
@@ -54,4 +54,4 @@
 	</table>
 </div>
 
-<Button on:click={() => table.addColumn()}>Add Row</Button>
+<Button onclick={() => table.addColumn()}>Add Row</Button>
diff --git a/packages/core/src/fields/viewFields/fields/ImageVF.ts b/packages/core/src/fields/viewFields/fields/ImageVF.ts
@@ -96,7 +96,7 @@ export class ImageVF extends AbstractViewField {
 		if (this.component) {
 			unmount(this.component);
 		}
-		this.component = new ImageGrid({
+		this.component = mount(ImageGrid, {
 			target: container,
 			props: {
 				images: linkList.map(x => x.target),
diff --git a/packages/core/src/modals/modalContents/TextPromptModalContent.svelte b/packages/core/src/modals/modalContents/TextPromptModalContent.svelte
@@ -26,6 +26,6 @@
 </div>
 
 <ModalButtonGroup>
-	<Button variant={ButtonStyleType.PRIMARY} on:click={() => options.onSubmit(value)}>OK</Button>
-	<Button on:click={() => options.onCancel()}>Cancel</Button>
+	<Button variant={ButtonStyleType.PRIMARY} onclick={() => options.onSubmit(value)}>OK</Button>
+	<Button onclick={() => options.onCancel()}>Cancel</Button>
 </ModalButtonGroup>
diff --git a/packages/core/src/modals/modalContents/buttonBuilder/ButtonBuilderModal.ts b/packages/core/src/modals/modalContents/buttonBuilder/ButtonBuilderModal.ts
@@ -3,6 +3,8 @@ import type { IPlugin } from 'packages/core/src/IPlugin';
 import { ModalContent } from 'packages/core/src/modals/ModalContent';
 import ButtonBuilderModalComponent from 'packages/core/src/modals/modalContents/buttonBuilder/ButtonBuilderModalComponent.svelte';
 import { DomHelpers } from 'packages/core/src/utils/Utils';
+import type { Component as SvelteComponent } from 'svelte';
+import { mount, unmount } from 'svelte';
 
 export interface ButtonBuilderModalOptions {
 	onOkay: (config: ButtonConfig) => void;
@@ -13,7 +15,7 @@ export interface ButtonBuilderModalOptions {
 export class ButtonBuilderModal extends ModalContent {
 	plugin: IPlugin;
 
-	component?: ButtonBuilderModalComponent;
+	component?: ReturnType<SvelteComponent>;
 	options: ButtonBuilderModalOptions;
 
 	constructor(plugin: IPlugin, options: ButtonBuilderModalOptions) {
@@ -26,10 +28,10 @@ export class ButtonBuilderModal extends ModalContent {
 	protected onMount(targetEl: HTMLElement): void {
 		DomHelpers.empty(targetEl);
 		if (this.component) {
-			this.component.$destroy();
+			unmount(this.component);
 		}
 
-		this.component = new ButtonBuilderModalComponent({
+		this.component = mount(ButtonBuilderModalComponent, {
 			target: targetEl,
 			props: {
 				plugin: this.plugin,
@@ -42,7 +44,7 @@ export class ButtonBuilderModal extends ModalContent {
 	protected onUnmount(targetEl: HTMLElement): void {
 		DomHelpers.empty(targetEl);
 		if (this.component) {
-			this.component.$destroy();
+			unmount(this.component);
 		}
 	}
 
diff --git a/packages/core/src/modals/modalContents/buttonBuilder/ButtonBuilderModalComponent.svelte b/packages/core/src/modals/modalContents/buttonBuilder/ButtonBuilderModalComponent.svelte
@@ -28,16 +28,18 @@
 	import { DomHelpers, expectType } from 'packages/core/src/utils/Utils';
 	import { onDestroy } from 'svelte';
 
-	const {
+	let {
 		plugin,
 		modal,
-		buttonConfig,
+		buttonConfig: propConfig = $bindable(),
 	}: {
 		plugin: IPlugin;
 		modal: ButtonBuilderModal;
 		buttonConfig: ButtonConfig;
 	} = $props();
 
+	let buttonConfig = $state(propConfig);
+
 	let buttonEl: HTMLElement;
 	let buttonMountable: ButtonField;
 	let addActionType: ButtonActionType = $state(ButtonActionType.COMMAND);
@@ -57,13 +59,10 @@
 
 	function addAction(): void {
 		buttonConfig.actions?.push(plugin.api.buttonActionRunner.createDefaultAction(addActionType));
-
-		buttonConfig.actions = buttonConfig.actions;
 	}
 
 	function removeAction(id: number): void {
 		buttonConfig.actions?.splice(id, 1);
-		buttonConfig.actions = buttonConfig.actions;
 	}
 
 	function getActionLabel(actionType: ButtonActionType): string {
@@ -269,8 +268,8 @@ Add action of type
 <div bind:this={buttonEl}></div>
 
 <ModalButtonGroup>
-	<Button variant={ButtonStyleType.PRIMARY} on:click={() => modal.okay(buttonConfig)}
+	<Button variant={ButtonStyleType.PRIMARY} onclick={() => modal.okay(buttonConfig)}
 		>{modal.options.submitText}</Button
 	>
-	<Button variant={ButtonStyleType.DEFAULT} on:click={() => modal.cancel()}>Cancel</Button>
+	<Button variant={ButtonStyleType.DEFAULT} onclick={() => modal.cancel()}>Cancel</Button>
 </ModalButtonGroup>
diff --git a/packages/core/src/modals/modalContents/buttonBuilder/CommandActionSettings.svelte b/packages/core/src/modals/modalContents/buttonBuilder/CommandActionSettings.svelte
@@ -29,5 +29,5 @@
 	name="Command: {action.command || 'none'}"
 	description="The command to execute when this action runs."
 >
-	<Button variant={ButtonStyleType.PRIMARY} on:click={() => commandActionChangeCommand(action)}>Change</Button>
+	<Button variant={ButtonStyleType.PRIMARY} onclick={() => commandActionChangeCommand(action)}>Change</Button>
 </SettingComponent>
diff --git a/packages/core/src/modals/modalContents/buttonBuilder/CreateNoteActionSettings.svelte b/packages/core/src/modals/modalContents/buttonBuilder/CreateNoteActionSettings.svelte
@@ -26,7 +26,7 @@
 </script>
 
 <SettingComponent name="Folder: {action.folderPath || 'none'}" description="The folder to create a new note in.">
-	<Button variant={ButtonStyleType.PRIMARY} on:click={() => createNoteActionChangeFolderPath(action)}>Change</Button>
+	<Button variant={ButtonStyleType.PRIMARY} onclick={() => createNoteActionChangeFolderPath(action)}>Change</Button>
 </SettingComponent>
 
 <SettingComponent name="File Name: {action.fileName || 'default'}" description="The file name of the new note.">
diff --git a/packages/core/src/modals/modalContents/buttonBuilder/TemplaterCreateNoteActionSettings.svelte b/packages/core/src/modals/modalContents/buttonBuilder/TemplaterCreateNoteActionSettings.svelte
@@ -39,13 +39,13 @@
 	name="Template File: {action.templateFile || 'none'}"
 	description="The template file to create a new note of."
 >
-	<Button variant={ButtonStyleType.PRIMARY} on:click={() => templaterCreateNoteActionChangeTemplateFile(action)}
+	<Button variant={ButtonStyleType.PRIMARY} onclick={() => templaterCreateNoteActionChangeTemplateFile(action)}
 		>Change
 	</Button>
 </SettingComponent>
 
 <SettingComponent name="Folder: {action.folderPath || 'none'}" description="The folder to create a new note in.">
-	<Button variant={ButtonStyleType.PRIMARY} on:click={() => templaterCreateNoteActionChangeFolderPath(action)}
+	<Button variant={ButtonStyleType.PRIMARY} onclick={() => templaterCreateNoteActionChangeFolderPath(action)}
 		>Change
 	</Button>
 </SettingComponent>
diff --git a/packages/core/src/utils/playground/PlaygroundComponent.svelte b/packages/core/src/utils/playground/PlaygroundComponent.svelte
@@ -52,21 +52,21 @@
 		<span>
 			<Button
 				variant={ButtonStyleType.PRIMARY}
-				on:click={() => {
+				onclick={() => {
 					DocsUtils.open(DocsUtils.linkToHome());
 				}}
 			>
 				Docs
 			</Button>
 			<Button
-				on:click={() => {
+				onclick={() => {
 					DocsUtils.open(DocsUtils.linkToGithub());
 				}}
 			>
 				GitHub
 			</Button>
 			<Button
-				on:click={() => {
+				onclick={() => {
 					DocsUtils.open(DocsUtils.linkToIssues());
 				}}
 			>
diff --git a/packages/obsidian/src/main.ts b/packages/obsidian/src/main.ts
@@ -283,6 +283,7 @@ export default class MetaBindPlugin extends Plugin implements IPlugin {
 			callback: () => {
 				this.internal.openButtonBuilderModal({
 					onOkay: (config): void => {
+						console.log(config);
 						void window.navigator.clipboard.writeText(
 							`\`\`\`meta-bind-button\n${stringifyYaml(config)}\n\`\`\``,
 						);
diff --git a/packages/obsidian/src/playground/PlaygroundView.ts b/packages/obsidian/src/playground/PlaygroundView.ts
@@ -1,12 +1,14 @@
 import type { WorkspaceLeaf } from 'obsidian';
 import { ItemView } from 'obsidian';
-import FaqComponent from 'packages/core/src/utils/playground/PlaygroundComponent.svelte';
+import PlaygroundComponent from 'packages/core/src/utils/playground/PlaygroundComponent.svelte';
 import type MetaBindPlugin from 'packages/obsidian/src/main';
+import type {Component as SvelteComponent} from 'svelte';
+import { mount, unmount  } from 'svelte';
 
 export const MB_PLAYGROUND_VIEW_TYPE = 'mb-playground-view-type';
 
 export class PlaygroundView extends ItemView {
-	component: FaqComponent | undefined;
+	component: ReturnType<SvelteComponent> | undefined;
 	plugin: MetaBindPlugin;
 
 	constructor(leaf: WorkspaceLeaf, plugin: MetaBindPlugin) {
@@ -26,7 +28,7 @@ export class PlaygroundView extends ItemView {
 	async onOpen(): Promise<void> {
 		this.contentEl.empty();
 
-		this.component = new FaqComponent({
+		this.component = mount(PlaygroundComponent, {
 			target: this.contentEl,
 			props: {
 				plugin: this.plugin,
@@ -36,6 +38,8 @@ export class PlaygroundView extends ItemView {
 
 	// eslint-disable-next-line @typescript-eslint/require-await
 	async onClose(): Promise<void> {
-		this.component?.$destroy();
+		if (this.component) {
+			unmount(this.component);
+		}
 	}
 }
diff --git a/packages/obsidian/src/settings/inputFieldTemplateSetting/InputFieldTemplatesSettingComponent.svelte b/packages/obsidian/src/settings/inputFieldTemplateSetting/InputFieldTemplatesSettingComponent.svelte
@@ -50,7 +50,7 @@
 		></InputFieldTemplateSettingComponent>
 	{/each}
 
-	<Button on:click={() => addTemplate()} variant={ButtonStyleType.PRIMARY} tooltip="Create New Template"
+	<Button onclick={() => addTemplate()} variant={ButtonStyleType.PRIMARY} tooltip="Create New Template"
 		>Add Template</Button
 	>
 
@@ -67,7 +67,7 @@
 	{/if}
 
 	<ModalButtonGroup>
-		<Button on:click={() => save()} variant={ButtonStyleType.PRIMARY} tooltip="Save Changes">Save</Button>
-		<Button on:click={() => cancel()} tooltip="Revert Changes">Cancel</Button>
+		<Button onclick={() => save()} variant={ButtonStyleType.PRIMARY} tooltip="Save Changes">Save</Button>
+		<Button onclick={() => cancel()} tooltip="Revert Changes">Cancel</Button>
 	</ModalButtonGroup>
 </div>

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`value = v;`
`15`	`15`	`}`
`16`	`16`
`17`		`- export function addValue(v: string): void {`
	`17`	`+ export function pushValue(v: string): void {`
`18`	`18`	`value.push(v);`
`19`	`19`	`props.onValueChange(value);`
`20`	`20`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,6 @@`
`11`	`11`	`let value = $state(props.value);`
`12`	`12`
`13`	`13`	`export function setValue(v: string): void {`
`14`		`- console.trace('setValue', v);`
`15`	`14`	`value = v;`
`16`	`15`	`}`
`17`	`16`
Original file line number	Diff line number	Diff line change
`@@ -16,7 +16,7 @@`
`16`	`16`	`value = v;`
`17`	`17`	`}`
`18`	`18`
`19`		`- export function addValue(v: MBLiteral): void {`
	`19`	`+ export function pushValue(v: MBLiteral): void {`
`20`	`20`	`value.push(v);`
`21`	`21`	`props.onValueChange(value);`
`22`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -96,7 +96,7 @@ export class ImageVF extends AbstractViewField {`
`96`	`96`	`if (this.component) {`
`97`	`97`	`unmount(this.component);`
`98`	`98`	`}`
`99`		`- this.component = new ImageGrid({`
	`99`	`+ this.component = mount(ImageGrid, {`
`100`	`100`	`target: container,`
`101`	`101`	`props: {`
`102`	`102`	`images: linkList.map(x => x.target),`