mm_statics 1.6.7 → 1.6.9

package/index.js

@@ -265,19 +265,19 @@ Static.prototype._toAmd = async function (file_type, text) {
    * @param {string} filePath 文件路径
    * @returns {Promise<string>} 可直接调用的JavaScript组件代码
    */
-  Static.prototype._compileVue = async function (code, filePath = '') {
-    try {
-      // 使用修复后的 Vue 编译器
-      const { code: compiledCode } = await vueCompiler.toJS(code, filePath);
-      
-      // Vue 编译后的代码是 JavaScript，应该使用 babel 解析器格式化
-      const result = await this._formatCode(compiledCode, 'babel');
-      return result;
-    } catch (error) {
-      console.error('Vue编译失败:', error);
-      return `console.error('Vue编译失败: ${error.message}');\nexport default { name: 'ErrorComponent' };`;
-    }
-  };
+Static.prototype._compileVue = async function (code, filePath = '') {
+  try {
+    // 使用修复后的 Vue 编译器
+    const { code: compiledCode } = await vueCompiler.toJS(code, filePath);
+
+    // Vue 编译后的代码是 JavaScript，应该使用 babel 解析器格式化
+    const result = await this._formatCode(compiledCode, 'babel');
+    return result;
+  } catch (error) {
+    console.error('Vue编译失败:', error);
+    return `console.error('Vue编译失败: ${error.message}');\nexport default { name: 'ErrorComponent' };`;
+  }
+};
 
 /**
  * 发送文件

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mm_statics",
-    "version": "1.6.7",
+    "version": "1.6.9",
     "description": "这是超级美眉statics函数模块，用于web服务端statics缓存",
     "main": "index.js",
     "scripts": {
@@ -32,11 +32,12 @@
     "homepage": "https://gitee.com/qiuwenwu91/mm_statics#readme",
     "files": [
         "index.js",
+        "vue_compiler.js",
         "eslint.config.js",
         "static/"
     ],
     "dependencies": {
-        "@vue/compiler-sfc": "^3.5.26",
+        "@vue/compiler-sfc": "^3.5.27",
         "abstract-syntax-tree": "^2.22.0",
         "chokidar": "^5.0.0",
         "koa": "^3.1.1",
@@ -44,13 +45,13 @@
         "marked": "^17.0.1",
         "mm_cache": "^1.4.8",
         "mm_es6_to_amd": "^1.4.7",
-        "prettier": "^3.7.4"
+        "prettier": "^3.8.1"
     },
     "devDependencies": {
         "eslint": "^9.39.2",
-        "eslint-plugin-jsdoc": "^61.5.0",
-        "mm_eslint": "^1.4.0",
+        "eslint-plugin-jsdoc": "^62.4.1",
+        "mm_eslint": "^1.5.7",
         "mocha": "^11.7.5",
-        "supertest": "^7.1.4"
+        "supertest": "^7.2.2"
     }
 }

package/vue_compiler.js

@@ -0,0 +1,276 @@
+// vue-sfc-compiler.js - 修复版
+const { parse, compileScript, compileTemplate, compileStyleAsync } = require('@vue/compiler-sfc');
+const crypto = require('crypto');
+const prettier = require('prettier');
+
+class VueSFCCompiler {
+  constructor(options = {}) {
+    this.options = {
+      isProduction: process.env.NODE_ENV === 'production',
+      sourceMap: true,
+      ...options
+    };
+  }
+
+  /**
+   * 编译 .vue 文件为 JS 模块
+   * @param {string} source - .vue 文件内容
+   * @param {string} filename - 文件名（用于错误提示）
+   * @returns {Promise<{code: string, map?: any}>}
+   */
+  async toJS(source, filename) {
+    // 1. 解析 SFC
+    const { descriptor, errors } = parse(source, {
+      filename,
+      sourceMap: this.options.sourceMap
+    });
+
+    if (errors.length) {
+      throw new Error(`Vue SFC parse error: ${errors[0].message}`);
+    }
+
+    // 2. 生成组件 ID
+    descriptor.id = this.generateComponentId(filename, source);
+
+    // 3. 编译脚本部分
+    const scriptCode = await this.compileScript(descriptor);
+
+    // 4. 编译模板部分
+    const templateCode = await this.compileTemplate(descriptor, filename);
+
+    // 5. 编译样式部分
+    const styleCode = await this.compileStyles(descriptor, filename);
+
+    // 6. 组合成最终模块
+    const code = await this.assembleModule(descriptor, scriptCode, templateCode, styleCode);
+
+    return {
+      code,
+      errors: []
+    };
+  }
+
+  /**
+   * 生成组件 ID（基于文件内容哈希）
+   */
+  generateComponentId(filename, source) {
+    const hash = crypto.createHash('sha256');
+    hash.update(filename + source);
+    return hash.digest('hex').substring(0, 8);
+  }
+
+  /**
+   * 编译脚本部分
+   */
+  async compileScript(descriptor) {
+    if (!descriptor.script && !descriptor.scriptSetup) {
+      return 'const __script = {};';
+    }
+
+    const result = compileScript(descriptor, {
+      id: descriptor.id,
+      isProd: this.options.isProduction,
+      sourceMap: this.options.sourceMap,
+      inlineTemplate: false
+    });
+
+    // 检查是否已经使用了 defineComponent
+    const hasDefineComponent = result.content.includes('defineComponent');
+
+    // 检查是否已经导入了 defineComponent
+    const hasDefineComponentImport = result.content.includes('import { defineComponent }') ||
+      result.content.includes('import defineComponent');
+
+    // 移除 export default，改为赋值给 __script 变量
+    let scriptContent = result.content || '';
+    if (scriptContent.includes('export default')) {
+      if (hasDefineComponent && scriptContent.includes('export default defineComponent')) {
+        // 如果已经是 export default defineComponent(...)，说明组件已经正确包装
+        // 直接替换为 const __script = defineComponent(...)
+        scriptContent = scriptContent.replace('export default defineComponent', 'const __script = defineComponent');
+      } else {
+        scriptContent = scriptContent.replace('export default', 'const __script =');
+      }
+    } else if (scriptContent.includes('export')) {
+      // 处理命名导出
+      scriptContent = `const __script = {\n${scriptContent}\n};`;
+    } else {
+      scriptContent = `const __script = {};\n${scriptContent}`;
+    }
+
+    return scriptContent;
+  }
+
+  /**
+   * 编译模板部分
+   */
+  async compileTemplate(descriptor, filename) {
+    const templateBlock = descriptor.template;
+    if (!templateBlock) {
+      return '';
+    }
+
+    const result = compileTemplate({
+      source: templateBlock.content,
+      filename,
+      id: descriptor.id,
+      scoped: descriptor.styles.some(s => s.scoped),
+      slotted: descriptor.slotted,
+      isProd: this.options.isProduction,
+      compilerOptions: {
+        sourceMap: this.options.sourceMap,
+        mode: 'module'
+      }
+    });
+
+    if (result.errors.length) {
+      throw new Error(`Template compile error: ${result.errors[0]}`);
+    }
+
+    return result.code;
+  }
+
+  /**
+   * 编译样式部分
+   */
+  async compileStyles(descriptor, filename) {
+    if (!descriptor.styles.length) {
+      return '';
+    }
+
+    let styleCode = '';
+    for (let i = 0; i < descriptor.styles.length; i++) {
+      const style = descriptor.styles[i];
+      const result = await compileStyleAsync({
+        source: style.content,
+        filename,
+        id: style.scoped ? `data-v-${descriptor.id}` : undefined,
+        scoped: style.scoped,
+        isProd: this.options.isProduction
+      });
+
+      if (result.errors.length) {
+        console.warn(`Style compile warning: ${result.errors[0]}`);
+        continue;
+      }
+
+      // 对于 scoped 样式，添加 scopeId 到组件
+      if (style.scoped) {
+        styleCode += `
+// Scoped styles for ${descriptor.id}
+const __style_${i} = \`${result.code.replace(/`/g, '\\`')}\`;
+`;
+      } else {
+        styleCode += `
+// Global styles
+const __style_${i} = \`${result.code.replace(/`/g, '\\`')}\`;
+`;
+      }
+    }
+
+    return styleCode;
+  }
+
+  /**
+   * 组装成最终模块
+   */
+  async assembleModule(descriptor, scriptCode, templateCode, styleCode) {
+    const hasScopedStyle = descriptor.styles.some(s => s.scoped);
+    const scopeId = hasScopedStyle ? `data-v-${descriptor.id}` : null;
+
+    // 检查脚本部分是否已经导入了 defineComponent
+    const hasDefineComponentImport = scriptCode.includes('import { defineComponent }') ||
+      scriptCode.includes('import defineComponent');
+
+    // 检查脚本部分是否已经使用了 defineComponent 函数
+    const hasDefineComponentFunction = scriptCode.includes('defineComponent(');
+
+    // 组装最终代码
+    let assembledCode = '';
+
+    // 添加脚本部分
+    if (scriptCode) {
+      assembledCode += scriptCode;
+    }
+
+    // 添加模板部分
+    if (templateCode) {
+      assembledCode += '\n' + templateCode;
+    }
+
+    // 添加样式部分
+    if (styleCode) {
+      assembledCode += '\n' + styleCode;
+    }
+
+    // 添加组件组装逻辑 - 将 render 函数合并到组件对象中
+    assembledCode += `
+// 组装组件
+${scopeId ? `__script.__scopeId = "${scopeId}";` : ''}
+
+// 文件信息（开发环境）
+${!this.options.isProduction ? `__script.__file = ${JSON.stringify(descriptor.filename)};` : ''}
+
+// 样式注入函数
+function injectStyles() {
+  if (typeof document === 'undefined') return;
+  
+  const styleId = 'vue-component-style-' + ${JSON.stringify(descriptor.id)};
+  
+  // 检查样式是否已经注入
+  if (document.getElementById(styleId)) return;
+  
+  // 创建 style 元素
+  const styleEl = document.createElement('style');
+  styleEl.id = styleId;
+  styleEl.textContent = __style_0;
+  
+  // 插入到 head
+  document.head.appendChild(styleEl);
+}
+
+// 注入样式
+injectStyles();
+
+// 将 render 函数合并到组件对象中
+__script.render = render;
+
+// 导出组件
+${!hasDefineComponentImport && !hasDefineComponentFunction ? 'import { defineComponent } from \'vue\';\nexport default defineComponent(__script);' : 'export default __script;'}
+`;
+
+    // 对最终组合代码进行整体格式化
+    return await this._formatCode(assembledCode, 'babel');
+  }
+
+  /**
+   * 格式化代码
+   */
+  async _formatCode(code, parser) {
+    if (!code || code.trim() === '') {
+      return code;
+    }
+
+    try {
+      const formattedCode = await prettier.format(code, {
+        parser: parser,
+        semi: true,
+        singleQuote: true,
+        trailingComma: 'es5',
+        printWidth: 100,
+        tabWidth: 2,
+        useTabs: false,
+        bracketSpacing: true,
+        arrowParens: 'avoid'
+      });
+
+      return formattedCode;
+    } catch (error) {
+      // 格式化失败时返回原代码
+      console.warn(`格式化代码失败: ${error.message}`);
+      return code;
+    }
+  }
+}
+
+module.exports = VueSFCCompiler;