refactor view fields

Author: mProjectsCode

exampleVault/Advanced Examples/PF2e DC Calcualtor.md

@@ -1,6 +1,6 @@
 ---
-playerLevel: 5
-spellLevel: 12
+playerLevel: 10
+spellLevel: 5
 ---
 
 ### DC by Proficiency

exampleVault/Button Example.md

@@ -1,5 +1,5 @@
 ---
-count: 3
+count: 1
 ---
 Meta Bind is getting Buttons
 

exampleVault/View Fields/JS View Field.md

@@ -12,6 +12,4 @@ result: "**5289** km"
 save to {result}
 ---
 return engine.markdown.create(`**${context.bound.n1 * context.bound.n2}** km`);
-```
-
-[test](test\ 1.excalidraw)
+```

exampleVault/View Fields/View Field.md

@@ -12,6 +12,8 @@ object:
   key: value
 file: Example Note with Embeds
 image: Other/Images/img_butterfly.webp
+someInputValue: 1
+someComputedValue: 2
 ---
 
 `INPUT[number:number1]`
@@ -70,7 +72,6 @@ Markdown:
 
 Null:
 `VIEW[{someUnknownValue}][text]`
-some text
 
-Input: `INPUT[number:someComputedValue]`
+Input: `INPUT[number:someInputValue]`
 Computed Value: `VIEW[{someInputValue} * 2][math:someComputedValue]`

src/fields/inputFields/AbstractInputField.ts

@@ -130,6 +130,8 @@ export abstract class AbstractInputField<MetadataValueType, ComponentValueType>
 	}
 
 	public mount(container: HTMLElement): void {
+		this.onmount();
+
 		this.computedSignal.registerListener({
 			callback: value => this.inputFieldComponent.setValue(this.reverseMapValue(value)),
 		});
@@ -156,6 +158,8 @@ export abstract class AbstractInputField<MetadataValueType, ComponentValueType>
 	}
 
 	public unmount(): void {
+		this.onunmount();
+
 		this.computedSignal.unregisterAllListeners();
 		this.metadataSubscription?.unsubscribe();
 

src/fields/viewFields/AbstractViewField.ts

@@ -1,58 +1,108 @@
-import { type ViewFieldDeclaration } from '../../parsers/viewFieldParser/ViewFieldDeclaration';
-import { type ViewFieldMDRC, type ViewFieldVariable } from '../../renderChildren/ViewFieldMDRC';
+import { type ViewFieldVariable } from '../../renderChildren/ViewFieldMDRC';
 
 import { ViewFieldArgumentType } from '../../config/FieldConfigs';
 import { stringifyUnknown } from '../../utils/Literal';
+import { type IViewFieldBase } from './IViewFieldBase';
+import {
+	type ComputedMetadataSubscription,
+	type ComputedSubscriptionDependency,
+} from '../../metadata/ComputedMetadataSubscription';
+import { Signal } from '../../utils/Signal';
 
 export abstract class AbstractViewField {
-	protected renderChild: ViewFieldMDRC;
-	container?: HTMLElement;
+	readonly base: IViewFieldBase;
+	readonly inputSignal: Signal<unknown>;
+
+	private metadataSubscription?: ComputedMetadataSubscription;
+
+	variables: ViewFieldVariable[];
 
+	container?: HTMLElement;
 	// hidden argument
+
 	hidden: boolean;
 
-	protected constructor(renderChild: ViewFieldMDRC) {
-		this.renderChild = renderChild;
+	protected constructor(base: IViewFieldBase) {
+		this.base = base;
+		this.inputSignal = new Signal<unknown>(undefined);
+
+		this.variables = [];
+
 		this.hidden = false;
 	}
 
-	abstract buildVariables(declaration: ViewFieldDeclaration): ViewFieldVariable[];
+	protected abstract buildVariables(): void;
 
 	// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-	abstract computeValue(variables: ViewFieldVariable[]): unknown | Promise<unknown>;
-
-	abstract getDefaultDisplayValue(): string;
+	protected abstract computeValue(): unknown | Promise<unknown>;
 
-	async render(container: HTMLElement): Promise<void> {
+	private async initialRender(container: HTMLElement): Promise<void> {
 		this.container = container;
 		this.container.addClass('mb-view-text');
 
-		this.hidden = this.renderChild.getArgument(ViewFieldArgumentType.HIDDEN)?.value ?? false;
+		this.hidden = this.base.getArgument(ViewFieldArgumentType.HIDDEN)?.value ?? false;
 
 		if (this.hidden) {
 			this.container.addClass('mb-view-hidden');
 		}
 
-		await this._render(container);
+		await this.onInitialRender(container);
 
-		await this.update(this.getDefaultDisplayValue());
+		await this.rerender('');
 	}
 
-	async update(value: unknown): Promise<void> {
+	protected abstract onInitialRender(container: HTMLElement): void | Promise<void>;
+
+	private async rerender(value: unknown): Promise<void> {
 		if (!this.container) {
 			return;
 		}
 
 		if (!this.hidden) {
-			const text = stringifyUnknown(value, this.renderChild.plugin.settings.viewFieldDisplayNullAsEmpty) ?? '';
+			const text = stringifyUnknown(value, this.base.plugin.settings.viewFieldDisplayNullAsEmpty) ?? '';
 			this.container.empty();
-			await this._update(this.container, text);
+			await this.onRerender(this.container, text);
 		}
 	}
 
-	protected abstract _render(container: HTMLElement): void | Promise<void>;
+	protected abstract onRerender(container: HTMLElement, text: string): void | Promise<void>;
+
+	public destroy(): void {
+		this.unmount();
+	}
+
+	public mount(container: HTMLElement): void {
+		this.onmount();
+
+		this.buildVariables();
+
+		this.inputSignal.registerListener({ callback: value => void this.rerender(value) });
+
+		this.metadataSubscription = this.base.plugin.metadataManager.subscribeComputed(
+			this.base.getUuid(),
+			this.inputSignal,
+			this.base.getDeclaration().writeToBindTarget,
+			this.variables.map((x): ComputedSubscriptionDependency => {
+				return {
+					bindTarget: x.bindTargetDeclaration,
+					callbackSignal: x.inputSignal,
+				};
+			}),
+			async () => await this.computeValue(),
+			() => this.base.unload(),
+		);
+
+		void this.initialRender(container);
+	}
+
+	public unmount(): void {
+		this.onunmount();
+
+		this.inputSignal.unregisterAllListeners();
+		this.metadataSubscription?.unsubscribe();
+	}
 
-	protected abstract _update(container: HTMLElement, text: string): void | Promise<void>;
+	protected onmount(): void {}
 
-	abstract destroy(): void;
+	protected onunmount(): void {}
 }

src/fields/viewFields/IViewFieldBase.ts

@@ -0,0 +1,22 @@
+import { type ViewFieldArgumentType } from '../../config/FieldConfigs';
+import { type IPlugin } from '../../IPlugin';
+import { type ViewFieldArgumentMapType } from '../fieldArguments/viewFieldArguments/ViewFieldArgumentFactory';
+import { type ViewFieldDeclaration } from '../../parsers/viewFieldParser/ViewFieldDeclaration';
+
+export interface IViewFieldBase {
+	readonly plugin: IPlugin;
+
+	getUuid(): string;
+
+	getFilePath(): string;
+
+	getDeclaration(): ViewFieldDeclaration;
+
+	getArguments<T extends ViewFieldArgumentType>(name: T): ViewFieldArgumentMapType<T>[];
+
+	getArgument<T extends ViewFieldArgumentType>(name: T): ViewFieldArgumentMapType<T> | undefined;
+
+	load(): void;
+
+	unload(): void;
+}

src/fields/viewFields/fields/LinkVF.ts

@@ -1,6 +1,5 @@
 import { AbstractViewField } from '../AbstractViewField';
-import { type ViewFieldMDRC, type ViewFieldVariable } from '../../../renderChildren/ViewFieldMDRC';
-import { type ViewFieldDeclaration } from '../../../parsers/viewFieldParser/ViewFieldDeclaration';
+import { type ViewFieldMDRC } from '../../../renderChildren/ViewFieldMDRC';
 import { Signal } from '../../../utils/Signal';
 import { getUUID } from '../../../utils/Utils';
 import { ErrorLevel, MetaBindExpressionError, MetaBindValidationError } from '../../../utils/errors/MetaBindErrors';
@@ -15,11 +14,11 @@ export class LinkVF extends AbstractViewField {
 		super(renderChild);
 	}
 
-	public buildVariables(declaration: ViewFieldDeclaration): ViewFieldVariable[] {
+	protected buildVariables(): void {
 		// filter out empty strings
-		const entries: (string | BindTargetDeclaration)[] = declaration.templateDeclaration.filter(x =>
-			typeof x === 'string' ? x : true,
-		);
+		const entries: (string | BindTargetDeclaration)[] = this.base
+			.getDeclaration()
+			.templateDeclaration.filter(x => (typeof x === 'string' ? x : true));
 
 		if (entries.length !== 1) {
 			throw new MetaBindValidationError({
@@ -38,87 +37,62 @@ export class LinkVF extends AbstractViewField {
 			});
 		}
 
-		const variable: ViewFieldVariable = {
-			bindTargetDeclaration: firstEntry,
-			inputSignal: new Signal<unknown>(undefined),
-			uuid: getUUID(),
-			contextName: `MB_VAR_0`,
-		};
-
-		return [variable];
-	}
-
-	protected _render(container: HTMLElement): void {
-		this.component = new LinkListComponent({
-			target: container,
-			props: {
-				mdLinkList: [],
+		this.variables = [
+			{
+				bindTargetDeclaration: firstEntry,
+				inputSignal: new Signal<unknown>(undefined),
+				uuid: getUUID(),
+				contextName: `MB_VAR_0`,
 			},
-		});
-	}
-
-	protected async _update(container: HTMLElement, text: string): Promise<void> {
-		const linkList = MDLinkParser.parseLinkList(text);
-		this.component = new LinkListComponent({
-			target: container,
-			props: {
-				mdLinkList: linkList,
-			},
-		});
-	}
-
-	public destroy(): void {
-		this.component?.$destroy();
+		];
 	}
 
-	computeValue(variables: ViewFieldVariable[]): string {
-		if (variables.length !== 1) {
+	protected computeValue(): string {
+		if (this.variables.length !== 1) {
 			throw new MetaBindExpressionError({
 				errorLevel: ErrorLevel.CRITICAL,
 				effect: 'failed to evaluate link view field',
 				cause: 'there should be exactly one variable',
 			});
 		}
 
-		const variable = variables[0];
+		const variable = this.variables[0];
 		const content = variable.inputSignal.get();
 
 		// we want the return value to be a human-readable string, since someone could save this to the frontmatter
 		if (typeof content === 'string') {
-			return this.convertToLink(content);
+			return MDLinkParser.convertToLinkString(content);
 		} else if (Array.isArray(content)) {
 			const strings = content.filter(x => typeof x === 'string') as string[];
 			return strings
-				.map(x => this.convertToLink(x))
+				.map(x => MDLinkParser.convertToLinkString(x))
 				.filter(x => x !== '')
 				.join(', ');
 		} else {
 			return '';
 		}
 	}
 
-	convertToLink(str: string): string {
-		if (MDLinkParser.isLink(str)) {
-			return str;
-		} else if (MDLinkParser.isLink(`[[${str}]]`)) {
-			return `[[${str}]]`;
-		} else if (this.getUrl(str)) {
-			const url = this.getUrl(str)!;
-			return `[${url.hostname}](${str})`;
-		} else {
-			return '';
-		}
+	protected onInitialRender(container: HTMLElement): void {
+		this.component = new LinkListComponent({
+			target: container,
+			props: {
+				mdLinkList: [],
+			},
+		});
 	}
 
-	getUrl(str: string): URL | undefined {
-		try {
-			return new URL(str);
-		} catch (e) {
-			return undefined;
-		}
+	protected async onRerender(container: HTMLElement, text: string): Promise<void> {
+		const linkList = MDLinkParser.parseLinkList(text);
+		this.component = new LinkListComponent({
+			target: container,
+			props: {
+				mdLinkList: linkList,
+			},
+		});
 	}
 
-	public getDefaultDisplayValue(): string {
-		return '';
+	protected onunmount(): void {
+		this.component?.$destroy();
 	}
 }