Mqx
Mqx10mo ago

Using Deno in Frontend.

Hey, I was wandering if it is possible to use Deno for Vanilla Frontend development. I dont want to use a Framework like Oak or Fresh, I just want to use Vanilla TypeScript instead of JavaScript in my Frontend. As an example I just want types/typechecking for developing, build my Frontend and then transpile the whole thing to a JS-Bundle that I can then load in the Frontend. Now I have 2 problems. First is how to transpile my TypeScript to a JS-Bundle (I can do that with the emit module), and the second is how can I get the DOM in TypeScript. I have found this in the manual but I am not really sure how to use it. Can someone explain to me how to setup the DOM for TypeScript development in the Frontend. And also whats about Deno.* APIs? How does the emit module handle this? Thanks! ~Mqx
Deno
Using deno-dom | Manual | Deno
deno-dom is an implementation of DOM and HTML parser in Deno. It is implemented in Rust (via Wasm) and TypeScript. There is also a "native" implementation, leveraging
15 Replies
Deno AI Helper
Deno AI Helper10mo ago
Hello Mqx! 🦕 Deno is primarily designed as a server-side runtime for JavaScript and TypeScript, and it doesn't have built-in support for DOM manipulation like a browser environment. However, you can still use TypeScript with Deno for frontend development, and then transpile your TypeScript code to JavaScript for use in the browser. For transpiling TypeScript to JavaScript, you can use the deno bundle command. This command will take your TypeScript file as input and output a single JavaScript file that you can include in your HTML. Here's an example:
deno bundle main.ts main.js
deno bundle main.ts main.js
In this example, main.ts is your TypeScript file and main.js is the output JavaScript file. Regarding your question about the DOM, the documentation you linked is about Deno's experimental support for server-side rendering using JSX and the DOM. It's not about using the DOM in a browser environment. For type checking and autocompletion when working with the DOM in TypeScript, you can use the lib compiler option in your tsconfig.json file to include the DOM library:
{
"compilerOptions": {
"lib": ["dom", "esnext"]
}
}
{
"compilerOptions": {
"lib": ["dom", "esnext"]
}
}
This will allow you to use DOM types in your TypeScript code. As for the Deno APIs, they are not available in the browser environment. When you bundle your TypeScript code with deno bundle, any usage of Deno APIs will be included in the output JavaScript file. However, since these APIs are not available in the browser, trying to use them will result in errors. If you want to use Deno APIs in your code, you'll need to make sure that this code is not included in the bundle that you use in the browser. I hope this helps! Let me know if you have any other questions.
Mqx
Mqx10mo ago
The deno bundle sub command is marked as depricated...
orvit
orvit10mo ago
GitHub
GitHub - denoland/deno_emit: Transpile and bundle JavaScript and Ty...
Transpile and bundle JavaScript and TypeScript under Deno and Deno Deploy - GitHub - denoland/deno_emit: Transpile and bundle JavaScript and TypeScript under Deno and Deno Deploy
orvit
orvit10mo ago
If you'd like to automate it, deno_emit, esbuild is convenient for "the web" however.
Mqx
Mqx10mo ago
Okay. Is there a some sort of cmd command that I can use? All I have seen so far is that it is the bare bone module. I found a solution. I use esbuild to bundle everything. I thought it much more complicated.
NDH
NDH10mo ago
I use a roll-your-own dev server I call Hot. It uses esBuild to bundle on any file change in a /src/ folder. Any change to the output bundle.js then forces a browser refresh. To write all my front-end code in TS, My main.ts includes the following at the top:
/// <reference lib="dom" />
/// <reference lib="dom" />
In case your interested in the Hot-Browser-Refresh: https://gist.github.com/nhrones/85080a9cc993bf3629ceaf5bb8426a30
adoublef
adoublef10mo ago
if I want to run in deploy, is the deno_emit module the better alternative? as I can't seem to get the esbuild to work there
orvit
orvit10mo ago
afaik you'd deploy what esbuild emits
adoublef
adoublef10mo ago
ah yh that is what another user kinda shared with me too, i must've misunderstood the readme on the esbuild_deno_loader
jeff.hykin
jeff.hykin10mo ago
Yes! I felt the same way and made a package for it so it would be easy like deno bundle. It uses esbuild with the Deno loader under the hood https://deno.land/x/deno_bundle@0.0.0.1
Mqx
Mqx10mo ago
Thanks for sharing. I will look into this. Currently I use ESBuild and so far it works perfect. An other question I have, currently I have a src and dist folder. For example I have the following html file under src/home/index.html is it possible to just copy this html file on save to dist/home/index.html using a bundler like ESBuild or an other bundler? I have not only one HTML file. I have multiple under different directories
lcasdev
lcasdev10mo ago
@mqxx_ here is an example of using esbuild using the Deno loader - should only be a couple of lines, and is very customizable 🙂 https://github.com/lucacasonato/esbuild_deno_loader/blob/main/examples/bundle.ts
GitHub
esbuild_deno_loader/examples/bundle.ts at main · lucacasonato/esbui...
Deno module resolution for esbuild. Contribute to lucacasonato/esbuild_deno_loader development by creating an account on GitHub.
Mqx
Mqx10mo ago
Thanks 👍🏻
Leokuma
Leokuma10mo ago
GitHub
GitHub - kt3k/packup: 📦 Zero-config web application packager for De...
📦 Zero-config web application packager for Deno. Contribute to kt3k/packup development by creating an account on GitHub.