Adopt Embroider (#845)

config/bundlesize.js

@@ -4,11 +4,18 @@ module.exports = {
   app: {
     javascript: {
       pattern: 'assets/*.js',
-      limit: '310KB',
+      limit: '270KB',
       compression: 'gzip',
     },
     css: {
-      pattern: 'assets/*.css',
+      // Embroider build includes both the minified and the unminified CSS
+      // `assets/` folder. Only the minified CSS is referenced by `index.html`.
+      // The unminified version does not increase the bundle size for consumers.
+      // We need to exclude it when calculating bundle size.
+      // Only the minified version includes a fingerprint. We can exclude the
+      // unminified version by using a pattern, which only matches files
+      // including a fingerprint hash in their file name.
+      pattern: 'assets/croodle.*.css',
       limit: '16.5KB',
       compression: 'gzip',
     },

config/ember-cli-update.json

@@ -12,6 +12,7 @@
           "isBaseBlueprint": true,
           "options": [
             "--ci-provider=github",
+            "--embroider",
             "--typescript"
           ]
         }

ember-cli-build.js

@@ -1,20 +1,10 @@
 'use strict';
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+const SubresourceIntegrityPlugin = require('webpack-subresource-integrity-embroider');
 
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
-    autoImport: {
-      forbidEval: true,
-      webpack: {
-        externals: {
-          // sjcl requires node's cryto library, which isn't needed
-          // in Browser but causes webpack to bundle a portable version
-          // which increases the build size by an inacceptable amount
-          crypto: 'null',
-        },
-      },
-    },
     buildInfoOptions: {
       metaTemplate: 'version={SEMVER}',
     },
@@ -22,24 +12,10 @@ module.exports = function (defaults) {
       importBootstrapCSS: false,
       bootstrapVersion: 4,
       importBootstrapFont: false,
-      include: [
-        'bs-alert',
-        'bs-button',
-        'bs-button-group',
-        'bs-form',
-        'bs-modal',
-        'bs-tooltip',
-      ],
     },
     'ember-cli-babel': {
       enableTypeScriptTransform: true,
     },
-    'ember-composable-helpers': {
-      only: ['array', 'pick'],
-    },
-    'ember-math-helpers': {
-      only: ['lte', 'sub'],
-    },
     autoprefixer: {
       browsers: ['last 2 ios version'],
       cascade: false,
@@ -51,21 +27,37 @@ module.exports = function (defaults) {
     },
   });
 
-  // Use `app.import` to add additional libraries to the generated
-  // output files.
-  //
-  // If you need to use different assets in different
-  // environments, specify an object as the first parameter. That
-  // object's keys should be the environment name and the values
-  // should be the asset to use in that environment.
-  //
-  // If the library that you are including contains AMD or ES6
-  // modules that you would like to import into your application
-  // please specify an object with the list of modules as keys
-  // along with the exports of each module as its value.
-
   app.import('node_modules/open-iconic/font/fonts/open-iconic.ttf');
   app.import('node_modules/open-iconic/font/fonts/open-iconic.woff');
 
-  return app.toTree();
+  const { Webpack } = require('@embroider/webpack');
+  return require('@embroider/compat').compatBuild(app, Webpack, {
+    staticAddonTestSupportTrees: true,
+    staticAddonTrees: true,
+    staticHelpers: true,
+    staticModifiers: true,
+    staticComponents: true,
+    // `ember-cli-deprecation-workflow` does not support `staticEmberSource = true`
+    // yet. See https://github.com/mixonic/ember-cli-deprecation-workflow/issues/156
+    // for details.
+    staticEmberSource: false,
+    skipBabel: [
+      {
+        package: 'qunit',
+      },
+    ],
+    packagerOptions: {
+      webpackConfig: {
+        devtool: 'source-map',
+        plugins: [new SubresourceIntegrityPlugin()],
+        resolve: {
+          fallback: {
+            // SJCL supports node.js as well using node's crypto module.
+            // We don't want it to be included in the bundle.
+            crypto: false,
+          },
+        },
+      },
+    },
+  });
 };

package.json

@@ -34,6 +34,9 @@
     "@ember/optional-features": "2.0.0",
     "@ember/string": "3.1.1",
     "@ember/test-helpers": "3.3.0",
+    "@embroider/compat": "^3.4.3",
+    "@embroider/core": "^3.4.3",
+    "@embroider/webpack": "^3.2.1",
     "@glimmer/component": "1.1.2",
     "@glimmer/tracking": "1.1.2",
     "@glint/core": "1.3.0",
@@ -89,8 +92,6 @@
     "ember-cli-mirage": "3.0.2",
     "ember-cli-page-object": "2.2.2",
     "ember-cli-sass": "11.0.1",
-    "ember-cli-sri": "2.1.1",
-    "ember-cli-terser": "4.0.2",
     "ember-composable-helpers": "5.0.0",
     "ember-decorators": "6.1.1",
     "ember-fetch": "8.1.2",
@@ -116,6 +117,7 @@
     "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-qunit": "8.1.1",
     "fs-extra": "11.2.0",
+    "jsdom": "^23.2.0",
     "lerna-changelog": "2.2.0",
     "loader.js": "4.7.0",
     "miragejs": "0.1.48",
@@ -133,7 +135,8 @@
     "stylelint-prettier": "5.0.0",
     "tracked-built-ins": "3.3.0",
     "typescript": "5.3.3",
-    "webpack": "5.90.2"
+    "webpack": "5.90.2",
+    "webpack-subresource-integrity-embroider": "0.1.1"
   },
   "overrides": {
     "@glimmer/validator": "0.88.1",