feat(new app-boot): replace app-boot.js with an in-html module

packages/compat/src/compat-app-builder.ts

@@ -628,8 +628,8 @@ export class CompatAppBuilder {
 
         ${appBoot}
 
-        1. If you want to keep the same behavior, copy and paste it to your /app/app-boot.js:
-        2. Once /app/app-boot.js has the content you need, remove the present error by setting "useAddonAppBoot" to false in the build options.
+        1. If you want to keep the same behavior, copy and paste it to the app-boot script included in app/index.html.
+        2. Once app/index.html has the content you need, remove the present error by setting "useAddonAppBoot" to false in the build options.
       `);
     }
   }

test-packages/support/audit-assertions.ts

@@ -56,7 +56,7 @@ export function setupAuditTest(hooks: NestedHooks, opts: () => AuditBuildOptions
       await visit();
       prepareResult(expectAudit.assert);
     },
-    module(name: string) {
+    module(name: string | RegExp) {
       return expectAudit.module(name);
     },
     get findings() {
@@ -94,7 +94,7 @@ export class ExpectAuditResults {
     readonly toRewrittenPath: (path: string) => string
   ) {}
 
-  module(inputName: string): PublicAPI<ExpectModule> {
+  module(inputName: string | RegExp): PublicAPI<ExpectModule> {
     return new ExpectModule(this, inputName);
   }
 
@@ -112,28 +112,43 @@ export class ExpectAuditResults {
 }
 
 export class ExpectModule {
-  constructor(private expectAudit: ExpectAuditResults, private inputName: string) {}
+  constructor(private expectAudit: ExpectAuditResults, private inputName: string | RegExp) {}
+
+  @Memoize()
+  private get outputName() {
+    if (typeof this.inputName === 'string') {
+      return this.expectAudit.toRewrittenPath(this.inputName);
+    } else {
+      return this.inputName.toString();
+    }
+  }
 
   @Memoize()
   private get module() {
-    let outputName = this.expectAudit.toRewrittenPath(this.inputName);
     for (let [key, value] of Object.entries(this.expectAudit.result.modules)) {
-      if (cleanUrl(key) === outputName) {
-        return value;
+      if (typeof this.inputName === 'string') {
+        if (cleanUrl(key) === this.outputName) {
+          return value;
+        }
+      } else {
+        if (this.inputName.test(cleanUrl(key))) {
+          return value;
+        }
       }
     }
-    return this.expectAudit.result.modules[outputName];
+    return this.expectAudit.result.modules[this.outputName];
   }
 
   private emitMissingModule() {
-    let outputName = this.expectAudit.toRewrittenPath(this.inputName);
     const showNearMisses = 4;
-    let actuals = sortBy(Object.keys(this.expectAudit.result.modules), candidate => distance(candidate, outputName));
+    let actuals = sortBy(Object.keys(this.expectAudit.result.modules), candidate =>
+      distance(candidate, this.outputName)
+    );
     this.expectAudit.assert.pushResult({
       result: false,
       actual:
         actuals.length > showNearMisses ? actuals.slice(0, showNearMisses).join(', ') + '...' : actuals.join(', '),
-      expected: outputName,
+      expected: this.outputName,
       message: `Can't locate module ${this.inputName}`,
     });
   }
@@ -250,7 +265,7 @@ export class ExpectModule {
     return new ExpectResolution(this.expectAudit, target, resolution);
   }
 
-  // this is testing explicitly for the template-only component moduels that we
+  // this is testing explicitly for the template-only component modules that we
   // synthesize in our module-resolver
   isTemplateOnlyComponent(template: string, message?: string) {
     if (!this.module) {

tests/addon-template/tests/dummy/app/index.html

@@ -17,7 +17,12 @@
     {{content-for "body"}}
 
     <script src="/@embroider/core/vendor.js"></script>
-    <script src="/app-boot.js" type="module"></script>
+    <script type="module">
+      import Application from './app';
+      import environment from './config/environment';
+
+      Application.create(environment.APP);
+    </script>
 
     {{content-for "body-footer"}}
   </body>

tests/addon-template/tests/index.html

@@ -30,7 +30,6 @@
     <script src="/testem.js" integrity="" data-embroider-ignore></script>
     <script src="/@embroider/core/vendor.js"></script>
     <script src="/@embroider/core/test-support.js"></script>
-    <script src="/app-boot.js" type="module"></script>
     <script src="/@embroider/core/test-entrypoint" type="module"></script>
 
     {{content-for "body-footer"}}

tests/app-template/app/index.html

@@ -17,7 +17,12 @@
     {{content-for "body"}}
 
     <script src="/@embroider/core/vendor.js"></script>
-    <script src="/app-boot.js" type="module"></script>
+    <script type="module">
+      import Application from './app';
+      import environment from './config/environment';
+
+      Application.create(environment.APP);
+    </script>
 
     {{content-for "body-footer"}}
   </body>

tests/app-template/tests/index.html

@@ -27,7 +27,6 @@
     <script src="/testem.js" integrity="" data-embroider-ignore></script>
     <script src="/@embroider/core/vendor.js"></script>
     <script src="/@embroider/core/test-support.js"></script>
-    <script src="/app-boot.js" type="module"></script>
     <script src="/@embroider/core/test-entrypoint" type="module"></script>
 
     {{content-for "body-footer"}} {{content-for "test-body-footer"}}

tests/fixtures/macro-sample-addon/tests/dummy/app/index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Dummy</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+
+    <link integrity="" rel="stylesheet" href="/@embroider/core/vendor.css">
+    <link integrity="" rel="stylesheet" href="/assets/dummy.css">
+
+    {{content-for "head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+
+    <script src="/@embroider/core/vendor.js"></script>
+    <script type="module">
+      import Application from './app';
+      import environment from './config/environment';
+
+      window.LoadedFromCustomAppBoot = true;
+      Application.create(environment.APP);
+    </script>
+
+    {{content-for "body-footer"}}
+  </body>
+</html>

tests/fixtures/macro-sample-addon/tests/index.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Dummy Tests</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+    {{content-for "test-head"}}
+
+    <link rel="stylesheet" href="/@embroider/core/vendor.css">
+    <link rel="stylesheet" href="/assets/dummy.css">
+    <link rel="stylesheet" href="/@embroider/core/test-support.css">
+
+    {{content-for "head-footer"}}
+    {{content-for "test-head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+    {{content-for "test-body"}}
+
+    <div id="qunit"></div>
+    <div id="qunit-fixture">
+      <div id="ember-testing-container">
+        <div id="ember-testing"></div>
+      </div>
+    </div>
+
+    <script src="/testem.js" integrity="" data-embroider-ignore></script>
+    <script src="/@embroider/core/vendor.js"></script>
+    <script src="/@embroider/core/test-support.js"></script>
+    <script src="/@embroider/core/test-entrypoint" type="module"></script>
+
+    {{content-for "body-footer"}}
+    {{content-for "test-body-footer"}}
+  </body>
+</html>

tests/fixtures/macro-sample-addon/tests/test-helper.js

@@ -0,0 +1,13 @@
+import Application from 'dummy/app';
+import config from 'dummy/config/environment';
+import * as QUnit from 'qunit';
+import { setApplication } from '@ember/test-helpers';
+import { setup } from 'qunit-dom';
+import { start } from 'ember-qunit';
+
+window.LoadedFromCustomAppBoot = true;
+setApplication(Application.create(config.APP));
+
+setup(QUnit.assert);
+
+start();

tests/fixtures/macro-test/tests/index.html

@@ -36,7 +36,6 @@
     <script src="{{rootURL}}apple.js"></script>
     <script src="{{rootURL}}ordered.js"></script>
     <script src="/@embroider/core/test-support.js"></script>
-    <script src="/app-boot.js" type="module"></script>
     <script src="/@embroider/core/test-entrypoint" type="module"></script>
 
     {{content-for "body-footer"}}

tests/scenarios/compat-addon-classic-features-test.ts

@@ -82,7 +82,12 @@ appScenarios
               {{content-for "custom"}}
           
               <script src="/@embroider/core/vendor.js"></script>
-              <script src="/app-boot.js" type="module"></script>
+              <script type="module">
+                import Application from './app';
+                import environment from './config/environment';
+
+                Application.create(environment.APP);
+              </script>
           
               {{content-for "body-footer"}}
             </body>

tests/scenarios/compat-app-html-attributes-test.ts

@@ -32,7 +32,7 @@ appScenarios
 
     // <script ... src=".../vendor.js"> => <script ... src=".../vendor.js" data-original-filename="vendor.js">
     indexHtml = indexHtml.replace('vendor.js">', 'vendor.js" data-original-filename="vendor.js">');
-    indexHtml = indexHtml.replace('/app-boot.js" ', '/app-boot.js" data-original-filename="entrypoint" ');
+    indexHtml = indexHtml.replace(' type="module">', ' data-original-filename="entrypoint" type="module">');
 
     // <script ... => <script defer ...
     indexHtml = indexHtml.replace(/<script /g, '<script defer ');
@@ -72,7 +72,7 @@ appScenarios
           'has data-original-filename vendor.js'
         );
         expectFile('./index.html').matches(
-          '" data-original-filename="entrypoint" type="module">',
+          ' data-original-filename="entrypoint" type="module">',
           'has data-original-filename entrypoint'
         );
       });

tests/scenarios/compat-exclude-dot-files-test.ts

@@ -2,7 +2,9 @@ import type { ExpectFile } from '@embroider/test-support/file-assertions/qunit';
 import { expectRewrittenFilesAt } from '@embroider/test-support/file-assertions/qunit';
 import { throwOnWarnings } from '@embroider/core';
 import type { PreparedApp } from 'scenario-tester';
+import CommandWatcher from './helpers/command-watcher';
 import { appScenarios, baseAddon } from './scenarios';
+import fetch from 'node-fetch';
 import QUnit from 'qunit';
 import { merge } from 'lodash';
 import { setupAuditTest } from '@embroider/test-support/audit-assertions';
@@ -51,21 +53,30 @@ appScenarios
       throwOnWarnings(hooks);
 
       let app: PreparedApp;
-
+      let server: CommandWatcher;
+      let appURL: string;
       let expectFile: ExpectFile;
 
-      hooks.before(async assert => {
+      hooks.before(async () => {
         app = await scenario.prepare();
-        let result = await app.execute('ember build', { env: { EMBROIDER_PREBUILD: 'true' } });
-        assert.equal(result.exitCode, 0, result.output);
+        server = CommandWatcher.launch('vite', ['--clearScreen', 'false'], { cwd: app.dir });
+        [, appURL] = await server.waitFor(/Local:\s+(https?:\/\/.*)\//g);
       });
 
-      let expectAudit = setupAuditTest(hooks, () => ({ app: app.dir }));
-
-      hooks.beforeEach(assert => {
+      hooks.beforeEach(async assert => {
         expectFile = expectRewrittenFilesAt(app.dir, { qunit: assert });
       });
 
+      hooks.after(async () => {
+        await server?.shutdown();
+      });
+
+      let expectAudit = setupAuditTest(hooks, () => ({
+        appURL,
+        startingFrom: ['index.html'],
+        fetch: fetch as unknown as typeof globalThis.fetch,
+      }));
+
       test('dot files are not included as app modules', function (assert) {
         // dot files should exist on disk
         expectFile('./.foobar.js').exists();
@@ -74,12 +85,12 @@ appScenarios
 
         // but not be picked up in the entrypoint
         expectAudit
-          .module('./tmp/rewritten-app/index.html')
-          .resolves('/app-boot.js')
+          .module('./index.html')
+          .resolves(/\/index.html.*/) // in-html app-boot script
           .toModule()
-          .resolves('./app')
+          .resolves(/\/app\.js.*/)
           .toModule()
-          .resolves('@embroider/core/entrypoint')
+          .resolves(/.*\/-embroider-entrypoint.js/)
           .toModule()
           .withContents(content => {
             assert.notOk(/app-template\/\.foobar/.test(content), '.foobar is not in the entrypoint');