TypeSafe Primitives for a Realtime Web

// backend
const sendMessage = io.procedure
  .input(z.object({ message: z.ZodStringmessage: z.string() }))
  .broadcast(({ message: stringmessage }) => ({
    receiveMessage: { message: stringmessage },
  }));

const router = io.router({ sendMessage });
const ioServer = io.server({ router });

// frontend
event.receiveMessage.useEvent(({ data }) => {
  console.log(data.message: stringmessage);
});

broadcast.
sendMessage: (input: {
    message: string;
}) => voidsendMessage({ message: stringmessage: "Hello!" });

// pnpm install @pluv/platform-node
createIO(platformNode());

// pnpm install @pluv/platform-cloudflare
createIO(platformCloudflare());

const GET = async (req: Request) => {
  const const room: stringroom = getRoomFromUrl(req.url);
  const { 
const user: {
    id: string;
}user } = await getSession(req);

  const token = await ioServer
    .createToken({ room: stringroom, 
user: {
    id: string;
}user });

  return new Response(token, { status: 200 });
};

const {
  useBroadcast,
  useOthers,
  // ...
} = createBundle(client);

const broadcast = useBroadcast();
const names = useOthers((others) => {
  return others.map(({ user }) => user.name);
});

// pnpm install @pluv/platform-pluv
const io = createIO(
  platformPluv({
    authorize: {
      user: z.object({ id: z.string() }),
    },
    basePath: "/api/pluv",
    publicKey: "pk_...",
    secretKey: "sk_...",
    webhookSecret: "whsec_...",
  }),
);

const client = createClient({
  types,
  initialStorage: yjs.doc(() => ({
    messages: YjsType<YArray<string>, string[]>messages: yjs.array<string>([]),
  })),
});

const [const messages: string[] | nullmessages, const type: YjsType<YArray<string>, string[]> | nulltype] = useStorage("messages");

const addMessage = (message: stringmessage: string) => {
  const type: YjsType<YArray<string>, string[]> | nulltype?.push([message: stringmessage]);
};

const messages: string[] | nullmessages?.map((message: stringmessage, i) => (
  <div key={i}>{message: stringmessage}</div>
));

const client = createClient({
  types,
  
presence?: InputZodLike<{
    cursor: {
        x: number;
        y: number;
    } | null;
}> | undefinedpresence: z.object({
    
cursor: z.ZodNullable<z.ZodObject<{
    x: z.ZodNumber;
    y: z.ZodNumber;
}, "strip", z.ZodTypeAny, {
    x: number;
    y: number;
}, {
    x: number;
    y: number;
}>>cursor: z.object({
      x: z.number(),
      y: z.number(),
    }).nullable(),
  }),
});

const [
const myCursor: {
    x: number;
    y: number;
} | nullmyCursor] = useMyPresence(
  ({ 
cursor: {
    x: number;
    y: number;
} | nullcursor }) => 
cursor: {
    x: number;
    y: number;
} | nullcursor,
);
const 
const cursors: ({
    x: number;
    y: number;
} | null)[]cursors = useOthers((others) => (
  others.map(({ 
presence: {
    cursor: {
        x: number;
        y: number;
    } | null;
}presence }) => 
presence: {
    cursor: {
        x: number;
        y: number;
    } | null;
}presence.
cursor: {
    x: number;
    y: number;
} | nullcursor)
));