<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="239345" data-post-id="239345">
  <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><a class="mention" href="/u/eiji" rel="nofollow">@Eiji</a> I’m going to be looking at providing support for SPA’s (haven’t looked at what that would entail, if anything - I almost think that you could get by with one “master” component that’s injected into one view as-is in terms of what the library supports now, but it might be more reasonable to define a separate build process in case an SPA is the goal), and hopefully building out some small JS helpers to help with websockets on the Svelte side. I think the approach you suggest is interesting, and definitely worth exploring.</p>
<p>In terms of why use JS only partially - the library came about because I was designing a few “games” that were far too complex to make work using only LiveView, and that had to be scattered throughout the site, and Svelte seemed like the perfect tool for the job. Nonetheless, the site still benefits from being SSR’d, given the nature of the domain. That being said - I’m sure most of what I’m doing could be replicated in LiveView with enough sweat and tears, I just found that the moment I made the conceptual shift to working with Svelte for these small components, I felt much more productive and “in control” (granted, I’m also sacrificing the simplicity of keeping it all in Elixir).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="239345" 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/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-239345" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="239345"
                     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="239347" data-post-id="239347">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/nikokozak" rel="nofollow">@nikokozak</a> Oh, I see … Obviously <code>LiveView</code> is not the answer for everything as simply thee is no rule without exceptions. <img src="https://forum.elixirforum.com/images/emoji/apple/smiling_imp.png?v=15" title=":smiling_imp:" class="emoji" alt=":smiling_imp:" loading="lazy" width="20" height="20"></p>
<p>Also you are right that some things at least at start are not easy in <code>LiveView</code>. I’m not into the gaming, but I can imagine that uploading files in <code>LiveView</code> also was complicated. If we would go for gaming then we would need to have something like <code>LiveCanvas</code> or <code>LiveGL</code> which is definitely too much effort for a small project and introducing alternative “cheap” solution like this makes perfect sense.</p>
<p>Thanks for clarification. <img src="https://forum.elixirforum.com/images/emoji/apple/+1.png?v=15" title=":+1:" class="emoji" alt=":+1:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="239347" 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/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-239347" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="239347"
                     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="239393" data-post-id="239393">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I am very interested in this project.</p>
<p>I’ll love to contribute.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="239393" 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/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-239393" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="239393"
                     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 #13"></div>
  </section>
</div>
    <div class="postbit" id="239399" data-post-id="239399">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>You might want to check this project out.</p>
<p><a href="https://github.com/arlac77/svelte-websocket-store" class="onebox" target="_blank" rel="noopener nofollow ugc">https://github.com/arlac77/svelte-websocket-store</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="239399" 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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-239399" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="239399"
                     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 #14"></div>
  </section>
</div>
    <div class="postbit" id="239452" data-post-id="239452">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Looks really interesting, but this is for raw <code>ws</code> connection, so someone would need to modify or rewrite it to support <code>Phoenix</code> channels … Anyway it may be amazing starting point, many thanks!</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="239452" 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/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-239452" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="239452"
                     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="239503" data-post-id="239503">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="Taufeeq_Mowzer" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  Taufeeq_Mowzer
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Would this make it possible to utilize Svelte for SPA parts and use Live View along with it for server rendered html?</p>
<p>This way it would be possible to build a complete SPA/website that is snappy on client side but keeping things you want to on the server to remain there using Live View</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="239503" 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/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-239503" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="239503"
                     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 #16"></div>
  </section>
</div>
    <div class="postbit" id="239523" data-post-id="239523">
  <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>If I understand your question - I think in theory yes. For example, you could have a whole live-view based series of routes in your site (for example, your “index”, “about us”, etc. all of these using some form of dynamic data where LiveView makes sense), but also have a single “master” Svelte component rendered in your “authorized” routes (i.e. the actual “app” the user uses when logged in), which would act as an SPA.</p>
<p>That said - in my experience I haven’t really found integrating Svelte + LiveView to be particularly useful (unless you want to do websocket stuff, then LV makes a ton more sense), in that they’re both ways of targeting the same need, except that LiveView allows you to avoid writing JS.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="239523" 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/svonix-svelte-phoenix-1-6-easily-create-and-use-svelte-components-in-phoenix/45222/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-239523" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="239523"
                     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 #17"></div>
  </section>
</div>
    <div class="postbit" id="242096" data-post-id="242096">
  <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>Hey <a class="mention" href="/u/nikokozak" rel="nofollow">@nikokozak</a>   I’m running into this issue where I’m getting the error:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">  The plugin "svonix" was triggered by this import

    js/app.js:2:7:
      2 │ import 'svonix'
        ╵        ~~~~~~~~

1 error
[watch] build finished, watching for changes...
/Users/chrisking/Projects/myapp/assets/node_modules/esbuild/lib/main.js:1601
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
build.js:100:91: ERROR: [plugin: svonix] path is not defined
</code></pre>
<p>My watchers are the following and I’ve done the <code> import 'svonix'</code></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">watchers: [
    # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
    node: ["build.js", "--watch", cd: Path.expand("../assets", __DIR__)],
    esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
    npx: [
      "tailwindcss",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css",
      "--postcss",
      "--watch",
      cd: Path.expand("../assets", __DIR__)
    ]
  ]
</code></pre>
<p>Any idea what’s going on?</p>
<p>Thanks for making this <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242096" 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/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-242096" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242096"
                     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 #18"></div>
  </section>
</div>
    <div class="postbit" id="242107" data-post-id="242107">
  <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>Hi <a class="mention" href="/u/morzaram" rel="nofollow">@Morzaram</a>! Hmmm… I tested your watcher setup on a similar project I have (tailwind, etc) and it didn’t throw an error.</p>
<p>Two things that pop into my mind:</p>
<ol>
<li>I don’t include the esbuild watcher in my watchers, given that <code>build.js</code> does that for me (specifically, watches any <code>.svelte</code> files we’re building). Nonetheless, as I tested it just now, it should work.</li>
<li>The way the <code>esbuild</code> flow works, as declared in <code>build.js</code>, is that it looks for the <code>import 'svonix'</code> statement and replaces it with a whole block of code dictating how our compiled <code>.svelte</code> files are mounted into our site’s html. In other words, the fact that it’s throwing that error means that this replacement is not happening, and <code>esbuild</code> is actually looking for a <code>svonix</code> path in your <code>node_modules</code>. Granted, my diagnosis might be wrong, but I think there’s something either a) preventing <code>build.js</code>’s <code>esbuild</code> rules from happening, or b) a secondary <code>esbuild</code> process is running after the one defined in <code>build.js</code>, encountering <code>import 'svonix'</code>, and thinking it’s a node_module.</li>
</ol>
<p>I hope this helps - I’ll take a more in-depth look this afternoon, thanks for bringing this up!</p>
<p>EDIT: Actually, nevermind - what’s causing the error is the inclusion of this line: <code>esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}</code>. I’ll take a look at what exactly this is doing for us, and whether we can get around the error whenever this is declared. As I mentioned before, watching <code>.svelte</code> files shouldn’t be an issue - is there any specific reason you’re including this line?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242107" 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/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-242107" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242107"
                     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 #19"></div>
  </section>
</div>
    <div class="postbit" id="242118" data-post-id="242118">
  <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>Hey thanks for the quick response. No, I think it was just the default compiler. Despite removing that line it’s still giving me issues. Is there a repo/files that you can share so I can see the setup since you’re also using tailwind?</p>
<p>I do think you’re right that there’s another rebuild running but I’m not sure how else it would fire if the watcher isn’t there. Any ideas? This is probably due to how new I am to elixir and phoenix <img src="https://forum.elixirforum.com/images/emoji/apple/sweat_smile.png?v=15" title=":sweat_smile:" class="emoji" alt=":sweat_smile:" loading="lazy" width="20" height="20"></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="242118" 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/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-242118" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="242118"
                     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 #20"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/45222/load_more?page=3">Load more posts (17 remaining)</a>
</div></template></turbo-stream>