@srhazi/simpledom
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    simpledom

    A tiny, simple, strict, typescript-oriented DOM manipulation API.

    • Zero dependencies
    • Requires ES6 runtime (for Array.from())
    • Library size: 1,975 bytes minified (861 bytes gzip-compressed)
    • Works well with tsc --strict

    Installation

    npm install @srhazi/simpledom

    Building

    • Note: Minified standalone build depends on closure-compiler.
    • Version 1.0.1 built with
      • typescript version: 2.6.2
      • node version: 4.1.1
      • amdclean version: 2.7.0
      • Closure Compiler version: 20130227 (Built on: 2017/09/14 12:51)
    1. git clone https://github.com/sufianrhazi/simpledom.git
    2. cd simpledom
    3. npm install
    4. s/dist

    Usage

    All functions are named exports with concise names:

    import * as dom from '@srhazi/simpledom';
    
    // Typesafe document.querySelector()
    let form: HTMLFormElement = dom.one(HTMLFormElement, 'form.login');
    
    // Typesafe document.querySelectorAll()
    let buttons: HTMLButtonElement[] = dom.all(HTMLButtonElement, 'button.primary');
    
    // Typesafe el.querySelector()
    let submit: HTMLButtonElement = dom.oneFrom(form, HTMLButtonElement, 'button.submit');
    
    // Typesafe el.querySelectorAll()
    let formCheckboxes: HTMLInputElement[] = dom.allFrom(form, HTMLInputElement, 'input[type="checkbox"]');
    
    // Typesafe jQuery.on-lookalike
    dom.on(form, 'keypress', HTMLInputElement, 'input[type="text"][name="dotcom-2.0-name"]', (event, el) => {
        // event inferred as KeyboardEvent
        // el inferred as HTMLInputElement
        if ('aeiou'.indexOf(e.key) !== -1) {
            event.preventDefault();
        }
    });
    
    // String to Element constructor
    let container = dom.build(`
        <ul>
            <li>One</li>
            <li>Two</li>
        </ul>
    `);
    
    document.body.appendChild(container);
    
    // String to DocumentFragment constructor
    let moreItems = dom.buildMany(`
        <li>Three</li>
        <li>Four</li>
    `);
    
    container.appendChild(moreItems);

    Install

    npm i @srhazi/simpledom

    DownloadsWeekly Downloads

    2

    Version

    1.1.0

    License

    MIT

    Last publish

    Collaborators

    • srhazi