fix reactivity bug

Author: eye-wave

docs/src/examples/ImageKnob.svelte

@@ -4,4 +4,4 @@
 	let value = $state(0.0);
 </script>
 
-<ImageKnob bind:value src="/PurpleKnob2.webp" width={90} height={90} />
+<ImageKnob bind:value src="/web-knobs/PurpleKnob2.webp" width={90} height={90} />

docs/src/pages/index.astro

@@ -112,14 +112,14 @@ const logos = [
 		const [arcFull, arc, logo] = el.querySelectorAll('svg path')!;
 		const val = Math.random();
 
-		arcFull.setAttribute('d', describeArc(12, 12, 10, 1, -135, 135));
+		arcFull?.setAttribute('d', describeArc(12, 12, 10, 1, -135, 135));
 
 		draw(val);
 		function draw(v: number) {
 			const angle = valueToAngle(v, 0, 180);
 
-			arc.setAttribute('d', describeArc(12, 12, 10, v, -135, 135));
-			logo.setAttribute(
+			arc?.setAttribute('d', describeArc(12, 12, 10, v, -135, 135));
+			logo?.setAttribute(
 				'transform',
 				`translate(12 12) scale(0.5) translate(-12 -12) rotate(${angle} 12 12)`
 			);

packages/core/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@web-knobs/core",
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"type": "module",
 	"exports": {
 		".": {

packages/core/src/components/image-knob.ts

@@ -4,7 +4,7 @@ import {
 	type DraggableApi,
 	type DraggableOptions
 } from '../draggable';
-import { addReactive, type WithSilent } from '../helpers';
+import { addReactive } from '../helpers';
 
 export type ImageKnobReactive = {
 	/**
@@ -46,8 +46,7 @@ export type ImageKnobOptions = DraggableOptions & {
 	onHeightChange?: (v: number) => void;
 } & ImageKnobReactive;
 
-type ImageStateRaw = Required<ImageKnobReactive>;
-type ImageState = WithSilent<ImageStateRaw>;
+type ImageState = Required<ImageKnobReactive>;
 
 export function createImageKnob<E extends HTMLElement>(
 	container: E,
@@ -67,36 +66,48 @@ export function createImageKnob<E extends HTMLElement>(
 		}
 	};
 
+	const engine = createDraggable(container, {
+		...options,
+		onValueChange(v) {
+			options.onValueChange?.(v);
+			draw(v);
+		}
+	}) as ImageKnobApi;
+
 	addReactive(state, 'src', options.src, (src) => {
 		options.onSrcChange?.(src);
 
 		image.src = src;
 		container.style.backgroundImage = `url(${src})`;
 	});
 	addReactive(state, 'numberOfFrames', null, options.onNumberOfFramesChange);
-	addReactive(state, 'width', options.width, (width) => {
-		options.onWidthChange?.(width);
-
-		container.style.width = width + 'px';
-		draw(engine.__state.value);
-	});
-	addReactive(state, 'height', options.height, (height) => {
-		options.onHeightChange?.(height);
-
-		container.style.width = height + 'px';
-		draw(engine.__state.value);
-	});
+	addReactive(
+		state,
+		'width',
+		options.width,
+		(width) => {
+			options.onWidthChange?.(width);
+
+			container.style.width = width + 'px';
+			draw(engine.__state.value);
+		},
+		false
+	);
+	addReactive(
+		state,
+		'height',
+		options.height,
+		(height) => {
+			options.onHeightChange?.(height);
+
+			container.style.width = height + 'px';
+			draw(engine.__state.value);
+		},
+		false
+	);
 
 	Object.freeze(state);
 
-	const engine = createDraggable(container, {
-		...options,
-		onValueChange(v) {
-			options.onValueChange?.(v);
-			draw(v);
-		}
-	}) as ImageKnobApi;
-
 	container.style.width = options.width + 'px';
 	container.style.height = options.height + 'px';
 
@@ -111,10 +122,10 @@ export function createImageKnob<E extends HTMLElement>(
 		}
 	});
 
-	engine.setSrc = (v) => state.srcSilent(v);
-	engine.setNumberOfFrames = (v) => state.numberOfFramesSilent(v);
-	engine.setWidth = (v) => state.widthSilent(v);
-	engine.setHeight = (v) => state.heightSilent(v);
+	engine.setSrc = (v) => (state.src = v);
+	engine.setNumberOfFrames = (v) => (state.numberOfFrames = v);
+	engine.setWidth = (v) => (state.width = v);
+	engine.setHeight = (v) => (state.height = v);
 
 	return engine;
 }

packages/core/src/components/svg-knob.ts

@@ -4,13 +4,7 @@ import {
 	type DraggableApi,
 	type DraggableOptions
 } from '../draggable';
-import {
-	addReactive,
-	describeArc,
-	polarToCartesian,
-	valueToAngle,
-	type WithSilent
-} from '../helpers';
+import { addReactive, describeArc, polarToCartesian, valueToAngle } from '../helpers';
 
 export const DEFAULT_SIZE = 80;
 export const DEFAULT_BG_COLOR = '#333';
@@ -85,8 +79,7 @@ export type SvgKnobOptions = DraggableOptions & {
 	onSnapPointLengthChange?: (v: number) => void;
 } & SvgKnobReactive;
 
-type SvgStateRaw = Required<SvgKnobReactive>;
-type SvgState = WithSilent<SvgStateRaw>;
+type SvgState = Required<SvgKnobReactive>;
 
 export function createSvgKnob<E extends HTMLElement>(
 	container: E,
@@ -327,15 +320,15 @@ export function createSvgKnob<E extends HTMLElement>(
 		}
 	});
 
-	engine.setArcRadius = (v) => state.arcRadiusSilent(v);
-	engine.setBgColor = (v) => state.bgColorSilent(v);
-	engine.setCircleRadius = (v) => state.circleRadiusSilent(v);
-	engine.setDisabledColor = (v) => state.disabledColorSilent(v);
-	engine.setMaxAngle = (v) => state.maxAngleSilent(v);
-	engine.setMinAngle = (v) => state.minAngleSilent(v);
-	engine.setPointerLength = (v) => state.pointerLengthSilent(v);
-	engine.setSize = (v) => state.sizeSilent(v);
-	engine.setSnapPointLength = (v) => state.snapPointLengthSilent(v);
+	engine.setArcRadius = (v) => (state.arcRadius = v);
+	engine.setBgColor = (v) => (state.bgColor = v);
+	engine.setCircleRadius = (v) => (state.circleRadius = v);
+	engine.setDisabledColor = (v) => (state.disabledColor = v);
+	engine.setMaxAngle = (v) => (state.maxAngle = v);
+	engine.setMinAngle = (v) => (state.minAngle = v);
+	engine.setPointerLength = (v) => (state.pointerLength = v);
+	engine.setSize = (v) => (state.size = v);
+	engine.setSnapPointLength = (v) => (state.snapPointLength = v);
 
 	return engine;
 }

packages/core/src/draggable.ts

@@ -1,5 +1,5 @@
 import { clamp } from './helpers';
-import { addReactive, type WithSilent } from './helpers/reactive';
+import { addReactive } from './helpers/reactive';
 
 export const DEFAULT_KNOB_VALUE = 0.5;
 export const DEFAULT_KNOB_STEP = 0.05;
@@ -49,8 +49,7 @@ export type DraggableOptions = {
 	onWeightChange?: (v: number) => void;
 } & DraggableReactive;
 
-type DragStateRaw = Required<DraggableReactive>;
-type DragState = WithSilent<DragStateRaw>;
+type DragState = Required<DraggableReactive>;
 
 /** Creates a Knob API inside an existing HTML element */
 export function createDraggable<E extends HTMLElement>(
@@ -233,14 +232,14 @@ export function createDraggable<E extends HTMLElement>(
 			return s;
 		},
 		destroy,
-		setValue: (v) => s.valueSilent(v),
-		setDisabled: (v) => s.disabledSilent(v),
-		setDefaultValue: (v) => s.defaultValueSilent(v),
-		setInvertWheel: (v) => s.invertWheelSilent(v),
-		setStep: (v) => s.stepSilent(v),
-		setSnapPoints: (v) => s.snapPointsSilent(v),
-		setSnapThreshold: (v) => s.snapThresholdSilent(v),
-		setWeight: (v) => s.weightSilent(v)
+		setValue: (v) => (s.value = v),
+		setDisabled: (v) => (s.disabled = v),
+		setDefaultValue: (v) => (s.defaultValue = v),
+		setInvertWheel: (v) => (s.invertWheel = v),
+		setStep: (v) => (s.step = v),
+		setSnapPoints: (v) => (s.snapPoints = v),
+		setSnapThreshold: (v) => (s.snapThreshold = v),
+		setWeight: (v) => (s.weight = v)
 	};
 }
 

packages/core/src/helpers/reactive.ts

@@ -1,7 +1,3 @@
-export type WithSilent<T> = T & {
-	[K in keyof T as `${Extract<K, string>}Silent`]: (v: T[K]) => void;
-};
-
 export function addReactive<T>(
 	// this 'any' is safe, special types are overriding it later in the code
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -18,17 +14,13 @@ export function addReactive<T>(
 			return value;
 		},
 		set(v: T) {
+			if (value != v) callback?.(v);
 			value = v;
-			callback?.(v);
 		},
 		configurable: false,
 		enumerable: false
 	});
 
-	api[fieldName + 'Silent'] = (v: T) => {
-		value = v;
-	};
-
 	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
 	instantCall && callback?.(init);
 }

packages/web-knobs/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eyewave/web-knobs",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"license": "MIT",
 	"description": " Cross-framework component library for building audio software on the web.",
 	"repository": {