fix some view field bugs

Author: mProjectsCode

exampleVault/Examples.md

@@ -13,7 +13,7 @@ inlineSelect: 1
 nested:
   object: test
 number1: 2
-number2: 18
+number2: 10
 time: 
 ---
 

exampleVault/View Fields/View Field.md

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

packages/core/src/fields/viewFields/AbstractViewField.ts

@@ -4,13 +4,11 @@ import type { ViewFieldVariable } from 'packages/core/src/fields/viewFields/View
 import type { IPlugin } from 'packages/core/src/IPlugin';
 import type { DerivedMetadataSubscription } from 'packages/core/src/metadata/DerivedMetadataSubscription';
 import { Mountable } from 'packages/core/src/utils/Mountable';
-import { Signal } from 'packages/core/src/utils/Signal';
 import { DomHelpers } from 'packages/core/src/utils/Utils';
 
 export abstract class AbstractViewField<T> extends Mountable {
 	readonly plugin: IPlugin;
 	readonly mountable: ViewFieldMountable;
-	readonly metadataSignal: Signal<T | undefined>;
 
 	private metadataSubscription?: DerivedMetadataSubscription;
 
@@ -24,7 +22,6 @@ export abstract class AbstractViewField<T> extends Mountable {
 
 		this.mountable = mountable;
 		this.plugin = mountable.plugin;
-		this.metadataSignal = new Signal<T | undefined>(undefined);
 
 		this.variables = [];
 
@@ -47,15 +44,12 @@ export abstract class AbstractViewField<T> extends Mountable {
 		}
 
 		await this.onInitialRender(targetEl);
-
-		await this.rerender(targetEl, undefined);
 	}
 
 	protected abstract onInitialRender(container: HTMLElement): void | Promise<void>;
 
 	private async rerender(targetEl: HTMLElement, value: T | undefined): Promise<void> {
 		if (!this.hidden) {
-			DomHelpers.empty(targetEl);
 			await this.onRerender(targetEl, value);
 		}
 	}
@@ -65,7 +59,7 @@ export abstract class AbstractViewField<T> extends Mountable {
 	protected onMount(targetEl: HTMLElement): void {
 		this.buildVariables();
 
-		this.metadataSignal.registerListener({ callback: value => void this.rerender(targetEl, value) });
+		void this.initialRender(targetEl);
 
 		this.metadataSubscription = this.mountable.plugin.metadataManager.subscribeDerived(
 			this.mountable.getUuid(),
@@ -79,12 +73,9 @@ export abstract class AbstractViewField<T> extends Mountable {
 			},
 			() => this.mountable.unmount(),
 		);
-
-		void this.initialRender(targetEl);
 	}
 
 	protected onUnmount(): void {
-		this.metadataSignal.unregisterAllListeners();
 		this.metadataSubscription?.unsubscribe();
 	}
 }

packages/core/src/fields/viewFields/fields/ImageVF.ts

@@ -57,9 +57,16 @@ export class ImageVF extends AbstractViewField<MarkdownLink | MarkdownLink[] | u
 		const linkContent = this.linkVariable!.metadataSignal.get();
 
 		if (typeof linkContent === 'string') {
-			return [MDLinkParser.parseLink(linkContent)];
+			const link = MDLinkParser.interpretAsLink(linkContent);
+			if (link === undefined) {
+				return undefined;
+			}
+			return [link];
 		} else if (Array.isArray(linkContent)) {
-			return linkContent.filter(x => typeof x === 'string').map(x => MDLinkParser.parseLink(x));
+			return linkContent
+				.filter(x => typeof x === 'string')
+				.map(x => MDLinkParser.interpretAsLink(x))
+				.filter(x => x !== undefined);
 		} else {
 			return undefined;
 		}

packages/core/src/fields/viewFields/fields/LinkVF.ts

@@ -122,13 +122,20 @@ export class LinkVF extends AbstractViewField<MarkdownLink | MarkdownLink[] | un
 		const alias = this.getAlias();
 
 		if (typeof linkContent === 'string') {
-			const link = MDLinkParser.parseLink(linkContent);
+			const link = MDLinkParser.interpretAsLink(linkContent);
+			if (link === undefined) {
+				return undefined;
+			}
+
 			if (alias) {
 				link.alias = alias;
 			}
 			return [link];
 		} else if (Array.isArray(linkContent)) {
-			return linkContent.filter(x => typeof x === 'string').map(x => MDLinkParser.parseLink(x));
+			return linkContent
+				.filter(x => typeof x === 'string')
+				.map(x => MDLinkParser.interpretAsLink(x))
+				.filter(x => x !== undefined);
 		} else {
 			return undefined;
 		}

packages/core/src/fields/viewFields/fields/MathVF.ts

@@ -79,10 +79,9 @@ export class MathVF extends AbstractViewField<MathVFResult> {
 
 		const context = this.buildMathJSContext();
 		try {
-			const value: unknown = this.expression.evaluate(context);
-			const parsedValue = typeof value === 'string' ? parseLiteral(value) : value;
+			const value: string = `${this.expression.evaluate(context)}`;
 			return {
-				value: parsedValue,
+				value: parseLiteral(value),
 				error: false,
 			};
 		} catch (e) {

packages/core/src/parsers/MarkdownLinkParser.ts

@@ -111,37 +111,32 @@ export class MDLinkParser {
 		}
 	}
 
-	static toLinkString(str: string, alias?: string): string {
+	static interpretAsLink(str: string): MarkdownLink | undefined {
 		// case 1: it's a valid link
 		const linkParseTry = P_MDLink.thenEof().tryParse(str);
 		if (linkParseTry.success) {
-			if (alias) {
-				linkParseTry.value.alias = alias;
-			}
-
-			return linkParseTry.value.toString();
+			return linkParseTry.value;
 		}
 
 		// case 2: it's a valid inner link part, so something that is a valid link without the [[]] around it
 		const linkParseTry2 = P_MDLinkInner.thenEof().tryParse(str);
 		if (linkParseTry2.success) {
-			const link = new MarkdownLink(
+			return new MarkdownLink(
 				false,
 				linkParseTry2.value[0],
 				linkParseTry2.value[1],
-				alias ?? linkParseTry2.value[2],
-				false,
+				linkParseTry2.value[2],
+				true,
 			);
-			return link.toString();
 		}
 
 		// case 3: it's a url
 		if (isUrl(str)) {
 			const url = new URL(str);
-			return `[${alias ?? url.hostname}](${str})`;
+			return MarkdownLink.fromUrl(url);
 		}
 
 		// case 4: it's a valid link
-		return '';
+		return undefined;
 	}
 }

packages/core/src/utils/components/ImageGrid.svelte

@@ -11,12 +11,16 @@
 	} = $props();
 
 	export function updateImages(newImages: { link: string; internal: boolean }[]) {
+		console.warn('updating images');
+
 		images = newImages;
 	}
 </script>
 
 <div class="mb-image-card-grid">
 	{#each images as image}
 		<ImageCard plugin={plugin} image={image.link} internal={image.internal}></ImageCard>
+	{:else}
+		<span>No images</span>
 	{/each}
 </div>