vite-plugin-webide 0.0.1

package/README.md

@@ -0,0 +1,66 @@
+# Vite Plugin WebIDE
+
+一个为 Vite 项目提供即时 Web IDE 环境的插件。只需简单配置，即可在浏览器中浏览、编辑项目文件，并安全地分享给局域网内的协作者。
+
+## ✨ 特性
+
+- **零配置集成**：开箱即用，自动集成到 Vite 开发服务器。
+- **专业级编辑器**：内置 Monaco Editor（VS Code 同款核心），提供代码高亮、智能提示和缩略图。
+- **安全分享机制**：
+  - **权限控制**：支持生成“只读”或“读写”权限的分享链接。
+  - **密码保护**：可为分享链接设置访问密码，确保代码安全。
+  - **有效期管理**：支持设置 1小时、24小时或永久有效的分享链接。
+  - **无状态设计**：Token 基于签名验证，重启服务即失效（阅后即焚），无持久化隐患。
+- **便捷协作**：
+  - **自动局域网 IP**：生成的分享链接自动使用局域网 IP，方便同一网络下的设备访问。
+  - **二维码分享**：内置二维码生成器，手机扫码即可快速预览或审查代码。
+  - **剪贴板集成**：一键复制分享链接，配合优雅的 Toast 提示。
+- **沉浸式体验**：现代化的深色主题 UI，专注代码编写。
+
+## 📦 安装
+
+```bash
+npm install vite-plugin-webide --save-dev
+# 或者
+pnpm add -D vite-plugin-webide
+# 或者
+yarn add -D vite-plugin-webide
+```
+
+## 🚀 使用
+
+在你的 `vite.config.ts` 中引入并注册插件：
+
+```typescript
+import { defineConfig } from 'vite'
+import webIde from 'vite-plugin-webide'
+
+export default defineConfig({
+  plugins: [
+    webIde({
+      // 插件配置选项（可选）
+      base: '/__webide__' // 访问路径，默认为 /__webide__
+    })
+  ]
+})
+```
+
+启动 Vite 开发服务器后，访问 `http://localhost:5173/__webide__` (端口取决于你的配置) 即可进入 IDE。
+
+## 🛠 配置选项
+
+| 选项 | 类型 | 默认值 | 描述 |
+| --- | --- | --- | --- |
+| `base` | `string` | `/__webide__` | IDE 页面的基础路径。建议保持默认，除非与项目路由冲突。 |
+
+## 🔒 安全说明
+
+本插件专为开发环境设计，旨在简化局域网内的代码分享与协作。
+
+1.  **开发环境专用**：插件仅在 `serve` 模式下应用，不会影响生产构建。
+2.  **局域网访问**：分享链接包含你的局域网 IP，请确保在受信任的网络环境中使用。
+3.  **Token 签名**：分享链接中的 Token 包含权限和有效期信息，并经过服务端签名。修改 URL 参数无法提升权限。
+
+## 📝 License
+
+MIT

package/client.d.ts

@@ -0,0 +1,12 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+declare module '*?worker' {
+  const workerConstructor: {
+    new (): Worker
+  }
+  export default workerConstructor
+}

package/dist/index.cjs

@@ -0,0 +1,368 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => webIdePlugin
+});
+module.exports = __toCommonJS(index_exports);
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_os = __toESM(require("os"), 1);
+var import_node_path = require("path");
+var import_node_url = require("url");
+var import_sirv = __toESM(require("sirv"), 1);
+var import_picocolors = __toESM(require("picocolors"), 1);
+
+// src/security.ts
+var import_node_crypto = require("crypto");
+var SecurityManager = class {
+  // Use a fixed secret or generate one. If random, tokens invalidate on restart (desired behavior).
+  secret = (0, import_node_crypto.randomBytes)(32).toString("hex");
+  constructor() {
+  }
+  createShare(options) {
+    let expiresAt = void 0;
+    const now = Date.now();
+    if (options.validity === "1h") expiresAt = now + 3600 * 1e3;
+    if (options.validity === "24h") expiresAt = now + 24 * 3600 * 1e3;
+    const payload = {
+      acc: options.access === "readonly" ? "r" : "w",
+      iat: now
+    };
+    if (expiresAt) payload.exp = expiresAt;
+    if (options.password) {
+      payload.pwd = this.hashPassword(options.password);
+    }
+    const token = this.signToken(payload);
+    return { token };
+  }
+  getSession(token) {
+    const payload = this.verifyToken(token);
+    if (!payload) return void 0;
+    return {
+      token,
+      access: payload.acc === "r" ? "readonly" : "readwrite",
+      expiresAt: payload.exp || null,
+      passwordHash: payload.pwd,
+      createdAt: payload.iat
+    };
+  }
+  // Check if request is allowed
+  validate(req, res) {
+    const remoteAddr = req.socket.remoteAddress;
+    const isLocal = remoteAddr === "127.0.0.1" || remoteAddr === "::1" || remoteAddr === "::ffff:127.0.0.1";
+    if (isLocal) return true;
+    let token = "";
+    const authHeader = req.headers["authorization"];
+    if (authHeader?.startsWith("Bearer ")) {
+      token = authHeader.substring(7);
+    }
+    if (!token) {
+      const url = new URL(req.url || "", `http://${req.headers.host}`);
+      token = url.searchParams.get("token") || "";
+    }
+    if (!token) {
+      res.statusCode = 403;
+      res.end(JSON.stringify({ error: "Access denied: No token provided" }));
+      return false;
+    }
+    const session = this.getSession(token);
+    if (!session) {
+      res.statusCode = 403;
+      res.end(JSON.stringify({ error: "Access denied: Invalid or expired token" }));
+      return false;
+    }
+    if (session.expiresAt && Date.now() > session.expiresAt) {
+      res.statusCode = 403;
+      res.end(JSON.stringify({ error: "Access denied: Token expired" }));
+      return false;
+    }
+    if (session.passwordHash) {
+      const url = req.url || "";
+      if (!url.includes("/auth/verify")) {
+        const providedPass = req.headers["x-webide-password"];
+        if (!providedPass || this.hashPassword(providedPass) !== session.passwordHash) {
+          res.statusCode = 401;
+          res.end(JSON.stringify({ error: "Password required", type: "password_required" }));
+          return false;
+        }
+      }
+    }
+    if (req.method === "POST" || req.method === "PUT" || req.method === "DELETE") {
+      if (req.url?.includes("/auth/verify")) return true;
+      if (session.access === "readonly") {
+        res.statusCode = 403;
+        res.end(JSON.stringify({ error: "Read-only access" }));
+        return false;
+      }
+    }
+    return true;
+  }
+  verifyPassword(token, password) {
+    const session = this.getSession(token);
+    if (!session || !session.passwordHash) return true;
+    return this.hashPassword(password) === session.passwordHash;
+  }
+  hashPassword(password) {
+    return (0, import_node_crypto.createHmac)("sha256", this.secret).update(password).digest("hex");
+  }
+  signToken(payload) {
+    const json = JSON.stringify(payload);
+    const b64 = Buffer.from(json).toString("base64url");
+    const signature = (0, import_node_crypto.createHmac)("sha256", this.secret).update(b64).digest("base64url");
+    return `${b64}.${signature}`;
+  }
+  verifyToken(token) {
+    try {
+      const [b64, signature] = token.split(".");
+      if (!b64 || !signature) return null;
+      const expectedSig = (0, import_node_crypto.createHmac)("sha256", this.secret).update(b64).digest("base64url");
+      if (signature !== expectedSig) return null;
+      const json = Buffer.from(b64, "base64url").toString();
+      return JSON.parse(json);
+    } catch (e) {
+      return null;
+    }
+  }
+};
+
+// src/index.ts
+var import_meta = {};
+var DIR_DIST = typeof __dirname !== "undefined" ? __dirname : (0, import_node_path.dirname)((0, import_node_url.fileURLToPath)(import_meta.url));
+var DIR_CLIENT = (0, import_node_path.resolve)(DIR_DIST, "client");
+function webIdePlugin(options = {}) {
+  const base = options.base || "/__webide__";
+  const apiBase = `${base}/api`;
+  const security = new SecurityManager();
+  return {
+    name: "vite-plugin-webide",
+    apply: "serve",
+    configureServer(server) {
+      server.middlewares.use(base, (req, res, next) => {
+        if (!req.url) return next();
+        if (req.url.startsWith("/api/share/create") && req.method === "POST") {
+          const remoteAddr = req.socket.remoteAddress;
+          const isLocal = remoteAddr === "127.0.0.1" || remoteAddr === "::1" || remoteAddr === "::ffff:127.0.0.1";
+          if (!isLocal) {
+            res.statusCode = 403;
+            res.end(JSON.stringify({ error: "Only localhost can create share links" }));
+            return;
+          }
+          let body = "";
+          req.on("data", (chunk) => body += chunk);
+          req.on("end", () => {
+            try {
+              const opts = JSON.parse(body);
+              const { token } = security.createShare(opts);
+              const interfaces = import_node_os.default.networkInterfaces();
+              let localIp = "localhost";
+              for (const key in interfaces) {
+                for (const iface of interfaces[key] || []) {
+                  if (iface.family === "IPv4" && !iface.internal) {
+                    localIp = iface.address;
+                    break;
+                  }
+                }
+                if (localIp !== "localhost") break;
+              }
+              const protocol = server.config.server.https ? "https" : "http";
+              const port = server.config.server.port;
+              const url = `${protocol}://${localIp}:${port}${base}?token=${token}`;
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ token, url }));
+            } catch (e) {
+              res.statusCode = 500;
+              res.end(JSON.stringify({ error: String(e) }));
+            }
+          });
+          return;
+        }
+        if (req.url.startsWith("/api/auth/verify") && req.method === "POST") {
+          let body = "";
+          req.on("data", (chunk) => body += chunk);
+          req.on("end", () => {
+            try {
+              const { token, password } = JSON.parse(body);
+              const isValid = security.verifyPassword(token, password);
+              if (isValid) {
+                res.setHeader("Content-Type", "application/json");
+                res.end(JSON.stringify({ success: true }));
+              } else {
+                res.statusCode = 401;
+                res.end(JSON.stringify({ error: "Invalid password" }));
+              }
+            } catch (e) {
+              res.statusCode = 500;
+              res.end(JSON.stringify({ error: String(e) }));
+            }
+          });
+          return;
+        }
+        if (req.url.startsWith("/api")) {
+          if (!security.validate(req, res)) {
+            return;
+          }
+        }
+        next();
+      });
+      server.middlewares.use(apiBase, (req, res, next) => {
+        if (!req.url) return next();
+        if (req.url.startsWith("/api/auth/me")) {
+          let token = "";
+          const authHeader = req.headers["authorization"];
+          if (authHeader?.startsWith("Bearer ")) {
+            token = authHeader.substring(7);
+          } else {
+            const url = new URL(req.url, `http://${req.headers.host}`);
+            token = url.searchParams.get("token") || "";
+          }
+          const session = security.getSession(token);
+          const access = session ? session.access : "readwrite";
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ access }));
+          return;
+        }
+        if (req.url.startsWith("/list")) {
+          const url = new URL(req.url, `http://${req.headers.host}`);
+          const dirPath = url.searchParams.get("path") || "/";
+          try {
+            const absolutePath = (0, import_node_path.resolve)(process.cwd(), dirPath.replace(/^\//, ""));
+            if (!import_node_fs.default.existsSync(absolutePath)) {
+              res.statusCode = 404;
+              res.end(JSON.stringify({ error: "Path not found" }));
+              return;
+            }
+            const items = import_node_fs.default.readdirSync(absolutePath, { withFileTypes: true }).map((dirent) => ({
+              name: dirent.name,
+              isFile: dirent.isFile(),
+              path: (0, import_node_path.join)(dirPath, dirent.name).replace(/\\/g, "/")
+            }));
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify(items));
+          } catch (e) {
+            console.error(import_picocolors.default.red(`[WebIDE] Error listing directory ${dirPath}:`), e);
+            res.statusCode = 500;
+            res.end(JSON.stringify({ error: String(e) }));
+          }
+          return;
+        }
+        if (req.url.startsWith("/read")) {
+          const url = new URL(req.url, `http://${req.headers.host}`);
+          const filePath = url.searchParams.get("path");
+          if (!filePath) {
+            res.statusCode = 400;
+            res.end(JSON.stringify({ error: "Missing path parameter" }));
+            return;
+          }
+          try {
+            const safePath = filePath.replace(/^\//, "");
+            if (safePath.includes("..")) {
+              res.statusCode = 403;
+              res.end(JSON.stringify({ error: "Access denied" }));
+              return;
+            }
+            const absolutePath = (0, import_node_path.resolve)(process.cwd(), safePath);
+            if (!import_node_fs.default.existsSync(absolutePath) || !import_node_fs.default.statSync(absolutePath).isFile()) {
+              res.statusCode = 404;
+              res.end(JSON.stringify({ error: "File not found" }));
+              return;
+            }
+            const ext = filePath.split(".").pop()?.toLowerCase();
+            const isImage = ["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"].includes(ext || "");
+            if (isImage) {
+              const content = import_node_fs.default.readFileSync(absolutePath, "base64");
+              const mimeType = ext === "svg" ? "svg+xml" : ext;
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ content: `data:image/${mimeType};base64,${content}` }));
+            } else {
+              const content = import_node_fs.default.readFileSync(absolutePath, "utf-8");
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ content }));
+            }
+          } catch (e) {
+            console.error(import_picocolors.default.red(`[WebIDE] Error reading file ${filePath}:`), e);
+            res.statusCode = 500;
+            res.end(JSON.stringify({ error: String(e) }));
+          }
+          return;
+        }
+        if (req.url.startsWith("/save") && req.method === "POST") {
+          let body = "";
+          req.on("data", (chunk) => {
+            body += chunk.toString();
+          });
+          req.on("end", () => {
+            try {
+              const { path: filePath, content } = JSON.parse(body);
+              if (!filePath || content === void 0) {
+                res.statusCode = 400;
+                res.end(JSON.stringify({ error: "Missing path or content" }));
+                return;
+              }
+              const safePath = filePath.replace(/^\//, "");
+              if (safePath.includes("..")) {
+                res.statusCode = 403;
+                res.end(JSON.stringify({ error: "Access denied" }));
+                return;
+              }
+              const absolutePath = (0, import_node_path.resolve)(process.cwd(), safePath);
+              import_node_fs.default.mkdirSync((0, import_node_path.dirname)(absolutePath), { recursive: true });
+              import_node_fs.default.writeFileSync(absolutePath, content, "utf-8");
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ success: true }));
+            } catch (e) {
+              console.error(import_picocolors.default.red(`[WebIDE] Error saving file:`), e);
+              res.statusCode = 500;
+              res.end(JSON.stringify({ error: String(e) }));
+            }
+          });
+          return;
+        }
+        next();
+      });
+      server.middlewares.use(base, (0, import_sirv.default)(DIR_CLIENT, {
+        dev: true,
+        single: true,
+        setHeaders: (res, pathname) => {
+          if (pathname.endsWith(".ttf")) {
+            res.setHeader("Content-Type", "font/ttf");
+            res.setHeader("Access-Control-Allow-Origin", "*");
+          }
+        }
+      }));
+      const printUrls = server.printUrls;
+      server.printUrls = () => {
+        printUrls();
+        const colorUrl = (url) => import_picocolors.default.cyan(url.replace(/:(\d+)\//, (_, port) => `:${import_picocolors.default.bold(port)}/`));
+        console.log(`  ${import_picocolors.default.green("\u279C")}  ${import_picocolors.default.bold("Web IDE")}: ${colorUrl(`${server.config.server.https ? "https" : "http"}://localhost:${server.config.server.port}${base}`)}`);
+      };
+    }
+  };
+}

package/dist/index.d.cts

@@ -0,0 +1,8 @@
+import { PluginOption } from 'vite';
+
+interface WebIdeOptions {
+    base?: string;
+}
+declare function webIdePlugin(options?: WebIdeOptions): PluginOption;
+
+export { type WebIdeOptions, webIdePlugin as default };

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { PluginOption } from 'vite';
+
+interface WebIdeOptions {
+    base?: string;
+}
+declare function webIdePlugin(options?: WebIdeOptions): PluginOption;
+
+export { type WebIdeOptions, webIdePlugin as default };

package/dist/index.js

@@ -0,0 +1,336 @@
+// src/index.ts
+import fs from "fs";
+import os from "os";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
+import sirv from "sirv";
+import pc from "picocolors";
+
+// src/security.ts
+import { randomBytes, createHmac } from "crypto";
+var SecurityManager = class {
+  // Use a fixed secret or generate one. If random, tokens invalidate on restart (desired behavior).
+  secret = randomBytes(32).toString("hex");
+  constructor() {
+  }
+  createShare(options) {
+    let expiresAt = void 0;
+    const now = Date.now();
+    if (options.validity === "1h") expiresAt = now + 3600 * 1e3;
+    if (options.validity === "24h") expiresAt = now + 24 * 3600 * 1e3;
+    const payload = {
+      acc: options.access === "readonly" ? "r" : "w",
+      iat: now
+    };
+    if (expiresAt) payload.exp = expiresAt;
+    if (options.password) {
+      payload.pwd = this.hashPassword(options.password);
+    }
+    const token = this.signToken(payload);
+    return { token };
+  }
+  getSession(token) {
+    const payload = this.verifyToken(token);
+    if (!payload) return void 0;
+    return {
+      token,
+      access: payload.acc === "r" ? "readonly" : "readwrite",
+      expiresAt: payload.exp || null,
+      passwordHash: payload.pwd,
+      createdAt: payload.iat
+    };
+  }
+  // Check if request is allowed
+  validate(req, res) {
+    const remoteAddr = req.socket.remoteAddress;
+    const isLocal = remoteAddr === "127.0.0.1" || remoteAddr === "::1" || remoteAddr === "::ffff:127.0.0.1";
+    if (isLocal) return true;
+    let token = "";
+    const authHeader = req.headers["authorization"];
+    if (authHeader?.startsWith("Bearer ")) {
+      token = authHeader.substring(7);
+    }
+    if (!token) {
+      const url = new URL(req.url || "", `http://${req.headers.host}`);
+      token = url.searchParams.get("token") || "";
+    }
+    if (!token) {
+      res.statusCode = 403;
+      res.end(JSON.stringify({ error: "Access denied: No token provided" }));
+      return false;
+    }
+    const session = this.getSession(token);
+    if (!session) {
+      res.statusCode = 403;
+      res.end(JSON.stringify({ error: "Access denied: Invalid or expired token" }));
+      return false;
+    }
+    if (session.expiresAt && Date.now() > session.expiresAt) {
+      res.statusCode = 403;
+      res.end(JSON.stringify({ error: "Access denied: Token expired" }));
+      return false;
+    }
+    if (session.passwordHash) {
+      const url = req.url || "";
+      if (!url.includes("/auth/verify")) {
+        const providedPass = req.headers["x-webide-password"];
+        if (!providedPass || this.hashPassword(providedPass) !== session.passwordHash) {
+          res.statusCode = 401;
+          res.end(JSON.stringify({ error: "Password required", type: "password_required" }));
+          return false;
+        }
+      }
+    }
+    if (req.method === "POST" || req.method === "PUT" || req.method === "DELETE") {
+      if (req.url?.includes("/auth/verify")) return true;
+      if (session.access === "readonly") {
+        res.statusCode = 403;
+        res.end(JSON.stringify({ error: "Read-only access" }));
+        return false;
+      }
+    }
+    return true;
+  }
+  verifyPassword(token, password) {
+    const session = this.getSession(token);
+    if (!session || !session.passwordHash) return true;
+    return this.hashPassword(password) === session.passwordHash;
+  }
+  hashPassword(password) {
+    return createHmac("sha256", this.secret).update(password).digest("hex");
+  }
+  signToken(payload) {
+    const json = JSON.stringify(payload);
+    const b64 = Buffer.from(json).toString("base64url");
+    const signature = createHmac("sha256", this.secret).update(b64).digest("base64url");
+    return `${b64}.${signature}`;
+  }
+  verifyToken(token) {
+    try {
+      const [b64, signature] = token.split(".");
+      if (!b64 || !signature) return null;
+      const expectedSig = createHmac("sha256", this.secret).update(b64).digest("base64url");
+      if (signature !== expectedSig) return null;
+      const json = Buffer.from(b64, "base64url").toString();
+      return JSON.parse(json);
+    } catch (e) {
+      return null;
+    }
+  }
+};
+
+// src/index.ts
+var DIR_DIST = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
+var DIR_CLIENT = resolve(DIR_DIST, "client");
+function webIdePlugin(options = {}) {
+  const base = options.base || "/__webide__";
+  const apiBase = `${base}/api`;
+  const security = new SecurityManager();
+  return {
+    name: "vite-plugin-webide",
+    apply: "serve",
+    configureServer(server) {
+      server.middlewares.use(base, (req, res, next) => {
+        if (!req.url) return next();
+        if (req.url.startsWith("/api/share/create") && req.method === "POST") {
+          const remoteAddr = req.socket.remoteAddress;
+          const isLocal = remoteAddr === "127.0.0.1" || remoteAddr === "::1" || remoteAddr === "::ffff:127.0.0.1";
+          if (!isLocal) {
+            res.statusCode = 403;
+            res.end(JSON.stringify({ error: "Only localhost can create share links" }));
+            return;
+          }
+          let body = "";
+          req.on("data", (chunk) => body += chunk);
+          req.on("end", () => {
+            try {
+              const opts = JSON.parse(body);
+              const { token } = security.createShare(opts);
+              const interfaces = os.networkInterfaces();
+              let localIp = "localhost";
+              for (const key in interfaces) {
+                for (const iface of interfaces[key] || []) {
+                  if (iface.family === "IPv4" && !iface.internal) {
+                    localIp = iface.address;
+                    break;
+                  }
+                }
+                if (localIp !== "localhost") break;
+              }
+              const protocol = server.config.server.https ? "https" : "http";
+              const port = server.config.server.port;
+              const url = `${protocol}://${localIp}:${port}${base}?token=${token}`;
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ token, url }));
+            } catch (e) {
+              res.statusCode = 500;
+              res.end(JSON.stringify({ error: String(e) }));
+            }
+          });
+          return;
+        }
+        if (req.url.startsWith("/api/auth/verify") && req.method === "POST") {
+          let body = "";
+          req.on("data", (chunk) => body += chunk);
+          req.on("end", () => {
+            try {
+              const { token, password } = JSON.parse(body);
+              const isValid = security.verifyPassword(token, password);
+              if (isValid) {
+                res.setHeader("Content-Type", "application/json");
+                res.end(JSON.stringify({ success: true }));
+              } else {
+                res.statusCode = 401;
+                res.end(JSON.stringify({ error: "Invalid password" }));
+              }
+            } catch (e) {
+              res.statusCode = 500;
+              res.end(JSON.stringify({ error: String(e) }));
+            }
+          });
+          return;
+        }
+        if (req.url.startsWith("/api")) {
+          if (!security.validate(req, res)) {
+            return;
+          }
+        }
+        next();
+      });
+      server.middlewares.use(apiBase, (req, res, next) => {
+        if (!req.url) return next();
+        if (req.url.startsWith("/api/auth/me")) {
+          let token = "";
+          const authHeader = req.headers["authorization"];
+          if (authHeader?.startsWith("Bearer ")) {
+            token = authHeader.substring(7);
+          } else {
+            const url = new URL(req.url, `http://${req.headers.host}`);
+            token = url.searchParams.get("token") || "";
+          }
+          const session = security.getSession(token);
+          const access = session ? session.access : "readwrite";
+          res.setHeader("Content-Type", "application/json");
+          res.end(JSON.stringify({ access }));
+          return;
+        }
+        if (req.url.startsWith("/list")) {
+          const url = new URL(req.url, `http://${req.headers.host}`);
+          const dirPath = url.searchParams.get("path") || "/";
+          try {
+            const absolutePath = resolve(process.cwd(), dirPath.replace(/^\//, ""));
+            if (!fs.existsSync(absolutePath)) {
+              res.statusCode = 404;
+              res.end(JSON.stringify({ error: "Path not found" }));
+              return;
+            }
+            const items = fs.readdirSync(absolutePath, { withFileTypes: true }).map((dirent) => ({
+              name: dirent.name,
+              isFile: dirent.isFile(),
+              path: join(dirPath, dirent.name).replace(/\\/g, "/")
+            }));
+            res.setHeader("Content-Type", "application/json");
+            res.end(JSON.stringify(items));
+          } catch (e) {
+            console.error(pc.red(`[WebIDE] Error listing directory ${dirPath}:`), e);
+            res.statusCode = 500;
+            res.end(JSON.stringify({ error: String(e) }));
+          }
+          return;
+        }
+        if (req.url.startsWith("/read")) {
+          const url = new URL(req.url, `http://${req.headers.host}`);
+          const filePath = url.searchParams.get("path");
+          if (!filePath) {
+            res.statusCode = 400;
+            res.end(JSON.stringify({ error: "Missing path parameter" }));
+            return;
+          }
+          try {
+            const safePath = filePath.replace(/^\//, "");
+            if (safePath.includes("..")) {
+              res.statusCode = 403;
+              res.end(JSON.stringify({ error: "Access denied" }));
+              return;
+            }
+            const absolutePath = resolve(process.cwd(), safePath);
+            if (!fs.existsSync(absolutePath) || !fs.statSync(absolutePath).isFile()) {
+              res.statusCode = 404;
+              res.end(JSON.stringify({ error: "File not found" }));
+              return;
+            }
+            const ext = filePath.split(".").pop()?.toLowerCase();
+            const isImage = ["png", "jpg", "jpeg", "gif", "svg", "webp", "ico"].includes(ext || "");
+            if (isImage) {
+              const content = fs.readFileSync(absolutePath, "base64");
+              const mimeType = ext === "svg" ? "svg+xml" : ext;
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ content: `data:image/${mimeType};base64,${content}` }));
+            } else {
+              const content = fs.readFileSync(absolutePath, "utf-8");
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ content }));
+            }
+          } catch (e) {
+            console.error(pc.red(`[WebIDE] Error reading file ${filePath}:`), e);
+            res.statusCode = 500;
+            res.end(JSON.stringify({ error: String(e) }));
+          }
+          return;
+        }
+        if (req.url.startsWith("/save") && req.method === "POST") {
+          let body = "";
+          req.on("data", (chunk) => {
+            body += chunk.toString();
+          });
+          req.on("end", () => {
+            try {
+              const { path: filePath, content } = JSON.parse(body);
+              if (!filePath || content === void 0) {
+                res.statusCode = 400;
+                res.end(JSON.stringify({ error: "Missing path or content" }));
+                return;
+              }
+              const safePath = filePath.replace(/^\//, "");
+              if (safePath.includes("..")) {
+                res.statusCode = 403;
+                res.end(JSON.stringify({ error: "Access denied" }));
+                return;
+              }
+              const absolutePath = resolve(process.cwd(), safePath);
+              fs.mkdirSync(dirname(absolutePath), { recursive: true });
+              fs.writeFileSync(absolutePath, content, "utf-8");
+              res.setHeader("Content-Type", "application/json");
+              res.end(JSON.stringify({ success: true }));
+            } catch (e) {
+              console.error(pc.red(`[WebIDE] Error saving file:`), e);
+              res.statusCode = 500;
+              res.end(JSON.stringify({ error: String(e) }));
+            }
+          });
+          return;
+        }
+        next();
+      });
+      server.middlewares.use(base, sirv(DIR_CLIENT, {
+        dev: true,
+        single: true,
+        setHeaders: (res, pathname) => {
+          if (pathname.endsWith(".ttf")) {
+            res.setHeader("Content-Type", "font/ttf");
+            res.setHeader("Access-Control-Allow-Origin", "*");
+          }
+        }
+      }));
+      const printUrls = server.printUrls;
+      server.printUrls = () => {
+        printUrls();
+        const colorUrl = (url) => pc.cyan(url.replace(/:(\d+)\//, (_, port) => `:${pc.bold(port)}/`));
+        console.log(`  ${pc.green("\u279C")}  ${pc.bold("Web IDE")}: ${colorUrl(`${server.config.server.https ? "https" : "http"}://localhost:${server.config.server.port}${base}`)}`);
+      };
+    }
+  };
+}
+export {
+  webIdePlugin as default
+};

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "vite-plugin-webide",
+  "version": "0.0.1",
+  "description": "A Vite plugin that provides a web-based IDE for your project.",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./client": {
+      "types": "./client.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "client.d.ts"
+  ],
+  "dependencies": {
+    "monaco-editor-nls": "^3.1.0",
+    "picocolors": "^1.0.0",
+    "sirv": "^2.0.4"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.9",
+    "@types/node": "^20.11.0",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "monaco-editor": "^0.45.0",
+    "rimraf": "^5.0.5",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11",
+    "vue": "^3.4.15"
+  },
+  "scripts": {
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit",
+    "build": "pnpm run clean && tsup",
+    "dev": "tsup --watch",
+    "coverage": "vitest run --coverage",
+    "docs": "typedoc",
+    "changeset": "changeset",
+    "release": "changeset version && pnpm install --ignore-scripts && pnpm run build && changeset publish"
+  }
+}