Mqx•16mo 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•16mo 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.

Helpful Links: How to publish Deno modules to NPM How to publish Deno modules to NPM Build Apps in Deno with Frameworks such as React, Vue, Express, and more. Frequently Asked Questions | Manual | Deno

MqxOP•16mo ago

The deno bundle sub command is marked as depricated...

orvit•16mo ago

https://github.com/denoland/deno_emit

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•16mo ago

Use this, or https://esbuild.github.io/.

esbuild - An extremely fast bundler for the web

orvit•16mo ago

If you'd like to automate it, deno_emit, esbuild is convenient for "the web" however.

MqxOP•16mo 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.

Fifth-Normal-Form•16mo 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•16mo 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•16mo ago

afaik you'd deploy what esbuild emits

adoublef•16mo 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•16mo 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

MqxOP•16mo 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•16mo 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.

MqxOP•16mo ago

Thanks 👍🏻

Leokuma•16mo ago

Also have a look: https://github.com/kt3k/packup

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.