make addon appjs virtual

packages/compat/src/babel-plugin-adjust-imports.ts

@@ -53,6 +53,19 @@ export default function main(babel: typeof Babel) {
   }
 
   return {
+    manipulateOptions(opts: any, parserOpts: any) {
+      let filename: string = opts.filename || parserOpts.sourceFileName;
+      if (!filename) return;
+      filename = cleanUrl(filename);
+      if (filename.includes('__embroider_appjs_match__')) {
+        filename = filename.split('__embroider_appjs_match__')[0];
+        if (filename.includes('embroider_virtual:')) {
+          filename = filename.split('embroider_virtual:')[1];
+        }
+        opts.filename = filename;
+        parserOpts.sourceFileName = filename;
+      }
+    },
     visitor: {
       Program: {
         enter(path: NodePath<t.Program>, state: State) {

packages/compat/src/module-visitor.ts

@@ -309,6 +309,7 @@ class ModuleVisitor {
         transpiledContent: result.transpiledContent,
       };
     } catch (err) {
+      console.error(err);
       if (['BABEL_PARSE_ERROR', 'BABEL_TRANSFORM_ERROR'].includes(err.code)) {
         return [
           {

packages/core/src/module-resolver.ts

@@ -20,6 +20,8 @@ import {
   fastbootSwitch,
   decodeFastbootSwitch,
   decodeImplicitModules,
+  decodeAppJsMatch,
+  encodeAppJsMatch,
 } from './virtual-content';
 import { Memoize } from 'typescript-memoize';
 import { describeExports } from './describe-exports';
@@ -168,6 +170,7 @@ export class Resolver {
 
     request = this.handleFastbootSwitch(request);
     request = await this.handleGlobalsCompat(request);
+    request = this.handleEncodedAppJsMatch(request);
     request = this.handleImplicitModules(request);
     request = this.handleImplicitTestScripts(request);
     request = this.handleVendorStyles(request);
@@ -184,6 +187,7 @@ export class Resolver {
     // rehome requests to their un-rewritten locations, and for the most part we
     // want to be dealing with the rewritten packages.
     request = this.handleRewrittenPackages(request);
+    request = this.handleAppJsMatch(request);
     return request;
   }
 
@@ -372,6 +376,27 @@ export class Resolver {
     return logTransition('failed to match in fastboot switch', request);
   }
 
+  private handleAppJsMatch<R extends ModuleRequest>(request: R): R {
+    if (request.meta?.isAppJsMatch) {
+      return request.virtualize(encodeAppJsMatch(request.specifier, request.fromFile));
+    }
+    return request;
+  }
+
+  private handleEncodedAppJsMatch<R extends ModuleRequest>(request: R): R {
+    if (isTerminal(request)) {
+      return request;
+    }
+    let match = decodeAppJsMatch(request.fromFile);
+    if (!match) {
+      return request;
+    }
+    if (match.virtual) {
+      return request.rehome('./package.json');
+    }
+    return request.rehome(match.filename);
+  }
+
   private handleImplicitModules<R extends ModuleRequest>(request: R): R {
     if (isTerminal(request)) {
       return request;
@@ -919,7 +944,7 @@ export class Resolver {
           request
             // setting meta here because if this fails, we want the fallback
             // logic to revert our rehome and continue from the *moved* package.
-            .withMeta({ originalFromFile: request.fromFile })
+            .withMeta({ originalFromFile: request.fromFile, isAppJsMatch: request.meta?.isAppJsMatch })
             .rehome(resolve(originalRequestingPkg.root, 'package.json'))
         );
       } else {
@@ -1055,7 +1080,7 @@ export class Resolver {
 
     // setting meta because if this fails, we want the fallback to pick up back
     // in the original requesting package.
-    return newRequest.withMeta({ originalFromFile });
+    return newRequest.withMeta({ originalFromFile, isAppJsMatch: request.meta?.isAppJsMatch });
   }
 
   private preHandleExternal<R extends ModuleRequest>(request: R): R {
@@ -1425,7 +1450,13 @@ export class Resolver {
       case undefined:
         return undefined;
       case 'app-only':
-        return request.alias(matched.entry['app-js'].specifier).rehome(matched.entry['app-js'].fromFile);
+        return request
+          .alias(matched.entry['app-js'].specifier)
+          .rehome(matched.entry['app-js'].fromFile)
+          .withMeta({
+            ...request.meta,
+            isAppJsMatch: true,
+          });
       case 'fastboot-only':
         return request.alias(matched.entry['fastboot-js'].specifier).rehome(matched.entry['fastboot-js'].fromFile);
       case 'both':

packages/core/src/virtual-content.ts

@@ -1,5 +1,5 @@
-import { dirname, basename, resolve, posix, sep, join } from 'path';
-import type { Resolver, AddonPackage, Package } from '.';
+import { basename, dirname, join, posix, resolve, sep, extname } from 'path';
+import type { AddonPackage, Package, Resolver } from '.';
 import { explicitRelative, extensionsPattern } from '.';
 import { compile } from './js-handlebars';
 import { decodeImplicitTestScripts, renderImplicitTestScripts } from './virtual-test-support';
@@ -9,6 +9,7 @@ import { decodeVirtualVendorStyles, renderVendorStyles } from './virtual-vendor-
 
 import { decodeEntrypoint, renderEntrypoint } from './virtual-entrypoint';
 import { decodeRouteEntrypoint, renderRouteEntrypoint } from './virtual-route-entrypoint';
+import { readFileSync } from 'fs-extra';
 
 const externalESPrefix = '/@embroider/ext-es/';
 const externalCJSPrefix = '/@embroider/ext-cjs/';
@@ -42,6 +43,15 @@ export function virtualContent(filename: string, resolver: Resolver): VirtualCon
   if (extern) {
     return renderESExternalShim(extern);
   }
+
+  let appjs = decodeAppJsMatch(filename);
+  if (appjs) {
+    if (!appjs.virtual) {
+      return renderAppJs(appjs.filename);
+    }
+    filename = appjs.filename;
+  }
+
   let match = decodeVirtualPairComponent(filename);
   if (match) {
     return pairedComponentShim(match);
@@ -175,8 +185,8 @@ const pairComponentMarker = '-embroider-pair-component';
 const pairComponentPattern = /^(?<hbsModule>.*)__vpc__(?<jsModule>[^\/]*)-embroider-pair-component$/;
 
 export function virtualPairComponent(hbsModule: string, jsModule: string | undefined): string {
-  let relativeJSModule = '';
-  if (jsModule) {
+  let relativeJSModule = jsModule || '';
+  if (jsModule && !jsModule.includes(appJsMatchMarker)) {
     relativeJSModule = explicitRelative(dirname(hbsModule), jsModule);
   }
   return `${hbsModule}__vpc__${encodeURIComponent(relativeJSModule)}${pairComponentMarker}`;
@@ -195,14 +205,56 @@ function decodeVirtualPairComponent(
   }
   let { hbsModule, jsModule } = match.groups! as { hbsModule: string; jsModule: string };
   // target our real hbs module from our virtual module
-  let relativeHBSModule = explicitRelative(dirname(filename), hbsModule);
+  let relativeHBSModule = hbsModule;
+  if (!hbsModule.includes(appJsMatchMarker)) {
+    relativeHBSModule = explicitRelative(dirname(filename), hbsModule);
+  }
   return {
     relativeHBSModule,
     relativeJSModule: decodeURIComponent(jsModule) || null,
     debugName: basename(relativeHBSModule).replace(/\.(js|hbs)$/, ''),
   };
 }
 
+const appJsMatchMarker = '__embroider_appjs_match__';
+const appJsMatchPattern = /(?<to>.+)__embroider_appjs_match__.{2,5}$/;
+export function encodeAppJsMatch(specifier: string, from: string): string {
+  let to = require.resolve(specifier, {
+    paths: [resolve(dirname(from), 'node_modules')],
+  });
+  return `${to}${appJsMatchMarker}${extname(to)}`;
+}
+
+export function decodeAppJsMatch(filename: string) {
+  // Performance: avoid paying regex exec cost unless needed
+  if (!filename.includes(appJsMatchMarker)) {
+    return;
+  }
+  let match = appJsMatchPattern.exec(filename);
+  if (match) {
+    let to = match.groups!.to;
+    if (to.includes(pairComponentMarker)) {
+      if (to.includes('_vpc_')) {
+        to = filename;
+      }
+      return {
+        filename: to,
+        virtual: true,
+      };
+    }
+    return {
+      filename: to,
+    };
+  }
+}
+
+function renderAppJs(filename: string) {
+  return {
+    src: readFileSync(filename).toString(),
+    watches: [filename],
+  };
+}
+
 const fastbootSwitchSuffix = '/embroider_fastboot_switch';
 const fastbootSwitchPattern = /(?<original>.+)\/embroider_fastboot_switch(?:\?names=(?<names>.+))?$/;
 export function fastbootSwitch(specifier: string, fromFile: string, names: Set<string>): string {

tests/scenarios/core-resolver-test.ts

@@ -510,7 +510,7 @@ Scenarios.fromProject(() => new Project())
           expectAudit
             .module('./app.js')
             .resolves('my-app/hello-world')
-            .to('./node_modules/my-addon/_app_/hello-world.js');
+            .to('./node_modules/my-addon/_app_/hello-world.js__embroider_appjs_match__.js');
         });
 
         test('app-js module in addon can still do relative imports that escape its package', async function () {
@@ -527,7 +527,7 @@ Scenarios.fromProject(() => new Project())
           });
 
           expectAudit
-            .module('./node_modules/my-addon/_app_/hello-world.js')
+            .module('./node_modules/my-addon/_app_/hello-world.js__embroider_appjs_match__.js')
             .resolves('../../extra.js')
             .to('./node_modules/extra.js');
         });
@@ -547,7 +547,7 @@ Scenarios.fromProject(() => new Project())
           expectAudit
             .module('./app.js')
             .resolves('my-app/templates/hello-world')
-            .to('./node_modules/my-addon/_app_/templates/hello-world.hbs');
+            .to('./node_modules/my-addon/_app_/templates/hello-world.hbs__embroider_appjs_match__.hbs');
         });
 
         test(`relative import in addon's app tree resolves to app`, async function () {
@@ -564,7 +564,7 @@ Scenarios.fromProject(() => new Project())
           });
 
           expectAudit
-            .module('./node_modules/my-addon/_app_/hello-world.js')
+            .module('./node_modules/my-addon/_app_/hello-world.js__embroider_appjs_match__.js')
             .resolves('./secondary')
             .to('./secondary.js');
         });
@@ -584,7 +584,7 @@ Scenarios.fromProject(() => new Project())
           });
 
           expectAudit
-            .module('./node_modules/my-addon/_app_/hello-world.js')
+            .module('./node_modules/my-addon/_app_/hello-world.js__embroider_appjs_match__.js')
             .resolves('./secondary')
             .to('./secondary.js');
         });
@@ -602,7 +602,7 @@ Scenarios.fromProject(() => new Project())
           });
 
           expectAudit
-            .module('./node_modules/my-addon/_app_/hello-world.js')
+            .module('./node_modules/my-addon/_app_/hello-world.js__embroider_appjs_match__.js')
             .resolves('the-apps-dep')
             .to('./node_modules/the-apps-dep/index.js');
         });
@@ -621,7 +621,7 @@ Scenarios.fromProject(() => new Project())
           });
 
           expectAudit
-            .module('./node_modules/my-addon/_app_/hello-world.js')
+            .module('./node_modules/my-addon/_app_/hello-world.js__embroider_appjs_match__.js')
             .resolves('my-app/secondary')
             .to('./secondary.js');
         });

tests/scenarios/vite-internals-test.ts

@@ -219,20 +219,33 @@ appScenarios
 
         test(`dep optimization of a v2 addon`, async function (assert) {
           expectAudit
-            .module('./index.html')
-            .resolves(/\/index.html.*/) // in-html app-boot script
-            .toModule()
-            .resolves(/\/app\.js.*/)
+            .module(/\/app\.js.*/)
+            .resolves(/.*\/-embroider-entrypoint.js/)
             .toModule()
+            .withContents((_src, imports) => {
+              let pageTitleImports = imports.filter(imp => /page-title/.test(imp.source));
+              assert.ok(pageTitleImports.length > 0, 'should not have at least one import from page-title');
+              for (let pageTitleImport of pageTitleImports) {
+                assert.notOk(
+                  /\.vite\/deps/.test(pageTitleImport.source),
+                  `expected ${pageTitleImport.source} not to be in vite deps`
+                );
+              }
+              return true;
+            });
+          expectAudit
+            .module(/\/app\.js.*/)
             .resolves(/.*\/-embroider-entrypoint.js/)
             .toModule()
+            .resolves(/page-title/)
+            .toModule()
             .withContents((_src, imports) => {
               let pageTitleImports = imports.filter(imp => /page-title/.test(imp.source));
-              assert.ok(pageTitleImports.length > 0, 'should have at least one import from page-title');
+              assert.ok(pageTitleImports.length > 0, 'should not have at least one import from page-title');
               for (let pageTitleImport of pageTitleImports) {
-                assert.ok(
+                assert.notOk(
                   /\.vite\/deps/.test(pageTitleImport.source),
-                  `expected ${pageTitleImport.source} to be in vite deps`
+                  `expected ${pageTitleImport.source} not to be in vite deps`
                 );
               }
               return true;