eleventy + sveltejs

[Nico-L]

Hi,

So I am trying to integrate svelte in eleventy. I produced a codesandbox (I don't know if anybody can access it:
https://codesandbox.io/s/github/Nico-L/svelte-eleventy/tree/master/

It's working... at least almost.

I succeeded in integrating the resulting js bundle from svelte in a eleventy template. The expected result is showing itself if the svelte output is simple.

But when I used an each loop on any array in the svelte app, the eleventy serving shows nothing and no error is thrown. The codesandbox is not working but as soon as you remove

<ul>
    {#each cats as { id, name }, i}
        <li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
            {i + 1}: {name}
        </a></li>
    {/each}
</ul>

in src/svelte/App.svelte everything else is showing correctly.

What could be the problem? I am suspecting some conflict between {each} from svelte and eleventy...

thanks

[Nico-L]

OK, I am starting to see what is happening though I don't know how to fix it.

In the example above, the page uses only

{% extends './_layouts/base.njk' %}

{% block scripts %}
{% set js %}
{% include "js/bundle.js" %}
{% endset %}
<script>{{ js | safe }}</script>
{% endblock %}

bundle.js being the app compiled by svelte. Without the svelte {#each} loop in the app, the bundle is correcly included. With the loop, the bundle is not included at all. I have added a .eleventyignore with the path to bundle.js and added a passThroughCopy of the js folder but bundle.js is still going through Eleventy pipeline and not included if the {#each} loop is present.

If I directly include

<script src="js/bundle.js"></script>

in the layout, everything works fine. Since Svelte will be used only on very specific pages, i'd like not having to incorporate it in the base layout and I'd rather not have two different layouts with the only difference being the script.

How could I make sure the bundle.js is not treated by Eleventy?

Thanks

[Nico-L]

Well, it seems to be rather a nunjucks issue. I still don't understand this behavior, but I solved my case by a passthroughcopy and an simpler include.

[taliesinb]

@Nico-L I want to do exactly the same thing. Would you be able to share your workaround somewhere, please?

[Nico-L]

@taliesinb I didn't see your mention earlier sorry.

This is a repo with code that works for me :
https://codesandbox.io/s/github/Nico-L/Svelte-in-Eleventy/tree/master/

The point is to add a passTroughCopy in the Eleventy Config:

eleventyConfig.addPassthroughCopy({
    "src/eleventy/_includes/js/*": "assets/js"
  });

In rollup config, the svelte bundle.js is saved in src/eleventy/_includes/js/

Then the base template has two blocks, the main content one and the script one. In the page I want to add the script I simply add the include script:

<script src="assets/js/bundle.js"></script>

Note the url, it matches the url used in the output of the passThroughCopy

[sw-yx]

helo i wrote down some thoughts for making svelte a "closer to the metal" layout template engine https://www.swyx.io/writing/svelte-eleventy - mounting atop of a normal svelte template engine also works but i figured it might be a better way to write templates.