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 )
  • Template Caching🔥
  • 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]

const oakAdapter = adapterFactory.getOakAdapter();

🚀Engine

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

const ejsEngine = engineFactory.getEjsEngine();
const handlebarsEngine = engineFactory.getHandlebarsEngine();

⚙ViewConfig

const viewConfig: ViewConfig = {
  viewRoot: <string>"./view", // default: "", specify root path, it can be remote address
  viewExt: <string>".html",  // default: "", specify file extension
  useCache: <boolean> false // default: false, true if you want to cache template
}

🔝

Examples

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

Suppose you have a folder like this: 

/index.ejs
/app.ts
<!--index.html-->
<body>
  Hobbies of <%=data.name%> 
</body>
// app.ts
import { Application } from "https://deno.land/x/oak@v6.2.0/mod.ts";
import {
  viewEngine,
  engineFactory,
  adapterFactory,
} from "https://deno.land/x/view_engine@v1.4.4/mod.ts";

const ejsEngine = engineFactory.getEjsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

const app = new Application();

app.use(viewEngine(oakAdapter, ejsEngine));

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.

🔝

Oak render Handlebars template at ./view/index.handlebars

Suppose you have a folder like this:

/view/index.handlebars
/app.ts
<!--/view/index.handlebars-->
<body>
  <div>
    {{data.name}}
  </div>
</body>
// app.ts
import { Application } from "https://deno.land/x/oak@v6.2.0/mod.ts";
import {
  viewEngine,
  engineFactory,
  adapterFactory,
} from "https://deno.land/x/view_engine@v1.4.4/mod.ts";

const handlebarsEngine = engineFactory.getHandlebarsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

const app = new Application();

app.use(
  viewEngine(oakAdapter, handlebarsEngine, {
    viewRoot: "./view",
    viewExt: ".handlebars",
  })
);

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

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

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

🔝

Asychronous fetching remote template, viewConfig.useCache = true is recommended

// app.ts
import { Application } from "https://deno.land/x/oak@v6.2.0/mod.ts";
import {
  viewEngine,
  engineFactory,
  adapterFactory,
} from "https://deno.land/x/view_engine@v1.4.4/mod.ts";

const handlebarsEngine = engineFactory.getHandlebarsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

const app = new Application();

app.use(viewEngine(oakAdapter, handlebarsEngine, { useCache: true }));

app.use(async (ctx, next) => {
  const remoteTemplate = `https://deno.land/x/view_engine/view/index.handlebars`;

  // use 'await' for fetching remote template
  await ctx.render(remoteTemplate, { data: { name: "John" } });
});

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

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

🔝

Use standalone handlebar engine

// app.ts
import { engineFactory } from "https://deno.land/x/view_engine@v1.4.4/mod.ts";

const handlebarsEngine = engineFactory.getHandlebarsEngine();

const template = `
<body>
  My name is {{data.name}}
</body>`;

const rendered = handlebarsEngine(template, { data: { name: "John" } });
console.log(rendered);
/*
<body>
  My name is John
</body>
 */

Use Handlebars.registerHelper()

// app.ts
import { Application } from "https://deno.land/x/oak@v6.2.0/mod.ts";
import {
  viewEngine,
  engineFactory,
  adapterFactory,  hbs
} from "https://deno.land/x/view_engine@v1.4.4/mod.ts";

const handlebarsEngine = engineFactory.getHandlebarsEngine();
const oakAdapter = adapterFactory.getOakAdapter();

hbs.registerHelper('loud', (str:string) => {
  return str.toUpperCase()
})

const app = new Application();

app.use(
  viewEngine(oakAdapter, handlebarsEngine, {
    viewRoot: "./view",
    viewExt: ".handlebars",
  })
);

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

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

Then you are able to include this in your handlebar template:

{{loud "all in upper case"}}

🔝

Roadmap

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

Credit

Original work by @gjuoun