Fix subscription transformers. (#126)

* Fixed transform on subscription

* Update response transforms, add tests.

* Add superjson example.

* Merge CHANGELOG.

* Add changeset.

---------

Co-authored-by: Ben Williams <[email protected]>

Author: jsonnull

.changeset/red-pandas-behave.md

@@ -0,0 +1,7 @@
+---
+'electron-trpc': patch
+---
+
+Fix transforms not running for subscriptions.
+
+pr: 125

CHANGELOG.md

@@ -0,0 +1,35 @@
+import z from 'zod';
+import { initTRPC } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import { EventEmitter } from 'events';
+import superjson from 'superjson';
+
+const ee = new EventEmitter();
+
+const t = initTRPC.create({ isServer: true, transformer: superjson });
+
+export const router = t.router({
+  greeting: t.procedure.input(z.object({ name: z.string() })).query((req) => {
+    const { input } = req;
+
+    ee.emit('greeting', `Greeted ${input.name}`);
+    return {
+      text: `Hello ${input.name}` as const,
+    };
+  }),
+  subscription: t.procedure.subscription(() => {
+    return observable((emit) => {
+      function onGreet(text: string) {
+        emit.next({ text });
+      }
+
+      ee.on('greeting', onGreet);
+
+      return () => {
+        ee.off('greeting', onGreet);
+      };
+    });
+  }),
+});
+
+export type AppRouter = typeof router;

examples/basic/CHANGELOG.md renamed to examples/basic-react-superjson/CHANGELOG.md

@@ -1,6 +1,5 @@
 {
-  "name": "examples/basic",
-  "description": "Electron support for tRPC",
+  "name": "examples/basic-react-superjson",
   "version": "0.0.8",
   "private": true,
   "main": "dist-electron/index.js",
@@ -18,6 +17,7 @@
     "electron-trpc": "0.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "superjson": "^1.12.2",
     "zod": "^3.19.1"
   },
   "devDependencies": {

examples/basic-react-superjson/electron/api.ts

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import ReactDom from 'react-dom';
+import { ipcLink } from 'electron-trpc/renderer';
+import superjson from 'superjson';
+import { createTRPCReact } from '@trpc/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import type { AppRouter } from '../electron/api';
+
+const trpcReact = createTRPCReact<AppRouter>();
+
+function App() {
+  const [queryClient] = useState(() => new QueryClient());
+  const [trpcClient] = useState(() =>
+    trpcReact.createClient({
+      links: [ipcLink()],
+      transformer: superjson,
+    })
+  );
+
+  return (
+    <trpcReact.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        <HelloElectron />
+      </QueryClientProvider>
+    </trpcReact.Provider>
+  );
+}
+
+function HelloElectron() {
+  const { data } = trpcReact.greeting.useQuery({ name: 'Electron' });
+  trpcReact.subscription.useSubscription(undefined, {
+    onData: (data) => {
+      console.log(data);
+    },
+  });
+
+  if (!data) {
+    return null;
+  }
+
+  return <div>{data.text}</div>;
+}
+
+ReactDom.render(<App />, document.getElementById('react-root'));