add memorization to the metadata manager

Author: mProjectsCode

exampleVault/View Fields/JS View Field.md

@@ -51,4 +51,4 @@ return [...classes.values()];
 {Other Note#text} as text
 ---
 return context.bound.text
-```
+```

exampleVault/View Fields/View Field.md

@@ -12,8 +12,8 @@ object:
   key: value
 file: Example Note with Embeds
 image: Other/Images/subfolder/img_frozen_branch.jpg
-someInputValue: 1
-someComputedValue: 2
+someInputValue: 
+someComputedValue: 0
 images:
   - Other/Images/img_flower.webp
   - Other/Images/img_butterfly.webp

packages/core/src/api/InternalAPI.ts

@@ -2,7 +2,6 @@ import type { Moment } from 'moment';
 import type { LifecycleHook } from 'packages/core/src/api/API';
 import type { FileAPI } from 'packages/core/src/api/FileAPI';
 import DatePickerInput from 'packages/core/src/fields/inputFields/fields/DatePicker/DatePicker.svelte';
-import type { DatePickerIPF } from 'packages/core/src/fields/inputFields/fields/DatePicker/DatePickerIPF';
 import type {
 	ImageSuggesterLikeIPF,
 	SuggesterLikeIFP,
@@ -297,15 +296,15 @@ export abstract class InternalAPI<Plugin extends IPlugin> {
 		).open();
 	}
 
-	openDatePickerModal(inputField: DatePickerIPF): void {
+	openDatePickerModal(value: Moment | null, setValue: (value: Moment | null) => void): void {
 		this.createModal(
 			new SvelteModalContent((modal, targetEl) => {
 				return mount(DatePickerInput, {
 					target: targetEl,
 					props: {
-						selectedDate: inputField.getInternalValue(),
+						selectedDate: value,
 						dateChangeCallback: (value: Moment | null): void => {
-							inputField.setInternalValue(value);
+							setValue(value);
 							modal.closeModal();
 						},
 					},

packages/core/src/fields/inputFields/AbstractInputField.ts

@@ -14,8 +14,9 @@ export abstract class AbstractInputField<
 > extends Mountable {
 	readonly plugin: IPlugin;
 	readonly mountable: InputFieldMountable;
-	readonly svelteWrapper: InputFieldSvelteWrapper<ComponentValueType, SvelteExports>;
-	readonly inputSignal: MappedSignal<unknown, MetadataValueType>;
+
+	svelteWrapper?: InputFieldSvelteWrapper<ComponentValueType, SvelteExports>;
+	inputSignal?: MappedSignal<unknown, MetadataValueType>;
 
 	private metadataSubscription?: MetadataSubscription;
 	private mountTarget?: HTMLElement;
@@ -25,26 +26,6 @@ export abstract class AbstractInputField<
 
 		this.mountable = mountable;
 		this.plugin = mountable.plugin;
-		this.svelteWrapper = new InputFieldSvelteWrapper<ComponentValueType, SvelteExports>(
-			this.plugin,
-			this.getSvelteComponent(),
-			value => {
-				this.updateDataAttributes(value);
-				this.notifySubscription(this.mapValue(value));
-			},
-		);
-
-		this.inputSignal = new MappedSignal<unknown, MetadataValueType>(
-			undefined,
-			(value: unknown): MetadataValueType => {
-				const filteredValue = this.filterValue(value);
-				if (filteredValue !== undefined) {
-					return filteredValue;
-				} else {
-					return this.getDefaultValue();
-				}
-			},
-		);
 	}
 
 	protected abstract getSvelteComponent(): InputFieldSvelteComponent<ComponentValueType, SvelteExports>;
@@ -87,6 +68,9 @@ export abstract class AbstractInputField<
 	 * Get the metadata value that the input field currently has.
 	 */
 	public getValue(): MetadataValueType {
+		if (!this.inputSignal) {
+			return this.getDefaultValue();
+		}
 		return this.inputSignal.get();
 	}
 
@@ -103,7 +87,7 @@ export abstract class AbstractInputField<
 	 * @param value
 	 */
 	public setValue(value: MetadataValueType): void {
-		this.inputSignal.setDirect(value);
+		this.inputSignal?.setDirect(value);
 		this.notifySubscription(value);
 	}
 
@@ -152,9 +136,30 @@ export abstract class AbstractInputField<
 	protected onMount(targetEl: HTMLElement): void {
 		this.mountTarget = targetEl;
 
+		this.svelteWrapper = new InputFieldSvelteWrapper<ComponentValueType, SvelteExports>(
+			this.plugin,
+			this.getSvelteComponent(),
+			value => {
+				this.updateDataAttributes(value);
+				this.notifySubscription(this.mapValue(value));
+			},
+		);
+
+		this.inputSignal = new MappedSignal<unknown, MetadataValueType>(
+			undefined,
+			(value: unknown): MetadataValueType => {
+				const filteredValue = this.filterValue(value);
+				if (filteredValue !== undefined) {
+					return filteredValue;
+				} else {
+					return this.getDefaultValue();
+				}
+			},
+		);
+
 		// listener to update the svelte component
 		this.inputSignal.registerListener({
-			callback: value => this.svelteWrapper.setValue(this.reverseMapValue(value)),
+			callback: value => this.svelteWrapper?.setValue(this.reverseMapValue(value)),
 		});
 
 		// listener to update data attributes on the target element
@@ -181,9 +186,9 @@ export abstract class AbstractInputField<
 	protected onUnmount(): void {
 		this.mountTarget = undefined;
 
-		this.inputSignal.unregisterAllListeners();
+		this.inputSignal?.unregisterAllListeners();
 		this.metadataSubscription?.unsubscribe();
 
-		this.svelteWrapper.unmount();
+		this.svelteWrapper?.unmount();
 	}
 }

packages/core/src/fields/inputFields/fields/Date/DateComponent.svelte

@@ -10,4 +10,4 @@
 	}
 </script>
 
-<input type="date" bind:value={value} oninput={() => props.onValueChange(value)} />
+<input type="date" bind:value={value} oninput={() => props.onValueChange($state.snapshot(value))} />

packages/core/src/fields/inputFields/fields/DatePicker/DatePickerIPF.ts

@@ -65,7 +65,9 @@ export class DatePickerIPF extends AbstractInputField<string | null, Moment | nu
 		return {
 			dateFormat: this.mountable.plugin.settings.preferredDateFormat,
 			showDatePicker: (): void => {
-				this.mountable.plugin.internal.openDatePickerModal(this);
+				this.mountable.plugin.internal.openDatePickerModal(this.getInternalValue(), (value: Moment | null) =>
+					this.setInternalValue(value),
+				);
 			},
 		};
 	}

packages/core/src/fields/inputFields/fields/DateTime/DateTimeComponent.svelte

@@ -10,4 +10,4 @@
 	}
 </script>
 
-<input type="datetime-local" bind:value={value} oninput={() => props.onValueChange(value)} />
+<input type="datetime-local" bind:value={value} oninput={() => props.onValueChange($state.snapshot(value))} />

packages/core/src/fields/inputFields/fields/Editor/EditorComponent.svelte

@@ -37,7 +37,10 @@
 	tabindex="0"
 >
 	{#if editing}
-		<textarea bind:value={value} onfocusout={() => focusOut()} oninput={() => props.onValueChange(value)}
+		<textarea
+			bind:value={value}
+			onfocusout={() => focusOut()}
+			oninput={() => props.onValueChange($state.snapshot(value))}
 		></textarea>
 	{:else}
 		<MarkdownRenderComponent value={value} plugin={props.plugin} filePath={props.filePath}

packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterComponent.svelte

@@ -16,12 +16,12 @@
 
 	export function pushValue(v: string): void {
 		value.push(v);
-		props.onValueChange(value);
+		props.onValueChange($state.snapshot(value));
 	}
 
 	function remove(i: number): void {
 		value.splice(i, 1);
-		props.onValueChange(value);
+		props.onValueChange($state.snapshot(value));
 	}
 
 	function openContextMenuForElement(e: MouseEvent, index: number): void {
@@ -35,7 +35,7 @@
 					const temp = value[index - 1];
 					value[index - 1] = value[index];
 					value[index] = temp;
-					props.onValueChange(value);
+					props.onValueChange($state.snapshot(value));
 				},
 			});
 		}
@@ -48,7 +48,7 @@
 					const temp = value[index + 1];
 					value[index + 1] = value[index];
 					value[index] = temp;
-					props.onValueChange(value);
+					props.onValueChange($state.snapshot(value));
 				},
 			});
 		}

packages/core/src/fields/inputFields/fields/ImageListSuggester/ImageListSuggesterIPF.ts

@@ -39,7 +39,7 @@ export class ImageListSuggesterIPF extends AbstractInputField<MBLiteral[], strin
 	openModal(): void {
 		this.mountable.plugin.internal.openImageSuggesterModal(this, false, (selected: string | undefined) => {
 			if (selected !== undefined) {
-				this.svelteWrapper.getInstance()?.pushValue(selected);
+				this.svelteWrapper?.getInstance()?.pushValue(selected);
 			}
 		});
 	}