可以支持vue的tsx语法吗

IFreeOvO commented 1 year ago

你贴一下vue的tsx示例让我看下。我还没试过vue里使用过tsx。理论上可行

Pasoul commented 1 year ago

源文件：

import { Vue, Component } from 'vue-property-decorator';

@Component({})
export default class App extends Vue {
  private flag: boolean = false
  protected render() {
    return(
      <div>
         <p> {`请问你喜欢的是${this.flag ? '葡萄' : '草莓'}`}</p>
         <p>{['苹果','葡萄','草莓'].includes('草莓') ? '草莓' : '苹果'}</p>
    </div>
    )
  }
}

Pasoul commented 1 year ago

另外还有几个建议您看下是否可以采纳： 1.提供忽略方法的能力，比如console.log('打印的信息')，不希望被提取出来 2.提供忽略文件的能力，比如.md文件 3.提供忽略目录的能力，比如test目录

IFreeOvO commented 1 year ago

另外还有几个建议您看下是否可以采纳： 1.提供忽略方法的能力，比如console.log('打印的信息')，不希望被提取出来 2.提供忽略文件的能力，比如.md文件 3.提供忽略目录的能力，比如test目录

console.log会补上。很好的建议👍。此外也可以使用单行注释/*i18n-ignore*/忽略你不想提取的代码行 2.忽略文件和目录的能力是有的。通过使用自定义配置实现，见文档

IFreeOvO commented 1 year ago

Attach files by dragging & dropping, selecting or pasting them.

源文件：

import { Vue, Component } from 'vue-property-decorator';

@Component({})
export default class App extends Vue {
  private flag: boolean = false
  protected render() {
    return(
      <div>
         <p> {`请问你喜欢的是${this.flag ? '葡萄' : '草莓'}`}</p>
         <p>{['苹果','葡萄','草莓'].includes('草莓') ? '草莓' : '苹果'}</p>
    </div>
    )
  }
}

可以的。但是如果把@Component({})直接放export default class App extends Vue上面，这种方式babel解析不出来。需要你改成下面写法才能正确转换。

import { Vue, Component } from 'vue-property-decorator';

class App extends Vue {
  private flag: boolean = false
  protected render() {
    return(
      <div>
         <p> {`请问你喜欢的是${this.flag ? '葡萄' : '草莓'}`}</p>
         <p>{['苹果','葡萄','草莓'].includes('草莓') ? '草莓' : '苹果'}</p>
    </div>
    )
  }
}
@Component({})
export default App

Pasoul commented 1 year ago

你好，感谢作者的效率，已经看到对console语句进行过滤的功能了。我想基于业务实际场景再提一些需求：

能否在配置文件支持自定义的忽略方法

"ignoreMethods": [
"window.sensor.track",
"window['sensor'].track",
"sensor.track",
"globalTrack",
"this.$sa"
],

这是ignoreMethods的应用场景，比如上报埋点的方法里的中文，不希望被提取出来

// 场景一：
window.sensor.track("上报埋点")
sensor.track("上报埋点")
// 场景二：
const globalTrack =  window.sensor.track
globalTrack("上报埋点")
// 场景三：
Vue.prototype.$sa =  window.sensor.track
this.$sa("上报埋点")

关于tsx的支持问题，我们项目都是基于vue2-tsx语法编写的，写法格式跟我提供的demo一样，用您的工具发现可以正常提取出中文的，使用的i18n-extract-cli版本是2.2.0

// a.tsx
@Component({})
export default class App extends Vue {
private flag: boolean = false
protected render() {
return(
  <div>
     <p> {`请问你喜欢的是${this.flag ? '葡萄' : '草莓'}`}</p>
     <p>{['苹果','葡萄','草莓'].includes('草莓') ? '草莓' : '苹果'}</p>
</div>
)
}
}

提取出来的格式如下：

// a.tsx
import { t } from 'i18n'
import { Vue, Component } from 'vue-property-decorator'
export default
@Component({})
class App extends Vue {
  private flag: boolean = false
  protected render() {
    return (
      <div>
        <p>
          {t('请问你喜欢的是{slot1}', {
            slot1: this.flag ? t('葡萄') : t('草莓'),
          })}
        </p>
        <p>
          {[t('苹果'), t('葡萄'), t('草莓')].includes(t('草莓'))
            ? t('草莓')
            : t('苹果')}
        </p>
      </div>
    )
  }
}

// zh-CN.json
{
  "葡萄": "葡萄",
  "草莓": "草莓",
  "请问你喜欢的是{slot1}": "请问你喜欢的是{slot1}",
  "苹果": "苹果"
}

IFreeOvO commented 1 year ago

你好，感谢作者的效率，已经看到对console语句进行过滤的功能了。我想基于业务实际场景再提一些需求：

能否在配置文件支持自定义的忽略方法

 "ignoreMethods": [
    "window.sensor.track",
    "sensor.track",
    "globalTrack",
    "this.$sa"
  ],

这是ignoreMethods的应用场景，比如上报埋点的方法里的中文，不希望被提取出来

// 场景一：
window.sensor.track("上报埋点")
sensor.track("上报埋点")
// 场景二：
const globalTrack =  window.sensor.track
globalTrack("上报埋点")
// 场景三：
Vue.prototype.$sa =  window.sensor.track
this.$sa("上报埋点")

关于tsx的支持问题，我们项目都是基于vue2-tsx语法编写的，写法格式跟我提供的demo一样，用您的工具发现可以正常提取出中文的，使用的i18n-extract-cli版本是2.2.0

// a.tsx
@Component({})
export default class App extends Vue {
  private flag: boolean = false
  protected render() {
    return(
      <div>
         <p> {`请问你喜欢的是${this.flag ? '葡萄' : '草莓'}`}</p>
         <p>{['苹果','葡萄','草莓'].includes('草莓') ? '草莓' : '苹果'}</p>
    </div>
    )
  }
}

提取出来的格式如下：

// a.tsx
import { t } from 'i18n'
import { Vue, Component } from 'vue-property-decorator'
export default
@Component({})
class App extends Vue {
  private flag: boolean = false
  protected render() {
    return (
      <div>
        <p>
          {t('请问你喜欢的是{slot1}', {
            slot1: this.flag ? t('葡萄') : t('草莓'),
          })}
        </p>
        <p>
          {[t('苹果'), t('葡萄'), t('草莓')].includes(t('草莓'))
            ? t('草莓')
            : t('苹果')}
        </p>
      </div>
    )
  }
}

// zh-CN.json
{
  "葡萄": "葡萄",
  "草莓": "草莓",
  "请问你喜欢的是{slot1}": "请问你喜欢的是{slot1}",
  "苹果": "苹果"
}

过滤指定方法我试试看能不能加
所以vue2-tsx的提取算是解决了么？？

Pasoul commented 1 year ago

2. 取算是解决了么？

目前看是解决了

Pasoul commented 1 year ago

关于ignoreMethods的一点想法，目前只考虑了js的情况，可能还不完善：

function transformJs(code, options) {
  const ignoreMethods = options.ignoreMethods
   // 对CallExpression的补充
   CallExpression(path) {
   // 判断调用的函数是否在ignoreMethods里
    if (callee.type === 'Identifier' && (callee.name === functionName || ignoreMethods.leadingComments(callee.name))) {
          path.skip();
          return;
    }
    // 对象方法的调用，比如window.sensor.track 或者 window['sensor']['track']，判断是否在ignoreMethods里
   if (callee.type === 'MemberExpression') {
        let arr = []
        path.traverse({
            Identifier(childPath) {
                arr.push(childPath.node.name)
            },
            Literal(childPath) {
                if (!path.node.arguments.includes(childPath.node)) {
                    arr.push(childPath.node.value)
                }
            }
        })
        const str = arr.join('.')
        if (ignoreMethods.includes(str)) path.skip()
    }
  }  
}

IFreeOvO commented 1 year ago

忽略指定方法加好了。放在

globalRule: {
    ignoreMethods: [ ], 
  },

IFreeOvO commented 1 year ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.