Signals \o/

Author: mProjectsCode

exampleVault/Input Fields/Toggle.md

@@ -1,7 +1,7 @@
----
+---
 toggle: false
----
-
-```meta-bind
-INPUT[toggle(showcase):toggle]
+---
+
+```meta-bind
+INPUT[toggle(showcase):toggle]
 ```

exampleVault/Meta Bind JS.md

@@ -1,5 +1,5 @@
 ---
-select: d
+select: c
 ---
 
 test
@@ -9,12 +9,15 @@ const declaration = mb.createDeclaration(
 	[
 		{type: 'option', value: 'a'},
 		{type: 'option', value: 'c'},
-	],
-	'select'
+	]
 );
 
+mb.bindDeclaration(declaration, 'select');
+
 const inputField = mb.createInputField(declaration, undefined, 'block');
 
+inputField.readSignal.registerListener({callback: (value) => console.log(`test ${value}`)})
+
 ctx.addChild(inputField);
 ```
 
@@ -24,10 +27,11 @@ const declaration = mb.createDeclaration(
 	[
 		{type: 'option', value: 'd'},
 		{type: 'option', value: 'e'},
-	],
-	'select'
+	]
 );
 
+mb.bindDeclaration(declaration, 'select');
+
 const inputField = mb.createInputField(declaration, undefined, 'block');
 
 ctx.addChild(inputField);

exampleVault/examples.md

@@ -72,43 +72,10 @@ Lorem ipsum dolor sit amet, `INPUT[date():other note#date]` consectetur adipisci
 - `INPUT[slider(nonExistantArgument)]`
 - `INPUT[select(option(option a),option(option b),option(option c),option(option d)):select]`
 
+
+Lorem ipsum dolor sit amet, `INPUT[text():meta bind/nonExistantFile#title]` consectetur adipiscing elit. Pellentesque sit amet porttitor arcu. Quisque scelerisque dolor augue, et posuere nulla bibendum nec. `INPUT[slider(nonExistantArgument)]` Curabitur sed rhoncus nisl. Maecenas nisi justo, viverra vel tempus vel, hendrerit at metus. `INPUT[select(option(option a),option(option b),option(option c),option(option d)):select]`  asdasd asdasdasd
+
 Code block error
 ```meta-bind
 INPUT[slider(nonExistantArgument)]
-```
-
-
-
-
-
->[!info]+ Trackers
->`````col
->flexgrow=2
->===
->````col-md
->##### ○ Slept
->```meta-bind
->INPUT[time(class(meta-bind-full-width)):Slept]
->```
->````
->
->````col-md
->##### ○ Woke Up
->```meta-bind
->INPUT[time(class(meta-bind-full-width)):WokeUp]
->```
->````
->````col-md
->##### ○ Stretch (minutes)
->```meta-bind
->INPUT[number(class(meta-bind-full-width)):Stretch]
->```
->````
->
->````col-md
->##### ○ Meditate (minutes)
->```meta-bind
->INPUT[number(class(meta-bind-full-width)):Meditate]
->```
->````
->`````
+```

exampleVault/other note.md

@@ -1,4 +1,7 @@
 ---
+"1": A
+"2": C
+"6": false
 tags: test
 title: test
 select: option b
@@ -37,4 +40,5 @@ option(option b),
 option(option c),
 option(option d)
 ):select]
-```
+```
+

src/API.ts

@@ -41,16 +41,7 @@ export class API {
 		return new InputFieldMarkdownRenderChild(container, renderType, declaration, this.plugin, filePath, crypto.randomUUID());
 	}
 
-	public createDeclaration(
-		inputFieldType: InputFieldType,
-		inputFieldArguments?: { type: InputFieldArgumentType; value: string }[],
-		bindTargetField?: string,
-		bindTargetFile?: string
-	): InputFieldDeclaration {
-		if (bindTargetFile && !bindTargetField) {
-			throw new MetaBindBindTargetError('if a bind target file is specified, a bind target field must also be specified');
-		}
-
+	public createDeclaration(inputFieldType: InputFieldType, inputFieldArguments?: { type: InputFieldArgumentType; value: string }[]): InputFieldDeclaration {
 		if (this.parser.getInputFieldType(inputFieldType) === InputFieldType.INVALID) {
 			throw new MetaBindParsingError(`input field type '${inputFieldType}' is invalid`);
 		}
@@ -60,13 +51,24 @@ export class API {
 			fullDeclaration: undefined,
 			inputFieldType: inputFieldType,
 			argumentContainer: this.parser.parseArguments(inputFieldType, inputFieldArguments),
-			isBound: isTruthy(bindTargetField),
-			bindTarget: bindTargetFile ? bindTargetFile + '#' + bindTargetField : bindTargetField,
+			isBound: false,
+			bindTarget: '',
 			error: undefined,
 		} as InputFieldDeclaration;
 	}
 
 	public createDeclarationFromString(fullDeclaration: string): InputFieldDeclaration {
 		return this.parser.parseString(fullDeclaration);
 	}
+
+	public bindDeclaration(declaration: InputFieldDeclaration, bindTargetField: string, bindTargetFile?: string): InputFieldDeclaration {
+		if (bindTargetFile && !bindTargetField) {
+			throw new MetaBindBindTargetError('if a bind target file is specified, a bind target field must also be specified');
+		}
+
+		declaration.isBound = isTruthy(bindTargetField);
+		declaration.bindTarget = bindTargetFile ? bindTargetFile + '#' + bindTargetField : bindTargetField;
+
+		return declaration;
+	}
 }

src/InlineAPI.ts

@@ -1,6 +1,8 @@
 import { API } from './API';
 import { InputFieldArgumentType, InputFieldDeclaration, InputFieldType } from './parsers/InputFieldDeclarationParser';
 import { InputFieldMarkdownRenderChild, RenderChildType } from './InputFieldMarkdownRenderChild';
+import { MetaBindBindTargetError } from './utils/MetaBindErrors';
+import { isTruthy } from './utils/Utils';
 
 export class InlineAPI {
 	public api: API;
@@ -42,16 +44,15 @@ export class InlineAPI {
 		return this.api.createInputFieldFromString(fullDeclaration, renderType, filePath, container);
 	}
 
-	public createDeclaration(
-		inputFieldType: InputFieldType,
-		inputFieldArguments?: { type: InputFieldArgumentType; value: string }[],
-		bindTargetField?: string,
-		bindTargetFile?: string
-	): InputFieldDeclaration {
-		return this.api.createDeclaration(inputFieldType, inputFieldArguments, bindTargetField, bindTargetFile);
+	public createDeclaration(inputFieldType: InputFieldType, inputFieldArguments?: { type: InputFieldArgumentType; value: string }[]): InputFieldDeclaration {
+		return this.api.createDeclaration(inputFieldType, inputFieldArguments);
 	}
 
 	public createDeclarationFromString(fullDeclaration: string): InputFieldDeclaration {
 		return this.api.createDeclarationFromString(fullDeclaration);
 	}
+
+	public bindDeclaration(declaration: InputFieldDeclaration, bindTargetField: string, bindTargetFile?: string): InputFieldDeclaration {
+		return this.api.bindDeclaration(declaration, bindTargetField, bindTargetFile);
+	}
 }

src/InputFieldMarkdownRenderChild.ts

@@ -11,6 +11,7 @@ import { parsePath, traverseObjectByPath } from '@opd-libs/opd-utils-lib/lib/Obj
 import { ShowcaseInputFieldArgument } from './inputFieldArguments/ShowcaseInputFieldArgument';
 import { TitleInputFieldArgument } from './inputFieldArguments/TitleInputFieldArgument';
 import { isTruthy } from './utils/Utils';
+import { Listener, Signal } from './utils/Signal';
 
 export enum RenderChildType {
 	INLINE = 'inline',
@@ -30,12 +31,19 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	inputFieldDeclaration: InputFieldDeclaration;
 	bindTargetFile: TFile | undefined;
 	bindTargetMetadataPath: string[] | undefined;
-
-	intervalCounter: number;
-	metadataValueUpdateQueue: any[];
-	inputFieldValueUpdateQueue: any[];
-
-	constructor(containerEl: HTMLElement, type: RenderChildType, declaration: InputFieldDeclaration, plugin: MetaBindPlugin, filePath: string, uuid: string) {
+	private metadataManagerReadSignalListener: Listener<any> | undefined;
+
+	// maybe 2: in/out
+	/**
+	 * Signal to write to the input field
+	 */
+	public writeSignal: Signal<any>;
+	/**
+	 * Signal to read from the input field
+	 */
+	public readSignal: Signal<any>;
+
+	constructor(containerEl: HTMLElement, renderChildType: RenderChildType, declaration: InputFieldDeclaration, plugin: MetaBindPlugin, filePath: string, uuid: string) {
 		super(containerEl);
 
 		if (!declaration.error) {
@@ -47,24 +55,22 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 		this.filePath = filePath;
 		this.uuid = uuid;
 		this.plugin = plugin;
-		this.renderChildType = type;
+		this.renderChildType = renderChildType;
 		this.fullDeclaration = declaration.fullDeclaration;
-
-		this.metadataValueUpdateQueue = [];
-		this.inputFieldValueUpdateQueue = [];
-		this.intervalCounter = 0;
 		this.inputFieldDeclaration = declaration;
 
+		this.writeSignal = new Signal<any>(undefined);
+		this.readSignal = new Signal<any>(undefined);
+
 		if (!this.error) {
 			try {
 				if (this.inputFieldDeclaration.isBound) {
 					this.parseBindTarget();
 				}
 
 				this.inputField = InputFieldFactory.createInputField(this.inputFieldDeclaration.inputFieldType, {
-					type: type,
+					renderChildType: renderChildType,
 					inputFieldMarkdownRenderChild: this,
-					onValueChanged: this.updateMetadataManager.bind(this),
 				});
 			} catch (e: any) {
 				this.error = e.message;
@@ -113,35 +119,31 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 	}
 
 	registerSelfToMetadataManager(): MetadataFileCache | undefined {
+		// if bind target is invalid, return
 		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataPath || this.bindTargetMetadataPath?.length === 0) {
 			return;
 		}
 
-		return this.plugin.metadataManager.register(
-			this.bindTargetFile,
-			value => {
-				if (!this.inputField) {
-					throw new MetaBindInternalError('inputField is undefined, can not update inputField');
-				}
+		this.metadataManagerReadSignalListener = this.readSignal.registerListener({ callback: this.updateMetadataManager.bind(this) });
 
-				if (!this.inputField.isEqualValue(value)) {
-					this.inputField.setValue(value);
-				}
-			},
-			this.bindTargetMetadataPath,
-			this.uuid
-		);
+		return this.plugin.metadataManager.register(this.bindTargetFile, this.writeSignal, this.bindTargetMetadataPath, this.uuid);
 	}
 
 	unregisterSelfFromMetadataManager(): void {
+		// if bind target is invalid, return
 		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataPath || this.bindTargetMetadataPath?.length === 0) {
 			return;
 		}
 
+		if (this.metadataManagerReadSignalListener) {
+			this.readSignal.unregisterListener(this.metadataManagerReadSignalListener);
+		}
+
 		this.plugin.metadataManager.unregister(this.bindTargetFile, this.uuid);
 	}
 
 	updateMetadataManager(value: any): void {
+		// if bind target is invalid, return
 		if (!this.inputFieldDeclaration?.isBound || !this.bindTargetFile || !this.bindTargetMetadataPath || this.bindTargetMetadataPath?.length === 0) {
 			return;
 		}
@@ -179,32 +181,31 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 		);
 	}
 
+	hasValidBindTarget(): boolean {
+		return isTruthy(this.inputFieldDeclaration?.isBound) && isTruthy(this.bindTargetFile) && isTruthy(this.bindTargetMetadataPath) && this.bindTargetMetadataPath?.length !== 0;
+	}
+
 	async onload(): Promise<void> {
 		console.log('meta-bind | InputFieldMarkdownRenderChild >> load', this);
 
+		this.containerEl.addClass('meta-bind-plugin-input');
+
 		const container: HTMLDivElement = createDiv();
 		container.addClass('meta-bind-plugin-input-wrapper');
-		this.containerEl.addClass('meta-bind-plugin-input');
 
 		if (this.error) {
-			this.containerEl.empty();
-			this.containerEl.createEl('span', { text: this.fullDeclaration, cls: 'meta-bind-code' });
-			container.innerText = ` -> ERROR: ${this.error}`;
-			container.addClass('meta-bind-plugin-error');
-			this.containerEl.appendChild(container);
+			this.renderError(this.error);
 			return;
 		}
 
 		if (!this.inputField) {
-			this.containerEl.empty();
-			this.containerEl.createEl('span', { text: this.fullDeclaration, cls: 'meta-bind-code' });
-			container.innerText = ` -> ERROR: ${new MetaBindInternalError('input field is undefined and error is empty').message}`;
-			container.addClass('meta-bind-plugin-error');
-			this.containerEl.appendChild(container);
+			this.renderError(new MetaBindInternalError('input field is undefined and error is empty').message);
 			return;
 		}
 
-		this.metadataCache = this.registerSelfToMetadataManager();
+		if (this.hasValidBindTarget()) {
+			this.metadataCache = this.registerSelfToMetadataManager();
+		}
 		this.plugin.registerInputFieldMarkdownRenderChild(this);
 
 		this.inputField.render(container);
@@ -236,6 +237,20 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 		}
 	}
 
+	renderError(message: string): void {
+		this.containerEl.empty();
+
+		if (this.renderChildType === RenderChildType.BLOCK) {
+			const cardContainer: HTMLDivElement = this.containerEl.createDiv({ cls: 'meta-bind-plugin-card' });
+
+			cardContainer.createEl('code', { text: ` ${this.fullDeclaration} ` });
+			cardContainer.createEl('span', { text: message, cls: 'meta-bind-plugin-error' });
+		} else {
+			this.containerEl.createEl('code', { text: ` ${this.fullDeclaration}` });
+			this.containerEl.createEl('code', { text: `-> ${message}`, cls: 'meta-bind-plugin-error' });
+		}
+	}
+
 	onunload(): void {
 		console.log('meta-bind | InputFieldMarkdownRenderChild >> unload', this);
 
@@ -244,7 +259,7 @@ export class InputFieldMarkdownRenderChild extends MarkdownRenderChild {
 		this.unregisterSelfFromMetadataManager();
 
 		this.containerEl.empty();
-		this.containerEl.remove();
+		this.containerEl.createEl('span', { text: 'unloaded meta bind input field', cls: 'meta-bind-plugin-error' });
 
 		super.onunload();
 	}