vite-plugin-mock-data 1.0.0

package/README.md

@@ -0,0 +1,155 @@
+# vite-plugin-mock-data
+
+[![npm package](https://nodei.co/npm/vite-plugin-mock-data.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/vite-plugin-mock-data)
+
+> Provides a simple way to mock data.
+
+[![NPM version](https://img.shields.io/npm/v/vite-plugin-mock-data.svg?style=flat)](https://npmjs.org/package/vite-plugin-mock-data)
+[![NPM Downloads](https://img.shields.io/npm/dm/vite-plugin-mock-data.svg?style=flat)](https://npmjs.org/package/vite-plugin-mock-data)
+
+## Installation
+
+```bash
+npm install vite-plugin-mock-data --save-dev
+```
+
+## Options
+
+* `isAfter` - If `true`, these mock routes is matched before internal middlewares are installed.
+* `mockAssetsDir` - Specify the directory to define mock assets.
+* `mockRouterOptions` - [Initial options of `find-my-way`'](https://github.com/delvedor/find-my-way#findmywayoptions)
+* `mockRoutes` - Initial list of mock routes that should be added to the dev server.
+* `mockRoutesDir` - Specify the directory to define mock routes that should be added to the dev server.
+
+## Usage
+
+### Specify the directory to define mock assets
+
+```js
+import mockData from 'vite-plugin-mock-data';
+
+export default defineConfig({
+  plugins: [
+    mockData({
+      mockAssetsDir: './mockAssets'
+    })
+  ]
+});
+```
+
+```txt
+.
+├── mockAssets
+│   ├── test.zip
+│   └── test.json
+```
+
+```js
+fetch('/test.json')
+  .then(res => res.json())
+  .then((json) => {
+    console.log(json);
+  });
+```
+
+```html
+<a class="download" href="./test.zip">Download</a>
+```
+
+### add mock routes to the dev server
+
+```js
+import mockData from 'vite-plugin-mock-data';
+
+export default defineConfig({
+  plugins: [
+    mockData({
+      mockRoutes: {
+        '/hello': 'hello',
+        '/hello2'(req, res) {
+          res.statusCode = 200;
+          res.setHeader('Content-Type', 'text/html');
+          res.end('hello2');
+        },
+        '/hello3': {
+          handler(req, res) {
+            res.statusCode = 200;
+            res.setHeader('Content-Type', 'text/html');
+            res.end('hello3');
+          }
+        },
+        '/json': {
+          handler: { hello: 1 }
+        }
+        '/package.json': {
+          file: './package.json'
+        },
+      }
+    })
+  ]
+});
+```
+
+```js
+fetch('/package.json')
+  .then(res => res.json())
+  .then((json) => {
+    console.log(json);
+  });
+```
+
+### Specify the directory to add mock routes to the dev server
+
+```js
+import mockData from 'vite-plugin-mock-data';
+
+export default defineConfig({
+  plugins: [
+    mockData({
+      mockRoutesDir: './mock'
+    })
+  ]
+});
+```
+
+```txt
+.
+├── mock
+│   └── test.js
+```
+
+```js
+module.exports = {
+  '/hello': 'hello',
+  '/hello2'(req, res) {
+    res.statusCode = 200;
+    res.setHeader('Content-Type', 'text/html');
+    res.end('hello2');
+  },
+  '/hello3': {
+    handler(req, res) {
+      res.statusCode = 200;
+      res.setHeader('Content-Type', 'text/html');
+      res.end('hello3');
+    }
+  },
+  '/json': {
+    handler: { hello: 1 }
+  }
+  '/package.json': {
+    file: './package.json'
+  },
+};
+```
+
+```js
+fetch('/package.json')
+  .then(res => res.json())
+  .then((json) => {
+    console.log(json);
+  });
+```
+
+## Examples
+
+**[See demo](examples/demo-mock-data)**

package/index.d.ts

@@ -0,0 +1,22 @@
+import { Plugin } from 'vite';
+import { IncomingMessage, ServerResponse } from 'http';
+import Router from 'find-my-way';
+
+export function Handler (req: IncomingMessage, res: ServerResponse): void;
+
+export interface HandleRoute {
+  file?: string;
+  handler?: string | Handler;
+}
+
+export type RouteConfig = string | HandleRoute;
+
+export interface Options {
+  isAfter?: boolean;
+  mockAssetsDir: string;
+  mockRouterOptions?: Router.Config;
+  mockRoutes?: RouteConfig | RouteConfig[]
+  mockRoutesDir?: string;
+}
+
+export default function createPlugin(options?: Options): Plugin;

package/index.js

@@ -0,0 +1,134 @@
+'use strict';
+
+const globby = require('globby');
+const { isAbsolute, join, parse } = require('path');
+const Router = require('find-my-way');
+const { send } = require('vite');
+const sirv = require('sirv');
+
+function isObject(val) {
+  return val && typeof val === 'object';
+}
+
+function sirvOptions(headers) {
+  return {
+    dev: true,
+    etag: true,
+    extensions: [],
+    setHeaders(res, pathname) {
+      res.setHeader('Access-Control-Allow-Origin', '*');
+      if (/\.[tj]sx?$/.test(pathname)) {
+        res.setHeader('Content-Type', 'application/javascript');
+      }
+      if (headers) {
+        // eslint-disable-next-line guard-for-in
+        for (const name in headers) {
+          res.setHeader(name, headers[name]);
+        }
+      }
+    }
+  };
+}
+
+function configureServer(server, routerOpts, routes, serve) {
+  const router = new Router(routerOpts);
+  if (Array.isArray(routes)) {
+    routes.forEach((route) => {
+      Object.keys(route).forEach((xpath) => {
+        let [methods, pathname] = xpath.split(' ');
+        if (!pathname) {
+          pathname = methods;
+          methods = 'GET';
+        }
+        let handler = route[xpath];
+        let file;
+        if (!isObject(handler)) {
+          handler = { handler };
+        }
+        else if ((file = handler.file)) {
+          handler.handler = (req, res) => {
+            file = isAbsolute(file) ? file : join(process.cwd(), file);
+            const parsedPath = parse(file);
+            const serve = sirv(parsedPath.dir, sirvOptions(server.config.server.headers));
+            req.url = `/${parsedPath.base}`;
+            serve(req, res);
+          };
+        }
+        if (typeof handler.handler !== 'function') {
+          const ret = handler.handler;
+          const retType =  typeof ret;
+          handler.handler = (req, res) => {
+            send(
+              req,
+              res,
+              retType !== 'string' ? JSON.stringify(ret) : ret,
+              isObject(ret) ? 'json' : 'html',
+              {
+                headers: server.config.server.headers
+              }
+            );
+          };
+        }
+
+        router.on(
+          methods.split('/'),
+          pathname,
+          handler.opts || {},
+          handler.handler,
+          handler.store
+        );
+      });
+    });
+  }
+
+  if (serve) {
+    server.middlewares.use(serve);
+  }
+
+  server.middlewares.use((req, res, next) => {
+    router.defaultRoute = () => next();
+    router.lookup(req, res);
+  });
+}
+
+module.exports = function (opts = {}) {
+  const {
+    isAfter,
+    mockRouterOptions,
+    mockAssetsDir
+  } = opts;
+  let {
+    mockRoutesDir,
+    mockRoutes = []
+  } = opts;
+
+  if (isObject(mockRoutes) && !Array.isArray(mockRoutes)) {
+    mockRoutes = [mockRoutes];
+  }
+
+  return {
+    name: 'vite:mock-data',
+
+    configureServer(server) {
+      if (mockRoutesDir) {
+        mockRoutesDir = isAbsolute(mockRoutesDir) ? mockRoutesDir : join(process.cwd(), mockRoutesDir);
+        globby.sync(`${mockRoutesDir}/**/*.js`).forEach((file) => {
+          delete require.cache[file];
+          mockRoutes.push(require(file));
+        });
+      }
+
+      let serve;
+      if (mockAssetsDir) {
+        serve = sirv(
+          isAbsolute(mockAssetsDir) ? mockAssetsDir : join(process.cwd(), mockAssetsDir),
+          sirvOptions(server.config.server.headers)
+        );
+      }
+
+      return isAfter
+        ? () => configureServer(server, mockRouterOptions, mockRoutes, serve)
+        : configureServer(server, mockRouterOptions, mockRoutes, serve);
+    }
+  };
+};

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "vite-plugin-mock-data",
+  "version": "1.0.0",
+  "description": "Provides a simple way to mock data.",
+  "main": "index.js",
+  "scripts": {
+    "release": "npm publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fengxinming/vite-plugins.git",
+    "directory": "packages/vite-plugin-mock-data"
+  },
+  "keywords": [
+    "vite-plugin",
+    "vite-plugin-mock-data"
+  ],
+  "author": "Jesse Feng <fxm0016@126.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/fengxinming/vite-plugins/issues"
+  },
+  "homepage": "https://github.com/fengxinming/vite-plugins#readme",
+  "dependencies": {
+    "find-my-way": "^7.0.0",
+    "globby": "^11.1.0",
+    "sirv": "^2.0.2"
+  }
+}