Skip to main content
Deno 2 is finally here 🎉️
Learn more

🚀 View Engine

View Engine Logo

A Template View Engine for Deno frameworks

tag

Features:

  • Support multiple templating engines📰
  • Framework neutral🎨, it uses adapter to load engine
    • Current support Oak
  • Local file⛱ loading
  • Ashychorous⚡ remote file fetching (fetching template on the fly )
  • Dynamic module import, uses await to load adapters and engines🌈

Table of Contents


Usage

viewEngine(
  adapter: Adapter,
  engine:Engine,
  viewConfig?: ViewConfig
)

🎛Adapter

To get an Adapter, use adapterFactory.get[AdapterName]

import { oakAdapter } from "https://deno.land/x/view_engine@v10.5.1/mod.ts"

🚀Engine

To get a Engine, use engineFactory.get[EngineName]

import { ejsEngine, denjuckEngine, handlebarsEngine } from "https://deno.land/x/view_engine@v10.5.1/mod.ts"

⚙ViewConfig

const viewConfig: ViewConfig = {
  viewRoot: <string>"./views", // default: "", specify the root path, it can be remote address
}

🔝

Examples

Use Oak to render Ejs template at ./index.ejs

Suppose you have a folder like this:

/views/index.ejs
/app.ts
<!--index.html-->
<body>
  Hobbies of <%=data.name%> 
</body>
// app.ts
import { Application } from "https://deno.land/x/oak@v10.5.1/mod.ts";
import { viewEngine, ejsEngine, oakAdapter } from "https://deno.land/x/view_engine@v10.5.1/mod.ts"

const app = new Application();

app.use(
  viewEngine(oakAdapter, ejsEngine, {
    viewRoot: "./views/ejs",
  })
);

app.use(async (ctx, next) => {
  ctx.render("index.ejs", { data: { name: "John" } });
});

await app.listen({ port: 8000 });

Then run

> deno run --allow-net --allow-read ./app.ts

Open any browser, type http://localhost:8000 you should see the result.

🔝

Roadmap

  • Support ejs
  • Support Handlebars
  • Cache strategy
  • Framework neutral

Credit

Original work by @gjuoun