Fifth-Normal-Form Comments

Fifth-Normal-Form

•Created by kaltcium on 1/4/2025 in #help

Newbie question: Web development in Deno 2, and .ts to .js transpiling.

When your ready, grab a copy and examine it. It is pretty straight forward, and perhaps you could make a custom copy for you're own use.

5 replies

DDeno

•Created by kaltcium on 1/4/2025 in #help

Newbie question: Web development in Deno 2, and .ts to .js transpiling.

The reason I built Hot, is that I don't care for all the bloat that a tool like Vite adds to your project.
Hot does not require any deno.json, nor any package.json, and no node-modules folder. Hot creates its own config file on first use, and that is its only requirement.
The goal was to create an environment for quick development of vanilla HTML, CSS, JavaScript applications that leverage the joy of coding with Typescript.

5 replies

DDeno

•Created by kaltcium on 1/4/2025 in #help

Newbie question: Web development in Deno 2, and .ts to .js transpiling.

I built my own dev server. Think Mini-Vite! Have a look: https://jsr.io/@ndh/hot

5 replies

DDeno

•Created by Jasmine Boba'tea on 1/3/2025 in #help

What is the best way to get the full url that Deno.serve() is running on?

Logging info on Windows returns an empty object?

ServeHandlerInfo {}

ServeHandlerInfo {}

With either console.log(info) or, console.info(info)?

6 replies

DDeno

•Created by Jasmine Boba'tea on 1/3/2025 in #help

What is the best way to get the full url that Deno.serve() is running on?

You can also get it from the request:

Deno.serve({ port: 1993, hostname: '0.0.0.0'},
    (request: Request) => {
        const url = new URL(request.url)
        return new Response(`
            Hello From:
            origin = ${url.origin}
            host = ${url.host}
            hostname = ${url.hostname}
            port = ${url.port}
            transport protocol = ${url.protocol}:
        `)
    })

Deno.serve({ port: 1993, hostname: '0.0.0.0'},
    (request: Request) => {
        const url = new URL(request.url)
        return new Response(`
            Hello From:
            origin = ${url.origin}
            host = ${url.host}
            hostname = ${url.hostname}
            port = ${url.port}
            transport protocol = ${url.protocol}:
        `)
    })

I'm on Widows where 0.0.0.0 === localhost.

Hello From:
  origin = http://localhost:1993
  host = localhost:1993
  hostname = localhost
  port = 1993
  transport protocol = http:

Hello From:
  origin = http://localhost:1993
  host = localhost:1993
  hostname = localhost
  port = 1993
  transport protocol = http:

If I then open 127.0.0.2 :1993 as expected:

Hello From:
  origin = http://127.0.0.2:1993
  host = 127.0.0.2:1993
  hostname = 127.0.0.2
  port = 1993
  transport protocol = http:

Hello From:
  origin = http://127.0.0.2:1993
  host = 127.0.0.2:1993
  hostname = 127.0.0.2
  port = 1993
  transport protocol = http:

6 replies

DDeno

•Created by scarf on 12/25/2024 in #help

std JSON serializer/deserializer with Set and Map support

It would be very hard to beat the performance of native V8 JSON! Native V8 JSON is extremely fast

Type User = {id: number, first: string, last: string, age: number}>

// pre-fill with 100k user objects
const userMap: Map<number, User> = new Map()

// Serialize the Map
// 100k objects(10.7 MB) takes ~ 90ms.   
let serializedUsers = JSON.stringify(Array.from(userMap.entries()))

/* Deserialize     
 * hydrating 100,000 user objects takes ~ 160ms :         
 *     JSON.Parse: 145.30ms    
 *     Build-Map: 16.80ms
 */
const deserializedUsers = JSON.parse(serializedUsers)  
userMap = new Map(deserializedUsers)

Type User = {id: number, first: string, last: string, age: number}>

// pre-fill with 100k user objects
const userMap: Map<number, User> = new Map()

// Serialize the Map
// 100k objects(10.7 MB) takes ~ 90ms.   
let serializedUsers = JSON.stringify(Array.from(userMap.entries()))

/* Deserialize     
 * hydrating 100,000 user objects takes ~ 160ms :         
 *     JSON.Parse: 145.30ms    
 *     Build-Map: 16.80ms
 */
const deserializedUsers = JSON.parse(serializedUsers)  
userMap = new Map(deserializedUsers)

See this in action : https://nhrones.github.io/Hot_BuenoCache/ NOTE: First use builds a test dataset in IndexedDB. Run more than once. Repo at: https://github.com/nhrones/Hot_BuenoCache

6 replies

DDeno

•Created by avem on 12/3/2024 in #help

Worried about cold start

Kv as server-side local-first See : https://zero.rocicorp.dev/

12 replies

DDeno

•Created by avem on 12/3/2024 in #help

Worried about cold start

Kv as server-side local-first

12 replies

DDeno

•Created by Robbie on 11/28/2024 in #help

Replacing `fs.createWriteStream()` with Deno equivalent

Naming is hard 😣

9 replies

DDeno

•Created by Bruno Skvorc on 11/27/2024 in #help

Without using a framework, how do I compile natively supported TS in Deno into static JS?

For a working example see: https://nhrones.github.io/Hot_BuenoCache/ Click the see-the-code link on the bottom left of the page!
Or just go to the repo:
https://github.com/nhrones/Hot_BuenoCache

6 replies

DDeno

•Created by Bruno Skvorc on 11/27/2024 in #help

Without using a framework, how do I compile natively supported TS in Deno into static JS?

You could try a simple util like https://jsr.io/@ndh/build Or, even better; roll-your-own! Create the following module -- builder.ts

import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.11.0";
import { build, stop } from "npm:esbuild@0.24.0";

/** builds and bundles an entrypoint into a single ESM output. */
export async function buildIt() {
    await build({
        plugins: [...denoPlugins({})],
        entryPoints: ["./src/main.ts"],
        outfile: "./dist/bundle.js",
        bundle: true,
        minify: false,
        keepNames: true, 
        banner: { js: `// @ts-nocheck
// deno-lint-ignore-file`},
        format: "esm"
    }).catch((e: Error) => console.info(e));
    stop();
}

buildIt()
console.log('bundle.js was built!')

import { denoPlugins } from "jsr:@luca/esbuild-deno-loader@^0.11.0";
import { build, stop } from "npm:esbuild@0.24.0";

/** builds and bundles an entrypoint into a single ESM output. */
export async function buildIt() {
    await build({
        plugins: [...denoPlugins({})],
        entryPoints: ["./src/main.ts"],
        outfile: "./dist/bundle.js",
        bundle: true,
        minify: false,
        keepNames: true, 
        banner: { js: `// @ts-nocheck
// deno-lint-ignore-file`},
        format: "esm"
    }).catch((e: Error) => console.info(e));
    stop();
}

buildIt()
console.log('bundle.js was built!')

Just modify the entrypoints and outfile to suit your needs. You can also specify to bundle or not, and minification or not. Add the above module to you project root. Then just to run:

deno run -A --quiet builder.ts

You could also add this as a task in deno.json called build.

6 replies

DDeno

•Created by artpods56 on 11/17/2024 in #help

Cant configure Tailwind with DaisyUI using Deno inside of Docker | Error: Cannot find module daisyui

This is great info, and will help me in the future. Thanks for this.

13 replies

DDeno

•Created by Kevin Tale on 11/22/2024 in #help

How to add a simple live reload?

Now on JSR https://jsr.io/@ndh/hot@1.0.0

30 replies

DDeno

•Created by Kevin Tale on 11/25/2024 in #help

cannot publish package to jsr but it uses a shared file

There is a new Discord server for JSR
https://discord.gg/hMqvhAn9xG. Perhaps you could get help there.

3 replies

DDeno

•Created by Kevin Tale on 11/22/2024 in #help

How to add a simple live reload?

in the server ...

if (isIndexHtml) {
  // inject html with our hot refresh script
  const body = await inject(fullPath)
  // create appropriate headers    
  const headers = new Headers()
  headers.set("content-type", "text/html; charset=utf-8")
  // don't cache this - we expect frequent dev changes
  headers.append("Cache-Control", "no-store")
  return new Response(body, { status: 200, headers });

if (isIndexHtml) {
  // inject html with our hot refresh script
  const body = await inject(fullPath)
  // create appropriate headers    
  const headers = new Headers()
  headers.set("content-type", "text/html; charset=utf-8")
  // don't cache this - we expect frequent dev changes
  headers.append("Cache-Control", "no-store")
  return new Response(body, { status: 200, headers });

30 replies

DDeno

•Created by Kevin Tale on 11/22/2024 in #help

How to add a simple live reload?

Be aware that I'm making many link changes to the code as I move all utilities to JSR. The config utility is in flux as well as the builder utility. Its all there in public repos, but as I untangle the local references to move all to JSR, it may not work without reference errors. I got lazy with these and used local refs for the dependencies. I'll have it all moved in a day or two. The auto-config is not required. I use it in all dev-tools because I'm lazy. I like to just type 'serve' or 'hot' in any project to get coding. I'm just a hobbyist trying to learn Web-Dev.

30 replies

DDeno

•Created by Kevin Tale on 11/22/2024 in #help

How to add a simple live reload?

Yes! Whenever index.html is requested, we inject the WebSocket code to the end of the text being sent to the browser. The file itself is never modified. Any .ts-code change forces a new build/bundle to ./dist/bundle.js . This new bundle, or any change to the html or CSS files force either a globalThis.location.reload() or a remove-then-reinstall stylesheets style-refresh by way of the WebSocket.

30 replies

DDeno

•Created by Kevin Tale on 11/22/2024 in #help

How to add a simple live reload?

Yes! But long ago😆 I just put it back in a public repo, so that I can move all my junk to JSR.

30 replies

DDeno

•Created by Kevin Tale on 11/22/2024 in #help

How to add a simple live reload?

It is a bit dated, but still works great for me. I'm currently moving all my utilities to JSR so there may be broken links. I have Hot installed locally and use it often.

30 replies

DDeno

•Created by Kevin Tale on 11/22/2024 in #help

How to add a simple live reload?

An example WebSocket refresh that is injected on serve, and does not modify the html file. It simply modifies the text sent to the browser. https://github.com/nhrones/Devtools_Hot/blob/main/injector.ts This server auto-starts the browser, then on any ./src/ or ./dist/ change, it builds/bundles and then auto-refreshes the browser.
It injects the WebSocket code (above) whenever the request URL is for '/' or 'index.html' https://github.com/nhrones/Devtools_Hot/blob/main/server.ts The unique feature is that the watch-function will distinguish between a code change or a stylesheet change. For a stylesheet, it simply refreshes the styles without disturbing the app.

30 replies