Support extraction of $gettext from vue <script> tags #34

gorkat · 2018-06-22T13:39:56Z

We would like to have the possibility to extract localized strings from the script tags in Vue.js files when we use vue-gettext.
Using xgettext is painful and subject to many restrictions:

It is not maintained since a long time (at least for js)
It does not parse modern ECMAScript features like template strings.
Parsing .vue files is possible but requires a few hacks like adding parenthesis around <template> and <script> and breaks mysteriously anyway.

The goal of this commit is to introduce the possibility to extract localized strings located in Vue.js <script> tags. This is a first step. For the moment, only strings marked as translatable using the $gettext function are extracted.

Extraction support for other functions like $ngettext, $pgettext or $npgettext could come later.
If you have any question or feedback, please let me know!

How to test:

Setup a .vue file like

    <template>
        <h1>{{ greeting_message }}</h1>
    </template>
    <script>
        export default {
            name: "greetings",
            computed: {
                greeting_message() {
                    return this.$gettext("Hello there!")
                },
                duplicated_greeting_message() {
                    return  this.$gettext("Hello there!")
                }
            }
        }
     </script>

Run compile-cli.js with this file

Expected result -> Strings present in the script part of the vue
component have been successfully extracted.

The goal of this commit is to introduce the possibility to extract localized strings located in Vue.js <script/> tags. This is a first step. For the moment, only strings marked as translatable using the $gettext function are extracted. How to test: - Setup a .vue file like: <template> <h1>{{ greeting_message }}</h1> </template> <script> export default { name: "greetings", computed: { greeting_message() { return this.$gettext("Hello there!") }, duplicated_greeting_message() { return this.$gettext("Hello there!") } } } </script> - Run compile-cli.js with this file Expected result -> Strings present in the script part of the vue component have been successfully extracted.

vperron

very few changes but thank you so much for this PR :) I'd also LOVE to have this documented in the README so the users know how to use and configure it (change DEFAULT_VUE_GETTEXT_FUNCTIONS, from instance ?)

vperron · 2018-06-25T09:05:19Z

src/javascript-node-translation-info-factory.js

@@ -0,0 +1,35 @@
+const Pofile                = require('pofile');
+const { MARKER_NO_CONTEXT } = require('./constants.js');


I'm not sure we really want to switch to those non-standards indents, do we ? :) unless you change them withibn the whole codebase ? not sure either !

Sorry, this is a matter of habits, I will conform to your standards

vperron · 2018-06-25T09:06:29Z

src/javascript-node-translation-info-factory.js

+
+  poItem.msgid      = this.text;
+  poItem.references = [ this.reference.toString(withLineNumbers) ];
+  poItem.msgstr     = [];


same here ;) please be consistent with the current codestyle, maybe ? did you eslint-check your PR ? we do have an .eslintrc !

Yep, I have ESLint checking the code in background, but It seems the config does not have such a rule to prevent this code format

vperron · 2018-06-25T09:07:59Z

src/javascript-extract.js

@@ -0,0 +1,51 @@
+const acorn                      = require('acorn');


ahem, not sure I've seen acorn pop up in the package.json, does it ? You should import it in the dependencies !

@vperron, I introduced the acorn package during the last PR from me that you merged. And it's now part of the dependencies in package.json.

acorn@^5.5.3 was already in the dependencies, AFAIK it is used to parse Javascript expressions in tag attributes :)

vperron · 2018-06-25T09:12:15Z

src/javascript-node-translation-info-factory.js

+
+module.exports = {
+  getNodeTranslationInfo,
+};


I'm not entirely comfortable with the name of this file :) why don't you just put these functions in the javascript-extract.js code and export the getNodeTranslationInfo function for the tests ?

Why not, but honestly I actually prefer to separate the code in a few services for sake of readability and ease of maintenance. However I'm not comfortable with the naming of this file too (I was not really inspired at the moment I've created it) ;)

What do you think about it? Do you have any suggestions on the way I could name it? In other case I'll merge it with javascript-extract.js

I tried to think about it and couldn't find any "extremely good" name. To me that was the sign that maybe the file was separated for a reason of "forced modularization", more than "well this looks like a good and unified separation that has a proper name" - hence, my proposal to just merge the files together. At least this way `javascript-extract.js`` is a good name that represents "this file contains everything related to javascript extraction of tokens". Do you agree ?

I did create another file because getNodeTranslationInfo's job is to build up and to return an object representation of the string being extracted. I wanted javascript-extract to deal only with the parsing and the search of the gettext tokens. Too me it is important not to end up with a file having too much responsibilities.

However It is another point of view, but It is okay for me ;)

Alright, whatever you please !

vperron · 2018-06-26T08:04:06Z

Looks good to me :) I'll merge that if you have no further improvements.

gorkat · 2018-06-26T08:36:37Z

I do not have any further improvement to submit (for the moment) :)

vperron · 2018-06-26T08:44:57Z

Thanks a million :)

gorkat · 2018-06-28T13:58:51Z

Hi, I was just wondering, when do you plan to release the next version of easygettext? My team actually needs this feature for the front-end development of Tuleap. Are you waiting to have more content to publish on npm? Please let me know how I could help :)

escapedcat · 2018-06-28T14:34:13Z

Do I understand this correctly that if this works we can leave out parts (or all?) of the example makefile of vue-gettext?

gorkat · 2018-06-28T14:52:47Z

@escapedcat Of course, but you will have to wait because only the extraction of singular strings ($gettext) is supported for the moment ;)

escapedcat · 2018-06-28T15:00:48Z

I see, thx for the reply! I'll stick to our makefile for now then ;)

escapedcat · 2018-07-03T09:56:15Z

Hey @gorkat ,

in our component files we use a helper like this:

<script>
import $gettext from '@helper/gettext'

export default {
  ...
}
</script>

With 2.5.0 I get:

Trace: TypeError: expression.arguments is not iterable

Looks like it's trying to parse the import statement. Not sue if this is a bug or we should change our setup. Just wanted to mention it first.

gorkat · 2018-07-03T10:06:47Z

@escapedcat thank you for the feedback!

Indeed, the extractor fails on the $gettext variable thinking it is a function.
In a first place I did not imagine this use case, but no worries, I will make a fix!
I invite you to open a issue to reference this bug :)

escapedcat · 2018-07-03T10:13:06Z

Done, thx a lot! Cool improvment!

vperron suggested changes Jun 25, 2018

View reviewed changes

Support extraction of $gettext from vue <script> tags

6ce170a

vperron merged commit fa3e699 into Polyconseil:master Jun 26, 2018

escapedcat mentioned this pull request Jul 3, 2018

Trace: TypeError: expression.arguments is not iterable when import $gettext... is used #37

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support extraction of $gettext from vue <script> tags #34

Support extraction of $gettext from vue <script> tags #34

gorkat commented Jun 22, 2018 •

edited

Loading

vperron left a comment

vperron Jun 25, 2018

gorkat Jun 25, 2018

vperron Jun 25, 2018

gorkat Jun 25, 2018

vperron Jun 25, 2018

mtr Jun 25, 2018 •

edited

Loading

gorkat Jun 25, 2018

vperron Jun 25, 2018

gorkat Jun 25, 2018

vperron Jun 25, 2018

gorkat Jun 25, 2018

vperron Jun 25, 2018

vperron commented Jun 26, 2018

gorkat commented Jun 26, 2018

vperron commented Jun 26, 2018

gorkat commented Jun 28, 2018

escapedcat commented Jun 28, 2018

gorkat commented Jun 28, 2018

escapedcat commented Jun 28, 2018

escapedcat commented Jul 3, 2018 •

edited

Loading

gorkat commented Jul 3, 2018

escapedcat commented Jul 3, 2018

		@@ -0,0 +1,35 @@
		const Pofile = require('pofile');
		const { MARKER_NO_CONTEXT } = require('./constants.js');

Support extraction of $gettext from vue <script> tags #34

Support extraction of $gettext from vue <script> tags #34

Conversation

gorkat commented Jun 22, 2018 • edited Loading

vperron left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mtr Jun 25, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vperron commented Jun 26, 2018

gorkat commented Jun 26, 2018

vperron commented Jun 26, 2018

gorkat commented Jun 28, 2018

escapedcat commented Jun 28, 2018

gorkat commented Jun 28, 2018

escapedcat commented Jun 28, 2018

escapedcat commented Jul 3, 2018 • edited Loading

gorkat commented Jul 3, 2018

escapedcat commented Jul 3, 2018

gorkat commented Jun 22, 2018 •

edited

Loading

mtr Jun 25, 2018 •

edited

Loading

escapedcat commented Jul 3, 2018 •

edited

Loading