@deot/dev-dever 2.4.0 → 2.5.1

package/dist/index.cjs

@@ -8,6 +8,8 @@ const devShared = require('@deot/dev-shared');
 const fs$1 = require('fs-extra');
 const vite = require('vite');
 const chalk = require('chalk');
+const sharedVueConfig = require('@deot/dev-vue');
+const sharedReactConfig = require('@deot/dev-react');
 const fs = require('node:fs');
 const ejs = require('ejs');
 
@@ -46,7 +48,7 @@ const walk = (dir) => {
     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") {
+    if (stat.isFile() && /\.((t|j)sx?|vue)$/.test(extname) && paths.length >= 2 && paths[paths.length - 2] === "examples") {
       const basename = path__namespace.basename(file, extname);
       let name = path__namespace.join(dir, basename).split("/");
       name.splice(name.length - 2, 1);
@@ -78,9 +80,8 @@ const run = (options) => devShared.Utils.autoCatch(async () => {
   }
   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 { cwd, workspace, packageOptionsMap, packageDirsMap, subpackagesMap } = locals;
+  const packageFolderName = devShared.Locals.getPackageFolderName(options.packageName);
   const packageOptions = packageOptionsMap[packageFolderName];
   const packageDir = packageDirsMap[packageFolderName];
   options.watch = true;
@@ -94,12 +95,6 @@ const run = (options) => devShared.Utils.autoCatch(async () => {
     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$ = {
@@ -113,7 +108,21 @@ const run = (options) => devShared.Utils.autoCatch(async () => {
     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 { vuePackage, reactPackage } = options;
+    if (vuePackage) {
+      options$ = vite.mergeConfig(sharedVueConfig, options$);
+    }
+    if (reactPackage) {
+      options$ = vite.mergeConfig(sharedReactConfig, options$);
+    }
   }
+  process.env.DEV_OPTIONS = encodeURIComponent(JSON.stringify({
+    ...options,
+    workspace,
+    entries,
+    html,
+    subpackagesMap
+  }));
   const server = await vite.createServer(options$);
   const $server = await server.listen();
   const { local = [], network = [] } = $server.resolvedUrls || {};

package/dist/index.es.js

@@ -2,8 +2,10 @@ import * as path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { Locals, Utils, Shell, Logger } from '@deot/dev-shared';
 import fs$1 from 'fs-extra';
-import { createServer } from 'vite';
+import { mergeConfig, createServer } from 'vite';
 import chalk from 'chalk';
+import sharedVueConfig from '@deot/dev-vue';
+import sharedReactConfig from '@deot/dev-react';
 import * as fs from 'node:fs';
 import { render } from 'ejs';
 
@@ -22,7 +24,7 @@ const walk = (dir) => {
     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") {
+    if (stat.isFile() && /\.((t|j)sx?|vue)$/.test(extname) && paths.length >= 2 && paths[paths.length - 2] === "examples") {
       const basename = path.basename(file, extname);
       let name = path.join(dir, basename).split("/");
       name.splice(name.length - 2, 1);
@@ -54,9 +56,8 @@ const run = (options) => Utils.autoCatch(async () => {
   }
   if (options.dryRun)
     return Shell.spawn(`echo development`);
-  const { cwd, workspace, packageOptionsMap, packageDirsMap } = locals;
-  const { packageName } = options;
-  const packageFolderName = Locals.getPackageFolderName(packageName);
+  const { cwd, workspace, packageOptionsMap, packageDirsMap, subpackagesMap } = locals;
+  const packageFolderName = Locals.getPackageFolderName(options.packageName);
   const packageOptions = packageOptionsMap[packageFolderName];
   const packageDir = packageDirsMap[packageFolderName];
   options.watch = true;
@@ -70,12 +71,6 @@ const run = (options) => Utils.autoCatch(async () => {
     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$ = {
@@ -89,7 +84,21 @@ const run = (options) => Utils.autoCatch(async () => {
     options$.configFile = path.relative(cwd, path.resolve(cwd, "./dev.config.ts"));
   } else {
     options$.configFile = path.relative(cwd, path.resolve(dirname, "../shared.config.ts"));
+    const { vuePackage, reactPackage } = options;
+    if (vuePackage) {
+      options$ = mergeConfig(sharedVueConfig, options$);
+    }
+    if (reactPackage) {
+      options$ = mergeConfig(sharedReactConfig, options$);
+    }
   }
+  process.env.DEV_OPTIONS = encodeURIComponent(JSON.stringify({
+    ...options,
+    workspace,
+    entries,
+    html,
+    subpackagesMap
+  }));
   const server = await createServer(options$);
   const $server = await server.listen();
   const { local = [], network = [] } = $server.resolvedUrls || {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/dev-dever",
-  "version": "2.4.0",
+  "version": "2.5.1",
   "type": "module",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -21,11 +21,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/dev-shared": "^2.4.0",
+    "@deot/dev-react": "^2.5.0",
+    "@deot/dev-shared": "^2.5.0",
+    "@deot/dev-vue": "^2.5.0",
     "ejs": "^3.1.9",
     "vite": "^4.4.9"
   },
   "devDependencies": {
+    "@deot/dev-test": "^2.5.0",
     "cross-env": "^7.0.3"
   }
 }

package/shared.config.ts

@@ -4,46 +4,21 @@ import { createRequire } from "node:module";
 import { defineConfig } from 'vitest/config';
 import type { UserConfig, ViteDevServer } from 'vite';
 
+/**
+ * https://github.com/vuejs/core/issues/8303
+ * to fix error: ReferenceError: __name is not defined
+ */
+let __defProp = Object.defineProperty;
+let __name = (target: any, value: any) => __defProp(target, 'name', { value, configurable: true });
+globalThis.__name = globalThis.__name || __name;
+
 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, workspace, url);
-
-	if (
-		/^\/?@vite/.test(url) 
-		|| (fs.existsSync(fullpath) && fs.statSync(fullpath).isFile())
-	) {
-		return;
-	}
-
-	if (url === '/') return html;
-
-	const info = url.split('/').filter(i => !!i);
-
-	const prefix = info.slice(0, -1);
-	const entry = info.slice(-1)[0];
-
-	if (prefix[prefix.length - 1] !== 'examples') {
-		prefix.push('examples');
-	}
-
-	fullpath = path.join(
-		cwd, 
-		workspace,
-		prefix.join('/'),
-		`${entry?.replace(/(\.html)$/, '.ts')}`
-	);
-
-	if (!fs.existsSync(fullpath)) return /\.[\s\S]+$/.test(entry) ? undefined : html;
+const { workspace, html, subpackagesMap } = devOptions;
 
+const generateIndexHtml = (url: string, inject: string) => {
 	let contents = '';
 	contents += `<!DOCTYPE html>\n`;
 	contents += `<html lang="en">\n`;
@@ -53,14 +28,81 @@ const getHtmlContent = async (url: string) => {
 	contents += `		<title>demo-${url}</title>\n`;
 	contents += `	</head>\n`;
 	contents += `	<body>\n`;
+	contents += `		<div id="app"></div>\n`;
 	contents += `		<script type="module">\n`;
-	contents += `		import "/${path.relative(cwd, fullpath)}";\n`;
+	contents += inject;
+
 	contents += `		</script>\n`;
 	contents += `	</body>\n`;
 	contents += `</html>\n`;
+
 	return contents;
 };
 
+const getVirtualHtml = async (url: string) => {
+	const info = url.split('/').filter(i => !!i);
+
+	const prefix = info.slice(0, -1);
+	const entry = info.slice(-1)[0];
+
+	if (prefix[prefix.length - 1] !== 'examples') {
+		prefix.push('examples');
+	}
+
+	if (workspace && prefix[0] !== workspace) {
+		prefix.unshift(workspace);
+	}
+
+	const dir = path.join(cwd, prefix.join('/'));
+	const isExist = (ext: string) => {
+		const fullpath = path.join(dir, `${entry.replace(/(.*)(\..*)$/, '$1') + ext}`);
+		return fs.existsSync(fullpath) ? fullpath : false;
+	};
+	
+	const htmlFullpath = isExist('.html');
+	if (htmlFullpath) {
+		return fs.readFileSync(htmlFullpath).toString();
+	}
+
+	const tsFullpath = isExist('.ts');
+	if (tsFullpath) {
+		let inject = '';
+		inject += `		import "/${path.relative(cwd, tsFullpath)}";\n`;
+		return generateIndexHtml(url, inject);
+	}
+
+	const vueFullpath = isExist('.vue');
+	if (vueFullpath) {
+		let inject = '';
+		inject += `		import { createApp } from "vue"\n`;
+		inject += `		import App from "/${path.relative(cwd, vueFullpath)}";\n`;
+		inject += `		const app = createApp(App);\n`;
+		inject += `		app.mount("#app");\n`;
+		inject += `		typeof window !== "undefined" && (window.app = app);\n`;
+		return generateIndexHtml(url, inject);
+	}
+
+	const tsxFullpath = isExist('.tsx');
+	if (tsxFullpath) {
+		let inject = '';
+		inject += `		import React, { StrictMode } from 'react';`;
+		inject += `		import { createRoot } from 'react-dom/client';`;
+		inject += `		import App from "/${path.relative(cwd, tsxFullpath)}";\n`;
+		inject += `		const h = React.createElement\n`;
+		inject += `		const app = createRoot(document.getElementById('app'));\n`;
+		inject += `		app.render(h(StrictMode, {}, h(App)))\n`;
+
+		return generateIndexHtml(url, inject);
+	}
+};
+
+
+// alias
+const require$ = createRequire(cwd);
+const getPackageName = (name: string) => (require$(path.resolve(cwd, workspace ? `${workspace}/${name}` : '', 'package.json'))).name;
+const replacement = (name: string, isSubpackage?: boolean) => path.resolve(cwd, `./packages/${name}`, isSubpackage ? 'index.ts' : './src');
+const name = getPackageName('index');
+
 export default defineConfig({
 	resolve: workspace
 		? {
@@ -69,6 +111,15 @@ export default defineConfig({
 					find: new RegExp(`^${name}$`),
 					replacement: replacement('index')
 				},
+				...Object.keys(subpackagesMap).reduce((pre, cur: string) => {
+					if (subpackagesMap[cur].length) {
+						pre.push({
+							find: new RegExp(`^${getPackageName(cur)}$`),
+							replacement: replacement(cur, true)
+						});
+					}
+					return pre;
+				}, [] as any),
 				{
 
 					find: new RegExp(`^${name}-(.*?)$`),
@@ -82,15 +133,35 @@ export default defineConfig({
 			name: 'vite-plugin-virtual-html',
 			configureServer(server: ViteDevServer) {
 				server.middlewares.use(async (req, res, next) => {
-					const url = req.url as string;
+					if (res.writableEnded) {
+					    return next();
+					}
+					if (req.url!.includes('html-proxy&')) {
+						return next();
+					}
 
-					const content = await getHtmlContent(url);
+					let url = req.url?.replace(/[?#].*$/s, '') || '';					
+					if (url === '/') return res.end(html);
 
-					if (!content) {
+					// 文件已存在，这样xxx.png可以被获取，真实路径的.ts,.html都可以被获取
+					if (fs.existsSync(path.join(cwd, url))) {
 						return next();
 					}
 
-					res.end(content);
+					let vHtml = await getVirtualHtml(url);
+					if (
+						(url?.endsWith('.html') || vHtml) 
+						&& req.headers['sec-fetch-dest'] !== 'script'
+					) {
+						if (!vHtml) {
+							return res.end(html);
+						}
+						vHtml = await server.transformIndexHtml(url, vHtml, req.originalUrl);
+						res.end(vHtml);
+						return;
+					}
+
+					next();
 				});
 			}
 		}