These are chat archives for ractivejs/ractive

17th
Mar 2018
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 00:13
another question: What is the best way to expose some initialization options when we are publishing a standalone component? Ractive.extend? For example, I would like to create a foo component that may use either SemanticUI or Bootstrap based on initialization:
Ractive.components.foo = Foo.settings({
  lib: 'semanticui'   // lib: either 'semanticui' or 'bootstrap'
});
Chris Reeves
@evs-chris
Mar 17 2018 01:02
I typically allow config options to be passed in at extend or unit and then install them somewhere in data if they're meant to be changeable at runtime
I also usually let some config be declarative in the template and mangle it a bit in construct and config
Chris Reeves
@evs-chris
Mar 17 2018 01:21
init* not unit
kouts
@kouts
Mar 17 2018 07:51
@ceremcem I cannot remember right now what caused me to add .cancel() on teardown, maybe a bug in a previous Ractive version? It can be removed if it's not needed.
kouts
@kouts
Mar 17 2018 11:44
It would be nice to have a template for plugin authors that matches the new Ractive theme! For example I'm using bootstrap for ractive-modal, it would be better to use an "official" theme.
Joseph
@fskreuz
Mar 17 2018 13:38
Theme depends on the app it's being used on, so it's not really useful to theme pre-theme stuff.
For instance, if it were written in Bootstrap, it's useful for bootstrap users but useless to users who use other frameworks.
Joseph
@fskreuz
Mar 17 2018 13:44
Also, nobody wants to build their own theme library from scratch. Seen lots of people do that with reasons such as "Bootstrap is heavy/overkill/confusing" and end up saying "Bootstrap would have done this for us".
kouts
@kouts
Mar 17 2018 14:20
No @fskreuz I mean the "theme" of the demo page for example for a plugin. Like this
Ractive.js load plugin - Mozilla Firefox.png
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 14:54
@kouts a "standardized plugin demo page (showcase) theme" sounds good, but I think it's either very hard or impossible to implement across all plugins
kouts
@kouts
Mar 17 2018 14:55
Yeah maybe I will just copy - paste some css over from the main site but is this the way to go?
you know just to achieve an Ractive-ish look :smile:
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 14:55
because some plugins may prefer to stay simple (like your ractive-modal), "use what ui framework you like" and some others might prefer "high level", such as @dagnelies ' "ractive-bootstrap" and my "scada.js" (which uses semantic-ui)
hmm. you mean font-family, <code /> colors, etc?
kouts
@kouts
Mar 17 2018 14:57
Yes these things. Is it ok if I use some styling of the Official Ractive page in my plugin page?
Chris Reeves
@evs-chris
Mar 17 2018 15:45
absolutely
kouts
@kouts
Mar 17 2018 15:50
:smile: @evs-chris thanks
it's copy -paste then!
Juan C. Andreu
@andreujuanc
Mar 17 2018 17:08
@ceremcem maybe, im not sure. Thanks for showing me that! and also sorry for my late reply. I think we all work at different timezones D:
Ill check more into it on monday
@kouts lovely idea!
Joseph
@fskreuz
Mar 17 2018 17:16
@kouts oh, that thing. Yeah, that was standard, until we reskinned. Building it is easy, getting it out there is easy. But getting other developers to keep up is another story.
It's another case of "we're not really in control what other developers do".
amadanmath
@amadanmath
Mar 17 2018 19:58
Hi... Posted a SO question but it might have fallen through cracks, so... can someone take a look at this, please? https://stackoverflow.com/questions/49329313/ractive-js-missing-values-and-nested-with
Chris Reeves
@evs-chris
Mar 17 2018 20:55
I'll respond to the SO in a bit (on mobile), but yeah, that's not a bug
amadanmath
@amadanmath
Mar 17 2018 20:55
Thank you
Chris Reeves
@evs-chris
Mar 17 2018 20:55
Basically, ractive converts as much as it can to a plain keypath when doing expressions
when you introduce the [], ractive can't safely convert anything from that point to a keypath
so it ends up as plain js in the expression e.g. _0[_1].foo where the underscored cars are resolved by ractive and passed in
vars* not cars
amadanmath
@amadanmath
Mar 17 2018 20:58
:D
any possible workarounds tho? i am not sure i get yet exactly what @context is so maybe my idea is stupid but would a function like get_with_default('foo[notokKey].bar', @context, defaultValue) be possible?
or a way for ractive to catch the error, ignore it and produce the undefined in that case?
because i'm feeling stuck and not sure where to go from there (that doesn't involve huge increase in my template complexity, a "death by a thousand checks" if you will)
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 22:02

I think we all work at different timezones D:

@andreujuanc I'm living in a shifting timezone these days (20 hours of work, 8 hours of sleep :smile: )

no problem
Chris Reeves
@evs-chris
Mar 17 2018 22:03
it's not exactly clean, but you can achieve the same thing by calling get directly e.g. @context.get(`foo.${someKey}.${otherKey}.bar`) in your expression
string templates are supported in ractive >= 0.9, I think
if someKey and otherKey are plain old keys (not containing .s or spaces or whatever)
amadanmath
@amadanmath
Mar 17 2018 22:04
ah, awesome. as long as i have an out, i'm good with "not exactly clean". as i said, my big problem was not really understanding @context - i couldn't find much docs on it
Chris Reeves
@evs-chris
Mar 17 2018 22:04
it's just an object available at any point in a template
and the object passed as the first arg to events
amadanmath
@amadanmath
Mar 17 2018 22:05
yeah. didn't know it had a get on it tho. :)
Chris Reeves
@evs-chris
Mar 17 2018 22:05
all of it's methods are in ractive.js.org/API under Context Object on the left menu :smile:
amadanmath
@amadanmath
Mar 17 2018 22:06
all i saw is https://ractive.js.org/api/#context saying "@context: The context object associated with the current context."
okay got it! :D
Chris Reeves
@evs-chris
Mar 17 2018 22:07
@ceremcem I live in UTC-5, but tend operate somewhere closer to UTC-10
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 22:13
@evs-chris don't expect me to believe that, you are always awake :D
@amadanmath If I were you, I would expect the same behaviour as you did
good question!
amadanmath
@amadanmath
Mar 17 2018 22:15
yeah, but i can understand if there's technical limitations why i can't do that.
Chris Reeves
@evs-chris
Mar 17 2018 22:18
if you use aliases instead of a computed context, you can probably avoid a lot of that too e.g. {{#with foo[okKey].bar as ok, foo[notokKey].bar as notOk}} rather than {{#with { ok: foo[okKey].bar, notok: foo[notokKey].bar }}}
with the added benefit of not being in a computed context, so you can still two-way bind
ractive has special support for foo[bar][baz].bat, but only if there are no other expressions involved (operators, function calls, etc)
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 22:20
yeah, that works
amadanmath
@amadanmath
Mar 17 2018 22:20
there's functions... at least somewhere
i tested the @context.get workaround, that definitely works tho. <3 i'll try aliases as appropriate, but even if that doesn't pan out, it should be okay as long as i can evaluate it somehow.
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 22:23
amadanmath
@amadanmath
Mar 17 2018 22:24
honestly i think i should read through the entire docs every two months or so, i'm either forgetting stuff i read, or some things are new and i haven't seen them before...
:P
thanks a lot for the advice
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 22:25
I think (foo || "hello") as bar shouldn't work, that would be expected behavior because in this case bar wouldn't be twoway.
amadanmath
@amadanmath
Mar 17 2018 22:27
yeah, not worried about twoway ATM, my current use case is visualisation of a bunch of semistructured data coming in through AJAX. when i have twoway i generally know what i have and where.
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 22:37
@evs-chris do you plan dropping {{#with/each {foo: bar} }} in regards to {{#with/each bar as foo}}?
amadanmath
@amadanmath
Mar 17 2018 22:47
i hope not... as i said, i have calculations: {{#with { foo: crunch(bar) } }}, which from what I understood wouldn't work with as...
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 22:58
{{#with crunch(bar) as foo}} should work as intended: Playground
amadanmath
@amadanmath
Mar 17 2018 22:59
oh ok :) i guess i misunderstood
Chris Reeves
@evs-chris
Mar 17 2018 23:00
{{#with {foo:bar}}} will still work, as you can use any value, including computations, with a with
it's just that what used to be recommended to have disjoint bits of keypath available has been replaced by aliasing
amadanmath
@amadanmath
Mar 17 2018 23:04
@ceremcem that snippet still puts warnings into my console tho T_T
although it doesn't kitten up the entire with
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 23:07
that warning is pretty normal
as it says, it can't reach a property of undefined
amadanmath
@amadanmath
Mar 17 2018 23:09
yup, i understand. it's just, as i wrote in the SO question, foo.notok.baz doesn't do it.
anyway, thanks you guys, you've been a huge help. @evs-chris if you have time and inclination to put a couple of words to SO, i'd be glad to award you some virtual points :) (after i wake up :D )
Cerem Cem ASLAN
@ceremcem
Mar 17 2018 23:14
you're welcome (for my part, if there is any)
amadanmath
@amadanmath
Mar 17 2018 23:16
for sure