Migrate frontend builds from webpack to Vite

.env.development

@@ -0,0 +1,8 @@
+# This file is committed to git and should not contain any secrets.
+# 
+# Vite recommends using .env.local or .env.[mode].local if you need to manage secrets
+# SEE: https://vite.dev/guide/env-and-mode.html#env-files for more information.
+
+
+# Default NODE_ENV with vite build --mode=test is production
+NODE_ENV=development

app/app.js

@@ -1,5 +1,6 @@
 import Application from '@ember/application';
 
+import compatModules from '@embroider/virtual/compat-modules';
 import loadInitializers from 'ember-load-initializers';
 import Resolver from 'ember-resolver';
 
@@ -15,7 +16,7 @@ Sentry.init();
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
 
   customEvents = {
     // prevent non-passive listeners for touchstart/touchmove events
@@ -24,4 +25,4 @@ export default class App extends Application {
   };
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);

app/components/version-list/row.gjs

@@ -25,7 +25,9 @@ import dateFormatDistanceToNow from 'crates-io/helpers/date-format-distance-to-n
 import dateFormatIso from 'crates-io/helpers/date-format-iso';
 import prettyBytes from 'crates-io/helpers/pretty-bytes';
 
-import styles from './row.css';
+// TODO fix this - throws a vite error
+// import styles from './row.css';
+const styles = {};
 
 export default class VersionRow extends Component {
   @service session;

app/config/environment.js

@@ -0,0 +1,3 @@
+import loadConfigFromMeta from '@embroider/config-meta-loader';
+
+export default loadConfigFromMeta('crates-io');

babel.config.cjs

@@ -0,0 +1,40 @@
+const { babelCompatSupport, templateCompatSupport } = require('@embroider/compat/babel');
+const scopedCSS = require('ember-scoped-css/build');
+
+module.exports = {
+  plugins: [
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        compilerPath: 'ember-source/dist/ember-template-compiler.js',
+        enableLegacyModules: [
+          'ember-cli-htmlbars',
+          'ember-cli-htmlbars-inline-precompile',
+          'htmlbars-inline-precompile',
+        ],
+        transforms: [...templateCompatSupport(), scopedCSS.templatePlugin({})],
+      },
+    ],
+    [
+      'module:decorator-transforms',
+      {
+        runtime: {
+          import: require.resolve('decorator-transforms/runtime-esm'),
+        },
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        absoluteRuntime: __dirname,
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ...babelCompatSupport(),
+  ],
+
+  generatorOpts: {
+    compact: false,
+  },
+};

ember-cli-build.js

@@ -1,8 +1,10 @@
 'use strict';
-
+const { compatBuild } = require('@embroider/compat');
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-module.exports = function (defaults) {
+module.exports = async function (defaults) {
+  const { buildOnce } = await import('@embroider/vite');
+
   let env = EmberApp.env();
   let isProd = env === 'production';
 
@@ -66,8 +68,7 @@ module.exports = function (defaults) {
   // app.import('node_modules/normalize.css/normalize.css');
   app.import('vendor/qunit.css', { type: 'test' });
 
-  const { Webpack } = require('@embroider/webpack');
-  return require('@embroider/compat').compatBuild(app, Webpack, {
+  return compatBuild(app, buildOnce, {
     extraPublicTrees,
     staticAddonTrees: true,
     staticAddonTestSupportTrees: true,

eslint.config.mjs

@@ -72,17 +72,6 @@ export default [
 
       parserOptions: {
         requireConfigFile: false,
-
-        babelOptions: {
-          plugins: [
-            [
-              '@babel/plugin-proposal-decorators',
-              {
-                decoratorsBeforeExport: true,
-              },
-            ],
-          ],
-        },
       },
     },
 
@@ -180,7 +169,8 @@ export default [
       'eslint.config.mjs',
       '**/.template-lintrc.js',
       '**/ember-cli-build.js',
-      '**/testem.js',
+      '**/testem.cjs',
+      '**/babel.config.cjs',
       'blueprints/*/index.js',
       'config/**/*.js',
       'lib/*/index.js',

app/index.html → index.html

@@ -7,16 +7,16 @@
 
     <title>crates.io: Rust Package Registry</title>
 
-    {{content-for 'head'}}
+    {{content-for "head"}}
 
-    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link rel="stylesheet" href="{{rootURL}}assets/crates-io.css">
+    <link rel="stylesheet" href="/@embroider/virtual/vendor.css">
+    <link rel="stylesheet" href="/@embroider/virtual/app.css">
     <link rel="stylesheet" href="https://code.cdn.mozilla.net/fonts/fira.css">
 
-    <link rel="manifest" href="{{rootURL}}manifest.webmanifest">
-    <meta name="msapplication-config" content="{{rootURL}}browserconfig.xml">
+    <!-- <link rel="manifest" href="{{rootURL}}manifest.webmanifest">
+    <meta name="msapplication-config" content="{{rootURL}}browserconfig.xml"> -->
 
-    {{content-for 'head-footer'}}
+    {{content-for "head-footer"}}
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
     <link rel="icon" href="/assets/cargo.png" type="image/png">
     <link rel="search" href="/opensearch.xml" type="application/opensearchdescription+xml" title="crates.io">
@@ -28,20 +28,27 @@
 
     <meta name="theme-color" content="var(--header-bg-color)">
 
-    <style>@layer global, components;</style>
+    <style>
+      @layer global, components;
+    </style>
   </head>
   <body>
     <noscript>
       For full functionality of this site it is necessary to enable JavaScript.
     </noscript>
 
-    {{content-for 'body'}}
+    {{content-for "body"}}
 
     <!-- if you change the following inline script make sure to change the CSP settings of nginx! -->
     <script>window.onerror=function(){document.body.innerHTML='<p style="width: 70%;background: var(--main-bg);padding: 10px;">Sorry, it looks like we were not able to load the page. Please make sure your network connection works and you are using an up-to-date browser. If the issue persists, please visit our <a href="https://github.com/rust-lang/crates.io/issues/new/choose">issue tracker</a> to report the problem.</p>'}</script>
-    <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/crates-io.js"></script>
+    <script src="/@embroider/virtual/vendor.js"></script>
+    <script type="module">
+      import Application from './app/app';
+      import environment from './app/config/environment';
 
-    {{content-for 'body-footer'}}
+      Application.create(environment.APP);
+    </script>
+
+    {{content-for "body-footer"}}
   </body>
 </html>

package.json

@@ -17,21 +17,22 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "ember build --environment=production && node ./script/precompress-assets.mjs",
+    "build": "vite build",
     "lint:deps": "ember dependency-lint",
     "lint:hbs": "ember-template-lint app",
     "lint:js": "eslint . --cache",
     "precompress": "node ./script/precompress-assets.mjs",
     "prettier:check": "prettier --check package.json '**/*.js' '**/*.mjs' '**/*.ts' '**/*.md'",
     "prettier:write": "prettier --write package.json '**/*.js' '**/*.mjs' '**/*.ts' '**/*.md'",
-    "start": "ember serve",
+    "start": "vite",
     "start:docker": "ember serve --proxy http://backend:8888",
     "start:live": "ember serve --proxy https://crates.io",
     "start:local": "ember serve --proxy http://127.0.0.1:8888",
     "start:staging": "ember serve --proxy https://staging-crates-io.herokuapp.com",
-    "test": "ember exam --split=2 --parallel",
+    "test": "vite build --mode development && ember exam --path dist --split=2 --parallel",
     "test-coverage": "COVERAGE=true npm run test && ember coverage-merge && rm -rf coverage_* coverage/coverage-summary.json && nyc report",
-    "e2e": "playwright test"
+    "e2e": "playwright test",
+    "test:ember": "vite build --mode test && ember test --path dist"
   },
   "prettier": {
     "plugins": [
@@ -59,16 +60,17 @@
     "@axe-core/playwright": "4.10.2",
     "@babel/core": "7.28.3",
     "@babel/eslint-parser": "7.28.0",
-    "@babel/plugin-proposal-decorators": "7.28.0",
+    "@babel/plugin-transform-runtime": "^7.26.9",
     "@crates-io/msw": "workspace:*",
     "@ember/optional-features": "2.2.0",
     "@ember/render-modifiers": "3.0.0",
     "@ember/string": "4.0.1",
     "@ember/test-helpers": "5.2.2",
     "@ember/test-waiters": "4.1.1",
-    "@embroider/compat": "3.9.1",
-    "@embroider/core": "3.5.7",
-    "@embroider/webpack": "4.1.1",
+    "@embroider/compat": "^4.0.3",
+    "@embroider/config-meta-loader": "^1.0.0",
+    "@embroider/core": "^4.0.3",
+    "@embroider/vite": "^1.1.1",
     "@eslint/eslintrc": "3.3.1",
     "@eslint/js": "9.34.0",
     "@glimmer/component": "2.0.0",
@@ -78,23 +80,23 @@
     "@percy/ember": "5.0.0",
     "@percy/playwright": "1.0.9",
     "@playwright/test": "1.55.0",
+    "@rollup/plugin-babel": "^6.0.4",
     "@sinonjs/fake-timers": "14.0.0",
     "@types/node": "22.18.0",
     "@types/sinonjs__fake-timers": "8.1.5",
     "@zestia/ember-auto-focus": "5.1.0",
-    "broccoli-asset-rev": "3.0.0",
+    "babel-plugin-ember-template-compilation": "^2.3.0",
     "broccoli-funnel": "3.0.8",
+    "decorator-transforms": "^2.3.0",
     "ember-a11y-testing": "7.1.2",
     "ember-auto-import": "2.10.0",
     "ember-cli": "6.6.0",
     "ember-cli-babel": "8.2.0",
     "ember-cli-bundle-analyzer": "1.0.0",
     "ember-cli-code-coverage": "3.1.0",
-    "ember-cli-dependency-checker": "3.3.3",
     "ember-cli-dependency-lint": "2.0.1",
     "ember-cli-head": "2.0.0",
     "ember-cli-htmlbars": "6.3.0",
-    "ember-cli-inject-live-reload": "2.1.0",
     "ember-cli-notifications": "9.1.0",
     "ember-click-outside": "6.1.1",
     "ember-concurrency": "4.0.6",
@@ -113,14 +115,11 @@
     "ember-qunit": "9.0.3",
     "ember-resolver": "13.1.1",
     "ember-scoped-css": "0.24.2",
-    "ember-scoped-css-compat": "10.2.3",
     "ember-source": "6.6.0",
     "ember-svg-jar": "2.6.3",
-    "ember-template-imports": "4.3.0",
     "ember-template-lint": "7.9.3",
     "ember-test-selectors": "7.1.0",
     "ember-truth-helpers": "4.0.3",
-    "ember-web-app": "5.0.1",
     "ember-window-mock": "1.0.2",
     "eslint": "9.34.0",
     "eslint-config-prettier": "10.1.8",
@@ -133,7 +132,6 @@
     "eslint-plugin-unicorn": "60.0.0",
     "globals": "16.3.0",
     "globby": "14.1.0",
-    "loader.js": "4.7.0",
     "match-json": "1.3.7",
     "memory-scroll": "2.0.1",
     "msw": "2.10.5",
@@ -149,7 +147,7 @@
     "qunit-dom": "3.5.0",
     "tracked-built-ins": "4.0.0",
     "typescript": "5.9.2",
-    "webpack": "5.101.3"
+    "vite": "^6.0.0"
   },
   "resolutions": {
     "@babel/runtime": "7.28.3",
@@ -201,5 +199,9 @@
   "exports": {
     "./tests/*": "./tests/*",
     "./*": "./app/*"
+  },
+  "ember-addon": {
+    "type": "app",
+    "version": 2
   }
 }