Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
amorey opened this issue Mar 28, 2017 · 4 comments
Open

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

amorey opened this issue Mar 28, 2017 · 4 comments
Labels
announcement

Comments

@amorey
Copy link
Member

amorey commented Mar 28, 2017

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
Copy link

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

@panoply
Copy link

panoply commented Apr 4, 2017 •
edited

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
Copy link
Member Author

amorey commented Apr 4, 2017

@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
Copy link

9mm commented Apr 11, 2017

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
announcement
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@amorey @akrawchyk @9mm @panoply