jsx-simple-html-render's Introduction

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: /&lt;/g, value: '<' },
  { regexp: /&gt;/g, value: '>' },
  { regexp: /&amp;/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: /&#x27;/g, value: "'" },
  { regexp: /htmlchecked/g, value: 'checked' },
  { regexp: /async=""/g, value: 'async' }
]

Recommend Projects