Facing some issues while using rendering related plugins for building a basic web app

[jiggneshhgohel]

I am trying to build a web application using Roda and as part of that I am following the section https://fiachetti.gitlab.io/mastering-roda/#rendering to render views.

While implementing a basic TODO listing I encountered some problems which are detailed ahead i.e. after the implementation I have come up with and which is shown below. Note that I prefer to write my views using HAML and thus I have configured that as the template engine for tilt.

In my Gemfile

source 'https://rubygems.org'

ruby '3.0.2'

gem 'roda', '~> 3.51'

gem 'haml', '~> 5.2', '>= 5.2.2'
gem 'tilt', '~> 2.0', '>= 2.0.10'

group :development do
  # Reference: https://stackoverflow.com/questions/63811244/rails-will-not-run-server
  gem 'webrick', '~> 1.7'
end

group :development, :test do
  gem 'rack-unreloader', '~> 1.8'
end

group :test do
  gem 'rspec', '~> 3.10'
  gem 'rack-test', '~> 1.1'
end

app.rb

require "roda"

# Temp class
class Task
  attr_accessor :id, :title, :is_done

  def initialize(id:, title:, is_done: nil)
    @id = id
    @title = title
    @is_done = !!is_done
  end

  def is_done?
    is_done
  end
end

class App < Roda

  # TODO: Temporary
  TASKS = begin
    titles = [
      # TODO: Deliberately wrapped this title in angle brackets to ensure render escapes it.
      # But when the page gets rendered this title gets rendered as a tag `<task-1></task-1>`.
      # I guess this is done by HAML but how do we avoid this?
      #"<Task-1>",
      "Task-1",
      "Task-2",
      "Task-3",
      "Task-4"
    ]

    task_status_values = [ true, false ]

    hash = {}

    titles.each_with_index do |t, i|
      id = i + 1
      hash[id] = Task.new(id: id, title: t, is_done: task_status_values.sample)
    end

    hash
  end


  # TODO: For `haml` engine setting `escape: true` raises error
  # tilt-2.0.10/lib/tilt/erubi.rb:2:in `require': cannot load such file -- erubi (LoadError)
  # This has been warned about in https://roda.jeremyevans.net/rdoc/classes/Roda/RodaPlugins/Render.html
  # for :escape option. And based on the documentation there is a provision to
  # deal with that error but the statement is bit confusing to understand. So
  # checked the plugin code
  # at https://github.com/jeremyevans/roda/blob/master/lib/roda/plugins/render.rb#L306.
  # tried setting `escape: 'haml'` OR `escape: [ 'haml' ]` but it raises the same
  # error mentioned about above. Will need to seek help regarding this.
  #plugin :render, engine: 'haml' #, escape: [ 'haml' ]

  plugin :render, engine: 'haml', layout: './layout'
  plugin :view_options
  plugin :render_each

  # TODO: There is problem in the behaviour of this. Refer comments
  # in views/tasks/all.haml
  plugin :content_for

  plugin :not_found do
    File.read('public/404.html')
  end

  plugin :error_handler do |e|
    # Ideally we should log the error in `e` to know what actually happened. 
    # logger.error(e)

    File.read('public/500.html')
  end

  route do |r|
    r.root do
      view "home"
    end

    r.on 'tasks' do
      set_view_subdir "tasks"

      r.get 'pending' do
        view "pending", locals: { tasks: TASKS.values.select { |t| !t.is_done? } }
      end

      r.get true do
        view "all", locals: { tasks: TASKS.values }
      end

      r.get Integer do |id|
        task = TASKS[id]
        next unless task
        view "task_details", locals: { task: task }
      end
    end
  end
end

views/layout.haml

!!!
%html<
  %head<
    %title= @page_title || 'TODO List'
    %style<
      ul { list-style: none; }
      ul .todo { color: red;}
      ul .done { color: green;}

      span.todo { color: red;}
      span.done { color: green;}

  %body<
    = yield

    .footer<
      -# TODO:
      -# Issue-1: There is an issue with content_for. See comments added in
      -# `views/tasks/all.haml`
      -#
      -# Issue-2: When using `view_options` plugin and `/tasks` route is attempted
      -# to be accessed following error is encountered: No such file or directory @ rb_sysopen - /path_to_my_project_root/views/tasks/footer.haml (Errno::ENOENT)
      -#= content_for(:footer) || render('footer')

views/tasks/all.haml

- @page_title = "All Tasks"

%h2 All TODOs
%ul<
  = render_each(tasks, "tasks/partials/task_for_listing", local: :task)

%p<
  %a(href='/tasks/pending') Show only Pending Tasks

-# TODO: This gets directly rendered instead of getting stored for rendering in the layout.
-# content_for(:footer) do
  There are #{tasks.size} tasks total.

Problems

1. For haml engine setting escape: true raises error

/path_to_gems/tilt-2.0.10/lib/tilt/erubi.rb:2:in `require': cannot load such file -- erubi (LoadError)
Did you mean?  erb
  from /path_to_gems/tilt-2.0.10/lib/tilt/erubi.rb:2:in `<top (required)>'
  from /path_to_gems/roda-3.52.0/lib/roda/plugins/render.rb:301:in `require'
  from /path_to_gems/roda-3.52.0/lib/roda/plugins/render.rb:301:in `configure'
  from /path_to_gems/roda-3.52.0/lib/roda.rb:296:in `plugin'
  from /path_to_project/app.rb:75:in `<class:App>'
  from /path_to_project/app.rb:21:in `<top (required)>'

Such error has already been warned about in https://roda.jeremyevans.net/rdoc/classes/Roda/RodaPlugins/Render.html
for :escape option as quoted below (notice the part in italics):

Use Erubi as the ERB template engine, and enable escaping by default, which makes <%= %> escape output and <%== %> not escape output. If given, sets the escape: true option for all template engines, which can break some non-ERB template engines. You can use a string or array of strings as the value for this option to only set the escape: true option for those specific template engines.

As can be seen there is a provision to deal with that limitation but I found the statement (quoted below) confusing regarding what to actually set?

You can use a string or array of strings as the value for this option to only set the escape: true option for those specific template engines.

So I checked the plugin code at https://github.com/jeremyevans/roda/blob/master/lib/roda/plugins/render.rb#L306.
and tried setting escape: 'haml' OR escape: [ 'haml' ] but it raises the same error as shown above.

So how do I get this problem solved and enable the escape option? BTW HAML's supported option for this is :escape_html.

2. In my task list I had a task titled "<Task-1>" but this task got rendered as a tag <task-1></task-1> when views/tasks/all.haml was rendered.

...
...
<li>
  <input checked="" type="checkbox">
  <a href="/tasks/1">
    <task-1></task-1>
  </a>
</li>
...
...

I guess this is done by HAML but how do we avoid this?

Note: Actually I deliberately wrapped the title in angle brackets to verify that render plugin escapes it if escape option is passed as true. But as I could not pass the escape option for HAML engine this problem is secondary.

3. When using content_for plugin I encountered a problem as is commented in my views/tasks/all.haml shown above. What happens is that the snippet given to content_for like following

- content_for(:footer) do
  There are #{tasks.size} tasks total.

for storing against the name :footer and which is supposed to be rendered by the layout, it gets rendered as part of views/tasks/all.haml itself and while rendering as part of the layout the views/tasks/all.haml markup gets rendered insider the footer div. See screenshots 1.png and 2.png below.

1.png

2.png

So what could be the problem and how to resolve this?

4. When using view_options plugin and then the /tasks route is accessed following error is encountered:

No such file or directory @ rb_sysopen - /path_to_my_project_root/views/tasks/footer.haml (Errno::ENOENT)

So what could be the problem and how to resolve this?

Thanks.

[loranger32]

Hi,

I didn't have the time to investigate issues 2, 3 and 4, but regarding your first issue (escaping in haml templates), here is what I use, and it works:

plugin :render, engine: "haml", template_opts: {escape_html: true}

I do not need the tilt gem in order for this to work, only haml gem.

Hope this helps.

Cheers

[jeremyevans]

I do not need the tilt gem in order for this to work, only haml gem.

I don't see how you could possibly get the render plugin to work without the tilt gem, considering the render plugin uses Tilt for all template rendering.

[loranger32]

Hi Jeremy, I was wrong, the tilt gem is indeed required. But because tilt is also a dependency of haml, when requiring haml, tilt is required as well.

[jeremyevans]

Ah, that explains it. Seems odd for a template library to require tilt, but I'm guessing there is a reason they did that.

[jeremyevans]

1. The failure is expected. If you use the render plugin :escape option, it eagerly requires erubi, so you must have erubi installed. You should probably use :template_opts for some haml specific option if using haml, as shown by @loranger32 .

2. No idea, I have very little experience with haml. You should ask the haml developers or consult the haml documentation.

3. The content_for plugin is only tested with erb templates. I think with haml you can use capture_haml. See the spec removed in cc4b490.

4. I'm not sure how you are using the view_options plugin. If you are setting a view subdirectory, you could try changing the layout to use render('./footer'), which will stop it from looking in the view subdirectory you have set.

[loranger32]

Regarding the third issue, and as suggested by Jeremy, the following code removes the duplication :

- content_for(:footer) do
  - capture_haml { "There are #{tasks.size} tasks total" }

[loranger32]

Note that content_for can also be called with a value as second argument and no block.

- content_for :footer, "There are #{tasks.size} tasks total"

This non-block form of content_for also works without issue, because the capture_erb method is not called inside content_for, where the incompatibility with haml probably lies.

[jiggneshhgohel]

@loranger32 , @jeremyevans Thank you to both of you for your prompt replies. Using the suggestions given by both of you problems 3 and 4, in my comment #242 (comment), got resolved.

@loranger32 regarding problem 1 for which you suggested to pass template_opts: {escape_html: true} to the render plugin I did that and it was happily accepted by the plugin. But because of that option another problem has come up and that is in every view I am seeing escaped content. Please see the screenshots below:

1.png (home page view)

2.png (all tasks view)

Any idea what can be the reason behind this and how to fix it?

[loranger32]

@jiggneshhgohel yes, it now escapes everything, even legitimate html.

To avoid html escaping, on places in your haml files where you trust the return value of the expression that will be evaluated, you need to replace = with != :

%body<
    != yield

    .footer<
      != content_for(:footer) || render('footer')

See Unescaping HTML: != in haml docs

[jiggneshhgohel]

@loranger32 w.r.t #242 (comment) don't you think that it should prove to be better to not at all set the escape_html option and instead use the H plugin to specifically escape content returned by routes which may return data from sources beyond the application's control? My reasoning behind saying so is using != yield, irrespective of whether it will be known or unknown content, it would get rendered as it is and thus setting escape_html would prove to be futile. Thoughts?