From 8a31dd699876e988d4aa929026f81810205e1a64 Mon Sep 17 00:00:00 2001
From: Phil Hawksworth <phil@deno.com>
Date: Mon, 16 Dec 2024 20:47:17 +0000
Subject: [PATCH] Add deno setup info (#6283)

* update install snippet to inlcude deno install command

* add deno variant of example app installation

* chore: apply lint and formatting fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 README.md                             |  3 +++
 www/docs/main/example-apps.mdx        | 21 +++++++++++++++++++++
 www/src/components/InstallSnippet.tsx |  4 ++++
 3 files changed, 28 insertions(+)

diff --git a/README.md b/README.md
index ad0f3bf20aa..58fa7ef580a 100644
--- a/README.md
+++ b/README.md
@@ -80,6 +80,9 @@ pnpm create next-app --example https://github.com/trpc/trpc --example-path examp
 
 # bun
 bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
+
+# deno
+deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
 ```
 
 **👉 See full documentation on [tRPC.io](https://trpc.io/docs). 👈**
diff --git a/www/docs/main/example-apps.mdx b/www/docs/main/example-apps.mdx
index 42ff100acec..d52c46b781b 100644
--- a/www/docs/main/example-apps.mdx
+++ b/www/docs/main/example-apps.mdx
@@ -46,6 +46,13 @@ pnpx create-next-app --example https://github.com/trpc/trpc --example-path examp
 
 ```sh
 bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
+```
+
+  </TabItem>
+  <TabItem value="deno" label="deno">
+
+```sh
+deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-starter trpc-prisma-starter
 ```
 
   </TabItem>
@@ -100,6 +107,13 @@ pnpx create-next-app --example https://github.com/trpc/trpc --example-path examp
 
 ```sh
 bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
+```
+
+  </TabItem>
+  <TabItem value="deno" label="deno">
+
+```sh
+deno init --npm create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-websockets-starter trpc-prisma-websockets-starter
 ```
 
   </TabItem>
@@ -139,6 +153,13 @@ pnpx create-next-app --example https://github.com/trpc/trpc --example-path examp
 
 ```sh
 bunx create-next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo
+```
+
+  </TabItem>
+  <TabItem value="deno" label="deno">
+
+```sh
+deno init --npm next-app --example https://github.com/trpc/trpc --example-path examples/next-prisma-todomvc trpc-todo
 ```
 
   </TabItem>
diff --git a/www/src/components/InstallSnippet.tsx b/www/src/components/InstallSnippet.tsx
index 69c42becfbf..3501a09be19 100644
--- a/www/src/components/InstallSnippet.tsx
+++ b/www/src/components/InstallSnippet.tsx
@@ -5,12 +5,16 @@ import React from 'react';
 
 export function InstallSnippet(props: { pkgs: string[] | string }) {
   const pkgs = Array.isArray(props.pkgs) ? props.pkgs.join(' ') : props.pkgs;
+  const pkgsDeno = Array.isArray(props.pkgs)
+    ? `npm:${props.pkgs.join(' npm:')}`
+    : `npm:${props.pkgs.split(' ').join(' npm:')}`;
 
   const snippets: Record<string, string> = {
     npm: `npm install ${pkgs}`,
     yarn: `yarn add ${pkgs}`,
     pnpm: `pnpm add ${pkgs}`,
     bun: `bun add ${pkgs}`,
+    deno: `deno add ${pkgsDeno}`,
   };
   return (
     <Tabs>