Request for a Snowpack 2 + Svelte + Routify template.

[karanganesan]

https://twitter.com/johanalkstal/status/1257789784690491408

[Wolfr]

Looks interesting!

[jakobrosenberg]

Definitely. And here I thought I was the only one being interested in Snowpack.

I'll likely be looking into this sometime in the near future. In the meantime I'd love to hear from anyone having experience with Snowpack.

[adrianhunter]

I think you just have to put all the nodejs stuff into another package. I just changed "main" in package.json to "runtime/index.js" and copy and modify the tmp/routes.js into my source folder and import it from there.

I already got this working with snowpack 1 before, except in version 2 I had to change the "main" entry.

However, it currently does not work with the bundle/production version.

[adrianhunter]

My, ok, looks like "snowpack build" and "snowpack build --bundle" both work.

[jakobrosenberg]

@adrianhunter that sounds great! Would you be interested in sharing a template? It doesn't have to be polished or anything. Just something for us to use as inspiration when we get time to dive into Snowpack.

[adrianhunter]

Okay, so the simplest way would be to tell the snowpack guys not to use the "main" entry if we have a "svelte" entry, and then just allow to define the output path of the routes.js file. Should be super simple :)

[adrianhunter]

here you go sir: https://github.com/adrianhunter/snowpack-svelte-routify-template

I'm still not sure about the "main" thing. If you not change it, somehow it does not install.
I also had problems building the routes with the linked routify package, so I first installed the routify globally and generated the routes, then run the script to copy it into src and changed the buildRoutes import manually.

[kylecordes]

As long as we're casting wishes, a template for Routify with Evan You's new vite non-bundler (similar in some ways the snowpack, different in others) would be quite nice also.

[rixo]

@kylecordes If you have looked into this subject, I'm interested to know the pros and cons of Vite (that I thought was Vue-specific, to be honest) vs Snowpack, according to you?

After taking a stab at it myself, I'm not particularly sold on the no-bundler approach... What is the benefit(s) you're after? Just a fast dev server, or is there more to it?

[kylecordes]

@rixo Here are my thoughts. After the last several years of bundler-based development CLIs spreading across many libraries/frameworks, recently there are multiple competing new non-bundler solutions for development. Although the difference matters little for small projects, non-bundling can be much faster in a large project.

I don’t know whether these non-bundling development toolsets will gain traction or become widely popular. But there is a reasonable chance they will; and it seems wise to experiment with more than one of them (i.e. Snowpack plus others).

About Vite: it is not Vue-specific, and to get a sense of the trade-offs it is aiming for, read this:

https://github.com/vitejs/vite#how-and-why

Like other tools of this type, Vite is in early days. There is a short list of templates for a few frameworks here:

https://github.com/vitejs/create-vite-app

There is very early (and in this case, Vue-specific) static site generator (with aspects of a file layout based router) here:

https://github.com/vuejs/vitepress

(although that is Vue specific, there could be ideas worthy of cross pollinating with Routify)

[rixo]

@kylecordes Thanks, very informative.

So... Vue Vite bundles for prod with Rollup, while Snowpack 2 bundles with Parcel. This is the main difference I see between the 2. It might be worth giving it a shot, if someone's interested.

As for me, I still hope that, with a just a bit of overhaul, Nollup will soon be able to handle most Rollup configs, all while providing the same kind of speed (rebuild especially) as non-bundlers. I'm keeping my focus on this.

[JustinVoitel]

@rixo could this maybe be considered for roxi ? Like a pluggable nollup-routify Template?

[rixo]

@JustinVoitel Yes, totally.

Nollup is currently actively working on some adjustments for better support of dynamic imports and, probably, become even faster!

Then I've planned a Nollup version of Routify's starter. @jakobrosenberg has expressed interest for a hmr branch, so it will probably be that.

Things are moving fast in this area, so I'm expecting all this to happen pretty short term :)

[jakobrosenberg]

I came across these two posts

https://twitter.com/jakedeichert/status/1262474188947849226

https://twitter.com/lihautan/status/1255831329851052034

Any thoughts?

[JustinVoitel]

@rixo this is awesome cannot wait for the results 🙌
would love to help out but iam pretty new into routify so still learning how stuff works :D

[JustinVoitel]

A lot of stuff happening rn in the bundler ecosystem... this also seems promising https://twitter.com/evanwallace/status/1265102118907637761?s=20 js/ts bundler build in go

[jakobrosenberg]

1.8 beta now includes Nollup for fast dev rebuilds.

No-bundlers like Snowpack 2 and Vite are still considered for Roxi.

I'm closing this as it's not a current issue, but feel free to keep the conversation going. Can reopen if necessary.

[efreibe]

I've tried to use with snowpack but it keeps showing these lines:

[snowpack] installing dependencies...
[snowpack] node_modules/esm/esm.js
   Module "internal/bootstrap/loaders" could not be resolved by Snowpack (Is it installed?).
[snowpack] internal/bootstrap/loaders?commonjs-external
   Module "internal/bootstrap/loaders" could not be resolved by Snowpack (Is it installed?).
[snowpack] node_modules/esm/esm.js
   Module "internal/bootstrap/loaders" could not be resolved by Snowpack (Is it installed?).
[snowpack] /Users/macos/github/facture/web/node_modules/@sveltech/routify/lib/services/metaParser.js:27:23 Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification
[snowpack] Failed to load node_modules/cheap-watch/dist/CheapWatch.es.js
  'promisify' is not exported by node_modules/rollup-plugin-node-polyfills/polyfills/util.js, imported by node_modules/cheap-watch/dist/CheapWatch.es.js
[snowpack] Install failed.

Can I configure snowpack in some way to ignore those packages, I think that cheap-watch is no use in a web browser, and snowpack has its way to manage esm modules.

[jakobrosenberg]

esm is required at the moment, but if it breaks Snowpack, it might be worth looking into an alternative solution.

[efreibe]

I've eliminated those erros doing:

"installOptions": {
    "externalPackage": [
      ...require('module').builtinModules,
      "esm"
    ]
  }

But now it broke other parts of the code. Without routify it works just fine but obviously I cannot use the routing functionality.

[JustinVoitel]

@efreibe What version of routify are you using ?

[efreibe]

Version 1.9.9

I've heard that svelte will support snowpack in a near future through @sveltejs/kit, because sapper has been discontinued, so I am giving it a shot separately.

But maybe the integration will be different, I don't know.

[JustinVoitel]

I've had quite some success integrating @roxi/routify@2.2.1 into the svelte-typescript-snowpack template. Maybe try it out with that version!

[efreibe]

It worked with @roxi/routify@2.3.0, now this version apparently has a bug that does not generate all the routes correctly in urlindex.json, but that is another story...

Thank you!

[jakobrosenberg]

@efreibe only v2.0.0 should have that bug.

[efreibe]

I've installed 2.3.0, I've tried but I don't know how to fix this without breaking the logic.
I cannot see the file "index.svelte" located at the root folder indexed anywhere in the code.
So it does not replace the tag in the layout, instead it shows a white page.
But i think that is not related with snowpack. I'll do other tests to confirm that.

[micthiesen]

Are there any updated instructions for Snowpack 3?

[jakobrosenberg]

@micthiesen I just opened up this experimental repo https://github.com/roxiness/routify-templates

Could you check if npm run generate -- -fragments snowpack gives you a working template.