@innet/to

This plugin helps to change types of JSX Elements.

Installation

npm

npm i @innet/to

yarn

yarn add @innet/to

Or you can include the scripts into the head.

<!-- Dependencies (watchState, innet) -->
<script defer src="https://unpkg.com/watch-state/watch-state.min.js"></script>
<script defer src="https://unpkg.com/innet/innet.min.js"></script>

<!-- Target (innetTo) -->
<script defer src="https://unpkg.com/@innet/to/innet-to.min.js"></script>

Using

You can change each element to another.
For example div to span:

import innet from 'innet'
import to from '@innet/to'
import app from './app'

innet(app, undefined, {div: to('span')})

app.tsx

import innet from 'innet'
export default (
  <div>
    <div />
  </div>
)

You will get

<span>
  <span></span>
</span>

You can use Template or Component as the argument

function Link (props, children) {...}

innet(<div><a href=''>click me</a></div>, undefined, {
  a: to(Link)
})

Any a element will be switched to Link template.

Also, you can change only peace of application with @innet/plugins

import innet from 'innet'
import to from '@innet/to'
import plugins from '@innet/plugins'

function Link (props, children) {...}

function PeaceOfApp (props, children) {
  return (
    <plugins a={to(Link)}>{children}</plugins>
  )
}

innet((
  <>
    <a href="/">usual link</a>
    <PeaceOfApp>
      <a href="/">custom link</a>
    </PeaceOfApp>
  </>
), undefined, {plugins})

Issues

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