Takomo v9.0.2
Docs
Deployment Targets
Blog
API
Docs
Deployment Targets
Blog
API

Typescript support

Customizing Takomo with Typescript allows you to implement your own templating engine or customize Takomo's default Handlebars templating engine with Typescript.

Implementing custom template engine

If you want to implement your own template engine from scratch, you need to implement two objects. First, the template engine itself which must implement interface TemplateEngine, and then a provider that implements TemplateEngineProvider and is used to instantiate the template engine.

In your entry point file (defaults to takomo.ts) you register the template engine provider with templateEngineProvider property:

takomo.ts
1import {
2  HandlebarsTemplateEngineProvider,
3  RenderTemplateFileProps,
4  RenderTemplateProps,
5  TakomoConfigProvider,
6  TemplateEngine,
7  TemplateEngineProps,
8  TemplateEngineProvider,
9} from "takomo"
10
11const myTemplateEngine: TemplateEngine = {
12  renderTemplate: async (props: RenderTemplateProps): Promise<string> => {
13    return // TODO: Implement
14  },
15  renderTemplateFile: async (props: RenderTemplateFileProps): Promise<string> => {
16    return // TODO: Implement
17  },
18}
19
20const myTemplateEngineProvider: TemplateEngineProvider = {
21  init: async (props: TemplateEngineProps): Promise<TemplateEngine> => {
22    return myTemplateEngine
23  },
24}
25
26const provider: TakomoConfigProvider = async () => ({
27  templateEngineProvider: myTemplateEngineProvider
28})
29
30export default provider
NOTE

Please note that templateEngineProvider completely overrides any Handlebars configuration you have specified in takomo.yml file.

Customizing Handlebars template engine

You can also customize the default Handlebars templating engine like so:

takomo.ts
1import { 
2  HandlebarsTemplateEngineProvider, 
3  TakomoConfigProvider,
4} from "takomo"
5
6const provider: TakomoConfigProvider = async () => ({
7  templateEngineProvider: new HandlebarsTemplateEngineProvider({
8    helpersDirs: [/* paths to dirs containing helpers implemented with JavaScript */],
9    partialsDirs: [/* paths to dirs containing partials */],
10  }),
11})
12
13export default provider

Implementing helpers with Typescript

Your helpers must be of type HandlebarsHelper. You can also implement helper providers of type HandlebarsHelperProvider that instantiate helpers.

takomo.ts
1import { 
2  HandlebarsTemplateEngineProvider, 
3  TakomoConfigProvider, 
4  HandlebarsHelperProvider, 
5  InitHandlebarsHelperProps,  
6  HandlebarsHelper,
7} from "takomo"
8
9// Example helper
10const jsonHelper: HandlebarsHelper = {
11  name: "json",
12  fn: (value) => JSON.stringify(value),
13}
14
15// Example helper provider
16const equalsHelper: HandlebarsHelperProvider = {
17  init: async (props: InitHandlebarsHelperProps): Promise<HandlebarsHelper> => {
18    return {
19      name: "equals",
20      fn: (val1, val2) => val1 === val2,
21    }
22  },
23}
24
25const provider: TakomoConfigProvider = async () => ({
26  templateEngineProvider: new HandlebarsTemplateEngineProvider({
27    helpers: [
28      jsonHelper,
29    ],
30    helperProviders: [
31      equalsHelper,  
32    ],
33  }),
34})
35
36export default provider
ON THIS PAGE