pHTML JSX 
pHTML JSX lets you use JSX in HTML.
<!doctype html>
<>
<html lang="en" dir={dir}>
<head>
<title>pHTML JSX</title>
</head>
<body>
<p class={pClass}>Hello, {name}!</p>
</body>
</html>
</>
<!-- using { dir: "ltr", pClass: "foo", name: "World" } becomes -->
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>pHTML JSX</title>
</head>
<body>
<p class="foo">Hello, World!</p>
</body>
</html>Alternatively, a jsx attribute can toggle an existing element.
<!doctype html>
<html lang="en" dir={dir} jsx>
<head>
<title>pHTML JSX</title>
</head>
<body>
<p class={pClass}>Hello, {name}!</p>
</body>
</html>
<!-- becomes -->
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>pHTML JSX</title>
</head>
<body>
<p class="foo">Hello, World!</p>
</body>
</html>Usage
Transform HTML files directly from the command line:
npx phtml source.html output.html -p @phtml/jsxNode
Add pHTML JSX to your project:
npm install @phtml/jsx --save-devUse pHTML JSX to process your HTML:
const phtmlJsx = require('@phtml/jsx');
phtmlJsx.process(YOUR_HTML /*, processOptions, pluginOptions */);Or use it as a pHTML plugin:
const phtml = require('phtml');
const phtmlJsx = require('@phtml/jsx');
phtml([
phtmlJsx(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);pHTML JSX runs in all Node environments, with special instructions for:
| Node | CLI | Eleventy | Gulp | Grunt |
|---|
Options
data
The data option defines an object whose properties will be accessible as
global variables within JSX fragments.
transformOptions
The transformOptions option defines the transform options provided to Babel.
By default, these options include the plugins
@babel/plugin-proposal-object-rest-spread
@babel/plugin-transform-react-jsx
and
@babel/plugin-transform-react-jsx-source.
plugins
The plugins option defines Babel plugins that will run after JSX
transformations.
beforePlugins
The plugins option defines Babel plugins that will run before JSX
transformations.