git.stevedylan.dev

Merge pull request #4 from stevedylandev/fix/hono-rpc-setup bcf4ea13

fix: Fixed how Hono RPC is exported and imported

Steve Simkins · 2025-06-07 20:26 2 file(s) · +23 −11

src/utils/helpers.ts +12 −2

import fs from "fs-extra";
import {
	honoRpcTemplate,
	honoClientTemplate,
	shadcnTemplate,
	tailwindTemplate,
	defaultTemplate,


		await fs.writeJson(serverPkgPath, serverPkg, { spaces: 2 });

		// 3. Server modification for RPC export type
		// 3. Server modification for RPC export type (no client imports)
		const serverIndexPath = path.join(projectPath, "server", "src", "index.ts");
		await fs.writeFile(serverIndexPath, honoRpcTemplate, "utf8");

		// 4. Update App.tsx based on template selection using switch statement
		// 4. Create separate client helper file
		const clientHelperPath = path.join(
			projectPath,
			"server",
			"src",
			"client.ts",
		);
		await fs.writeFile(clientHelperPath, honoClientTemplate, "utf8");

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

		// Determine template content based on the template type

src/utils/templates.ts +11 −9

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

export const app = new Hono()


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

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

export const hcWithType = (...args: Parameters<typeof hc>): Client =>
hc<typeof app>(...args);
export const honoClientTemplate = `import { hc } from "hono/client";
import type { app } from "./index";

export default app;`;
export type AppType = typeof app;
export type Client = ReturnType<typeof hc<AppType>>;

export const hcWithType = (...args: Parameters<typeof hc>): Client =>
  hc<AppType>(...args);`;

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

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


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

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



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

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

6	6		import fs from "fs-extra";
7	7		import {
8	8		honoRpcTemplate,
	9	+	honoClientTemplate,
9	10		shadcnTemplate,
10	11		tailwindTemplate,
11	12		defaultTemplate,

65	66
66	67		await fs.writeJson(serverPkgPath, serverPkg, { spaces: 2 });
67	68
68		-	// 3. Server modification for RPC export type
	69	+	// 3. Server modification for RPC export type (no client imports)
69	70		const serverIndexPath = path.join(projectPath, "server", "src", "index.ts");
70	71		await fs.writeFile(serverIndexPath, honoRpcTemplate, "utf8");
71	72
72		-	// 4. Update App.tsx based on template selection using switch statement
	73	+	// 4. Create separate client helper file
	74	+	const clientHelperPath = path.join(
	75	+	projectPath,
	76	+	"server",
	77	+	"src",
	78	+	"client.ts",
	79	+	);
	80	+	await fs.writeFile(clientHelperPath, honoClientTemplate, "utf8");
	81	+
	82	+	// 5. Update App.tsx based on template selection using switch statement
73	83		const appTsxPath = path.join(projectPath, "client", "src", "App.tsx");
74	84
75	85		// Determine template content based on the template type

15	15		export const honoRpcTemplate = `import { Hono } from "hono";
16	16		import { cors } from "hono/cors";
17	17		import type { ApiResponse } from "shared/dist";
18		-	import { hc } from "hono/client";
19	18
20	19		export const app = new Hono()
21	20

34	33		return c.json(data, { status: 200 });
35	34		});
36	35
37		-	const client = hc<typeof app>("");
38		-	export type Client = typeof client;
	36	+	export default app;`;
39	37
40		-	export const hcWithType = (...args: Parameters<typeof hc>): Client =>
41		-	hc<typeof app>(...args);
	38	+	export const honoClientTemplate = `import { hc } from "hono/client";
	39	+	import type { app } from "./index";
42	40
43		-	export default app;`;
	41	+	export type AppType = typeof app;
	42	+	export type Client = ReturnType<typeof hc<AppType>>;
	43	+
	44	+	export const hcWithType = (...args: Parameters<typeof hc>): Client =>
	45	+	hc<AppType>(...args);`;
44	46
45	47		export const tailwindTemplate = `import { useState } from 'react'
46	48		import beaver from './assets/beaver.svg'
47		-	import { hcWithType } from 'server'
	49	+	import { hcWithType } from 'server/dist/client'
48	50
49	51		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"
50	52

109	111		export const shadcnTemplate = `import { useState } from 'react'
110	112		import beaver from './assets/beaver.svg'
111	113		import { Button } from './components/ui/button'
112		-	import { hcWithType } from 'server'
	114	+	import { hcWithType } from 'server/dist/client'
113	115
114	116		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"
115	117

177	179
178	180		export const defaultTemplate = `import { useState } from 'react'
179	181		import beaver from './assets/beaver.svg'
180		-	import { hcWithType } from 'server'
	182	+	import { hcWithType } from 'server/dist/client'
181	183		import './App.css'
182	184
183	185		const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000"