Integration with Vue

[WaltzingPenguin]

I'm attempting to integrate ttag with Vue's single file components.

<template>
    <p>{{ gettext('foo-template') }}</p>
</template>

<script>
import { gettext } from 'ttag'

export default {
    data() {
        return {
            text: gettext('foo-script')
        }
    },
    methods: {
        gettext
    }
}
</script>

foo-script gets picked up and translated just fine, but nothing inside of the <template> tag does. Looking through the compiled output, {{ gettext('foo-template') }} gets compiled into this.gettext('foo-template') and ttag currently does not handle its functions being reassigned.

Is there any way to get babel-plugin-ttl to recognize this.gettext as a target? The discover option doesn't seem to work once a "." is invovled.

This is also an issue when integrating with Svelte, so I'm assuming there's a fair number frameworks with similar issues.

Edit: The library works just fine with Svelte, without modifications. Functions just need to be passed down to the template through "helpers"

[AlexMost]

Hello @ADantes! Unfortunately, I have not tried ttag with Vue. Currently this.gettext will be not recognized by babel-plugin-ttag. Going to investigate this issue, and will report any progress on Vue and Svelte here ASAP.

[AlexMost]

It would be really helpful if you could set up some example repository with just basic Vue and ttag.

[WaltzingPenguin]

Thank you for taking a look into this! This is the example I was trying: https://github.com/ADantes/ttag-with-vue

If you run npx webpack, the output template.po file contains only one of the two items I'm looking for.

For an even simpler case, I believe a solution for this would solve the same problem:

import { gettext } from 'ttag'

export function View() {
    this.gettext = gettext
}
View.prototype.render = function render() {
    return this.gettext('foo-render')
}

[AlexMost]

As far as I can see, we should implement this as a plugin for Vue - https://vuejs.org/v2/guide/plugins.html#Writing-a-Plugin to have gettext available in a templates. gettext func is good for simple strings translations. But what about formatting? As I understood we can not just simply use template literals like

t`Hello ${ name }`

inside Vue templates. But, I think we can just start with a simple gettext('translation') and later add formatting options. But, would it be enough? How do you think @ADantes ?

[graup]

This seems helpful https://github.com/vuejs/vue/issues/9721#issuecomment-473534520

[graup]

So it is quite trivial to add tagged template support and write a plugin to expose the functions, but the problem remains that babel-plugin-ttag doesn't recognize something.t. @AlexMost what can we do about this? Maybe make the matching configurable?

[AlexMost]

Hi @graup! Thanks for the helpful link, will try to investigate. Also, any help will be appreciated!