This package helps to convert jsx elements into html text.
npm
npm i @innet/htmlyarn
yarn add @innet/htmlOr you can include the scripts into the head.
<!-- Target (innet) -->
<script defer src="https://unpkg.com/innet/innet.min.js"></script>
<!-- Target (innetHTML) -->
<script defer src="https://unpkg.com/@innet/html/innetHTML.min.js"></script>You can use htmlPlugin when you want to convert whole app.
import innet, { createHandler } from 'innet'
import { htmlPlugin } from '@innet/html'
const handler = createHandler([
htmlPlugin,
])
innet(<div />, handler)
// '<div></div>'You can combine it with other plugins to handle deep html.
import innet, { createHandler } from 'innet'
import { array, arraySync } from '@innet/utils'
import { htmlPlugin } from '@innet/html'
const join = () => arr => arr.join('')
const handler = createHandler([
htmlPlugin,
array([
arraySync,
join,
])
])
innet((
<>
<h1>Test</h1>
<div class={'test'}>
<span>
<img src="#" alt="test" />
</span>
<p>
Hello World!
</p>
</div>
</>
), handler)Also, you can use jsx plugin of html to handle it inside html component
handler.ts
import { createHandler } from 'innet'
import { array, arraySync, nullish, object, stop } from '@innet/utils'
import html from '@innet/html'
const join = () => arr => arr.join('')
export const handler = createHandler([
nullish([stop]),
array([arraySync, join]),
object([
jsxPlugins({
html,
}),
]),
])index.tsx
import innet from 'innet'
import { handler } from './handler'
innet(<html><base href='test' /><body /></html>, handler)
// <html><base href="test"><body></body></html>If you find a bug or have a suggestion, please file an issue on GitHub.
