Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@hono/vite-dev-server

Package Overview
Dependencies
Maintainers
1
Versions
46
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hono/vite-dev-server - npm Package Compare versions

Comparing version 0.0.12 to 0.1.0

51

dist/dev-server.js

@@ -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,

7

package.json
{
"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 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc