@hono/vite-dev-server
Advanced tools
Comparing version 0.0.12 to 0.1.0
@@ -55,11 +55,5 @@ import { getRequestListener } from "@hono/node-server"; | ||
}); | ||
if (options?.injectClientScript !== false && // If the response is a streaming, it does not inject the script: | ||
!response.headers.get("transfer-encoding")?.match("chunked") && response.headers.get("content-type")?.match(/^text\/html/)) { | ||
const body = await response.text() + '<script type="module" src="/@vite/client"></script>'; | ||
const headers = new Headers(response.headers); | ||
headers.delete("content-length"); | ||
return new Response(body, { | ||
status: response.status, | ||
headers | ||
}); | ||
if (options?.injectClientScript !== false && response.headers.get("content-type")?.match(/^text\/html/)) { | ||
const script = '<script>import("/@vite/client")</script>'; | ||
return injectStringToResponse(response, script); | ||
} | ||
@@ -75,2 +69,41 @@ return response; | ||
} | ||
function injectStringToResponse(response, content) { | ||
const stream = response.body; | ||
const newContent = new TextEncoder().encode(content); | ||
if (!stream) | ||
return null; | ||
const reader = stream.getReader(); | ||
const newContentReader = new ReadableStream({ | ||
start(controller) { | ||
controller.enqueue(newContent); | ||
controller.close(); | ||
} | ||
}).getReader(); | ||
const combinedStream = new ReadableStream({ | ||
async start(controller) { | ||
for (; ; ) { | ||
const [existingResult, newContentResult] = await Promise.all([ | ||
reader.read(), | ||
newContentReader.read() | ||
]); | ||
if (existingResult.done && newContentResult.done) { | ||
controller.close(); | ||
break; | ||
} | ||
if (!existingResult.done) { | ||
controller.enqueue(existingResult.value); | ||
} | ||
if (!newContentResult.done) { | ||
controller.enqueue(newContentResult.value); | ||
} | ||
} | ||
} | ||
}); | ||
const headers = new Headers(response.headers); | ||
headers.delete("content-length"); | ||
return new Response(combinedStream, { | ||
headers, | ||
status: response.status | ||
}); | ||
} | ||
export { | ||
@@ -77,0 +110,0 @@ defaultOptions, |
{ | ||
"name": "@hono/vite-dev-server", | ||
"description": "Vite dev-server plugin for Hono", | ||
"version": "0.0.12", | ||
"version": "0.1.0", | ||
"types": "dist/index.d.ts", | ||
@@ -13,3 +13,3 @@ "module": "dist/index.js", | ||
"prepublishOnly": "yarn build && yarn test", | ||
"release": "bumpp --tag \"@hono/vite-dev-server@v%s\" --commit \"chore(dev-server): release v%s\" && pnpm publish" | ||
"release": "bumpp --tag \"@hono/vite-dev-server@v%s\" --commit \"chore(dev-server): release v%s\" && npm publish" | ||
}, | ||
@@ -48,2 +48,3 @@ "files": [ | ||
"hono": "^3.5.8", | ||
"playwright": "^1.39.0", | ||
"publint": "^0.1.12", | ||
@@ -62,2 +63,2 @@ "rimraf": "^5.0.1", | ||
} | ||
} | ||
} |
@@ -54,3 +54,3 @@ # @hono/vite-dev-server | ||
```plain | ||
```text | ||
npm i -D vite @hono/vite-dev-server | ||
@@ -61,3 +61,3 @@ ``` | ||
```plain | ||
```text | ||
bun add vite @hono/vite-dev-server | ||
@@ -87,3 +87,3 @@ ``` | ||
```plain | ||
```text | ||
npm exec vite | ||
@@ -94,3 +94,3 @@ ``` | ||
```plain | ||
```text | ||
bunx --bun vite | ||
@@ -203,2 +203,76 @@ ``` | ||
## Client-side | ||
You can write client-side scripts and import them into your application using Vite's features. | ||
If `/src/client.ts` is the entry point, simply write it in the `script` tag. | ||
Additionally, `import.meta.env.PROD` is useful for detecting whether it's running on a dev server or in the build phase. | ||
```tsx | ||
app.get('/', (c) => { | ||
return c.html( | ||
<html> | ||
<head> | ||
{import.meta.env.PROD ? ( | ||
<> | ||
<script type='module' src='/static/client.js'></script> | ||
</> | ||
) : ( | ||
<> | ||
<script type='module' src='/src/client.ts'></script> | ||
</> | ||
)} | ||
</head> | ||
<body> | ||
<h1>Hello</h1> | ||
</body> | ||
</html> | ||
) | ||
}) | ||
``` | ||
In order to build the script properly, you can use the example config file `vite.config.ts` as shown below. | ||
```ts | ||
import { defineConfig } from 'vite' | ||
import devServer from '@hono/vite-dev-server' | ||
import pages from '@hono/vite-cloudflare-pages' | ||
export default defineConfig(({ mode }) => { | ||
if (mode === 'client') { | ||
return { | ||
build: { | ||
lib: { | ||
entry: './src/client.ts', | ||
formats: ['es'], | ||
fileName: 'client', | ||
name: 'client', | ||
}, | ||
rollupOptions: { | ||
output: { | ||
dir: './dist/static', | ||
}, | ||
}, | ||
emptyOutDir: false, | ||
copyPublicDir: false, | ||
}, | ||
} | ||
} else { | ||
return { | ||
plugins: [ | ||
pages(), | ||
devServer({ | ||
entry: 'src/index.tsx', | ||
}), | ||
], | ||
} | ||
} | ||
}) | ||
``` | ||
You can run the following command to build the client script. | ||
```text | ||
vite build --mode client | ||
``` | ||
## Notes | ||
@@ -205,0 +279,0 @@ |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
12161
133
290
10