More samples on using Humid on Rails

[yoonwaiyan]

Hi @thoughtbot particularly Johny Ho, thanks for the hard work on this package!

We're exploring whether this could be a solution to our existing issue in my company, but we're in lack of more information on using this gem. Our goal is to minimize the use of javascript to increase performance of the page load, thus trying not to use any JS framework at all including React or Vue.

I see that the sample provides the usage of using renderToString from React, of which I'm hopeful that it returns a string of HTML after render, but we're trying on a very simple sample by just returning <h1>Hello World</h1> in the setHumidRenderer as below:

setHumidRenderer(() => {
  return '<h1>hello world</h1>';
});

but this renders exactly the same string including the <h1> tag. I'm wondering are we missing something here?

[jho406]

Hi! Welcome to Humid! And thank you so much for commenting.

we're in lack of more information on using this gem

I'll have to find more time to add examples 😄

but this renders exactly the same string including the <h1> tag. I'm wondering are we missing something here?

Does this example help?

// javascript land
setHumidRenderer(function(first_name, last_name) {
  return `hello ${first_name} ${last_name}`
})

// ruby land
Humid.create_context
Humid.render("John", "Smith") # hello John Smith

The most helpful tip I have is that Humid is a very lightweight wrapper around mini_racer and comes with the same minimal v8 environment. That means that there is no fetch and you have to bring your own bundled file. So its best to grab all your data upfront then pass it through like in the README example with react.

Humid.render(some_json_payload)

[yoonwaiyan]

Thanks for the reply! We managed to make it work by appending .html_safe:

<%= Humid.render(payload).html_safe %>

I wonder if you have the same issue before or there are some misconfiguration from our repo.

[jho406]

Ah thank you! It appears there is a mistake in the README. Your example is correct. Apologies, i'll get that updated.