Use pkg.pr.new in playground

[Rich-Harris]

We just added pkg.pr.new to the svelte repo: https://github.com/sveltejs/svelte/pull/13891

It would be neat if we could use it in the playground. I think we would need to untar the package in the browser, which might be a useful trick anyway

[Conduitry]

Does pkg.pr.new include the necessary CORS headers to let us download the tarball?

This sounds like a lot of work, if we don't have an unpkg-esque thing sitting in front of the pkg.pr.new registry.

If we do go this route of building our own unpkg equivalent, then I think the main thing standing between us and dropping unpkg entirely would be the lack of CORS headers from the npm registry.

But, again, this all sounds like a lot of work. I'm probably more worried about all of the resolution stuff than I am about figuring out out to extract tarballs in the browser.

This also feels like the ... whatever the npm proxy is called in StackBlitz. I'm assuming they spent a lot of time thinking about this. I'd be hesitant to try to take on the burden of maintaining something like this because it seems like it would be nice to have.

[Rich-Harris]

Does pkg.pr.new include the necessary CORS headers to let us download the tarball?

yep:

$ curl -I https://pkg.pr.new/sveltejs/svelte/svelte@13891

HTTP/2 405
date: Fri, 25 Oct 2024 02:31:24 GMT
content-type: application/json
access-control-allow-origin: *
server-timing: -;dur=0;desc="Generate", -;dur=0;desc="Load%20chunks%2Fruntime", -;dur=0;desc="Nitro%20Start"
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=MxFHvI42qxp7Eh%2FRUHtnJqFk8MS%2BiULMMshtTAfK5A9cO567Dgt4M3ndnom2Lb1kevz%2Beh6RWy64YWTJns8IBWL1b8gtmfwNOj%2B%2BH0erMMcrkjRthDtmjQ%2FYJ18H"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 8d7eca473f6778e7-EWR
alt-svc: h3=":443"; ma=86400
server-timing: cfL4;desc="?proto=TCP&rtt=7848&sent=6&recv=10&lost=0&retrans=0&sent_bytes=2869&recv_bytes=588&delivery_rate=380852&cwnd=244&unsent_bytes=0&cid=3e215a3a30eb20ee&ts=87&x=0"

It actually looks like npm does too?

$ curl -I https://registry.npmjs.org/svelte/-/svelte-5.1.2.tgz

HTTP/2 200
date: Fri, 25 Oct 2024 02:35:18 GMT
content-type: application/octet-stream
cf-ray: 8d7ecffd6ec8431b-EWR
cf-cache-status: HIT
accept-ranges: bytes
access-control-allow-origin: *
age: 10878
cache-control: public, immutable, max-age=31557600
etag: "7a6699f2bb631e45b492ef26e08a3149"
last-modified: Thu, 24 Oct 2024 23:32:24 GMT
vary: Accept-Encoding
server: cloudflare

I don't know we'd want to drop unpkg altogether — it's nice to not download images of Guy Fieri if you just need one file. But for packages that we know don't include Guy Fieri (like svelte) it's probably a fair bit more efficient than downloading files one at a time

[dominikg]

we should contact pr.new to see if they'd be ok with it. reads like it could drive up their traffic bc today they are mostly referenced in gh comments only, not pulled from in large public sites

[Rich-Harris]

We'd only be using it for the intended purposes, i.e. you'd edit https://svelte.dev/playground/hello-world?version=5.1.2 to be something like ?version=pr-13891

[PixelSoftwareStudios]

Why not use jsdelivr? It's a drop in replacement for unpkg and way faster and maintained.

Ex: https://cdn.jsdelivr.net/npm/svelte@5.1.3/package.json

[benmccann]

See https://github.com/sveltejs/sites/issues/457

[PixelSoftwareStudios]

See sveltejs/sites#457

It seems like this conversation was resolved on the idea that the unpkg drop in part of jsdelivr seems possible. I'd love to try it out and test it and benchmark it, if it seems like a good idea to you.