discord-html-transcripts-fix 2.0.0 → 2.1.0

package/README.md

@@ -22,6 +22,31 @@ 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).
 
+<details>
+<summary>Silencing the <code>node-domexception</code> deprecation warning on install</summary>
+
+Lit SSR depends on `node-fetch`, which still pulls in the deprecated
+`fetch-blob → node-domexception` chain, so `npm install` prints:
+
+```
+npm warn deprecated node-domexception@1.0.0: Use your platform's native DOMException instead
+```
+
+It is cosmetic — install-time only, never at runtime, and `npm audit` reports nothing
+for it. If you want it gone, swap `node-fetch` for a dependency-free drop-in in **your
+own** `package.json` (npm only honours `overrides` in the root project, so this cannot
+be shipped from here):
+
+```json
+{
+  "overrides": {
+    "node-fetch": "npm:node-fetch-native@^1.6.7"
+  }
+}
+```
+
+</details>
+
 ## Quick start
 
 ```js
@@ -63,6 +88,8 @@ const stream = await createTranscript(channel, {
 | `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). |
+| `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 +97,37 @@ 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. |
 
+### 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 +251,9 @@ 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` added as an explicit dependency** — it was previously only reachable as a transitive dependency of `@lit-labs/ssr`, which does not resolve under pnpm's strict layout
 - **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

@@ -27,6 +27,18 @@ const styles_1 = require("./renderers/components/styles");
 const DiscordImage_1 = require("./renderers/components/DiscordImage");
 const DiscordHighlightedCode_1 = require("./renderers/components/DiscordHighlightedCode");
 
+// Warn at most once per process when hydration is requested without @lit-labs/ssr.
+let warnedMissingLitSsr = false;
+
+// Moves <!DOCTYPE html> back to the very front of the document. Lit SSR emits
+// <!--lit-part--> markers around its result, and a comment before the doctype
+// makes browsers fall back to quirks mode.
+function hoistDoctype(markup) {
+    const match = markup.match(/<!DOCTYPE\s+html[^>]*>/i);
+    if (!match || markup.startsWith(match[0])) return markup;
+    return match[0] + markup.slice(0, match.index) + markup.slice(match.index + match[0].length);
+}
+
 // Lock to an exact resolved version — semver ranges in src= aren't cacheable by CDNs.
 let discordComponentsVersion = '4.0.2';
 try {
@@ -119,7 +131,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: [
@@ -175,10 +194,39 @@ async function render(_a) {
 
     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);
+        // @lit-labs/ssr and lit are regular dependencies, so this normally always
+        // resolves. The guard only covers a broken or partial install: instead of
+        // failing the whole export we fall back to the non-SSR'd markup, which is
+        // still a fully working transcript because the <discord-*> definitions are
+        // loaded from the CDN module tag above regardless of this branch.
+        try {
+            const { render: renderLit } = await import('@lit-labs/ssr');
+            const { html: litHtml } = await import('lit');
+            const { unsafeHTML } = await import('lit/directives/unsafe-html.js');
+            const { collectResult } = await import('@lit-labs/ssr/lib/render-result.js');
+            // `markup` must go through unsafeHTML: handing lit a bare string makes
+            // it a text value, which lit HTML-escapes — that turned the whole
+            // transcript into visible &lt;!DOCTYPE html&gt;… source text.
+            const result = renderLit(litHtml`${unsafeHTML(markup)}`);
+            const rendered = await collectResult(result);
+            // lit wraps its output in <!--lit-part--> markers. Any comment ahead of
+            // the doctype pushes browsers into quirks mode and wrecks the layout,
+            // so the doctype has to lead the document again.
+            return hoistDoctype(rendered);
+        }
+        catch (err) {
+            // Only a missing module triggers the fallback — a genuine render
+            // failure must still surface instead of being silently swallowed.
+            const code = err && err.code;
+            if (code !== 'ERR_MODULE_NOT_FOUND' && code !== 'MODULE_NOT_FOUND') throw err;
+            if (!warnedMissingLitSsr) {
+                warnedMissingLitSsr = true;
+                console.warn('[discord-html-transcripts-fix] `hydrate: true` could not load @lit-labs/ssr / lit, ' +
+                    'although both ship as dependencies of this package. Returning non-hydrated markup — the ' +
+                    'transcript still renders correctly. Reinstalling your dependencies should fix this.');
+            }
+            return markup;
+        }
     }
 
     if (options.returnType === 'stream' || options.stream) {

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,18 @@ export type GenerateFromMessagesOptions<T extends ExportReturnType> = Partial<{
         enabled?: boolean;
         template?: string;
     };
+    /**
+     * 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/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.1.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",
@@ -33,6 +33,7 @@
   "dependencies": {
     "@lit-labs/ssr": "^3.3.1",
     "@skyra/discord-components-core": "^4.0.2",
+    "lit": "^3.3.1",
     "debug": "^4.4.3",
     "discord-markdown-parser": "~1.3.0",
     "highlight.js": "^11.11.1",
@@ -40,7 +41,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",