1.0.1 • Published 2 years ago

@innet/html v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

  @innet/html

 

NPM minzipped size downloads license

Abstract

This package helps to convert jsx elements into html text.

stars watchers

Install

npm

npm i @innet/html

yarn

yarn add @innet/html

Or 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>

Usage

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>

Issues

If you find a bug or have a suggestion, please file an issue on GitHub.

issues