Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
A JSX based html templating engine for browsers or Node environments.
To use the jsxte
you will have to set up your transpiler to use this package for transforming the JSX syntax, if you use typescript for transpiling all you have to do is set these options in the tsconfig:
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "jsxte"
}
}
If you use something else, like babel you will also need to adapt the configuration of that, for example: https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#with-a-configuration-file-recommended
Once you are done with that you can start writing your templates and rendering them.
import { renderToHtml } from "jsxte";
const Header = (props: { label: string }) => {
return <h1>{props.label}</h1>;
};
const App = (props: { label: string }) => {
return (
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<Header label={props.label} />
</body>
</html>
);
};
const html = renderToHtml(App, { label: "Hello World!" });
In case you use the templates in a server app in a Node environment you might want to include some data from the database in the html you serve to the client. To make it easier to fetch what's needed and marry it with the templates you can make your components asynchronous and send async requests from within them.
import { renderToHtmlAsync } from "jsxte";
const Header = () => {
return <h1>Hello World</h1>;
};
const ToDoList = async () => {
const todos = await fetchMyTodosFromDB();
return (
<table>
<thead>
<tr>
<th>Label</th>
<th>Is Done?</th>
</tr>
</thead>
<tbody>
{todos.map((todo) => (
<tr>
<td>{todo.label}</td>
<td>{todo.isDone ? "yes" : "no"}</td>
</tr>
))}
</tbody>
</table>
);
};
const App = () => {
return (
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<Header />
<h3>ToDo's:</h3>
<ToDoList />
</body>
</html>
);
};
// If your component contains an asynchronous component at any point, `renderToHtmlAsync` needs to be used instead of `renderToHtml`
const html = await renderToHtmlAsync(App, { label: "Hello World!" });
You can also use jsxte
with the Express View Engine. To do that, use the expressExtend
to add the engine support, specify the views directory and then use the express response method .render()
. The .render()
method takes the component props as it's second argument.
import express from "express";
import { expressExtend } from "jsxte";
const app = express();
expressExtend(app);
app.set("views", path.resolve(__dirname, "views"));
app.get("/", (_, resp) => {
const indexProps = {
/* ... */
};
resp.render("index", indexProps); // will render the component located in the ./views file
});
For this approach to work, the JSX Components must be exported as defaults (ex. export default () => <div></div>
or exports.default = () => <div></div>
) and the views must be transpiled to .js
files.
FAQs
JSX-based html templating engine for browsers or Node environments.
The npm package jsxte receives a total of 276 weekly downloads. As such, jsxte popularity was classified as not popular.
We found that jsxte demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.