morphonent

!Coveralls github
!npm
!npm bundle size
!npm
!npm
!GitHub issues
!GitHub pull requests

morphonent is a JavaScript library for building web user interfaces

* Functional. Side-effect free and simple, your components will remain reasonable.
* No special syntax by default. Uses plain functions, no special syntax.
* Small. No runtime dependencies.
* Async by default. Designed to load asynchronously components.

For more information about the mission of morphonent, please check this dev.to post

Installation

morphonent is a simple npm package that you can install with yarn:

$> yarn add morphonent

or npm:

$> 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.

``js
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:

`js
{
"plugins": [
//...
["@babel/plugin-transform-react-jsx", {
"pragma": "element",
"pragmaFrag": "element",
"throwIfNamespace": false
}]
]
}
`

The previous example can be rewritten in JSX as follows:

`js
const Counter = ({times}) => {times}
const Increase = ({onIncrement}) => +1
const Decrease = ({onDecrease}) => -1
const Application = ({times}) =>

renderOn('body', )
``
And you will be able to use JSX in your application!