Skip to content

Commit 8eae0a7

Browse files
rphlmrrphlmr
authored
[FIX] Temporary Defer hard fix (#138)
1 parent dd79f8b commit 8eae0a7

File tree

23 files changed

+2085
-1883
lines changed

23 files changed

+2085
-1883
lines changed

‎.changeset/pre.json

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"mode": "pre",
3+
"tag": "next",
4+
"initialVersions": {
5+
"react-router-hono-server": "2.17.0-pre"
6+
},
7+
"changesets": []
8+
}

‎.changeset/purple-crabs-follow.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
"react-router-hono-server": minor
3+
---
4+
5+
## Node and Bun
6+
- Lock Hono Node Server version to temporarily fix defer issue.
7+
- Bundle `@hono/node-server` and `@hono/vite-dev-server` to make sure the correct version is used. This will be reverted once the issue is resolved in Hono.
8+
- Improve performance by awaiting the import of React Router build before starting the server. (instead of awaiting it in the first request)
9+
- If your server bundle is large, import can take a while, so this change will improve the first request performance since it will be done before the server starts listening.

‎.github/workflows/publish-commit.yaml

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,16 @@ jobs:
2424
- name: 🏗️ Build
2525
run: pnpm build
2626

27-
- name: 📦 Publish
27+
- name: 🔍 Check pre-release mode
28+
id: prerelease
29+
run: |
30+
if [[ -f ".changeset/pre.json" ]] && [[ $(cat .changeset/pre.json | jq -r '.mode') != "exit" ]]; then
31+
echo "mode=pre-release" >> $GITHUB_OUTPUT
32+
echo "📦 Building pre-release package"
33+
else
34+
echo "mode=stable" >> $GITHUB_OUTPUT
35+
echo "📦 Building stable package"
36+
fi
37+
38+
- name: 📦 Publish (${{ steps.prerelease.outputs.mode }})
2839
run: pnpm dlx pkg-pr-new publish --packageManager=pnpm

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -490,6 +490,10 @@ You can add additional Hono middleware with the `configure` function. If you do
490490
491491
The `configure` function can be async. So, make sure to `await createHonoServer()`.
492492
493+
> NB: If you import some shared code in your server file (or middleware), Vite will code split the file (your server code will be in a separate chunk, re-exported as default in `build/server/index.js`).
494+
>
495+
> In this situation, if you `await createHonoServer()` it will error with `Detected unsettled top-level await`. Just remove the `await` and it will work fine.
496+
493497
If you want to set up the React Router `AppLoadContext`, pass in a function to `getLoadContext`.
494498
495499
Modify the `AppLoadContext` interface used in your app.

‎biome.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"$schema": "https://biomejs.dev/schemas/1.8.3/schema.json",
33
"files": {
4-
"ignore": ["dist", "build", "examples"]
4+
"ignore": ["dist", "build", "out", "examples"]
55
},
66
"vcs": {
77
"enabled": true,

‎examples/node/simple/app/components/lazy.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export function LazyComponent() {
2+
return <div>Lazy Component</div>;
3+
}

‎examples/node/simple/app/routes/_index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,26 +30,26 @@ export default function Index({ loaderData: data }: Route.ComponentProps) {
3030
console.log("value", value);
3131
const { revalidate } = useRevalidator();
3232
return (
33-
<div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
33+
<div className="flex flex-col justify-center items-center bg-gray-100 min-h-screen">
3434
<button type="button" onClick={revalidate} className="flex items-center gap-2">
3535
<img src={dbLogo} alt="Database" />
3636
Revalidate
3737
</button>
3838
<input />
3939
<Input value={value} onChange={(e) => setValue(e.target.value)} />
4040
<div className="mt-8 w-full max-w-4xl overflow-x-auto">
41-
<table className="w-full border-collapse bg-gray-100 shadow-md rounded-lg">
41+
<table className="bg-gray-100 shadow-md rounded-lg w-full border-collapse">
4242
<thead>
4343
<tr className="bg-gray-200">
44-
<th className="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">Key</th>
45-
<th className="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">Value</th>
44+
<th className="px-6 py-3 font-medium text-gray-600 text-xs text-left uppercase tracking-wider">Key</th>
45+
<th className="px-6 py-3 font-medium text-gray-600 text-xs text-left uppercase tracking-wider">Value</th>
4646
</tr>
4747
</thead>
4848
<tbody className="bg-white divide-y divide-gray-200">
4949
{Object.entries(data.env).map(([key, value]) => (
5050
<tr key={key} className="hover:bg-gray-50">
51-
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{key}</td>
52-
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{value ?? "-"}</td>
51+
<td className="px-6 py-4 font-medium text-gray-900 text-sm whitespace-nowrap">{key}</td>
52+
<td className="px-6 py-4 text-gray-500 text-sm whitespace-nowrap">{value ?? "-"}</td>
5353
</tr>
5454
))}
5555
</tbody>

‎examples/node/simple/app/routes/app_.sub.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,26 +30,26 @@ export default function Index({ loaderData: data }: Route.ComponentProps) {
3030
console.log("value", value);
3131
const { revalidate } = useRevalidator();
3232
return (
33-
<div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center">
33+
<div className="flex flex-col justify-center items-center bg-gray-100 min-h-screen">
3434
<button type="button" onClick={revalidate} className="flex items-center gap-2">
3535
<img src={dbLogo} alt="Database" />
3636
Revalidate
3737
</button>
3838
<input />
3939
<Input value={value} onChange={(e) => setValue(e.target.value)} />
4040
<div className="mt-8 w-full max-w-4xl overflow-x-auto">
41-
<table className="w-full border-collapse bg-gray-100 shadow-md rounded-lg">
41+
<table className="bg-gray-100 shadow-md rounded-lg w-full border-collapse">
4242
<thead>
4343
<tr className="bg-gray-200">
44-
<th className="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">Key</th>
45-
<th className="px-6 py-3 text-left text-xs font-medium text-gray-600 uppercase tracking-wider">Value</th>
44+
<th className="px-6 py-3 font-medium text-gray-600 text-xs text-left uppercase tracking-wider">Key</th>
45+
<th className="px-6 py-3 font-medium text-gray-600 text-xs text-left uppercase tracking-wider">Value</th>
4646
</tr>
4747
</thead>
4848
<tbody className="bg-white divide-y divide-gray-200">
4949
{Object.entries(data.env).map(([key, value]) => (
5050
<tr key={key} className="hover:bg-gray-50">
51-
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{key}</td>
52-
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{value ?? "-"}</td>
51+
<td className="px-6 py-4 font-medium text-gray-900 text-sm whitespace-nowrap">{key}</td>
52+
<td className="px-6 py-4 text-gray-500 text-sm whitespace-nowrap">{value ?? "-"}</td>
5353
</tr>
5454
))}
5555
</tbody>

‎examples/node/simple/app/routes/defer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
2-
import { Await, useLoaderData } from "react-router";
3-
import { Route } from "./+types/defer";
2+
import { Await } from "react-router";
3+
import type { Route } from "./+types/defer";
44

55
async function getProjectLocation() {
66
return new Promise((resolve) => setTimeout(() => resolve("user/project"), 2000)) as Promise<string>;

‎examples/node/simple/app/routes/lazy.tsx

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Suspense, lazy } from "react";
2+
3+
const LazyComponent = lazy(() => import("../components/lazy").then((mod) => ({ default: mod.LazyComponent })));
4+
5+
export default function View() {
6+
return (
7+
<div>
8+
<h1>Route with lazy imported component</h1>
9+
<Suspense fallback={<div>Loading...</div>}>
10+
<LazyComponent />
11+
</Suspense>
12+
</div>
13+
);
14+
}

0 commit comments

Comments
 (0)