vite-uni-dev-tool 0.0.20 → 0.0.22

package/dist/v3/SourceCode/parseCode.d.ts

@@ -0,0 +1,27 @@
+type Word = {
+    /** 字符 */
+    word: string;
+    /** css 样式 */
+    class: string;
+    /** 分类
+     * - space: 空格
+     * - bracket: 括号
+     * - quotation: 引号
+     * - string: 字符串
+     * - function: 函数
+     * - attribute: 属性
+     * - operator: 操作符
+     * - symbol: 符号
+     * - keyword: 关键字
+     * - other: 其他
+     */
+    type: 'space' | 'bracket' | 'quotation' | 'string' | 'function' | 'attribute' | 'operator' | 'symbol' | 'keyword' | 'other';
+};
+export type LineInfo = {
+    type: 'empty' | 'tag' | 'script' | 'style' | 'note';
+    class: string;
+    words: Word[];
+};
+export declare function parseCode(code: string): LineInfo[];
+export {};
+//# sourceMappingURL=parseCode.d.ts.map

package/dist/v3/SourceCode/parseCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseCode.d.ts","sourceRoot":"","sources":["../../../dev/v3/SourceCode/parseCode.ts"],"names":[],"mappings":"AA0IA,KAAK,IAAI,GAAG;IACV,SAAS;IACT,IAAI,EAAE,MAAM,CAAC;IACb,aAAa;IACb,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;OAWG;IACH,IAAI,EACA,OAAO,GACP,SAAS,GACT,WAAW,GACX,QAAQ,GACR,UAAU,GACV,WAAW,GACX,UAAU,GACV,QAAQ,GACR,SAAS,GACT,OAAO,CAAC;CACb,CAAC;AAEF,MAAM,MAAM,QAAQ,GAAG;IACrB,IAAI,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAobF,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,CAkClD"}

package/dist/v3/SourceCode/parseCode.ts

@@ -0,0 +1,643 @@
+/** 行前空格匹配 */
+const startSpaceReg = /^(\s*)/;
+
+/** 括号 */
+const bracketList = ['<', '>', '(', ')', '{', '}', '[', ']'];
+
+/** 引号 */
+const quotationList = ["'", '"', '‘', '’', '`'];
+
+/** 操作符 */
+const operatorList = ['+', '-', '*', '/', '%', '=', '!', '&'];
+
+/** 符号 */
+const symbolList = [
+  ' ',
+  '<',
+  '>',
+  '(',
+  ')',
+  '{',
+  '}',
+  '[',
+  ']',
+  ';',
+  ':',
+  ',',
+  '.',
+  '=',
+  '?',
+  '+',
+  '-',
+  '*',
+  '/',
+  '\\',
+  "'",
+  '"',
+  '@',
+  '#',
+  '$',
+];
+
+/** 关键字 */
+const keywordList = [
+  // JavaScript 关键字
+  'var',
+  'let',
+  'const',
+  'function',
+  'class',
+  'import',
+  'export',
+  'from',
+  'as',
+  'this',
+  'super',
+  'console',
+  'window',
+  'document',
+  'if',
+  'else',
+  'for',
+  'while',
+  'do',
+  'switch',
+  'case',
+  'default',
+  'break',
+  'continue',
+  'return',
+  'try',
+  'catch',
+  'finally',
+  'throw',
+  'new',
+  'delete',
+  'typeof',
+  'instanceof',
+  'in',
+  'of',
+  'void',
+  'yield',
+  'await',
+  'async',
+  'extends',
+  'implements',
+  'interface',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'static',
+  'yield',
+  'null',
+  'undefined',
+  'true',
+  'false',
+  'get',
+
+  // Vue 特定关键字
+  // 'ref',
+  // 'reactive',
+  // 'computed',
+  // 'watch',
+  // 'watchEffect',
+  // 'provide',
+  // 'inject',
+  // 'setup',
+  // 'onMounted',
+  // 'onUnmounted',
+  // 'onUpdated',
+  // 'onBeforeMount',
+  // 'onBeforeUpdate',
+  // 'onBeforeUnmount',
+  // 'nextTick',
+  // 'defineComponent',
+  // 'defineProps',
+  // 'defineEmits',
+  // 'defineExpose',
+  // 'withDefaults',
+
+  // // UniApp 特定关键字
+  // 'uni',
+  // 'getCurrentInstance',
+  // 'onLoad',
+  // 'onShow',
+  // 'onReady',
+  // 'onHide',
+  // 'onUnload',
+  // 'onPullDownRefresh',
+  // 'onReachBottom',
+  // 'onShareAppMessage',
+  // 'onShareTimeline',
+  // 'onAddToFavorites',
+  // 'onPageScroll',
+  // 'onResize',
+  // 'onTabItemTap',
+];
+
+type Word = {
+  /** 字符 */
+  word: string;
+  /** css 样式 */
+  class: string;
+  /** 分类
+   * - space: 空格
+   * - bracket: 括号
+   * - quotation: 引号
+   * - string: 字符串
+   * - function: 函数
+   * - attribute: 属性
+   * - operator: 操作符
+   * - symbol: 符号
+   * - keyword: 关键字
+   * - other: 其他
+   */
+  type:
+    | 'space'
+    | 'bracket'
+    | 'quotation'
+    | 'string'
+    | 'function'
+    | 'attribute'
+    | 'operator'
+    | 'symbol'
+    | 'keyword'
+    | 'other';
+};
+
+export type LineInfo = {
+  type: 'empty' | 'tag' | 'script' | 'style' | 'note';
+  class: string;
+  words: Word[];
+};
+
+const scriptStartReg = /<script(\s[^>]*)?>/i;
+const scriptEndReg = /<\/script>/i;
+
+const styleStartReg = /<style(\s[^>]*)?>/i;
+const styleEndReg = /<\/style>/i;
+
+const preClass = 'source-code-pre';
+
+/**
+ * 获取代码中所有 <script> 块的起止行号（不包含标签本身）
+ * @param lines 源码按行分割后的字符串数组
+ * @returns 起止行号组成的二维数组，每个子数组为 [startRow, endRow]
+ */
+function getScriptStartAndEndRow(lines: string[]): number[][] {
+  // 如果没有找到任何<script>标签，则认为整段代码都是script代码
+  let hasScriptTags = false;
+  const groups: number[][] = [];
+  let currentStart: number | null = null; // 记录当前 <script> 开始行号
+
+  lines.forEach((line, index) => {
+    if (scriptStartReg.test(line)) {
+      hasScriptTags = true;
+      // 遇到开始标签，记录下一行作为内容开始位置
+      currentStart = index + 1;
+    } else if (scriptEndReg.test(line) && currentStart !== null) {
+      // 遇到结束标签且已有开始位置，则记录为一个有效块
+      // 如果开始行大于等于结束行（即<script></script>在同一行或相邻行），则不构成有效内容区间
+      if (currentStart <= index - 1) {
+        groups.push([currentStart, index - 1]); // 结束行为上一行（排除 </script>）
+      }
+      currentStart = null; // 重置等待下一个 <script>
+    }
+  });
+
+  // 如果完全没有<script>标签，则整段代码都算作script内容
+  if (!hasScriptTags && lines.length > 0) {
+    // 整个文件都是script代码
+    groups.push([0, lines.length - 1]);
+  }
+
+  return groups;
+}
+
+/**
+ * 获取代码中所有 <style> 块的起止行号（不包含标签本身）
+ * @param lines 源码按行分割后的字符串数组
+ * @returns 起止行号组成的二维数组，每个子数组为 [startRow, endRow]
+ */
+
+function getStyleStartAndEndRow(lines: string[]): number[][] {
+  const groups: number[][] = [];
+  let currentStart: number | null = null; // 记录当前 <style> 开始行号
+
+  lines.forEach((line, index) => {
+    if (styleStartReg.test(line)) {
+      // 遇到开始标签，记录下一行作为内容开始位置
+      currentStart = index + 1;
+    } else if (styleEndReg.test(line) && currentStart !== null) {
+      // 遇到结束标签且已有开始位置，则记录为一个有效块
+      // 如果开始行大于等于结束行（即<style></style>在同一行或相邻行），则不构成有效内容区间
+      if (currentStart <= index - 1) {
+        groups.push([currentStart, index - 1]); // 结束行为上一行（排除 </style>）
+      }
+      currentStart = null; // 重置等待下一个 <style>
+    }
+  });
+
+  return groups;
+}
+
+/**
+ * 获取代码中所有注释块的起止行号
+ * @param lines 源码按行分割后的字符串数组
+ * @returns 起止行号组成的二维数组，每个子数组为 [startRow, endRow]
+ */
+function getNoteStartAndEndRow(lines: string[]): number[][] {
+  const groups: number[][] = [];
+  let currentStart: number | null = null; // 记录当前注释块开始行号
+  let inMultiLineComment = false; // 是否在多行注释 /* */ 中
+  let inHtmlComment = false; // 是否在HTML注释 <!-- --> 中
+
+  lines.forEach((line, index) => {
+    const trimLine = line.trim();
+
+    // 处理 /* */ 多行注释
+    if (!inMultiLineComment && !inHtmlComment && trimLine.startsWith('/*')) {
+      inMultiLineComment = true;
+      currentStart = index;
+
+      // 检查是否在同一行内结束多行注释
+      if (
+        trimLine.includes('*/') &&
+        trimLine.indexOf('*/') > trimLine.indexOf('/*')
+      ) {
+        groups.push([currentStart, index]);
+        inMultiLineComment = false;
+        currentStart = null;
+      }
+    } else if (inMultiLineComment && trimLine.includes('*/')) {
+      // 结束多行注释
+      groups.push([currentStart!, index]);
+      inMultiLineComment = false;
+      currentStart = null;
+    }
+    // 处理 <!-- --> HTML注释
+    else if (
+      !inMultiLineComment &&
+      !inHtmlComment &&
+      trimLine.startsWith('<!--')
+    ) {
+      inHtmlComment = true;
+      currentStart = index;
+
+      // 检查是否在同一行内结束HTML注释
+      if (
+        trimLine.includes('-->') &&
+        trimLine.indexOf('-->') > trimLine.indexOf('<!--')
+      ) {
+        groups.push([currentStart, index]);
+        inHtmlComment = false;
+        currentStart = null;
+      }
+    } else if (inHtmlComment && trimLine.includes('-->')) {
+      // 结束HTML注释
+      groups.push([currentStart!, index]);
+      inHtmlComment = false;
+      currentStart = null;
+    }
+    // 处理单行注释 // 或 /** */
+    else if (
+      !inMultiLineComment &&
+      !inHtmlComment &&
+      trimLine.startsWith('//')
+    ) {
+      groups.push([index, index]);
+    }
+  });
+
+  return groups;
+}
+
+/**
+ * 获取代码中的 标签起始行，不包含script 中的内容，不包含style中的内容
+ * @param lines 源码按行分割后的字符串数组
+ * @returns 包含标签、脚本、样式和注释范围的对象
+ */
+function getTagStartAndEndRow(lines: string[]): {
+  tagRanges: number[][];
+  scriptRanges: number[][];
+  styleRanges: number[][];
+  noteRanges: number[][];
+} {
+  // 先找出 script 和 style 的内容区域
+  const scriptRanges = getScriptStartAndEndRow(lines);
+  const styleRanges = getStyleStartAndEndRow(lines);
+  const noteRanges = getNoteStartAndEndRow(lines);
+
+  // 合并并排序所有需要排除的区间
+  const excludeRanges = [...scriptRanges, ...styleRanges, ...noteRanges].sort(
+    (a, b) => a[0] - b[0],
+  );
+
+  const tagRanges: number[][] = [];
+
+  if (excludeRanges.length === 0) {
+    // 如果没有 script 或 style 块，则整个文件都是 html 区域
+    if (lines.length > 0) {
+      tagRanges.push([0, lines.length - 1]);
+    }
+  } else {
+    let currentStart = 0;
+
+    for (let i = 0; i < excludeRanges.length; i++) {
+      const [start, end] = excludeRanges[i];
+
+      // 检查当前起始点到这个排除区间的开始是否有内容
+      if (currentStart <= start - 1) {
+        tagRanges.push([currentStart, start - 1]);
+      }
+
+      // 更新下一个可能的起始点为排除区间之后
+      currentStart = end + 1;
+    }
+
+    // 检查最后一个排除区间结束后是否还有剩余内容
+    if (currentStart < lines.length) {
+      tagRanges.push([currentStart, lines.length - 1]);
+    }
+  }
+
+  return {
+    tagRanges,
+    scriptRanges,
+    styleRanges,
+    noteRanges,
+  };
+}
+
+/**
+ * 获取指定行号对应的代码块类型
+ *
+ * @param {number} index
+ * @param {{
+ *     tagRanges: number[][];
+ *     scriptRanges: number[][];
+ *     styleRanges: number[][];
+ *   }} {
+ *     tagRanges,
+ *     scriptRanges,
+ *     styleRanges,
+ *   }
+ * @return {*}
+ */
+function getLineIndexType(
+  index: number,
+  {
+    tagRanges,
+    scriptRanges,
+    styleRanges,
+    noteRanges,
+  }: {
+    tagRanges: number[][];
+    scriptRanges: number[][];
+    styleRanges: number[][];
+    noteRanges: number[][];
+  },
+) {
+  // 检查是否在注释区间内
+  for (const [start, end] of noteRanges) {
+    if (index >= start && index <= end) {
+      return 'note';
+    }
+  }
+
+  // 检查是否在 script 区间内
+  for (const [start, end] of scriptRanges) {
+    if (index >= start && index <= end) {
+      return 'script';
+    }
+  }
+
+  // 检查是否在 style 区间内
+  for (const [start, end] of styleRanges) {
+    if (index >= start && index <= end) {
+      return 'style';
+    }
+  }
+
+  // 检查是否在 tag 区间内
+  for (const [start, end] of tagRanges) {
+    if (index >= start && index <= end) {
+      return 'tag';
+    }
+  }
+
+  return 'empty';
+}
+
+/**
+ * 获取代码中的单词信息
+ *
+ * TODO: 属性 ， 方法
+ *
+ * @param {string[]} words
+ * @return {*}  {Word[]}
+ */
+function getWordsInfo(words: string[]): Word[] {
+  let quotation = '';
+  return words.map((w, index) => {
+    // 空格
+    const isSpace = w === ' ';
+    if (isSpace) {
+      return {
+        word: w,
+        type: 'space',
+        class: `${preClass}-space`,
+      };
+    }
+
+    // 箭头函数
+    const isArrow =
+      (w === '=' && words?.[index + 1] === '>') ||
+      (w === '>' && words?.[index - 1] === '=');
+    if (isArrow) {
+      return {
+        word: w,
+        type: 'keyword',
+        class: `${preClass}-keyword`,
+      };
+    }
+
+    // 括号
+    const isBracket = bracketList.includes(w);
+    if (isBracket) {
+      return {
+        word: w,
+        type: 'bracket',
+        class: `${preClass}-bracket`,
+      };
+    }
+
+    // 引号
+    const isQuotation = quotationList.includes(w);
+    if (isQuotation) {
+      quotation = quotation !== '' && quotation === w ? '' : w;
+      return {
+        word: w,
+        type: 'quotation',
+        class: `${preClass}-quotation`,
+      };
+    }
+
+    if (quotation != '') {
+      return {
+        word: w,
+        type: 'string',
+        class: `${preClass}-string`,
+      };
+    }
+
+    // 字符串
+    const isStr = quotationList.includes(words?.[index - 1]);
+    if (isStr) {
+      return {
+        word: w,
+        type: 'string',
+        class: `${preClass}-string`,
+      };
+    }
+
+    // 函数
+    const isFunction =
+      (words?.[index - 1] === ' ' && words?.[index - 2] === 'function') ||
+      words?.[index + 1] === '(';
+    if (isFunction) {
+      return {
+        word: w,
+        type: 'function',
+        class: `${preClass}-function`,
+      };
+    }
+
+    const preW = symbolList.includes(words?.[index - 1]);
+    const isAttribute = words?.[index + 1] === '.' && !preW;
+    if (isAttribute) {
+      return {
+        word: w,
+        type: 'attribute',
+        class: `${preClass}-attribute`,
+      };
+    }
+
+    // 操作符
+    const isOperator = operatorList.includes(w);
+    if (isOperator) {
+      return {
+        word: w,
+        type: 'operator',
+        class: `${preClass}-operator`,
+      };
+    }
+
+    // 符号
+    const isSymbol = symbolList.includes(w);
+    if (isSymbol) {
+      return {
+        word: w,
+        type: 'symbol',
+        class: `${preClass}-symbol`,
+      };
+    }
+
+    // 关键字
+    const isKeyword =
+      keywordList.includes(w) &&
+      (words?.[index + 1] === ' ' || words?.[index + 1] === ';');
+    if (isKeyword) {
+      return {
+        word: w,
+        type: 'keyword',
+        class: `${preClass}-keyword`,
+      };
+    }
+
+    // 其他
+    return {
+      word: w,
+      type: 'other',
+      class: `${preClass}-other`,
+    };
+  });
+}
+
+/**
+ * 按符号列表分割字符串
+ * @param lineTrim 需要分割的字符串
+ * @param symbols 符号列表
+ * @returns 分割后的词元数组
+/**
+ *
+ *
+ * @param {string} lineTrim
+ * @param {string[]} symbols
+ * @return {*}  {string[]}
+ */
+function splitBySymbols(lineTrim: string, symbols: string[]): string[] {
+  if (!lineTrim) return [];
+
+  // 跳过注释行的处理
+  if (
+    lineTrim.startsWith('/*') ||
+    lineTrim.startsWith('*') ||
+    lineTrim.startsWith('//') ||
+    lineTrim.startsWith('<!--') ||
+    lineTrim.startsWith('-->') ||
+    lineTrim.length > 5000
+  ) {
+    return [lineTrim];
+  }
+
+  // 转义特殊字符并构建正则表达式
+  const escapedSymbols = symbols.map((s) =>
+    s.replace(/[.*+?^${}()|[\]\\@\$]/g, '\\$&'),
+  );
+  const regexPattern = `(${escapedSymbols.join('|')})`;
+  const regex = new RegExp(regexPattern, 'g');
+
+  // 使用正则表达式分割字符串并保留分隔符
+  const parts = lineTrim.split(regex);
+
+  // 过滤掉空字符串并返回结果
+  return parts.filter((part) => part !== '');
+}
+
+export function parseCode(code: string): LineInfo[] {
+  // 按行进行重新解析
+  const lines = code.split('\n');
+
+  const { tagRanges, scriptRanges, styleRanges, noteRanges } =
+    getTagStartAndEndRow(lines);
+
+  const parseLine = lines.map((line, index) => {
+    // 解析行之前的空格
+    const space =
+      line?.length < 500
+        ? (line.match(startSpaceReg)?.[1] || '')?.split('')
+        : [];
+    // 获取行类型
+
+    const type = getLineIndexType(index, {
+      tagRanges,
+      scriptRanges,
+      styleRanges,
+      noteRanges,
+    });
+
+    const lineTrim = line.trim();
+
+    // 按符号分割行内容
+    const segments = splitBySymbols(lineTrim, symbolList);
+
+    const words = getWordsInfo([...space, ...segments]);
+
+    const lineInfo: LineInfo = { type, words, class: `${preClass}-${type}` };
+    return lineInfo;
+  });
+
+  return parseLine;
+}

package/dist/v3/Tag/index.vue

@@ -59,6 +59,7 @@ function onClick(event: MouseEvent) {
   border: 1px solid var(--dev-tool-success-color);
 }
 .tag-error {
+  color: #fff;
   background-color: var(--dev-tool-error-color);
   border: 1px solid var(--dev-tool-error-color);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-uni-dev-tool",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试",
   "keywords": [
     "vite",