1.0.6 • Published 3 years ago
jsx-simple-html-render v1.0.6
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-renderwebpack.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
.jsxextension to output HTML .jsis not output as HTML- Use
export defaultin.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' }
]