chore: release v0.9.0 - superjson support and ESM fix

Author: liorcodev

CHANGELOG.md

@@ -5,6 +5,32 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this project
 adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.9.0] - 2026-04-08
+
+### Added
+
+- **SuperJSON Transformer Support** - The test playground now fully supports tRPC routers using the
+  `superjson` transformer. Configure with `generateDocsHtml(routes, { transformer: 'superjson' })`
+  to automatically:
+  - Wrap request inputs in `{ json: ... }` format expected by superjson
+  - Unwrap response data from `{ result: { data: { json: ... } } }` structure
+  - Enable seamless testing of endpoints that return `Date` objects, `undefined`, `BigInt`, `Map`,
+    `Set`, and other non-JSON types
+  - See the new "SuperJSON Support" section in README for complete usage guide
+
+### Fixed
+
+- **Node.js Native ESM Compatibility** - Package now works correctly with Node.js native ESM
+  resolution (Node 16+, Node 22+):
+  - All relative imports now include explicit `.js` file extensions as required by the ECMAScript
+    spec
+  - Updated TypeScript config to use `"moduleResolution": "node16"` and `"module": "Node16"` for
+    proper ESM compliance
+  - Resolves `ERR_MODULE_NOT_FOUND` errors when importing the package without a bundler
+  - Fully backward compatible with existing bundler-based workflows (Vite, webpack, Rollup, etc.)
+
+---
+
 ## [0.8.0] - 2026-04-04
 
 ### Added

README.md

@@ -137,6 +137,10 @@ npm install trpc-docs-generator
 
 - `@trpc/server` ^11.0.0
 - Zod v4+ (with `toJSONSchema` support)
+- Node.js 16+ (with native ESM support)
+
+**Note:** This package uses native ESM with explicit `.js` file extensions in imports, ensuring
+compatibility with Node.js native module resolution (Node 16+, Node 22+).
 
 <br/>
 
@@ -407,6 +411,10 @@ Generates a complete HTML documentation page from route information.
 - `routes` - Array of route information from `collectRoutes()`
 - `options` - Optional configuration:
   - `title` - Page title (default: `'API Documentation'`)
+  - `transformer` - Data transformer used by tRPC router (optional)
+    - Set to `'superjson'` if your router uses the superjson transformer
+    - This ensures the test playground correctly wraps requests/responses in `{json: ...}` format
+    - See [SuperJSON Support](#superjson-support) for details
 
 **Returns:**
 
@@ -438,6 +446,67 @@ type RouteMeta = {
 
 <br/>
 
+## SuperJSON Support
+
+If your tRPC router uses the [superjson transformer](https://trpc.io/docs/data-transformers), you
+need to configure the docs generator to match. SuperJSON wraps requests/responses in a special
+format (`{json: ...}`) to support JavaScript types that standard JSON doesn't handle (Date,
+undefined, BigInt, Map, Set, etc.).
+
+### Usage with SuperJSON
+
+```typescript
+import { initTRPC } from '@trpc/server';
+import superjson from 'superjson';
+import { collectRoutes, generateDocsHtml } from 'trpc-docs-generator';
+
+// Your tRPC router with superjson transformer
+const t = initTRPC.create({
+  transformer: superjson // Using superjson
+});
+
+const appRouter = t.router({
+  getEvent: t.procedure.input(z.object({ id: z.string() })).query(() => ({
+    id: '123',
+    name: 'Conference',
+    startDate: new Date() // Date objects work with superjson!
+  }))
+});
+
+// Generate docs WITH superjson support
+const routes = collectRoutes(appRouter);
+const html = generateDocsHtml(routes, {
+  title: 'My API Documentation',
+  transformer: 'superjson' // Enable superjson in test playground
+});
+```
+
+### What This Does
+
+**Without** `transformer: 'superjson'`:
+
+- Request: `{"id": "123"}`
+- Your superjson-enabled tRPC server expects: `{"json": {"id": "123"}}`
+- Result: ❌ **Request fails** with "Invalid input: expected object, received undefined"
+
+**With** `transformer: 'superjson'`:
+
+- Request: `{"json": {"id": "123"}}`
+- Response unwrapping: Automatically extracts data from `{result: {data: {json: {...}}}}`
+- Result: ✅ **Everything works perfectly**
+
+### When to Use
+
+Enable `transformer: 'superjson'` if your tRPC router:
+
+- Uses `superjson` transformer in `initTRPC.create({ transformer: superjson })`
+- Returns Date objects, undefined values, BigInt, Map, Set, or other non-JSON types
+- Is configured with any custom transformer that wraps data
+
+If you're using standard JSON (no transformer), you don't need this option.
+
+<br/>
+
 ## Examples
 
 ### Full Featured Router

package.json

@@ -1,6 +1,6 @@
 {
   "name": "trpc-docs-generator",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "author": "Lior Cohen",
   "homepage": "https://github.com/liorcodev/trpc-docs-generator#readme",
   "repository": {
@@ -19,6 +19,7 @@
     "@types/node": "^25.5.0",
     "prettier": "^3.8.1",
     "sharp": "^0.34.5",
+    "superjson": "^2.2.6",
     "typescript": "^5.9.3",
     "zod": "^4.3.6"
   },

src/assets-inline.ts

@@ -9,7 +9,7 @@ import { getStyles, getScripts, getLogo } from './assets-inline.js';
  * @returns HTML string
  */
 export function generateDocsHtml(routes: RouteInfo[], options: DocsGeneratorOptions = {}): string {
-  const { title = 'API Documentation' } = options;
+  const { title = 'API Documentation', transformer } = options;
   const groupedRoutes = groupRoutesByPrefix(routes);
 
   return `<!DOCTYPE html>
@@ -211,6 +211,9 @@ export function generateDocsHtml(routes: RouteInfo[], options: DocsGeneratorOpti
   </div>
 
   <script>
+    // tRPC transformer configuration
+    window.TRPC_TRANSFORMER = ${transformer ? `'${transformer}'` : 'undefined'};
+    
     ${getScripts()}
   </script>
 </body>

src/generate-html.ts

@@ -388,11 +388,17 @@ async function testEndpoint(routeId, path, type) {
       headers: headers
     };
 
+    // Wrap input data if using superjson transformer
+    let serializedInput = inputData;
+    if (window.TRPC_TRANSFORMER === 'superjson' && inputData !== null && inputData !== undefined) {
+      serializedInput = { json: inputData };
+    }
+
     if (method === 'GET' && inputData) {
-      const params = new URLSearchParams({ input: JSON.stringify(inputData) });
+      const params = new URLSearchParams({ input: JSON.stringify(serializedInput) });
       url = `${url}?${params}`;
     } else if (method === 'POST') {
-      fetchOptions.body = JSON.stringify(inputData);
+      fetchOptions.body = JSON.stringify(serializedInput);
     }
 
     const response = await fetch(url, fetchOptions);
@@ -401,6 +407,19 @@ async function testEndpoint(routeId, path, type) {
     const contentType = response.headers.get('content-type');
     if (contentType && contentType.includes('application/json')) {
       data = await response.json();
+      // Unwrap superjson response if configured
+      if (
+        window.TRPC_TRANSFORMER === 'superjson' &&
+        data &&
+        typeof data === 'object' &&
+        'result' in data &&
+        data.result &&
+        'data' in data.result &&
+        data.result.data &&
+        'json' in data.result.data
+      ) {
+        data = data.result.data.json;
+      }
     } else {
       const text = await response.text();
       data = { message: text || 'No response body' };

src/scripts.js

@@ -26,4 +26,10 @@ export type RouteMeta = {
 export type DocsGeneratorOptions = {
   /** Title to display in the documentation page */
   title?: string;
+  /**
+   * Data transformer used by tRPC router
+   * Set to 'superjson' if your router uses superjson transformer
+   * This wraps requests/responses in {json: ...} format
+   */
+  transformer?: 'superjson';
 };