@planningcenter/jolt-client

Jolt client-side library

This is a Typescript implementation of a Jolt client. It is suitable for use in client-side browser environments.

Usage

This client is not tied to React in any way. So, the following is just an example of how you could use this library with React hooks.

// Maybe you want some kind of useJoltChannel.js hook
import { useEffect, useState } from "react";
import Jolt from "@planningcenter/jolt-client";

function useJoltChannel(channelName) {
  const [joltChannel, setJoltChannel] = useState();

  useEffect(() => {
    const jolt = new Jolt("wss://your.endpoint.here", {
      authToken: "your:auth:token:or:whatever",
      fetchSubscribeTokenFn: async (channel, connectionId, { claims }) =>
        "your:subscribe:token",
    });
    setJoltChannel(jolt.subscribe(channelName));
    return () => jolt.unsubscribe(channelName);
  }, [channelName]);

  return joltChannel;
}

// Elsewhere...

function ComponentCommunicatingWithJolt() {
  const channel = useJoltChannel("someChannel");
  useEffect(() => {
    if (!channel) return;

    const handleMessage = ({ event, data, channel }) => doSomething(data);
    return channel.bind("someEvent", handleMessage));
  }, [channel])
}

Development

Dev dependencies and scripts are definined in package.json.

Getting Started

Install development dependencies:

npm ci

Run jest watch to run specs on changes:

npm run watch

Test

Aside from npm run watch, you can run the tests on demand with:

npm run test

Build

When you're ready to compile the Javascript module:

npm run build

This will also run tests as part of the preBuild phase.

Release

Time for a new release? First check these things:

1. npm run build succeeds.
2. You've updated the CHANGELOG heading and package.json version.

Then, follow this notion document