Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

packmar

1.0.0 • Public • Published

🍦 packmar.js

Pack your markup.

Simplest vanilla JavaScript nano library for create components-based UI.

👋🏾 What?

In 2018+ you don't need an framework for create UI for web apps.

This experiment shows:

  • how use modern vanilla JS in UI creating (instead of React, Vue, Backbone, JSX, VDOM...);
  • how remain simple and lightweight at the same time.

Packmar uses native Web API's and tagged template literals for define templates.

💪🏾 How?

Use it almost like stateless React-components.

import { pack, render } from 'packmar';
 
/**
 * Return the packed element of heading.
 * @param {String} options.text Heading text.
 * @param {Function} options.onClick Click callback.
 * @return {Object} packed element.
 */
function Heading ({ text, onClick }) {
    return pack`<h1 class="heading" click=${onClick}>${text}</h1>`;
}
 
render(Heading('Hello, world'), document.body);

Packmar relies on values types, you passed in template:

  • Strings and Numbers will be passed as normal text;
  • Functions in attributes will be added by addEventListener;
  • Booleans will add or remove attribute depending on the it truth;

Pass listeners

For listeners write attributes names like event names:

const button = pack`<button click=${() => alert('clicked!')}}>Click me!</button>`;

Pass arrays

Arrays in templates must contains only pack-elements:

const beatles = ['John Lennon', 'Ringo Starr', 'Paul McCartney', 'George Harrison'];
 
const list = pack`
    <ul>
        ${beatles.map(name => pack`<li>${name}</li>`)}
    </ul>
`;

Nested templates

function Button ({ text }) {
    return pack`<button>${text}</button>`;
}
 
function Form ({ onSubmit }) {
    return pack`
        <form submit=${onSubmit}
            <input type="email" placeholder="Your email" />
            ${Button({ text: 'Subscribe' })}
        </form>
    `;
}

Features

Packmar caches elements for reusable templates. Because parse HTML from string slower than cloning nodes.

🤘🏾 Next?

Ideas:

  • integration with Web Components (for nesting templates beautiful);
  • classes with patching DOM (for creating ractive UI with MVVM data bindings).

Keywords

none

Install

npm i packmar

DownloadsWeekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

20.9 kB

Total Files

22

Last publish

Collaborators

  • avatar