vue-repl-enhance 1.2.1 → 1.2.3

package/README.md

@@ -1,2 +1,150 @@
-## 使用
-参考 [@vue/repl文档](https://github.com/vuejs/repl#readme)
+# vue-repl-enhance
+
+一个功能增强版的 Vue REPL 组件，支持 Vue 2 和 Vue 3 的在线编辑与预览。基于 `@vue/repl` 开发，增加了对 Vue 2 的支持以及更多配置选项。
+
+## 特性
+
+- ⚡️ **多版本支持**：无缝切换 Vue 2 (2.7+) 和 Vue 3 (3.x)。
+- 📝 **编辑器支持**：内置 Monaco Editor 支持，提供强大的代码编辑体验。
+- 🛠 **TypeScript 支持**：内置 TypeScript 编译支持。
+- 📦 **依赖管理**：支持 Import Map，可自定义依赖包路径。
+- 🖥 **灵活布局**：支持左右分栏、仅编辑器、仅预览等多种布局模式。
+- 🎨 **主题定制**：支持亮色 (Light) 和暗色 (Dark) 主题。
+
+## 安装
+
+```bash
+npm install vue-repl-enhance
+# 或
+pnpm add vue-repl-enhance
+# 或
+yarn add vue-repl-enhance
+```
+
+## 使用指南
+
+### 基础用法
+
+```vue
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { Repl, ReplStore } from 'vue-repl-enhance'
+import MonacoEditor from 'vue-repl-enhance/monaco-editor'
+
+// 初始化 Store
+const store = new ReplStore({
+  defaultVueVersion: '3.3.4', // 默认 Vue 版本
+  defaultTypescriptVersion: '5.0.2',
+})
+
+// 设置初始文件
+onMounted(() => {
+  store.setFiles({
+    'App.vue': `
+<template>
+  <h1>Hello Vue Repl!</h1>
+</template>
+`
+  })
+})
+</script>
+
+<template>
+  <Repl
+    :store="store"
+    :editor="MonacoEditor"
+    :showCompileOutput="false"
+  />
+</template>
+
+<style>
+/* 确保容器有高度 */
+.vue-repl {
+  height: 100vh;
+}
+</style>
+```
+
+### Vue 2 支持
+
+要支持 Vue 2，需要在初始化 Store 时指定 Vue 版本为 2.x，并确保提供了 Vue 2 的运行时 URL。
+
+```ts
+const store = new ReplStore({
+  defaultVueVersion: '2.7.16',
+  // 如果需要，可以手动指定运行时 URL
+  // defaultVueRuntimeURL: '...' 
+})
+```
+
+## API 文档
+
+### Repl 组件 Props
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|Ref |Ref |Ref |Ref |
+| `editor` | `Component` | **Required** | 编辑器组件 (如 `MonacoEditor`) |
+| `store` | `ReplStore` | `new ReplStore()` | REPL 状态管理实例 |
+| `theme` | `'light' \| 'dark'` | `'light'` | 主题模式 |
+| `layout` | `'horizontal' \| 'vertical'` | - | 布局方向 |
+| `layoutMode` | `'both' \| 'editor' \| 'preview'` | `'both'` | 显示模式 |
+| `split` | `number` | - | 分栏初始比例 |
+| `autoResize` | `boolean` | `true` | 是否自动响应容器大小变化 |
+| `showCompileOutput` | `boolean` | `false` | 是否显示编译输出 |
+| `showImportMap` | `boolean` | `false` | 是否显示 Import Map 编辑器 |
+| `showTsConfig` | `boolean` | `false` | 是否显示 tsconfig.json 编辑器 |
+| `showError` | `boolean` | `true` | 是否显示错误提示 |
+| `showFileSelector` | `boolean` | `true` | 是否显示文件选择器 |
+| `showMessageToggle` | `boolean` | `true` | 是否显示消息切换按钮 |
+| `clearConsole` | `boolean` | `true` | 运行前是否清空控制台 |
+| `ssr` | `boolean` | `false` | 是否启用 SSR 预览模式 |
+| `previewOptions` | `Object` | - | 预览 iframe 的高级配置 |
+
+### ReplStore 配置选项
+
+```ts
+interface StoreOptions {
+  serializedState?: string;            // 从 URL hash 恢复的状态字符串
+  showOutput?: boolean;                // 初始是否显示编译输出
+  outputMode?: 'preview' | 'js' | 'css' | 'ssr'; // 初始输出模式
+  defaultVueVersion?: string;          // 默认 Vue 版本
+  defaultTypescriptVersion?: string;   // 默认 TypeScript 版本
+  defaultVueRuntimeURL?: string;       // 自定义 Vue 运行时 URL
+  defaultVueServerRendererURL?: string;// 自定义 Vue SSR 渲染器 URL
+  latestVersions?: Record<string, string>; // 依赖包的最新版本映射
+}
+```
+
+## 开发与构建
+
+### 启动开发服务器
+
+```bash
+npm run dev
+```
+
+### 构建
+
+```bash
+npm run build
+```
+
+## Nginx 配置
+
+如果使用 Nginx 部署，需要确保 `.mjs` 文件被正确识别为 `application/javascript` 类型，否则可能会遇到 MIME type 错误。
+
+在 `nginx.conf` 或 `mime.types` 中添加以下配置：
+
+```nginx
+http {
+    include       mime.types;
+    types {
+        application/javascript mjs;
+    }
+    # ... 其他配置
+}
+```
+
+## 许可证
+
+MIT

package/dist/assets/{vue.worker-f84af214.js → vue.worker-a61605c3.js}

@@ -111944,12 +111944,12 @@ self.fetch = async (t, e) => {
     }
   }
   if (n.startsWith("https://cdn.jsdelivr.net/npm/")) {
-    const r = n.match(/https:\/\/cdn\.jsdelivr\.net\/npm\/(.+?)@(.+?)\/(.+)/);
+    const r = n.match(/https:\/\/cdn\.jsdelivr\.net\/npm\/((?:@[^/@]+\/[^/@]+)|(?:[^/@]+))(?:@([^/]+))?\/(.+)/);
     if (r) {
       const i = r[1];
       let s = r[2];
       const a = r[3];
-      if (s === "latest" && (qs[i] ? s = qs[i] : i.startsWith("@vue/") && (s = qs.vue)), s !== "latest") {
+      if ((!s || s === "latest") && (qs[i] ? s = qs[i] : i.startsWith("@vue/") && (s = qs.vue)), s && s !== "latest") {
         const l = `/vue-repl-deps/${i}@${s}/${a}`;
         try {
           if ((await Ac(l, { method: "HEAD" })).ok)