Learning in Public: Implementing Signals

Following an article that explains how to implement signals, hopefully successfully, and then giving feedback about the result.

In this post, I’ll be going through this article to understand creating signals.

What I build will live in this repository. Feel free to check it out if you would like!

Findings

Signals are really cool and are going to be a big part of the web moving forward I think. This sort of pub/sub architecture has always been a big part of the web. So it’s increasingly important to be familiar with it. So let’s dive into some of what I found interesting and applicable on a broader scale as well as some things that I will do differently in the future.

The Signal Class

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);
  }
}

Encapsulating this logic into it’s own class is a great idea. The real meat of what’s happening here though is in that subscribers property.

createSignal

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

  return [
    function value() {
      if (effectCallback) {
        signal.subscribe(effectCallback);
      }
      return signal.getValue();
    },
    function setValue(newVal) {
      signal.setValue(newVal);
    },
  ];
};

createEffect

export const createEffect = (callback) => {
  effectCallback = callback;
  callback();
  effectCallback = null;
};

I am starting a series on building a reactive frontend framework similar to React and probably based more heavily on Chris Ferdinandi’s Reef than I want it to be. But that is the matrerial through which I am going to be learning. So that’s wont to happen.