This plugin helps to change types of JSX Elements.
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>
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})
If you find a bug or have a suggestion, please file an issue on GitHub.