chore: add subscription example with superjson

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/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);
+          },
         });
       }}
     >