Replace clipboard.js with async clipboard api (#15899)

Use async clipboard api [1] over this dependency, saving around 10kB bundle size before minify while delivering the same functionality. The issue comment button works but does not have a popup indication. We could add some toast-style notifications in the future to fix that but I think it's out of scope of this PR. [1] https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/writeText
2021-05-30 21:15:57 +02:00 · 2021-05-30 21:15:57 +02:00 · 37205039fc
commit 37205039fc
parent 36dce0e457
5 changed files with 38 additions and 90 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -9,7 +9,6 @@
        "@claviska/jquery-minicolors": "2.3.5",
        "@primer/octicons": "13.0.0",
        "add-asset-webpack-plugin": "2.0.1",
-        "clipboard": "2.0.8",
        "codemirror": "5.61.0",
        "css-loader": "5.2.4",
        "dropzone": "5.9.2",
@ -2649,16 +2648,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/clipboard": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-      "dependencies": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
    "node_modules/cliui": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@ -3481,11 +3470,6 @@
        "node": ">=0.4.0"
      }
    },
-    "node_modules/delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-    },
    "node_modules/detect-newline": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@ -5567,14 +5551,6 @@
        "node": ">=0.6.0"
      }
    },
-    "node_modules/good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "dependencies": {
-        "delegate": "^3.1.2"
-      }
-    },
    "node_modules/graceful-fs": {
      "version": "4.2.6",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@ -10856,11 +10832,6 @@
        "url": "https://opencollective.com/webpack"
      }
    },
-    "node_modules/select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
-    },
    "node_modules/semver": {
      "version": "7.3.5",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@ -12256,11 +12227,6 @@
      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
      "dev": true
    },
-    "node_modules/tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-    },
    "node_modules/tmpl": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
@ -15708,16 +15674,6 @@
        "escape-string-regexp": "^1.0.5"
      }
    },
-    "clipboard": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/clipboard/-/clipboard-2.0.8.tgz",
-      "integrity": "sha512-Y6WO0unAIQp5bLmk1zdThRhgJt/x3ks6f30s3oE3H1mgIEU33XyQjEf8gsf6DxC7NPX8Y1SsNWjUjL/ywLnnbQ==",
-      "requires": {
-        "good-listener": "^1.2.2",
-        "select": "^1.1.2",
-        "tiny-emitter": "^2.0.0"
-      }
-    },
    "cliui": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@ -16412,11 +16368,6 @@
      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
      "dev": true
    },
-    "delegate": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/delegate/-/delegate-3.2.0.tgz",
-      "integrity": "sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw=="
-    },
    "detect-newline": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz",
@ -18044,14 +17995,6 @@
        "minimist": "^1.2.5"
      }
    },
-    "good-listener": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/good-listener/-/good-listener-1.2.2.tgz",
-      "integrity": "sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=",
-      "requires": {
-        "delegate": "^3.1.2"
-      }
-    },
    "graceful-fs": {
      "version": "4.2.6",
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
@ -22064,11 +22007,6 @@
        "ajv-keywords": "^3.5.2"
      }
    },
-    "select": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/select/-/select-1.1.2.tgz",
-      "integrity": "sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0="
-    },
    "semver": {
      "version": "7.3.5",
      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
@ -23188,11 +23126,6 @@
      "integrity": "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA==",
      "dev": true
    },
-    "tiny-emitter": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-emitter/-/tiny-emitter-2.1.0.tgz",
-      "integrity": "sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q=="
-    },
    "tmpl": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.4.tgz",
--- a/package.json
+++ b/package.json
@ -9,7 +9,6 @@
    "@claviska/jquery-minicolors": "2.3.5",
    "@primer/octicons": "13.0.0",
    "add-asset-webpack-plugin": "2.0.1",
-    "clipboard": "2.0.8",
    "codemirror": "5.61.0",
    "css-loader": "5.2.4",
    "dropzone": "5.9.2",
--- a/templates/repo/clone_buttons.tmpl
+++ b/templates/repo/clone_buttons.tmpl
@ -14,7 +14,7 @@
 	<input id="repo-clone-url" value="{{if $.PageIsWiki}}{{$.WikiCloneLink.SSH}}{{else}}{{$.CloneLink.SSH}}{{end}}" readonly>
 {{end}}
 {{if or (not $.DisableHTTP) (and (not $.DisableSSH) (or $.IsSigned $.ExposeAnonSSH))}}
-	<button class="ui basic icon button poping up clipboard" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
+	<button class="ui basic icon button poping up" id="clipboard-btn" data-original="{{.i18n.Tr "repo.copy_link"}}" data-success="{{.i18n.Tr "repo.copy_link_success"}}" data-error="{{.i18n.Tr "repo.copy_link_error"}}" data-content="{{.i18n.Tr "repo.copy_link"}}" data-variation="inverted tiny" data-clipboard-target="#repo-clone-url">
 		{{svg "octicon-clippy"}}
 	</button>
 {{end}}
--- a/templates/repo/issue/view_content/context_menu.tmpl
+++ b/templates/repo/issue/view_content/context_menu.tmpl
@ -10,7 +10,7 @@
 		{{ else }}
 			{{ $referenceUrl = Printf "%s%s/pulls/%d/files#%s" AppUrl .ctx.Repository.FullName .ctx.Issue.Index .item.HashTag }}
 		{{ end }}
-		<div class="item context clipboard" data-clipboard-text="{{$referenceUrl}}">{{.ctx.i18n.Tr "repo.issues.context.copy_link"}}</div>
+		<div class="item context" data-clipboard-text="{{$referenceUrl}}">{{.ctx.i18n.Tr "repo.issues.context.copy_link"}}</div>
 		<div class="item context quote-reply {{if .diff}}quote-reply-diff{{end}}" data-target="{{.item.ID}}">{{.ctx.i18n.Tr "repo.issues.context.quote_reply"}}</div>
 		{{if not .ctx.UnitIssuesGlobalDisabled}}
 			<div class="item context reference-issue" data-target="{{.item.ID}}" data-modal="#reference-issue-modal" data-poster="{{.item.Poster.GetDisplayName}}" data-reference="{{$referenceUrl}}">{{.ctx.i18n.Tr "repo.issues.context.reference_issue"}}</div>
--- a/web_src/js/features/clipboard.js
+++ b/web_src/js/features/clipboard.js
@ -1,22 +1,38 @@
+const selector = '[data-clipboard-target], [data-clipboard-text]';
+
+// TODO: replace these with toast-style notifications
+function onSuccess(btn) {
+  if (!btn.dataset.content) return;
+  $(btn).popup('destroy');
+  btn.dataset.content = btn.dataset.success;
+  $(btn).popup('show');
+  btn.dataset.content = btn.dataset.original;
+}
+function onError(btn) {
+  if (!btn.dataset.content) return;
+  $(btn).popup('destroy');
+  btn.dataset.content = btn.dataset.error;
+  $(btn).popup('show');
+  btn.dataset.content = btn.dataset.original;
+}
+
 export default async function initClipboard() {
-  const els = document.querySelectorAll('.clipboard');
-  if (!els || !els.length) return;
+  for (const btn of document.querySelectorAll(selector) || []) {
+    btn.addEventListener('click', async () => {
+      let text;
+      if (btn.dataset.clipboardText) {
+        text = btn.dataset.clipboardText;
+      } else if (btn.dataset.clipboardTarget) {
+        text = document.querySelector(btn.dataset.clipboardTarget)?.value;
+      }
+      if (!text) return;

-  const {default: ClipboardJS} = await import(/* webpackChunkName: "clipboard" */'clipboard');
-
-  const clipboard = new ClipboardJS(els);
-  clipboard.on('success', (e) => {
-    e.clearSelection();
-    $(e.trigger).popup('destroy');
-    e.trigger.dataset.content = e.trigger.dataset.success;
-    $(e.trigger).popup('show');
-    e.trigger.dataset.content = e.trigger.dataset.original;
-  });
-
-  clipboard.on('error', (e) => {
-    $(e.trigger).popup('destroy');
-    e.trigger.dataset.content = e.trigger.dataset.error;
-    $(e.trigger).popup('show');
-    e.trigger.dataset.content = e.trigger.dataset.original;
+      try {
+        await navigator.clipboard.writeText(text);
+        onSuccess(btn);
+      } catch {
+        onError(btn);
+      }
    });
  }
+}