js: Use clipboard.js as a module.

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.eslintrc.json

@@ -97,7 +97,6 @@
             "files": ["frontend_tests/**", "static/js/**"],
             "globals": {
                 "$": false,
-                "ClipboardJS": false,
                 "FetchStatus": false,
                 "Filter": false,
                 "Handlebars": false,

frontend_tests/node_tests/popovers.js

@@ -1,3 +1,5 @@
+const rewiremock = require("rewiremock/node");
+
 set_global("$", global.make_zjquery());
 
 zrequire("hash_util");
@@ -13,8 +15,6 @@ zrequire("message_edit");
 const noop = function () {};
 $.fn.popover = noop; // this will get wrapped by our code
 
-zrequire("popovers");
-
 set_global("current_msg_list", {});
 set_global("page_params", {
     is_admin: false,
@@ -44,7 +44,10 @@ set_global("stream_data", {});
 function ClipboardJS(sel) {
     assert.equal(sel, ".copy_link");
 }
-set_global("ClipboardJS", ClipboardJS);
+
+rewiremock.proxy(() => zrequire("popovers"), {
+    clipboard: ClipboardJS,
+});
 
 const alice = {
     email: "alice@example.com",

frontend_tests/node_tests/settings_bots.js

@@ -1,3 +1,5 @@
+const rewiremock = require("rewiremock/node");
+
 set_global("page_params", {
     realm_uri: "https://chat.example.com",
     realm_embedded_bots: [
@@ -24,13 +26,15 @@ set_global("avatar", {});
 set_global("$", global.make_zjquery());
 
 zrequire("bot_data");
-zrequire("settings_bots");
 zrequire("people");
 
 function ClipboardJS(sel) {
     assert.equal(sel, "#copy_zuliprc");
 }
-set_global("ClipboardJS", ClipboardJS);
+
+rewiremock.proxy(() => zrequire("settings_bots"), {
+    clipboard: ClipboardJS,
+});
 
 bot_data.initialize(bot_data_params);
 

static/js/bundles/app.js

@@ -9,7 +9,6 @@ import "spectrum-colorpicker";
 import "../../third/marked/lib/marked.js";
 import "xdate/src/xdate.js";
 import "jquery-validation/dist/jquery.validate.js";
-import "clipboard/dist/clipboard.js";
 import "winchan/winchan.js";
 import "handlebars/dist/cjs/handlebars.runtime.js";
 import "flatpickr/dist/flatpickr.js";

static/js/message_edit.js

@@ -1,3 +1,5 @@
+const ClipboardJS = require("clipboard");
+
 const render_message_edit_form = require("../templates/message_edit_form.hbs");
 const render_topic_edit_form = require("../templates/topic_edit_form.hbs");
 

static/js/popovers.js

@@ -1,3 +1,4 @@
+const ClipboardJS = require("clipboard");
 const confirmDatePlugin = require("flatpickr/dist/plugins/confirmDate/confirmDate.js");
 
 const render_actions_popover_content = require("../templates/actions_popover_content.hbs");

static/js/settings_bots.js

@@ -1,3 +1,5 @@
+const ClipboardJS = require("clipboard");
+
 const render_bot_avatar_row = require("../templates/bot_avatar_row.hbs");
 const render_edit_bot = require("../templates/edit_bot.hbs");
 const render_settings_edit_embedded_bot_service = require("../templates/settings/edit_embedded_bot_service.hbs");

tools/webpack.config.ts

@@ -244,7 +244,6 @@ export default (env?: string): webpack.Configuration[] => {
     // Good error messages show up in production and development in the source maps
     const exposeOptions = [
         {path: "./debug-require.js", name: "require"},
-        {path: "clipboard/dist/clipboard.js", name: "ClipboardJS"},
         {path: "xdate/src/xdate.js", name: "XDate"},
         {path: "../static/third/marked/lib/marked.js"},
         {path: "../static/js/debug.js"},