npm:morphonent | Skypack
Usage no npm install needed!
<script type="module">
import morphonent from 'https://cdn.skypack.dev/morphonent';
</script>
gt; yarn add morphonent
or npm:
gt; npm install --save morphonent
morphonent is bundled as a ES module that is importable from a modern browser or an application compiled
with babel.
Getting Started
You can have a simple morphonent application in few minutes with webpack. You can see how in the getting
started guide on our wiki.
How does it look like?
If you want to see an example simple todo-list application, click here..
Let's take a look at this sample application, that acts as a counter.
const counter = times => element('span', {}, times)
const increase = onIncrement => element('button', {onclick: onIncrement}, '+1')
const decrease = onDecrease => element('button', {onclick: onDecrease}, '-1')
const application = times => element('div', {},
counter(times),
increase(() => application(times + 1)),
decrease(() => application(times - 1))
)
renderOn('body', application(0))
Using JSX
To use JSX, you will need babel and babel-plugin-transform-react-jsx. You will need to add the following configuration
to your .babelrc:
{
"plugins": [
//...
["@babel/plugin-transform-react-jsx", {
"pragma": "element",
"pragmaFrag": "element",
"throwIfNamespace": false
}]
]
}
The previous example can be rewritten in JSX as follows:
const Counter = ({times}) => <span>{times}</span>
const Increase = ({onIncrement}) => <button onclick={onIncrement}>+1</button>
const Decrease = ({onDecrease}) => <button onclick={onDecrease}>-1</button>
const Application = ({times}) => <div>
<Counter times={times} />
<Increase onIncrement={() => <Application times={times + 1} />}/>
<Decrease onDecrease={() => <Application times={times - 1} />}/>
</div>
renderOn('body', <Application times={0} />)
And you will be able to use JSX in your application!