Neutralize Pesky Miscreants

    morphonent

    0.16.0 • Public • Published

    morphonent

    Build Status 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.

    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!

    Install

    npm i morphonent

    DownloadsWeekly Downloads

    56

    Version

    0.16.0

    License

    MIT

    Unpacked Size

    13.5 kB

    Total Files

    5

    Last publish

    Collaborators

    • kmruiz