Use ember-auto-import to bring in ClipboardJS

- Replace window.ClipboardJS with an import
- Make ember-auto-import a dependency
- Bump ClipboardJS version to add SSR support
- Bump ember-cli-babel
- Check for FastBoot in is-clipboard-supported helper
- Add FastBoot test

addon/components/copy-button.js

@@ -2,12 +2,13 @@ import Component from '@ember/component';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import layout from '../templates/components/copy-button';
+import ClipboardJS from 'clipboard';
 
 const CLIPBOARD_EVENTS = ['success', 'error'];
 
 export default class CopyButtonComponent extends Component {
   layout = layout;
-  tagName = "";
+  tagName = '';
 
   /**
    * If true - scope event listener to this element
@@ -60,13 +61,13 @@ export default class CopyButtonComponent extends Component {
    */
   _createClipboard() {
     const { clipboardText: text, delegateClickEvent } = this;
-    const trigger = delegateClickEvent === false
-      ? this._buttonElement
-      : `#${this._buttonElement.id}`;
+    const trigger =
+      delegateClickEvent === false
+        ? this._buttonElement
+        : `#${this._buttonElement.id}`;
 
-
-    return new window.ClipboardJS(trigger, {
-      text: typeof text === 'function' ? text : undefined
+    return new ClipboardJS(trigger, {
+      text: typeof text === 'function' ? text : undefined,
     });
   }
 
@@ -77,7 +78,7 @@ export default class CopyButtonComponent extends Component {
    * @returns {Void}
    */
   _registerActions(clipboard) {
-    CLIPBOARD_EVENTS.forEach(event => {
+    CLIPBOARD_EVENTS.forEach((event) => {
       clipboard.on(event, () => {
         if (!this._buttonElement.disabled) {
           const action = this[event];

addon/helpers/is-clipboard-supported.js

@@ -1,5 +1,16 @@
-import { helper } from '@ember/component/helper';
+import Helper from '@ember/component/helper';
+import ClipboardJS from 'clipboard';
+import { getOwner } from '@ember/application';
 
-export const isClipboardSupported =
-  window && window.ClipboardJS ? window.ClipboardJS.isSupported : () => false;
-export default helper(isClipboardSupported);
+export default class IsClipboardSupportedHelper extends Helper {
+  constructor() {
+    super(...arguments);
+    const service = getOwner(this).lookup('service:fastboot');
+    this.isFastboot = service?.isFastBoot;
+  }
+
+  compute([action]) {
+    const { isFastboot } = this;
+    return isFastboot ? false : ClipboardJS.isSupported(action);
+  }
+}

index.js

@@ -1,23 +1,5 @@
 'use strict';
 
-var path = require('path');
-var fastbootTransform = require('fastboot-transform');
-
 module.exports = {
   name: require('./package').name,
-
-  treeForVendor() {
-    var Funnel = require('broccoli-funnel');
-    var clipboardPath = path.join(path.dirname(require.resolve('clipboard')), '..');
-
-    return new fastbootTransform(Funnel(this.treeGenerator(clipboardPath), {
-      destDir: 'clipboard'
-    }));
-  },
-
-  included() {
-    this._super.included.apply(this, arguments);
-
-    this.import('vendor/clipboard/dist/clipboard.js');
-  }
 };

package.json

@@ -18,11 +18,11 @@
     "babel-eslint": "^10.0.3",
     "broccoli-asset-rev": "^3.0.0",
     "ember-angle-bracket-invocation-polyfill": "^2.0.2",
-    "ember-auto-import": "^1.5.3",
     "ember-cli": "~3.16.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-eslint": "^5.1.0",
     "ember-cli-fastboot": "^2.0.4",
+    "ember-cli-fastboot-testing": "^0.2.4",
     "ember-cli-flash": "^1.4.2",
     "ember-cli-github-pages": "^0.2.1",
     "ember-cli-inject-live-reload": "^2.0.2",
@@ -57,11 +57,10 @@
   },
   "dependencies": {
     "@ember/render-modifiers": "^1.0.1",
-    "broccoli-funnel": "^3.0.1",
-    "clipboard": "^2.0.0",
-    "ember-cli-babel": "^7.17.2",
-    "ember-cli-htmlbars": "^4.2.2",
-    "fastboot-transform": "^0.1.3"
+    "clipboard": "^2.0.6",
+    "ember-auto-import": "^1.5.3",
+    "ember-cli-babel": "^7.19.0",
+    "ember-cli-htmlbars": "^4.2.2"
   },
   "resolutions": {
     "clean-css": "4.2.1"

tests/fastboot/fastboot-test.js

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setup, visit } from 'ember-cli-fastboot-testing/test-support';
+
+module('FastBoot | fastboot', function (hooks) {
+  setup(hooks);
+
+  test('it renders with FastBoot', async function (assert) {
+    await visit('/');
+    assert
+      .dom('button.copy-btn')
+      .exists({ count: 4 }, '`<CopyButton>` renders in FastBoot');
+    assert
+      .dom('.application__supported-text')
+      .hasText(
+        'Clipboard is not supported',
+        '`{{is-clipboard-supported}}` returns `false` in FastBoot'
+      );
+  });
+});

tests/integration/helpers/is-clipboard-supported-test.js

@@ -0,0 +1,33 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import ClipboardJS from 'clipboard';
+
+module('Integration | Helper | is-clipboard-supported', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('isClipboardSupported works same as ClipboardJS.isSupported', async function (assert) {
+    await render(hbs`{{is-clipboard-supported this.action}}`);
+    [undefined, 'cut', 'copy', 'not-a-action'].forEach((action) => {
+      this.set('action', action);
+      assert
+        .dom()
+        .hasText(
+          `${ClipboardJS.isSupported(this.action)}`,
+          `\`is-clipboard-supported\` returns the correct value when given \`${action}\` action param`
+        );
+    });
+  });
+
+  test('isClipboardSupported when FastBoot is not present', async function (assert) {
+    this.owner.register('service:fastboot', null, { instantiate: false });
+    await render(hbs`{{is-clipboard-supported}}`);
+    assert
+      .dom()
+      .hasText(
+        `${ClipboardJS.isSupported()}`,
+        '`is-clipboard-supported` works when FastBoot is not present'
+      );
+  });
+});