refactor(tweakpane): use computed for a lot of bindings stuff instead of set signal

Author: nartc

libs/tweakpane/src/lib/binding.ts

@@ -16,11 +16,6 @@ import { NgtTweakDebounce } from './debounce';
 import { NgtTweakFolder } from './folder';
 import { NgtTweakLabel } from './label';
 
-export type NgtTweakBindingParams<TParams extends BindingParams> = Omit<
-	TParams,
-	'tag' | 'label' | 'disabled' | 'hidden'
->;
-
 export const NGT_TWEAK_BINDING_AS_HOST = new InjectionToken<
 	true | { in: (value: unknown) => unknown; out: (value: unknown) => unknown } | null
 >('hostDirective NgtTweakBinding', { factory: () => null });
@@ -47,13 +42,13 @@ export class NgtTweakBinding<TValue> {
 	private injector = inject(Injector);
 	private asHostDirective = inject(NGT_TWEAK_BINDING_AS_HOST);
 
-	binding = signal<BindingApi<unknown, TValue> | null>(null);
 	private bindingBaseParams = computed(() => ({
 		label: this.label.snapshot.label,
 		tag: this.label.snapshot.tag,
 		disabled: this.blade.disabled(),
 		hidden: this.blade.hidden(),
 	}));
+	private bindingParams = signal<Record<string, unknown>>({});
 
 	private get bindableObject() {
 		let value = untracked(this.value);
@@ -65,43 +60,64 @@ export class NgtTweakBinding<TValue> {
 		return { value };
 	}
 
+	private bindingApi = computed(() => {
+		const parent = this.parent.folder();
+		if (!parent) return null;
+
+		const bindingParams = { ...this.bindingBaseParams(), ...this.bindingParams() };
+		return parent.addBinding(this.bindableObject, 'value', bindingParams) as BindingApi<unknown, TValue>;
+	});
+
 	constructor() {
-		this.blade.startChangeEffect(this.binding);
-		this.label.startChangeEffect(this.binding);
-		this.debounce.startDebounceEffect(this.binding, (ev) => {
+		this.blade.startChangeEffect(this.bindingApi);
+		this.label.startChangeEffect(this.bindingApi);
+		this.debounce.startDebounceEffect(this.bindingApi, (ev) => {
 			if (this.asHostDirective && typeof this.asHostDirective === 'object') {
 				this.value.set(this.asHostDirective.out(ev.value) as TValue);
 			} else {
 				this.value.set(ev.value);
 			}
 		});
 
-		if (!this.asHostDirective) {
-			this.createBindingEffect(this.bindingBaseParams);
-		}
+		effect((onCleanup) => {
+			const bindingApi = this.bindingApi();
+			if (!bindingApi) return;
+			onCleanup(() => {
+				bindingApi.dispose();
+			});
+		});
 
 		inject(DestroyRef).onDestroy(() => {
-			this.binding()?.dispose();
+			this.bindingApi()?.dispose();
 		});
 	}
 
-	createBindingEffect(params: () => BindingParams) {
+	syncBindingParams(params: () => BindingParams) {
 		return effect(
-			(onCleanup) => {
-				const parent = this.parent.folder();
-				if (!parent) return;
-
-				const bindingParams = { ...this.bindingBaseParams(), ...params() };
-				const binding = parent.addBinding(this.bindableObject, 'value', bindingParams);
-
-				this.binding.set(binding);
-
-				onCleanup(() => {
-					binding.dispose();
-					this.binding.set(null);
-				});
+			() => {
+				this.bindingParams.set(params());
 			},
 			{ injector: this.injector },
 		);
 	}
+
+	// createBindingEffect(params: () => BindingParams) {
+	// 	return effect(
+	// 		(onCleanup) => {
+	// 			const parent = this.parent.folder();
+	// 			if (!parent) return;
+	//
+	// 			const bindingParams = { ...this.bindingBaseParams(), ...params() };
+	// 			const binding = parent.addBinding(this.bindableObject, 'value', bindingParams);
+	//
+	// 			this.bindingApi.set(binding);
+	//
+	// 			onCleanup(() => {
+	// 				binding.dispose();
+	// 				this.bindingApi.set(null);
+	// 			});
+	// 		},
+	// 		{ injector: this.injector },
+	// 	);
+	// }
 }

libs/tweakpane/src/lib/button.ts

@@ -1,60 +1,58 @@
-import { DestroyRef, Directive, effect, inject, input, output, signal, untracked } from '@angular/core';
+import { computed, DestroyRef, Directive, effect, inject, output } from '@angular/core';
 import { TpMouseEvent } from '@tweakpane/core';
 import { ButtonApi } from 'tweakpane';
 import { NgtTweakBlade } from './blade';
 import { NgtTweakFolder } from './folder';
+import { NgtTweakLabel } from './label';
 import { NgtTweakTitle } from './title';
 
 @Directive({
 	selector: 'ngt-tweak-button',
 	hostDirectives: [
 		{ directive: NgtTweakTitle, inputs: ['title'] },
+		{ directive: NgtTweakLabel, inputs: ['label'] },
 		{ directive: NgtTweakBlade, inputs: ['hidden', 'disabled'] },
 	],
 })
 export class NgtTweakButton {
-	label = input('');
 	click = output<TpMouseEvent<ButtonApi>>();
 
 	private title = inject(NgtTweakTitle);
+	private label = inject(NgtTweakLabel);
 	private blade = inject(NgtTweakBlade);
 	private parent = inject(NgtTweakFolder);
 
-	button = signal<ButtonApi | null>(null);
+	private buttonApi = computed(() => {
+		const parent = this.parent.folder();
+		if (!parent) return null;
+
+		return parent.addButton({
+			title: this.title.snapshot,
+			hidden: this.blade.snapshot.hidden,
+			disabled: this.blade.snapshot.disabled,
+			label: this.label.snapshot.label,
+		});
+	});
 
 	constructor() {
 		effect((onCleanup) => {
-			const parent = this.parent.folder();
-			if (!parent) return;
-
-			const button = parent.addButton({
-				title: this.title.snapshot,
-				hidden: this.blade.snapshot.hidden,
-				disabled: this.blade.snapshot.disabled,
-				label: untracked(this.label),
-			});
+			const buttonApi = this.buttonApi();
+			if (!buttonApi) return;
 
 			const boundEmit = this.click.emit.bind(this.click);
-			button.on('click', boundEmit);
-			this.button.set(button);
+			buttonApi.on('click', boundEmit);
 
 			onCleanup(() => {
-				button.off('click', boundEmit);
+				buttonApi.off('click', boundEmit);
 			});
 		});
 
-		effect(() => {
-			const button = this.button();
-			if (!button) return;
-
-			button.label = this.label();
-		});
-
-		this.title.startChangeEffect(this.button);
-		this.blade.startChangeEffect(this.button);
+		this.label.startChangeEffect(this.buttonApi);
+		this.title.startChangeEffect(this.buttonApi);
+		this.blade.startChangeEffect(this.buttonApi);
 
 		inject(DestroyRef).onDestroy(() => {
-			this.button()?.dispose();
+			this.buttonApi()?.dispose();
 		});
 	}
 }

libs/tweakpane/src/lib/checkbox.ts

@@ -13,6 +13,6 @@ export class NgtTweakCheckbox {
 	private binding = inject(NgtTweakBinding);
 
 	constructor() {
-		this.binding.createBindingEffect(this.params);
+		this.binding.syncBindingParams(this.params);
 	}
 }

libs/tweakpane/src/lib/color.ts

@@ -13,6 +13,6 @@ export class NgtTweakColor {
 	private binding = inject(NgtTweakBinding);
 
 	constructor() {
-		this.binding.createBindingEffect(this.params);
+		this.binding.syncBindingParams(this.params);
 	}
 }

libs/tweakpane/src/lib/list.ts

@@ -1,4 +1,4 @@
-import { computed, DestroyRef, Directive, effect, inject, input, model, signal, untracked } from '@angular/core';
+import { computed, DestroyRef, Directive, effect, inject, input, model, untracked } from '@angular/core';
 import { ListItem } from '@tweakpane/core';
 import { ListBladeApi } from 'tweakpane';
 import { NgtTweakBlade } from './blade';
@@ -23,7 +23,6 @@ export class NgtTweakList<TOptionValue> {
 	private label = inject(NgtTweakLabel);
 	private parent = inject(NgtTweakFolder);
 
-	list = signal<ListBladeApi<TOptionValue> | null>(null);
 	private listOptions = computed(() => {
 		const options = this.options();
 		if (Array.isArray(options)) {
@@ -35,34 +34,34 @@ export class NgtTweakList<TOptionValue> {
 			return { text: key, value } as ListItem<TOptionValue>;
 		});
 	});
+	private listApi = computed(() => {
+		const parent = this.parent.folder();
+		if (!parent) return null;
+
+		return parent.addBlade({
+			view: 'list',
+			options: this.listOptions(),
+			value: untracked(this.value),
+			label: this.label.snapshot.label,
+		}) as ListBladeApi<TOptionValue>;
+	});
 
 	constructor() {
-		this.label.startChangeEffect(this.list);
-		this.blade.startChangeEffect(this.list);
-		this.debounce.startDebounceEffect(this.list, (ev) => {
+		this.label.startChangeEffect(this.listApi);
+		this.blade.startChangeEffect(this.listApi);
+		this.debounce.startDebounceEffect(this.listApi, (ev) => {
 			this.value.set(ev.value);
 		});
 
 		effect((onCleanup) => {
-			const parent = this.parent.folder();
-			if (!parent) return;
-
-			const list = parent.addBlade({
-				view: 'list',
-				options: this.listOptions(),
-				value: untracked(this.value),
-				label: this.label.snapshot.label,
-			}) as ListBladeApi<TOptionValue>;
-
-			this.list.set(list);
-
+			const listApi = this.listApi();
 			onCleanup(() => {
-				list.dispose();
+				listApi?.dispose();
 			});
 		});
 
 		inject(DestroyRef).onDestroy(() => {
-			this.list()?.dispose();
+			this.listApi()?.dispose();
 		});
 	}
 }

libs/tweakpane/src/lib/number.ts

@@ -13,6 +13,6 @@ export class NgtTweakNumber {
 	private binding = inject(NgtTweakBinding);
 
 	constructor() {
-		this.binding.createBindingEffect(this.params);
+		this.binding.syncBindingParams(this.params);
 	}
 }

libs/tweakpane/src/lib/point.ts

@@ -31,6 +31,6 @@ export class NgtTweakPoint {
 	private binding = inject(NgtTweakBinding);
 
 	constructor() {
-		this.binding.createBindingEffect(this.params);
+		this.binding.syncBindingParams(this.params);
 	}
 }

libs/tweakpane/src/lib/text.ts

@@ -13,6 +13,6 @@ export class NgtTweakText {
 	private binding = inject(NgtTweakBinding);
 
 	constructor() {
-		this.binding.createBindingEffect(this.params);
+		this.binding.syncBindingParams(this.params);
 	}
 }