JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    An uncomplicated user interface library for semantic templates
    Filed under  › 

    • 🔾25%Overall
    • 123
    • 4 days
    • 🕩44
    • 👥1

    dna-engine

    logo

    An uncomplicated user interface library for cloning semantic templates

    License:MIT npm Hits Build

    dna-engine is a lightweight easy-to-use UI library enabling developers to rapidly build maintainable JavaScript applications.

    A) Bookstore Example

    Designate templates with the dna-template class, and put the templates directly into the HTML of your web page.  Use the element's id to indicate the name of the template.  Enclose data fields in double tildes ~~.

    1. HTML for book template

    <h1>Featured Books</h1>
    <section class=books>
       <div id=book class=dna-template>
          <h2>~~title~~</h2>
          Author: <cite>~~author~~</cite>
       </div>
    </section>
    

    Then call the dna.clone() function to insert a copy of the template into the DOM.  The supplied JSON data object populates the fields of the template.

    2. JavaScript call to add book node

    dna.clone('book', { title: 'The DOM', author: 'Jan' });
    

    The new clone element replaces the template.  The original template is detached from the DOM and kept for additional cloning.

    3. Resulting HTML with clone

    <h1>Featured Books</h1>
    <section class=books>
       <div class=book>
          <h2>The DOM</h2>
          Author: <cite>Jan</cite>
       </div>
    </section>
    

    Need to clone the template multiple times?  Simply pass an array of data objects into the dna.clone() function.

    B) Additional Information

    C) Contributor Notes

    To be a contributor, fork the project and run the commands npm install and npm test on your local clone.  Make your edits and rerun the tests.

    Pull requests welcome.  Since the pacakge version number is updated during the release process, you can leave the version number unchanged.

    D) Build Environment

    Check out the runScriptsConfig section in package.json for an interesting approach to organizing build tasks.

    CLI Build Tools for package.json

    • 🎋 add-dist-headerPrepend a one-line banner comment (with license notice) to distribution files
    • 📄 copy-file-utilCopy or rename a file with optional package version number
    • 📂 copy-folder-utilRecursively copy files from one folder to another folder
    • 🪺 recursive-execRun a command on each file in a folder and its subfolders
    • 🔍 replacer-utilFind and replace strings or template outputs in text files
    • 🔢 rev-web-assetsRevision web asset filenames with cache busting content hash fingerprints
    • 🚆 run-scripts-utilOrganize npm package.json scripts into named groups of easy to manage commands
    • 🚦 w3c-html-validatorCheck the markup validity of HTML files using the W3C validator



    Feel free to submit questions at:
    github.com/dna-engine/dna-engine/issues

    dna-engine is open source under the MIT License.  The website and documentation are published under the CC BY-SA 4.0 license.

    Show All