These are chat archives for ractivejs/ractive

30th
Jul 2017
Chris Reeves
@evs-chris
Jul 30 2017 16:11
@fskreuz, template -> ast -> vdom -> dom is it
Chris Reeves
@evs-chris
Jul 30 2017 16:23
Change handling is a little bit different.
  1. During vdom creation, vdom elements register with models wherever appropriate e.g. {{#with foo.bar}}{{.baz}}{{/with}} - the with registers with foo.bar and the interpolator registers with foo.bar.baz - this is known as binding
  2. a model changes somewhere e.g. r.set('foo.bar', { baz: 42 })
    a. the foo.bar model notifies all of its deps (the with) that it changed - this starts from model.applyValue
    b. the foo.bar model invalidates its children, which then notify their deps (the interpolator) - this is model.mark
    c. if a child finds that its value hasn't actually changed, it is basically a noop - only scalar values are considered for equality - all object types are assumed to be dirty
  3. when the vdom items registered with the models are invalidate (handleChange), they set a dirty flag and bubble - notify their parent that they need to update, which means they also set their dirty flag and notify their parent. This bubbling propagates to the fragment root, which registers the fragment with the runloop that is currently open.
  4. when the runloop is closed (at the end of the set), registered root fragments are told to update. If their dirty flag is set, the call their update method, which typically updates their immediate content if they have any (e.g. attributes on an element) and iterate all of their children calling their update methods
    a. this is where the interpolator will eventually be reached, pull the new value, 42, from its model, and update its text node with its new value
Shuffling is a slight modification of the change propagation process - instead of applyValue, the model will call shuffle to and generate a map of old -> new index. The shuffle method will iterate all of its deps calling the shuffle method on those that support it (iterative sections) and handleChange on those that don't (pretty much everything else). The vdom items that support shuffle set a flag that they need to shuffle on the next update, bubble as usual, and then on update take a special path that shuffles rather than just overwriting values in the existing dom with what should be there now.
Chris Reeves
@evs-chris
Jul 30 2017 16:32
vdom can be bound and not renedered, which is what lets you access components that will be rendered from init in the parent instance. It's also what lets toHTML work, as all of the requisite vdom is in place and knows how to render itself as a string.
Joseph
@fskreuz
Jul 30 2017 17:59
Ahh... :thumbsup: thanks!
I think I skipped 1-3 and was only inspecting the rendering portion. :D
Chris Reeves
@evs-chris
Jul 30 2017 18:03
It's a slightly convoluted process, but it's like 4 years old now and still among the fastest for updates.
Chris Reeves
@evs-chris
Jul 30 2017 22:59
I came up with a zero-overhead-if-you-don't-use-it way to have bin component css templates using the familiar ractive template syntax. It's now implemented in #3041.
<style type="text/css+ractive">
  div { color: {{component.fg || fg || '#07e'}}; }
</style>
all of the processing is handled by the bin, except for actually running the template, which requires a ractive instance to be created at runtime
I'm not married to the text/css+ractive, and considered just trying to parse any plain css section
if they parse with more than one template chunk, meaning that there was an interpolator or section found, handle it as a template
would that be preferable, or could interpolators occur naturally in normal css?