jsx-simple-html-render
v1.0.6
Published
simple html render
Downloads
19
Maintainers
Readme
jsx-simple-html-render
Webpack plugin that simply outputs HTML files using JSX
This is used by markup engineers for HTML delivery
There are still companies that are doing this kind of development, and I hope you can get in touch with JSX as much as possible.
I hope we can have a world where we don't need such a library.
Getting Started
Please install react environment and @babel/register
to use
npm i -D jsx-simple-html-render
webpack.config.js
const JsxSimpleHtmlRender = require('jsx-simple-html-render')
// ...
plugins: [
new JsxSimpleHtmlRender({
throwFlag: false, // true if you want to throw with react error
watch: true, // Hot reload
src: 'src/jsx',// JSX source dir
relativeRoot: 'dist', // Relative path origin
output: 'dist', // HTML output dir
replace: [ // HTML string replacement
{
regexp: /<!-- replace -->/,
value: 'hello'
}
]
})
]
Usage
- Use
.jsx
extension to output HTML .js
is not output as HTML- Use
export default
in.jsx
import React from 'react'
export default ({ relativePath }) => { // You can get relative paths in .jsx
return (
<html>
<body>
<a href="template/ExampleHTML.html">ExampleHTML</a>
{'<!-- comment out -->'} {/* HTML comment out output */}
<script src={`${relativePath}js/example.js`} />
</body>
</html>
)
}
Replace
Some attributes cannot be output as pure HTML because react is used Replacement list that jsx-simple-html-render puts by default
[
{ regexp: /</g, value: '<' },
{ regexp: />/g, value: '>' },
{ regexp: /&/g, value: '&' },
{ regexp: /charSet=/g, value: 'charset=' },
{ regexp: /frameBorder=/g, value: 'frameborder=' },
{ regexp: /htmlonclick/g, value: 'onclick' },
{ regexp: /hrefLang/g, value: 'hreflang' },
{ regexp: /colSpan/g, value: 'colspan' },
{ regexp: /'/g, value: "'" },
{ regexp: /htmlchecked/g, value: 'checked' },
{ regexp: /async=""/g, value: 'async' }
]