UnoCSS中CountableSet构造函数参数失效问题解析

问题背景

在UnoCSS核心库中，CountableSet是一个用于统计元素出现次数的数据结构实现。该数据结构继承自JavaScript原生Set，并扩展了计数功能。然而，开发者发现当使用带参数的构造函数时，计数功能会出现异常。

问题现象

当开发者尝试以下代码时：

import { CountableSet } from '@unocss/core';
const set = new CountableSet(['foo']);
console.log('[set]', set);
console.log('[count]', set.getCount('foo'));

预期输出应该是计数为1，但实际输出显示计数为0：

[set] CountableSet(1) [Set] { 'foo', _map: Map(0) {} }
[count] 0

技术分析

问题根源

问题的核心在于CountableSet类的实现方式。该类继承自Set，并添加了一个_map属性用于存储元素计数。关键实现代码如下：

export class CountableSet<K = any> extends Set<K> {
  _map: Map<K, number> = new Map()

  constructor(items?: Iterable<K>) {
    super()
    if (items)
      for (const item of items)
        this.add(item)
  }

  add(value: K) {
    this._map.set(value, (this._map.get(value) || 0) + 1)
    return super.add(value)
  }
}

类字段初始化问题

问题出在类字段初始化与构造函数执行的时序上。根据ECMAScript规范，类字段初始化发生在构造函数执行之后。这意味着：

1. 首先执行父类Set的构造函数
2. 然后执行CountableSet的构造函数体
3. 最后才初始化_map字段

因此，当构造函数尝试通过add方法添加元素时，_map尚未初始化，导致计数无法正常工作。

TypeScript编译差异

这个问题在不同编译环境下表现不同：

1. 在Vitest测试环境中，由于TypeScript的useDefineForClassFields: false选项，类字段会被转换为构造函数内的赋值，因此可以正常工作
2. 在生产环境中，使用标准类字段语义编译，就会出现上述时序问题
3. 在使用oxc转换器时，即使测试环境也会出现问题

解决方案

推荐修复方式

最可靠的解决方案是将_map的初始化移到构造函数中：

export class CountableSet<K = any> extends Set<K> {
  _map: Map<K, number>

  constructor(items?: Iterable<K>) {
    super()
    this._map = new Map()
    if (items)
      for (const item of items)
        this.add(item)
  }
}

这种方式确保了_map在调用add方法前已经初始化，且不受编译选项影响。

其他注意事项

1. 在实际使用中，UnoCSS内部并未使用带参数的构造函数，因此该问题可能长期未被发现
2. 类继承时，特别是继承原生类时，需要特别注意初始化顺序问题
3. 测试覆盖率应包含各种构造函数使用场景

总结

这个问题展示了JavaScript类继承和字段初始化顺序的微妙之处。在扩展原生类时，开发者需要特别注意初始化时序问题。通过将字段初始化明确放在构造函数中，可以避免因编译环境差异导致的行为不一致问题。这也提醒我们在设计类时，需要考虑不同JavaScript运行环境和编译设置下的行为一致性。