ezo

ezoljs

A functional javascript templating system inspired by elm

Showing:

Popularity

Downloads/wk

20

GitHub Stars

4

Maintenance

Last Commit

4yrs ago

Contributors

0

Package

Dependencies

1

Size (min+gzip)

33.5KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Ezol.js

NPM

Installation

npm i --save ezoljs

Description

This library is highly inspired by elm's html + view implementation. Similarly in Ezol, each element is dynamically created to be used as a first class function.

Each element takes 3 arguments:

element({ ...attrs }, "text", [childElements])

Example

const Ezol = require("ezoljs");

// example
const ezol = new Ezol();
const { div, nav, ul, li, a } = Ezol;

// inline styles accepted
const navStyle = `
  background: orange;
  padding: .5rem;
`;

const menuStyle = `
  align-items: center;
  display: flex;
  justify-content: space-between;
  list-style: none;
`;

const linkStyle = `
  color: #fff;
  margin-right: 1.5rem;
  text-decoration: none;
`;

const brandStyle = linkStyle.concat(`
  color: darkslateblue;
  font-size: 2rem;
`);

// link data
const links = [
  {
    text: "Ezol",
    attrs: {
      className: "navbar__menu-item-link active",
      href: "/",
      style: brandStyle
    }
  },
  {
    text: "Fork Me",
    attrs: {
      className: "navbar__menu-item-link",
      href: "https://github.com/mdxprograms/ezoljs",
      target: "_blank",
      style: linkStyle
    }
  }
];

// example event
const doSomething = e => {
  e.target.style.textDecoration = "none";
};

// basic view example
const appView = () =>
  div({ id: "app" }, "", [
    nav(
      {
        id: "navbar",
        style: navStyle,
        onclick: doSomething,
        className: "navbar"
      },
      "",
      [
        ul(
          { style: menuStyle, className: "navbar__menu" },
          "",
          links.map(link =>
            li({ className: "navbar__menu-item" }, "", [
              a(link.attrs, link.text, [])
            ])
          )
        )
      ]
    )
  ]);

ezol.attach(appView(), "body");

Todos

  • migrate code to es6 format
  • formalize tests
  • update examples in readme
  • add elements dictionary to dynamically create all html elements
  • add exports

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial