These are chat archives for ractivejs/ractive

9th
Aug 2018
kouts
@kouts
Aug 09 2018 10:16
I'm having a little problem understanding how plugins work, I'm using ES5.
I have translations in my main instance defined inside data as a _t property
I want all isolated components to be able to access _t without defining _t: this.root.get('_t') inside components data function every time
i.e like this
Ractive.components['test'] = Ractive.extend({
    isolated: true,
    template: '{{_t.MENU_MENU}}',
    data: function(){
        return {
            _t: this.root.get('_t')
        }
    }
so I thought maybe a plugin was a good idea, something along the lines of
Ractive.components['test'] = Ractive.extend({
    isolated: true,
    template: '{{_t.MENU_MENU}}',
    use: translations,
    data: function(){
        return {
            ...
        }
    }
kouts
@kouts
Aug 09 2018 10:22
but I don't know how would that work, what do I have to do inside my translations function?
function translations(){
...
}
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 11:24
this is black magic and it seems to reduce code readability. why don't you use @shared._t?
kouts
@kouts
Aug 09 2018 11:27
Translations are set in root instance, @shared._t is too verbose plus it seemed like an nice application for a plugin
so I can learn how this works too
kouts
@kouts
Aug 09 2018 11:33
but maybe what I'm describing isn't possible in the first place heh?
kouts
@kouts
Aug 09 2018 12:02
Ok here's how I managed to solve it
function translations(opts) {
    var orig_onconfig = opts.proto.onconfig;
    opts.proto.onconfig = function(){
        orig_onconfig.apply(this, arguments);
        this.set('_t', this.root.get('_t'));
    }
}
Ractive.components['test'] = Ractive.extend({
    use: [translations],
    isolated: true,
    template: '{{_t.MENU_MENU}}',
    data: function(){
        return {
                ...
        }
    },
    ...
If there's a more elegant way of doing this please share
Joseph
@fskreuz
Aug 09 2018 12:24
If the translations are available at the start of the app, I'd stick it in Ractive.defaults.data (i.e. Ractive.defaults.data.i18n = { ... }, then access as {{ i18n.something }} everywhere)
kouts
@kouts
Aug 09 2018 12:26
Yes I would do that too, unfortunately translations come inside data responses from Backend
Joseph
@fskreuz
Aug 09 2018 12:26
:grimacing:
kouts
@kouts
Aug 09 2018 12:27
and specifically in the first data response that "initializes" every view (which is an Ractive main instance)
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 15:48
I think this "language translations" issue needs a standalone HOWTO
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 16:25
@fskreuz I might ask that before, but I don't remember the answer: How could we watch for data changes in a function? (related with ceremcem/ractive-translation#1)
Joseph
@fskreuz
Aug 09 2018 16:41
For the most part i18n stuff, I've always had translations pre-loaded. However, you can always use computeds if you want some logic to run before getting a result.
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 16:44
which means you don't change language in the runtime: ceremcem/ractive-translation#2
Joseph
@fskreuz
Aug 09 2018 16:46
That, I've probably not considered. Reloading the browser in a new language is always an option. :grin:
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 16:47
that might be fair too
Joseph
@fskreuz
Aug 09 2018 16:47
It's not always that you switch on-the-fly. Maybe once, and a reload is bearable for that. But then, on-the-fly switching is a good consideration.
Chris Reeves
@evs-chris
Aug 09 2018 17:56
turns out there's a capture bug in Ractive.sharedGet and Ractive.styleGet, but once those are fixed, I'll share my recommendation for stuff like this
if you poke at i18n.js, you'll notice that two of the "languages" load async
so there's a different delay on them
you could also use the plugin with Ractive.use just as easily to make the i18n helper globally available
Chris Reeves
@evs-chris
Aug 09 2018 19:09
@ceremcem now that the sharedGet issue is resolved, a global function (aka helper) should be a tenable approach
Chris Reeves
@evs-chris
Aug 09 2018 19:31
playing with the playground link - this drops you straight into the i18n plugin file
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 19:56
first of all, I didn't know that playground was supporting multiple script files and I love it! :tada:
Chris Reeves
@evs-chris
Aug 09 2018 20:01
brand new in a playground near you
gotta copy those sweet svelte repl features
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 20:02
:)
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 20:49
kouts
@kouts
Aug 09 2018 21:22
Is it more performant to use a function for the lookup vs plain mustache?
Joseph
@fskreuz
Aug 09 2018 21:24
Only a profiler will tell :smile:
kouts
@kouts
Aug 09 2018 21:24
:smile:
Chris Reeves
@evs-chris
Aug 09 2018 21:25
there shouldn't be a huge difference
kouts
@kouts
Aug 09 2018 21:29
another one, what is instance.helpers object?
Chris Reeves
@evs-chris
Aug 09 2018 21:30
for a plugin, it depends on where it's used
it's either Ractive.helpers, Component.helpers, or instance.helpers
in this case, it's used on a component (extend), so it's the component helpers
kouts
@kouts
Aug 09 2018 21:35
so this is used to add methods right?
Chris Reeves
@evs-chris
Aug 09 2018 21:36
yes
kouts
@kouts
Aug 09 2018 21:36
nice!
Chris Reeves
@evs-chris
Aug 09 2018 21:37
any time ractive encounters a plain function call (no prefix or member screws), it checks helpers first
kouts
@kouts
Aug 09 2018 21:38
ahh I get it, no @this. needed
Chris Reeves
@evs-chris
Aug 09 2018 21:39
lol... Screws... my phone hates me. That's supposed to be member access
Cerem Cem ASLAN
@ceremcem
Aug 09 2018 21:40
btw, here is shorter version when the function is to be used in Js side, like alert(i18n('say hello'))
`
Chris Reeves
@evs-chris
Aug 09 2018 21:40
yeah, helpers are supposed to be kinda like filters from liquid-like templates
kouts
@kouts
Aug 09 2018 21:41

@evs-chris is there anyway to add to default data without monkey patching onconfig ?

Ok here's how I managed to solve it

Chris Reeves
@evs-chris
Aug 09 2018 22:53
did you get it?