feat(showcase): vite

showcase/.gitignore

@@ -1,3 +1,5 @@
+/tmp/
+
 # compiled output
 /dist/
 /declarations/

showcase/app/app.ts

@@ -6,17 +6,21 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
+import compatModules from '@embroider/virtual/compat-modules';
 import config from 'showcase/config/environment';
-import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
+import { isDevelopingApp, macroCondition } from '@embroider/macros';
+import setupInspector from '@embroider/legacy-inspector-support/ember-source-4.12';
 
 if (macroCondition(isDevelopingApp())) {
-  importSync('./deprecation-workflow');
+  await import('./deprecation-workflow');
 }
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
+
+  inspector = setupInspector(this);
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);

showcase/app/config/environment.js

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

showcase/app/router.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import EmberRouter from '@ember/routing/router';
+import EmberRouter from '@embroider/router';
 import config from 'showcase/config/environment';
 
 export default class Router extends EmberRouter {

showcase/babel.config.cjs

@@ -0,0 +1,50 @@
+const {
+  babelCompatSupport,
+  templateCompatSupport,
+} = require('@embroider/compat/babel');
+
+module.exports = {
+  plugins: [
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ],
+    [
+      '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()],
+      },
+    ],
+    [
+      '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,
+  },
+};

showcase/ember-cli-build.js

@@ -4,10 +4,13 @@
  */
 
 'use strict';
-
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-module.exports = function (defaults) {
+const { compatBuild } = require('@embroider/compat');
+
+module.exports = async function (defaults) {
+  const { buildOnce } = await import('@embroider/vite');
+
   const app = new EmberApp(defaults, {
     'ember-cli-babel': {
       enableTypeScriptTransform: true,
@@ -37,15 +40,5 @@ module.exports = function (defaults) {
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
 
-  const { maybeEmbroider } = require('@embroider/test-setup');
-  return maybeEmbroider(app, {
-    skipBabel: [
-      {
-        package: 'qunit',
-      },
-      {
-        package: '@hashicorp/flight-icons',
-      },
-    ],
-  });
+  return compatBuild(app, buildOnce);
 };

showcase/eslint.config.mjs

@@ -35,15 +35,6 @@ const parserOptions = {
     js: {
       ecmaFeatures: { modules: true },
       ecmaVersion: 'latest',
-      requireConfigFile: false,
-      babelOptions: {
-        plugins: [
-          [
-            '@babel/plugin-proposal-decorators',
-            { decoratorsBeforeExport: true },
-          ],
-        ],
-      },
     },
     ts: {
       projectService: true,
@@ -109,10 +100,8 @@ export default ts.config(
     files: [
       '**/*.cjs',
       'config/**/*.js',
-      'tests/dummy/config/**/*.js',
       'testem.js',
       'testem*.js',
-      'index.js',
       '.prettierrc.js',
       '.stylelintrc.js',
       '.template-lintrc.js',

showcase/app/index.html → showcase/index.html

@@ -14,8 +14,8 @@
 
     {{content-for "head"}}
 
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
-    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/showcase.css">
+    <link integrity="" rel="stylesheet" href="/@embroider/virtual/vendor.css">
+    <link integrity="" rel="stylesheet" href="/@embroider/virtual/app.css">
 
     <link rel="shortcut icon" href="/assets/logos/favicon.png" />
 
@@ -24,8 +24,13 @@
   <body class="showcase-app">
     {{content-for "body"}}
 
-    <script src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/showcase.js"></script>
+    <script src="/@embroider/virtual/vendor.js"></script>
+    <script type="module">
+      import Application from './app/app';
+      import environment from './app/config/environment';
+
+      Application.create(environment.APP);
+    </script>
 
     {{content-for "body-footer"}}
   </body>

showcase/package.json

@@ -10,11 +10,15 @@
   },
   "license": "MPL-2.0",
   "author": "HashiCorp Design Systems <[email protected]>",
+  "exports": {
+    "./tests/*": "./tests/*",
+    "./*": "./app/*"
+  },
   "directories": {
     "test": "tests"
   },
   "scripts": {
-    "build": "pnpm build:packages && ember build --environment=production",
+    "build": "pnpm build:packages && vite build",
     "build:packages": "pnpm -F @hashicorp/design-system-components build",
     "format": "prettier . --cache --write",
     "lint": "concurrently \"pnpm:lint:*(!fix)\" --names \"lint:\" --prefixColors auto",
@@ -27,18 +31,20 @@
     "lint:js": "eslint . --cache",
     "lint:js:fix": "eslint . --fix",
     "lint:types": "glint",
-    "start": "pnpm build:packages && ember serve",
+    "start": "pnpm build:packages && vite",
     "test": "concurrently \"pnpm:lint\" \"pnpm:test:*\" --names \"lint,test:\"",
-    "test:ember": "pnpm build:packages && ember test",
-    "test:ember-compatibility": "ember try:each",
-    "test:ember:percy": "percy exec ember test",
     "test:a11y": "pnpm build:packages && ENABLE_A11Y_AUDIT=true ember test --server -f=\"Acceptance\"",
-    "test:a11y-report": "pnpm build:packages && ENABLE_A11Y_AUDIT=true ENABLE_A11Y_MIDDLEWARE_REPORTER=true ember test -f=\"Acceptance\""
+    "test:a11y-report": "pnpm build:packages && ENABLE_A11Y_AUDIT=true ENABLE_A11Y_MIDDLEWARE_REPORTER=true ember test -f=\"Acceptance\"",
+    "test:ember": "vite build --mode test && ember test --path dist",
+    "test:ember-compatibility": "ember try:each",
+    "test:ember:percy": "percy exec ember test"
   },
   "devDependencies": {
     "@babel/core": "^7.27.1",
     "@babel/eslint-parser": "^7.27.1",
-    "@babel/plugin-proposal-decorators": "^7.27.1",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/plugin-transform-typescript": "^7.27.1",
+    "@babel/runtime": "^7.27.1",
     "@codemirror/lint": "^6.8.4",
     "@codemirror/state": "^6.5.0",
     "@codemirror/view": "^6.36.2",
@@ -47,8 +53,14 @@
     "@ember/string": "^4.0.1",
     "@ember/test-helpers": "^5.2.1",
     "@ember/test-waiters": "^3.1.0",
-    "@embroider/macros": "^1.18.1",
+    "@embroider/compat": "^4.1.10",
+    "@embroider/config-meta-loader": "^1.0.0",
+    "@embroider/core": "^4.2.8",
+    "@embroider/legacy-inspector-support": "^0.1.3",
+    "@embroider/macros": "^1.19.4",
+    "@embroider/router": "^3.0.5",
     "@embroider/test-setup": "^4.0.0",
+    "@embroider/vite": "^1.4.2",
     "@eslint/js": "^9.27.0",
     "@floating-ui/dom": "^1.6.12",
     "@glimmer/component": "^2.0.0",
@@ -61,46 +73,42 @@
     "@hashicorp/design-system-tokens": "workspace:*",
     "@nullvoxpopuli/ember-composable-helpers": "^5.2.11",
     "@percy/cli": "^1.30.5",
-    "@percy/ember": "^4.2.0",
+    "@percy/ember": "^5.0.0",
+    "@rollup/plugin-babel": "^6.0.4",
     "@tsconfig/ember": "^3.0.10",
     "@types/qunit": "^2.19.12",
     "@types/rsvp": "^4.0.9",
     "@types/sinon": "^17.0.4",
-    "broccoli-asset-rev": "^3.0.0",
+    "babel-plugin-ember-template-compilation": "^2.4.1",
     "concurrently": "^9.1.2",
+    "decorator-transforms": "^2.3.0",
     "ember-a11y-testing": "^7.1.2",
     "ember-auto-import": "^2.10.0",
     "ember-basic-dropdown": "^8.6.1",
     "ember-body-class": "^3.0.0",
     "ember-cli": "~6.5.0",
     "ember-cli-app-version": "^7.0.0",
     "ember-cli-babel": "^8.2.0",
-    "ember-cli-clean-css": "^3.0.0",
-    "ember-cli-dependency-checker": "^3.3.3",
     "ember-cli-deprecation-workflow": "^3.3.0",
     "ember-cli-htmlbars": "^6.3.0",
-    "ember-cli-inject-live-reload": "^2.1.0",
     "ember-cli-sass": "^11.0.1",
-    "ember-cli-sri": "^2.1.1",
     "ember-cli-string-helpers": "^8.0.1",
     "ember-cli-string-utils": "^1.1.0",
-    "ember-cli-terser": "^4.0.2",
-    "ember-concurrency": "^4.0.4",
+    "ember-concurrency": "^4.0.2",
     "ember-deep-tracked": "^2.0.1",
     "ember-intl": "^7.3.0",
     "ember-load-initializers": "^3.0.1",
-    "ember-math-helpers": "^5.0.0",
-    "ember-modifier": "^4.2.2",
-    "ember-page-title": "^9.0.2",
-    "ember-power-select": "^8.7.1",
+    "ember-math-helpers": "^3.0.0",
+    "ember-modifier": "^4.2.0",
+    "ember-page-title": "^8.2.3",
+    "ember-power-select": "^8.6.2",
     "ember-qunit": "^9.0.3",
-    "ember-resolver": "^13.1.1",
+    "ember-resolver": "^13.1.0",
     "ember-router-generator": "^2.0.0",
     "ember-set-helper": "^3.0.1",
     "ember-source": "~6.5.0",
     "ember-source-channel-url": "^3.0.0",
     "ember-style-modifier": "^4.4.0",
-    "ember-template-imports": "^4.3.0",
     "ember-template-lint": "^7.7.0",
     "ember-truth-helpers": "^4.0.3",
     "ember-try": "^4.0.0",
@@ -111,7 +119,6 @@
     "eslint-plugin-qunit": "^8.1.2",
     "fs-extra": "^11.3.0",
     "globals": "^16.1.0",
-    "loader.js": "^4.7.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.3",
     "prettier-plugin-ember-template-tag": "^2.0.5",
@@ -126,16 +133,16 @@
     "tracked-built-ins": "^4.0.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.32.1",
-    "webpack": "^5.99.9"
+    "vite": "^6.3.5"
   },
   "engines": {
     "node": ">= 22"
   },
   "ember": {
     "edition": "octane"
   },
-  "exports": {
-    "./tests/*": "./tests/*",
-    "./*": "./app/*"
+  "ember-addon": {
+    "type": "app",
+    "version": 2
   }
 }

showcase/testem.js

@@ -4,26 +4,27 @@
  */
 
 'use strict';
-
-module.exports = {
-  test_page: 'tests/index.html?hidepassed',
-  disable_watching: true,
-  launch_in_ci: ['Chrome'],
-  launch_in_dev: ['Chrome'],
-  browser_disconnect_timeout: 20,
-  browser_start_timeout: 120,
-  browser_args: {
-    Chrome: {
-      ci: [
-        // --no-sandbox is needed when running Chrome inside a container
-        process.env.CI ? '--no-sandbox' : null,
-        '--headless',
-        '--disable-dev-shm-usage',
-        '--disable-software-rasterizer',
-        '--mute-audio',
-        '--remote-debugging-port=0',
-        '--window-size=1440,900',
-      ].filter(Boolean),
+if (typeof module !== 'undefined') {
+  module.exports = {
+    test_page: 'tests/index.html?hidepassed',
+    disable_watching: true,
+    launch_in_ci: ['Chrome'],
+    launch_in_dev: ['Chrome'],
+    browser_disconnect_timeout: 20,
+    browser_start_timeout: 120,
+    browser_args: {
+      Chrome: {
+        ci: [
+          // --no-sandbox is needed when running Chrome inside a container
+          process.env.CI ? '--no-sandbox' : null,
+          '--headless',
+          '--disable-dev-shm-usage',
+          '--disable-software-rasterizer',
+          '--mute-audio',
+          '--remote-debugging-port=0',
+          '--window-size=1440,900',
+        ].filter(Boolean),
+      },
     },
-  },
-};
+  };
+}