spittal / vue-i18n-extract Goto Github PK

"npm run demo" doesn't work anymore

So I'm not sure how to solve this really, but here's the problem.

It picks this up as a Missing i18n Entry
lang.label.${choice}

And in my lang files it picks these up as Unused i18n Entry

lang.label.ar-AE
lang.label.de-DE
lang.label.en-US
lang.label.es-ES
lang.label.fr-CA
lang.label.fr-FR
lang.label.he-IL

My code has this within a loop where choice is one of [ar-AE, de-DE, en-US, etc]:

<label :for="choice">{{ $t(`lang.label.${choice}`) }}</label>

Could your tool treat the ${choice} as a wildcard somehow and therefore not flag these items as missing?

vue-i18n-extract overwrites the global require here:
https://github.com/pixari/vue-i18n-extract/blob/1591c94ae19239cbd77c3c9da0ef67f4bcfe8c1d/src/report-command/language-files.ts#L10

This causes problems with other modules.
In my case vue-i18n-extract gets loaded via vue-cli-plugin-i18n before the vue cli webpack build, which then breaks a loader down the line, because esm is not handling hashbangs correctly (#!/usr/bin/env node).

Maybe anyone can advice what I'm doing wrong?

public % vue-i18n-extract report -v "./**/.?(js|vue)" -l "./locales/.?(js|json)" | tee ./tmp/i18n-report.json

(node:43596) UnhandledPromiseRejectionWarning: Error: EISDIR: illegal operation on a directory, read
at Object.readSync (fs.js:506:3)
at tryReadSync (fs.js:331:20)
at Object.readFileSync (fs.js:368:19)
at /Users/Paul/.config/yarn/global/node_modules/vue-i18n-extract/dist-node/index.js:66:19
at Array.map ()
at readVueFiles (/Users/Paul/.config/yarn/global/node_modules/vue-i18n-extract/dist-node/index.js:61:22)
at VueI18NExtract.parseVueFiles (/Users/Paul/.config/yarn/global/node_modules/vue-i18n-extract/dist-node/index.js:166:23)
at VueI18NExtract.createI18NReport (/Users/Paul/.config/yarn/global/node_modules/vue-i18n-extract/dist-node/index.js:176:33)
at report (/Users/Paul/.config/yarn/global/node_modules/vue-i18n-extract/dist-node/index.js:288:26)
at run (/Users/Paul/.config/yarn/global/node_modules/vue-i18n-extract/dist-node/index.js:275:7)
(node:43596) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:43596) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Hi!
I think it's time to create a new cool documentation with Vue Press and deploy on GitHub pages. 😄

• Build documentation with Vue Press
• Deploy it on GitHub Pages

@pixari It would be great if you could link to the documentation (https://pixari.github.io/vue-i18n-extract/) from the repository header:

Readme needs to be checked.

Hi very useful tool!
I encountered a small problem. When the key count is more than 2 digits, these are cut.
I solved by increasing the size of the first column in the script that generates the report.

Before

After

dan

Hi!

I want to your library.
However, I noticed your library is GPL v3.
GPL v3 is a license warranting the patent, but companies tend to avoid.

Why is GPL v3?
If possible, can you consider to change MIT license?

I'm using vue-i18n-extract to generate a report as part of a CircleCI build pipeline.

I'm using the following command to output to stdout and a file which gets stored as a "build artifact".

npx vue-i18n-extract report -v "./**/*.?(js|vue)" -l "./locales/*.?(js|json)" | tee /tmp/i18n-report

Unfortunately, the stored result contains colour codes and winds up looking like this

�[37m┌────�[39m�[37m┬────────────�[39m�[37m┬────────────────────────────────────────�[39m�[37m┬────────�[39m�[37m┬──────────────────────────────┐�[39m
�[37m│�[39m�[32m #  �[39m�[37m│�[39m�[32m Language   �[39m�[37m│�[39m�[32m File                                   �[39m�[37m│�[39m�[32m Line   �[39m�[37m│�[39m�[32m Missing i18n Entry           �[39m�[37m│�[39m
�[37m├────�[39m�[37m┼────────────�[39m�[37m┼────────────────────────────────────────�[39m�[37m┼────────�[39m�[37m┼──────────────────────────────┤�[39m

It would be great if there was an option to disable colours in the output or if the --output flag supported plain text.

I just wanna point this, but I had not much time to test this tool in a project I used JSON.

Also... In addition... I don't use a key-like string ("message_title": "Título del mensaje") as key for the string in my JSON, but a "fallback" string as key ("Message Title": "Título del mensaje") (kazupon/vue-i18n#138 (comment))

Originally posted by @nelson6e65 in #19 (comment)

and:

"This is the exact situation that I use. My keys are the fall back for my translations." from @Spittal
#19 (comment)

In versions 1.1.0 and 1.1.1, nothing is written to console when running as npm script (on Windows, if it matters). Only writing to a file with -o works. There is no problem in version 1.0.3.

Readme:
Running from command line
You can run vue-i18n-extract directly from the CLI if you have install it globally

yarn global add vue-i18n-extract

This doesn't work.

If I follow installation steps, and run this command:

npm run vue-i18n-extract report -v './path/to/your/vue-files/**/*.?(js|vue)' -l './path/to/your/language-files/*.?(js|json|yml|yaml)'

I just get the NPM version printed in console (6.14.6).

If I use '--vueFiles' : error: required option '-v, --vueFiles ' not specified.

Node version: 12.18.2

I've been looking forward to using this tool. Thanks!

I just ran it for the first time and I'm seeing a lot of ellipses in the report. It seems to show absolute paths even though I run the report using relative paths.

vue-i18n-extract report -v 'src/**/*.?(js|vue)' -l 'src/locales/*.json'

Here is a sample image of the output.

Maybe take a flag that gives me an option to expand all columns. Or allow me to output to CSV which I can open in Excel or something that is still human readable and with all relevant info.

As (vue files) source and language files source, the user can provide:

• Specific path to a file
• Path with ** and * wildcards
• No file extension limitations

Tracking issue per discord conversation.
Things like multibyte character exploits and XSS injections

Currently, AnalyzeLanguageFiles cannot read the json language files.
https://github.com/pixari/vue-i18n-extract#analyzelanguagefiles

We often use the json format.
I hope that supporting. :)

vue-i18n-extract is great projects! 👍

I will be able to provide the useful command with vue-cli-plugin-i18n using the API exposed with vue-i18n-extract.

I think that we will be able to convey the report details to the user, If vue-i18n-extract provides analytical data supporting AST like interface (include line number and etc ...). 😸

https://snyk.io/test/github/pixari/vue-i18n-extract?targetFile=package.json

I noticed some of my keys ending up as unused because the $t('KEY', {FORMATS}) call seems to be unsupported.
Also my dynamic keys are ending up as missing, which they shouldn't

Hi Pixari!

As I'm sure you know I've been keenly interested in this project and have been working on it for the past few days. I wanted to inform you that I have modified the tool for my purposes past the point of making a pull request.

https://github.com/Spittal/vue-i18n-extract

Some changes I've made include:

1. It's all Typescript now 🎉
2. For making publishing easier and to aid with Typescript I've added in PikaPkg
3. I've modified the CLI interface to allow for multiple commands, and added a help command.
4. I've rewritten the way files are read and parsed to make them more consistent with one another. For example the function that reads the Vue files and the Language files will both spit out a normalized data format.
5. Using the new normalized data format, I've rewritten the diffing function. It is now 5 lines of code and no longer needs deep-diff
6. Re-organized the whole folder structure for easier maintenance and extension in the future.
7. Many other things!

This is obviously an enormous change to your project which is why I have put it into it's own repo. But, I'd love to see if maybe you're interested in combining our efforts into one repo. Or, if you think my new repo is too different I'd be happy to maintain it on my own.

Let me know what you think!
Spittal

Hi when I execute the command in windows 10 from "D:/proyect/" I get the following output

$ vue-i18n-extract report -a -v "D:/proyect/src/**/.?(js|vue)" -l "D:/proyect/src/i18n/.?(js|json|yml|yaml)"
┌─────────┬───────────────────┬──────┬────────────────────────────────────────────────────────────────────┬──────────┐
│ (index) │ path │ line │ file │ language │
├─────────┼───────────────────┼──────┼────────────────────────────────────────────────────────────────────┼──────────┤
│ 0 │ 'totalTooltip' │ 13 │ 'D:/proyect/src/components/TotalSummary.vue' │ 'en-us' │
│ 2 │ 'totals' │ 5 │ 'D:/proyect/src/components/TotalSummary.vue' │ 'index' │
│ 3 │ 'totalTooltip' │ 13 │ 'D:/proyect/src/components/TotalSummary.vue' │ 'index' │
└─────────┴───────────────────┴──────┴────────────────────────────────────────────────────────────────────┴──────────┘
┌─────────┬──────┬─────────────────────────┬────────────────────────────────────────────────────────┬──────────┐
│ (index) │ line │ path │ file │ language │
├─────────┼──────┼─────────────────────────┼────────────────────────────────────────────────────────┼──────────┤
│ 0 │ 0 │ 'failed' │ 'D:/proyect/src/i18n/en-us.json' │ 'en-us' │
│ 1 │ 1 │ 'success' │ 'D:/proyect/src/i18n/en-us.json' │ 'en-us' │
│ 2 │ 0 │ 'failed' │ 'D:/proyect/src/i18n/es-es.json' │ 'es-es' │
│ 3 │ 1 │ 'success' │ 'D:/proyect/src/i18n/es-es.json' │ 'es-es' │
│ 4 │ 0 │ 'en-us.failed' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 5 │ 1 │ 'en-us.success' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 6 │ 2 │ 'en-us.totals' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 2 │ 'totals' │ 5 │ 'D:/proyect/src/components/TotalSummary.vue' │ 'index' │
│ 3 │ 'totalTooltip' │ 13 │ 'D:/proyect/src/components/TotalSummary.vue' │ 'index' │
└─────────┴───────────────────┴──────┴────────────────────────────────────────────────────────────────────┴──────────┘
┌─────────┬──────┬─────────────────────────┬────────────────────────────────────────────────────────┬──────────┐
│ (index) │ line │ path │ file │ language │
├─────────┼──────┼─────────────────────────┼────────────────────────────────────────────────────────┼──────────┤
│ 0 │ 0 │ 'failed' │ 'D:/proyect/src/i18n/en-us.json' │ 'en-us' │
│ 1 │ 1 │ 'success' │ 'D:/proyect/src/i18n/en-us.json' │ 'en-us' │
│ 2 │ 0 │ 'failed' │ 'D:/proyect/src/i18n/es-es.json' │ 'es-es' │
│ 3 │ 1 │ 'success' │ 'D:/proyect/src/i18n/es-es.json' │ 'es-es' │
│ 4 │ 0 │ 'en-us.failed' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 5 │ 1 │ 'en-us.success' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 6 │ 2 │ 'en-us.totals' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 8 │ 4 │ 'es.failed' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 9 │ 5 │ 'es.success' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 10 │ 6 │ 'es.totals' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
│ 12 │ 8 │ 'es.totalTooltip' │ 'D:/proyect/src/i18n/index.js' │ 'index' │
└─────────┴──────┴─────────────────────────┴────────────────────────────────────────────────────────┴──────────┘
(node:15512) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'D:\proyectD:\proyect\src\i18n\en-us.json'
at Object.openSync (fs.js:458:3)
at Object.writeFileSync (fs.js:1279:35)

For some reason when it is going to write the missing keys to en-us.json the path is malformed ("'D:\proyectD:\proyect\src\i18n\en-us.json'") from where you execute it.

Changing the absolute paths to relative yarn vue-i18n-extract report -a -v "./src/**/*.?(js|vue)" -l "./src/i18n/*.?(js|json|yml|yaml)" doesn't work either

I would like to support unused keys reporting of language file in vue-cli-plugin-i18n. (e.g ESLint stylish reporting like)

In about analyzeUnusedKeys, If vue-i18n-extract will provide language file AST, I think that we will be able to convey the report details.

Loop of locales returns unused keys

<template v-for="(item, index) in Object.keys($i18n.messages[$i18n.fallbackLocale].views.FAQ.questions).length" > <expandable-block :key="index" :title="$t('views.FAQ.questions')[index].title" > <i18n :key="index" :path="views.FAQ.questions[${index}].text" tag="p" >

Is there a way to extract all texts which doesn't have translation associated with it ?

In the 'how to use' section of the documentation, the 2 dashes in the commands are missing for report.

Is:

npm run vue-i18n-extract report -v './path/to/your/vue-files/**/*.?(js|vue)' -l './path/to/your/language-files/*.?(js|json|yml|yaml)'

Should be:

npm run vue-i18n-extract -- report -v './path/to/your/vue-files/**/*.?(js|vue)' -l './path/to/your/language-files/*.?(js|json|yml|yaml)'

https://codeclimate.com/github/pixari/vue-i18n-extract

Example code:

<span v-t="'product.priority_info'"></span><a href="/login" class="gtm-pdp-signin" v-t="'product.sign_in'"></a>

running vue-i18n-extract on this html returns a path of:

product.priority_info'"></span><a href="/login" class="gtm-pdp-signin" v-t="'product.sign_in

instead of 2 seperate paths of product.sign_in and product.priority_info

Fix: In file-operations-vue.js, directiveRegExp should be /v-t="'(.*?)'"/g instead of /v-t="'(.*)'"/g

Here are some links to regex101.com that further illustrate my point:
https://regex101.com/r/PzcT5n/1
https://regex101.com/r/DeVMfZ/1

Want me to open a PR?

$t((key.template)

Is there an option to support extracting translations when using formatFallbackMessages: true as documented in vue-i18n fallback documentation?

At the moment $t("Hello World. Have a nice day!") will get extracted to:

"Hello World": {
  " Have a nice day!": ""
}

It is strange but v1.0.3 which is available on NPM has no -a option.

Download package and check the code:

npm pack vue-i18n-extract
tar -xvvzf vue-i18n-extract-1.0.3.tgz
cat package/dist-node/index.js

Output:

...
async function report(command) {
  const {
    vueFiles,
    languageFiles,
    output
  } = command;
...

Hey @pixari

While publish does exist in CircleCI it needs to run npm run build then actually publish what gets generated in the ./pkg folder. The reason for this is Pika is what does all the typescript compilation as well as generating typings and the wrapper to make the tool a CLI so basically it will need to

npm install
npm run build
cd pkg
npm publish

Thanks!

I would be great if this module can add support for vue-i18n-loader

Steps to reproduce:

1. Use the following translation string: this.$t('I\'m not done, yet.').
2. Add the i18n entry "I'm not done, yet." to a locale file ending in .json.
3. Run vue-i18n-report

Expected result:

No missing and no unused translation strings are reported.

Actual result:

• The string I\ is reported as a missing i18n entry.
• The string I\'m not done, yet. is reported as an unused i18n entry.

I m trying to run vue-i18n-extract

npx vue-i18n-extract report -v './resources/assets/js/**/*.vue' -l './resources/assets/js/locales/*.json'

but i get this error:

(node:16284) UnhandledPromiseRejectionWarning: Error: vueFiles glob has no files. at u (C:\laragon\www\project\node_modules\vue-i18n-extract\dist\vue-i18n-extract.umd.js:1:772) at p (C:\laragon\www\project\node_modules\vue-i18n-extract\dist\vue-i18n-extract.umd.js:1:1123) at v (C:\laragon\www\project\node_modules\vue-i18n-extract\dist\vue-i18n-extract.umd.js:1:3203) at Command.b (C:\laragon\www\project\node_modules\vue-i18n-extract\dist\vue-i18n-extract.umd.js:1:3285) at Command.listener [as _actionHandler] (C:\laragon\www\project\node_modules\vue-i18n-extract\node_modules\commander\index.js:413:31) at Command._parseCommand (C:\laragon\www\project\node_modules\vue-i18n-extract\node_modules\commander\index.js:914:14) at Command._dispatchSubcommand (C:\laragon\www\project\node_modules\vue-i18n-extract\node_modules\commander\index.js:865:18) at Command._parseCommand (C:\laragon\www\project\node_modules\vue-i18n-extract\node_modules\commander\index.js:882:12) at Command.parse (C:\laragon\www\project\node_modules\vue-i18n-extract\node_modules\commander\index.js:717:10) at Command.parseAsync (C:\laragon\www\project\node_modules\vue-i18n-extract\node_modules\commander\index.js:744:10) (node:16284) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). T o terminate the node process on unhandled promise rejection, use the CLI flag--unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2) (node:16284) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
`

can you help to fix this please ?

Hello!

Except reporting future is your plugin can put missing translations to locale files?

Hi, I have a question. I would like to use vue-i18n-extract to fail my Semaphore build when translations are missing. However, the plugin returns an exit code 0 and the build passes even when it has missing translation keys. Is this a feature that can be added? Or am I just missing something?

Thanks in advance for the reply!

This command is part of the readme