label doesn't accept color attribute?

[7stud]

19:42:59.285 [error] Error in application loop:
  ** (MatchError) no match of right hand side value: 
{:error, "Invalid attributes: 'label' does not accept attributes [:color]"}
    (ratatouille) lib/ratatouille/runtime.ex:123: Ratatouille.Runtime.loop/1
    (ratatouille) lib/ratatouille/runtime.ex:109: Ratatouille.Runtime.run/1
    (elixir) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
    (stdlib) proc_lib.erl:247: :proc_lib.init_p_do_apply/3

My code:

defmodule Counter do
  @behaviour Ratatouille.App

  import Ratatouille.View

  def init(_context), do: 0  

  def update(model, msg) do
    case msg do
      {:event, %{ch: ?+}} -> model + 1
      {:event, %{ch: ?-}} -> model - 1
      _ -> model
    end
  end

  def render(model) do
    view do
      label(content: "Counter is #{model} (+/-)", color: :green)
    end
  end

end

Ratatouille.run(Counter)

From the docs:

# Labels are block-level, so this makes text within the whole block red.
label(content: "Red text", color: :red)

Okay...so let's copy and paste the exact line from the docs into my code:

defmodule Counter do
  @behaviour Ratatouille.App

  import Ratatouille.View

  def init(_context), do: 0  

  def update(model, msg) do
    case msg do
      {:event, %{ch: ?+}} -> model + 1
      {:event, %{ch: ?-}} -> model - 1
      _ -> model
    end
  end

  def render(_model) do
    view do
      label(content: "Red text", color: :red)
    end
  end

end

Ratatouille.run(Counter)

Same error:

9:54:27.071 [error] Error in application loop:
  ** (MatchError) no match of right hand side value: 
{:error, "Invalid attributes: 'label' does not accept attributes [:color]"}
    (ratatouille) lib/ratatouille/runtime.ex:123: Ratatouille.Runtime.loop/1
    (ratatouille) lib/ratatouille/runtime.ex:109: Ratatouille.Runtime.run/1
    (elixir) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
    (stdlib) proc_lib.erl:247: :proc_lib.init_p_do_apply/3

mix.exs:

  ...
  ...
  defp deps do
    [
      # {:dep_from_hexpm, "~> 0.3.0"},
      # {:dep_from_git, git: "https://github.com/elixir-lang/my_dep.git", tag: "0.1.0"}
      {:ratatouille, "~> 0.4.0"}
    ]
  end

I get the same error when I try a background style:

  def render(_model) do
    view do
      #label(content: "Counter is #{model} (+/-)")
      label(content: "Red text", background: :green)
    end
  end

error:

0:39:51.208 [error] Error in application loop:
  ** (MatchError) no match of right hand side value: 
{:error, "Invalid attributes: 'label' does not accept attributes [:background]"}
    (ratatouille) lib/ratatouille/runtime.ex:123: Ratatouille.Runtime.loop/1
    (ratatouille) lib/ratatouille/runtime.ex:109: Ratatouille.Runtime.run/1
    (elixir) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
    (stdlib) proc_lib.erl:247: :proc_lib.init_p_do_apply/3

Same thing with a panel instead of a label:

defmodule Counter do
  @behaviour Ratatouille.App

  import Ratatouille.View

  def init(_context), do: 0  #like initial state of gen_server
                              #becomes initial value of `model`

  def update(model, msg) do
    case msg do
      {:event, %{ch: ?+}} -> model + 1
      {:event, %{ch: ?-}} -> model - 1
      _ -> model
    end
  end

  def render(_model) do
    view do
      #label(content: "Counter is #{model} (+/-)")

      panel(content: "Red text", background: :green)
    end
  end

end

Ratatouille.run(Counter)

error:

20:45:27.522 [error] Error in application loop:
  ** (MatchError) no match of right hand side value: 
{:error, "Invalid attributes: 'panel' does not accept attributes [:background, :content]"}
    (ratatouille) lib/ratatouille/runtime.ex:123: Ratatouille.Runtime.loop/1
    (ratatouille) lib/ratatouille/runtime.ex:109: Ratatouille.Runtime.run/1
    (elixir) lib/task/supervised.ex:90: Task.Supervised.invoke_mfa/2
    (stdlib) proc_lib.erl:247: :proc_lib.init_p_do_apply/3

[ndreynolds]

Hi @7stud, thanks for the detailed report!

I think you just need to update the version of Ratatouille to the 0.5 release, e.g.:

# mix.exs
defp deps do
  [{:ratatouille, "~> 0.5"}]
end

(And then a mix deps.get, of course.)

Being able to pass those attributes to label was a relatively recent addition in that release. I'll update the installation instructions in the README here shortly so that this doesn't trip up anyone else.

Sorry that you ran into this! I definitely want getting started to be a smooth experience. Please let me know if you still run into issues after updating.

[7stud]

Okay, updating the ratatouille version worked. If anyone else wants to try, here's a simple modification of the view in the counter example:

  def render(model) do
    view do
      panel(title: "My Counter", background: :red) do
        label(content: "Counter is #{model} (+/-)", background: :green)
      end
    end
  end

Pretty neat. Thanks!

[ndreynolds]

Great, glad that worked!