Deno support

[Malix-Labs]

Hey folks !

It would be awesome if the Svelte CLI could also support Deno

Also see denoland/deno#17248

[benmccann]

I think it mostly does support it. Let us know if there's some particular difficulty you're having

The only issue I'm aware of is denoland/deno#25342

[Malix-Labs]

I did not find the equivalent of npx sv create for Deno

Something that would end up working just like Node, out of the box

[AdrianGonz97]

Could you be a bit more specific? To execute the CLI in Deno, you run deno run -A npm:sv create which seemingly works well.

Is the issue that deno is missing in the package manager selection prompt? Or that we're possibly missing some scaffolding bits for Deno specific projects (judging by my brief skim of the linked thread referring to the imports field in deno.json)?

Testing it out, all seems to be working perfectly fine, including running the dev server:

➜ deno run -A npm:sv@latest create deno-project
┌  Welcome to the Svelte CLI! (v0.5.7)
│
◇  Which template would you like?
│  SvelteKit demo
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project?
│  prettier, eslint
│
◇  Which package manager do you want to install dependencies with?
│  None
│
◆  Successfully setup integrations
│
	...
│
└  You're all set!

➜  cd deno-project
➜  deno install
	...
➜  deno task dev
Task dev vite dev
  VITE v5.4.10  ready in 1266 ms

  ➜  Local:   http://localhost:5174/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

(note: for now, selecting None and manually installing deps with deno install is required as we're waiting on Deno to implement a user_agent in the process's env)

[Malix-Labs]

To execute the CLI in Deno, you run deno run -A npm:sv create

Thanks !

I think it should also be documented (see GitHub Search - org:sveltejs "npx sv create")

It is however not enough and things are broken out of the box

Is the issue that deno is missing in the package manager selection prompt? Or that we're possibly missing some scaffolding bits for Deno specific projects

Both indeed

Using deno.json instead of package.json, and deno install too

Maybe also a potential official deno adapter which might have better performance than Deno's node compatibility layer ?

Community adapters :

• https://github.com/pluvial/svelte-adapter-deno
• https://github.com/dbushell/sveltekit-adapter-deno

for now, selecting None and manually installing deps with deno install is required as we're waiting on Deno to implement a user_agent in the process's env

Thanks for this information !

Could you please link the related issue ?

What is planned for the svelte cli when that related issue will be closed ?
A new deno option choice in the package manager input ?

The proposed dev and build commands also need to be updated

Also, it is currently mandatory to set "nodeModulesDir": "auto" in deno.json to have a node_modules directory to be able to run deno install --allow-scripts=npm:@sveltejs/kit which is required to run svelte's post install script

[lts20050703]

Could you please link the related issue ?

@Malix-Labs denoland/deno#25342

[zoaha]

would it be possible to omit the 2 tsconfig files at some point when choosing the deno option?

Trying it myself, seems $lib is the only thing that breaks, at least in my tiny test project.

[Malix-Labs]

that would be nice too indeed.
Also, some imports definitely need to be imported or mapped, such as node process env

[Malix-Labs]

This one is particularly annoying and would need to be fixed :

Error in svelte.config.js Syntax Error: Cannot use import statement outside a module

https://stackoverflow.com/questions/70588096/error-in-svelte-config-js-syntax-error-cannot-use-import-statement-outside-a-mo

Workaround

package.json

{
	"type": "module"
}

+ Restart the LSP

[Malix-Labs]

would it be possible to omit the 2 tsconfig files at some point when choosing the deno option?

Trying it myself, seems $lib is the only thing that breaks, at least in my tiny test project.

@zoaha $env also doesn't work

Have you found a workaround for $* imports ?

I didn't find any deno workaround for it which, if true, would mean that deno is not fully supported

[HighPriest]

This one is particularly annoying and would need to be fixed :

Error in svelte.config.js Syntax Error: Cannot use import statement outside a module

https://stackoverflow.com/questions/70588096/error-in-svelte-config-js-syntax-error-cannot-use-import-statement-outside-a-mo

Workaround

package.json

{
	"type": "module"
}

+ Restart the LSP

This is odd, as I have a sveltekit-adapter-deno project, which runs completely out of deno.json, except paraglide which requires $app import, so is the only thing that stayed in my package.json:

{
 "dependencies": {
  "paraglide":"0.11.0"
}
}

[manuel3108]

This one is particularly annoying and would need to be fixed :

Error in svelte.config.js Syntax Error: Cannot use import statement outside a module

https://stackoverflow.com/questions/70588096/error-in-svelte-config-js-syntax-error-cannot-use-import-statement-outside-a-mo

Workaround

package.json

{
	"type": "module"
}

+ Restart the LSP

@HighPriest How did you generate a project that does not contain this type: "module" from the sv cli? I just tried all three possible templates, and all of these templates add this line while creating a new project? Or are you talking about an existing application? In that case there is nothing that we should do here.

Trying it myself, seems $lib is the only thing that breaks, at least in my tiny test project.

@zoaha Can you please explain what exactly breaks in your case? I create a test project and created $lib/TestComponent.svelte and was able to import it from routes/+page.svelte without any problems. The LSP seems also happy.

I think it should also be documented (see GitHub Search - org:sveltejs "npx sv create")

@Malix-Labs What exactly do you think should be better documented here? If we starting adding a second with for deno, people will start asking for every other package manager (pnpm, yarn, new-fancy-package-manger and so on).

[Malix-Labs]

What exactly do you think should be better documented here?

Non straightforward package management install

deno, people will start asking for every other package manager (pnpm, yarn, new-fancy-package-manger and so on).

I do also think so

But don't you think it's worth it to make svelte able to be installed anywhere easily if the cost is adding those one-shot lines :

• NPM : npx sv create
• PNPM : pnpm dlx sv create
• Yarn : yarn dlx sv create
• Bun : bunx sv create
• Deno : deno run npm:sv create

[HighPriest]

@HighPriest How did you generate a project that does not contain this type: "module" from the sv cli? I just tried all three possible templates, and all of these templates add this line while creating a new project? Or are you talking about an existing application? In that case there is nothing that we should do here.

Trying it myself, seems $lib is the only thing that breaks, at least in my tiny test project.

I did not. @manuel3108
I've created the project the same way you do & noted the process over here.
There is nothing stopping you from moving all the devDependencies from package.json to deno.json, but anything that requires runtime information, still has to be present in the dependencies section of package.json.
Also, if the "type": "module" part of the package.json is going to be missing, svelte intellisense is going to complain that import can only be used in modules, but the code is going to compile fine.

Fun fact: If you create deno.json & populate it with some dependencies, running deno add npm:package is going to add it correctly to deno.json. Running deno add -D npm:package is going to add it to devDependencies in package.json. (Which is the opposite of what works for me right now, but... it is what it is.

[MaxxAls]

That would be wonderful. CC @Matteo-Hamaimi

[MaxxAls]

would it be possible to omit the 2 tsconfig files at some point when choosing the deno option?

Trying it myself, seems $lib is the only thing that breaks, at least in my tiny test project.

@zoaha have you found a fix ?

I don't find how to make $lib nor $env work either

[dominikg]

the $lib alias is added to vite config and .svelte-kit/tsconfig.json automatically by sveltekit. So no, we can't just remove tsconfig files that are required for typescript to understand the project structure. if deno has a different concept for aliases than parsing and using typescripts compilerOptions.paths it would be on deno to provide a compatibility layer for that.
We can't start to cater to every custom typescript aware runtime with different configurations, typescript config is complex enough as it is.

[manuel3108]

So to summarize:

• The cli runs within deno via deno run npm:sv create without any problems.
• The cli is currently not suggesting deno as pm when installing dependencies (see Add support for Deno as package manager antfu-collective/package-manager-detector#21), but users can workaround this by selecting the trivial "none" option
• The generated projects by this cli run without any problems in deno compatibility mode.
• The docs for using deno run npm:sv create could be improved, see Add pm exec instructions to docs #233
• Deno is not correctly resolving aliases from .svelte-kit/tsconfig.json - there is nothing we can do for that, thats up to deno and workarounds exists, see above.

As far as the cli goes, deno is supported, with the two possible improvements mentioned above that can be addressed separately.

[Malix-Labs]

Right, it is probably best to split tasks like that, thanks Manuel !