A library for building declartive web UIs via function composition
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.editorconfig
.eslintrc.js
.gitignore
.nvmrc
README.md
jest.config.js
package-lock.json
package.json
rollup.config.js

README.md

Composr

Composr is a proof-of-concept library for declaratively manipulating the DOM via function composition. I wrote this on CodePen before adapting it for my Manchester Frontend Meetup talk, Bundling ES Modules for Frontend Web Apps.

import {
    composeElement,
    setDomAttribute,
    withChildren,
    setText,
    applyClassToElement,
    mount,
} from '../';

const app = composeElement(
    withChildren(
        composeElement(
            setText('Hello!'),
            applyClassToElement('greeting'),
            applyClassToElement('greeting--large'),
        )('h1'),

        composeElement(
            withChildren(
                composeElement(
                    setText('My Dog'),
                )('h2'),

                composeElement(
                    setDomAttribute('src', 'https://goo.gl/DHwuqw'),
                )('img'),

                composeElement(
                    setText('Here\'s a picture of my dog.'),
                )('p'),
            )
        )('section'),
    ),
)('main');

mount(app, document.body);

Local development

First, you'll need to run:

git clone https://github.com/jamesseanwright/composr.git
cd composr
nvm install/use
npm i

Then run one of the following scripts:

  • npm run dev - builds the source and example app, and then starts the server
  • npm test - runs the unit tests

The npm run build script will generate respective ES module and CommonJS builds, which are consumed in the example app across two separate entry points.

Within the example app's index.html page, one can replace es with cjs in the sole script element to switch between the bundles; they are functionally identical.