* Documentation under development
JavaScript TypeScript Xml — .jsx and .tsx file loader for Node.js
Allows you to write JTSX code and compile it into native HTML
The purpose of developing this loader is to solve the problem of comfortable use of JSX as a template engine, without being tied to React
JTSX files are transpiled using esbuild — a reliable and very fast transpiler
Only one dependency — esbuild
For conversion, the jsxFactory function is used, which converts tag attributes, attributes and child elements into standard HTML
The loader allows you to extend the transformation of JTSX files through configurations and self-written functions
Also loader allows you to prevent caching when importing components, which makes it possible to comfortably use page reloading when changes are made and not restart the server that renders the component
If you find a bug or want to suggest improvements to the loader, create an issue on github
About documentation
This documentation is a project within the module that can be run locally to learn how it works. The source code is located in the example folder
You can run it locally with npm i and npm run start or with nodemon for development npm run dev
IMPORTANT: This project is NOT a replacement for React, Vue and their derivatives. If you need reactivity and thick clients, it is better to use the appropriate tools
Installation, usage, requirements
Installation
npm install jtsx-loader
Usage
Projects must be run via the --import command
node --import jtsx-loader ./server.js
How to render a file
Let's write a simple index.jsx page component:
export default async ({ title }) => <html lang="en">
<head>
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<p>
Body content with array:
{[0, 1, 2].map(n => <code>{n}</code>)}
</p>
</body>
</html>;
Import the component via import(), the ?reload parameter is optional, used to prevent caching
const JSXComp = (await import('./index.jsx?reload')).default;Call the imported component as a function passing the data object and output the result to the console
const rendered = await JSXComp({ data: renderCount });
console.log(rendered);A detailed example with saving the result to a file here
Requirements
Minimum Node.js version - 20.16.0
Basic Examples
Native HTML Attributes
Only native HTML attributes are allowed
React attributes are not supported by design and should never be used
If you use React attributes, such as className,
a warning will be printed to the console, and the attribute will be rendered as is
Other differences from standard JSX:
__escapeattribute: used to output any escaped content__rawattribute: renders a string into the tag content as is, for example useful forscripttags andstyle- The JTSX file is passed the
_jsxUtilsobject, which contains useful utilities. Instead of this object, you can pass any function you want and use it to extend the standard transformation
All JavaScript capabilities that are used in regular JSX are available
IMPORTANT: all code is executed in the Node.js environment, so there is no browser DOM
Calculations
{(1 + 1 + 2 * 2) / 3}Result: 2
Node.js Standard Library
{Math.pow(9, 2)}Result: 81
Ternary expressions
1 > 2 ? <strong>Greater</strong> : 'Less'
Result: Less
2 > 1 ? <strong>Greater</strong> : 'Less'
Result: Greater
Array manipulation and component rendering
Renders components/tags with array data
[0, 1, 2].map(num => <code>{num}</code>)Result: 0 1 2
__escape
Output any escaped content
<code __escape={'<div>escaped</div>'}></code>Result: <div>escaped</div>
Request inside the component via fetch
const inlineRequest = await fetch(process.env.URL + '/api/200.json').then(r => r.json()).catch(e => e.message);
Called on every render
If the internal server is called, it must be running before the render starts
Response: {
"code": 200,
"message": "Success"
}Imported component
Fragment imported to page components/Inner.tsx
The number of times the component was rendered after the server restart: 9
This block uses className, which is converted to class
Children components re-rendered from the parent:
Child component 0
Child component 1
Custom attributes and their processing
<input type="text" ac:custom="input" is transformed into data-ac-custom="input"
The handler is written in jtsx.config.js
Authors
References
https://esbuild.github.io/api/#jsx-factory