borrow send() method from vite

Author: znck

packages/preview/package.json

@@ -32,9 +32,10 @@
   "author": "Rahul Kadyan <[email protected]>",
   "license": "MIT",
   "devDependencies": {
-    "@vuedx/analyze": "^0.6.0",
     "@rollup/plugin-json": "^4.1.0",
     "@types/debug": "^4.1.5",
+    "@types/etag": "^1.8.1",
+    "@vuedx/analyze": "^0.6.0",
     "typescript": "^4.1.3",
     "vue": "^3.1.1"
   },
@@ -47,6 +48,7 @@
     "@vuedx/preview-shell": "workspace:*",
     "chalk": "^4.1.0",
     "debug": "^4.3.1",
+    "etag": "^1.8.1",
     "fast-glob": "^3.2.5",
     "minimist": "^1.2.5",
     "picomatch": "^2.2.2",

packages/preview/src/cli.ts

@@ -2,8 +2,6 @@ import chalk from 'chalk';
 import * as Path from 'path';
 import * as FS from 'fs';
 import { createServer } from 'vite';
-import { version as viteVersion } from 'vite/package.json';
-import { version as previewVersion } from '../package.json';
 import { PreviewPlugin } from './index';
 import VuePlugin from '@vitejs/plugin-vue';
 
@@ -38,7 +36,14 @@ export async function run(argv: {
 
   const command = argv._[0];
 
-  console.log(chalk.cyan(`Preview v${previewVersion} (vite v${viteVersion})`));
+  const { version: previewVersion } = JSON.parse(
+    FS.readFileSync(require.resolve('../package.json'), 'utf-8')
+  );
+  const { version: viteVersion } = JSON.parse(
+    FS.readFileSync(require.resolve('vite/package.json'), 'utf-8')
+  );
+
+  console.log(chalk.cyan(`Preview v${String(previewVersion)} (vite v${String(viteVersion)})`));
   const { help, h, version, v } = argv;
 
   if (help || h) {

packages/preview/src/index.ts

@@ -2,13 +2,14 @@ import glob from 'fast-glob';
 import * as FS from 'fs';
 import * as Path from 'path';
 import sirv from 'sirv';
-import { ModuleNode, Plugin, send } from 'vite';
+import type { ModuleNode, Plugin } from 'vite';
 import {
   genEntryHTML,
   genPreviewAppEntryScript,
   genPreviewIFrameContent,
   genVSCodeKeyboardEventSupport,
 } from './generators';
+import { send } from './send';
 import { ComponentMetadataStore } from './store/ComponentMetadataStore';
 import { DescriptorStore } from './store/DescriptorStore';
 import type { FileSystemHost } from './store/FileSystemHost';
@@ -265,7 +266,10 @@ function PreviewPlugin(options?: PreviewPluginOptions): Plugin[] {
                 Path.resolve(store.root, resource.fileName)
               );
             } else {
-              return compiler.compile(Path.resolve(store.root, resource.fileName), resource.index);
+              return await compiler.compile(
+                Path.resolve(store.root, resource.fileName),
+                resource.index
+              );
             }
           }
 

packages/preview/src/send.ts

@@ -0,0 +1,78 @@
+import type { IncomingMessage, OutgoingHttpHeaders, ServerResponse } from 'http';
+import getEtag from 'etag';
+import type { SourceMap } from 'rollup';
+
+const alias: Record<string, string | undefined> = {
+  js: 'application/javascript',
+  css: 'text/css',
+  html: 'text/html',
+  json: 'application/json',
+};
+
+export interface SendOptions {
+  etag?: string;
+  cacheControl?: string;
+  headers?: OutgoingHttpHeaders;
+  map?: SourceMap | null;
+}
+
+export function send(
+  req: IncomingMessage,
+  res: ServerResponse,
+  content: string | Buffer,
+  type: string,
+  options: SendOptions = {}
+): void {
+  const {
+    etag = getEtag(content, { weak: true }),
+    cacheControl = 'no-cache',
+    headers,
+    map,
+  } = options;
+
+  if (res.writableEnded) {
+    return;
+  }
+
+  if (req.headers['if-none-match'] === etag) {
+    res.statusCode = 304;
+    res.end();
+
+    return;
+  }
+
+  res.setHeader('Content-Type', alias[type] ?? type);
+  res.setHeader('Cache-Control', cacheControl);
+  res.setHeader('Etag', etag);
+
+  if (headers != null) {
+    for (const name in headers) {
+      const value = headers[name];
+      if (value != null) {
+        res.setHeader(name, value);
+      }
+    }
+  }
+
+  // inject source map reference
+  if (map?.mappings != null) {
+    if (typeof content === 'string') {
+      content += genSourceMapString(map);
+    } else {
+      content = Buffer.concat([content, Buffer.from(genSourceMapString(map))]);
+    }
+  }
+
+  res.statusCode = 200;
+  res.end(content);
+}
+
+function genSourceMapString(map: SourceMap | string | undefined): string {
+  if (typeof map !== 'string') {
+    map = JSON.stringify(map);
+  }
+
+  return `\n//# sourceMappingURL=data:application/json;base64,${Buffer.from(map).toString(
+    'base64'
+  )}`;
+}