@deot/dev-dever 1.1.1 → 2.0.1

package/README.md

@@ -1,5 +1,38 @@
 # @deot/dev-dever
 
-目前是执行`npm run test --package-name 'xx'`
+开发
 
-- 使用`dependencies`，非`peerDependencies`。主要考虑仅安装`@deot/dev-dever`即可
+- 优先执行`scripts`下的`dev`
+
+## 自定义配置
+
+提供环境变量`DEV_OPTIONS`
+
+```ts
+interface DEV_OPTIONS {
+	packageFolderName?: string;
+	workspace?: string;
+	entries: string[];
+	html: string;
+}
+```
+
+根目录创建`dev.config.ts`, 可以选择`configShared`合并或单独基于`DEV_OPTIONS`配置
+> 也可以是`z.dev.config.ts`, 前缀主要是置底
+
+```ts
+import { mergeConfig, defineConfig } from 'vite';
+import configShared from '@deot/dever/shared.config';
+
+export default mergeConfig(
+	configShared,
+	defineConfig({
+		plugins: [
+			vue(),
+			react()
+		]
+	})
+);
+```
+
+取`dev.config.ts`, 是为了方便从`vite`转其他开发工具时，可以不改变文件名

package/dist/index.cjs.js

@@ -1,36 +1,118 @@
 'use strict';
 
-var devShared = require('@deot/dev-shared');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const run = (options) => devShared.Utils.autoCatch(async () => {
-    const locals = devShared.Locals.impl();
-    if (typeof options.dryRun === 'undefined') {
-        options.dryRun = process.env.NODE_ENV === 'UNIT';
-    }
-    if (options.dryRun)
-        return devShared.Shell.spawn(`echo development`);
-    const { cwd, workspace, packageOptionsMap, packageDirsMap } = locals;
-    const { packageName } = options;
-    const getPackageFolderName = devShared.Locals.getPackageFolderName(packageName);
-    const packageOptions = packageOptionsMap[getPackageFolderName];
-    const packageDir = packageDirsMap[getPackageFolderName];
-    options.watch = true;
-    if (!workspace
-        && packageName
-        && packageName !== '*'
-        && cwd !== packageDir
-        && packageOptions?.scripts?.['dev']) {
-        await devShared.Shell.spawn(`npm`, ['run', 'dev']);
-        return;
+const devShared = require('@deot/dev-shared');
+const path = require('node:path');
+const node_url = require('node:url');
+const fs$1 = require('fs-extra');
+const vite = require('vite');
+const chalk = require('chalk');
+const fs = require('node:fs');
+const ejs = require('ejs');
+
+function _interopNamespaceDefault(e) {
+	const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+	if (e) {
+		for (const k in e) {
+			if (k !== 'default') {
+				const d = Object.getOwnPropertyDescriptor(e, k);
+				Object.defineProperty(n, k, d.get ? d : {
+					enumerable: true,
+					get: () => e[k]
+				});
+			}
+		}
+	}
+	n.default = e;
+	return Object.freeze(n);
+}
+
+const path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+const fs__namespace = /*#__PURE__*/_interopNamespaceDefault(fs);
+
+const dirname$1 = path__namespace.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
+let target = {
+  entries: [],
+  html: ""
+};
+const walk = (dir) => {
+  const { cwd, workspace } = devShared.Locals.impl();
+  dir = dir || ".";
+  const directory = path__namespace.join(cwd, workspace, dir);
+  fs__namespace.readdirSync(directory).forEach((file) => {
+    const fullpath = path__namespace.join(directory, file);
+    const paths = fullpath.split("/") || [];
+    const stat = fs__namespace.statSync(fullpath);
+    const extname = path__namespace.extname(fullpath);
+    if (stat.isFile() && /\.(t|j)sx?$/.test(extname) && paths.length >= 2 && paths[paths.length - 2] === "examples") {
+      const basename = path__namespace.basename(file, extname);
+      const name = path__namespace.join(dir, basename);
+      target.entries.push(name.replace(/\/examples/, ""));
+    } else if (stat.isDirectory() && !["dist", "node_modules", "__tests__"].includes(file)) {
+      const subdir = path__namespace.join(dir, file);
+      walk(subdir);
     }
-    await devShared.Shell.spawn(`cross-env`, [
-        'NODE_ENV=development',
-        'npm',
-        'run',
-        'test',
-        '--',
-        packageName ? `--package-name ${packageName}` : ''
-    ]);
+  });
+};
+const get = () => {
+  if (target.html)
+    return target;
+  walk();
+  const tpl = fs__namespace.readFileSync(path__namespace.resolve(dirname$1, "../index.ejs"));
+  target.html = ejs.render(tpl.toString(), {
+    title: "demo",
+    base: "/",
+    pages: target.entries
+  });
+  return target;
+};
+
+const dirname = path__namespace.dirname(node_url.fileURLToPath((typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href))));
+const run = (options) => devShared.Utils.autoCatch(async () => {
+  const locals = devShared.Locals.impl();
+  if (typeof options.dryRun === "undefined") {
+    options.dryRun = process.env.NODE_ENV === "UNIT";
+  }
+  if (options.dryRun)
+    return devShared.Shell.spawn(`echo development`);
+  const { cwd, workspace, packageOptionsMap, packageDirsMap } = locals;
+  const { packageName } = options;
+  const packageFolderName = devShared.Locals.getPackageFolderName(packageName);
+  const packageOptions = packageOptionsMap[packageFolderName];
+  const packageDir = packageDirsMap[packageFolderName];
+  options.watch = true;
+  if (workspace && cwd !== packageDir && packageOptions?.scripts?.["dev"]) {
+    await devShared.Shell.spawn(`npm`, ["run", "dev"], { cwd: packageDir });
+    return;
+  }
+  if (!options.packageFolderName)
+    delete options.packageFolderName;
+  if (!options.workspace)
+    delete options.workspace;
+  delete options.packageName;
+  let { entries, html } = get();
+  process.env.DEV_OPTIONS = encodeURIComponent(JSON.stringify({
+    ...options,
+    workspace,
+    entries,
+    html
+  }));
+  if (!entries.length)
+    return devShared.Shell.spawn(`echo no entry file found!`);
+  let options$ = {};
+  if (fs$1.existsSync(`${cwd}/z.dev.config.ts`)) {
+    options$.configFile = path__namespace.relative(cwd, path__namespace.resolve(cwd, "./z.dev.config.ts"));
+  } else if (fs$1.existsSync(`${cwd}/dev.config.ts`)) {
+    options$.configFile = path__namespace.relative(cwd, path__namespace.resolve(cwd, "./dev.config.ts"));
+  } else {
+    options$.configFile = path__namespace.relative(cwd, path__namespace.resolve(dirname, "../shared.config.ts"));
+  }
+  const server = await vite.createServer(options$);
+  const $server = await server.listen();
+  const $port = $server.config.server.port;
+  const $host = $server.config.server.host || "0.0.0.0";
+  entries.forEach((item) => devShared.Logger.log(`  > ${item}: ${chalk.cyan(`http://${$host}:${$port}/${item}.html`)}`));
 });
 
 exports.run = run;

package/dist/index.es.js

@@ -1,34 +1,94 @@
-import { Utils, Locals, Shell } from '@deot/dev-shared';
+import { Locals, Utils, Shell, Logger } from '@deot/dev-shared';
+import * as path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import fs$1 from 'fs-extra';
+import { createServer } from 'vite';
+import chalk from 'chalk';
+import * as fs from 'node:fs';
+import { render } from 'ejs';
 
-const run = (options) => Utils.autoCatch(async () => {
-    const locals = Locals.impl();
-    if (typeof options.dryRun === 'undefined') {
-        options.dryRun = process.env.NODE_ENV === 'UNIT';
-    }
-    if (options.dryRun)
-        return Shell.spawn(`echo development`);
-    const { cwd, workspace, packageOptionsMap, packageDirsMap } = locals;
-    const { packageName } = options;
-    const getPackageFolderName = Locals.getPackageFolderName(packageName);
-    const packageOptions = packageOptionsMap[getPackageFolderName];
-    const packageDir = packageDirsMap[getPackageFolderName];
-    options.watch = true;
-    if (!workspace
-        && packageName
-        && packageName !== '*'
-        && cwd !== packageDir
-        && packageOptions?.scripts?.['dev']) {
-        await Shell.spawn(`npm`, ['run', 'dev']);
-        return;
+const dirname$1 = path.dirname(fileURLToPath(import.meta.url));
+let target = {
+  entries: [],
+  html: ""
+};
+const walk = (dir) => {
+  const { cwd, workspace } = Locals.impl();
+  dir = dir || ".";
+  const directory = path.join(cwd, workspace, dir);
+  fs.readdirSync(directory).forEach((file) => {
+    const fullpath = path.join(directory, file);
+    const paths = fullpath.split("/") || [];
+    const stat = fs.statSync(fullpath);
+    const extname = path.extname(fullpath);
+    if (stat.isFile() && /\.(t|j)sx?$/.test(extname) && paths.length >= 2 && paths[paths.length - 2] === "examples") {
+      const basename = path.basename(file, extname);
+      const name = path.join(dir, basename);
+      target.entries.push(name.replace(/\/examples/, ""));
+    } else if (stat.isDirectory() && !["dist", "node_modules", "__tests__"].includes(file)) {
+      const subdir = path.join(dir, file);
+      walk(subdir);
     }
-    await Shell.spawn(`cross-env`, [
-        'NODE_ENV=development',
-        'npm',
-        'run',
-        'test',
-        '--',
-        packageName ? `--package-name ${packageName}` : ''
-    ]);
+  });
+};
+const get = () => {
+  if (target.html)
+    return target;
+  walk();
+  const tpl = fs.readFileSync(path.resolve(dirname$1, "../index.ejs"));
+  target.html = render(tpl.toString(), {
+    title: "demo",
+    base: "/",
+    pages: target.entries
+  });
+  return target;
+};
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+const run = (options) => Utils.autoCatch(async () => {
+  const locals = Locals.impl();
+  if (typeof options.dryRun === "undefined") {
+    options.dryRun = process.env.NODE_ENV === "UNIT";
+  }
+  if (options.dryRun)
+    return Shell.spawn(`echo development`);
+  const { cwd, workspace, packageOptionsMap, packageDirsMap } = locals;
+  const { packageName } = options;
+  const packageFolderName = Locals.getPackageFolderName(packageName);
+  const packageOptions = packageOptionsMap[packageFolderName];
+  const packageDir = packageDirsMap[packageFolderName];
+  options.watch = true;
+  if (workspace && cwd !== packageDir && packageOptions?.scripts?.["dev"]) {
+    await Shell.spawn(`npm`, ["run", "dev"], { cwd: packageDir });
+    return;
+  }
+  if (!options.packageFolderName)
+    delete options.packageFolderName;
+  if (!options.workspace)
+    delete options.workspace;
+  delete options.packageName;
+  let { entries, html } = get();
+  process.env.DEV_OPTIONS = encodeURIComponent(JSON.stringify({
+    ...options,
+    workspace,
+    entries,
+    html
+  }));
+  if (!entries.length)
+    return Shell.spawn(`echo no entry file found!`);
+  let options$ = {};
+  if (fs$1.existsSync(`${cwd}/z.dev.config.ts`)) {
+    options$.configFile = path.relative(cwd, path.resolve(cwd, "./z.dev.config.ts"));
+  } else if (fs$1.existsSync(`${cwd}/dev.config.ts`)) {
+    options$.configFile = path.relative(cwd, path.resolve(cwd, "./dev.config.ts"));
+  } else {
+    options$.configFile = path.relative(cwd, path.resolve(dirname, "../shared.config.ts"));
+  }
+  const server = await createServer(options$);
+  const $server = await server.listen();
+  const $port = $server.config.server.port;
+  const $host = $server.config.server.host || "0.0.0.0";
+  entries.forEach((item) => Logger.log(`  > ${item}: ${chalk.cyan(`http://${$host}:${$port}/${item}.html`)}`));
 });
 
 export { run };

package/index.ejs

@@ -0,0 +1,391 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+	<meta charset='utf-8'>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+	<title><%= title %></title>
+	<style>
+	* {
+		margin: 0;
+		padding: 0;
+		outline: 0;
+	}
+
+	body {
+		padding: 80px 100px;
+		font: 13px "Helvetica Neue", "Lucida Grande", "Arial";
+		background: #ECE9E9 -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ECE9E9));
+		background: #ECE9E9 -moz-linear-gradient(top, #fff, #ECE9E9);
+		background-repeat: no-repeat;
+		color: #555;
+		-webkit-font-smoothing: antialiased;
+	}<title><%= title %></title>
+
+	h1,
+	h2,
+	h3 {
+		font-size: 22px;
+		color: #343434;
+	}
+
+	h1 em,
+	h2 em {
+		padding: 0 5px;
+		font-weight: normal;
+	}
+
+	h1 {
+		font-size: 60px;
+	}
+
+	h2 {
+		margin-top: 10px;
+	}
+
+	h3 {
+		margin: 5px 0 10px 0;
+		padding-bottom: 5px;
+		border-bottom: 1px solid #eee;
+		font-size: 18px;
+	}
+
+	ul li {
+		list-style: none;
+	}
+
+	ul li:hover {
+		cursor: pointer;
+		color: #2e2e2e;
+	}
+
+	ul li .path {
+		padding-left: 5px;
+		font-weight: bold;
+	}
+
+	ul li .line {
+		padding-right: 5px;
+		font-style: italic;
+	}
+
+	ul li:first-child .path {
+		padding-left: 0;
+	}
+
+	p {
+		line-height: 1.5;
+	}
+
+	a {
+		color: #555;
+		text-decoration: none;
+	}
+
+	a:hover {
+		color: #303030;
+	}
+
+	#stacktrace {
+		margin-top: 15px;
+	}
+
+	.directory h1 {
+		margin-bottom: 15px;
+		font-size: 18px;
+	}
+
+	ul#files {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+	}
+
+	ul#files li {
+		float: left;
+		width: 30%;
+		line-height: 25px;
+		margin: 1px;
+	}
+
+	ul#files li a {
+		display: block;
+		height: 25px;
+		border: 1px solid transparent;
+		-webkit-border-radius: 5px;
+		-moz-border-radius: 5px;
+		border-radius: 5px;
+		overflow: hidden;
+		white-space: nowrap;
+	}
+
+	ul#files li a:focus,
+	ul#files li a:hover {
+		background: rgba(255, 255, 255, 0.65);
+		border: 1px solid #ececec;
+	}
+
+	ul#files li a.highlight {
+		-webkit-transition: background .4s ease-in-out;
+		background: #ffff4f;
+		border-color: #E9DC51;
+	}
+
+	#search {
+		display: block;
+		position: fixed;
+		top: 20px;
+		right: 20px;
+		width: 90px;
+		-webkit-transition: width ease 0.2s, opacity ease 0.4s;
+		-moz-transition: width ease 0.2s, opacity ease 0.4s;
+		-webkit-border-radius: 32px;
+		-moz-border-radius: 32px;
+		-webkit-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
+		-moz-box-shadow: inset 0px 0px 3px rgba(0, 0, 0, 0.25), inset 0px 1px 3px rgba(0, 0, 0, 0.7), 0px 1px 0px rgba(255, 255, 255, 0.03);
+		-webkit-font-smoothing: antialiased;
+		text-align: left;
+		font: 13px "Helvetica Neue", Arial, sans-serif;
+		padding: 4px 10px;
+		border: none;
+		background: transparent;
+		margin-bottom: 0;
+		outline: none;
+		opacity: 0.7;
+		color: #888;
+	}
+
+	#search:focus {
+		width: 120px;
+		opacity: 1.0;
+	}
+	/*views*/
+
+	#files span {
+		display: inline-block;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-indent: 10px;
+	}
+
+	#files .name {
+		background-repeat: no-repeat;
+	}
+
+	#files .icon .name {
+		text-indent: 28px;
+	}
+	/*tiles*/
+
+	.view-tiles .name {
+		width: 100%;
+		background-position: 8px 5px;
+	}
+
+	.view-tiles .size,
+	.view-tiles .date {
+		display: none;
+	}
+	/*details*/
+
+	ul#files.view-details li {
+		float: none;
+		display: block;
+		width: 90%;
+	}
+
+	ul#files.view-details li.header {
+		height: 25px;
+		background: #000;
+		color: #fff;
+		font-weight: bold;
+	}
+
+	.view-details .header {
+		border-radius: 5px;
+	}
+
+	.view-details .name {
+		width: 60%;
+		background-position: 8px 5px;
+	}
+
+	.view-details .size {
+		width: 10%;
+	}
+
+	.view-details .date {
+		width: 30%;
+	}
+
+	.view-details .size,
+	.view-details .date {
+		text-align: right;
+		direction: rtl;
+	}
+	/*mobile*/
+
+	@media (max-width: 768px) {
+		body {
+			font-size: 13px;
+			line-height: 16px;
+			padding: 0;
+		}
+		#search {
+			position: static;
+			width: 100%;
+			font-size: 2em;
+			line-height: 1.8em;
+			text-indent: 10px;
+			border: 0;
+			border-radius: 0;
+			padding: 10px 0;
+			margin: 0;
+		}
+		#search:focus {
+			width: 100%;
+			border: 0;
+			opacity: 1;
+		}
+		.directory h1 {
+			font-size: 2em;
+			line-height: 1.5em;
+			color: #fff;
+			background: #000;
+			padding: 15px 10px;
+			margin: 0;
+		}
+		ul#files {
+			border-top: 1px solid #cacaca;
+		}
+		ul#files li {
+			float: none;
+			width: auto !important;
+			display: block;
+			border-bottom: 1px solid #cacaca;
+			font-size: 2em;
+			line-height: 1.2em;
+			text-indent: 0;
+			margin: 0;
+		}
+		ul#files li:nth-child(odd) {
+			background: #e0e0e0;
+		}
+		ul#files li a {
+			height: auto;
+			border: 0;
+			border-radius: 0;
+			padding: 15px 10px;
+		}
+		ul#files li a:focus,
+		ul#files li a:hover {
+			border: 0;
+		}
+		#files .header,
+		#files .size,
+		#files .date {
+			display: none !important;
+		}
+		#files .name {
+			float: none;
+			display: inline-block;
+			width: 100%;
+			text-indent: 0;
+			background-position: 0 0;
+		}
+		#files .icon .name {
+			text-indent: 41px;
+		}
+	}
+
+	#files .icon-directory .name {
+		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAABGdBTUEAALGPC/xhBQAAAWtQTFRFAAAA/PPQ9Nhc2q402qQ12qs2/PTX2pg12p81+/LM89NE9dto2q82+/fp2rM22qY39d6U+/bo2qo2/frx/vz32q812qs12qE279SU8c4w9NZP+/LK//367s9y7s925cp0/vzw9t92//342po2/vz25s1579B6+OSO2bQ0/v799NyT8tE79dld8Msm+OrC/vzx79KA2IYs7s6I9d6R4cJe9+OF/PLI/fry79OF/v30//328tWB89RJ8c9p8c0u9eCf//7+9txs6sts5Mdr+++5+u2z/vrv+/fq6cFz8dBs8tA57cpq+OaU9uGs27Y8//799NdX/PbY9uB89unJ//z14sNf+emh+emk+vDc+uys9+OL8dJy89NH+eic8tN5+OaV+OWR9N2n9dtl9t529+KF9+GB9Nue9NdU8tR/9t5y89qW9dpj89iO89eG/vvu2pQ12Y4z/vzy2Ict/vvv48dr/vzz4sNg///+2Igty3PqwQAAAAF0Uk5TAEDm2GYAAACtSURBVBjTY2AgA2iYlJWVhfohBPg0yx38y92dS0pKVOVBAqIi6sb2vsWWpfrFeTI8QAEhYQEta28nCwM1OVleZqCAmKCEkUdwYWmhQnFeOStQgL9cySqkNNDHVJGbiY0FKCCuYuYSGRsV5KgjxcXIARRQNncNj09JTgqw0ZbkZAcK5LuFJaRmZqfHeNnpSucDBQoiEtOycnIz4qI9bfUKQA6pKKqAgqIKQyK8BgAZ5yfODmnHrQAAAABJRU5ErkJggg==);
+	}
+
+	</style>
+	<script>
+	function $(id) {
+		var el = 'string' == typeof id ?
+			document.getElementById(id) :
+			id;
+
+		el.on = function(event, fn) {
+			if ('content loaded' == event) {
+				event = window.attachEvent ? "load" : "DOMContentLoaded";
+			}
+			el.addEventListener ?
+				el.addEventListener(event, fn, false) :
+				el.attachEvent("on" + event, fn);
+		};
+
+		el.all = function(selector) {
+			return $(el.querySelectorAll(selector));
+		};
+
+		el.each = function(fn) {
+			for (var i = 0, len = el.length; i < len; ++i) {
+				fn($(el[i]), i);
+			}
+		};
+
+		el.getClasses = function() {
+			return this.getAttribute('class').split(/\s+/);
+		};
+
+		el.addClass = function(name) {
+			var classes = this.getAttribute('class');
+			el.setAttribute('class', classes ?
+				classes + ' ' + name :
+				name);
+		};
+
+		el.removeClass = function(name) {
+			var classes = this.getClasses().filter(function(curr) {
+				return curr != name;
+			});
+			this.setAttribute('class', classes.join(' '));
+		};
+
+		return el;
+	}
+
+	function search() {
+		var str = $('search').value,
+			links = $('files').all('a');
+
+		links.each(function(link) {
+			var text = link.textContent;
+
+			if ('..' == text) return;
+			if (str.length && ~text.indexOf(str)) {
+				link.addClass('highlight');
+			} else {
+				link.removeClass('highlight');
+			}
+		});
+	}
+
+	$(window).on('content loaded', function() {
+		$('search').on('keyup', search);
+	});
+
+	</script>
+</head>
+
+<body class="directory">
+	<input id="search" type="text" placeholder="Search" autocomplete="off" />
+	<div id="wrapper">
+		<h1> / </h1>
+		<ul id="files" class="view-tiles">
+		<% for (var item in pages) { %>
+			<li>
+				<a href="<%= base %><%= pages[item] %>.html" class="icon icon-directory" title="button">
+					<span class="name"><%= pages[item] %></span>
+				</a>
+			</li>
+		<% } %>
+		</ul>
+	</div>
+</body>
+
+</html>

package/package.json

@@ -1,19 +1,23 @@
 {
   "name": "@deot/dev-dever",
-  "version": "1.1.1",
+  "version": "2.0.1",
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "index.ejs",
+    "shared.config.ts"
   ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@deot/dev-shared": "^1.1.1"
+    "@deot/dev-shared": "^2.0.0",
+    "ejs": "^3.1.9",
+    "vite": "^4.3.9"
   },
   "devDependencies": {
     "cross-env": "^7.0.3"

package/shared.config.ts

@@ -0,0 +1,96 @@
+import * as path from 'node:path';
+import * as fs from 'node:fs';
+import { createRequire } from "node:module";
+import { defineConfig } from 'vitest/config';
+import type { UserConfig, ViteDevServer } from 'vite';
+
+const cwd = process.cwd();
+
+// devOptions
+const devOptions = JSON.parse(decodeURIComponent(process.env.DEV_OPTIONS || '{}'));
+const { workspace, html } = devOptions;
+
+// alias
+const replacement = (name: string) => path.resolve(cwd, `./packages/${name}/src`);
+const { name } = createRequire(cwd)(path.resolve(cwd, workspace ? `${workspace}/index` : '', 'package.json'));
+
+const getHtmlContent = async (url: string) => {
+	let fullpath = path.join(cwd, url);
+	if (
+		/^\/?@vite/.test(url)
+		|| (
+			fs.existsSync(fullpath) 
+			&& fs.statSync(fullpath).isFile()
+		)
+	) {
+		return;
+	}
+
+	if (url === '/') return html;
+
+	const [packageFolderName, htmlEntry] = url.split('/').filter(i => !!i);
+
+	fullpath = path.join(
+		cwd, 
+		workspace,
+		packageFolderName,
+		'examples',
+		`${htmlEntry?.replace(/(\.html)/g, '')}.ts`
+	);
+	if (!fs.existsSync(fullpath)) return html;
+
+	let contents = '';
+	contents += `<!DOCTYPE html>\n`;
+	contents += `<html lang="en">\n`;
+	contents += `	<head>\n`;
+	contents += `		<meta charset="UTF-8" />\n`;
+	contents += `		<meta name="viewport" content="width=device-width, initial-scale=1.0" />\n`;
+	contents += `		<title>demo-${url}</title>\n`;
+	contents += `	</head>\n`;
+	contents += `	<body>\n`;
+	contents += `		<script type="module">\n`;
+	contents += `		import "/${path.relative(cwd, fullpath)}";\n`;
+	contents += `		</script>\n`;
+	contents += `	</body>\n`;
+	contents += `</html>\n`;
+	return contents;
+};
+
+export default defineConfig({
+	resolve: workspace
+		? {
+			alias: [
+				{
+					find: new RegExp(`^${name}$`),
+					replacement: replacement('index')
+				},
+				{
+
+					find: new RegExp(`^${name}-(.*?)$`),
+					replacement: replacement('$1')
+				}
+			]
+		}
+		: {},
+	plugins: [
+		{
+			name: 'vite-plugin-virtual-html',
+			configureServer(server: ViteDevServer) {
+				server.middlewares.use(async (req, res, next) => {
+					const url = req.url as string;
+
+					const content = await getHtmlContent(url);
+
+					if (!content) {
+						return next();
+					}
+
+					res.end(content);
+				});
+			}
+		}
+	],
+
+	// 因为virtualHtml不需要入口，这样可以不弹出Skipping dependency pre-bundling.
+	optimizeDeps: { entries: [] }
+}) as UserConfig;