search

kubetail-org / loadjs

A tiny async loader / dependency manager for modern browsers (961 bytes)
MIT License
2.58k stars 151 forks source link

Announcement: New version with support for custom DOM insertion, custom css filenames and other features #42

Open amorey opened 7 years ago

amorey commented 7 years ago

Hi Everyone,

The latest version of LoadJS (v3.5.0) includes the following new features:

  1. Support for custom DOM insertion mechanisms via before callback method

    loadjs(['/path/to/foo.js'], {
  success: function() {},
  error: function(pathsNotFound) {},
  before: function(path, scriptEl) {
    document.body.appendChild(scriptEl);

    /* return `false` to bypass default DOM insertion mechanism (<head>) */
    return false;
  }
});

  2. Support for custom CSS filename suffixes via "css!" prefix

    loadjs(['css!/path/to/cssfile.custom'], {
  success: function() { /* cssfile.custom loaded as stylesheet */ }
});

  3. An .isDefined() method to detect previously defined bundle definitions

    if (!loadjs.isDefined('foobar')) {
  loadjs(['/path/to/foo.js', '/path/to/bar.js'], 'foobar', {
    success: function() { /* foo.js & bar.js loaded */ }
  });
}

Special thanks to @Boldewyn, @michelollivier, @sourcec0de, and @akrawchyk for their help with these features. Please try out the new version of LoadJS and let us know what you think!

Andres

https://github.com/muicss/loadjs https://www.npmjs.com/package/loadjs

akrawchyk commented 7 years ago

@amorey big props for getting this released! Keep up the awesome work!

panoply commented 7 years ago

Just to confirm, this version would thus enable us to set attributes on js and css files before they are appended? for example, those using something like turbolinks would rely on <script></script> element attrs such as data-turbolinks-eval="false" which are added to prevent scripts from being evaluated after each page rendering. Does this enable this as such?

Edit:

Yes, can be achieved and rather elegantly: 

<script>
   loadjs([
      'src-1.js',
      'src-2.js',
      'src-3.js',
      'src-4.js',
      'src-5.js',
   ],{
      before: function(path,  el) {
         switch (path) {
            case 'src-1.js':
            case 'src-2.js':
            case 'src-3.js':
            el.setAttribute('data-turbolinks-eval', 'false');
         }
      },
      success: function() {
       // Do fn
      }
   });
</script>
amorey commented 7 years ago

@panoply Haha! Thank you! Yes, your example is correct. Setting the data-turbolinks-eval attribute in the before callback will cause the scripts to be added to the DOM with that attribute set.

9mm commented 7 years ago

👍