This gist contains a simple implementation of the Signal and Effect pattern in JavaScript. The Signal pattern is a behavioral design pattern that allows communication between objects in a decoupled way, while the Effect pattern is a pattern that allows for the separation of side effects from the main logic of an application.

Signal.js

let currentListener = undefined;

function createSignal(initialValue) {
	let value = initialValue;

	const subscribers = new Set();

	const read = () => {
		if (currentListener !== undefined) {
			subscribers.add(currentListener);
		}
		return value;
	};
	const write = (newValue) => {
		value = newValue;
		subscribers.forEach((fn) => fn());
	};

	return [read, write];
}

function createEffect(callback) {
	currentListener = callback;
	// we call the callback so we start registering this listener to subscribers
	callback();
	currentListener = undefined;
}

Usage

const [count, setCount] = createSignal(0);

const button = document.createElement('button');
// call the effect so this will be registered 
// as a subscribers to the signal
createEffect(() => {
  // when the signal change it will call this inner function.
	button.innerText = count();
});

button.addEventListener('click', () => {
	setCount(count() + 1);
});

document.body.append(button);