Skip to content

Streamlining source api

Latest

Choose a tag to compare

@razshare razshare released this 23 May 12:40

$\color{red}{\textsf{Breaking changes}}$

  • debloating and streamlining the source() api

Previously, when configuring your source(), you would write something like this

const value = source(`/events`, {
  options: {
    headers: {
      Authorization: 'Bearer ...',
    },
  },
  open() {
    console.log('connected')
  },
  close() {
    console.log('disconnected')
  },
  async error({ connect }) {
    console.log('disconnected')
    await delay(1000)
    connect()
  },
}).select('message')

Or this

const value = source(`/events`, {
  options: {
    headers: {
      Authorization: 'Bearer ...',
    },
    onopen() {
      console.log('connected')
    },
    onclose() {
      console.log('disconnected')
    },
    async onerror({ connect }) {
      console.log('disconnected')
      await delay(1000)
      connect()
    },
  }
}).select('message')

As you can see you could listen for the same type of events with two different configurations, although the incoming values were shaped differently, they were more or less equivalent.

That being said, having multiple ways to do the same thing is confusing, not to mention the name of the events are not even consistent.

This worked like so up until now because this library used to depend on https://github.com/Azure/fetch-event-source and that is because fetch-event-source uses fetch underneath, which allows you to send headers along with the SSE request, something that (currently) can't be done by using EventSource.

Because of that, it made sense to create an inner options field dedicated just for configuring the internal fetch-event-source.

That dependency is now gone and this library implements its own event sourcing through fetch, so the whole configuration and api is now flattened.

The same example from above you would now write as

const value = source(`/issue-73/events`, {
  headers: {
    Authorization: 'Bearer ...',
  },
  onopen() {
    console.log('connected')
  },
  onclose() {
    console.log('disconnected')
  },
  async onerror({ connect }) {
    console.log('disconnected')
    await delay(1000)
    connect()
  },
}).select('message')

All changes are reflected into the types documentation.

Note

There are no functionality differences between 0.15.1 and 0.14.6, the only thing that changes is the api of source().

Full Changelog: v0.14.6...v0.15.1