pug-site-core 2.0.22 → 3.0.0

package/lib/devServer.js

@@ -16,9 +16,11 @@ import http from "http";
 import WebSocket, { WebSocketServer } from "ws";
 import { Worker } from "worker_threads";
 import { paths } from "./paths.js";
+import { injectDebugScript } from "./debug/pugDebug.js";
+import { setupDebugRoutes } from "./debug/debugRouter.js";
 
 const { config } = await import(paths.config);
-const pagsTemplatePath = paths.template.pages;
+const pagsTemplatePath = config.devServer.isDebug ? paths.template.debugPages : paths.template.pages;
 const localIp = ip.address();
 const port = await getIdleProt(config.devServer.port);
 process.env._port = port;
@@ -48,7 +50,7 @@ function setupMiddleware(app) {
   app.set("view engine", "pug");
   app.use("/static", express.static(paths.template.static));
   app.use(express.static(paths.public));
-  app.locals.basedir = paths.template.root;
+  app.locals.basedir = config.devServer.isDebug ? paths.template.debug : paths.template.root;
 
   // 设置代理
   setupProxy(app);
@@ -115,6 +117,9 @@ function setupProxy(app) {
 }
 
 function setupRoutes(app, wss) {
+  // 设置调试相关的路由
+  setupDebugRoutes(app);
+  
   app.get("/_refresh", (req, res) => {
     wss.clients.forEach(function each(client) {
       if (client.readyState === WebSocket.OPEN) {
@@ -180,6 +185,8 @@ function setupRoutes(app, wss) {
           commonData = await (
             await import(paths.getData)
           )["get_common_data"](language);
+          let languageData = (await import(paths.languageData)).default[language];
+          commonData.lang = _.merge(commonData.lang, languageData);
           await fse.writeJSON(
             paths.resolveRoot("jsonData", language, "_common.json"),
             commonData
@@ -190,6 +197,7 @@ function setupRoutes(app, wss) {
           );
         }
         let _refreshScript = `<script>const ws=new WebSocket('ws://${localIp}:${port}');ws.onmessage=function(event){if(event.data==='refresh'){console.log('Refreshing page...');location.reload()}}</script>`;
+        
         res.render(
           pugPath,
           _.merge(
@@ -208,7 +216,16 @@ function setupRoutes(app, wss) {
               if (config.isMatchEsi) {
                 html = await matchESI(html, data);
               }
-              html = addTemplateScopeIsolation(html);
+
+              if(config.isScopeIsolation){
+                html = addTemplateScopeIsolation(html);
+              }
+              
+              // 注入调试脚本（仅在开发环境）
+              if (config.devServer.isDebug) {
+                html = injectDebugScript(html);
+              }
+              
               res.send(_refreshScript + html);
             }
           }
@@ -225,14 +242,18 @@ function setupRoutes(app, wss) {
 }
 
 async function matchRouter(url, language, device) {
-  let router = (await import(paths.router)).router;
+  let routerModule = await import(paths.router);
+  let router = routerModule.router;
+  let abtestRouter = routerModule.abtestRouter;
   let getR2Data = async (jsonPath) => {
     jsonPath = paths.join(language, jsonPath);
     let data = await getJsonData(jsonPath);
     return data;
   };
   let params = { url, language, device, getR2Data };
-
+  if(config.abtest && config.abtest.enabled && abtestRouter && abtestRouter[config.abtest.curVariant]){
+    router.unshift(...abtestRouter[config.abtest.curVariant]);
+  }
   for (let index = 0; index < router.length; index++) {
     const obj = router[index];
     if (obj.matchFn.call(params)) {

package/lib/generate.js

@@ -1,5 +1,8 @@
 import fse from "fs-extra";
 import pug from "pug";
+import pugLexer from "pug-lexer";
+import pugParser from "pug-parser";
+import pugWalk from "pug-walk";
 import {
   getPagesPugFilePathArr,
   getCompilePugFilter,
@@ -13,8 +16,10 @@ import _ from "lodash";
 import async from "async";
 import UglifyJS from "uglify-js";
 import { paths } from "./paths.js";
+import path from "path";
 
 const { config } = await import(paths.config);
+
 /**
  * 将pages目录下的pug模板编译为JS函数
  * @param {string} pugPath - 指定编译的pug文件路径(相对于/template/pages)
@@ -263,6 +268,8 @@ export async function fetchDataToJsonFile(args) {
         allTasks.push(async () => {
           console.log(language, commonFuncName, "开始写入json文件");
           const commonData = await getData[commonFuncName](language);
+          let languageData = (await import(paths.languageData)).default[language];
+          commonData.lang = _.merge(commonData.lang, languageData);
           await fse.outputJSON(
             paths.resolveRoot("jsonData", language, "_common.json"),
             commonData
@@ -715,3 +722,451 @@ export async function buildStatic() {
   });
   console.log("打包完成花费:", (Date.now() - starTime) / 1000, "s");
 }
+
+/**
+ * 创建调试模板目录
+ * 复制template目录到template-debug并为所有pug文件添加调试属性
+ * @returns {Promise<void>}
+ */
+export async function createDebugTemplate() {
+  try {
+    console.log('开始创建调试模板目录...');
+    
+    const sourceDir = paths.template.root;
+    const targetDir = paths.template.debug;
+    
+    // 删除已存在的调试目录
+    if (await fse.pathExists(targetDir)) {
+      await fse.remove(targetDir);
+      console.log('已删除现有的调试目录');
+    }
+    
+    // 复制整个 template 目录到 template-debug
+    await fse.copy(sourceDir, targetDir);
+    console.log(`已复制 ${sourceDir} 到 ${targetDir}`);
+
+    let languageData = (await import(paths.languageData)).default.us;
+    
+    // 缓存语言路径检查结果，避免重复计算
+    const langPathCache = new Map();
+    
+    /**
+     * 检查属性路径是否在languageData的us对象中存在
+     * @param {string} langPath - 属性路径，例如 "Store.about"
+     * @returns {boolean} 是否存在该属性
+     */
+    function checkLangPathExists(langPath) {
+      // 使用缓存提升性能
+      if (langPathCache.has(langPath)) {
+        return langPathCache.get(langPath);
+      }
+      
+      try {
+        const keys = langPath.split('.');
+        let current = languageData;
+        
+        for (const key of keys) {
+          if (current && typeof current === 'object' && key in current) {
+            current = current[key];
+          } else {
+            langPathCache.set(langPath, false);
+            return false;
+          }
+        }
+        
+        const isValid = typeof current === 'string';
+        langPathCache.set(langPath, isValid);
+        return isValid;
+      } catch (error) {
+        langPathCache.set(langPath, false);
+        return false;
+      }
+    }
+    
+    /**
+     * 检查是否是动态内容
+     * @param {string} code - 代码内容
+     * @returns {boolean} 是否包含动态数据
+     */
+    function isDynamicContent(code) {
+      // 更精确的动态内容检测
+      const dynamicPatterns = [
+        /\b(Math|Date|JSON|parseInt|parseFloat|Number|String|Array|Object)\b/,
+        /\b(data|item|index|info|common\.siteConfig)\b/,
+        /[+\-*/%]/,
+        /\brandom\b|\bfloor\b|\bceil\b|\bround\b/,
+        /\.\w+\(/,  // 方法调用
+        /\$\{[^}]*[+\-*/%.][^}]*\}/  // 模板字符串中的计算
+      ];
+      
+      return dynamicPatterns.some(pattern => pattern.test(code));
+    }
+    
+    /**
+     * 提取Pug节点中的common.lang引用
+     * @param {string} code - 代码内容
+     * @returns {string|null} 语言路径，如果不是common.lang引用则返回null
+     */
+    function extractLangPath(code) {
+      // 匹配 common.lang.xxx
+      const langMatch = code.match(/common\.lang\.(.+)/);
+      if (langMatch) {
+        return langMatch[1];
+      }
+      
+      // 匹配 ${common.lang.xxx}
+      const templateLangMatch = code.match(/\$\{common\.lang\.([^}]+)\}/);
+      if (templateLangMatch) {
+        return templateLangMatch[1];
+      }
+      
+      // 匹配带反引号的模板字符串 `${common.lang.xxx}`
+      const backquoteLangMatch = code.match(/`.*\$\{common\.lang\.([^}]+)\}.*`/);
+      if (backquoteLangMatch) {
+        return backquoteLangMatch[1];
+      }
+      
+      return null;
+    }
+    
+    /**
+     * 使用 pug-parser 和 pug-walk 分析 pug 文件中的标签
+     * @param {string} pugContent - pug 文件内容
+     * @param {string} filename - 文件名
+     * @returns {Map} 行号到标签信息的映射
+     */
+    function analyzeTagsFromPug(pugContent, filename) {
+      try {
+        const tokens = pugLexer(pugContent, { filename });
+        const ast = pugParser(tokens, { filename, src: pugContent });
+        
+        const lineTagMap = new Map();
+        
+        pugWalk(ast, function before(node) {
+          if (node.type === 'Tag' && node.line) {
+            const tagInfo = {
+              tagName: node.name,
+              line: node.line,
+              isEditable: false,
+              editableValue: "true",
+              textContent: '',
+              langPath: '',
+              hasStaticText: false,
+              hasLangText: false
+            };
+            
+            // 分析标签的子节点来确定文本内容
+            if (node.block && node.block.nodes) {
+              for (const child of node.block.nodes) {
+                // 处理Text节点（静态文本）
+                if (child.type === 'Text' && child.val && child.val.trim()) {
+                  // 检查是否在同一行还有其他动态内容
+                  const hasOtherDynamicNodes = node.block.nodes.some(sibling => 
+                    sibling !== child && 
+                    sibling.line === child.line &&
+                    (sibling.type === 'Code' || sibling.type === 'InterpolatedTag') &&
+                    sibling.val && 
+                    isDynamicContent(sibling.val)
+                  );
+                  
+                  if (!hasOtherDynamicNodes) {
+                    tagInfo.hasStaticText = true;
+                    tagInfo.textContent = child.val.trim();
+                    tagInfo.isEditable = true;
+                  }
+                }
+                
+                // 处理Code节点（插值表达式和代码块）
+                if (child.type === 'Code' && child.val) {
+                  const langPath = extractLangPath(child.val);
+                  if (langPath && !isDynamicContent(child.val)) {
+                    if (checkLangPathExists(langPath)) {
+                      tagInfo.hasLangText = true;
+                      tagInfo.langPath = langPath;
+                      tagInfo.isEditable = true;
+                      // 转换为 [us][key1][key2] 格式
+                      const pathParts = langPath.split('.');
+                      tagInfo.editableValue = `us,${pathParts.join(',')}`;
+                    }
+                  }
+                }
+              }
+            }
+            
+            // 检查节点本身是否有代码内容（对于!=语法）
+            if (node.code && node.code.val) {
+              const langPath = extractLangPath(node.code.val);
+              if (langPath && !isDynamicContent(node.code.val)) {
+                if (checkLangPathExists(langPath)) {
+                  tagInfo.hasLangText = true;
+                  tagInfo.langPath = langPath;
+                  tagInfo.isEditable = true;
+                  // 转换为 us,key1,key2 格式
+                  const pathParts = langPath.split('.');
+                  tagInfo.editableValue = `us,${pathParts.join(',')}`;
+                }
+              }
+            }
+            
+            // 将标签信息添加到行映射中
+            if (!lineTagMap.has(node.line)) {
+              lineTagMap.set(node.line, []);
+            }
+            lineTagMap.get(node.line).push(tagInfo);
+          }
+        });
+        
+        return lineTagMap;
+      } catch (error) {
+        console.error(`分析 pug 文件 ${filename} 时出错:`, error);
+        return new Map();
+      }
+    }
+    
+    /**
+     * 为 pug 文件内容添加调试属性
+     * @param {string} pugContent - pug 文件内容
+     * @param {string} relativePath - 文件相对路径
+     * @param {string} filename - 文件名
+     * @returns {string} 处理后的 pug 内容
+     */
+    function addDebugAttributesToPug(pugContent, relativePath, filename) {
+      try {
+        const lines = pugContent.split('\n');
+        const lineTagMap = analyzeTagsFromPug(pugContent, filename);
+        
+        // 定义不需要添加调试属性的标签
+        const excludeTags = new Set([
+          'head', 'title', 'meta', 'link', 'html', 'style', 'script', 
+          'base', 'noscript', 'template'
+        ]);
+        
+        // 处理每一行
+        const processedLines = lines.map((line, index) => {
+          const lineNumber = index + 1;
+          const tagsInLine = lineTagMap.get(lineNumber);
+          
+          if (!tagsInLine || tagsInLine.length === 0) {
+            return line;
+          }
+          
+          // 过滤掉不需要处理的标签
+          const visibleTags = tagsInLine.filter(tag => !excludeTags.has(tag.tagName.toLowerCase()));
+          
+          if (visibleTags.length === 0) {
+            return line;
+          }
+          
+          // 对于每个标签，添加调试属性
+          let processedLine = line;
+          
+          // 只处理第一个标签，避免处理插值表达式中的内容
+          const mainTag = visibleTags[0];
+          
+          if (mainTag) {
+            // 构建调试属性
+            const debugAttrs = [
+              `data-debug-file="${relativePath}"`,
+              `data-debug-line="${lineNumber}"`
+            ];
+            
+            // 只有可编辑的元素才添加 data-debug-editable 属性
+            if (mainTag.isEditable) {
+              debugAttrs.push(`data-debug-editable="${mainTag.editableValue}"`);
+            }
+            
+            const debugAttrsString = debugAttrs.join(', ');
+            
+            // 简化的标签处理逻辑
+            const trimmedLine = line.trim();
+            
+            // 处理隐式 div（.class 或 #id 语法）
+            if (trimmedLine.startsWith('.') || trimmedLine.startsWith('#')) {
+              const indent = line.match(/^\s*/)[0];
+              
+              // 找到选择器结束的位置
+              let selectorEndIndex = 1;
+              while (selectorEndIndex < trimmedLine.length && /[\w-]/.test(trimmedLine[selectorEndIndex])) {
+                selectorEndIndex++;
+              }
+              
+              // 检查是否已经有属性括号
+              const afterSelector = trimmedLine.substring(selectorEndIndex);
+              const parenIndex = afterSelector.indexOf('(');
+              
+              if (parenIndex !== -1) {
+                // 已经有属性括号
+                const beforeParen = trimmedLine.substring(0, selectorEndIndex + parenIndex + 1);
+                const afterFirstParen = trimmedLine.substring(selectorEndIndex + parenIndex + 1);
+                const lastParenIndex = afterFirstParen.lastIndexOf(')');
+                
+                if (lastParenIndex !== -1) {
+                  const existingAttrs = afterFirstParen.substring(0, lastParenIndex);
+                  const afterLastParen = afterFirstParen.substring(lastParenIndex);
+                  
+                  const separator = existingAttrs.trim() ? ', ' : '';
+                  processedLine = `${indent}${beforeParen}${existingAttrs}${separator}${debugAttrsString}${afterLastParen}`;
+                }
+              } else {
+                // 没有属性括号，在选择器后添加
+                const selector = trimmedLine.substring(0, selectorEndIndex);
+                const afterAttrs = trimmedLine.substring(selectorEndIndex);
+                
+                processedLine = `${indent}${selector}(${debugAttrsString})${afterAttrs}`;
+              }
+            }
+            // 处理普通标签
+            else if (trimmedLine.startsWith(mainTag.tagName)) {
+              const indent = line.match(/^\s*/)[0];
+              
+              // 找到标签名和修饰符的结束位置
+              const tagEndIndex = findTagEnd(mainTag.tagName, trimmedLine);
+              const afterTag = trimmedLine.substring(tagEndIndex);
+              
+              if (afterTag.startsWith('(')) {
+                // 已经有属性括号，需要找到正确的结束位置
+                const parenEnd = findMatchingParen(trimmedLine, tagEndIndex);
+                
+                if (parenEnd !== -1) {
+                  const tagWithModifiers = trimmedLine.substring(0, tagEndIndex);
+                  const existingAttrs = trimmedLine.substring(tagEndIndex + 1, parenEnd);
+                  const remaining = trimmedLine.substring(parenEnd + 1);
+                  
+                  const separator = existingAttrs.trim() ? ', ' : '';
+                  processedLine = `${indent}${tagWithModifiers}(${existingAttrs}${separator}${debugAttrsString})${remaining}`;
+                }
+              } else {
+                // 没有属性括号，添加新的属性括号
+                const tagWithModifiers = trimmedLine.substring(0, tagEndIndex);
+                const remaining = trimmedLine.substring(tagEndIndex);
+                
+                processedLine = `${indent}${tagWithModifiers}(${debugAttrsString})${remaining}`;
+              }
+            }
+          }
+          
+          return processedLine;
+        });
+        
+        return processedLines.join('\n');
+      } catch (error) {
+        console.error(`处理 pug 文件 ${filename} 时出错:`, error);
+        return pugContent;
+      }
+    }
+    
+    /**
+     * 找到标签名和修饰符的结束位置
+     * @param {string} tagName - 标签名
+     * @param {string} line - 行内容
+     * @returns {number} 结束位置索引
+     */
+    function findTagEnd(tagName, line) {
+      let index = tagName.length;
+      
+      // 跳过类名和ID修饰符
+      while (index < line.length) {
+        const char = line[index];
+        if (char === '.' || char === '#') {
+          index++;
+          while (index < line.length && /[\w-]/.test(line[index])) {
+            index++;
+          }
+        } else {
+          break;
+        }
+      }
+      
+      return index;
+    }
+    
+    /**
+     * 找到匹配的右括号
+     * @param {string} str - 字符串
+     * @param {number} start - 开始位置
+     * @returns {number} 匹配括号的位置，-1表示未找到
+     */
+    function findMatchingParen(str, start) {
+      let depth = 0;
+      let i = start;
+      let inString = false;
+      let stringChar = '';
+      
+      while (i < str.length) {
+        const char = str[i];
+        
+        // 处理字符串内容，避免字符串中的括号影响匹配
+        if (!inString && (char === '"' || char === "'" || char === '`')) {
+          inString = true;
+          stringChar = char;
+        } else if (inString && char === stringChar && str[i-1] !== '\\') {
+          inString = false;
+          stringChar = '';
+        } else if (!inString) {
+          if (char === '(') {
+            depth++;
+          } else if (char === ')') {
+            depth--;
+            if (depth === 0) {
+              return i;
+            }
+          }
+        }
+        i++;
+      }
+      
+      return -1; // 没有找到匹配的括号
+    }
+    
+    /**
+     * 递归处理目录中的所有 pug 文件
+     * @param {string} dir - 目录路径
+     * @param {string} baseDir - 基础目录路径（用于计算相对路径）
+     */
+    async function processPugFilesInDirectory(dir, baseDir) {
+      try {
+        const files = await fse.readdir(dir);
+        
+        for (const file of files) {
+          const fullPath = path.join(dir, file);
+          const stats = await fse.stat(fullPath);
+          
+          if (stats.isDirectory()) {
+            // 递归处理子目录
+            await processPugFilesInDirectory(fullPath, baseDir);
+          } else if (file.endsWith('.pug')) {
+            // 处理 pug 文件
+            try {
+              const relativePath = path.relative(baseDir, fullPath).replace(/\\/g, '/');
+              const pugContent = await fse.readFile(fullPath, 'utf8');
+              
+              console.log(`正在处理: ${relativePath}`);
+              
+              const processedContent = addDebugAttributesToPug(pugContent, relativePath, file);
+              
+              // 写回处理后的内容
+              await fse.writeFile(fullPath, processedContent, 'utf8');
+              
+              console.log(`已处理: ${relativePath}`);
+            } catch (error) {
+              console.error(`处理文件 ${fullPath} 时出错:`, error);
+            }
+          }
+        }
+      } catch (error) {
+        console.error(`处理目录 ${dir} 时出错:`, error);
+      }
+    }
+    
+    // 开始处理调试目录中的所有 pug 文件
+    console.log('开始为 pug 文件添加调试属性...');
+    await processPugFilesInDirectory(targetDir, targetDir);
+    
+    console.log('调试模板目录创建完成！');
+    console.log(`调试模板位置: ${targetDir}`);
+    
+  } catch (error) {
+    console.error('创建调试模板时出错:', error);
+    throw error;
+  }
+}

package/lib/paths.js

@@ -7,6 +7,7 @@ const projectRoot = process.cwd();
 
 // 定义基础路径
 const templateRoot = path.join(projectRoot, "template");
+const debugTemplateRoot = path.join(projectRoot, "template-debug");
 
 // 辅助函数，用于生成文件URL
 const fileUrl = (filePath) =>
@@ -18,12 +19,15 @@ export const paths = {
   lib: __dirname,
   config: fileUrl("config.js"),
   getData: fileUrl("getData.js"),
+  languageData: fileUrl("languageData.js"),
   pagesPugFn: fileUrl("pagesPugFn/index.js"),
   router: fileUrl("router.js"),
 
   // 模板相关路径
   template: {
     root: templateRoot,
+    debug: debugTemplateRoot,
+    debugPages: path.join(debugTemplateRoot, "pages"),
     pages: path.join(templateRoot, "pages"),
     static: path.join(templateRoot, "static"),
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pug-site-core",
-  "version": "2.0.22",
+  "version": "3.0.0",
   "main": "index.js",
   "type": "module",
   "scripts": {
@@ -13,7 +13,8 @@
     "lang": "node index.js",
     "imagemin": "node index.js",
     "build": "npm run getData && npm run buildFn",
-    "update": "npm install pug-site-core@latest"
+    "update": "npm install pug-site-core@latest",
+    "debug": "node index.js"
   },
   "keywords": [],
   "author": "xy",
@@ -43,11 +44,14 @@
     "lodash": "^4.17.21",
     "nodemon": "^3.1.4",
     "pug": "^3.0.3",
+    "pug-lexer": "^5.0.1",
+    "pug-parser": "^6.0.0",
+    "pug-walk": "^2.0.0",
     "uglify-js": "^3.19.3",
     "ws": "^8.18.0"
   },
   "license": "ISC",
-  "description": "ai优化一版pug文件组件作用域构建",
+  "description": "增加debug模板、添加abtest功能",
   "files": [
     "lib/",
     "index.js"
@@ -55,4 +59,4 @@
   "exports": {
     ".": "./index.js"
   }
-}
+}