chore: add prettier for consistent formatting

.eslintrc.js

@@ -11,7 +11,11 @@ module.exports = {
     },
   },
   plugins: ["ember"],
-  extends: ["eslint:recommended", "plugin:ember/recommended"],
+  extends: [
+    "eslint:recommended",
+    "plugin:ember/recommended",
+    "plugin:prettier/recommended",
+  ],
   env: {
     browser: true,
   },

addon/components/ember-islands.js

@@ -1,12 +1,12 @@
-import Ember from 'ember';
-import Reconciler from 'ember-islands/utils/reconciler';
-import queryIslandComponents from 'ember-islands/utils/query-island-components';
-import getRenderComponent from 'ember-islands/utils/get-render-component';
+import Ember from "ember";
+import Reconciler from "ember-islands/utils/reconciler";
+import queryIslandComponents from "ember-islands/utils/query-island-components";
+import getRenderComponent from "ember-islands/utils/get-render-component";
 
 let eiInstance;
 
 export default Ember.Component.extend({
-  tagName: '',
+  tagName: "",
 
   init() {
     this._super(...arguments);
@@ -24,7 +24,7 @@ export default Ember.Component.extend({
 
       destroy(c) {
         c.destroy();
-      }
+      },
     });
 
     eiInstance = this;
@@ -43,8 +43,8 @@ export default Ember.Component.extend({
   },
 
   willDestroyElement() {
-    this.reconciler.forEachRenderedComponent(c => c.destroy());
-  }
+    this.reconciler.forEachRenderedComponent((c) => c.destroy());
+  },
 });
 
 export function getInstance() {

addon/index.js

@@ -1,4 +1,4 @@
-import { getInstance } from './components/ember-islands';
+import { getInstance } from "./components/ember-islands";
 
 export function reconcile() {
   getInstance().reconcile();

addon/utils/get-render-component.js

@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import Ember from "ember";
 const { getOwner, Component, Logger } = Ember;
 
 export default function getRenderComponent(emberObject) {
@@ -10,14 +10,19 @@ export default function getRenderComponent(emberObject) {
 
     // This can only be true in production mode where assert is a no-op.
     if (!component) {
-      ({ component, layout } = provideMissingComponentInProductionMode(owner, name));
+      ({ component, layout } = provideMissingComponentInProductionMode(
+        owner,
+        name
+      ));
     }
 
     if (layout) {
       attrs.layout = layout;
     }
 
-    while (element.firstChild) { element.removeChild(element.firstChild); }
+    while (element.firstChild) {
+      element.removeChild(element.firstChild);
+    }
     let componentInstance = component.create(attrs);
     componentInstance.appendTo(element);
 
@@ -46,5 +51,5 @@ function missingComponentMessage(name) {
 function provideMissingComponentInProductionMode(owner, name) {
   Logger.error(missingComponentMessage(name));
 
-  return lookupComponent(owner, 'ember-islands/missing-component');
+  return lookupComponent(owner, "ember-islands/missing-component");
 }

addon/utils/query-island-components.js

@@ -11,12 +11,12 @@
  */
 export default function queryIslandComponents() {
   let components = [];
-  let islandNodeList = document.querySelectorAll('[data-component]');
+  let islandNodeList = document.querySelectorAll("[data-component]");
 
   // Avoid NodeList.prototype.forEach for IE 11 compatibility.
   for (let i = 0; i < islandNodeList.length; i++) {
     let element = islandNodeList[i];
-    let name = element.getAttribute('data-component');
+    let name = element.getAttribute("data-component");
     let attrs = componentAttributes(element);
     components.push({ attrs, name, element, instance: undefined });
   }
@@ -26,7 +26,7 @@ export default function queryIslandComponents() {
 
 function componentAttributes(element) {
   let attrs;
-  let attrsJSON = element.getAttribute('data-attrs');
+  let attrsJSON = element.getAttribute("data-attrs");
 
   if (attrsJSON) {
     attrs = JSON.parse(attrsJSON);

addon/utils/reconciler.js

@@ -1,4 +1,4 @@
-import Ember from 'ember';
+import Ember from "ember";
 const { guidFor } = Ember;
 
 export default class Reconciler {
@@ -13,7 +13,7 @@ export default class Reconciler {
   reconcileAgainst(componentsToRender) {
     let nextRenderedComponents = {};
 
-    componentsToRender.forEach(ic => {
+    componentsToRender.forEach((ic) => {
       let elementGuid = guidFor(ic.element);
 
       let renderedIC = this.renderedComponents[elementGuid];

app/components/ember-islands.js

@@ -1 +1 @@
-export { default } from 'ember-islands/components/ember-islands';
+export { default } from "ember-islands/components/ember-islands";

app/components/ember-islands/missing-component.js

@@ -1,3 +1,3 @@
-import Ember from 'ember';
+import Ember from "ember";
 
 export default Ember.Component.extend();

package.json

@@ -51,10 +51,13 @@
     "ember-template-lint": "^2.8.0",
     "ember-try": "^1.4.0",
     "eslint": "^7.1.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-ember": "^8.6.0",
     "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.5",
     "qunit-dom": "^1.2.0"
   },
   "engines": {

tests/acceptance/inner-content-test.js

@@ -1,12 +1,12 @@
-import Ember from 'ember';
-import { module, test } from 'qunit';
-import startApp from '../helpers/start-app';
+import Ember from "ember";
+import { module, test } from "qunit";
+import startApp from "../helpers/start-app";
 
 var application;
 
-module('Acceptance: Using Inner Content', {
-  beforeEach: function() {
-    document.getElementById('ember-testing').innerHTML = `
+module("Acceptance: Using Inner Content", {
+  beforeEach: function () {
+    document.getElementById("ember-testing").innerHTML = `
       <div id='element-with-inner-content'
            data-component='inner-content-component'
            data-attrs='{"title": "Component Title"}'>
@@ -18,18 +18,26 @@ module('Acceptance: Using Inner Content', {
     application = startApp();
   },
 
-  afterEach: function() {
-    Ember.run(application, 'destroy');
-    document.getElementById('ember-testing').innerHTML = '';
-  }
+  afterEach: function () {
+    Ember.run(application, "destroy");
+    document.getElementById("ember-testing").innerHTML = "";
+  },
 });
 
-test('extracting innerContent', function(assert) {
+test("extracting innerContent", function (assert) {
   assert.expect(2);
-  visit('/');
+  visit("/");
 
-  andThen(function() {
-    assert.equal(find('#element-with-inner-content > #inner-content').length, 0, "The inner content of the server-rendered element is replaced");
-    assert.equal(find('.inner-content-component > #inner-content').length, 1, "The innerContent is passed to components");
+  andThen(function () {
+    assert.equal(
+      find("#element-with-inner-content > #inner-content").length,
+      0,
+      "The inner content of the server-rendered element is replaced"
+    );
+    assert.equal(
+      find(".inner-content-component > #inner-content").length,
+      1,
+      "The innerContent is passed to components"
+    );
   });
 });

tests/acceptance/missing-component-test.js

@@ -1,14 +1,14 @@
-import Ember from 'ember';
-import { module, test } from 'qunit';
-import startApp from '../helpers/start-app';
+import Ember from "ember";
+import { module, test } from "qunit";
+import startApp from "../helpers/start-app";
 
 let application, originalAssert, originalError, errors;
 
-module('Acceptance: Dealing with missing components in production', {
-  beforeEach: function() {
+module("Acceptance: Dealing with missing components in production", {
+  beforeEach: function () {
     // Put some static content on the page before the Ember application loads.
     // This mimics server-rendered content.
-    document.getElementById('ember-testing').innerHTML = `
+    document.getElementById("ember-testing").innerHTML = `
       <div data-component='oops-not-component' data-attrs='{"title": "Component Title"}'></div>
       <div data-component='top-level-component'></div>
     `;
@@ -28,21 +28,31 @@ module('Acceptance: Dealing with missing components in production', {
     application = startApp();
   },
 
-  afterEach: function() {
+  afterEach: function () {
     Ember.assert = originalAssert;
     Ember.Logger.error = originalError;
 
-    Ember.run(application, 'destroy');
-    document.getElementById('ember-testing').innerHTML = '';
-  }
+    Ember.run(application, "destroy");
+    document.getElementById("ember-testing").innerHTML = "";
+  },
 });
 
-test('rendering the found component', function(assert) {
+test("rendering the found component", function (assert) {
   assert.expect(2);
-  visit('/');
-
-  andThen(function() {
-    assert.equal(find('p:contains(top level component)').length, 1, "The top level component was rendered");
-    assert.deepEqual(errors, [`ember-islands could not find a component named "oops-not-component" in your Ember application.`], 'Logs an error');
+  visit("/");
+
+  andThen(function () {
+    assert.equal(
+      find("p:contains(top level component)").length,
+      1,
+      "The top level component was rendered"
+    );
+    assert.deepEqual(
+      errors,
+      [
+        `ember-islands could not find a component named "oops-not-component" in your Ember application.`,
+      ],
+      "Logs an error"
+    );
   });
 });

tests/acceptance/rendering-components-test.js

@@ -1,14 +1,14 @@
-import Ember from 'ember';
-import { module, test } from 'qunit';
-import startApp from '../helpers/start-app';
+import Ember from "ember";
+import { module, test } from "qunit";
+import startApp from "../helpers/start-app";
 
 var application;
 
-module('Acceptance: Rendering Components', {
-  beforeEach: function() {
+module("Acceptance: Rendering Components", {
+  beforeEach: function () {
     // Put some static content on the page before the Ember application loads.
     // This mimics server-rendered content.
-    document.getElementById('ember-testing').innerHTML = `
+    document.getElementById("ember-testing").innerHTML = `
       <p>server-rendered content top</p>
       <div data-component='top-level-component' data-attrs='{"title": "Component Title"}'></div>
       <p>server-rendered content bottom</p>
@@ -17,49 +17,77 @@ module('Acceptance: Rendering Components', {
     application = startApp();
   },
 
-  afterEach: function() {
-    Ember.run(application, 'destroy');
-    document.getElementById('ember-testing').innerHTML = '';
-  }
+  afterEach: function () {
+    Ember.run(application, "destroy");
+    document.getElementById("ember-testing").innerHTML = "";
+  },
 });
 
-test('rendering a component with an attribute', function(assert) {
+test("rendering a component with an attribute", function (assert) {
   assert.expect(2);
-  visit('/');
+  visit("/");
 
-  andThen(function() {
-    assert.equal(find('p:contains(top level component)').length, 1, "The top level component was rendered");
-    assert.equal(find('#component-title:contains(Component Title)').length, 1, "Passed in attributes can be used");
+  andThen(function () {
+    assert.equal(
+      find("p:contains(top level component)").length,
+      1,
+      "The top level component was rendered"
+    );
+    assert.equal(
+      find("#component-title:contains(Component Title)").length,
+      1,
+      "Passed in attributes can be used"
+    );
   });
 });
 
-test('using component events', function(assert) {
+test("using component events", function (assert) {
   assert.expect(2);
-  visit('/');
+  visit("/");
 
-  andThen(function() {
-    assert.equal(find("#expanded-content").length, 0, "Expanded content is hidden at first");
+  andThen(function () {
+    assert.equal(
+      find("#expanded-content").length,
+      0,
+      "Expanded content is hidden at first"
+    );
   });
 
-  click('#toggle-expanded');
+  click("#toggle-expanded");
 
-  andThen(function() {
-    assert.equal(find("#expanded-content").length, 1, "The expanded content is showing");
+  andThen(function () {
+    assert.equal(
+      find("#expanded-content").length,
+      1,
+      "The expanded content is showing"
+    );
   });
 });
 
-test('using nested components', function(assert) {
+test("using nested components", function (assert) {
   assert.expect(3);
-  visit('/');
+  visit("/");
 
-  andThen(function() {
-    assert.equal(find('p:contains(A nested component)').length, 1, "The nested component was rendered");
-    assert.equal(find("#expanded-content").length, 0, "Expanded content is hidden at first");
+  andThen(function () {
+    assert.equal(
+      find("p:contains(A nested component)").length,
+      1,
+      "The nested component was rendered"
+    );
+    assert.equal(
+      find("#expanded-content").length,
+      0,
+      "Expanded content is hidden at first"
+    );
   });
 
-  click('#nested-component-toggle-expanded');
+  click("#nested-component-toggle-expanded");
 
-  andThen(function() {
-    assert.equal(find("#expanded-content").length, 1, "The expanded content is showing");
+  andThen(function () {
+    assert.equal(
+      find("#expanded-content").length,
+      1,
+      "The expanded content is showing"
+    );
   });
 });