SolidJS implementation of signals from scratch using the Pub-Sub pattern.

index.js

import { createSignal, createEffect } from "./signal.js";
const [name, setName] = createSignal("Reyansh");
const [age, setAge] = createSignal(2.5);

// Effects automatically subscribes to signals used within
createEffect(() => {
  // Runs whenever the count changes
  console.log(`Name: ${name()}, Age: ${age()}`);
});

setName("Old Reyansh");
setTimeout(() => {
  setAge(3);
}, 2000);

/**
 * Open Console on the preview to see the output
 */

signal.js

class Signal {
  constructor(value) {
    this.value = value;
    this.subscribers = [];
  }

  getValue() {
    return this.value;
  }

  setValue(newValue) {
    this.value = newValue;
    this.emit();
  }

  emit() {
    this.subscribers.forEach((subscriber) => subscriber(this.value));
  }

  subscribe(callback) {
    this.subscribers.push(callback);
  }
}

let effectCallback = null;

export const createSignal = (value) => {
  const signal = new Signal(value);

  return [
    function value() {
      // when true this means, the value() is fetched from within the effect callback
      // we should register this effect callback when value changes
      if (effectCallback) {
        signal.subscribe(effectCallback);
      }

      return signal.getValue();
    },
    function setValue(newVal) {
      signal.setValue(newVal);
    },
  ];
};

export const createEffect = (callback) => {
  // Exposes the callback it's going to execute
  effectCallback = callback;

  // callback should execute immediately
  // Executing this callback may trigger multiple value() calls
  // So expect the value() method in createSignal to subscribe to this callback after this executes
  callback();

  // Resets the callback
  effectCallback = null;
};