Nachos Pillage Milwaukee

    @mcaskill/html-build-attributes
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.0 • Public • Published

    HTML Build Attributes

    ES2017, TypeScript 4, Node 14


    Generate a string of HTML attributes.

    🐢 In its current state, this library is rather slow. Use with caution or sparingly.

    Install

    npm install @mcaskill/html-build-attributes

    Upgrade

    This package follows semantic versioning, which means breaking changes may occur between major releases.

    Usage

    Browse /examples for a list of demonstrations and enhancements.

    The following example demonstrates the default module:

    import {
      composeAttribute,
      composeAttributes,
      escapeAttributeValue,
      filterAttributeValue,
    } from '@mcaskill/html-build-attributes/default.js';
    
    const inputAttrs = {
      'type':           'file',
      'name':           'avatar',
      'multiple':       true,
      'disabled':       false,
      'accept':         [ 'image/png', 'image/jpeg' ],
      'data-type':      null,
      'data-max-files': 3,
    };
    
    console.log(`<input ${composeAttributes(inputAttrs)}>`);
    // → <input type="file" name="avatar" multiple accept="image/png,image/jpeg" data-max-files="3">
    
    const buttonAttrs = {
      'type':              'button',
      'id':                'ThemeLight',
      'aria-labelledby':   [ 'ThemeLight', 'ThemeLbl' ],
      'aria-pressed':      false,
      'data-toggle-theme': true,
    };
    
    console.log(`<button ${composeAttributes(buttonAttrs)}>Light</button>`);
    // → <button type="button" id="ThemeLight" aria-labelledby="ThemeLight ThemeLbl" aria-pressed="false" data-toggle-theme>Light</button>
    
    composeAttributes({ class: [], disabled: false });
    // → null
    
    composeAttribute('class', 'avatar');
    // → class="avatar"
    
    composeAttribute('aria-hidden', true);
    // → aria-hidden="true"
    
    composeAttribute('required', true);
    // → required
    
    composeAttribute('required', false);
    // → null
    
    filterAttributeValue({ id: 1, name: 'Tim' });
    // → {"id":1,"name":"Tim"}
    
    escapeAttributeValue('{"id":1,"name":"Tim"}');
    // → {&quot;id&quot;:1,&quot;name&quot;:&quot;Tim&quot;}

    API

    View API documentation

    Default Module

    @mcaskill/html-build-attributes/default.js

    A preset instance of HTMLBuildAttributes is available (featured above). It's equiped with basic filters and escape of common HTML entities, which should cover most HTML tags.

    Benchmarks

    Via the /benchmarks directory with Node 14.18.3.

    Below are results between the current and original implementations against a few simple use cases that cover most HTML attributes:

    # Set #1
      Original  x 1,352,212 ops/sec ±0.18% (99 runs sampled)
      Current   x 9,687 ops/sec ±0.77% (71 runs sampled)
    
    # Set #2
      Original  x 1,684,736 ops/sec ±0.14% (102 runs sampled)
      Current   x 13,722 ops/sec ±0.43% (93 runs sampled)
    
    # Set #3
      Original  x 953,387 ops/sec ±0.17% (101 runs sampled)
      Current   x 29,369 ops/sec ±0.17% (97 runs sampled)
    

    Implementations in other languages

    Related

    • classnames — A simple utility for conditionally joining CSS class names together.
    • clsx — A faster & smaller drop-in replacement for the classnames module.
    • he — A robust HTML entity encoder/decoder.
    • lodash.escape — A basic HTML entity encoder.
    • posthtml-attrs-parser A PostHTML helper that provides an improved API to work with a tag's attributes

    See Also

    Install

    npm i @mcaskill/html-build-attributes

    DownloadsWeekly Downloads

    4

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    116 kB

    Total Files

    128

    Last publish

    Collaborators

    • mcaskill