Clipboard.js: Add support for ES6 module import

[lpellegr]

It seems the library cannot be loaded with module imports on modern browsers.

The purpose would be to allow such imports since JavaScript imports are now available with all major browsers. Including an esm file or adapting existing files in the NPM package to have a default export would allow the following:

import ClipboardJS from 'clipboard';

[chulkilee]

BTW I can import clipboard 2.0.1 from TypeScript (moduleResolution=node) and use it

import whatever from 'clipboard';

new whatever('#clipboard');

[lpellegr]

@chulkilee Thanks but the issue is about importing the library using raw JavaScript, not TypeScript:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

[chulkilee]

@lpellegr I know - that's why I said "BTW" :)

I'm also curious what's the current "modern" web-asset packaging which supports both direct import on web browser and webpack - could you add example of such libraries here so that the maintainer can take a look?

[lpellegr]

My usage is for an app built with Polymer 3 and bundled for differential serving (esm, es6, es5). Examples are the PWA sample apps:

https://polymer.github.io/pwa-starter-kit/building-and-deploying/

There are several different ways to add support for ESM. Several libraries such as momentjs, firebase-js-sdk, etc. have such a support.

[raphaguasta]

It's not working here too. :(

[LostInBrittany]

I have just summit a PR to make clipboard.js available as an ES6 module, as I needed it to migrate my granite-clipboard webcomponent to Polymer 3 / lit-element.

I needed to migrate some other @zenorocha libraries before, as clipboard.js has a dependency on select and good-listener, that aren't available as ES6 module yet. I have done PRs to make both of them available as ES6 modules (here for select, here for good-listener) but until they are merged I have published the ES6 modules as @migrate-to-esm/select and @migrate-to-esm/good-listener, and I have made this PR use them dependencies. They will be back to the standard one as soon as it's available.

[akoskm]

Is this planned for Clipboard.js 3.0 https://github.com/zenorocha/clipboard.js/issues/516?

[zenorocha]

Thanks for your patience on this. Can you confirm that https://github.com/zenorocha/clipboard.js/pull/596 address this problem?

[akoskm]

I can't recall what was the problem here. This was a long time ago and we ended up importing the minified version of the library:

import Clipboard from 'clipboard/dist/clipboard.min'

because this was working we didn't spend much time figuring out what's the problem. Now we tried importing:

import Clipboard from 'clipboard'

with version

clipboard@^2.0.4:
  version "2.0.4"
  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"

and it worked so I have no idea why we used the minified version. 🤷‍♂

[zenorocha]

Great news! 🎉 🎉 🎉

[ChiragMoradiya]

I think this is just a partial work. We have enabled ES6 module for clipboard.js, but it's dependencies 'select' and 'good-listener' aren't still upgraded for ES6 modules.

So, Those dependencies also need to be updated, and it's upgraded version should be used in the clipboard.js for the seamless integration.

Changes similar to https://github.com/zenorocha/clipboard.js/pull/596/files (module.exports is replaced with export default) should be made to the 'select' and 'good-listener' libraries too.