Deepkit Template is a JSX based template engine to generate HTML or XML format.
Features
Typesafe
Typesafe components.Async
Async components.Dependency Injection
Dependency Injection.High Performance
High Performance.Templates
JSX allows you to write HTML, or any other XML based format in a typesafe way. It is a superset of JavaScript and thus allows you to use all JavaScript features.
export function MyComponent(props: { title: string }) { return <div>Hello {props.title}</div>; } router.get('/hello/:text', (text: string) => { return <MyComponent title={text}/>; }); //GET /hello/world => <div>Hello world</div>
High Performance
All JSX components are compiled to native JavaScript code at runtime. This allows to execute templates with the same performance as native JavaScript code.
// original TypeScript TSX export function MyComponent(props: {title: string}) { return <div>Hello {props.title}</div>; }
// is optimised at runtime export function MyComponent(props) { return '<div>Hello ' + escape(props.title) + '</div>'; }
Async Components
Components can be async. This allows you to load data from a file, database, or remote API and render the component once the data is available.
export async function MyComponent(props: { title: string }) { const data = await fetch('https://example.com/data'); return <div>Hello {props.title} {data}</div>; }
Dependency Injection
Deepkit Template supports dependency injection. This allows you to inject services into your components.
export async function User( props: { id: number }, database: Database, ) { const user = await database.query(User) .filter({ id: props.id }) .findOne(); return <div>Hello {user.name}</div>; } router.get('/user/:id', (id: number) => { return <User id={id}/>; });
