A Template View Engine for Deno frameworks
await
to load adapters and enginesviewEngine(
adapter: Adapter,
engine:Engine,
viewConfig?: ViewConfig
)
To get an Adapter, use adapterFactory.get[AdapterName]
const oakAdapter = adapterFactory.getOakAdapter();
To get a Engine, use engineFactory.get[EngineName]
const ejsEngine = engineFactory.getEjsEngine();
const handlebarsEngine = engineFactory.getHandlebarsEngine();
const denjuckEngine = engineFactory.getDenjuckEngine();
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
}
./index.html
Suppose you have a folder like this:
/index.html
/app.ts
<!--index.html-->
<body>
<h1>{{data.name}}</h1>
</body>
// app.ts
import { Application } from "https://deno.land/x/oak@v6.0.0/mod.ts";
import {
viewEngine,
engineFactory,
adapterFactory,
} from "https://deno.land/x/view_engine@v1.3.0/mod.ts";
const denjuckEngine = engineFactory.getDenjuckEngine();
const oakAdapter = adapterFactory.getOakAdapter();
const app = new Application();
app.use(viewEngine(oakAdapter, denjuckEngine));
app.use(async (ctx, next) => {
ctx.render("index.html", { 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.
./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.0.0/mod.ts";
import {
viewEngine,
engineFactory,
adapterFactory,
} from "https://deno.land/x/view_engine@v1.3.0/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.
./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.0.0/mod.ts";
import {
viewEngine,
engineFactory,
adapterFactory,
} from "https://deno.land/x/view_engine@v1.3.0/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.
viewConfig.useCache = true
is recommended// app.ts
import { Application } from "https://deno.land/x/oak@v6.0.0/mod.ts";
import {
viewEngine,
engineFactory,
adapterFactory,
} from "https://deno.land/x/view_engine@v1.3.0/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.
// app.ts
import { engineFactory } from "https://deno.land/x/view_engine@v1.3.0/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>
*/
Author: deligenius
GitHub: https://github.com/deligenius/view-engine
#deno #javascript #nodejs #node