Add support for translation extraction from VueJs templates

[briedis]

How it works - VueJs tempaltes basically are valid HTML. We extract template part (then extract dynamic attributes which are JS expressions and extract expressions from within template elements) and script part and parse them both as a regular JS.

[briedis]

Checking the tests...

[briedis]

Will try to fix this on a linux machine. Tests on mac seem fine, but somehow CI converts something differently.

[briedis]

@oscarotero Everything looks fine, can you consider merging this, please? :)

[oscarotero]

I think this class is not necessary, the lineOffset could be added as an option for the JsFunctionScanner, so it can be reused by other javascript extractors

[briedis]

Agreed, I'll make the changes after my vacation (14th of May). Hope this can sit here until then.

[oscarotero]

Hi. Sorry for the delay.
I think your approach is a good start but has room for improvement. For example I wouldn't use the DOM library because there's no need to treat differently scripts, attributes and text content. I'd try to isolate the javascript code from the rest of the html, using a loop char by char, removing all code but javascript and spaces and line breaks. For example, this code:

<template>
    {{ __('Hello world') }}
    <p :attribute="__('One text')">Paragraph content {{ __('text') }}</p>
</template>

<script>
    console.log(__('Other text'));
</script>

would be converted to this:

     __('Hello world') 
    __('One text')   __('text') 



    console.log(__('Other text'));

Then, just use the jsCodeExtractor and that's it. So it could be reused by other future extractors like angular, react, etc.

Anyway, if you need this now, I can merge it (after the requested change is made) and we can improve this in future versions.

[briedis]

I'm not sure about the manual parsing of the template part, sounds like a lot of work and a lot of opportunities to mess things up if there's a mistake in the symbol counter. Especially for attributes where quotes can be escaped etc. Are you worried about the performance?

[oscarotero]

It's not about performance, I think it's simpler than creating three fake javascripts, fixing line number issues, etc. All that things looks a bit hacky to me.

Manual parsing is what is used in JsFunctionScanner and works great. In html I guess just controlling the open/close tags, open/close attributes, html comments and open/close {{expressions}} should be enought. That also prevents issues with invalid html.

I dont think it's a lot of work (or maybe yes, you never know before start) 😄

[briedis]

Without DOM parsing, I imagine extracting attributes would be hard taking in account all quotes, escaping :attr="blabla('foo " bar ')" etc. HTML seems just too irregular. Handling it as DOM seems more safe.

[oscarotero]

Ok, if the current implementation works fine, I'll merge it once the requesting change is made.
In a future, it can be improved.

[briedis]

VueJsFunctionScanner removed.

[oscarotero]

Thanks!