@allior/wmake-streamelements

StreamElements API, chat parsing (Astro), events, and widget fields. Astro WebSocket connection, message parsing into event format, settings fields, YouTube chat client.

Installation

npm install @allior/wmake-streamelements

Dependencies: @allior/wmake-utils, @allior/wmake-streamelements-events (workspace).

Main API

Astro client

Connect to StreamElements Astro with JWT and subscribe to topics (chat, etc.).

import {
  AstroStreamElementsClient,
  type AstroOnConnectionOpen,
} from "@allior/wmake-streamelements";

const client = new AstroStreamElementsClient(
  "JWT_TOKEN",
  (client, event) => {
    client.subscribeTopic("channel:channel_id:message");
    client.addTopicListener("channel:channel_id:message", (data) => {
      const parsed = parseChannelChatMessage(data);
      console.log(parsed.event.data.text);
    });
  },
  (e) => console.log("closed", e),
  (e) => console.error("error", e),
);

client.close();

• subscribeTopic(topic) — subscribe to a topic.
• addTopicListener(topic, listener) — message handler for a topic.
• counters, store — counters and store (part of StreamElementsAPI).

Chat message parsing

Convert raw Astro message to event format (tags, badges, emotes, renderedText).

import { parseChannelChatMessage } from "@allior/wmake-streamelements";

const result = parseChannelChatMessage(astroMessage);
// result.listener === "message"
// result.event.service === "twitch", result.event.data — text, tags, badges, emotes
// result.event.renderedText — HTML with emotes inlined

Widget fields (fields)

StreamElements widget setting field types (checkbox, text, color, number, etc.).

import type {
  Field,
  TextField,
  ColorPickerField,
  CheckboxField,
  HiddenField,
} from "@allior/wmake-streamelements/fields";

Export path: @allior/wmake-streamelements/fields.

YouTube

Exports from ./youtube: chat client, emoji-parser, types (for YouTube chat).

React

useStreamElements

Returns a StreamElementsAPI instance: either Astro client (with token), or window.SE_API, or a mock for development.

import { useStreamElements } from "@allior/wmake-streamelements/react";

function Widget() {
  const api = useStreamElements({
    astroToken: "JWT",
    onAstroConnectionOpen: (client) => {
      client.subscribeTopic("channel:123:message");
    },
    // mockData: { onWidgetLoad: {...} } — for development without Astro
  });

  const { store, counters } = api;
  // ...
}

Build and tests

npm run build        # build dist + IIFE + types
npm run clean        # clean dist
npm run test         # tests (parser + fixtures)
npm run test:parser  # parser only
npm run parse        # CLI parse channel-chat-message