mm_statics 1.6.6 → 1.6.9

package/index.js

@@ -1,10 +1,11 @@
 let send = require('koa-send');
 const { EsToAmdConvert } = require('mm_es6_to_amd');
-const { parse } = require('@vue/compiler-sfc');
-const { compile } = require('@vue/compiler-dom');
+const VueSFCCompiler = require('./vue_compiler.js');
 const prettier = require('prettier');
 const { marked } = require('marked');
 
+var vueCompiler = new VueSFCCompiler();
+
 /**
  * 静态文件处理类
  */
@@ -45,11 +46,11 @@ class Static {
     // 需要转换的静态文件扩展名
     files: ['.js', '.vue', '.html'],
     // 是否转换ES6模块为AMD模块
-    convert_amd: true,
+    convert_amd: false,  // 修改为 false，避免 Vue 文件被错误转换为 AMD 格式
     // 是否开启文件监听
     watch: false,
     // 监听的文件扩展名
-    watch_files: ['.js', '.css', '.html', '.vue', '.json', '.md', '.txt', '.xml']
+    watch_files: ['.js', '.css', '.html', '.vue', '.json', '.md']
   };
 
   /**
@@ -256,135 +257,26 @@ Static.prototype._toAmd = async function (file_type, text) {
   return result;
 };
 
-/**
- * 处理Vue模板部分
- * @param {object} desc Vue组件描述符
- * @returns {string} 编译后的render函数
- */
-Static.prototype._processTemplate = function (desc) {
-  if (!desc.template) return '';
-
-  const template_result = compile(desc.template.content, {
-    mode: 'module'
-  });
-
-  // 提取render函数代码，去除import语句和export语句
-  let render_function = template_result.code
-    .replace(/^import[^;]+;\s*/gm, '')
-    .replace(/^export[^;]+;\s*/gm, '')
-    .trim();
 
-  // 如果render函数包含函数定义，提取函数体
-  let render_match = render_function.match(/function\s+render\s*\([^)]*\)\s*{([\s\S]*?)}\s*$/);
-  if (render_match) {
-    render_function = `function render(_ctx, _cache) {${render_match[1]}}`;
-  }
-
-  return render_function;
-};
 
 /**
- * 处理Vue脚本部分
- * @param {object} desc Vue组件描述符
- * @param {string} render_function render函数
- * @returns {string} 处理后的脚本代码
- */
-Static.prototype._processScript = function (desc, render_function) {
-  if (!desc.script) {
-    return this._createDefaultComp(render_function);
-  }
-
-  let script_content = desc.script.content;
-
-  // 提取import语句
-  let imports = '';
-  let import_match = script_content.match(/import[^;]+;/g);
-  if (import_match) {
-    imports = import_match.join('\n') + '\n';
-  }
-
-  // 提取export default部分，保留完整的组件定义
-  let export_match = script_content.match(/export\s+default\s*({[\s\S]*?})\s*$/s);
-  if (export_match) {
-    return this._buildCompWithExport(export_match[1], imports, render_function);
-  } else {
-    return this._buildDefaultComp(imports, render_function);
-  }
-};
-
-/**
- * 创建默认组件结构
- * @param {string} render_function render函数
- * @returns {string} 默认组件代码
- */
-Static.prototype._createDefaultComp = function (render_function) {
-  return `
-export default {
-  name: 'VueComponent',
-  data() {
-    return {}
-  }${render_function ? `,\n  render: ${render_function}` : ''}\n};
-`;
-};
+   * 编译Vue组件
+   * @param {string} code Vue组件代码
+   * @param {string} filePath 文件路径
+   * @returns {Promise<string>} 可直接调用的JavaScript组件代码
+   */
+Static.prototype._compileVue = async function (code, filePath = '') {
+  try {
+    // 使用修复后的 Vue 编译器
+    const { code: compiledCode } = await vueCompiler.toJS(code, filePath);
 
-/**
- * 构建带有export的组件
- * @param {string} code_lib 组件代码
- * @param {string} imports import语句
- * @param {string} render_function render函数
- * @returns {string} 完整的组件代码
- */
-Static.prototype._buildCompWithExport = function (code_lib, imports, render_function) {
-  let proc_code = code_lib;
-
-  // 确保组件字符串是完整的对象结构
-  if (!proc_code.trim().endsWith('}')) {
-    proc_code = proc_code + '\n}';
-  }
-
-  // 如果render函数存在，将其添加到组件选项中
-  if (render_function) {
-    // 在最后一个属性之前插入render函数
-    if (proc_code.trim().endsWith('}')) {
-      proc_code = proc_code.replace(/}\s*$/, '');
-      // 确保最后一个属性后有逗号
-      if (!proc_code.trim().endsWith(',')) {
-        proc_code += ',';
-      }
-      proc_code += `\n  render: ${render_function}\n}`;
-    }
+    // 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' };`;
   }
-
-  return `${imports}
-export default ${proc_code};
-`;
-};
-
-/**
- * 构建默认组件
- * @param {string} imports import语句
- * @param {string} render_function render函数
- * @returns {string} 默认组件代码
- */
-Static.prototype._buildDefaultComp = function (imports, render_function) {
-  return `${imports}
-export default {
-  name: 'VueComponent',
-  data() {
-    return {}
-  }${render_function ? `,\n  render: ${render_function}` : ''}\n};
-`;
-};
-
-/**
- * 编译Vue组件
- * @param {string} code Vue组件代码
- * @returns {Promise<string>} 可直接调用的JavaScript组件代码
- */
-Static.prototype._compileVue = async function (code) {
-  let desc = parse(code).descriptor;
-  let render_function = this._processTemplate(desc);
-  return await this._processScript(desc, render_function);
 };
 
 /**
@@ -433,7 +325,7 @@ Static.prototype._runVue = async function (path) {
   let file = `.${path}`.fullname(this.config.root);
   let text = file.loadText();
   if (text) {
-    code = await this._compileVue(text);
+    code = await this._compileVue(text, file);
   }
   return code;
 };
@@ -451,11 +343,11 @@ Static.prototype._extractMarkdownTitle = function (text) {
   // 匹配一级标题格式：# 标题
   var title_regex = /^#\s+(.+)$/m;
   var match = text.match(title_regex);
-  
+
   if (match && match[1]) {
     return match[1].trim();
   }
-  
+
   return null;
 };
 
@@ -473,7 +365,7 @@ Static.prototype._runMarkdown = async function (path) {
     try {
       // 使用marked将markdown转换为HTML
       let markdown_html = marked.parse(text);
-      
+
       // 优先从Markdown内容中提取一级标题，后备使用文件名
       var title_from_content = this._extractMarkdownTitle(text);
       var title_from_file = path.split('/').pop().replace('.md', '');
@@ -621,6 +513,10 @@ Static.prototype._getHeaders = function (file_type) {
       else if (this.config.compile_vue) {
         headers['content-type'] = 'application/javascript; charset=utf-8';
       }
+      else {
+        // 当不编译 Vue 文件时，设置为 JavaScript MIME 类型
+        headers['content-type'] = 'application/javascript; charset=utf-8';
+      }
       break;
     case 'html':
       headers['content-type'] = 'text/html; charset=utf-8';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mm_statics",
-    "version": "1.6.6",
+    "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;