Docs Request: Bundler free tutorials.

[MicahZoltu]

From what I can tell, all of the documentation and samples assume that you will be using a bundler like rollup. While I can appreciate the value in having some documentation that shows how to integrate with a bundler, I would like to be able to learn svelte without yet-another-layer-of-abstraction between me and what is actually going on so I can really understand how things work. One of the things that attracted me to svelte in the first place was its claim of "plain old JavaScript generation", which I interpreted to mean "fewer tools/frameworks/libraries in the mix". At the moment, I'm trying to poke at some of the samples/templates and documentation examples without using rollup and I'm struggling with them because they all assume you'll be using rollup and including a bundle.

It would be nice if the docs included details on how to use svelte without a bundler, or at least some instructions on how to convert rollup examples to bundler-free examples so I can play around with svelte without a bundler.

[Conduitry]

The section here under "Getting started using the CLI" explains how to compile individual components, without using a bundler.

All of the other examples and templates use a bundler because that really is the best way to build apps with it. This isn't unique to Svelte. Almost all modern frameworks and libraries are designed in a way that's optimized for bundlers.

[MicahZoltu]

Yeah, I was able to do the first demo and then none after that because rollup is assumed in all of them. If you just try to compile, you run into problems because the examples have stuff like import './App.html which isn't a file that exists at runtime and the svelte compiler doesn't convert that to import './App.js'. There are other problems as well that I haven't been able to work through, like I can't get web components working at all (even if I manually tweak the example to address the .html vs .js thing).

Re: Bundlers are best. For a small project (such as toy apps and demos) or simple components, they add complexity that is unnecessary. When my whole app/component is 2kb or less, I don't need a bundler and it just makes my build process more complicated. Also I am pretty disenchanted with bundlers overall. HTTP/2 with push makes it so there are no longer meaningful benefits to putting everything into a single file vs multiple files. There are some advantages in terms of deduping, but svelte compiler appears to have this built-in in the form of the shared flag. I was really hoping that Svelte would have better support for a modern bundler-free experience (ES modules + HTTP/2 push + gzip + built-in deduping really make the benefits of bundling pretty tiny IMO).

[kazzkiq]

Until we have 1st-class support in every browser for ES modules and web components, bundlers will keep shining.

Rollup itself has sample templates for Svelte that makes you get up and running in literally less than 60 seconds. Doesn't like Rollup? Ok, there is one for Webpack too.

I myself have been working on super small libs that, even being small, would be a pain in the ass to mantain without a bundler due to browsers particularities. And keep that in mind: IMO Our job as code writers is to make our code run smootly. The focus should not be if it's easy for us, but if is it simple for those who will actually use it. That's again a reason to use bundlers.

But if you really want to work oldschool way, you can always compile your components and link them in your HTML file via <script> tags. Pretty much like we did with jQuery. This way you can "import" each component to your page and then use them as you please. That is, until ES modules are fully supported.

[MicahZoltu]

My target demographic is modern browser only (things with ES module support). I was able to get the initial import (e.g., app.js) working, but when I reference components they don't work despite being imported transitively via import './my-component.js'. Are you saying that I will need to manually add each component as a script tag on the page, I cannot rely on ES module loading them transitively correctly?

[burningTyger]

If I understand it correctly you need to compile all components first before you can import them respectively. That's why it works fine with single component scripts. Svelte always includes the compile step.

In svelte 2 you can use the svelte.create() function to compile your compoinent on the spot if that helps?

[MicahZoltu]

I did npx svelte compile <source_folder> --output <destination_folder>, which resulted in all of the .html files being compiled into that folder. I also adjusted them from the demo so that the imports matched (changed import './my-component.html' to import './my-component.js') but things still didn't work. I would be happy for further assistance, though I recognize this isn't a support channel and I wanted to create this issue to try to help people who come after me who similarly want to understand the build/deployment process without the obfuscation of bundlers in the middle.

[MicahZoltu]

Ah, that was the trick. I was looking at https://github.com/sveltejs/template-custom-element/blob/master/src/main.js which uses rollup and doesn't new App({ target: document.body }), instead it just imports the component and starts using it. If I try to do just import './App.js'; document.body.innerHTML = '<my-app name="world">' it doesn't appear to actually load the custom element.

Out of curiosity, how is it that a bundler causes the behavior to change? I wouldn't expect a bundler to have that effect.

[thgh]

For future reference

Create your component: MyApp.html

<h1>Hello {name}</h1>
<script>
  export default {
    tag: 'my-app',
    props: ['name']
  }
</script>

Compile it to a custom element:
npx svelte@^2.16.1 compile MyApp.html --customElement --output MyApp.js

Use your component in your page index.html

<my-app name="world"></my-app>
<script type="module" src="./MyApp.js"></script>

This is equivalent to:

<my-app name="world"></my-app>
<script type="module">
  import './MyApp.js'
</script>

Check out the result!
npx serve
http://localhost:5000

[Conduitry]

Svelte v3 is going to require a bundler to be able to do anything useful with your compiled components. The CLI is also removed in v3. There may eventually be a more powerful CLI added sometime in the future, but it's not currently a priority.

[Conduitry]

Closing this. As mentioned above, you now absolutely do need a bundler with v3. Anything in this area would instead fall under something like #1667, an enhanced CLI.

[davidhq]

This was a beautiful thread :) A guy: Why do I need to use a bundler for anything useful? I can do only a few small things from cli.

Response: cli removed entirely in v3.

Nice! I learned a lot, it was a very informative thread, I was also looking for a cli.

Bundlers are neccessary and btw @MicahZoltu maybe think about rollup + svelte as being compilers together and they reduce code complexity... even for small projects, once compiled the output bundle is minimal and runs directly in browser, not on another layer of indirection as with other frameworks like React.

[MicahZoltu]

Bundlers are neccessary and btw @MicahZoltu maybe think about rollup + svelte as being compilers together and they reduce code complexity... even for small projects, once compiled the output bundle is minimal and runs directly in browser, not on another layer of indirection as with other frameworks like React.

You definitely don't need a bundler in modern JS. All of my projects use ES6 modules and no bundler. The only runtime loader I use is the ultra-thin es-modules-shim, which gives me an import maps polyfill (not yet available in any browsers natively). This includes React appl, which are also compiled.

[frantic0]

funny to bump into this thread after the svelte-kit + snowpack announcement, and seeing things going in the other direction

I totally understand @MicahZoltu point about circumventing the bundler abstraction, and all of its inherent problems. When I think about all the time spent in learning and debugging bundlers it really helps to put things into perspective.