Switch host build to vite

package.json

@@ -45,9 +45,11 @@
       "@embroider/compat": "patches/@embroider__compat.patch",
       "ember-eslint-parser": "patches/ember-eslint-parser.patch",
       "openai": "patches/openai.patch",
+      "postcss@8.5.6": "patches/postcss@8.5.6.patch",
       "matrix-js-sdk@38.3.0": "patches/matrix-js-sdk@38.3.0.patch",
       "@embroider/webpack": "patches/@embroider__webpack.patch",
-      "ember-source": "patches/ember-source.patch"
+      "ember-source": "patches/ember-source.patch",
+      "object-inspect": "patches/object-inspect.patch"
     },
     "onlyBuiltDependencies": [
       "@percy/core",

packages/base/field-component.gts

@@ -86,18 +86,14 @@ export class CardContextConsumer extends Component<CardContextConsumerSignature>
     };
   }
 
-  <template>
-    {{yield this.context}}
-  </template>
+  <template>{{yield this.context}}</template>
 }
 
 export class CardCrudFunctionsConsumer extends Component<CardCrudFunctionsConsumerSignature> {
   @consume(CardCrudFunctionsContextName)
   declare cardCrudFunctions: CardCrudFunctions;
 
-  <template>
-    {{yield this.cardCrudFunctions}}
-  </template>
+  <template>{{yield this.cardCrudFunctions}}</template>
 }
 
 interface DefaultFormatConsumerSignature {
@@ -113,9 +109,7 @@ export class DefaultFormatsConsumer extends Component<DefaultFormatConsumerSigna
     return this.defaultFormats ?? { cardDef: 'isolated', fieldDef: 'embedded' };
   }
 
-  <template>
-    {{yield this.effectiveDefaultFormats}}
-  </template>
+  <template>{{yield this.effectiveDefaultFormats}}</template>
 }
 
 interface DefaultFormatsProviderSignature {
@@ -137,9 +131,7 @@ interface PermissionsConsumerSignature {
 export class PermissionsConsumer extends Component<PermissionsConsumerSignature> {
   @consume(PermissionsContextName) declare permissions: Permissions | undefined;
 
-  <template>
-    {{yield this.permissions}}
-  </template>
+  <template>{{yield this.permissions}}</template>
 }
 
 const componentCache = initSharedState(
@@ -527,7 +519,11 @@ function getFields(card: typeof CardDef): {
       }
       return [[maybeFieldName, maybeField]];
     });
-    fields = { ...fields, ...Object.fromEntries(currentFields) };
+    fields = Object.assign(
+      Object.create(null),
+      fields,
+      Object.fromEntries(currentFields),
+    );
     obj = Reflect.getPrototypeOf(obj);
   }
   return fields;

packages/boxel-icons/unpublished-development-types/index.d.ts

@@ -2,7 +2,7 @@
 // These will *not* be published as part of your addon, so be careful that your published code does not rely on them!
 
 import '@glint/environment-ember-loose';
-import 'ember-source/types/stable';
+import 'ember-source/types';
 
 declare module '@glint/environment-ember-loose/registry' {
   export default interface Registry {

packages/boxel-motion/addon/src/types/@cardstack/boxel-motion/index.d.ts

@@ -1,4 +1,3 @@
 import 'ember-source/types';
-import 'ember-source/types/preview';
 
 export {};

packages/boxel-motion/test-app/types/boxel-motion-demo-app/index.d.ts

@@ -1,4 +1,3 @@
 import 'ember-source/types';
-import 'ember-source/types/preview';
 
 export {};

packages/boxel-ui/addon/src/components/date-range-picker/index.gts

@@ -6,6 +6,7 @@ import { action } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import PowerCalendarRange from 'ember-power-calendar/components/power-calendar-range';
+import 'ember-power-calendar/styles';
 import { type TPowerCalendarRangeOnSelect } from 'ember-power-calendar/components/power-calendar-range';
 import powerCalendarFormatDate from 'ember-power-calendar/helpers/power-calendar-format-date';
 import {

packages/boxel-ui/addon/src/components/multi-select/index.gts

@@ -7,6 +7,7 @@ import type {
   Select,
 } from 'ember-power-select/components/power-select';
 import BeforeOptions from 'ember-power-select/components/power-select/before-options';
+import 'ember-power-select/styles';
 import PowerSelectMultiple from 'ember-power-select/components/power-select-multiple';
 
 import { cn } from '../../helpers.ts';

packages/boxel-ui/addon/src/components/select/index.gts

@@ -13,6 +13,7 @@ import PowerSelect, {
   type PowerSelectArgs,
 } from 'ember-power-select/components/power-select';
 import BeforeOptions from 'ember-power-select/components/power-select/before-options';
+import 'ember-power-select/styles';
 import PowerSelectOptions from 'ember-power-select/components/power-select/options';
 
 import cn from '../../helpers/cn.ts';

packages/boxel-ui/addon/src/types/@cardstack/boxel-ui/index.d.ts

@@ -1,4 +1,3 @@
 import 'ember-source/types';
-import 'ember-source/types/preview';
 
 export {};

packages/boxel-ui/test-app/types/boxel-ui-test-app/index.d.ts

@@ -1,4 +1,3 @@
 import 'ember-source/types';
-import 'ember-source/types/preview';
 
 export {};

packages/host/.eslintrc.js

@@ -112,6 +112,7 @@ module.exports = {
         './config/**/*.js',
         './lib/**/*.js',
         './server/**/*.js',
+        './babel.config.cjs',
       ],
       parserOptions: {
         sourceType: 'script',

packages/host/.gitignore

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

packages/host/app/app.ts

@@ -5,16 +5,17 @@ import './deprecation-workflow';
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from '@cardstack/host/config/environment';
-import './lib/glint-embroider-workaround';
+import config from './config/environment';
 import '@cardstack/boxel-ui/styles/global.css';
 import '@cardstack/boxel-ui/styles/fonts.css';
 import '@cardstack/boxel-ui/styles/variables.css';
 
+import compatModules from '@embroider/virtual/compat-modules';
+
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);

packages/host/app/config/environment.d.ts → packages/host/app/config/environment.ts

@@ -1,10 +1,30 @@
-export default config;
+import { assert } from '@ember/debug';
+import loadConfigFromMeta from '@embroider/config-meta-loader';
 
-/**
- * Type declarations for
- *    import config from 'my-app/config/environment'
- */
-declare const config: {
+const config = loadConfigFromMeta('@cardstack/host') as unknown;
+
+assert(
+  'config is not an object',
+  typeof config === 'object' && config !== null,
+);
+assert(
+  'modulePrefix was not detected on your config',
+  'modulePrefix' in config && typeof config.modulePrefix === 'string',
+);
+assert(
+  'locationType was not detected on your config',
+  'locationType' in config && typeof config.locationType === 'string',
+);
+assert(
+  'rootURL was not detected on your config',
+  'rootURL' in config && typeof config.rootURL === 'string',
+);
+assert(
+  'APP was not detected on your config',
+  'APP' in config && typeof config.APP === 'object',
+);
+
+export default config as {
   environment: string;
   modulePrefix: string;
   podModulePrefix: string;
@@ -36,10 +56,10 @@ declare const config: {
     SHOW_ASK_AI?: boolean;
     AI_PATCHING_CORRECTNESS_CHECKS?: boolean;
   };
+  publishedRealmDomainOverrides: string;
   publishedRealmBoxelSpaceDomain: string;
   publishedRealmBoxelSiteDomain: string;
-  publishedRealmDomainOverrides: string;
-  defaultSystemCardId: string;
   cardSizeLimitBytes: number;
   fileSizeLimitBytes: number;
-};
+  defaultSystemCardId: string;
+} & Record<string, unknown>;

packages/host/app/deprecation-workflow.js

@@ -1,3 +1,22 @@
 import setupDeprecationWorkflow from 'ember-cli-deprecation-workflow';
 
-setupDeprecationWorkflow();
+setupDeprecationWorkflow({
+  workflow: [
+    {
+      handler: 'silence',
+      matchId: 'importing-inject-from-ember-service',
+    },
+    {
+      handler: 'silence',
+      matchId: 'deprecate-import--set-classic-decorator-from-ember',
+    },
+    {
+      handler: 'silence',
+      matchId: 'deprecate-import-view-utils-from-ember',
+    },
+    {
+      handler: 'silence',
+      matchId: 'deprecate-import-env-from-ember',
+    },
+  ],
+});

packages/host/app/lib/html-component.ts

@@ -2,13 +2,12 @@ import { setComponentManager } from '@ember/component';
 import { capabilities } from '@ember/component';
 import { setComponentTemplate } from '@ember/component';
 
-import templateOnly from '@ember/component/template-only';
 import { htmlSafe, type SafeString } from '@ember/template';
 import { precompileTemplate } from '@ember/template-compilation';
 
-import { modifier } from 'ember-modifier';
+import { template } from '@ember/template-compiler/runtime';
 
-import { compiler } from '@cardstack/runtime-common/etc';
+import { modifier } from 'ember-modifier';
 
 import type { ComponentLike } from '@glint/template';
 
@@ -72,10 +71,7 @@ export function htmlComponent(
     if (cache.has(source)) {
       component = cache.get(source)!;
     } else {
-      component = setComponentTemplate(
-        compiler.compile(source, { strictMode: true }),
-        templateOnly(),
-      ) as TopElement;
+      component = template(source) as TopElement;
       cache.set(source, component);
     }
 

packages/host/app/lib/public-path.ts

@@ -1,7 +1 @@
-import config from '@cardstack/host/config/environment';
-
 (globalThis as any).__bootStart = performance.now();
-const { hostsOwnAssets, assetsURL } = config;
-
-// @ts-expect-error this is consumed by webpack to set the public asset path at runtime
-__webpack_public_path__ = hostsOwnAssets ? '/' : assetsURL;

packages/host/app/modifiers/monaco.ts

@@ -10,7 +10,6 @@ import * as MonacoSDK from 'monaco-editor';
 import config from '@cardstack/host/config/environment';
 import type MonacoService from '@cardstack/host/services/monaco-service';
 import { createMonacoWaiterManager } from '@cardstack/host/utils/editor/monaco-test-waiter';
-import '@cardstack/requirejs-monaco-ember-polyfill';
 
 interface Signature {
   Args: {

packages/host/app/services/monaco-service.ts

@@ -9,6 +9,14 @@ import { task } from 'ember-concurrency';
 
 import merge from 'lodash/merge';
 
+// The worker suffix here is a vite feature that builds them into standalone
+// worker scripts, which will be outside the main bundle in prod.
+import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker.js?worker';
+import CSSWorker from 'monaco-editor/esm/vs/language/css/css.worker.js?worker';
+import HTMLWorker from 'monaco-editor/esm/vs/language/html/html.worker.js?worker';
+import JSONWorker from 'monaco-editor/esm/vs/language/json/json.worker.js?worker';
+import TSWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker.js?worker';
+
 import type { SingleCardDocument } from '@cardstack/runtime-common';
 
 import config from '@cardstack/host/config/environment';
@@ -27,6 +35,28 @@ export type MonacoSDK = typeof _MonacoSDK;
 export type IStandaloneCodeEditor = _MonacoSDK.editor.IStandaloneCodeEditor;
 
 const { serverEchoDebounceMs } = config;
+(
+  globalThis as unknown as { MonacoEnvironment: _MonacoSDK.Environment }
+).MonacoEnvironment = {
+  getWorker: function (_workerId, label) {
+    switch (label) {
+      case 'json':
+        return new JSONWorker();
+      case 'css':
+      case 'scss':
+      case 'less':
+        return new CSSWorker();
+      case 'typescript':
+      case 'javascript':
+        return new TSWorker();
+      case 'html':
+      case 'handlebars':
+        return new HTMLWorker();
+      default:
+        return new EditorWorker();
+    }
+  },
+};
 
 export default class MonacoService extends Service {
   #ready: Promise<MonacoSDK>;
@@ -44,8 +74,6 @@ export default class MonacoService extends Service {
   }
 
   private loadMonacoSDK = task(async () => {
-    // @ts-expect-error: dynamic import without types
-    await import('@cardstack/requirejs-monaco-ember-polyfill');
     const monaco = await import('monaco-editor');
     monaco.languages.typescript.javascriptDefaults.setCompilerOptions(
       this.defaultCompilerOptions(monaco),