discord-html-transcripts-fix 2.1.0 → 2.2.0

package/README.md

@@ -14,38 +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).
-
-<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:
+`discord.js` is the only **required** peer dependency — React, the markdown parser, etc. are installed automatically. `sharp` is an optional peer (image compression only).
 
-```
-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>
+The install is clean: no deprecation warnings and no `npm audit` findings.
 
 ## Quick start
 
@@ -87,7 +69,9 @@ 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. |
@@ -97,6 +81,36 @@ 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
@@ -253,7 +267,8 @@ In addition to plain text, replies, embeds, and attachments, the viewer supports
 - **`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
+- **`@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,25 +20,15 @@ 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");
 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 {
@@ -192,44 +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);
-        // @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;
-        }
+        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/types.d.ts

@@ -71,6 +71,29 @@ 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`).

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "discord-html-transcripts-fix",
-  "version": "2.1.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,9 +31,7 @@
     "LICENSE"
   ],
   "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",