D
Deno

help

Using Deno in Frontend.

MMqx9/12/2023
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
DAHDeno AI Helper9/12/2023
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.
MMqx9/12/2023
The deno bundle sub command is marked as depricated...
Oorvit9/13/2023
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
Oorvit9/13/2023
If you'd like to automate it, deno_emit, esbuild is convenient for "the web" however.
MMqx9/13/2023
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.
ABAltair 680b9/13/2023
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
Aadoublef9/16/2023
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
Oorvit9/16/2023
afaik you'd deploy what esbuild emits
Aadoublef9/16/2023
ah yh that is what another user kinda shared with me too, i must've misunderstood the readme on the esbuild_deno_loader
Jjeff.hykin9/18/2023
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
MMqx9/19/2023
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
Llcasdev9/19/2023
@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.
MMqx9/19/2023
Thanks ๐Ÿ‘๐Ÿป
LLeokuma9/20/2023
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.

Looking for more? Join the community!

Recommended Posts
Excluding certain directories when using "walk"Hello, I'm writing a script that should crawl through a directory and search for a given text insideSyntax Error: Unexpected token 'export'Hello, We are using Supabase Deno Edge Functions and are getting this error while trying to import aDeno Deploy QuestionsHey there. We are using Supabase to run edge functions, which in turn built their feature on top of Bunle OAK static assets to the compiled binaryHi, I am currently switching from NodeJS to Deno, and so far so good! One of the reasons for this sThe requested module does not provide an export named 'default'I'm trying to export the following interface: ```import User from '../models/User.ts'; export defaI want to contribute to deno without disturbing my libs in linux . Is there a way?**Noob alert** I have been trying to contribute to deno . So i followed these instructions https://dTimezones in Dates?Hi everyone, what's the right way to create a `Date` with a specific timezone?Resolving Class constructor errorHello, I am currently trying to port a small test api from NodeJS to Deno. This code uses only NPM pKV list is returning an empty iterator, but data is there and gettable via getHello. To simplify things, I am setting a key of `["accounts", account.name]` but when I try to get Read permission & NPM importsHello, I'm using `--allow-read=.` to allow a script to read files in the current directory. The scriWebSocket connections killing setInterval()Hey Deno friends, it appears that websocket connections are somehow stopping the execution of setIntjsx in jsAll of my files containing JSX are in `.js` files. Is there an easy fix for this when running?http errorI need help because I have a service that has more than 1 million requests per day and for about 7 ddoes Deno vscode support nesting `deno.json`?There is a project I'm working on has nesting `deno.json` files. The parent `deno.json` is a bit outDeploy says Worker not defined for ESBuild (wasm.js)@Deno AI Helper I am having trouble understanding how to get the esbuilder to work on Deno Deploy, udeno_tui Label-classHello. I just started testing around with deno_tui and found the DrawObject-Class. How do i actuallyCannot read file "src/deno.json": not implemented on jsHey @Deno AI Helper ! I'm having a bit of trouble, I'm trying to use `deno.land/x/import` to use nonError running Apollo example (on latest version)Hi. When I run this example with the latest version of apollo from npm I get errors: https://deno.Example Question for the Deno AI BotHey there - this is an example question for the Deno AI bot. How would I write a regular expression Does Deno support `export type` statements?Hello, we are using Deno + TS and I am getting the following error if I try to export a type from an