Update CI to Ember 2.18+ (#343)

Co-authored-by: Godfrey Chan <[email protected]>

.github/workflows/ci.yml

@@ -13,10 +13,10 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node 12
+      - name: Use Node 14
         uses: actions/setup-node@v2-beta
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Node Modules Cache
         uses: actions/cache@v2
@@ -45,26 +45,27 @@ jobs:
       matrix:
         ember-version:
           [
-            ember-lts-2.8,
-            ember-lts-2.12,
             ember-lts-2.18,
             ember-lts-3.4,
             ember-lts-3.8,
             ember-lts-3.12,
             ember-lts-3.16,
             ember-lts-3.20,
             ember-lts-3.24,
-            ember-lts-3.26,
+            ember-lts-3.28,
+            ember-release,
+            ember-beta,
+            ember-canary,
           ]
 
     steps:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node 12
+      - name: Use Node 14
         uses: actions/setup-node@v2-beta
         with:
-          node-version: 12.x
+          node-version: 14.x
 
       - name: Node Modules Cache
         uses: actions/cache@v2

README.md

@@ -66,6 +66,7 @@ ember install @html-next/vertical-collection
 | ----------------------------- | ------------------------ | ----------------------- |
 | `^v1.x.x`                     | `v1.12.0 - v3.8.x`       | `?`                     |
 | `^v2.x.x`                     | `v2.8.0 - v3.26.x`       | `v12 - ?`               |
+| `^v3.x.x`                     | `v2.18.0+`               | `v14+`                  |
 
 ## Support, Questions, Collaboration
 

config/ember-try.js

@@ -6,53 +6,24 @@ module.exports = async function() {
   return {
     useYarn: true,
     scenarios: [
-      {
-        name: 'ember-lts-2.8',
-        bower: {
-          dependencies: {
-            ember: 'components/ember#lts-2-8',
-          },
-          resolutions: {
-            ember: 'lts-2-8',
-          },
-        },
-        npm: {
-          devDependencies: {
-            'ember-cli-htmlbars-inline-precompile': '^2.1.0',
-            'ember-source': null,
-            'ember-factory-for-polyfill': '1.3.1'
-          },
-          dependencies: {
-            'ember-compatibility-helpers': '1.2.1'
-          },
-          resolutions: {
-            'ember-compatibility-helpers': '1.2.1'
-          }
-        },
-      },
-      {
-        name: 'ember-lts-2.12',
-        npm: {
-          devDependencies: {
-            'ember-cli-htmlbars-inline-precompile': '^2.1.0',
-            '@ember/jquery': '^1.1.0',
-            'ember-source': '~2.12.0'
-          },
-        },
-      },
       {
         name: 'ember-lts-2.18',
         npm: {
           devDependencies: {
             '@ember/jquery': '^1.1.0',
-            'ember-source': '~2.18.0'
+            '@ember/test-helpers': '^1.7.0',
+            'ember-angle-bracket-invocation-polyfill': '^3.0.1',
+            'ember-qunit': '^4.0.0',
+            'ember-source': '~2.18.0',
+            'qunit': null
           },
         },
       },
       {
         name: 'ember-lts-3.4',
         npm: {
           devDependencies: {
+            'ember-angle-bracket-invocation-polyfill': '^3.0.1',
             'ember-source': '~3.4.0'
           }
         }
@@ -61,6 +32,7 @@ module.exports = async function() {
         name: 'ember-lts-3.8',
         npm: {
           devDependencies: {
+            'ember-angle-bracket-invocation-polyfill': '^3.0.1',
             'ember-source': '~3.8.0'
           }
         }
@@ -85,6 +57,7 @@ module.exports = async function() {
         name: 'ember-lts-3.20',
         npm: {
           devDependencies: {
+            'ember-data': '~3.20.0',
             'ember-source': '~3.20.0'
           }
         }
@@ -93,40 +66,75 @@ module.exports = async function() {
         name: 'ember-lts-3.24',
         npm: {
           devDependencies: {
+            'ember-data': '~3.24.0',
             'ember-source': '~3.24.0'
           }
         }
       },
       {
-        name: 'ember-lts-3.26',
+        name: 'ember-lts-3.28',
         npm: {
           devDependencies: {
-            'ember-source': '~3.26.0'
+            'ember-data': '~3.28.0',
+            'ember-source': '~3.28.0'
           }
         }
       },
       {
         name: 'ember-release',
         npm: {
           devDependencies: {
+            'ember-cli-fastboot': '3.2.0-beta.5',
+            'ember-data': '~3.28.0',
             'ember-source': await getChannelURL('release')
+          },
+          ember: {
+            edition: 'octane'
           }
+        },
+        env: {
+          EMBER_OPTIONAL_FEATURES: JSON.stringify({
+            'application-template-wrapper': false,
+            'template-only-glimmer-components': true,
+          })
         }
       },
       {
         name: 'ember-beta',
         npm: {
           devDependencies: {
+            'ember-cli-fastboot': '3.2.0-beta.5',
+            'ember-data': '~3.28.0',
             'ember-source': await getChannelURL('beta')
+          },
+          ember: {
+            edition: 'octane'
           }
+        },
+        env: {
+          EMBER_OPTIONAL_FEATURES: JSON.stringify({
+            'application-template-wrapper': false,
+            'template-only-glimmer-components': true,
+          })
         }
       },
       {
         name: 'ember-canary',
         npm: {
           devDependencies: {
+            'ember-cli-fastboot': '3.2.0-beta.5',
+            'ember-data': '~3.28.0',
             'ember-source': await getChannelURL('canary')
+          },
+          ember: {
+            edition: 'octane'
           }
+        },
+        env: {
+          EMBER_OPTIONAL_FEATURES: JSON.stringify({
+            'application-template-wrapper': false,
+            'template-only-glimmer-components': true,
+          })
         }
       },
       // The default `.travis.yml` runs this scenario via `yarn test`,

index.js

@@ -32,6 +32,17 @@ module.exports = {
     return requiresModulesDir ? 'modules' : '';
   },
 
+  // Borrowed from ember-cli-babel
+  _emberVersionRequiresModulesAPIPolyfill() {
+    let checker = this.checker.for('ember-source', 'npm');
+
+    if (!checker.exists()) {
+      return true;
+    }
+
+    return checker.lt('3.27.0-alpha.1');
+  },
+
   treeForAddon(tree) {
     let babel = this.addons.find((addon) => addon.name === 'ember-cli-babel');
     let withPrivate = new Funnel(tree, { include: ['-private/**'] });
@@ -45,11 +56,39 @@ module.exports = {
       destDir: '@html-next/vertical-collection'
     });
 
+    // When compiling with `compileModules: false`, ember-cli-babel defaults to
+    // using the modules polyfill, since it assumes we are concatenating the
+    // output script using `app.import` without an AMD wrapper.
+    //
+    // This does not apply to us, since we are compiling the `-private` modules
+    // into a single AMD module (via rollup below), which can in fact have
+    // external dependencies.
+    //
+    // We can opt-out of this with `disableEmberModulesAPIPolyfill: true`. In
+    // Ember versions with "real modules", that is what we want in order to
+    // avoid the Ember global deprecation (or just completely not working in
+    // 4.0+).
+    //
+    // It seems like the intent may have been that we should be able to set
+    // this to `true` unconditionally, and `ember-cli-babel` will ignore this
+    // setting if the Ember verion requires the modules API polyfill. However,
+    // presumably due to a bug, ember-cli-babel actually checks for this value
+    // first and return out of the function early if its value is truthy. This
+    // means that if we set this to true unconditionally, then we would have
+    // disabled the modules polyfill for Ember versions that needs it, which
+    // would be incorrect. Therefore, we have to duplicate the detection logic
+    // here in order to set this value appropriately.
+    //
+    // Ideally, we should just stop trying to rollup the -private modules and
+    // let the modern build pipeline optimizes things for us, then none of this
+    // would have been necessary.
     let privateTree = babel.transpileTree(withPrivate, {
       babel: this.options.babel,
       'ember-cli-babel': {
-        compileModules: false
-      }
+        compileModules: false,
+        disableEmberModulesAPIPolyfill:
+          !this._emberVersionRequiresModulesAPIPolyfill(),
+      },
     });
 
     const templateTree = new Funnel(tree, {
@@ -72,8 +111,13 @@ module.exports = {
             }
           }
         ],
-        external: ['ember', 'ember-raf-scheduler']
-      }
+        external(id) {
+          return (
+            id.startsWith('@ember/') ||
+            ['ember', 'ember-raf-scheduler'].includes(id)
+          );
+        },
+      },
     });
 
     let destDir = this.getOutputDirForVersion();

package.json

@@ -43,8 +43,6 @@
     "build": "ember build --environment=production",
     "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
-    "lint:hbs": "ember-template-lint .",
-    "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
@@ -58,34 +56,33 @@
     "broccoli-merge-trees": "^3.0.1",
     "broccoli-rollup": "^4.1.1",
     "ember-cli-babel": "^7.12.0",
-    "ember-cli-htmlbars": "^3.0.0",
+    "ember-cli-htmlbars": "^5.0.0",
     "ember-cli-version-checker": "^3.1.3",
     "ember-compatibility-helpers": "^1.2.1",
-    "ember-raf-scheduler": "0.2.0"
+    "ember-raf-scheduler": "^0.3.0"
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "bootstrap": "~3.3.5",
     "broccoli-asset-rev": "^3.0.0",
+    "ember-auto-import": "^2.0.0",
     "ember-cli": "~3.28.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-eslint": "^5.1.0",
     "ember-cli-fastboot": "^2.1.3",
     "ember-cli-github-pages": "^0.2.2",
-    "ember-cli-htmlbars-inline-precompile": "^3.0.0",
     "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sri": "^2.1.1",
     "ember-cli-terser": "^4.0.2",
-    "ember-cli-template-lint": "^1.0.0",
     "ember-code-snippet": "^2.4.1",
     "ember-data": "~3.12.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.2",
-    "ember-native-dom-helpers": "^0.7.0",
-    "ember-perf-timeline": "^1.2.1",
-    "ember-qunit": "^4.5.1",
+    "ember-perf-timeline": "^2.0.0",
+    "ember-qunit": "^5.0.0",
     "ember-resolver": "^8.0.2",
     "ember-source": "~3.12.0",
     "ember-source-channel-url": "^3.0.0",
@@ -95,12 +92,14 @@
     "eslint-plugin-node": "^9.1.0",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
-    "qunit-dom": "^0.9.0",
+    "qunit": "^2.0.0",
+    "qunit-dom": "^1.0.0",
     "release-it": "^14.2.1",
-    "release-it-lerna-changelog": "^3.1.0"
+    "release-it-lerna-changelog": "^3.1.0",
+    "webpack": "^5.0.0"
   },
   "engines": {
-    "node": ">= 10.*"
+    "node": ">= 14.*"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -124,7 +123,7 @@
     }
   },
   "volta": {
-    "node": "12.22.7",
+    "node": "14.18.2",
     "yarn": "1.22.17"
   }
 }

tests/acceptance/acceptance-tests/record-array-test.js

@@ -1,8 +1,7 @@
 import { module, test } from 'qunit';
 import { setupApplicationTest } from 'ember-qunit';
 
-import { find, findAll } from 'ember-native-dom-helpers';
-import { visit as newVisit } from '@ember/test-helpers';
+import { find, findAll, visit as newVisit } from '@ember/test-helpers';
 
 module('Acceptance | Record Array', function(hooks) {
   setupApplicationTest(hooks);

tests/dummy/app/routes/application/template.hbs

@@ -1,12 +1,14 @@
 <header class="container-fluid">
   <div class="row">
-    {{#link-to "index" tagName="h1" class="col-sm-6"}}
-      <img alt="HTML Next Logo" src="./HTML-Next.png" style="height: 2em;">
-      Vertical Collection
-    {{/link-to}}
+    <h1 class="col-sm-6">
+      <LinkTo @route="index">
+        <img alt="HTML Next Logo" src="./HTML-Next.png" style="height: 2em;">
+        Vertical Collection
+      </LinkTo>
+    </h1>
     <nav class="col-sm-6 text-small text-right">
-      {{#link-to "examples"}}Demos{{/link-to}}
-      {{#link-to "settings"}}Settings{{/link-to}}
+      <LinkTo @route="examples">Demos</LinkTo>
+      <LinkTo @route="settings">Settings</LinkTo>
     </nav>
   </div>
 </header>