Install:

NPM: to bundle it however you like:

• To install it: npm i @mrf3/modularize --save
• To import it:

// ES5
const Modularize = require('@mrf3/modularize').default

// ES6
import Modularize from '@mrf3/modularize'

Browser:

• You can get the latest bundle from here
• To Import it:

<script src="https://gitcdn.xyz/repo/mrf345/modularize/master/bin/Modularize.min.js"></script>
<script>
  var Templates = new Modularize()
</script>

Support:

Should work with anything newer than Internet Explorer 10 and NodeJS 13.

Usage:

var Templates = new Modularize(
    /**
     * Utility to help import html templates and parse them minimally.
     * @param {object} options contains the module options.
     * @param {array} stackOptions array of objects containing the module options.
     *
     * NOTE: when `stackOptions` is used `options` will be nullified.
     *`options` = {
     *  templatesPath: '/templates', // path where the templates are stored.
     *  data: {}, // data to parse the template with.
     *  appendTo: '.modularize', // element's selector to insert templates under.
     *  startsFrom: 1, // index number to start descending from.
     *  limit: 0, // limit to the number of templates to load.
     *  bypass: [], // array of index numbers to skip.
     *  extension: 'html', // the template file extension.
     *  reverseOrder: false,  // to reverse the order of displaying templates.
     * }
     *
     * `data` I.E: {1: {var1: 'something', name: 'something else'}, ...}
     *  NOTE: data to parse the template with. if data is meant to be global
     *        then use '*' as a key instead of the template index number `1`.
     */
)

// if the default options work for you out-of-the-box. this should load it:
Templates.load()
  .then(function(bundle) { console.log('All templates loaded:', bundle) })
  .catch(function(error) { console.warn(error) })

Example:

This is a live example of a static website that's composed of two nested directories; templates and subtemplates each contains its own templates.

• Configuration used to achieve that in index.html:

var Templates = new Modularize(undefined, [
    {
      templatesPath: '/templates/',
      appendTo: 'body',
      data: {
        5: {adjective: 'Awesome'},
        '*': {date: new Date().toLocaleDateString()}
      }
    },
    {
      templatesPath: '/templates/subtemplates',
      appendTo: '.subTemplates',
      data: {
        1: {postfix: 'intro'},
        2: {postfix: 'info'},
        3: {postfix: 'footer'},
        '*': {var: ' cool '}
      }
    }
  ])