Secure mustache templates for data validation

Question

Secure mustache templates for data validation

Is there a method to achieve the following?:

my-custom-template.mstach

Hello {{name}}!

script.js

import { readFileSync, writeFileSync } from 'fs';
import * as Mustache from 'mustache';

export interface Person {
    name: string;
}

const data: Person = {
    name: 'Jon'
};

const templateContent = readFileSync('my-custom-template.mustache', 'utf-8');

// finding a way to specify the type of data in IDE
const result = Mustache.render(templateContent, data);

writeFileSync('my-custom-template.html', result, 'utf-8');

In case you were to modify it like this:

my-custom-template.mstach

Hello {{name}}, {{age}} <!-- red squiggles under age -->

This would result in having age not being part of the type Person, causing red squiggles. Seeking a solution that is compatible with Visual Studio Code.

Update:
Just to clarify, I am aiming for the outcome:

Hello {{name}}, {{age}} <!-- red squiggles under age -->

, rather than facing an issue with it.

typescript templates visual-studio-code mustache

Answer 1

Answer №1

Finding a simple solution may be difficult, but there are complex methods available. One idea that comes to mind is creating a tool to convert your *.mustache templates into typescript modules. By importing these modules like regular typescript files instead of using fs.readFileSync, you can simplify the process. Here's an example of how the compiled template with age might appear:

import * as Mustache from 'mustache';

const template = 'Hello {{name}}, {{age}} <!-- red squiggles under age -->';
export interface TemplateParams {
    name: string;
    age: string;
}
export default function render(params: TemplateParams): string {
    return Mustache.render(template, params);
}

This tool will need to be integrated into your build scripts for your app and set up to build incrementally in watch mode.

Answer 2

Finding a simple solution may be difficult, but there are complex methods available. One idea that comes to mind is creating a tool to convert your *.mustache templates into typescript modules. By importing these modules like regular typescript files instead of using fs.readFileSync, you can simplify the process. Here's an example of how the compiled template with age might appear:

import * as Mustache from 'mustache';

const template = 'Hello {{name}}, {{age}} <!-- red squiggles under age -->';
export interface TemplateParams {
    name: string;
    age: string;
}
export default function render(params: TemplateParams): string {
    return Mustache.render(template, params);
}

This tool will need to be integrated into your build scripts for your app and set up to build incrementally in watch mode.

Answer 3

Answer №2

According to Nikita's explanation, there are no existing tools to achieve this using Mustache, so you would have to create a compiler yourself. If you're open to exploring alternatives to Mustache, consider using template literals instead.

I developed a tool called embedded-typescript that leverages a compiler to produce type-safe templates with a syntax inspired by ejs. This project is open source, so you can use it as a foundation for creating something similar tailored to a Mustache-like syntax.

Answer 4

According to Nikita's explanation, there are no existing tools to achieve this using Mustache, so you would have to create a compiler yourself. If you're open to exploring alternatives to Mustache, consider using template literals instead.

I developed a tool called embedded-typescript that leverages a compiler to produce type-safe templates with a syntax inspired by ejs. This project is open source, so you can use it as a foundation for creating something similar tailored to a Mustache-like syntax.

Answer 5

Answer №3

Instead of using an interface, one alternative is to declare a type for your objects in JavaScript. This type declaration works similarly to Traits and allows you to define new properties for any JS Object. However, it will throw an error if you attempt to use the wrong type for a specific property.

import { readFileSync, writeFileSync } from 'fs';
import * as Mustache from 'mustache';

export interface PersonWithName {
    name: string;
}

export declare type Person = PersonWithName | any;

const hash: Person = {
    name: 'Jon'
};

const hashWithAge: Person = {
    name: 'Jon',
    age: 10,
    newAge: 20
};

const template = readFileSync('my-template.mustache', 'utf-8');

Answer 6

Instead of using an interface, one alternative is to declare a type for your objects in JavaScript. This type declaration works similarly to Traits and allows you to define new properties for any JS Object. However, it will throw an error if you attempt to use the wrong type for a specific property.

import { readFileSync, writeFileSync } from 'fs';
import * as Mustache from 'mustache';

export interface PersonWithName {
    name: string;
}

export declare type Person = PersonWithName | any;

const hash: Person = {
    name: 'Jon'
};

const hashWithAge: Person = {
    name: 'Jon',
    age: 10,
    newAge: 20
};

const template = readFileSync('my-template.mustache', 'utf-8');

Secure mustache templates for data validation

Answer №1

Answer №2

Answer №3

Similar questions

The cancel function in lodash's debounce feature does not successfully halt the execution of the

Verify the presence of identical items in the array

Terminal displays Typescript variable syntax error

Automatically adjust padding in nested lists with ReactJS and MaterialUI v1

Utilize the v-for Directive in Vue-Tables-2 Templates

When a 404 error is thrown in the route handlers of a Next.js app, it fails to display the corresponding 404 page

Interpret information in Angular 2 using Typescript

Understanding the functionality of imports within modules imported into Angular

Leveraging Angular 4-5's HttpClient for precise typing in HTTP requests

What are the steps to resolve the issue of assigning void type to type ((event: MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined in a react application?

Can callback argument types be contingent on certain conditions? For example, could argument 0 be null if argument 1 is a string?

Make sure the static variable is set up prior to injecting the provider

Encountering errors with React Bootstrap during the build process

Populate a chart in real-time with data pulled directly from the Component

Collaborating on a project that has been developed using various editions of Typescript

What's the best way to include various type dependencies in a TypeScript project?

Having trouble retrieving cookie in route.ts with NextJS

Encountering an error in Angular 8 with the plugin: Unhandled ReferenceError for SystemJS

Exploring the Magic of Class Variable Destructuring in React

Guide to customizing CSS styles within a div element using TypeScript code in a Leaflet legend