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


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>No errors.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242381" 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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/32">Post #31</a>
	                </div>
	            </div>
              <div id="likers-container-242381" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242381"
                     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 #31"></div>
  </section>
</div>
    <div class="postbit" id="242679" data-post-id="242679">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Hey, sorry but did you manage to fix the issue?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242679" 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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/33">Post #32</a>
	                </div>
	            </div>
              <div id="likers-container-242679" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242679"
                     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 #32"></div>
  </section>
</div>
    <div class="postbit" id="242687" data-post-id="242687">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="nikokozak" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/nikokozak/120/25121_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  nikokozak
                    <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>So I took a look at this just now - good news and bad news.</p>
<p>Good news: <strong>npm packages work just fine.</strong><br>
Bad news: <em>Svelte component</em> packages don’t work.</p>
<p>If you take a look at your browser console, you’ll see it’s throwing an error to do with reading an undefined <code>$$</code> value. My best guess is that this is happening because <code>carbon-components-svelte</code> is a set of pre-compiled Svelte components that, upon being imported into <em>our</em> Svelte components, inadvertently results in duplicate versions of Svelte. The Svelte lib is stateful, and therefore this results in errors because having multiple copies of Svelte in one component is technically not allowed.</p>
<p>For those who might be interested, this only happens because of how (out of necessity), I’ve implemented the Svelte rendering pipeline. More information on these nuances is available in this fantastic <a href="https://stackoverflow.com/a/65522522/17920182" rel="noopener nofollow ugc">answer</a> to a stackoverflow question.</p>
<p>There might be a way around the issue you’re facing, but I’m really short on time for the near future - if you’re willing to give it a shot, please feel free to submit a pull request! Sorry I couldn’t be more helpful. I’ll amend the documentation to reflect this issue.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242687" data-batch-url="/posts/batch_likers">
                        1
                      </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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/34">Post #33</a>
	                </div>
	            </div>
              <div id="likers-container-242687" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242687"
                     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 #33"></div>
  </section>
</div>
    <div class="postbit" id="242691" data-post-id="242691">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks for the detailed answer! I can’t really do it but I hope someone else decides to fix it in the future.</p>
<p>Really good library, thanks for the effort you put in it!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242691" data-batch-url="/posts/batch_likers">
                        1
                      </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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/35">Post #34</a>
	                </div>
	            </div>
              <div id="likers-container-242691" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242691"
                     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 #34"></div>
  </section>
</div>
    <div class="postbit" id="242943" data-post-id="242943">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>This has a lot of potentials IMO. Making some of the things can be really powerful such as TipTap. However, I’m hitting some issues where the rendering doesn’t work when you trigger a modal. Any idea what could be the issue?</p>
<p>Loading directly to the modal works, but clicking to it doesn’t (when I click “new profile”)<br>
<img src="https://forum.elixirforum.com/uploads/default/original/3X/b/9/b95d915b9692d1ec5da8c884a78f14614aece501.gif" alt="svx2" data-base62-sha1="qrONBGVQe4sDlvdQUVvpPJY7qH7" width="690" height="388" class="animated"></p>
<p>Here’s the code context.<br>
<img src="https://i.imgur.com/LNyu5b1.png" alt="" role="presentation" width="" height=""></p>
<p>I think it has something to do with how do we mount the component on update?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242943" 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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/36">Post #35</a>
	                </div>
	            </div>
              <div id="likers-container-242943" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242943"
                     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 #35"></div>
  </section>
</div>
    <div class="postbit" id="255647" data-post-id="255647">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>From the Svonix docs – talking about how to include Svelte components in a template.</p>
<blockquote>
<ol start="2">
<li>Next, add a Svonix tag where desired (the tag name <strong>must</strong> match the filename of the component), and pass in the arguments you like:</li>
</ol>
<p><code>lib/myapp_web/templates/page/index.html.heex</code><br>
<code>&lt;%= Svonix.render "test", %{ name: "Nikolai" } %&gt;</code></p>
</blockquote>
<p>Is there any way to use slots with Svonix? Either out of the box or, possibly, in combination with Surface UI?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="255647" 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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/37">Post #36</a>
	                </div>
	            </div>
              <div id="likers-container-255647" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="255647"
                     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 #36"></div>
  </section>
</div>
    <div class="postbit" id="282021" data-post-id="282021">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Although slot support is not working 100% of the time (see the caveats section in the readme as to why), LiveSvelte is something I’ve been developing recently.</p>
<p>Slot support is still very experimental and I’d suggest using props instead if you can!</p>
<p><a href="https://github.com/woutdp/live_svelte" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/woutdp/live_svelte</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="282021" data-batch-url="/posts/batch_likers">
                        3
                      </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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/38">Post #37</a>
	                </div>
	            </div>
              <div id="likers-container-282021" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="282021"
                     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>