<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="276043" data-post-id="276043">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Sebb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Sebb/120/21818_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Sebb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Yes it works. To summarize what to do to use LV 0.18-HTMLEngine as a template engine:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir"># mix.exs / deps
[
  {:jason, "~&gt; 1.4.0"},
  {:phoenix_live_view, "~&gt; 0.18"}
]
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir"># config.exs
import Config
# only to make Phoenix happy
config :phoenix, :json_library, Jason
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir"># sample.ex
defmodule Sample do
  require EEx

  source = "sample.html.heex"

  EEx.function_from_file(
    :def,
    :sample,
    source,
    [:assigns],
    engine: Phoenix.LiveView.HTMLEngine,
    caller: __ENV__,
    source: source
  )

  def render(assigns) do
    sample(assigns) |&gt; Phoenix.HTML.Safe.to_iodata() |&gt; to_string()
  end

  def render_to_file(path, assigns) do
   # writing to a file does not need to_string
   sample(assigns)
   |&gt; Phoenix.HTML.Safe.to_iodata()
   |&gt; then(fn data -&gt; File.write!(path, data) end)
  end
end
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir"># my_component.ex
defmodule MyComponent do
  use Phoenix.Component

  def greet(assigns) do
    ~H"""
    &lt;p&gt;Hello, &lt;%= assigns.name %&gt;&lt;/p&gt;
    """
  end
end
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir"># sample.html.heex
&lt;MyComponent.greet name={@name} /&gt;
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir"># iex(1)&gt; Sample.render(%{name: "World"})
# "&lt;p&gt;Hello, World&lt;/p&gt;"
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="276043" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/eex-function-from-file-for-heex/45930/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-276043" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="276043"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="276046" data-post-id="276046">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="LostKobrakai" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/LostKobrakai/120/3072_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  LostKobrakai
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Any reason not to use <code>embed_templates</code>?</p><aside class="onebox allowlistedgeneric" data-onebox-src="https://phoenix-live-view.hexdocs.pm/0.18.11/Phoenix.Component.html">
  <header class="source">

      <a href="https://phoenix-live-view.hexdocs.pm/0.18.11/Phoenix.Component.html" target="_blank" rel="noopener nofollow">phoenix-live-view.hexdocs.pm</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://phoenix-live-view.hexdocs.pm/0.18.11/Phoenix.Component.html" target="_blank" rel="noopener nofollow">Phoenix.Component — Phoenix LiveView v0.18.11</a></h3>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="276046" data-batch-url="/posts/batch_likers">
                        2
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/eex-function-from-file-for-heex/45930/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-276046" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="276046"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="276050" data-post-id="276050">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Sebb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Sebb/120/21818_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Sebb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Just when I think: <em>“what a mess, someone should write a macro that automatically loads the templates!”</em></p>
<p>I just didn’t know about that. Very nice, thank you.</p>
<p>So the whole thing looks like:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">defmodule Sample do
  use Phoenix.Component

  import MyComponent

  # sample.html.heex is here
  embed_templates("templates/*")

  def render(template, assigns, path \\ nil) do
    rendered = apply(__MODULE__, template, [assigns]) |&gt; Phoenix.HTML.Safe.to_iodata()
    if path, do: File.write!(path, rendered), else: to_string(rendered)
  end
end
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="276050" data-batch-url="/posts/batch_likers">
                        5
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/eex-function-from-file-for-heex/45930/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-276050" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="276050"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-solved cat-solved" title="Marked as solution"></div>
  </section>
</div>
    <div class="postbit" id="287451" data-post-id="287451">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Sebb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Sebb/120/21818_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Sebb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>If someone is coming here to do it the hard way (without <code>embed_templates</code>, eg you need more control).<br>
This changed with LV 0.18, one now has to:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">EEx.function_from_file(
          :def,
          :fun_name,
          source,
          [:assigns],
          engine: Phoenix.LiveView.Engine,
          caller: __ENV__,
          source: source
)
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="287451" data-batch-url="/posts/batch_likers">
                        4
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/eex-function-from-file-for-heex/45930/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-287451" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="287451"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 3 liked posts in this thread!"></div>
  </section>
</div>
    <div class="postbit" id="287958" data-post-id="287958">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Sebb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Sebb/120/21818_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Sebb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><strong>warning</strong> - not true, this is <code>leex</code> engine.<br>
Cant get this to work with <code>heex</code>-engine. Using <code>Phoenix.LiveView.HTMLEngine</code> will complain that it has no <code>init/1</code>.</p>
<p>So I now do <code>Phoenix.Template.compile_all</code> which is a little odd if you want to get a function for exactly one file. But you can still do it:</p>
<p>if you have this template:</p>
<p><code>/foo/bar/template.html.heex</code></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">Phoenix.Template.compile_all(
  fn _ -&gt; "template" end,
  "/foo/bar/",
  "template.html" # do not add .heex here! Its automatically added to the pattern!
)
</code></pre>
<p>note, that you can just give this to the engines arg:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">%{md: Phoenix.Template.engines().heex, ...}
</code></pre>
<p>Now you can read markdown into a template! Cool.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="287958" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/eex-function-from-file-for-heex/45930/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-287958" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="287958"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #15"></div>
  </section>
</div>
    <div class="postbit" id="288085" data-post-id="288085">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Sebb" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/Sebb/120/21818_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Sebb
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>its me again <img src="https://forum.elixirforum.com/images/emoji/apple/crazy_face.png?v=15" title=":crazy_face:" class="emoji" alt=":crazy_face:" loading="lazy" width="20" height="20"></p>
<p>Got heex 0.18 running with EEx.function_from_file.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">EEx.function_from_file(
    :def,
    :sample,
    "sample.html.heex",
    [:assigns],
    engine: Phoenix.LiveView.TagEngine,
    caller: __ENV__,
    source: "sample.html.heex",
    tag_handler: Phoenix.LiveView.HTMLEngine
  )
</code></pre>
<p>Dont ask me whats going on, no idea, (and <code>tag_handler</code> is also not yet documented) I copied the solution from here: <a href="https://forum.elixirforum.com/t/using-eex-eval-string-with-heex-engine-on-live-view-0-18-18/55791/2" class="inline-onebox" rel="nofollow">Using EEx.eval_string with HEEx Engine on live_view 0.18.18 - #2 by chrismccord</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="288085" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/eex-function-from-file-for-heex/45930/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-288085" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="288085"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>