computed 计算属性返回的类名在小程序中没有转换

chasonma commented 2 years ago

例如：

const itemClass = computed(() => {
  if (props.type === 'news') {
    return 'w-[220rpx]'
  }
  return 'w-[340rpx]'
})

目前采取的解决方式：

const itemClass = computed(() => {
  let str
  if (props.type === 'news') {
    str = 'w-[220rpx]'
    // #ifdef MP
    str = 'w--220rpx-'
    // #endif
  } else {
    str = 'w-[340rpx]'
    // #ifdef MP
    str = 'w--340rpx-'
    // #endif
  }
  return str
})

ItsRyanWu commented 2 years ago

其实没有必要这么痛苦的采用目前的解决方式，Vue 有几种在 template 中原生支持的写法来帮你替换掉把 class name 写在 computed 里的需求。第一种：

<vue-component :class="type === 'news' ? 'w-[220rpx]' : 'w-[340rpx]'"/>

第二种

<vue-component :class="{
  'w-[220rpx]': type === 'news',
  'w-[340rpx]': type !== 'news'
}"/>

本插件对这两种情况都做了兼容性处理，所以你可以优先考虑这两种写法。

至于到底能不能对 computed 甚至 ref 一并做兼容处理，我觉得逻辑上是可以的，但从性能上来说，兼容这两种 edge case 将会对性能造成很大的牺牲。因为插件本来只需要解析 template 部分的 AST 现在为了兼容 edge case 需要解析所有的 script，一方面有限的计算资源会被浪费，另一方面容易“误伤” script block 里的非 Tailwind 变量，会把本来并非用在 Tailwind CSS 中的字符串转译，造成程序 crash 或 bug 都是可能的。所以我目前并没有打算对 computed 的值做兼容，如果有很多人都有这个需求的话，我或许会考虑在未来让开发者手动在 computed 字符串中加入 flag 来向插件示意该字符串需要被转译。

chasonma commented 2 years ago

其实没有必要这么痛苦的采用目前的解决方式，Vue 有几种在 template 中原生支持的写法来帮你替换掉把 class name 写在 computed 里的需求。第一种：
<vue-component :class="type === 'news' ? 'w-[220rpx]' : 'w-[340rpx]'"/>
第二种
<vue-component :class="{
  'w-[220rpx]': type === 'news',
  'w-[340rpx]': type !== 'news'
}"/>
本插件对这两种情况都做了兼容性处理，所以你可以优先考虑这两种写法。

至于到底能不能对 computed 甚至 ref 一并做兼容处理，我觉得逻辑上是可以的，但从性能上来说，兼容这两种 edge case 将会对性能造成很大的牺牲。因为插件本来只需要解析 template 部分的 AST 现在为了兼容 edge case 需要解析所有的 script，一方面有限的计算资源会被浪费，另一方面容易“误伤” script block 里的非 Tailwind 变量，会把本来并非用在 Tailwind CSS 中的字符串转译，造成程序 crash 或 bug 都是可能的。所以我目前并没有打算对 computed 的值做兼容，如果有很多人都有这个需求的话，我或许会考虑在未来让开发者手动在 computed 字符串中加入 flag 来向插件示意该字符串需要被转译。

是的，目前简单的类名控制也是通过你所举例的方式进行处理，只是非不得已需要使用到 computed 进行处理的时候就会出现这个问题，目前我是在业务里封装了一个函数对这些类名进行了转换。

ItsRyanWu commented 2 years ago

这么说的话，或许我可以暴露一个最小化的处理方法，目前暴露的方法比如 handleTemplate 还不是最小化的，应该新增暴露一个 handleTemplateToken 来让开发者自己在 computed 这种场景中自由使用。

const className = handleTemplateToken('w-[220rpx]') // return 'w--220rpx-'

chasonma commented 2 years ago

可以的，这种场景交给开发者自己处理没毛病。

ItsRyanWu commented 2 years ago

我这周更新一下这个方法

dcasia / mini-program-tailwind

computed 计算属性返回的类名在小程序中没有转换 #27