Notwithstanding Precautions, Misadventure
    Have ideas to improve npm?Join in the discussion! »

    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