vite-plugin-mock-dev-server 0.2.1 → 0.2.3

package/README.md

@@ -8,7 +8,9 @@ vite mock开发服务（mock-dev-server）插件。
 
 - ⚡️ 轻量，灵活，快速
 - 🧲 非注入式，对客户端代码无侵入
+- 💡 ESModule
 - 🦾 Typescript
+- 🏷 支持 json / json5 编写 mock 数据
 - 📦 自动加载 mock 文件
 - 🎨 可选择你喜欢的任意用于生成mock数据库，如 `mockjs`，或者不是用其他库
 - 📥 路径规则匹配，请求参数匹配
@@ -101,7 +103,7 @@ export default defineConfig({
   
   配置读取 mock文件，可以是一个 目录，glob，或者一个数组
 
-  默认值： `['mock/**/*.mock.*']` (相对于根目录)
+  默认值： `['mock/**/*.mock.{js,ts,cjs,mjs,json,json5}']` (相对于根目录)
 
 - `options.exclude`
   
@@ -232,7 +234,11 @@ export default defineMock({
 
 ```
 
-`mock/**/*.mock.ts`
+> 注意：
+> 
+> 如果使用 json/json5 编写 mock文件，则不支持使用 `response` 方法，以及不支持使用其他字段的函数形式。
+
+`mock/**/*.mock.{ts,js,mjs,cjs,json,json5}`
 
 查看更多示例： [example](/example/)
 
@@ -369,3 +375,15 @@ export default defineMock({
   }
 })
 ```
+
+### 示例10：
+使用 json / json5
+```json
+{
+  // 支持 comment
+  "url": "/api/test",
+  "body": {
+    "a": 1
+  }
+}
+```

package/dist/index.cjs

@@ -44,6 +44,7 @@ var import_pluginutils = require("@rollup/pluginutils");
 var import_chokidar = __toESM(require("chokidar"), 1);
 var import_esbuild = require("esbuild");
 var import_fast_glob = __toESM(require("fast-glob"), 1);
+var import_json5 = __toESM(require("json5"), 1);
 
 // src/utils.ts
 var import_promises = __toESM(require("fs/promises"), 1);
@@ -65,7 +66,7 @@ async function getPackageDeps(cwd) {
 }
 
 // src/MockLoader.ts
-var MockLoader = class extends import_node_events.default {
+var _MockLoader = class extends import_node_events.default {
   constructor(options) {
     super();
     this.moduleCache = /* @__PURE__ */ new Map();
@@ -183,21 +184,42 @@ var MockLoader = class extends import_node_events.default {
   async loadModule(filepath) {
     if (!filepath)
       return;
-    const { code, deps } = await this.transform(filepath);
+    if (_MockLoader.EXT_JSON.test(filepath)) {
+      await this.loadJson(filepath);
+    } else {
+      await this.loadESModule(filepath);
+    }
+  }
+  async loadJson(filepath) {
+    const content = await import_promises2.default.readFile(filepath, "utf-8");
+    try {
+      const mockConfig = import_json5.default.parse(content);
+      this.moduleCache.set(filepath, mockConfig);
+    } catch (e) {
+    }
+  }
+  async loadESModule(filepath) {
+    if (!filepath)
+      return;
+    const { code, deps } = await this.transformWithEsbuild(filepath);
     const tempFile = import_node_path2.default.join(
       this.cwd,
       this.tempDir,
-      filepath.replace(/\.ts$/, ".mjs")
+      filepath.replace(/\.(ts|js|cjs)$/, ".mjs")
     );
-    const tempBasename = import_node_path2.default.dirname(tempFile);
-    await import_promises2.default.mkdir(tempBasename, { recursive: true });
+    const tempDirname = import_node_path2.default.dirname(tempFile);
+    await import_promises2.default.mkdir(tempDirname, { recursive: true });
     await import_promises2.default.writeFile(tempFile, code, "utf8");
-    const handle = await import(`${tempFile}?${Date.now()}`);
-    const mockConfig = handle && handle.default ? handle.default : Object.keys(handle || {}).map((key) => handle[key]);
-    this.moduleCache.set(filepath, mockConfig);
-    this.updateModuleDeps(filepath, deps);
+    try {
+      const handle = await import(`${tempFile}?${Date.now()}`);
+      const mockConfig = handle && handle.default ? handle.default : Object.keys(handle || {}).map((key) => handle[key]);
+      this.moduleCache.set(filepath, mockConfig);
+      this.updateModuleDeps(filepath, deps);
+    } catch (e) {
+      console.error(e);
+    }
   }
-  async transform(filepath) {
+  async transformWithEsbuild(filepath) {
     var _a;
     try {
       const result = await (0, import_esbuild.build)({
@@ -217,7 +239,6 @@ var MockLoader = class extends import_node_events.default {
         deps: ((_a = result.metafile) == null ? void 0 : _a.inputs) || {}
       };
     } catch (e) {
-      console.error(e);
     }
     return {
       code: "",
@@ -225,6 +246,8 @@ var MockLoader = class extends import_node_events.default {
     };
   }
 };
+var MockLoader = _MockLoader;
+MockLoader.EXT_JSON = /\.json5?$/;
 
 // src/parseReqBody.ts
 var import_co_body = __toESM(require("co-body"), 1);
@@ -322,6 +345,7 @@ async function mockServerMiddleware(httpServer, config, options) {
     req.query = query;
     req.params = params;
     res.setHeader("Content-Type", "application/json");
+    res.setHeader("X-Mock", "generate by vite:mock-dev-server");
     if (currentMock.headers) {
       const headers = isFunction(currentMock.headers) ? await currentMock.headers({
         query,
@@ -365,7 +389,7 @@ function doesProxyContextMatchUrl(context, url) {
 
 // src/plugin.ts
 function mockDevServerPlugin({
-  include = ["mock/**/*.mock.*"],
+  include = ["mock/**/*.mock.{js,ts,cjs,mjs,json,json5}"],
   exclude = [
     "**/node_modules/**",
     "**/test/**",
@@ -378,6 +402,8 @@ function mockDevServerPlugin({
 } = {}) {
   return {
     name: "vite-plugin-mock-dev-server",
+    enforce: "pre",
+    apply: "serve",
     async configureServer({ middlewares, config, httpServer }) {
       const middleware = await mockServerMiddleware(httpServer, config, {
         include,

package/dist/index.js

@@ -10,6 +10,7 @@ import { createFilter } from "@rollup/pluginutils";
 import chokidar from "chokidar";
 import { build } from "esbuild";
 import fastGlob from "fast-glob";
+import JSON5 from "json5";
 
 // src/utils.ts
 import fs from "fs/promises";
@@ -31,7 +32,7 @@ async function getPackageDeps(cwd) {
 }
 
 // src/MockLoader.ts
-var MockLoader = class extends EventEmitter {
+var _MockLoader = class extends EventEmitter {
   constructor(options) {
     super();
     this.moduleCache = /* @__PURE__ */ new Map();
@@ -149,21 +150,42 @@ var MockLoader = class extends EventEmitter {
   async loadModule(filepath) {
     if (!filepath)
       return;
-    const { code, deps } = await this.transform(filepath);
+    if (_MockLoader.EXT_JSON.test(filepath)) {
+      await this.loadJson(filepath);
+    } else {
+      await this.loadESModule(filepath);
+    }
+  }
+  async loadJson(filepath) {
+    const content = await fs2.readFile(filepath, "utf-8");
+    try {
+      const mockConfig = JSON5.parse(content);
+      this.moduleCache.set(filepath, mockConfig);
+    } catch (e) {
+    }
+  }
+  async loadESModule(filepath) {
+    if (!filepath)
+      return;
+    const { code, deps } = await this.transformWithEsbuild(filepath);
     const tempFile = path2.join(
       this.cwd,
       this.tempDir,
-      filepath.replace(/\.ts$/, ".mjs")
+      filepath.replace(/\.(ts|js|cjs)$/, ".mjs")
     );
-    const tempBasename = path2.dirname(tempFile);
-    await fs2.mkdir(tempBasename, { recursive: true });
+    const tempDirname = path2.dirname(tempFile);
+    await fs2.mkdir(tempDirname, { recursive: true });
     await fs2.writeFile(tempFile, code, "utf8");
-    const handle = await import(`${tempFile}?${Date.now()}`);
-    const mockConfig = handle && handle.default ? handle.default : Object.keys(handle || {}).map((key) => handle[key]);
-    this.moduleCache.set(filepath, mockConfig);
-    this.updateModuleDeps(filepath, deps);
+    try {
+      const handle = await import(`${tempFile}?${Date.now()}`);
+      const mockConfig = handle && handle.default ? handle.default : Object.keys(handle || {}).map((key) => handle[key]);
+      this.moduleCache.set(filepath, mockConfig);
+      this.updateModuleDeps(filepath, deps);
+    } catch (e) {
+      console.error(e);
+    }
   }
-  async transform(filepath) {
+  async transformWithEsbuild(filepath) {
     var _a;
     try {
       const result = await build({
@@ -183,7 +205,6 @@ var MockLoader = class extends EventEmitter {
         deps: ((_a = result.metafile) == null ? void 0 : _a.inputs) || {}
       };
     } catch (e) {
-      console.error(e);
     }
     return {
       code: "",
@@ -191,6 +212,8 @@ var MockLoader = class extends EventEmitter {
     };
   }
 };
+var MockLoader = _MockLoader;
+MockLoader.EXT_JSON = /\.json5?$/;
 
 // src/parseReqBody.ts
 import bodyParser from "co-body";
@@ -288,6 +311,7 @@ async function mockServerMiddleware(httpServer, config, options) {
     req.query = query;
     req.params = params;
     res.setHeader("Content-Type", "application/json");
+    res.setHeader("X-Mock", "generate by vite:mock-dev-server");
     if (currentMock.headers) {
       const headers = isFunction(currentMock.headers) ? await currentMock.headers({
         query,
@@ -331,7 +355,7 @@ function doesProxyContextMatchUrl(context, url) {
 
 // src/plugin.ts
 function mockDevServerPlugin({
-  include = ["mock/**/*.mock.*"],
+  include = ["mock/**/*.mock.{js,ts,cjs,mjs,json,json5}"],
   exclude = [
     "**/node_modules/**",
     "**/test/**",
@@ -344,6 +368,8 @@ function mockDevServerPlugin({
 } = {}) {
   return {
     name: "vite-plugin-mock-dev-server",
+    enforce: "pre",
+    apply: "serve",
     async configureServer({ middlewares, config, httpServer }) {
       const middleware = await mockServerMiddleware(httpServer, config, {
         include,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-mock-dev-server",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "keywords": [
     "vite",
     "plugin",
@@ -48,6 +48,7 @@
     "debug": "^4.3.4",
     "esbuild": "^0.15.12",
     "fast-glob": "^3.2.12",
+    "json5": "^2.2.1",
     "path-to-regexp": "^6.2.1",
     "vite": "^3.2.0"
   },