Merge pull request jlalmes#11 from diegodelrieu/fix/subscriptions

Fix/subscriptions

Author: janek26

examples/with-plasmo/package.json

@@ -13,6 +13,7 @@
     "plasmo": "^0.84.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "superjson": "^2.2.1",
     "zod": "^3.19.1"
   },
   "devDependencies": {

examples/with-plasmo/src/background.ts

@@ -1,17 +1,28 @@
 import { initTRPC } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import SuperJSON from 'superjson';
 import { z } from 'zod';
 
 import { createChromeHandler } from '../../../adapter';
 
 const t = initTRPC.create({
   isServer: false,
   allowOutsideOfServer: true,
+  transformer: SuperJSON,
 });
 
 const appRouter = t.router({
   openNewTab: t.procedure.input(z.object({ url: z.string().url() })).mutation(async ({ input }) => {
     await chrome.tabs.create({ url: input.url, active: true });
   }),
+  subscribeToAnything: t.procedure.subscription(() => {
+    return observable<string | undefined>((emit) => {
+      const interval = setInterval(() => {
+        emit.next(new Date().toISOString());
+      }, 1000);
+      return () => clearInterval(interval);
+    });
+  }),
 });
 
 export type AppRouter = typeof appRouter;

examples/with-plasmo/src/contents/content.ts

@@ -1,8 +1,11 @@
 import { relay } from 'trpc-browser/relay';
 import { autoConnect } from 'trpc-browser/shared/chrome';
 
-void autoConnect(chrome, (port) => {
-  return relay(window, port); // return so it has the cleanup function for disconnect
-}).then(() => {
+void autoConnect(
+  () => chrome.runtime.connect(),
+  (port) => {
+    return relay(window, port); // return so it has the cleanup function for disconnect
+  },
+).then(() => {
   return console.log('Content script loaded - bridge initialized');
 });

examples/with-plasmo/src/contents/inpage.tsx

@@ -1,6 +1,7 @@
 import { createTRPCProxyClient } from '@trpc/client';
 import type { PlasmoCSConfig } from 'plasmo';
 import type { FC } from 'react';
+import SuperJSON from 'superjson';
 import { windowLink } from 'trpc-browser/link';
 import type { AppRouter } from '~background';
 
@@ -12,6 +13,7 @@ export const config: PlasmoCSConfig = {
 };
 
 const windowClient = createTRPCProxyClient<AppRouter>({
+  transformer: SuperJSON,
   links: [/* 👉 */ windowLink({ window })],
 });
 
@@ -30,8 +32,10 @@ const ExtensionInpageUi: FC = () => {
         cursor: 'pointer',
       }}
       onClick={async () => {
-        await windowClient.openNewTab.mutate({
-          url: 'https://google.com',
+        await windowClient.subscribeToAnything.subscribe(undefined, {
+          onData(data) {
+            console.log('data', data);
+          },
         });
       }}
     >

package-lock.json

@@ -67,14 +67,16 @@ export const createChromeHandler = <TRouter extends AnyRouter>(
 
         sendResponse({
           // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-          error: getErrorShape({
-            config: router._def._config,
-            error,
-            type: method,
-            path: params.path,
-            input: params.input,
-            ctx,
-          }),
+          error: transformer.output.serialize(
+            getErrorShape({
+              config: router._def._config,
+              error,
+              type: method,
+              path: params.path,
+              input: params.input,
+              ctx,
+            }),
+          ),
         });
       };
 
@@ -105,7 +107,10 @@ export const createChromeHandler = <TRouter extends AnyRouter>(
         }
 
         const subscription = result.subscribe({
-          next: (data) => sendResponse({ result: { type: 'data', data } }),
+          next: (data) => {
+            const serializedData = transformer.output.serialize(data);
+            sendResponse({ result: { type: 'data', data: serializedData } });
+          },
           error: handleError,
           complete: () => sendResponse({ result: { type: 'stopped' } }),
         });

src/adapter/chrome.ts

@@ -73,14 +73,16 @@ export const createWindowHandler = <TRouter extends AnyRouter>(
 
       sendResponse({
         // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        error: getErrorShape({
-          config: router._def._config,
-          error,
-          type: method,
-          path: params.path,
-          input: params.input,
-          ctx,
-        }),
+        error: transformer.output.serialize(
+          getErrorShape({
+            config: router._def._config,
+            error,
+            type: method,
+            path: params.path,
+            input: params.input,
+            ctx,
+          }),
+        ),
       });
     };
 
@@ -111,7 +113,11 @@ export const createWindowHandler = <TRouter extends AnyRouter>(
       }
 
       const subscription = result.subscribe({
-        next: (data) => sendResponse({ result: { type: 'data', data } }),
+        next: (data) => {
+          const serializedData = transformer.output.serialize(data);
+
+          sendResponse({ result: { type: 'data', data: serializedData } });
+        },
         error: handleError,
         complete: () => sendResponse({ result: { type: 'stopped' } }),
       });