Added AMD version

[verlok]

Hey there, I need an AMD version of the script in order to conditionally load it only there it's needed using Require.JS, so I made it!

If you accept this, maybe others could benefit from it too. Otherwise it will live only in my little, humble repository.

[philipwalton]

My understanding is RequireJS can load plain JavaScript files, and since this polyfill doesn't have any dependencies, I don't believe it needs a define() wrapper. Am I wrong?

[verlok]

I didn’t know that RequireJS could load plain JavaScript files as a dependency.

So you think that something like this could work without requiring an AMD version of the polyfill?

var lazyLoadAmdUrl = "https://cdn.jsdelivr.net/npm/vanilla-lazyload@11.0.6/dist/lazyload.amd.min.js";
var polyfillAmdUrl = "https://cdn.jsdelivr.net/npm/intersection-observer-amd@1.0.0/intersection-observer-amd.js";

/// Dynamically define the dependencies
var dependencies = [
    "IntersectionObserver" in window
        ? null // <- Doesn't require the polyfill
        : polyfillAmdUrl,
    lazyLoadAmdUrl
];

// Initialize LazyLoad inside the callback
require(dependencies, function(_, LazyLoad) {
    var lazyLoadInstance = new LazyLoad({
        elements_selector: ".lazy"
        // ... more custom settings?
    });
}

[verlok]

Found this in the RequireJS doc

Ideally the scripts you load will be modules that are defined by calling define(). However, you may need to use some traditional/legacy "browser globals" scripts that do not express their dependencies via define(). For those, you can use the shim config. To properly express their dependencies.

If you do not express the dependencies, you will likely get loading errors since RequireJS loads scripts asynchronously and out of order for speed.

Now I’m trying to understand what the shim config is.

[verlok]

Found the shim config doc here: https://requirejs.org/docs/api.html#config-shim

This means that in order to load this polyfill in AMD, the user would need to play and fiddle with the RequireJS config file. Which can be tricky, but doable.

You decide what to do here. I prefer not to touch the RequireJS config, and I can keep loading my own version of the polyfill in AMD.

[philipwalton]

All browsers currently support native JavaScript modules, and from what I see most AMD usage is gradually switching to native JavaScript modules anyway.

My preference would be to not support older module formats if those formats have a way to solve this on their own.