Haml "render" parts misplaced all the way on top of the HTML code

I want to create static web page from Haml, and I did not use Rails or any other frameworks, just pure static HTML. I want to combine Haml parts code into single Haml, but the results were not as I expect. I am fairly new to Haml, so I tried some workarounds I found, but did not work.

First, I created my Haml code for "index" page. The code itself is simple enough, follows official Haml reference page.

index.haml

!!!
%html
  %head
    = render '.widget/meta.haml'
    %title Hello world!
    = render '.widget/link.haml'
  %body
    .container
      %nav
        = render '.widget/nav.haml'
      %header
        = render '.widget/header.haml'
      %main 
        Hello world!
      %footer
        = render '.widget/footer.haml'

Notice that I put "render" in different places. Then, I render it through command-line.

haml render index.haml > index.html

But, turns out the rendered Haml part did not placed in correct order. They were placed all the way on top of the code, shown below.

index.html

<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, initial-scale=1' name='viewport'>
<meta content='IE=edge' name='X-UA-Compatible'>
<link href='https://rsms.me/inter/inter.css' rel='stylesheet' type='text/css'>

<div class='test'></div>
<div class='test'></div>
<div class='test'></div>
<!DOCTYPE html>
<html>
<head>

<title>Hello world!</title>

</head>
<body>
<div class='container'>
<nav>

</nav>
<header>

</header>
<main>
Hello world!
</main>
<footer>

</footer>
</div>
</body>
</html>

What I expect is the rendered Haml part are placed in correct order shown below.

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, initial-scale=1' name='viewport'>
<meta content='IE=edge' name='X-UA-Compatible'>
<title>Hello world!</title>
<link href='https://rsms.me/inter/inter.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class='container'>
<nav>
<div class='test'></div>
</nav>
<header>
<div class='test'></div>
</header>
<main>
Hello world!
</main>
<footer>
<div class='test'></div>
</footer>
</div>
</body>
</html>

So, I tried some workarounds below, but it just throws an error.

render :partial => '.widget/meta.haml'

Haml::Engine.new('.widget/meta.haml').render

Haml::Engine.new(File.read('.widget/meta.haml')).render

From what I have read, Haml 6 does major changes to its code that are less backward-compatible to some solution codes. Am I should downgrade Haml to 5.2.2? If so, please tell me what should I change to my code and my command syntax.

Any answers will be appreciated. Thank you.

Solution

Okay, so I just did my last workaround with Haml. First, I downgraded Haml 6 to 5.2.2.

Second, I edited my "index" Haml code as shown below.

index.haml

!!!
%html
  %head
    = Haml::Engine.new(File.read('.widget/meta.haml')).render
    %title Hello world!
    = Haml::Engine.new(File.read('.widget/link.haml')).render
  %body
    .container
      %nav
        = Haml::Engine.new(File.read('.widget/nav.haml')).render
      %header
        = Haml::Engine.new(File.read('.widget/header.haml')).render
      %main 
        Hello world!
      %footer
        = Haml::Engine.new(File.read('.widget/footer.haml')).render

This is quite different than @parinyasa write. I use direct call method than variables to avoid another error.

Finally, I render Haml thru command-line:

haml index.haml index.html

Turns out the results was exactly what I expected.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta content='width=device-width, height=device-height, initial-scale=1' name='viewport'>
<meta content='IE=edge' name='X-UA-Compatible'>

<title>Hello world!</title>
<link href='https://rsms.me/inter/inter.css' rel='stylesheet' type='text/css'>

</head>
<body>
<div class='container'>
<nav>
<div class='test'>this is nav</div>

</nav>
<header>
<div class='test'>this is header</div>

</header>
<main>
Hello world!
</main>
<footer>
<div class='test'>this is footer</div>

</footer>
</div>
</body>
</html>

I edited my "nav", "header", and "footer" code to give a clarity that my "index" is worked correctly.

Conclusion:

As I am newcomer to Haml, I really do not know what was exactly happened to Haml. I do not know if this is version-specific error, cause I also found other devs faced some problems when upgrading Haml 5 to 6. Also, I did not found much Haml 6 tutorials, maybe because it is just released last year. As sticking to old version is not always good idea, I hope next time there will be some Haml 6 migration tutorials to make things easier.