Flatpickr: UMD support

[zlepper]

I would like to have UMD definitions for flatpickr, so it can be used with different bundling systems like webpack or requirejs.

Expected Behavior

UMD is something you wrap the js with, so it is exposed to all the module systems available right now. More info here: https://github.com/umdjs/umd

Current Behavior

Right now importing flatpickr with something like requirejs is pretty difficult, as flatpickr is added to the global scope, and then when you need something like i10n, then it's pretty much impossible to get working (At least i haven't figured out how)

Possible Solution

Look at how the UMD people recommend doing it: https://github.com/umdjs/umd

Context

I can't use translations in my app

Your Environment

• Version used: 1.9.1
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Windows 10 Desktop
• Link to your project: Closed source project

[chmln]

Hello,

Webpack uses require, and flatpickr is exported as a module.
I've tried packaging as a UMD module, but it didn't play nicely with some globals and I'm not sure if its worth the effort.

Right now importing flatpickr with something like requirejs is pretty difficult, as flatpickr is added to the global >scope, and then when you need something like i10n, then it's pretty much impossible to get working (At least i
haven't figured out how)

I'ts been a while since 1.9.1.
See https://chmln.github.io/flatpickr/#locale

[fabien]

This workaround using shim works for me:

require(['flatpickr', 'flatpickr.nl'], function() { ... });

RequireJS config:

{
    "paths": {
        "flatpickr": "/js/flatpickr/flatpickr.min",
        "flatpickr.confirmDate": "/js/flatpickr/plugins/confirmDate/confirmDate",
        "flatpickr.labelPlugin": "/js/flatpickr/plugins/labelPlugin/labelPlugin",
        "flatpickr.weekSelect": "/js/flatpickr/plugins/weekSelect/weekSelect",
        "flatpickr.l10n": "/js/flatpickr/l10n",
        "flatpickr.nl": "/js/flatpickr/l10n/nl",
        "flatpickr.de": "/js/flatpickr/l10n/de",
        "flatpickr.fr": "/js/flatpickr/l10n/fr",
        "flatpickr.es": "/js/flatpickr/l10n/es"
    },
    "shim": {
        "flatpickr": { "exports": "Flatpickr" },
        "flatpickr.confirmDate": { "deps": ["flatpickr"], "exports": "confirmDatePlugin" },
        "flatpickr.labelPlugin": { "deps": ["flatpickr"], "exports": "labelPlugin" },
        "flatpickr.weekSelect": { "deps": ["flatpickr"], "exports": "weekSelectPlugin" },
        "flatpickr.nl": ["flatpickr"],
        "flatpickr.de": ["flatpickr"],
        "flatpickr.fr": ["flatpickr"],
        "flatpickr.es": ["flatpickr"]
    }
}

[nikolay-borzov]

You should add the workaround to the docs. People still use RequireJS