These are chat archives for ractivejs/ractive

30th
Aug 2017
kouts
@kouts
Aug 30 2017 10:00
Vue.js uses something called Async Components, is a similar concept viable with current Ractive architecture or it's impossible due to Ractive's "synchronous" nature?
Chris Reeves
@evs-chris
Aug 30 2017 10:04
I'm not very familiar with vue, but ractive requires the component to be present in order to render it, so you can't, say, set Ractive.components.asyncThing = Promise.resolve(MyComponent)
If you're async loading view rather than widgets, you can pretty easily manage a registry of unloaded components and use the registry as a guard for rendering
if you're trying to load widgets like that, it will likely be painful, because each use-site requires a conditional
support for a component promise could be added, but there are some interesting questions to answer in the process like "should anything be rendered until the actual component loads?"
if so, how is it specified?
you could hack support in a plugin, but it would get a little weird
Chris Reeves
@evs-chris
Aug 30 2017 10:10
it would require a component that pushed all of its attrs/mappings/partials through to its template and only rendered the target component when available
Joseph
@fskreuz
Aug 30 2017 13:55
Tip of the day: Need i18n on Ractive? Just stick an object of key-translation pairs on Ractive.defaults.data and access them across all Ractive instances. No special plugins required.
Ractive.defaults.data.i18n = {
  message: Drupal.t('Hello, World!') // Drupal.t() is Drupal's built-in translation function. You can use whatever's available in yours.
}

const Component = Ractive.extend({
  template: `<div>{{ i18n.message }}</div>`
})
In this case, translations are done on runtime. If you have fixed translation files (ala ng-translate), load them then stick them to Ractive.defaults.data. Usage remains the same.
I once created a decorator for this, but this one is by far the easiest to do.