pug-site-core 2.0.20 → 2.0.22

package/lib/devServer.js

@@ -10,6 +10,7 @@ import {
   matchESI,
   pathSymbol,
   getJsonData,
+  addTemplateScopeIsolation,
 } from "./utils.js";
 import http from "http";
 import WebSocket, { WebSocketServer } from "ws";
@@ -18,9 +19,8 @@ import { paths } from "./paths.js";
 
 const { config } = await import(paths.config);
 const pagsTemplatePath = paths.template.pages;
-const localIp = process.env._localIp || ip.address();
-const port =
-  process.env._port || (await getIdleProt(config.devServer.port, localIp));
+const localIp = ip.address();
+const port = await getIdleProt(config.devServer.port);
 process.env._port = port;
 process.env._localIp = localIp;
 
@@ -208,6 +208,7 @@ function setupRoutes(app, wss) {
               if (config.isMatchEsi) {
                 html = await matchESI(html, data);
               }
+              html = addTemplateScopeIsolation(html);
               res.send(_refreshScript + html);
             }
           }
@@ -248,7 +249,7 @@ async function matchRouter(url, language, device) {
 
 export async function startDevServer() {
   const server = createServer();
-
+  server.listen(port);
   console.log(
     "Listening:",
     `http://${localIp}:${port}`,
@@ -256,7 +257,5 @@ export async function startDevServer() {
     config.languageList[0]
   );
 
-  server.listen(port);
-
   new Worker(paths.lib + "/watchFile.js");
 }

package/lib/generate.js

@@ -7,6 +7,7 @@ import {
   sleep,
   pathSymbol,
   obfuscateJavaScript,
+  addTemplateScopeIsolation,
 } from "./utils.js";
 import _ from "lodash";
 import async from "async";
@@ -35,22 +36,26 @@ export async function compilePagesPugToFn(pugPath) {
     ) {
       throw new Error("路径不存在! 注意路径前面会自动拼接/template/pages");
     }
-
     let compiledCode = lastPugFnStr;
-
+    if (config.isScopeIsolation) {
+      // 添加作用域处理函数到编译后的代码中
+      const scopeIsolationFn = `${addTemplateScopeIsolation.toString()}`;
+      compiledCode = compiledCode + scopeIsolationFn;
+    }
     // 使用async库并发编译pug文件
     await async.eachLimit(
       // 过滤出需要编译的文件
       pagesPugFilePathArr.filter(
         (fileName) => !pugPath || pathIsSame(pugPath, fileName)
       ),
-      12, // 限制并发数为10
+      10, // 限制并发数为10
       async (fileName) => {
         const filePath = paths.resolveRoot(paths.template.pages, fileName);
-        const funName = fileName.split(pathSymbol).join("_").slice(0, -4);
+        const funName = fileName.split(pathSymbol).join("_").slice(0, -4).replace(/[-]/g, "_");
 
         // 读取并编译pug文件
         const pugValue = await fse.readFile(filePath, "utf8");
+
         const fnStr = pug.compileClient(pugValue, {
           filename: filePath,
           basedir: paths.template.root,
@@ -68,7 +73,16 @@ export async function compilePagesPugToFn(pugPath) {
         }
 
         // 只提取函数定义部分并转换为ES模块格式
-        const functionBody = fnStr.slice(functionStart, functionEnd);
+        let functionBody = fnStr.slice(functionStart, functionEnd);
+
+        if (config.isScopeIsolation) {
+          // 修改函数体，在返回HTML之前添加作用域处理
+          functionBody = functionBody.replace(
+            /return\s+(.*?);?\s*}$/,
+            `const html = $1;return addTemplateScopeIsolation(html);}`
+          );
+        }
+
         const exportFn = functionBody.replace(
           `function ${funName}(locals)`,
           `export function ${funName}(locals)`
@@ -127,7 +141,7 @@ export async function generateGetDataFn() {
     // 为每个页面注入数据获取函数
     await async.each(pagesPugFilePathArr, async (fileName) => {
       const funName =
-        "get_" + fileName.split(pathSymbol).join("_").slice(0, -4) + "_data";
+        "get_" + fileName.split(pathSymbol).join("_").slice(0, -4).replace(/[-]/g, "_") + "_data";
 
       // 使用正则表达式检查特定的数据获取函数是否存在
       const dataFnRegex = new RegExp(
@@ -310,11 +324,10 @@ export async function fetchDataToJsonFile(args) {
           });
         }
       }
-
       // 处理模板页面数据
       for (const fileName of pugFilePathList) {
         let funName =
-          "get_" + fileName.split(pathSymbol).join("_").slice(0, -4) + "_data";
+          "get_" + fileName.split(pathSymbol).join("_").slice(0, -4).replace(/[-]/g, "_") + "_data";
 
         let jsonFilePath = fileName.slice(0, -4).split(pathSymbol);
         if (!getData[funName] || typeof getData[funName] !== "function") {

package/lib/utils.js

@@ -1,8 +1,9 @@
 import fse from "fs-extra";
 import path from "path";
-import tcpPortUsed from "tcp-port-used";
 import JavaScriptObfuscator from "javascript-obfuscator";
 import { paths } from "./paths.js";
+import detectPort from "detect-port";
+
 
 const { config } = await import(paths.config);
 
@@ -82,17 +83,21 @@ export async function sleep(ms) {
 /**
  * 获取可用的端口号
  * @param {number} port - 起始端口号
- * @param {string} Ip - IP地址
  * @returns {Promise<number>} 返回可用的端口号
  */
-export async function getIdleProt(port, Ip) {
-  while (1) {
-    if (!(await tcpPortUsed.check(port, Ip))) {
-      break;
+export async function getIdleProt(port) {
+  while (true) {
+    try {
+      // 使用detect-port检查端口是否可用
+      const availablePort = await detectPort(port);
+      if (Number(availablePort) === Number(port)) {
+        return port;
+      }
+    } catch (error) {
+      console.error(`端口检查出错: ${error.message}`);
     }
     port++;
   }
-  return port;
 }
 
 /**
@@ -383,3 +388,264 @@ export async function getJsonData(jsonDataPath) {
   let jsonData = await fse.readJSON(filePath);
   return jsonData;
 }
+
+
+/**
+ * 为HTML字符串中的template标签添加作用域隔离（优化版本）
+ * @param {string} htmlString - HTML字符串
+ * @param {string} scopePrefix - 作用域前缀，默认为"xy"
+ * @param {Object} options - 配置选项
+ * @param {number} options.maxDepth - 最大递归深度，默认为10
+ * @param {boolean} options.preserveComments - 是否保留注释，默认为true
+ * @returns {string} 处理后的HTML字符串
+ */
+export function addTemplateScopeIsolation(htmlString, scopePrefix = "xy", options = {}) {
+  // 参数验证
+  if (!htmlString || typeof htmlString !== "string") {
+    return htmlString;
+  }
+
+  // 快速检查，避免不必要的处理
+  if (!htmlString.includes("<template>") || !htmlString.includes("</template>")) {
+    return htmlString;
+  }
+
+  // 配置选项
+  const config = {
+    maxDepth: options.maxDepth || 10,
+    preserveComments: options.preserveComments !== false,
+    _currentDepth: 0
+  };
+
+  // 生成唯一的作用域ID（使用更稳定的方法）
+  function generateScopeId(prefix) {
+    const timestamp = Date.now().toString(36);
+    const random = Math.random().toString(36).substring(2, 8);
+    return `${prefix}-${timestamp}-${random}`;
+  }
+
+  // 为简单选择器添加作用域（移到外部作用域）
+  function addScopeToSimpleSelector(selector, scopeId) {
+    // 处理空选择器
+    if (!selector || !selector.trim()) {
+      return selector;
+    }
+    
+    selector = selector.trim();
+    
+    // 处理伪类和伪元素（更完善的正则）
+    const pseudoMatch = selector.match(/^([^:]+?)(::?[^[]+)?$/);
+    if (pseudoMatch) {
+      const [, base, pseudo = ''] = pseudoMatch;
+      // 处理属性选择器
+      if (base.includes('[')) {
+        const attrMatch = base.match(/^([^[]+)(\[.+\])$/);
+        if (attrMatch) {
+          return `${attrMatch[1]}[data-${scopeId}]${attrMatch[2]}${pseudo}`;
+        }
+      }
+      return `${base}[data-${scopeId}]${pseudo}`;
+    }
+    
+    return `${selector}[data-${scopeId}]`;
+  }
+
+  // 处理template标签
+  function parseHTML(html, depth = 0) {
+    // 检查递归深度
+    if (depth >= config.maxDepth) {
+      console.warn(`Maximum recursion depth (${config.maxDepth}) reached in template processing`);
+      return html;
+    }
+    
+    // 使用更精确的模板匹配（避免贪婪匹配问题）
+    const templates = [];
+    let tempHtml = html;
+    let placeholder = 0;
+    
+    // 先收集所有template标签的位置和内容
+    const templateRegex = /<template([^>]*)>([\s\S]*?)<\/template>/gi;
+    let match;
+    
+    while ((match = templateRegex.exec(html)) !== null) {
+      templates.push({
+        full: match[0],
+        attributes: match[1] || '',
+        content: match[2] || '',
+        start: match.index,
+        placeholder: `__TEMPLATE_PLACEHOLDER_${placeholder++}__`
+      });
+    }
+    
+    // 从后往前替换，避免索引偏移问题
+    for (let i = templates.length - 1; i >= 0; i--) {
+      const template = templates[i];
+      const scopeId = generateScopeId(scopePrefix);
+      
+      // 处理内容
+      const processedContent = addScopeToHTML(template.content, scopeId);
+      
+      // 创建新的div标签，保留原有属性
+      const attributesStr = template.attributes ? ` ${template.attributes.trim()}` : '';
+      const newDiv = `<div data-${scopeId}=""${attributesStr}>${processedContent}</div>`;
+      
+      // 替换原始template
+      tempHtml = tempHtml.substring(0, template.start) + 
+                 newDiv + 
+                 tempHtml.substring(template.start + template.full.length);
+    }
+    
+    // 检查是否还有嵌套的template需要处理
+    if (tempHtml.includes('<template>') && depth < config.maxDepth - 1) {
+      return parseHTML(tempHtml, depth + 1);
+    }
+    
+    return tempHtml;
+  }
+
+  // 为HTML内容添加作用域属性
+  function addScopeToHTML(html, scopeId) {
+    // 处理HTML标签（改进的正则，支持自闭合标签）
+    let processedHtml = html.replace(
+      /<(\w+)([^>]*?)(\/?)>/g, 
+      (match, tagName, attributes, selfClosing) => {
+        // 跳过已经有作用域属性的标签
+        if (attributes.includes('data-v-') || 
+            attributes.includes(`data-${scopeId}`) ||
+            attributes.includes(`data-${scopePrefix}-`)) {
+          return match;
+        }
+        
+        // 处理特殊标签（不需要作用域的）
+        const skipTags = ['script', 'style', 'template'];
+        if (skipTags.includes(tagName.toLowerCase())) {
+          return match;
+        }
+        
+        // 为标签添加作用域属性
+        return `<${tagName} data-${scopeId}=""${attributes}${selfClosing}>`;
+      }
+    );
+    
+    // 处理style标签中的CSS
+    processedHtml = processedHtml.replace(
+      /<style([^>]*?)>([\s\S]*?)<\/style>/gi, 
+      (match, styleAttrs, cssContent) => {
+        // 跳过已处理的CSS
+        if (cssContent.includes(`[data-${scopeId}]`) || 
+            cssContent.includes(`[data-${scopePrefix}-`)) {
+          return match;
+        }
+        
+        const scopedCSS = addScopeToCSS(cssContent, scopeId);
+        return `<style${styleAttrs}>${scopedCSS}</style>`;
+      }
+    );
+    
+    return processedHtml;
+  }
+
+  // 为CSS添加作用域（改进版本）
+  function addScopeToCSS(cssContent, scopeId) {
+    // 保存注释
+    const comments = [];
+    let commentIndex = 0;
+    
+    if (config.preserveComments) {
+      cssContent = cssContent.replace(/\/\*[\s\S]*?\*\//g, (match) => {
+        const placeholder = `__CSS_COMMENT_${commentIndex++}__`;
+        comments.push({ placeholder, content: match });
+        return placeholder;
+      });
+    }
+    
+    // 改进的CSS规则处理
+    function processCSS(css, level = 0) {
+      if (level > 5) return css; // 防止过深的嵌套
+      
+      // 匹配CSS规则块
+      const ruleRegex = /([^{}]+)\s*\{([^{}]*(?:\{[^{}]*\}[^{}]*)*)\}/g;
+      
+      return css.replace(ruleRegex, (match, selectors, content) => {
+        const trimmedSelectors = selectors.trim();
+        
+        // 处理@规则
+        if (trimmedSelectors.startsWith('@')) {
+          // @keyframes不需要作用域
+          if (trimmedSelectors.startsWith('@keyframes')) {
+            return match;
+          }
+          
+          // @media, @supports等需要递归处理内部规则
+          if (content.includes('{')) {
+            const processedContent = processCSS(content, level + 1);
+            return `${selectors} {${processedContent}}`;
+          }
+          
+          return match;
+        }
+        
+        // 处理普通选择器
+        const processedSelectors = trimmedSelectors
+          .split(',')
+          .map(selector => {
+            selector = selector.trim();
+            
+            // 跳过特殊情况
+            if (!selector || 
+                selector.startsWith('@') || 
+                /^(from|to|\d+%)$/.test(selector) ||
+                selector.includes(`[data-${scopeId}]`)) {
+              return selector;
+            }
+            
+            // 清理现有的作用域属性
+            selector = selector.replace(/\[data-[a-z0-9-]+\]/gi, '').trim();
+            
+            // 处理复杂选择器
+            const selectorParts = selector.split(/\s+/);
+            
+            // 处理第一个选择器部分
+            if (selectorParts.length > 0) {
+              // 处理组合选择器（如 .class1.class2）
+              const firstPart = selectorParts[0];
+              const combinedSelectors = firstPart.split(/(?=[.#[])/);
+              
+              if (combinedSelectors.length > 1) {
+                // 在第一个实际选择器后添加作用域
+                combinedSelectors[0] = addScopeToSimpleSelector(combinedSelectors[0], scopeId);
+                selectorParts[0] = combinedSelectors.join('');
+              } else {
+                selectorParts[0] = addScopeToSimpleSelector(firstPart, scopeId);
+              }
+            }
+            
+            return selectorParts.join(' ');
+          })
+          .join(', ');
+        
+        return `${processedSelectors} {${content}}`;
+      });
+    }
+    
+    // 处理CSS
+    let processedCSS = processCSS(cssContent);
+    
+    // 恢复注释
+    if (config.preserveComments) {
+      comments.forEach(({ placeholder, content }) => {
+        processedCSS = processedCSS.replace(placeholder, content);
+      });
+    }
+    
+    return processedCSS;
+  }
+
+  // 开始处理
+  try {
+    return parseHTML(htmlString);
+  } catch (error) {
+    console.error('Error in addTemplateScopeIsolation:', error);
+    return htmlString; // 出错时返回原始内容
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pug-site-core",
-  "version": "2.0.20",
+  "version": "2.0.22",
   "main": "index.js",
   "type": "module",
   "scripts": {
@@ -21,7 +21,10 @@
     "@google-cloud/translate": "^8.5.0",
     "async": "^3.2.6",
     "axios": "^1.7.7",
+    "cheerio": "^1.0.0",
     "chokidar": "^3.6.0",
+    "css": "^3.0.0",
+    "detect-port": "^2.1.0",
     "express": "^4.19.2",
     "express-useragent": "^1.0.15",
     "fs-extra": "^11.2.0",
@@ -37,16 +40,14 @@
     "jstransformer-autoprefixer": "^2.0.0",
     "jstransformer-less": "^2.3.0",
     "jstransformer-scss": "^2.0.0",
-    "less": "^4.2.0",
     "lodash": "^4.17.21",
     "nodemon": "^3.1.4",
     "pug": "^3.0.3",
-    "tcp-port-used": "^1.0.2",
     "uglify-js": "^3.19.3",
     "ws": "^8.18.0"
   },
   "license": "ISC",
-  "description": "再次修复错误的删除文件问题",
+  "description": "ai优化一版pug文件组件作用域构建",
   "files": [
     "lib/",
     "index.js"