Emotes[JS]

Fast ⚡dependency free 🪶 and responsive 🥳 7TV inline emotes parser

Written with plain and simple JavaScript, meant to help bring 7TV emotes into web pages, using best-practices to create responsive images tags yippie

Usage

Installation

Install using a package manager

pnpm i emotesjs

or using a CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/index.min.js"></script>

Parsing

The parse function is not a promise, you can call it inline just like the example bellow

// const { EmotesJS } = require('emotesjs')
import { EmotesJS } from 'emotesjs'

let emotes = new EmotesJS({ channelId: 123456 })

// optional - once fetched, the emotes will be cached in memory
await emotes.isLoading

let html = emotes.parse('this is pretty Pog')

console.log(html) 
// this is pretty <img srcset="https://cdn.7tv.app/emote/01EZTCN91800012PTN006Q50PR/4x.webp 128w, 
//      https://cdn.7tv.app/emote/01EZTCN91800012PTN006Q50PR/3x.webp 96w, 
//      https://cdn.7tv.app/emote/01EZTCN91800012PTN006Q50PR/2x.webp 64w, 
//      https://cdn.7tv.app/emote/01EZTCN91800012PTN006Q50PR/1x.webp 32w" 
//      alt="Pog" style="height:1.65rem"
// />

Cache

To save time by not requesting the 7TV CDN, we can use the .cache() and store the output in a persistent database or cache layer

let emotes = new EmotesJS({ channelId: 123456 })

// need to wait for the first load
await emotes.isLoading 

// this will return the post-processed internal value
// for the emotes
let cache = emotes.cache()

// to use the cache, just load the string and pass to the constructor
// the cache will be used while the lib re-fetches the emotes
// once the re-fetch is done, the internal emotes will be updated automatically
emotes = new EmotesJS({ channelId: 123456, cache })

Only

A way to reduce the initial cache size, is by passing a list of emotes to be loaded

let emotes = new EmotesJS({ channelId: 123456, only: ['EZ', 'Clap'] })

await emotes.isLoading 

// now only the `EZ` and `Clap` will be initialized
let cache = emotes.cache()

Configuration

Configuration can only be set during the first initialization, and all arguments should be passed as an object to the constructor

Paramter	Description	Default
`channelId`	Twitch user id of which the emotes will be loaded from. If no value is informed, only the global emotes will be loaded	`0`
`colon`	If `true`, only words starting with `:` will be parsed into emotes	`false`
`height`	The `height` attribute of the `<img />` element tag	`1.65rem`
`format`	Which format will be used. `WEBP` or `AVIF`	`WEBP`
`only`	A list with the only emotes to be loaded	`[]`
`cache`	Cached values that will be used to initialize internal values	`none`
`usePixelDensity`	Use pixel density descriptor instead of width descriptor	`false`

NOTE: this library uses the singleton design pattern, meaning after the first new EmotesJS() initialization, subsequent initialization will have no effect on internal configuration or emotes fetched