Skip to content

Commit 43ba750

Browse files
brettkolodnybrettkolodny
committed
chore: move asset path logic and shared headers into new utils.tsx
1 parent 99c9cd4 commit 43ba750

File tree

2 files changed

+47
-39
lines changed

2 files changed

+47
-39
lines changed

‎src/server/index.tsx‎

Lines changed: 7 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Hono } from "hono";
44
import { renderToString } from "react-dom/server";
55
import { getShareData } from "./blob";
66
import { trimTrailingSlash } from "hono/trailing-slash";
7+
import { BaseHeader, getAssetPath, HmrScript } from "./utils";
78

89
// This must be exported for the dev server to work
910
export const app = new Hono();
@@ -20,6 +21,8 @@ app.route("/api", api);
2021

2122
app.use(trimTrailingSlash());
2223

24+
app.get("/", (c) => c.redirect("/parameters"));
25+
2326
// Serves the main web application. This must come after the API route.
2427
app.get("/parameters/:shareId?/:example?", async (c) => {
2528
const getExampleCode = async (): Promise<string | null> => {
@@ -37,33 +40,6 @@ app.get("/parameters/:shareId?/:example?", async (c) => {
3740
return examples[example] ?? null;
3841
};
3942

40-
// Along with the vite React plugin this enables HMR within react while
41-
// running the dev server.
42-
const { url } = c.req;
43-
const { origin } = new URL(url);
44-
const injectClientScript = `
45-
import RefreshRuntime from "${origin}/@react-refresh";
46-
RefreshRuntime.injectIntoGlobalHook(window);
47-
window.$RefreshReg$ = () => {};
48-
window.$RefreshSig$ = () => (type) => type;
49-
window.__vite_plugin_react_preamble_installed__ = true;
50-
`;
51-
const hmrScript = import.meta.env.DEV ? (
52-
<script type="module">{injectClientScript}</script>
53-
) : null;
54-
55-
// Sets the correct path for static assets based on the environment.
56-
// The production paths are hard coded based on the output of the build script.
57-
const cssPath = import.meta.env.PROD
58-
? "/assets/index.css"
59-
: "/src/client/index.css";
60-
const clientScriptPath = import.meta.env.PROD
61-
? "/assets/client.js"
62-
: "/src/client/index.tsx";
63-
const wasmExecScriptPath = import.meta.env.PROD
64-
? "/assets/wasm_exec.js"
65-
: "/wasm_exec.js";
66-
const iconPath = import.meta.env.PROD ? "/assets/logo.svg" : "/logo.svg";
6743
const exampleCode = await getExampleCode();
6844

6945
return c.html(
@@ -72,28 +48,20 @@ app.get("/parameters/:shareId?/:example?", async (c) => {
7248
renderToString(
7349
<html lang="en">
7450
<head>
75-
<meta charSet="UTF-8" />
76-
<link rel="icon" type="image/svg+xml" href={iconPath} />
77-
<meta
78-
name="viewport"
79-
content="width=device-width, initial-scale=1.0"
80-
/>
8151
<title>Parameters Playground</title>
82-
<link rel="stylesheet" href={cssPath} />
83-
{hmrScript}
84-
<script type="module" src={wasmExecScriptPath}></script>
52+
<BaseHeader />
53+
<HmrScript url={new URL(c.req.url)} />
54+
<script type="module" src={getAssetPath("/wasm_exec.js")}></script>
8555
</head>
8656
<body>
8757
<div id="root"></div>
8858
{exampleCode ? (
8959
<script type="module">{`window.CODE = ${JSON.stringify(exampleCode)}`}</script>
9060
) : null}
91-
<script type="module" src={clientScriptPath}></script>
61+
<script type="module" src={getAssetPath("/src/client/index.tsx")}></script>
9262
</body>
9363
</html>,
9464
),
9565
].join("\n"),
9666
);
9767
});
98-
99-
app.get("*", (c) => c.redirect("/parameters"));

‎src/server/utils.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import path from "node:path";
2+
import type { FC } from "react";
3+
4+
export const getAssetPath = (assetPath: string): string => {
5+
if (import.meta.env.PROD) {
6+
const pathParts = assetPath.split(path.sep);
7+
return pathParts[pathParts.length - 1];
8+
} else {
9+
return assetPath;
10+
}
11+
};
12+
13+
// Along with the vite React plugin this enables HMR within react while
14+
// running the dev server.
15+
export const HmrScript: FC<{ url: URL }> = ({ url }) => {
16+
if (import.meta.env.PROD) {
17+
return null;
18+
}
19+
20+
const injectClientScript = `
21+
import RefreshRuntime from "${url.origin}/@react-refresh";
22+
RefreshRuntime.injectIntoGlobalHook(window);
23+
window.$RefreshReg$ = () => {};
24+
window.$RefreshSig$ = () => (type) => type;
25+
window.__vite_plugin_react_preamble_installed__ = true;
26+
`;
27+
28+
return <script type="module">{injectClientScript}</script>;
29+
};
30+
31+
export const BaseHeader = () => {
32+
return (
33+
<>
34+
<meta charSet="UTF-8" />
35+
<link rel="icon" type="image/svg+xml" href={getAssetPath("/logo.svg")} />
36+
<link rel="stylesheet" href={getAssetPath("/src/client/index.css")} />
37+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
38+
</>
39+
);
40+
};

0 commit comments

Comments
 (0)