These are chat archives for ractivejs/ractive

19th
Jul 2018
cssandstuff
@cssandstuff
Jul 19 2018 03:29
is there a way to use a css value which is defined on the component as an attribute
App.Component('Icon', function() {
const Icon = Ractive.extend({
template: '#iconTemplate',
css:use { --color: ${this.get('colour')} },
.....

where on my Icon component I have

<script id='iconTemplate' type='text/html'>
  <svg class="icon {{type}} {{css}}">
    <use xlink:href="/img/{{type}}/svg/symbols.svg#{{name}}" stroke="{{colour}}" />
  </svg>
</script>

using in my app like

<Icon name="power-off" colour="red"></Icon>

Chris Reeves
@evs-chris
Jul 19 2018 04:36
you can use an inline style e.g. <svg style="{{css}}">...
if you are sharing the variable for all instances of a component, you can use ractive's computed css support e.g. Ractive.extend({ css(data) { return `svg { stroke: ${data('color') || '#000'};`} })
and later MyComponent.styleSet('color', 'red') and the managed css will be updated
cssandstuff
@cssandstuff
Jul 19 2018 04:39
yeah I think the latter is what I'm after but this project is only on 0.9.3 - and the css data thing is 0.9.4
Chris Reeves
@evs-chris
Jul 19 2018 04:40
ah
anything keeping you from bumping to 0.9.4?
(or later)
cssandstuff
@cssandstuff
Jul 19 2018 04:43
hopefully nothing, but its not up to me and need to implement something as is. I think I've found a workaround just using stroke="{{colour}} seems to work good enough for now.
kouts
@kouts
Jul 19 2018 11:18
I just want to say what a nice feature injecting a context into a yield is!
You don't know how useful it is until you need it :)
Chris Reeves
@evs-chris
Jul 19 2018 13:25
it is!
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 14:37
what is "injecting a context into a yield"?
read the part
that says "From 0.10.0"
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 15:58
image.png
"Full page icon" is great, BTW
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 16:14
I made some experiments with context injecting
question: do we have any chance to make can say hello? button say "hello" without using {{>content}} in place of {{yield ...}}? Playground
Chris Reeves
@evs-chris
Jul 19 2018 16:22
hmmmm... that looks like a bug
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 16:22
really? o_O
Chris Reeves
@evs-chris
Jul 19 2018 16:29
maybe, I'll poke at it when I get to a real machine
Chris Reeves
@evs-chris
Jul 19 2018 16:53
ah, no, not a bug
stuff inside the yield is effectively in it's container scope
I was looking at the templates backwards, so yes, the only way to handle that is to not yield for the event
Chris Reeves
@evs-chris
Jul 19 2018 17:06
looks like you're after a way to automatically proxy events to the parent
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 17:11
yes, exactly
Chris Reeves
@evs-chris
Jul 19 2018 17:13
I looked at adding events to the component attributes last night, but that just raised further questions about how stuff should behave
automatically firing events in the parent scope definitely breaks encapsulation, but I can see where it'd be really annoying to have to proxy a bunch of events in the template at every use site
maybe something like Ractive.extend({ on: { hello: 'hello' } }) could mitigate that? where the component would sub its own hello and proxy those events to the parent
or maybe just shorthand for reproxy e.g. <Loopy on-hello /> like svelte on:hello shorthand
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 17:26
I've question: can I achieve what "context injecting" brings to me by <Loopy list="{{things}}" bind-clicks bind-label>
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 17:33
if "yes", I'm happy with {{>context}} usage and explicitly declaring the events like this

anyhow, we might have a prefix to select event holder, like instead of

          <button on-click="hello">can say hello?</button>
          <button on-click="hi">outside hello</button>

we could use

          <button on-click="hello">can say hello?</button>
          <button on-click="^^/hello">outside hello</button>
Chris Reeves
@evs-chris
Jul 19 2018 17:44
the biggest benefit of yielding is that everything that the user passes in is in a scope that they're familiar with (the outer scope)
so they don't have to have any knowledge of the internal workings of the component
most widget-style components work better that way
kouts
@kouts
Jul 19 2018 17:46
yes that's it!
Chris Reeves
@evs-chris
Jul 19 2018 17:46
in your example, Loopy would ideally not care about hello events at all other than to pass them to the owning component
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 17:46
so with yield, we can create a drop-in replacement of a standard html tag
Chris Reeves
@evs-chris
Jul 19 2018 17:46
indeed
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 17:47
like replacing <div> with <superdiv>
okay
Chris Reeves
@evs-chris
Jul 19 2018 17:47
like webcomponents before webcomponents came along (and were not as good a replacement)
consequently, why I don't really care for webcomponents
here's the loopy example arranged for maximum convenience for its user (from my perspective anyways)
a shorthand for reproxying hello events would be an improvement, I think
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 17:53
while yielding, every event is fired from outside environment (within the parent of the component). would it bring more questions about the behaviour if we had a prefix which would mean "fire this from container/component", like:
      <Loopy list="{{things}}" >
          <button on-click="@.add('clicks')">{{.}}{{label}} </button>
          <button on-click="__/hello">can say hello?</button>
          <button on-click="hello">outside hello</button>
      </Loopy>`
Chris Reeves
@evs-chris
Jul 19 2018 17:56
I'd say maybe a special ref that means "the owner of the yield" to unyield would be reasonable e.g. <button on-click="@owner.fire('hello')">event not yielded</button>
we probably already have too many prefixes :laughing:
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 17:57
@owner looks great too :)
Chris Reeves
@evs-chris
Jul 19 2018 17:59
I think this is where refs come into play in other frameworks e.g. <cmp ref="cmpRef">this is yielded and {{cmpRef}} is a reference to the actual cmp component in the parent context</cmp>
kouts
@kouts
Jul 19 2018 21:08
Question: What do you use for bundling or building your apps? I have used webpack in a couple of small projects but I'm about to start converting a large project that currently does not have precompiled components (ie all html templates are somehow included into the DOM and the js files included in the head)
Ideally I would like to have main file and then all views should lazy load
serious
@serious_gitlab
Jul 19 2018 21:09
i don't bundle... only minify
kouts
@kouts
Jul 19 2018 21:09
I see that webpack builds something like a map for all code spiltting
files so I'm afraid that it might get pretty big
Joseph
@fskreuz
Jul 19 2018 21:20
Webpack is a common choice due to its well-known code splitting. But you'll have to put up with all the quirks tho. Much reading ahead. :joy:
If splitting is not a concern, I'd roll with just plain 'ol Rollup. Import all the things, bundle everything in one file (externalizing libs).
Paul Maly
@PaulMaly_twitter
Jul 19 2018 22:12
Webpack in most the cases. Rollup sometimes.
Cerem Cem ASLAN
@ceremcem
Jul 19 2018 22:13
browserify, but it's again one big file in the end
Chris Reeves
@evs-chris
Jul 19 2018 22:16
I use webpack for dynamic imports currently, but the new rollup support looks very nice
webpack tends to be obtusely fiddly if you come close to stepping of the beaten path