discord-html-transcripts-fix 2.0.0 → 2.2.0

package/README.md

@@ -14,13 +14,20 @@ Forked from [discord-html-transcripts](https://github.com/ItzDerock/discord-html
 - **discord.js v14 or v15** — required peer dependency.
 - **[`sharp`](https://sharp.pixelplumbing.com/)** — *optional* peer dependency, only needed if you use `.withCompression()` to compress / convert transcript images to WebP.
 
+The **generated HTML** additionally reaches out to third-party CDNs when it is *opened*
+— jsDelivr for the `<discord-*>` component runtime and cdnjs for Twemoji SVGs. Set
+[`inlineAssets: true`](#self-contained-transcripts) to embed them and get a file that
+renders offline.
+
 ## Install
 
 ```bash
 npm install discord-html-transcripts-fix
 ```
 
-`discord.js` is the only **required** peer dependency — React, Lit SSR, the markdown parser, etc. are installed automatically. `sharp` is an optional peer (image compression only).
+`discord.js` is the only **required** peer dependency — React, the markdown parser, etc. are installed automatically. `sharp` is an optional peer (image compression only).
+
+The install is clean: no deprecation warnings and no `npm audit` findings.
 
 ## Quick start
 
@@ -62,7 +69,11 @@ const stream = await createTranscript(channel, {
 | `filename` | `string` | `transcript-{channel-id}.html` | Output filename when returning as attachment. |
 | `saveImages` | `boolean` | `false` | Download images and inline them as base64 data URLs. |
 | `favicon` | `'guild'` \| `string` | `'guild'` | Page favicon — `'guild'` uses the server icon, or pass a URL. |
-| `hydrate` | `boolean` | `false` | Server-side hydrate via `@lit-labs/ssr` (slower; usually leave off). |
+| `hydrate` | `boolean` | `false` | Enables the client-side spoiler-reveal script. |
+| `inlineAssets` | `boolean` | `false` | Embed the component runtime and emoji so the file renders offline. See below. |
+| `inlineAssetsTimeout` | `number` | `30000` | Per-request timeout in ms while downloading those assets. |
+| `dateFormat` | `'dd/mm/yyyy'` \| `'mm/dd/yyyy'` | `'dd/mm/yyyy'` | Date order for message timestamps older than yesterday. |
+| `timeFormat` | `'24h'` \| `'12h'` | `'24h'` | Clock format for message timestamps — `07:16` vs `07:16 AM`. |
 | `language` | `'en'` \| `'de'` | `'en'` | UI language for participant labels, filter strings, etc. |
 | `i18n` | `Partial<Record<lang, Record<key,string>>>` | — | Override individual strings per language. |
 | `statsFooter` | `false` \| `{ enabled?, template? }` | `{ enabled: true }` | Bottom stats line. See below. |
@@ -70,12 +81,67 @@ const stream = await createTranscript(channel, {
 | `poweredBy` | `boolean` | `false` | Show the original "Powered by discord-html-transcripts" credit link. Only renders when `statsFooter` is disabled. |
 | `callbacks` | `{ resolveUser, resolveRole, resolveChannel, resolveImageSrc }` | — | Custom resolvers for mentions / image URLs. |
 
+### Self-contained transcripts
+
+By default the rendered file is not standalone: opening it fetches the `<discord-*>`
+component runtime from jsDelivr and the emoji SVGs from cdnjs. Offline, on a network
+that blocks those CDNs, or after a CDN outage the transcript renders unstyled — and
+every viewer's IP reaches both CDNs, which can matter for archived tickets.
+
+```js
+await createTranscript(channel, {
+    inlineAssets: true,
+    saveImages: true, // also inlines Discord's avatars/attachments
+});
+```
+
+`inlineAssets` embeds the component runtime and every emoji used, so the file opens
+with **zero external requests**. Verified in a browser: the inlined transcript renders
+identically to the CDN version (same layout, same shadow DOM), loading 35 modules from
+`blob:` URLs and nothing from the network.
+
+| | Default | `inlineAssets: true` |
+| --- | --- | --- |
+| File size | ~72 kB | ~620 kB |
+| External hosts on open | jsDelivr, cdnjs, Discord CDN | Discord CDN only (none with `saveImages`) |
+| Works offline | no | yes |
+
+The download happens once per process and is cached, so the first transcript pays
+about a second and later ones are unaffected. If an asset cannot be fetched the CDN
+reference is kept and a warning is logged — the export never fails over this. Use
+`inlineAssetsTimeout` (default `30000` ms) to bound the downloads.
+
+### Message timestamps
+
+Timestamps are worded the way Discord words them, relative to when the transcript was
+generated:
+
+| When the message was sent | Rendered as |
+| --- | --- |
+| Today | `07:16` |
+| Yesterday | `Yesterday at 07:16` (`Gestern um 07:16` with `language: 'de'`) |
+| Anything older | `11/08/2026 07:16` |
+
+The reference point is transcript creation time, so an archived transcript keeps saying
+the same thing no matter when it is opened. The exact instant stays machine-readable in
+`data-timestamp` (epoch ms) and `data-timestamp-iso` on every `<discord-message>`.
+
+```js
+await createTranscript(channel, {
+    dateFormat: 'mm/dd/yyyy', // default 'dd/mm/yyyy'
+    timeFormat: '12h',        // default '24h'
+});
+// → "07:16 AM", "Yesterday at 10:45 PM", "08/11/2026 02:30 PM"
+```
+
+Times use the timezone of the machine generating the transcript.
+
 ### Configurable stats footer
 
 ```js
 await createTranscript(channel, {
     statsFooter: {
-        template: '{messages} Nachrichten · {participants} Teilnehmer · {images} Bilder · {from} → {to} · {span}',
+        template: '{messages} messages from {participants} people · {images} images · {from} → {to}',
     },
 });
 
@@ -199,6 +265,10 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 
 - **`react`, `react-dom`, `debug` moved into regular dependencies** so users don't install them manually (`debug` was actually a missing runtime dep in the original — `images.js` requires it)
 - **`sharp` declared as an optional peer dependency** — needed only for `.withCompression()`, no longer a hidden requirement
+- **Discord-style message timestamps** — today shows the bare time (`07:16`), yesterday reads `Yesterday at 07:16`, anything older gets `11/08/2026 07:16`. Configurable via `dateFormat` and `timeFormat`. Previously the raw ISO string (`2026-08-14T07:16:07.422Z`) was rendered, because the web component only formats real `Date` objects and an HTML attribute always arrives as a string
+- **`hydrate: true` actually works** — the markup was handed to Lit as a plain string, which Lit HTML-escapes, so the option emitted a page of visible `&lt;!DOCTYPE html&gt;…` source text instead of a transcript
+- **`@lit-labs/ssr` and `lit` removed entirely** — the `hydrate` path pushed the finished markup through Lit SSR, which was measured to contribute exactly four inert `<!--lit-part-->` comments and nothing else, since the page never loads a Lit hydration client. Two dependencies and the deprecated `node-fetch → fetch-blob → node-domexception` chain for four comments. `hydrate: true` keeps its real effect (the spoiler-reveal script), and the install is now warning-free
+- **`inlineAssets` option** — embeds the component runtime and emoji so a transcript renders with zero external requests
 - **TypeScript declarations match runtime** — `ExportReturnType.Stream`, `language`, `i18n`, `stream`, and `withConcurrency()` are now exposed in the types
 - `discord.js` remains the only **required** peer dependency
 

package/dist/generator/index.js

@@ -20,7 +20,9 @@ const static_1 = require("react-dom/static");
 const buildProfiles_1 = require("../utils/buildProfiles");
 const client_1 = require("../static/client");
 const fs_1 = require("fs");
+const stream_1 = require("stream");
 const path_1 = __importDefault(require("path"));
+const selfContained_1 = require("../utils/selfContained");
 const transcript_1 = __importDefault(require("./transcript"));
 const utils_1 = require("../utils/utils");
 const styles_1 = require("./renderers/components/styles");
@@ -119,7 +121,14 @@ async function render(_a) {
         stats,
     };
 
-    const renderContext = Object.assign({ lang, i18n, dateSeps, stats }, callbacks ? { callbacks } : {});
+    // Resolved once so every message in this transcript is measured against the
+    // same "now" and shares one date/time format.
+    const timestampFormat = (0, utils_1.resolveTimestampFormat)({
+        dateFormat: options.dateFormat,
+        timeFormat: options.timeFormat,
+    });
+
+    const renderContext = Object.assign({ lang, i18n, dateSeps, stats, timestampFormat }, callbacks ? { callbacks } : {});
 
     const docTree = (0, jsx_runtime_1.jsxs)("html", { lang, children: [
         (0, jsx_runtime_1.jsxs)("head", { children: [
@@ -173,15 +182,31 @@ async function render(_a) {
 
     const { prelude } = await (0, static_1.prerenderToNodeStream)(docTree);
 
+    // `hydrate` used to additionally push the finished markup through
+    // @lit-labs/ssr. That round-trip was measured to contribute exactly four
+    // inert <!--lit-part--> comments and nothing else — the page never loads a
+    // lit hydration client, and the <discord-*> elements hydrate themselves once
+    // their definitions are registered. Two dependencies (and the deprecated
+    // node-fetch → fetch-blob → node-domexception chain they dragged along) for
+    // four comments was a bad trade, so the round-trip is gone. The option keeps
+    // its real effect: it enables the spoiler-reveal script emitted above.
+    const wantsStream = options.returnType === 'stream' || options.stream;
+
+    if (options.inlineAssets) {
+        // Inlining rewrites the finished document, so it cannot be streamed as it
+        // is produced. The stream contract is still honoured — the buffered result
+        // is handed back as a Readable.
+        const markup = await (0, selfContained_1.inlineExternalAssets)(await (0, utils_1.streamToString)(prelude), {
+            timeout: options.inlineAssetsTimeout,
+        });
+        return wantsStream ? stream_1.Readable.from([markup]) : markup;
+    }
+
     if (options.hydrate) {
-        const markup = await (0, utils_1.streamToString)(prelude);
-        const { render: renderLit } = await import('@lit-labs/ssr');
-        const result = renderLit(markup);
-        const { collectResult } = await import('@lit-labs/ssr/lib/render-result.js');
-        return await collectResult(result);
+        return await (0, utils_1.streamToString)(prelude);
     }
 
-    if (options.returnType === 'stream' || options.stream) {
+    if (wantsStream) {
         // Return the underlying Node stream — caller is responsible for piping.
         return prelude;
     }

package/dist/generator/renderers/embed.js

@@ -10,6 +10,11 @@ const embeds_1 = require("../../utils/embeds");
 const content_1 = __importStar(require("./content"));
 const utils_1 = require("../../utils/utils");
 
+function t(context, key, fallback) {
+    const dict = context?.i18n?.[context?.lang] || context?.i18n?.en || {};
+    return dict[key] || fallback || key;
+}
+
 async function DiscordEmbed({ embed, context }) {
     const type = embed.type || 'rich';
     const url = embed.url ? (0, utils_1.safeHref)(embed.url) : undefined;
@@ -71,7 +76,7 @@ async function DiscordEmbed({ embed, context }) {
             embed.footer && ((0, jsx_runtime_1.jsx)("discord-embed-footer", {
                 slot: "footer",
                 footerImage: embed.footer.proxyIconURL ?? embed.footer.iconURL,
-                timestamp: embed.timestamp ?? undefined,
+                timestamp: (0, utils_1.formatMessageTimestamp)(embed.timestamp, context?.timestampFormat, t(context, 'yesterdayAt', 'Yesterday at {time}')),
                 children: embed.footer.text
             }))
         ]

package/dist/generator/renderers/message.js

@@ -110,6 +110,13 @@ async function DiscordMessage({ message, context }) {
         const snapshots = Array.isArray(message.messageSnapshots) ? message.messageSnapshots : [];
 
         const editedAtIso = message.editedAt instanceof Date ? message.editedAt.toISOString() : null;
+        // Hover text for the "(edited)" marker — the ISO string stays in
+        // data-edit-iso for tooling, but humans get the same wording as the
+        // message timestamps instead of "2026-08-14T07:16:07.422Z".
+        const editedAtLabel = (0, utils_1.formatMessageTimestamp)(message.editedAt, context?.timestampFormat, t(context, 'yesterdayAt', 'Yesterday at {time}'));
+        const editedAtTitle = editedAtLabel
+            ? t(context, 'editedAt', 'Edited at {time}').replace('{time}', editedAtLabel)
+            : undefined;
         const pinned = !!message.pinned;
 
         // Forum applied tags — only on the first message of a forum thread (the post itself)
@@ -138,17 +145,20 @@ async function DiscordMessage({ message, context }) {
         // no longer render a separate "/cmd opt:val by user" line.
         const slashData = buildSlashCommandData(message);
 
-        // FIX: pass timestamp as ISO string. React would otherwise stringify a
-        // Date via toString() (locale-dependent like "Tue May 26 2026 …"),
-        // which skyra's <discord-message> often fails to parse — falling back
-        // to new Date() == transcript creation time. ISO is round-trip safe.
+        // The timestamp is formatted here rather than handed to <discord-message>
+        // as a Date or ISO string. Skyra's converter only formats real Date
+        // objects — an attribute always arrives as a string, so it passed the raw
+        // "2026-08-14T07:16:07.422Z" straight through to the page. Preformatting
+        // also lets us match Discord's own today/yesterday/date wording and honour
+        // the dateFormat + timeFormat options.
         const createdAtIso = message.createdAt instanceof Date
             ? message.createdAt.toISOString()
             : (typeof message.createdAt === 'string' ? message.createdAt : undefined);
+        const timestampLabel = (0, utils_1.formatMessageTimestamp)(message.createdAt, context?.timestampFormat, t(context, 'yesterdayAt', 'Yesterday at {time}'));
 
         return ((0, jsx_runtime_1.jsxs)("discord-message", {
             id: `m-${message.id}`,
-            timestamp: createdAtIso,
+            timestamp: timestampLabel,
             edited: message.editedAt !== null,
             server: (isCrossGuildReply || isCrosspost || isCrossposted) ? true : undefined,
             highlight: message.mentions.everyone || pinned,
@@ -158,6 +168,7 @@ async function DiscordMessage({ message, context }) {
             "data-author-name": authorName,
             "data-roles": memberRoleIds,
             "data-timestamp": ts ? String(ts) : undefined,
+            "data-timestamp-iso": createdAtIso,
             "data-text": lowerText,
             "data-pinned": pinned ? 'true' : undefined,
             "data-has-image": hasImage ? 'true' : undefined,
@@ -184,7 +195,7 @@ async function DiscordMessage({ message, context }) {
                     (0, jsx_runtime_1.jsx)("span", { className: "dht-activity-icon", children: '🎮' }),
                     (0, jsx_runtime_1.jsxs)("span", { children: [activity.type, ' invite', activity.partyId ? ` · Party ${activity.partyId.slice(-6)}` : ''] })
                 ] }),
-                editedAtIso && (0, jsx_runtime_1.jsx)("span", { className: "dht-edit-marker", title: editedAtIso, "data-edit-iso": editedAtIso, "data-i18n": "edited", "data-i18n-params": JSON.stringify({ time: editedAtIso }), children: '(' + t(context, 'edited', 'edited') + ')' }),
+                editedAtIso && (0, jsx_runtime_1.jsx)("span", { className: "dht-edit-marker", title: editedAtTitle || editedAtIso, "data-edit-iso": editedAtIso, "data-i18n": "edited", "data-i18n-params": JSON.stringify({ time: editedAtLabel || editedAtIso }), children: '(' + t(context, 'edited', 'edited') + ')' }),
                 Array.isArray(message.editHistory) && message.editHistory.length > 0 && renderEditHistory(message.editHistory, context),
                 snapshots.length > 0 && renderSnapshots(snapshots, context),
                 message.content && ((0, jsx_runtime_1.jsx)(content_1.default, { content: message.content, context: Object.assign({}, context, { type: message.webhookId ? content_1.RenderType.WEBHOOK : content_1.RenderType.NORMAL }) })),

package/dist/generator/renderers/systemMessage.js

@@ -18,11 +18,11 @@ async function SystemMessage({ message, context }) {
     const color = message.member?.roles?.color?.hexColor;
     const authorId = author?.id;
     const ctx = context || {};
-    // FIX: pass message.createdAt as ISO string so skyra renders the original
-    // timestamp instead of falling back to "now" (= transcript creation time).
-    const ts = message.createdAt instanceof Date
-        ? message.createdAt.toISOString()
-        : (typeof message.createdAt === 'string' ? message.createdAt : undefined);
+    // Preformatted for the same reason as in message.js: skyra only formats real
+    // Date objects, and an attribute always arrives as a string — so an ISO value
+    // was rendered verbatim. This also keeps system messages worded like the
+    // regular ones (today / yesterday / full date).
+    const ts = (0, utils_1.formatMessageTimestamp)(message.createdAt, ctx.timestampFormat, t(ctx, 'yesterdayAt', 'Yesterday at {time}'));
 
     switch (message.type) {
         case discord_js_1.MessageType.RecipientAdd:

package/dist/static/client.js

@@ -61,6 +61,7 @@ const defaultDicts = {
     en: {
         edited: 'edited',
         editedAt: 'Edited at {time}',
+        yesterdayAt: 'Yesterday at {time}',
         joined: 'joined the server',
         pinned: 'pinned {message} to this channel.',
         pinnedLink: 'a message',
@@ -114,6 +115,7 @@ const defaultDicts = {
     de: {
         edited: 'bearbeitet',
         editedAt: 'Bearbeitet am {time}',
+        yesterdayAt: 'Gestern um {time}',
         joined: 'ist dem Server beigetreten',
         pinned: 'hat {message} in diesem Channel angepinnt.',
         pinnedLink: 'eine Nachricht',

package/dist/types.d.ts

@@ -61,7 +61,7 @@ export type GenerateFromMessagesOptions<T extends ExportReturnType> = Partial<{
      * Stats footer rendered at the bottom (e.g. "12 messages · 3 participants · 2 images · …").
      * - `false` to disable entirely
      * - `{ enabled: false }` to disable
-     * - `{ template: '{messages} Nachrichten · {participants} Teilnehmer · {images} Bilder · {from} → {to} · {span}' }`
+     * - `{ template: '{messages} messages from {participants} people · {images} images · {from} → {to}' }`
      *   to render with a custom string. Supported placeholders:
      *   `{messages}` `{participants}` `{images}` `{from}` `{to}` `{span}`
      *
@@ -71,6 +71,41 @@ export type GenerateFromMessagesOptions<T extends ExportReturnType> = Partial<{
         enabled?: boolean;
         template?: string;
     };
+    /**
+     * Embed the third-party assets the transcript would otherwise load from a CDN
+     * at view time — the `<discord-*>` web component runtime (from jsDelivr) and
+     * the Twemoji SVGs (from cdnjs) — directly into the HTML.
+     *
+     * Without this the file needs internet access whenever it is *opened*: offline,
+     * behind a CDN-blocking network or after a CDN outage the transcript renders
+     * unstyled. It also means every viewer's IP reaches those CDNs, which may
+     * matter for GDPR-sensitive ticket archives.
+     *
+     * Costs roughly +550 kB per file and one download at generation time (cached
+     * per process). Discord's own CDN is untouched — use `saveImages` for that.
+     *
+     * Never fails the export: if an asset cannot be fetched, the CDN reference is
+     * kept and a warning is logged.
+     * @default false
+     */
+    inlineAssets: boolean;
+    /**
+     * Per-request timeout in ms while downloading the assets for `inlineAssets`.
+     * @default 30000
+     */
+    inlineAssetsTimeout: number;
+    /**
+     * Date order used whenever a message timestamp is older than yesterday
+     * (e.g. `11/08/2026 07:16`).
+     * @default 'dd/mm/yyyy'
+     */
+    dateFormat: 'dd/mm/yyyy' | 'mm/dd/yyyy';
+    /**
+     * Clock format for message timestamps — `'24h'` renders `07:16`,
+     * `'12h'` renders `07:16 AM`.
+     * @default '24h'
+     */
+    timeFormat: '24h' | '12h';
     /**
      * UI language for the built-in strings (participant labels, filter UI, stats footer, …).
      * @default 'en'

package/dist/utils/selfContained.js

@@ -0,0 +1,193 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inlineExternalAssets = inlineExternalAssets;
+exports.clearInlineAssetCache = clearInlineAssetCache;
+const undici_1 = require("undici");
+const utils_1 = require("./utils");
+const debug_1 = __importDefault(require("debug"));
+
+const log = (0, debug_1.default)('discord-html-transcripts:selfContained');
+
+const JSDELIVR = 'https://cdn.jsdelivr.net';
+// Every specifier inside the jsDelivr "+esm" graph is an absolute /npm/… path,
+// which is what makes the blob rewrite below safe. Matching the quoted path
+// directly rather than trying to parse import/export syntax is deliberate: a
+// syntax-shaped pattern silently skipped side-effect imports (`import"/npm/x";`)
+// because its optional `from` group ran ahead to the next `from` in the file.
+const SPECIFIER = /["'](\/npm\/[^"']+)["']/g;
+// Anything the blob rewrite could not resolve on its own.
+const RELATIVE_SPECIFIER = /(?:from|import)\s*\(?\s*["']\.{1,2}\//;
+const TWEMOJI_URL = /https:\/\/cdnjs\.cloudflare\.com\/ajax\/libs\/twemoji\/[0-9.]+\/svg\/[0-9a-f-]+\.svg/g;
+
+// Module graphs and emoji SVGs are identical for every transcript in a process,
+// so they are fetched once and reused. Keyed by URL.
+const graphCache = new Map();
+const emojiCache = new Map();
+
+function clearInlineAssetCache() {
+    graphCache.clear();
+    emojiCache.clear();
+}
+
+async function fetchText(url, timeoutMs) {
+    const res = await (0, undici_1.request)(url, { headersTimeout: timeoutMs, bodyTimeout: timeoutMs });
+    if (res.statusCode !== 200) {
+        await res.body.dump();
+        throw new Error(`GET ${url} → HTTP ${res.statusCode}`);
+    }
+    return await res.body.text();
+}
+
+// Walks the module graph breadth-first and returns the sources plus a
+// dependency-first ordering, so each module can be rewritten once all of its
+// dependencies already have a blob URL.
+async function fetchModuleGraph(entry, timeoutMs) {
+    const cached = graphCache.get(entry);
+    if (cached) return cached;
+
+    const sources = new Map();
+    const deps = new Map();
+    const queue = [entry];
+
+    while (queue.length) {
+        const spec = queue.shift();
+        if (sources.has(spec)) continue;
+        const src = await fetchText(JSDELIVR + spec, timeoutMs);
+        if (RELATIVE_SPECIFIER.test(src)) {
+            // A relative specifier would resolve against the blob URL at runtime,
+            // which cannot work — bail out rather than ship a broken page.
+            throw new Error(`relative import in ${spec}`);
+        }
+        sources.set(spec, src);
+        const own = [];
+        for (const m of src.matchAll(SPECIFIER)) {
+            own.push(m[1]);
+            if (!sources.has(m[1])) queue.push(m[1]);
+        }
+        deps.set(spec, own);
+    }
+
+    const order = [];
+    const state = new Map();
+    const visit = (node) => {
+        const s = state.get(node);
+        if (s === 'done') return;
+        if (s === 'open') throw new Error(`import cycle at ${node}`);
+        state.set(node, 'open');
+        for (const d of deps.get(node) || []) visit(d);
+        state.set(node, 'done');
+        order.push(node);
+    };
+    visit(entry);
+
+    // Dry-run of the browser-side rewrite. If any /npm/… specifier would survive
+    // it, the page would fail at runtime with an unresolvable module — better to
+    // find that here and keep the CDN reference instead.
+    const built = new Set();
+    for (const spec of order) {
+        let src = sources.get(spec);
+        for (const dep of built) src = src.split(`"${dep}"`).join('""').split(`'${dep}'`).join("''");
+        const leftover = src.match(SPECIFIER);
+        if (leftover) throw new Error(`unresolved specifier ${leftover[0]} in ${spec}`);
+        built.add(spec);
+    }
+
+    const graph = { entry, order, sources: Object.fromEntries(sources) };
+    log('fetched %d modules for %s', order.length, entry);
+    graphCache.set(entry, graph);
+    return graph;
+}
+
+// Rebuilds the module graph in the browser: each module's /npm/… specifiers are
+// swapped for the blob URL of the dependency built just before it, so no import
+// map and no network access are involved.
+function buildBootstrap(graph) {
+    const payload = (0, utils_1.safeJsonForScript)({ entry: graph.entry, order: graph.order, sources: graph.sources });
+    return `(function(){try{var G=${payload};var urls={};` +
+        `G.order.forEach(function(spec){var src=G.sources[spec];` +
+        `Object.keys(urls).forEach(function(dep){` +
+        `src=src.split('"'+dep+'"').join('"'+urls[dep]+'"').split("'"+dep+"'").join("'"+urls[dep]+"'");});` +
+        `urls[spec]=URL.createObjectURL(new Blob([src],{type:'text/javascript'}));});` +
+        `import(urls[G.entry]).catch(function(e){console.error('[discord-html-transcripts-fix] inlined component runtime failed to start:',e);});` +
+        `}catch(e){console.error('[discord-html-transcripts-fix] inlined component runtime is malformed:',e);}})();`;
+}
+
+async function inlineTwemoji(html, timeoutMs) {
+    const urls = [...new Set(html.match(TWEMOJI_URL) || [])];
+    if (urls.length === 0) return html;
+
+    let out = html;
+    let inlined = 0;
+    for (const url of urls) {
+        let dataUri = emojiCache.get(url);
+        if (dataUri === undefined) {
+            try {
+                const svg = await fetchText(url, timeoutMs);
+                dataUri = 'data:image/svg+xml;base64,' + Buffer.from(svg, 'utf8').toString('base64');
+            }
+            catch (err) {
+                // A missing emoji must not fail the export — the original URL stays,
+                // so that single image falls back to the CDN.
+                log('twemoji %s failed: %s', url, err && err.message ? err.message : err);
+                dataUri = null;
+            }
+            emojiCache.set(url, dataUri);
+        }
+        if (dataUri) {
+            out = out.split(url).join(dataUri);
+            inlined++;
+        }
+    }
+    log('inlined %d/%d emoji', inlined, urls.length);
+    return out;
+}
+
+/**
+ * Replaces the third-party CDN references in a rendered transcript with inline
+ * copies, so the file renders without jsDelivr or cdnjs.
+ *
+ * Discord's own CDN (avatars, attachments) is deliberately left alone — that is
+ * what `saveImages` covers.
+ *
+ * Never throws: if anything cannot be fetched the original markup is returned
+ * unchanged, which still renders correctly as long as the CDNs are reachable.
+ */
+async function inlineExternalAssets(html, options) {
+    const opts = options || {};
+    const timeoutMs = typeof opts.timeout === 'number' ? opts.timeout : 30000;
+    let out = html;
+
+    const scriptTag = out.match(/<script[^>]*type="module"[^>]*src="https:\/\/cdn\.jsdelivr\.net(\/npm\/[^"]+)"[^>]*><\/script>/);
+    if (scriptTag) {
+        try {
+            const graph = await fetchModuleGraph(scriptTag[1], timeoutMs);
+            const tag = `<script>${buildBootstrap(graph)}</script>`;
+            // Replacement MUST be a function: minified module sources contain `$'`
+            // and `$&`, which String.replace would expand as match references and
+            // splice half the document into the middle of the script.
+            out = out.replace(scriptTag[0], () => tag);
+        }
+        catch (err) {
+            console.warn('[discord-html-transcripts-fix] inlineAssets: could not inline the component runtime, ' +
+                'keeping the CDN reference — ' + (err && err.message ? err.message : err));
+        }
+    }
+
+    try {
+        out = await inlineTwemoji(out, timeoutMs);
+    }
+    catch (err) {
+        console.warn('[discord-html-transcripts-fix] inlineAssets: could not inline emoji, keeping CDN references — ' +
+            (err && err.message ? err.message : err));
+    }
+
+    // The preconnect hints only make sense while the CDNs are still referenced.
+    if (!out.includes('cdn.jsdelivr.net/npm/')) {
+        out = out.replace(/<link[^>]*rel="preconnect"[^>]*href="https:\/\/cdn\.jsdelivr\.net\/"[^>]*\/?>/g, '');
+    }
+
+    return out;
+}

package/dist/utils/utils.js

@@ -12,8 +12,69 @@ exports.safeHref = safeHref;
 exports.safeColor = safeColor;
 exports.safeImageMime = safeImageMime;
 exports.escapeHtml = escapeHtml;
+exports.resolveTimestampFormat = resolveTimestampFormat;
+exports.formatMessageTimestamp = formatMessageTimestamp;
 const twemoji_1 = __importDefault(require("twemoji"));
 
+const DEFAULT_TIMESTAMP_FORMAT = { dateFormat: 'dd/mm/yyyy', timeFormat: '24h' };
+
+function pad2(n) {
+    return n < 10 ? '0' + n : String(n);
+}
+
+// Normalizes the user-facing options once, at render start, so every renderer
+// shares one reference "now" — otherwise a transcript rendered across midnight
+// could label the same day both "today" and with a full date.
+function resolveTimestampFormat(options) {
+    const o = options || {};
+    return {
+        dateFormat: o.dateFormat === 'mm/dd/yyyy' ? 'mm/dd/yyyy' : DEFAULT_TIMESTAMP_FORMAT.dateFormat,
+        timeFormat: o.timeFormat === '12h' ? '12h' : DEFAULT_TIMESTAMP_FORMAT.timeFormat,
+        now: o.now instanceof Date ? o.now : new Date(),
+    };
+}
+
+function formatClock(d, timeFormat) {
+    const minutes = pad2(d.getMinutes());
+    if (timeFormat === '12h') {
+        const h = d.getHours();
+        const hour12 = h % 12 === 0 ? 12 : h % 12;
+        return `${pad2(hour12)}:${minutes} ${h < 12 ? 'AM' : 'PM'}`;
+    }
+    return `${pad2(d.getHours())}:${minutes}`;
+}
+
+function formatCalendarDate(d, dateFormat) {
+    const day = pad2(d.getDate());
+    const month = pad2(d.getMonth() + 1);
+    return dateFormat === 'mm/dd/yyyy'
+        ? `${month}/${day}/${d.getFullYear()}`
+        : `${day}/${month}/${d.getFullYear()}`;
+}
+
+function startOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+
+// Mirrors how Discord labels message timestamps: today shows the bare time,
+// yesterday is spelled out, anything older gets the full date. The reference
+// point is transcript creation time, so an archived transcript keeps saying the
+// same thing no matter when it is opened.
+// Returns undefined for unusable input so callers can omit the attribute
+// entirely rather than render an empty timestamp.
+function formatMessageTimestamp(value, format, yesterdayTemplate) {
+    const d = value instanceof Date ? value : (typeof value === 'string' || typeof value === 'number' ? new Date(value) : null);
+    if (!d || !Number.isFinite(d.getTime())) return undefined;
+
+    const fmt = format && format.now instanceof Date ? format : resolveTimestampFormat(format);
+    const time = formatClock(d, fmt.timeFormat);
+    const dayDiff = Math.round((startOfDay(fmt.now) - startOfDay(d)) / 86400000);
+
+    if (dayDiff === 0) return time;
+    if (dayDiff === 1) return (yesterdayTemplate || 'Yesterday at {time}').replace('{time}', time);
+    return `${formatCalendarDate(d, fmt.dateFormat)} ${time}`;
+}
+
 function isDefined(value) {
     return value !== undefined && value !== null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-html-transcripts-fix",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "A nicely formatted html transcript generator for discord.js. Bugfix fork with support for the latest discord.js and Components v2.",
   "main": "dist/index.js",
   "types": "./dist/index.d.ts",
@@ -31,7 +31,6 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@lit-labs/ssr": "^3.3.1",
     "@skyra/discord-components-core": "^4.0.2",
     "debug": "^4.4.3",
     "discord-markdown-parser": "~1.3.0",
@@ -40,7 +39,7 @@
     "react-dom": "^19.2.3",
     "simple-markdown": "^0.7.3",
     "twemoji": "^14.0.2",
-    "undici": "^7.16.0"
+    "undici": "^7.29.0"
   },
   "peerDependencies": {
     "discord.js": "^14.0.0 || ^15.0.0",