morphonent

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.

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!