Understanding data flow

[ghost]

It was a bit difficult to understand passing data doc so sharing my study note here

Data flow in components

Layout to its components

c &my_component/1 do
  slot :my_slot, my_attribute: "foo" do
    "hello"
  end

  slot :my_slot, another_attribute: "bar" do
    "world"
  end
end

# my_component/1
[first | rest] = @my_slot
first.my_attribute

slot @my_slot

[second] = rest
second.another_attribute

# foo hello world bar

Slot insertions are bundled into a list and passed as an assign of the slot name. Slot attributes can be found as an element of the insertion map.

Component to its layout — :let!

c &my_component/1, let!: my_parameter do
  my_parameter.my_assign
end

# my_component/1
slot @inner_block, my_assign: "foo"

:let! can pattern-match and consume data assigned from component

c &my_component/1 do
  slot :my_slot, let!: my_parameter do
    my_parameter.my_assign
  end
end

# my_component/1
slot @my_slot, foo: "bar"

Same applies to named ones