nestjs-jsx-template-engine
This is a template engine for Nestjs applications that allows you to use JSX-based templates with strongly-typed params for server-side rendered HTML.
You don't need any extra templating engine like nunjucks or handlebars, and you get type-safety out of the box.
There's no additional compiler, since TypeScript compiles JSX natively.
⚠️ WIP: this package is still in progress and that API is extremely volatile. Suggest not using in production.
Installation
Install the package:
npm install nest-jsx-template-engine
Update your tsconfig.json
file to include jsx
and jsxFactory
options:
Install the middleware in your Nest app.module
:
// app.module.ts;;;
Suggest installing it globally for all routes, but see Nest's documentation for other options on installing the middleware.
⚠️ by default, the middleware will not render the template for requests that do not expect HTML in the header (e.g.,
Accept: 'text/html'
). It will merely return the value from the controller. You can modify this behavior by extending the middleware class.
Rendering
// app.controller.ts;;;;;
Define your template with JSX:
// app.view.tsx /** * @param * @param * * See below on extending the props passed */
See a working demo in the Github repo.
Extending Render behavior
The Render behavior provided by the middleware can be overriden in two key ways by sub-classing the middleware.
;
A Note on React-Flavored JSX
This package does not support React flavored JSX (e.g., className
, htmlFor
, etc). It expects basic HTML properties.