Polyconseil / vue-gettext

Translate your Vue.js applications with gettext.
MIT License
278 stars 55 forks source link

templates string support #81

Open sandroden opened 5 years ago

sandroden commented 5 years ago

Hi, I wanted to start localizing a new project using vue-gettex that strikes me for the rich documentation and the solution 360 degrees (from .vue, to extracting and to json). I read the limitation in the docs but when I started I discovered that template strings are not supported in any form, I understand that's a limitation of xgettext. Are you suggesting to avoid using template strings? (In this case I think a mention in the docs should be present) or you have some solution I didn't find? Just to be more explicit: it will silently ignore: let home: $gettext(home) while it will complain for
title = `<h6 class="display-4">${translatedTitle}</h6> with a message like: attention, not terminated string.

vperron commented 5 years ago

Hi, you should use https://github.com/Polyconseil/easygettext for string extraction. It's not part of vue-gettext as stated in the readme ;) But it's totally capable of extracting template strings, and much more ES6 constructs.

sandroden commented 5 years ago

Well, I used it, and I installed the Makefile that it shipped with vue-gettext, if I read it correctly it calls easygettext in the beginning and then it calls xgettext:

# Extract gettext strings from JavaScript files.
        xgettext --language=JavaScript --keyword=npgettext:1c,2,3 \
                --from-code=utf-8 --join-existing --no-wrap \
                --package-name=$(shell node -e "console.log(require('./package.json').name);") \
                --package-version=$(shell node -e "console.log(require('./package.json').version);") \
                --output $@ $(GETTEXT_JS_SOURCES)

It's that part that complains:

$ cat templateString.js
let title = `<h6 class="display-4">${translatedTitle}</h6>`

$ xgettext --language=JavaScript --keyword=npgettext:1c,2,3 --from-code=utf-8 --join-existing --no-wrap --output /tmp/output.pot templateString.js
templateString.js:3: warning: RegExp literal terminated too early

So when you say that I shoud use easygettext, do you mean I shouldn't use the Makefile shipped with vue-gettext? BTW, easygettext in the home page does not report any single example with template strings built with backtits as in my example...

vperron commented 5 years ago

You're right, I'll update both tomorrow!

On Mon, Dec 10, 2018, 20:14 Sandro Dentella <notifications@github.com wrote:

Well, I used it, and I installed the Makefile that it shipped with vue-gettext, if I read it correctly it calls easygettext in the beginning and then it calls xgettext:

Extract gettext strings from JavaScript files.

    xgettext --language=JavaScript --keyword=npgettext:1c,2,3 \
            --from-code=utf-8 --join-existing --no-wrap \
            --package-name=$(shell node -e "console.log(require('./package.json').name);") \
            --package-version=$(shell node -e "console.log(require('./package.json').version);") \
            --output $@ $(GETTEXT_JS_SOURCES)

It's that part that complains:

$ cat templateString.js let title = <h6 class="display-4">${translatedTitle}</h6>

$ xgettext --language=JavaScript --keyword=npgettext:1c,2,3 --from-code=utf-8 --join-existing --no-wrap --output /tmp/output.pot templateString.js templateString.js:3: warning: RegExp literal terminated too early

So when you say that I shoud use easygettext, do you mean I shouldn't use the Makefile shipped with vue-gettext? BTW, easygettext in the home page does not report any single example with template strings built with backtits as in my example...

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/Polyconseil/vue-gettext/issues/81#issuecomment-445936160, or mute the thread https://github.com/notifications/unsubscribe-auth/AAFaKncjTs3dcpg-6tlVCgcEhbYIhK-zks5u3rKOgaJpZM4ZKY3Q .

vperron commented 5 years ago

It's done now. Makefile and docs updated in both packages, on master though, I did not create a release just for this.

vperron commented 5 years ago

By the way: easygettext still does not support template strings as translation tokens, but they can be present in the source file.

sandroden commented 5 years ago

Thank you very much Victor, I do have some more problems with the suggested configuration of easygettext (that's why I write here rather than in the easygettext repo's issue tracker). One of the suggested solutions (@kemar) for attribute translations (inline expression) is not working for me (#9):

  <!-- Inline expression. -->
  <p :title="$gettext('Translate this')">Foo bar.</p>

while it (almost) works the configuration suggested by @mazavr in that same thread using the filter ():

<input type="text" :placeholder="'Email address' | translate"/>
gettext-extract --startDelimiter "" --endDelimiter "" --output a.pot a.html

I say "almost" as on some .js file (note .js not .vue...) it takes a huge quantity of time and once it didn't arrive at the end of the task. So I thought to issue gettext twice as:

GETTEXT_HTML ?= $(shell find $(INPUT_FILES)  -name '*.html' -o -name '*.vue' 2> /dev/null)
GETTEXT_JS ?= $(shell find $(INPUT_FILES)  -name '*.js' -o -name '*.vue' 2> /dev/null)
...
# Extract gettext strings from templates files and create a POT dictionary template.
    gettext-extract --quiet --attribute v-translate --startDelimiter "" --endDelimiter "" --output $@ $(GETTEXT_HTML)
    gettext-extract --quiet --attribute --output $@ $(GETTEXT_JS)

But it seems the second run of gettext-extract deletes some of the messages already extracted... [As a side note, the limitation you stated that you cannot have have template strings as translation tokens is probably worth mentioning in the open issues'section.]

sandroden commented 5 years ago

A Makefile that extracts more translations strings for me:

GETTEXT_HTML ?= $(shell find $(INPUT_FILES)  -name '*.html' -o -name '*.vue' 2> /dev/null)
GETTEXT_JS ?= $(shell find $(INPUT_FILES)  -name '*.js' 2> /dev/null)
...
    gettext-extract --quiet --attribute v-translate --startDelimiter "" --endDelimiter "" --output $@.1 $(GETTEXT_HTML)
    gettext-extract --attribute --output $@.2 $(GETTEXT_JS)
    msgcat $@.1 $@.2 > $@

this allows me to use translation in attributes as per previous message (with filter version). It extracts thought msgid "{{'Save' | translate}}" along with simple 'Save' if you have it in your text...