Have a new own template engine as a core, or built in support for one like pug

[AhmedElTabarani]

What is the problem this feature will solve?

There is no built-in template engine

What is the feature you are proposing to solve the problem?

Have a template engine as a core, To be equivalent to bun in terms of efficiency, speed and performance, it will be also a popular and good feature for bun

something like pug, or have a new own one, or support pug as built in or any else template engine

What alternatives have you considered?

No response

[Jarred-Sumner]

I like this idea

[alexkuz]

As a first choice I would choose something more conventional (i.e. closer to html), like Mustache or Handlebars, maybe a subset of that. I like Pug in theory but its templates aren't very reusable (outside of Pug).

[Jarred-Sumner]

I don't have a specific opinion on templating language itself

I think a custom JSX transform would be most interesting though because it would let us have better control over the JS format

[robogeek]

There shouldn't be a "built-in template engine". Instead Bun should be supporting all existing template engines equally. There are a bunch of existing template engines in the npm package ecosystem. What's wrong with all those engines?

[zolomatok]

I would be content with pug working, but it isn't. Prolly because of https://github.com/oven-sh/bun/issues/421

[Master-Y0da]

any advance on this ?

[DrSensor]

Since html attributes name can be anything other than '">/=, it would be interesting to leverage HTMLRewriter but with builtin cache. Supporting WebC or vue-like syntax as template engine would be trivial.

[zolomatok]

@Master-Y0da If it helps, while it's not built in, pug has been working since January, I've used it several times with Bun.

[Master-Y0da]

@zolomatok That's cool! I'm curious about some new bun frameworks like Hono and ElysiaJS ...so I plan to add pug to one of this and start playing around...Any help on how could I do this ?

[zolomatok]

@Master-Y0da

I'm not sure what exactly you mean, because those frameworks don't really have anything to do (as far as I gather) with how the content is rendered - they just serve whatever you feed them.

Nevertheless, I'll show you a couple examples, maybe that will answer your question.

Using Pug in general is pretty straightforward.

import * as pug from 'pug'
let page = pug.renderFile('./home.pug') // html string
// OR
let paragraph = pug.render('p Hello there') // html string

Then you just serve this html string with whatever HTTP server you are using, be it Bun.serve, Hone or ElysiaJS.

I myself never bother with 3rd party http servers, Node had a pretty good one and Bun's is even better.

Bun.serve example

import * as pug from 'pug'

Bun.serve({port: 2000, fetch: serve})

function serve(request: Request) {
    let page = pug.renderFile('./home.pug')
    let headers = {'Content-Type': 'text/html'}
    return new Response(page, {status: 200, headers: headers})
}

This is a http server, to make it https all you need do is simply provide TLS related fields to Bun.serve

Bun.serve({
    port: ...,
    keyFile: ...,
    certFile: ...,
    dhParamsFile: ...,
    fetch: ... })

Hono example (using their sample code)

import * as pug from 'pug'
import { Hono } from 'hono'

const app = new Hono()
app.get('/', (c) => {
    let page = pug.renderFile('./home.pug')
    return c.html(page)
})

export default app

ElysiaJS example (using their sample code)

import * as pug from 'pug'
import { Elysia } from 'elysia'

new Elysia()
    .get('/', () => (
        let page = pug.renderFile('./home.pug')
        return page
    ))
    .listen(3000)

I hope this answers your question. Let me know if you need more help. I haven't tested these examples, so there might be a paren missing here or there :)

[Master-Y0da]

@zolomatok Awesome answer!! you definetly got my point!!, thank you so much!