NuGet Package Manager

    sweet-dom
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.1 • Public • Published

    Build Status License: MIT

    sweet-dom

    A DOM library for developers who don't want a DOM library.

    Only 1.2 KB of minified runtime code. Peanuts.

    Modern JavaScript has improved so much, old IE is out of the picture and the need for a comprehensive DOM library is decreasing.
    If you are comfortable with writing vanilla DOM but wouldn't mind just a tiny bit of sugar on top - this is for you.

    A good pick for small vanilla projects or for working with existing DOM (e.g browser extension).
    Could also be handy as a secondary pocket tool alongside your main components library, for those cases you do need some vanilla DOM (e.g. handling Ref elements and protals with React).

     

    What's in the box?

     


    Installation

    $ npm install --save sweet-dom

    or grab the iife and drop it like it's hot.

    Usage

    import {createElm, bindEvent} from 'sweet-dom';

     

    API


    Element Selection

    • $   - an alias for document.querySelector()
    • $$ - an alias for document.querySelectorAll()
    const elm = $('#my-id');
    const elms = $$('.my-classname');

     


    Element Creation

    createElm(selector, content1, content2, ...contentN)

    Returns HTMLElement

    selector - Required

    A string descriptor of an element. Supports a tag-name, an ID and classnames of the following format:

    'tag#id.classname1.classname2'
    
    // Results: <tag id="id" classname="classname1 classname2" />
    const selector = 'input#first-name.form-field.required-field';
    
    createElm(selector)
    
    // <input id="first-name" classname="form-field required-field" />

    ...contents - Optional

    The created element's children, spread as arguments. Accepts HTML elements, nodes and strings.

    // single
    const contents = 'Click'
    
    createElm('button', contents)
    
    // <button>Click</button>
    // multiple
    createElm('button', iconElm, 'Click')
    
    // spread arrays
    const contents = [iconElm, 'Click']
    createElm('button', ...contents)
    
    //<button> ☻ Click</button>

     

    createFrag(...contents?)

    Returns DocumentFragment

    ...contents

    Accepts HTML elements, nodes and strings.

    Example:

    createFrag(elm1, elm2, 'some string', elm3)

     


    Element Utils

    setStyle(elm, styleObject)

    Sets an element inline style.

    setStyle(divElm, {
    	height: '75px',
    	width: '200px',
    });
    
    /* 
      <div style="height: 75px; width: 200px;" />
    */

    setAttributes(elm, attrObject)

    Sets multiple attributes on an element.

    setAttributes(inputElm, {
    	type: 'number',
    	name: 'age',
    });
    
    /* 
      <input type="number" name="age" />
    */

     


    Element Insertion

    For placing elements.

    insert(elm)

    • .before(anotherElm)
    • .after(anotherElm)

    Both methods accept an element or a query selector string. To insert multiple elements pass in a fragment with children (see createFrag) not an array of elements.

    .before(anotherElm)

    insert(elmA).before(elmB)
    
    // <elmA>
    // <elmB>

    .after(anotherElm)

    insert(elm).after('#logo')
    
    // <div id="logo">
    // <elm>

     


    Event Binding

    • bindEvent()
    • bindEventOnce()

    A wrapper around addEventListener(). Accepts the event-target as first argument and the rest are the same arguments as the vanilla addEventListener.

    Returns a remove-listener function

    const unBindClick = bindEvent(elm, 'click', (ev) => {...})
    // or:
    const unBindClick = bindEventOnce(elm, 'click', (ev) => {...})
    
    unBindClick();

     

     

     

     

    Development

    TDD

    npm run dev - Run Mocha tests + watch

     

    Playground

    1. npm run play
    2. Open the playground HTML file in the browser:
      • <PATH_TO>/playground/playground.html

     

    Check Stuff

    • lint - Eslint check issues
    • test - Mocha test (for build)
    • check:types - TypeScript type checking
    • check - lint + types + test

     

    Publish a new version

    1. $ npm version major|minor|patch

      triggers:

      • preversion - Runs the npm check script
      • postversion - Git push + tags
    2. $ npm publish

      triggers:

      • prepublishOnly - Runs the build
        • prebuild - Delete "dist" folder
        • build - Rollup build for production
        • postbuild - Delete temporary declaration folder inside "dist"

    Install

    npm i sweet-dom

    DownloadsWeekly Downloads

    4

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    16.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • taitulism