vite-uni-dev-tool 1.0.0 → 1.2.0

package/dist/v3/{SourceCode → DevTool/components/SourceCode}/parseCode.ts

@@ -1,49 +1,6 @@
-/** 行前空格匹配 */
-const startSpaceReg = /^(\s*)/;
-
-/** 括号 */
-const bracketList = ['<', '>', '(', ')', '{', '}', '[', ']'];
-
-/** 引号 */
-const quotationList = ["'", '"', '‘', '’', '`'];
-
 /** 操作符 */
 const operatorList = ['+', '-', '*', '/', '%', '=', '!', '&'];
 
-/** 符号 */
-const symbolList = [
-  ' ',
-  '<',
-  '>',
-  '(',
-  ')',
-  '{',
-  '}',
-  '[',
-  ']',
-  ';',
-  ':',
-  ',',
-  '.',
-  '=',
-  '?',
-  '+',
-  '-',
-  '*',
-  '/',
-  '\\',
-  "'",
-  '"',
-  '@',
-  '#',
-  '$',
-  '!',
-  '&',
-  '|',
-  '^',
-  '%',
-];
-
 /** 关键字 */
 const keywordList = [
   // JavaScript 关键字
@@ -466,202 +423,137 @@ function getLineIndexType(
 }
 
 /**
- * 获取代码中的单词信息
- *
- * TODO: 属性 ， 方法
- *
- * @param {string[]} words
- * @return {*}  {Word[]}
+ * 将整行代码字符串分词，带有更精细的词法分析，大大减少DOM元素数量
  */
-function getWordsInfo(words: string[]): Word[] {
-  let quotation = '';
-  return words.map((w, index) => {
-    // 空格
-    const isSpace = w === ' ';
-    if (isSpace) {
-      return {
-        word: w,
+function tokenizeLine(lineStr: string): Word[] {
+  let remain = lineStr;
+  const words: Word[] = [];
+  let prevWord = '';
+
+  while (remain.length > 0) {
+    let match;
+
+    // Space
+    match = remain.match(/^(\s+)/);
+    if (match) {
+      // Use different class for inline spaces to prevent indent lines appearing in middle of code
+      words.push({
+        word: match[0],
         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`,
-      };
+        class: `${preClass}-space-inline`,
+      });
+      remain = remain.slice(match[0].length);
+      continue;
     }
 
-    // 括号
-    const isBracket = bracketList.includes(w);
-    if (isBracket) {
-      return {
-        word: w,
-        type: 'bracket',
-        class: `${preClass}-bracket`,
-      };
+    // Comment (inline)
+    match = remain.match(/^(\/\/.*)/);
+    if (match) {
+      words.push({ word: match[0], type: 'symbol', class: `${preClass}-note` });
+      remain = remain.slice(match[0].length);
+      continue;
     }
 
-    // 引号
-    const isQuotation = quotationList.includes(w);
-    if (isQuotation) {
-      quotation = quotation !== '' && quotation === w ? '' : w;
-      return {
-        word: w,
-        type: 'quotation',
-        class: `${preClass}-quotation`,
-      };
+    // HTML Comment
+    match = remain.match(/^(<!--.*?-->|<!--.*|.*-->)/);
+    if (match) {
+      words.push({ word: match[0], type: 'symbol', class: `${preClass}-note` });
+      remain = remain.slice(match[0].length);
+      continue;
     }
 
-    if (quotation != '') {
-      return {
-        word: w,
+    // Strings (with escapes)
+    match = remain.match(
+      /^("[^"\\]*(\\.[^"\\]*)*"|'[^'\\]*(\\.[^'\\]*)*'|`[^`\\]*(\\.[^`\\]*)*`)/,
+    );
+    if (match) {
+      words.push({
+        word: match[0],
         type: 'string',
         class: `${preClass}-string`,
-      };
+      });
+      remain = remain.slice(match[0].length);
+      prevWord = '""';
+      continue;
     }
 
-    // 字符串 (处理引号后的第一个词)
-    const isStr = quotationList.includes(words?.[index - 1]);
-    if (isStr) {
-      return {
-        word: w,
-        type: 'string',
-        class: `${preClass}-string`,
-      };
+    // Identifiers & Keywords
+    match = remain.match(/^[a-zA-Z_$@][a-zA-Z0-9_$-]*/);
+    if (match) {
+      const word = match[0];
+      let type: Word['type'] = 'other';
+      let cls = `${preClass}-other`;
+
+      const nextCharMatch = remain.slice(word.length).match(/^\s*(.)/);
+      const nextChar = nextCharMatch ? nextCharMatch[1] : '';
+
+      if (keywordList.includes(word)) {
+        type = 'keyword';
+        cls = `${preClass}-keyword`;
+      } else if (builtInList.includes(word)) {
+        type = 'builtin';
+        cls = `${preClass}-builtin`;
+      } else if (prevWord === '.') {
+        type = 'attribute';
+        cls = `${preClass}-attribute`;
+      } else if (prevWord === '<' || prevWord === '</') {
+        type = 'keyword';
+        cls = `${preClass}-keyword`; // Tag name
+      } else if (nextChar === '(') {
+        type = 'function';
+        cls = `${preClass}-function`;
+      } else if (word.startsWith('v-') || word.startsWith('@')) {
+        type = 'keyword';
+        cls = `${preClass}-keyword`; // Vue directives
+      }
+
+      words.push({ word, type, class: cls });
+      prevWord = word;
+      remain = remain.slice(word.length);
+      continue;
     }
 
-    // 数字
-    const isNumber =
-      /^\d+(\.\d+)?(e\d+)?$/i.test(w) || /^0x[0-9a-f]+$/i.test(w);
-    if (isNumber) {
-      return {
-        word: w,
+    // Numbers
+    match = remain.match(
+      /^(0[xX][0-9a-fA-F]+|\d*\.\d+([eE][+-]?\d+)?|\d+([eE][+-]?\d+)?|\d+n)/,
+    );
+    if (match) {
+      words.push({
+        word: match[0],
         type: 'number',
         class: `${preClass}-number`,
-      };
-    }
-
-    // 函数
-    const isFunc =
-      (words?.[index - 1] === ' ' && words?.[index - 2] === 'function') ||
-      words?.[index + 1] === '(' ||
-      (words?.[index + 1] === ' ' && words?.[index + 2] === '(');
-    if (isFunc && !keywordList.includes(w)) {
-      return {
-        word: w,
-        type: 'function',
-        class: `${preClass}-function`,
-      };
-    }
-
-    // 属性提取
-    const preW = symbolList.includes(words?.[index - 1]);
-    const isAttribute =
-      (words?.[index + 1] === '.' || (words?.[index - 1] === '.' && !preW)) &&
-      !isNumber;
-    if (isAttribute) {
-      return {
-        word: w,
-        type: 'attribute',
-        class: `${preClass}-attribute`,
-      };
-    }
-
-    // 关键字
-    const isKeyword = keywordList.includes(w);
-    if (isKeyword) {
-      return {
-        word: w,
-        type: 'keyword',
-        class: `${preClass}-keyword`,
-      };
-    }
-
-    // 内置对象
-    const isBuiltin = builtInList.includes(w);
-    if (isBuiltin) {
-      return {
-        word: w,
-        type: 'builtin',
-        class: `${preClass}-builtin`,
-      };
+      });
+      remain = remain.slice(match[0].length);
+      prevWord = '0';
+      continue;
     }
 
-    // 操作符
-    const isOperator = operatorList.includes(w);
-    if (isOperator) {
-      return {
-        word: w,
-        type: 'operator',
-        class: `${preClass}-operator`,
-      };
-    }
+    // Multi-char symbols and Operators
+    match = remain.match(
+      /^(===|!==|==|!=|>=|<=|=>|\+\+|--|\+=|-=|\*=|\/=|\|\||&&|\?\.|<\/?|\/>|[{}()[\].,;:?+*/%&|^!=<>~#\\@])/,
+    );
+    if (match) {
+      const word = match[0];
+      let cls = `${preClass}-symbol`;
+      if (['<', '>', '(', ')', '{', '}', '[', ']'].includes(word[0])) {
+        cls = `${preClass}-bracket`;
+      } else if (operatorList.includes(word[0]) || word.length > 1) {
+        cls = `${preClass}-operator`;
+      }
 
-    // 符号
-    const isSymbol = symbolList.includes(w);
-    if (isSymbol) {
-      return {
-        word: w,
-        type: 'symbol',
-        class: `${preClass}-symbol`,
-      };
+      words.push({ word, type: 'symbol', class: cls });
+      prevWord = word;
+      remain = remain.slice(word.length);
+      continue;
     }
 
-    // 其他
-    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];
+    // Fallback one char
+    const word = remain[0];
+    words.push({ word, type: 'other', class: `${preClass}-other` });
+    prevWord = word;
+    remain = remain.slice(1);
   }
-
-  // 转义特殊字符并构建正则表达式
-  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 !== '');
+  return words;
 }
 
 export function parseCode(code: string): LineInfo[] {
@@ -672,13 +564,7 @@ export function parseCode(code: string): LineInfo[] {
     getTagStartAndEndRow(lines);
 
   const parseLine = lines.map((line, index) => {
-    // 解析行之前的空格
-    const space =
-      line?.length < 500
-        ? (line.match(startSpaceReg)?.[1] || '')?.split('')
-        : [];
     // 获取行类型
-
     const type = getLineIndexType(index, {
       tagRanges,
       scriptRanges,
@@ -686,12 +572,34 @@ export function parseCode(code: string): LineInfo[] {
       noteRanges,
     });
 
-    const lineTrim = line.trim();
-
-    // 按符号分割行内容
-    const segments = splitBySymbols(lineTrim, symbolList);
+    // 解析行之前的空格，为了保证准确的缩进格式
+    const spaceMatch = line.match(/^(\s*)/);
+    const spacePrefix = spaceMatch ? spaceMatch[0] : '';
+    const lineTrim = line.slice(spacePrefix.length);
+
+    const words: Word[] = [];
+    if (spacePrefix) {
+      // Chunk spaces by 2 to add indentation guide lines
+      for (let i = 0; i < spacePrefix.length; i += 2) {
+        words.push({
+          word: spacePrefix.slice(i, i + 2),
+          type: 'space',
+          class: `${preClass}-space`,
+        });
+      }
+    }
 
-    const words = getWordsInfo([...space, ...segments]);
+    if (type === 'note') {
+      if (lineTrim) {
+        words.push({
+          word: lineTrim,
+          type: 'symbol',
+          class: `${preClass}-note`,
+        });
+      }
+    } else {
+      words.push(...tokenizeLine(lineTrim));
+    }
 
     const lineInfo: LineInfo = { type, words, class: `${preClass}-${type}` };
     return lineInfo;

package/dist/v3/{StorageList → DevTool/components/StorageList}/index.vue

@@ -46,14 +46,14 @@
   </view>
 </template>
 <script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Empty from '../Empty/index.vue';
-import CircularButton from '../CircularButton/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import type { DevTool } from '../../type';
+import Tag from '../../../components/Tag/index.vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
+import FilterInput from '../../../components/FilterInput/index.vue';
+import type { DevTool } from '../../../../type';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../i18n';
+import { useI18n } from '../../../../i18n';
 import { computed } from 'vue';
 
 const { t } = useI18n();

package/dist/v3/{TransferList → DevTool/components/TransferList}/TransferDetail.vue

@@ -104,13 +104,13 @@
 </template>
 <script lang="ts" setup>
 import { ref, computed } from 'vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import CircularButton from '../CircularButton/index.vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Tag from '../../../components/Tag/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 const props = defineProps<{

package/dist/v3/{TransferList → DevTool/components/TransferList}/TransferItem.vue

@@ -54,10 +54,10 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue';
-import Tag from '../Tag/index.vue';
-import { formatDate, isMockWX } from '../../utils';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
+import Tag from '../../../components/Tag/index.vue';
+import { formatDate, isMockWX } from '../../../../utils';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 const props = defineProps<{

package/dist/v3/{TransferList → DevTool/components/TransferList}/index.vue

@@ -56,16 +56,16 @@
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-import Tag from '../Tag/index.vue';
+import Tag from '../../../components/Tag/index.vue';
 import TransferItem from './TransferItem.vue';
-import Empty from '../Empty/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import Pick from '../Pick/index.vue';
-import type { DevTool } from '../../type';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
+import Empty from '../../../components/Empty/index.vue';
+import FilterInput from '../../../components/FilterInput/index.vue';
+import Pick from '../../../components/Pick/index.vue';
+import type { DevTool } from '../../../../type';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../i18n';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 

package/dist/v3/{UniEvent → DevTool/components/UniEvent}/UniEventItem.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="uni-event-item">
-    <view class="uni-event-item-row"> {{ eventItem.eventName }} </view>
+    <view class="uni-event-item-row">{{ eventItem.eventName }}</view>
     <view class="uni-event-item-row">
       <Tag mode="info" v-if="eventItem.type == 'on'">
         {{ eventItem.type }}
@@ -14,22 +14,21 @@
       <Tag mode="error" v-if="eventItem.type == 'off'">
         {{ eventItem.type }}
       </Tag>
-      <view class="uni-event-item-right"> {{ eventItem.timer }}</view>
+      <view class="uni-event-item-right">{{ eventItem.timer }}</view>
     </view>
 
     <view
       :class="`uni-event-item-right ${isUseDevSource ? 'link' : ''}`"
-      @click="emit('openCode', eventItem.stack)"
-    >
+      @click="emit('openCode', eventItem.stack)">
       {{ eventItem.stack }}
     </view>
   </view>
 </template>
 <script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import type { DevTool } from '../../type';
+import Tag from '../../../components/Tag/index.vue';
+import type { DevTool } from '../../../../type';
 import { computed } from 'vue';
-import { isMockWX } from '../../utils';
+import { isMockWX } from '../../../../utils';
 
 const props = defineProps<{
   eventItem: DevTool.UniEventItem;

package/dist/v3/{UniEvent → DevTool/components/UniEvent}/index.vue

@@ -84,12 +84,12 @@
 <script lang="ts" setup>
 import DevToolTitle from '../DevToolTitle/index.vue';
 import UniEventItem from './UniEventItem.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
+import Tag from '../../../components/Tag/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 

package/dist/v3/{VuexList → DevTool/components/VuexList}/index.vue

@@ -23,10 +23,10 @@
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue';
-import JsonPretty from '../JsonPretty/index.vue';
-import Empty from '../Empty/index.vue';
+import JsonPretty from '../../../components/JsonPretty/index.vue';
+import Empty from '../../../components/Empty/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../i18n';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 const props = defineProps<{

package/dist/v3/{WebSocket → DevTool/components/WebSocket}/WebSocketDetail.vue

@@ -114,16 +114,16 @@
 </template>
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import Tag from '../Tag/index.vue';
-import CircularButton from '../CircularButton/index.vue';
+import Tag from '../../../components/Tag/index.vue';
+import CircularButton from '../../../components/CircularButton/index.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import Empty from '../Empty/index.vue';
-import { formatDate } from '../../utils/index';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
+import Empty from '../../../components/Empty/index.vue';
+import { formatDate } from '../../../../utils/index';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
 import SettingButton from '../SettingButton/index.vue';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
 
 const { t } = useI18n();
 

package/dist/v3/{WebSocket → DevTool/components/WebSocket}/WebSocketItem.vue

@@ -37,10 +37,10 @@
   </view>
 </template>
 <script lang="ts" setup>
-import Tag from '../Tag/index.vue';
-import { formatDate } from '../../utils';
-import type { DevTool } from '../../type';
-import { useI18n } from '../../i18n';
+import Tag from '../../../components/Tag/index.vue';
+import { formatDate } from '../../../../utils';
+import type { DevTool } from '../../../../type';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();
 

package/dist/v3/{WebSocket → DevTool/components/WebSocket}/index.vue

@@ -43,15 +43,15 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import WebSocketItem from './WebSocketItem.vue';
-import Tag from '../Tag/index.vue';
-import Empty from '../Empty/index.vue';
-import FilterInput from '../FilterInput/index.vue';
-import Pick from '../Pick/index.vue'; // Changed from FilterSelect to Pick
-import type { DevTool } from '../../type';
-import VirtualList from '../VirtualList/index.vue';
-import AutoSize from '../VirtualList/AutoSize.vue';
+import Tag from '../../../components/Tag/index.vue';
+import Empty from '../../../components/Empty/index.vue';
+import FilterInput from '../../../components/FilterInput/index.vue';
+import Pick from '../../../components/Pick/index.vue'; // Changed from FilterSelect to Pick
+import type { DevTool } from '../../../../type';
+import VirtualList from '../../../components/VirtualList/index.vue';
+import AutoSize from '../../../components/VirtualList/AutoSize.vue';
 import DevToolTitle from '../DevToolTitle/index.vue';
-import { useI18n } from '../../i18n';
+import { useI18n } from '../../../../i18n';
 
 const { t } = useI18n();