git.stevedylan.dev

fix: Fixed hono rpc type 370aef9d

Full fix for https://github.com/stevedylandev/bhvr/issues/12

Steve · 2025-05-11 13:54 2 file(s) · +29 −59

index.js +2 −31

	defaultTemplate,
	shadcnTemplate,
	tailwindTemplate,
	honoRpcTemplate,
} from "./utils/templates.js";

const __filename = fileURLToPath(import.meta.url);


		// 2. Server modification for RPC export type
		const serverIndexPath = path.join(projectPath, "server", "src", "index.ts");
		let serverContent = await fs.readFile(serverIndexPath, "utf8");

		if (!serverContent.includes("export type AppType")) {
			// Update server content to export the type
			const updatedServerContent = `import { Hono } from 'hono'
import { cors } from 'hono/cors'
import type { ApiResponse } from 'shared/dist'

const app = new Hono()

app.use(cors())

const routes = app.get('/', (c) => {
  return c.text('Hello Hono!')
})

.get('/hello', async (c) => {

  const data: ApiResponse = {
    message: "Hello BHVR!",
    success: true
  }

  return c.json(data, { status: 200 })
})

export type AppType = typeof routes
export default app`;

			await fs.writeFile(serverIndexPath, updatedServerContent, "utf8");
		}
		await fs.writeFile(serverIndexPath, honoRpcTemplate, "utf8");

		// 3. Update App.tsx based on template selection using switch statement
		const appTsxPath = path.join(projectPath, "client", "src", "App.tsx");

utils/templates.js +27 −28

export const honoRpcTemplate = `import { Hono } from 'hono'
import { cors } from 'hono/cors'
import type { ApiResponse } from 'shared/dist'
export const honoRpcTemplate = `import { Hono } from "hono";
import { cors } from "hono/cors";
import type { ApiResponse } from "shared/dist";
import { hc } from "hono/client";

const app = new Hono()
export const app = new Hono()

app.use(cors())
.use(cors())

app.get('/', (c) => {
  return c.text('Hello Hono!')
.get("/", (c) => {
	return c.text("Hello Hono!");
})

app.get('/hello', async (c) => {
.get("/hello", async (c) => {
	const data: ApiResponse = {
		message: "Hello BHVR!",
		success: true,
	};

  const data: ApiResponse = {
    message: "Hello BHVR!",
    success: true
  }
	return c.json(data, { status: 200 });
});

const client = hc<typeof app>("");
export type Client = typeof client;

  return c.json(data, { status: 200 })
})
export const hcWithType = (...args: Parameters<typeof hc>): Client =>
hc<typeof app>(...args);

export type AppType = typeof app
export default app`;
export default app;`;

export const tailwindTemplate = `import { useState } from 'react'
import beaver from './assets/beaver.svg'
import type { AppType } from 'server'
import { hc } from 'hono/client'
import { hcWithType } from 'server'

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;

//@ts-ignore
const client = hc<AppType>(SERVER_URL);
const client = hcWithType(SERVER_URL);

function App() {
  const [data, setData] = useState<Awaited<ReturnType<ResponseType["json"]>> | undefined>()

export const shadcnTemplate = `import { useState } from 'react'
import beaver from './assets/beaver.svg'
import { Button } from './components/ui/button'
import type { AppType } from 'server'
import { hc } from 'hono/client'
import { hcWithType } from 'server'

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"

//@ts-ignore
const client = hc<AppType>(SERVER_URL);
const client = hcWithType(SERVER_URL);

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;



export const defaultTemplate = `import { useState } from 'react'
import beaver from './assets/beaver.svg'
import type { AppType } from 'server'
import { hc } from 'hono/client'
import { hcWithType } from 'server'
import './App.css'

const SERVER_URL = import.meta.env.VITE_SERVER_URL || "http://localhost:3000"

//@ts-ignore
const client = hc<AppType>(SERVER_URL);
const client = hcWithType(SERVER_URL);

type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;


14	14		defaultTemplate,
15	15		shadcnTemplate,
16	16		tailwindTemplate,
	17	+	honoRpcTemplate,
17	18		} from "./utils/templates.js";
18	19
19	20		const __filename = fileURLToPath(import.meta.url);

351	352
352	353		// 2. Server modification for RPC export type
353	354		const serverIndexPath = path.join(projectPath, "server", "src", "index.ts");
354		-	let serverContent = await fs.readFile(serverIndexPath, "utf8");
355		-
356		-	if (!serverContent.includes("export type AppType")) {
357		-	// Update server content to export the type
358		-	const updatedServerContent = `import { Hono } from 'hono'
359		-	import { cors } from 'hono/cors'
360		-	import type { ApiResponse } from 'shared/dist'
361		-
362		-	const app = new Hono()
363		-
364		-	app.use(cors())
365		-
366		-	const routes = app.get('/', (c) => {
367		-	return c.text('Hello Hono!')
368		-	})
369		-
370		-	.get('/hello', async (c) => {
371		-
372		-	const data: ApiResponse = {
373		-	message: "Hello BHVR!",
374		-	success: true
375		-	}
376		-
377		-	return c.json(data, { status: 200 })
378		-	})
379		-
380		-	export type AppType = typeof routes
381		-	export default app`;
382		-
383		-	await fs.writeFile(serverIndexPath, updatedServerContent, "utf8");
384		-	}
	355	+	await fs.writeFile(serverIndexPath, honoRpcTemplate, "utf8");
385	356
386	357		// 3. Update App.tsx based on template selection using switch statement
387	358		const appTsxPath = path.join(projectPath, "client", "src", "App.tsx");

1		-	export const honoRpcTemplate = `import { Hono } from 'hono'
2		-	import { cors } from 'hono/cors'
3		-	import type { ApiResponse } from 'shared/dist'
	1	+	export const honoRpcTemplate = `import { Hono } from "hono";
	2	+	import { cors } from "hono/cors";
	3	+	import type { ApiResponse } from "shared/dist";
	4	+	import { hc } from "hono/client";
4	5
5		-	const app = new Hono()
	6	+	export const app = new Hono()
6	7
7		-	app.use(cors())
	8	+	.use(cors())
8	9
9		-	app.get('/', (c) => {
10		-	return c.text('Hello Hono!')
	10	+	.get("/", (c) => {
	11	+	return c.text("Hello Hono!");
11	12		})
12	13
13		-	app.get('/hello', async (c) => {
	14	+	.get("/hello", async (c) => {
	15	+	const data: ApiResponse = {
	16	+	message: "Hello BHVR!",
	17	+	success: true,
	18	+	};
14	19
15		-	const data: ApiResponse = {
16		-	message: "Hello BHVR!",
17		-	success: true
18		-	}
	20	+	return c.json(data, { status: 200 });
	21	+	});
	22	+
	23	+	const client = hc<typeof app>("");
	24	+	export type Client = typeof client;
19	25
20		-	return c.json(data, { status: 200 })
21		-	})
	26	+	export const hcWithType = (...args: Parameters<typeof hc>): Client =>
	27	+	hc<typeof app>(...args);
22	28
23		-	export type AppType = typeof app
24		-	export default app`;
	29	+	export default app;`;
25	30
26	31		export const tailwindTemplate = `import { useState } from 'react'
27	32		import beaver from './assets/beaver.svg'
28		-	import type { AppType } from 'server'
29		-	import { hc } from 'hono/client'
	33	+	import { hcWithType } from 'server'
30	34
31	35		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"
32	36
33	37		type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
34	38
35		-	//@ts-ignore
36		-	const client = hc<AppType>(SERVER_URL);
	39	+	const client = hcWithType(SERVER_URL);
37	40
38	41		function App() {
39	42		const [data, setData] = useState<Awaited<ReturnType<ResponseType["json"]>> \| undefined>()

92	95		export const shadcnTemplate = `import { useState } from 'react'
93	96		import beaver from './assets/beaver.svg'
94	97		import { Button } from './components/ui/button'
95		-	import type { AppType } from 'server'
96		-	import { hc } from 'hono/client'
	98	+	import { hcWithType } from 'server'
97	99
98	100		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"
99	101
100		-	//@ts-ignore
101		-	const client = hc<AppType>(SERVER_URL);
	102	+	const client = hcWithType(SERVER_URL);
102	103
103	104		type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
104	105

162	163
163	164		export const defaultTemplate = `import { useState } from 'react'
164	165		import beaver from './assets/beaver.svg'
165		-	import type { AppType } from 'server'
166		-	import { hc } from 'hono/client'
	166	+	import { hcWithType } from 'server'
167	167		import './App.css'
168	168
169	169		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"
170	170
171		-	//@ts-ignore
172		-	const client = hc<AppType>(SERVER_URL);
	171	+	const client = hcWithType(SERVER_URL);
173	172
174	173		type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
175	174