refactor towards publish plugin

Author: mProjectsCode

exampleVault/Examples.md

@@ -1,5 +1,5 @@
 ---
-slider1: 9
+slider1: 8
 suggest: test
 toggle1: false
 Domestic_tasks:
@@ -13,7 +13,7 @@ inlineSelect: 0
 nested:
   object: test
 number1: 2
-number2: 18
+number2: 16
 ---
 
 ## Fields Work Everywhere

src/api/API.ts

@@ -25,7 +25,7 @@ import {
 import { ViewFieldFactory } from '../fields/viewFields/ViewFieldFactory';
 import { getUUID } from '../utils/Utils';
 import { parsePropPath } from '../utils/prop/PropParser';
-import { RenderChildType } from '../config/FieldConfigs';
+import { type RenderChildType } from '../config/FieldConfigs';
 import { type ButtonActionRunner } from '../fields/button/ButtonActionRunner';
 import { ButtonManager } from '../fields/button/ButtonManager';
 import { type BindTargetDeclaration, BindTargetStorageType } from '../parsers/bindTargetParser/BindTargetDeclaration';
@@ -118,7 +118,7 @@ export class API implements IAPI {
 
 		const declaration = this.inputFieldParser.validateDeclaration(unvalidatedDeclaration, filePath, scope);
 
-		const inputField = new InputFieldMDRC(containerEl, renderType, declaration, this.plugin, filePath, getUUID());
+		const inputField = new InputFieldMDRC(this.plugin, filePath, containerEl, renderType, declaration);
 		component.addChild(inputField);
 
 		return inputField;
@@ -158,7 +158,7 @@ export class API implements IAPI {
 
 		const declaration: InputFieldDeclaration = this.inputFieldParser.parseString(fullDeclaration, filePath, scope);
 
-		const inputField = new InputFieldMDRC(containerEl, renderType, declaration, this.plugin, filePath, getUUID());
+		const inputField = new InputFieldMDRC(this.plugin, filePath, containerEl, renderType, declaration);
 		component.addChild(inputField);
 
 		return inputField;
@@ -198,7 +198,7 @@ export class API implements IAPI {
 
 		const declaration: ViewFieldDeclaration = this.viewFieldParser.parseString(fullDeclaration, filePath, scope);
 
-		const viewField = new ViewFieldMDRC(containerEl, renderType, declaration, this.plugin, filePath, getUUID());
+		const viewField = new ViewFieldMDRC(this.plugin, filePath, containerEl, renderType, declaration);
 		component.addChild(viewField);
 
 		return viewField;
@@ -235,7 +235,7 @@ export class API implements IAPI {
 
 		const declaration: JsViewFieldDeclaration = this.viewFieldParser.parseJsString(fullDeclaration, filePath);
 
-		const viewField = new JsViewFieldMDRC(containerEl, renderType, declaration, this.plugin, filePath, getUUID());
+		const viewField = new JsViewFieldMDRC(this.plugin, filePath, containerEl, renderType, declaration);
 		component.addChild(viewField);
 
 		return viewField;
@@ -251,7 +251,7 @@ export class API implements IAPI {
 	public createExcludedField(containerEl: HTMLElement, filePath: string, component: ComponentLike): ExcludedMDRC {
 		validateArgs(V_API_createExcludedField, [containerEl, filePath, component]);
 
-		const excludedField = new ExcludedMDRC(containerEl, RenderChildType.INLINE, this.plugin, filePath, getUUID());
+		const excludedField = new ExcludedMDRC(this.plugin, filePath, containerEl);
 		component.addChild(excludedField);
 
 		return excludedField;
@@ -318,16 +318,7 @@ export class API implements IAPI {
 	): MetaBindTable {
 		validateArgs(V_API_createTable, [containerEl, filePath, component, bindTarget, tableHead, columns]);
 
-		const table = new MetaBindTable(
-			containerEl,
-			RenderChildType.INLINE,
-			this.plugin,
-			filePath,
-			getUUID(),
-			bindTarget,
-			tableHead,
-			columns,
-		);
+		const table = new MetaBindTable(this.plugin, filePath, containerEl, bindTarget, tableHead, columns);
 		component.addChild(table);
 
 		return table;
@@ -351,7 +342,7 @@ export class API implements IAPI {
 			return this.createExcludedField(containerEl, filePath, component);
 		}
 
-		const button = new ButtonMDRC(containerEl, fullDeclaration, this.plugin, filePath, getUUID(), false);
+		const button = new ButtonMDRC(this.plugin, filePath, containerEl, fullDeclaration, false);
 		component.addChild(button);
 
 		return button;
@@ -369,7 +360,7 @@ export class API implements IAPI {
 			return this.createExcludedField(containerEl, filePath, component);
 		}
 
-		const button = new InlineButtonMDRC(containerEl, fullDeclaration, this.plugin, filePath, getUUID());
+		const button = new InlineButtonMDRC(this.plugin, filePath, containerEl, fullDeclaration);
 		component.addChild(button);
 
 		return button;

src/api/IAPI.ts

@@ -7,6 +7,7 @@ import { type InputFieldFactory } from '../fields/inputFields/InputFieldFactory'
 import { type ButtonActionRunner } from '../fields/button/ButtonActionRunner';
 import { type ButtonManager } from '../fields/button/ButtonManager';
 import { type SyntaxHighlightingAPI } from './SyntaxHighlightingAPI';
+import { type ViewFieldFactory } from '../fields/viewFields/ViewFieldFactory';
 
 export interface IAPI {
 	readonly plugin: IPlugin;
@@ -29,6 +30,7 @@ export interface IAPI {
 	readonly bindTargetParser: BindTargetParser;
 
 	readonly inputFieldFactory: InputFieldFactory;
+	readonly viewFieldFactory: ViewFieldFactory;
 
 	readonly buttonActionRunner: ButtonActionRunner;
 	readonly buttonManager: ButtonManager;

src/api/internalApi/IInternalAPI.ts

@@ -2,6 +2,16 @@ import { type SuggesterLikeIFP, type SuggesterOption } from '../../fields/inputF
 import { type MBLiteral } from '../../utils/Literal';
 import { type ImageSuggesterIPF } from '../../fields/inputFields/fields/ImageSuggester/ImageSuggesterIPF';
 import { type DatePickerIPF } from '../../fields/inputFields/fields/DatePicker/DatePickerIPF';
+import type { ErrorCollection } from '../../utils/errors/ErrorCollection';
+import { type IJsRenderer } from '../../fields/viewFields/jsRenderer/IJsRenderer';
+
+export interface ErrorIndicatorProps {
+	errorCollection: ErrorCollection;
+	code?: string | undefined;
+	text?: string | undefined;
+	errorText?: string | undefined;
+	warningText?: string | undefined;
+}
 
 export interface IInternalAPI {
 	openTextPromptModal(
@@ -26,13 +36,19 @@ export interface IInternalAPI {
 
 	executeCommandById(id: string): boolean;
 
+	isJsEngineAvailable(): boolean;
+
 	jsEngineRunFile(filePath: string, callingFilePath: string, container?: HTMLElement): Promise<() => void>;
 
 	jsEngineRunCode(code: string, callingFilePath: string, container?: HTMLElement): Promise<() => void>;
 
+	createJsRenderer(container: HTMLElement, filePath: string, code: string): IJsRenderer;
+
 	openFile(filePath: string, callingFilePath: string, newTab: boolean): void;
 
 	getFilePathByName(name: string): string | undefined;
 
 	showNotice(message: string): void;
+
+	createErrorIndicator(element: HTMLElement, props: ErrorIndicatorProps): void;
 }

src/api/internalApi/ObsidianAPIAdapter.ts

@@ -1,4 +1,4 @@
-import { type IInternalAPI } from './IInternalAPI';
+import { type ErrorIndicatorProps, type IInternalAPI } from './IInternalAPI';
 import type MetaBindPlugin from '../../main';
 import { type App, Component, MarkdownRenderer, Notice, TFile } from 'obsidian';
 import { type DatePickerIPF } from '../../fields/inputFields/fields/DatePicker/DatePickerIPF';
@@ -10,6 +10,9 @@ import { openSuggesterModalForInputField } from '../../fields/inputFields/fields
 import { openImageSuggesterModalForInputField } from '../../fields/inputFields/fields/ImageSuggester/ImageSuggesterModalHelper';
 import { DatePickerInputModal } from '../../fields/inputFields/fields/DatePicker/DatePickerInputModal';
 import { getJsEnginePluginAPI } from '../../utils/ObsUtils';
+import ErrorIndicatorComponent from '../../utils/errors/ErrorIndicatorComponent.svelte';
+import { type IJsRenderer } from '../../fields/viewFields/jsRenderer/IJsRenderer';
+import { ObsidianJsRenderer } from '../../fields/viewFields/jsRenderer/ObsidianJsRenderer';
 
 export class ObsidianAPIAdapter implements IInternalAPI {
 	readonly plugin: MetaBindPlugin;
@@ -56,6 +59,15 @@ export class ObsidianAPIAdapter implements IInternalAPI {
 		return this.app.commands.executeCommandById(id);
 	}
 
+	public isJsEngineAvailable(): boolean {
+		try {
+			getJsEnginePluginAPI(this.plugin);
+			return true;
+		} catch (e) {
+			return false;
+		}
+	}
+
 	public async jsEngineRunFile(
 		filePath: string,
 		callingFilePath: string,
@@ -107,6 +119,10 @@ export class ObsidianAPIAdapter implements IInternalAPI {
 		return () => component.unload();
 	}
 
+	public createJsRenderer(container: HTMLElement, filePath: string, code: string): IJsRenderer {
+		return new ObsidianJsRenderer(this.plugin, container, filePath, code);
+	}
+
 	public openFile(filePath: string, callingFilePath: string, newTab: boolean): void {
 		void this.app.workspace.openLinkText(filePath, callingFilePath, newTab);
 	}
@@ -118,4 +134,14 @@ export class ObsidianAPIAdapter implements IInternalAPI {
 	public showNotice(message: string): void {
 		new Notice(message);
 	}
+
+	public createErrorIndicator(element: HTMLElement, props: ErrorIndicatorProps): void {
+		new ErrorIndicatorComponent({
+			target: element,
+			props: {
+				app: this.plugin.app,
+				props: props,
+			},
+		});
+	}
 }

src/api/internalApi/PublishAPIAdapter.ts

@@ -1,9 +1,10 @@
-import { type IInternalAPI } from './IInternalAPI';
+import { type ErrorIndicatorProps, type IInternalAPI } from './IInternalAPI';
 import { type MetaBindPublishPlugin } from '../../publish/Publish';
 import { type DatePickerIPF } from '../../fields/inputFields/fields/DatePicker/DatePickerIPF';
 import { type ImageSuggesterIPF } from '../../fields/inputFields/fields/ImageSuggester/ImageSuggesterIPF';
 import { type SuggesterLikeIFP, type SuggesterOption } from '../../fields/inputFields/fields/Suggester/SuggesterHelper';
 import { type MBLiteral } from '../../utils/Literal';
+import { type IJsRenderer } from '../../fields/viewFields/jsRenderer/IJsRenderer';
 
 // TODO: implement
 export class PublishAPIAdapter implements IInternalAPI {
@@ -39,6 +40,10 @@ export class PublishAPIAdapter implements IInternalAPI {
 		throw new Error('not implemented');
 	}
 
+	public isJsEngineAvailable(): boolean {
+		return false;
+	}
+
 	public jsEngineRunFile(_filePath: string, _callingFilePath: string, _container?: HTMLElement): Promise<() => void> {
 		return Promise.reject(new Error('not implemented'));
 	}
@@ -47,6 +52,10 @@ export class PublishAPIAdapter implements IInternalAPI {
 		return Promise.reject(new Error('not implemented'));
 	}
 
+	public createJsRenderer(_container: HTMLElement, _filePath: string, _code: string): IJsRenderer {
+		throw new Error('not implemented');
+	}
+
 	public openFile(_filePath: string, _callingFilePath: string, _newTab: boolean): void {
 		throw new Error('not implemented');
 	}
@@ -56,4 +65,6 @@ export class PublishAPIAdapter implements IInternalAPI {
 	}
 
 	public showNotice(_: string): void {}
+
+	public createErrorIndicator(_: HTMLElement, _props: ErrorIndicatorProps): void {}
 }

src/fields/IFieldBase.ts

@@ -0,0 +1,13 @@
+import type { IPlugin } from '../IPlugin';
+
+export interface IFieldBase {
+	readonly plugin: IPlugin;
+
+	getUuid(): string;
+
+	getFilePath(): string;
+
+	mount(): void;
+
+	destroy(): void;
+}

src/fields/button/ButtonBase.ts

@@ -0,0 +1,79 @@
+import { type IFieldBase } from '../IFieldBase';
+import { type IPlugin } from '../../IPlugin';
+import { ErrorCollection } from '../../utils/errors/ErrorCollection';
+import { showUnloadedMessage } from '../../utils/Utils';
+import { ButtonField } from './ButtonField';
+import { parseYaml } from 'obsidian';
+
+export type IButtonBase = IFieldBase;
+
+export class ButtonBase implements IButtonBase {
+	readonly plugin: IPlugin;
+	filePath: string;
+	uuid: string;
+	errorCollection: ErrorCollection;
+	containerEl: HTMLElement;
+
+	declarationString: string;
+	buttonField: ButtonField | undefined;
+	isPreview: boolean;
+
+	constructor(
+		plugin: IPlugin,
+		uuid: string,
+		filePath: string,
+		containerEl: HTMLElement,
+		declaration: string,
+		isPreview: boolean,
+	) {
+		this.plugin = plugin;
+		this.filePath = filePath;
+		this.containerEl = containerEl;
+		this.declarationString = declaration;
+		this.isPreview = isPreview;
+
+		this.uuid = uuid;
+		this.errorCollection = new ErrorCollection(this.uuid);
+	}
+
+	getUuid(): string {
+		return this.uuid;
+	}
+
+	getFilePath(): string {
+		return this.filePath;
+	}
+
+	mount(): void {
+		console.debug('meta-bind | ButtonBase >> mount');
+
+		this.containerEl.className = '';
+
+		const yamlContent = parseYaml(this.declarationString) as unknown;
+
+		this.buttonField = new ButtonField(this.plugin, yamlContent, this.filePath, false, this.isPreview);
+
+		try {
+			this.buttonField.mount(this.containerEl);
+		} catch (e) {
+			this.errorCollection.add(e);
+
+			this.plugin.internal.createErrorIndicator(this.containerEl, {
+				errorCollection: this.errorCollection,
+				errorText:
+					'Errors caused the creation of the field to fail. Sometimes one error only occurs because of another.',
+				warningText:
+					'Warnings will not cause the creation of a field to fail, but they indicate that a part of the declaration was invalid or uses deprecated functionality.',
+				code: this.declarationString,
+			});
+		}
+	}
+
+	destroy(): void {
+		console.debug('meta-bind | ButtonBase >> destroy');
+
+		this.buttonField?.unmount();
+
+		showUnloadedMessage(this.containerEl, 'button');
+	}
+}