Update everything (#530)

* Update many dependencies

* Fix all new lint errors

* Fix typo

* Require node 10+

* Update node in CI

.template-lintrc.js

@@ -1,10 +1,11 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended',
+  extends: 'octane',
   rules: {
     'attribute-indentation': { 'open-invocation-max-len': 110 },
     'no-inline-styles': false,
-    'no-partial': false
+    'no-partial': false,
+    'no-positive-tabindex': false
   }
 };

.travis.yml

@@ -3,7 +3,7 @@ language: node_js
 node_js:
   # we recommend testing addons with the same minimum supported node version as Ember CLI
   # so that your addon works for all apps
-  - "8"
+  - "10"
 
 sudo: false
 dist: trusty
@@ -32,7 +32,6 @@ jobs:
 
   include:
     # runs linting and tests with current locked deps
-
     - stage: "Tests"
       name: "Tests"
       install:
@@ -46,10 +45,16 @@ jobs:
       script:
         - yarn test
 
+    - stage: "Additional Tests"
+      name: "Floating Dependencies"
+      install:
+        - npm install --no-package-lock
+      script:
+        - npm test
+
     # we recommend new addons test the current and previous LTS
     # as well as latest stable release (bonus points to beta/canary)
-    - stage: "Additional Tests"
-      env: EMBER_TRY_SCENARIO=ember-3.13
+    - env: EMBER_TRY_SCENARIO=ember-3.13
     - env: EMBER_TRY_SCENARIO=ember-release
     - env: EMBER_TRY_SCENARIO=ember-beta
     - env: EMBER_TRY_SCENARIO=ember-canary

addon/templates/components/basic-dropdown-content.hbs

@@ -25,5 +25,5 @@
     {{/maybe-in-element}}
   </div>
 {{else}}
-  <div id={{dropdownId}} class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>
+  <div id={{this.dropdownId}} class="ember-basic-dropdown-content-placeholder" style="display: none;"></div>
 {{/if}}

package.json

@@ -14,7 +14,7 @@
     "postpublish": "ember ts:clean"
   },
   "engines": {
-    "node": "8.* || >= 10.*"
+    "node": ">= 10.*"
   },
   "files": [
     "addon/",
@@ -26,38 +26,39 @@
   ],
   "devDependencies": {
     "@ember/optional-features": "^1.1.0",
+    "@glimmer/component": "^1.0.0",
     "@types/ember": "^3.1.1",
     "@types/ember-qunit": "^3.4.7",
     "@types/ember__test-helpers": "^0.7.9",
     "@types/qunit": "^2.9.0",
     "@types/rsvp": "^4.0.3",
     "babel-eslint": "^10.0.2",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.14.0",
+    "ember-cli": "~3.15.2",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-fastboot": "^2.0.0",
     "ember-cli-inject-live-reload": "^2.0.1",
     "ember-cli-sass": "^10.0.1",
-    "ember-cli-template-lint": "~1.0.0-beta.3",
+    "ember-cli-template-lint": "~2.0.0",
     "ember-cli-typescript-blueprints": "^3.0.0",
     "ember-cli-uglify": "^3.0.0",
     "ember-code-example-component": "^0.2.0",
     "ember-code-snippet": "2.3.1",
-    "ember-concurrency": "^1.0.0",
+    "ember-concurrency": "^1.1.0",
     "ember-disable-prototype-extensions": "^1.1.3",
-    "ember-export-application-global": "^2.0.0",
+    "ember-export-application-global": "^2.0.1",
     "ember-font-awesome": "^4.0.0-rc.4",
     "ember-href-to": "~3.1.0",
-    "ember-load-initializers": "^2.0.0",
+    "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.4.1",
-    "ember-resolver": "^5.0.1",
-    "ember-source": "~3.15.0",
+    "ember-qunit": "^4.6.0",
+    "ember-resolver": "^7.0.0",
+    "ember-source": "~3.16.1",
     "ember-source-channel-url": "^2.0.1",
-    "ember-try": "^1.2.0",
-    "eslint": "^6.1.0",
-    "eslint-plugin-ember": "^7.4.1",
-    "eslint-plugin-node": "^10.0.0",
+    "ember-try": "^1.4.0",
+    "eslint": "^6.8.0",
+    "eslint-plugin-ember": "^7.7.1",
+    "eslint-plugin-node": "^11.0.0",
     "loader.js": "^4.7.0",
     "node-sass": "*",
     "prember": "~1.0.0",
@@ -89,6 +90,9 @@
     "ember-maybe-in-element": "^0.4.0",
     "ember-truth-helpers": "2.1.0"
   },
+  "ember": {
+    "edition": "octane"
+  },
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }

tests/dummy/app/app.js

@@ -1,5 +1,5 @@
 import Application from '@ember/application';
-import Resolver from './resolver';
+import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 

tests/dummy/app/templates/public-pages.hbs

@@ -1,13 +1,13 @@
 <header class="main-header">
   <nav class="main-header-nav">
     <div class="main-header-nav-links">
-      {{#link-to "public-pages.docs" class="main-header-nav-link"}}Docs{{/link-to}}
-      {{#link-to "public-pages.cookbook" class="main-header-nav-link"}}Cookbook{{/link-to}}
-      {{#link-to "public-pages.addons" class="main-header-nav-link"}}Addons{{/link-to}}
+      <LinkTo @route="public-pages.docs" class="main-header-nav-link">Docs</LinkTo>
+      <LinkTo @route="public-pages.cookbook" class="main-header-nav-link">Cookbook</LinkTo>
+      <LinkTo @route="public-pages.addons" class="main-header-nav-link">Addons</LinkTo>
       <a href="https://github.com/cibernox/ember-basic-dropdown" class="main-header-nav-link">Github</a>
     </div>
     <div class="main-header-logo">
-      <BasicDropdown @calculatePosition={{calculatePosition}} as |dd|>
+      <BasicDropdown @calculatePosition={{this.calculatePosition}} as |dd|>
         <a href={{href-to "public-pages.index"}} class="home-link">
           <img src="/ember_logo.png" alt="ember">
           <strong>Basic</strong>
@@ -20,7 +20,7 @@
           </dd.Trigger>
         </a>
         <dd.Content class="logo-dropdown-content">
-          {{#each colors as |color|}}
+          {{#each this.colors as |color|}}
             <button type="button" class="logo-dropdown-content-pantone-entry {{color}}" {{on "click" (fn this.setBrandColor color dd)}}></button>
           {{/each}}
         </dd.Content>

tests/dummy/app/templates/public-pages/cookbook.hbs

@@ -1,8 +1,8 @@
 <section class="docs">
   <nav class="side-nav">
     <header class="side-nav-header">Basic recipes</header>
-    {{#link-to "public-pages.cookbook.index" class="side-nav-link"}}System-wide config{{/link-to}}
-    {{#link-to "public-pages.cookbook.no-trigger" class="side-nav-link"}}Usage without trigger{{/link-to}}
+    <LinkTo @route="public-pages.cookbook.index" class="side-nav-link">System-wide config</LinkTo>
+    <LinkTo @route="public-pages.cookbook.no-trigger" class="side-nav-link">Usage without trigger</LinkTo>
   </nav>
   <section class="doc-page">
     {{outlet}}

tests/dummy/app/templates/public-pages/cookbook/index.hbs

@@ -21,7 +21,7 @@
   file:
 </p>
 
-{{code-snippet name="system-wide-config-1-js.js"}}
+<CodeSnippet @name="system-wide-config-1-js.js"/>
 
 <p>
   That's all. No new concepts to learn, just your usual ember-cli work flow.
@@ -34,5 +34,5 @@
 </p>
 
 <div class="doc-page-nav">
-  {{#link-to "public-pages.cookbook.no-trigger" class="doc-page-nav-link-next"}}Usage without trigger &gt;{{/link-to}}
+  <LinkTo @route="public-pages.cookbook.no-trigger" class="doc-page-nav-link-next">Usage without trigger &gt;</LinkTo>
 </div>

tests/dummy/app/templates/public-pages/cookbook/no-trigger.hbs

@@ -33,9 +33,9 @@
   not below the button that you clicked.
 </p>
 
-{{#code-example hbs="no-trigger-1.hbs" as |partialName|}}
+<CodeExample @hbs="no-trigger-1.hbs" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   Remember that almost always you will want to use the provided trigger because it takes care of

tests/dummy/app/templates/public-pages/docs.hbs

@@ -1,30 +1,30 @@
 <section class="docs">
   <nav class="side-nav">
     <header class="side-nav-header">Getting started</header>
-    {{#link-to "public-pages.docs.index" class="side-nav-link"}}Overview{{/link-to}}
-    {{#link-to "public-pages.docs.installation" class="side-nav-link"}}Installation{{/link-to}}
-    {{#link-to "public-pages.docs.how-to-use-it" class="side-nav-link"}}How to use it{{/link-to}}
-    {{#link-to "public-pages.docs.dropdown-events" class="side-nav-link"}}Dropdown events{{/link-to}}
-    {{#link-to "public-pages.docs.trigger-events" class="side-nav-link"}}Trigger events{{/link-to}}
-    {{#link-to "public-pages.docs.content-events" class="side-nav-link"}}Content events{{/link-to}}
+    <LinkTo @route="public-pages.docs.index" class="side-nav-link">Overview</LinkTo>
+    <LinkTo @route="public-pages.docs.installation" class="side-nav-link">Installation</LinkTo>
+    <LinkTo @route="public-pages.docs.how-to-use-it" class="side-nav-link">How to use it</LinkTo>
+    <LinkTo @route="public-pages.docs.dropdown-events" class="side-nav-link">Dropdown events</LinkTo>
+    <LinkTo @route="public-pages.docs.trigger-events" class="side-nav-link">Trigger events</LinkTo>
+    <LinkTo @route="public-pages.docs.content-events" class="side-nav-link">Content events</LinkTo>
     <header class="side-nav-header">Basic customization</header>
-    {{#link-to "public-pages.docs.position" class="side-nav-link"}}Position{{/link-to}}
-    {{#link-to "public-pages.docs.disabled" class="side-nav-link"}}Disabled{{/link-to}}
-    {{#link-to "public-pages.docs.overlays" class="side-nav-link"}}Overlays{{/link-to}}
-    {{#link-to "public-pages.docs.styles" class="side-nav-link"}}Styles{{/link-to}}
+    <LinkTo @route="public-pages.docs.position" class="side-nav-link">Position</LinkTo>
+    <LinkTo @route="public-pages.docs.disabled" class="side-nav-link">Disabled</LinkTo>
+    <LinkTo @route="public-pages.docs.overlays" class="side-nav-link">Overlays</LinkTo>
+    <LinkTo @route="public-pages.docs.styles" class="side-nav-link">Styles</LinkTo>
     <header class="side-nav-header">Advanced customization</header>
-    {{#link-to "public-pages.docs.custom-position" class="side-nav-link"}}Custom position{{/link-to}}
-    {{#link-to "public-pages.docs.animations" class="side-nav-link"}}Animations{{/link-to}}
+    <LinkTo @route="public-pages.docs.custom-position" class="side-nav-link">Custom position</LinkTo>
+    <LinkTo @route="public-pages.docs.animations" class="side-nav-link">Animations</LinkTo>
     <header class="side-nav-header">Other</header>
-    {{#link-to "public-pages.docs.test-helpers" class="side-nav-link"}}Test helpers{{/link-to}}
-    {{#link-to "public-pages.docs.api-reference" class="side-nav-link"}}API reference{{/link-to}}
+    <LinkTo @route="public-pages.docs.test-helpers" class="side-nav-link">Test helpers</LinkTo>
+    <LinkTo @route="public-pages.docs.api-reference" class="side-nav-link">API reference</LinkTo>
   </nav>
   <section class="doc-page">
     <select {{on "change" this.visit}} class="section-selector">
-      {{#each groupedSections as |group|}}
+      {{#each this.groupedSections as |group|}}
         <optgroup label={{group.groupName}}>
           {{#each group.options as |section|}}
-            <option value={{section.route}} selected={{eq section.route currentSection.route}}>{{section.text}}</option>
+            <option value={{section.route}} selected={{eq section.route this.currentSection.route}}>{{section.text}}</option>
           {{/each}}
         </optgroup>
       {{/each}}

tests/dummy/app/templates/public-pages/docs/animations.hbs

@@ -16,9 +16,9 @@
   depending on where the dropdown is positioned.
 </p>
 
-{{#code-example hbs="animations-1.hbs" css="animations-1-css.scss" as |partialName|}}
+<CodeExample @hbs="animations-1.hbs" @css="animations-1-css.scss" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   There is nothing else to know about animations, other that you have to use CSS <strong>animations</strong>,

tests/dummy/app/templates/public-pages/docs/api-reference.hbs

@@ -189,7 +189,7 @@
     <tr>
       <td>shouldReposition</td>
       <td>Function</td>
-      <td>An optional function that can be used to avoid uncecessary repositions. To skip a reposition, simply return <code>false</code>. This function will be invoked when the DOM of the content is changed. It receives two arguments: a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord" target="_blank" rel="noopener">MutationRecord</a> and the public API object.</td>
+      <td>An optional function that can be used to avoid uncecessary repositions. To skip a reposition, simply return <code>false</code>. This function will be invoked when the DOM of the content is changed. It receives two arguments: a <a href="https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord" target="_blank" rel="noopener noreferrer">MutationRecord</a> and the public API object.</td>
     </tr>
   </tbody>
 </table>

tests/dummy/app/templates/public-pages/docs/content-events.hbs

@@ -23,9 +23,9 @@
   boundaries of the dropdown without closing it. Think the navbar of your favourite social network:
 </p>
 
-{{#code-example hbs="content-events-1.hbs" js="content-events-1-js.js" as |partialName|}}
+<CodeExample @hbs="content-events-1.hbs" @js="content-events-1-js.js" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   Let's break this down.

tests/dummy/app/templates/public-pages/docs/custom-position.hbs

@@ -57,19 +57,19 @@
   create a dropdown that opens to the right of the trigger, vertically centered with it.
 </p>
 
-{{#code-example hbs="custom-position-1.hbs" js="custom-position-1-js.js" as |partialName|}}
+<CodeExample @hbs="custom-position-1.hbs" @js="custom-position-1-js.js" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   You can resize the window and scroll and you can see that the content stays just where it should.
   It will even reposition automatically if the content inside changes thanks to the magic of
   <code>MutationObservers</code>.
 </p>
 
-{{#code-example hbs="custom-position-2.hbs" js="custom-position-2-js.js" as |partialName|}}
+<CodeExample @hbs="custom-position-2.hbs" @js="custom-position-2-js.js" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   The key concept that you need to extract is that all the machinery to position the content

tests/dummy/app/templates/public-pages/docs/disabled.hbs

@@ -5,9 +5,9 @@
   or touch screen.
 </p>
 
-{{#code-example hbs="disabled-1.hbs" as |partialName|}}
+<CodeExample @hbs="disabled-1.hbs" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   Note that being disabled does not prevent the dropdown or any of its sub-components from

tests/dummy/app/templates/public-pages/docs/dropdown-events.hbs

@@ -25,9 +25,9 @@
   By example, you can delay the loading of some data until the dropdown is opened.
 </p>
 
-{{#code-example hbs="dropdown-events-1.hbs" js="dropdown-events-1-js.js" as |partialName|}}
+<CodeExample @hbs="dropdown-events-1.hbs" @js="dropdown-events-1-js.js" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   There is something you should know about this hook: If you <code>return false;</code>
@@ -40,9 +40,9 @@
   the component from opening, load the users and once loaded we open it.
 </p>
 
-{{#code-example hbs="dropdown-events-2.hbs" js="dropdown-events-2-js.js" as |partialName|}}
+<CodeExample @hbs="dropdown-events-2.hbs" @js="dropdown-events-2-js.js" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p><em><small>For the record, I don't think this is good UX</small></em></p>
 
@@ -59,9 +59,9 @@
   until one checkbox is selected.
 </p>
 
-{{#code-example hbs="dropdown-events-3.hbs" js="dropdown-events-3-js.js" as |partialName|}}
+<CodeExample @hbs="dropdown-events-3.hbs" @js="dropdown-events-3-js.js" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>Cruel, isn't it?</p>
 

tests/dummy/app/templates/public-pages/docs/how-to-use-it.hbs

@@ -15,9 +15,9 @@
   Go, use it and inspect the DOM. I know it looks ugly, we'll style it later.
 </p>
 
-{{#code-example hbs="how-to-use-it-1.hbs" as |partialName|}}
+<CodeExample @hbs="how-to-use-it-1.hbs" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   As you've inspected, the markup is very simple.
@@ -53,9 +53,9 @@
   dropdown buttons in bootstrap:
 </p>
 
-{{#code-example hbs="how-to-use-it-2.hbs"  css="how-to-use-it-2-css.scss" as |partialName|}}
+<CodeExample @hbs="how-to-use-it-2.hbs" @css="how-to-use-it-2-css.scss" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   It just took a little bit of CSS. You could also have just assigned the right classes and
@@ -67,9 +67,9 @@
   a material-like round button with a round content.
 </p>
 
-{{#code-example hbs="how-to-use-it-3.hbs"  css="how-to-use-it-3-css.scss" as |partialName|}}
+<CodeExample @hbs="how-to-use-it-3.hbs" @css="how-to-use-it-3-css.scss" as |partialName|>
   {{partial partialName}}
-{{/code-example}}
+</CodeExample>
 
 <p>
   I got you.