@allior/wmake-utils

Language / Язык: English | Русский

Utilities for widgets: message content parsers (emotes, mentions, HTML), image preloading, and more.

parseMessageContent

Converts a message object (text + emotes) into an HTML string: emotes become <img>, mentions @nick become <span class="mentioned">.

Logic ported from StreamElements: zero-width emote support, large/medium emote options when the message is “emotes only”.

Usage

import { parseMessageContent } from "@allior/wmake-utils";

const html = parseMessageContent(
  {
    text: "Hello @user Kappa",
    emotes: [{ name: "Kappa", urls: { "1": "https://..." } }],
  },
  {
    zeroWidthEmotes: [],
    largeEmotes: true,
    largeEmotesAmount: 3,
    mediumEmotes: false,
  },
);

Options

• zeroWidthEmotes — list of emotes treated as zero-width (glued to the previous container, class zero).
• largeEmotes / largeEmotesAmount — when the message contains only emotes and no more than largeEmotesAmount, use size large (urls["2"]).
• mediumEmotes — use size medium when there are many emotes.

preloadImagesThenShow

Waits for all <img> inside a container to load, then calls the callback.

import { preloadImagesThenShow } from "@allior/wmake-utils";

preloadImagesThenShow(containerElement, (el) => {
  // all images loaded, safe to show
});

htmlEncode

Escapes a string for HTML: spaces normalized, characters < > " ^ replaced with entities.