A JSX based html templating engine for browsers or Node environments.

Last update: May 16, 2022

JSX Template Engine

A JSX based html templating engine for browsers or Node environments.

Getting started

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.

{ return

{props.label}

; }; const App = (props: { label: string }) => { return (
); }; const html = renderToHtml(); // OR const html = renderToHtml(jsx(App, { label: "Hello World!" }));">
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!" />);
// OR
const html = renderToHtml(jsx(App, { label: "Hello World!" }));

Asynchronous Components

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.

{ return

Hello World

; }; const ToDoList = async () => { const todos = await fetchMyTodosFromDB(); return ( {todos.map((todo) => ( ))}
Label Is Done?
{todo.label} {todo.isDone ? "yes" : "no"}
); }; const App = () => { return (

ToDo's:

); }; // If your component contains an asynchronous component at any point, `renderToHtmlAsync` needs to be used instead of `renderToHtml` const html = await renderToHtmlAsync();">
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!" />);

Express JS View Engine

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.

{ const indexProps = { /* ... */ }; resp.render("index", indexProps); // will render the `index.js` component located in the ./views file });">
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 `index.js` component located in the ./views file
});

For this approach to work, the JSX Components must be exported as defaults (ex. export default () =>

or exports.default = () =>
) and the views must be transpiled to .js files.

Rendering to a string tag template

A string tag template is special type of function that can be used for custom parsing of template literals.

JSXTE allows you to leverage any existing string tag templates but with a JSX syntax instead of a template literal.

Example

${props.header}

`; // using JSXTE: import { renderToStringTemplateTag } from "jsxte"; import { html } from "some-library"; const props = { /* ... */ }; const result = renderToStringTemplateTag( html,

{props.header}

);">
// using template literal:
import { html } from "some-library";
const props = {
  /* ... */
};
const result = html`<div class="${props.className}">
  <h1>${props.header}h1>
div>`;

// using JSXTE:
import { renderToStringTemplateTag } from "jsxte";
import { html } from "some-library";
const props = {
  /* ... */
};
const result = renderToStringTemplateTag(
  html,
  <div class={props.className}>
    <h1>{props.header}</h1>
  </div>
);

If the string tag template function uses non standard html attribute names (ex. className instead of class or @click instead of onclick) you can map the attribute names render by this method by specifying mapping for those:

Click Me
, { attributeMap: { onclick: "@click", class: "className", }, } );">
const result = renderToStringTemplateTag(
  html,
  <div>
    <button class="my-class" onclick={handler}>
      Click Me
    </button>
  </div>,
  {
    attributeMap: {
      onclick: "@click",
      class: "className",
    },
  }
);

GitHub

https://github.com/ncpa0cpl/jsxte
You might also like...

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Free-from-jsx.macro - Babel macro that allows you to use a flutter like render syntax

Jan 27, 2022

Eslint-config - Modern ESlint configuration for JavaScript and TypeScript that includes Airbnb, React, jsx-a11y and Pettier rules

eslint-config-100terres A modern ESlint configuration for JavaScript, TypeScript

Mar 5, 2022

"To-do list" app - built with reactjs JSX javaScripts webpack gitflow

Project Name : To Do Lists "To-do list" is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to ma

May 27, 2022

Paperclip is a template engine that comes with tools for building presentational components in realtime

Paperclip is a template engine that comes with tools for building presentational components in realtime

Paperclip is a template engine that comes with tools for building presentational components in realtime

Jun 16, 2022

The instant on-demand Atomic CSS engine

The instant on-demand Atomic CSS engine

UnoCSS The instant on-demand Atomic CSS engine. 💡 I highly recommend reading th

Jun 18, 2022

A Custom Multer Storage Engine in Express with Nextjs Image placeholder

A Custom Multer Storage Engine in Express with Nextjs Image placeholder We will be creating a custom Multer Storage Engine to upload an image and a pl

Mar 20, 2022

💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

💥A cross-platform Node.js based CLI that generates boilerplate code for different tailwind web applications.

Jun 10, 2022

Boilerplate for a Blog based on React.js, Node.js & Next.js

Boilerplate for a Blog based on React.js, Node.js & Next.js

Boilerplate for a Blog based on React.js, Node.js & Next.js

Jun 17, 2022

Boilerplate for a Blog based on React.js, Node.js & Next.js

Boilerplate for a Blog based on React.js, Node.js & Next.js

OMISOFT BLOG EXAMPLE - ADMIN PANEL Here you can find a simple boilerplate for a Blog based on React.js & Next.js. We use this code in the project Sudo

Jun 17, 2022
Related tags
Vanilla JSX + HTML + CSS compiler and static-site generator (SSG)

VANIL Vanilla JSX + HTML + CSS compiler and static-site generator (SSG) VANIL is a compiler and static site generator (SSG) that combines TSX/JSX+HTML

Jun 8, 2022
Universal rendering for Preact: render JSX and Preact components to HTML.
Universal rendering for Preact: render JSX and Preact components to HTML.

preact-render-to-string Render JSX and Preact components to an HTML string. Works in Node & the browser, making it useful for universal/isomorphic ren

Jun 14, 2022
May 29, 2022
Locku-browser-extension - Simple Browser extension to save passwords across browsers

Locku A Simple browser extension for password management. Why another Password m

Jan 30, 2022
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS
:point_up::running: Modern Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS

Relay Fullstack is a Relay scaffolding application that aims to help you get up and running a project without worrying about integrating tools. It com

Jun 4, 2022
React component for highlighting js and jsx code with copy to clipboard functionallity
React component for highlighting js and jsx code with copy to clipboard functionallity

✨ ??️ React Highlight ✨ ??️ React component for highlighting js and jsx code wit

Mar 29, 2022
A react library to convert react jsx svg component to image dataurl.

Jsx To Png A react library to convert react jsx svg component to image dataurl. Motivation I wrote many react-svg components. Practically, I need to c

Dec 23, 2021
Nosx - Better API for React — without JSX

NoSX Better API for React — without JSX Ever wondered how you could use React wi

May 17, 2022
reactive like `hankey` implementation of JSX for browser

deuce-x reactive like ?? implementation of JSX for browser. this is opinion on how JSX should be implemented inspired by: curiosity about crank-js and

Jan 18, 2022
🍼 650B Virtual DOM - Use reactive JSX with minimal overhead

?? little-vdom Forked from developit's little-vdom gist. npm: npm i @luwes/little-vdom cdn: unpkg.com/@luwes/little-vdom 650B Virtual DOM Components S

Jun 21, 2022