Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@hono/vite-dev-server
Advanced tools
@hono/vite-dev-server - npm Package Compare versions
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 @@ |
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by24.95%
12161
- Lines of code
- increased by33%
133
- Number of lines in readme file
- increased by34.26%
290
Worsened metrics
- Dev dependency count
- increased by11.11%
10
No dependency changes