Fixed inline modules without TS, added caching

Author: HubertBer

apps/bare-expo/metro.config.js

@@ -25,27 +25,22 @@ config.watchFolders = [
   path.join(monorepoRoot, 'apps/test-suite'), // Workaround for Yarn v1 workspace issue where workspace dependencies aren't properly linked, should be at `<root>/node_modules/apps/test-suite`
 ];
 
-function findUpTSConfig(cwd) {
-  const tsconfigPath = path.resolve(cwd, './tsconfig.json');
-  if (fs.existsSync(tsconfigPath)) {
-    return path.dirname(tsconfigPath);
+function findUpPackageJsonDirectory(cwd, directoryToPackage) {
+  if (['.', path.sep].includes(cwd)) return undefined;
+  if (directoryToPackage.has(cwd)) return directoryToPackage.get(cwd);
+
+  const packageFound = fs.existsSync(path.resolve(cwd, './package.json'));
+  if (packageFound) {
+    directoryToPackage.set(cwd, cwd);
+    return cwd;
   }
-
-  const parent = path.dirname(cwd);
-  if (parent === cwd) return null;
-
-  return findUpTSConfig(parent);
-}
-
-function findUpTSProjectRootOrThrow(dir) {
-  const tsProjectRoot = findUpTSConfig(dir);
-  if (!tsProjectRoot) {
-    throw new Error(
-      'Inline modules watched dir needs to be inside a TS project with tsconfig.json'
-    );
+  const packageRoot = findUpPackageJsonDirectory(path.dirname(cwd), directoryToPackage);
+  if (packageRoot) {
+    directoryToPackage.set(cwd, packageRoot);
   }
-  return tsProjectRoot;
+  return packageRoot;
 }
+const directoryToPackage = new Map();
 
 // When testing on MacOS we need to swap out `react-native` for `react-native-macos`
 config.resolver.resolveRequest = (context, moduleName, platform) => {
@@ -66,15 +61,24 @@ config.resolver.resolveRequest = (context, moduleName, platform) => {
     inlineModuleFileExtension = '.view.js';
   }
   if (inlineModuleFileExtension) {
-    const tsProjectRoot = findUpTSProjectRootOrThrow(path.dirname(context.originModulePath));
-    const modulePathRelativeToTSRoot = path.relative(
-      tsProjectRoot,
+    const originModuleDirname = path.dirname(context.originModulePath);
+    let modulePackageRoot = directoryToPackage.get(originModuleDirname);
+    if (!modulePackageRoot) {
+      modulePackageRoot = findUpPackageJsonDirectory(
+        path.dirname(context.originModulePath),
+        directoryToPackage
+      );
+    }
+    if (!modulePackageRoot) {
+      return { type: 'empty' };
+    }
+    const modulePathRelativeToItsPackageRoot = path.relative(
+      modulePackageRoot,
       fs.realpathSync(path.dirname(context.originModulePath))
     );
-
     const modulePath = path.resolve(
       inlineModulesModulesPath,
-      modulePathRelativeToTSRoot,
+      modulePathRelativeToItsPackageRoot,
       moduleName.substring(0, moduleName.lastIndexOf('.')) + inlineModuleFileExtension
     );
 

packages/@expo/cli/src/inlineModules/generation.ts

@@ -1,7 +1,6 @@
 import { getConfig } from '@expo/config';
 import { getPbxproj } from '@expo/config-plugins/build/ios/utils/Xcodeproj';
 import Server from '@expo/metro/metro/Server';
-import type MetroServer from '@expo/metro/metro/Server';
 import fs from 'fs';
 import path from 'path';
 
@@ -13,26 +12,24 @@ export interface ModuleGenerationArguments {
   metro: Server | null;
 }
 
-function findUpTSConfig(cwd: string): string | null {
-  const tsconfigPath = path.resolve(cwd, './tsconfig.json');
-  if (fs.existsSync(tsconfigPath)) {
-    return path.dirname(tsconfigPath);
+function findUpPackageJsonDirectory(
+  cwd: string,
+  directoryToPackage: Map<string, string>
+): string | undefined {
+  if (['.', path.sep].includes(cwd)) return undefined;
+  if (directoryToPackage.has(cwd)) return directoryToPackage.get(cwd);
+
+  const packageFound = fs.existsSync(path.resolve(cwd, './package.json'));
+  if (packageFound) {
+    directoryToPackage.set(cwd, cwd);
+    return cwd;
   }
-
-  const parent = path.dirname(cwd);
-  if (parent === cwd) return null;
-
-  return findUpTSConfig(parent);
-}
-
-function findUpTSProjectRootOrThrow(dir: string): string {
-  const tsProjectRoot = findUpTSConfig(dir);
-  if (!tsProjectRoot) {
-    throw new Error('Local modules watched dir needs to be inside a TS project with tsconfig.json');
+  const packageRoot = findUpPackageJsonDirectory(path.dirname(cwd), directoryToPackage);
+  if (packageRoot) {
+    directoryToPackage.set(cwd, packageRoot);
   }
-  return tsProjectRoot;
+  return packageRoot;
 }
-
 const nativeExtensions = ['.kt', '.swift'];
 
 function isValidLocalModuleFileName(fileName: string): boolean {
@@ -90,7 +87,8 @@ function trimExtension(fileName: string): string {
 function typesAndLocalModulePathsForFile(
   projectRoot: string,
   watchedDirRootAbolutePath: string,
-  absoluteFilePath: string
+  absoluteFilePath: string,
+  directoryToPackage: Map<string, string>
 ): {
   moduleTypesFilePath: string;
   viewTypesFilePath: string;
@@ -102,8 +100,14 @@ function typesAndLocalModulePathsForFile(
   const fileName = path.basename(absoluteFilePath);
   const moduleName = trimExtension(fileName);
 
-  const watchedDirTSProjectRoot = findUpTSProjectRootOrThrow(watchedDirRootAbolutePath);
-  const filePathRelativeToTSProjectRoot = path.relative(watchedDirTSProjectRoot, absoluteFilePath);
+  const watchedDirProjectRoot = findUpPackageJsonDirectory(
+    watchedDirRootAbolutePath,
+    directoryToPackage
+  );
+  if (!watchedDirProjectRoot) {
+    throw Error('Watched directory is not inside a project with package.json!');
+  }
+  const filePathRelativeToTSProjectRoot = path.relative(watchedDirProjectRoot, absoluteFilePath);
   const filePathRelativeToTSProjectRootWithoutExtension = trimExtension(
     filePathRelativeToTSProjectRoot
   );
@@ -231,10 +235,16 @@ function onSourceFileCreated(
   projectRoot: string,
   watchedDirRootAbolutePath: string,
   absoluteFilePath: string,
+  directoryToPackage: Map<string, string>,
   filesWatched?: Set<string>
 ): void {
   const { moduleTypesFilePath, viewTypesFilePath, viewExportPath, moduleExportPath, moduleName } =
-    typesAndLocalModulePathsForFile(projectRoot, watchedDirRootAbolutePath, absoluteFilePath);
+    typesAndLocalModulePathsForFile(
+      projectRoot,
+      watchedDirRootAbolutePath,
+      absoluteFilePath,
+      directoryToPackage
+    );
 
   if (filesWatched && fileWatchedWithAnyNativeExtension(absoluteFilePath, filesWatched)) {
     filesWatched.add(absoluteFilePath);
@@ -270,7 +280,8 @@ export default _default`
 
 async function generateMirrorDirectories(
   projectRoot: string,
-  filesWatched?: Set<string>
+  filesWatched?: Set<string>,
+  directoryToPackage: Map<string, string> = new Map<string, string>()
 ): Promise<void> {
   createFreshMirrorDirectories(projectRoot);
 
@@ -296,6 +307,7 @@ async function generateMirrorDirectories(
           projectRoot,
           watchedDirRootAbolutePath,
           absoluteDirentPath,
+          directoryToPackage,
           filesWatched
         );
       } else if (dirent.isDirectory()) {
@@ -336,6 +348,7 @@ export async function startModuleGenerationAsync({
 }: ModuleGenerationArguments): Promise<void> {
   const dotExpoDir = ensureDotExpoProjectDirectoryInitialized(projectRoot);
   const filesWatched = new Set<string>();
+  const directoryToPackage: Map<string, string> = new Map<string, string>();
 
   const isFileExcluded = (absolutePath: string) => {
     for (const glob of excludePathsGlobs(projectRoot)) {
@@ -359,7 +372,12 @@ export async function startModuleGenerationAsync({
 
   const onSourceFileRemoved = (absoluteFilePath: string, watchedDirRootAbolutePath: string) => {
     const { moduleTypesFilePath, moduleExportPath, viewExportPath, viewTypesFilePath } =
-      typesAndLocalModulePathsForFile(projectRoot, watchedDirRootAbolutePath, absoluteFilePath);
+      typesAndLocalModulePathsForFile(
+        projectRoot,
+        watchedDirRootAbolutePath,
+        absoluteFilePath,
+        directoryToPackage
+      );
 
     filesWatched.delete(absoluteFilePath);
     if (!fileWatchedWithAnyNativeExtension(absoluteFilePath, filesWatched)) {
@@ -395,7 +413,13 @@ export async function startModuleGenerationAsync({
       ) {
         const { filePath } = event;
         if (event.type === 'add') {
-          onSourceFileCreated(projectRoot, watchedDirAncestor, filePath, filesWatched);
+          onSourceFileCreated(
+            projectRoot,
+            watchedDirAncestor,
+            filePath,
+            directoryToPackage,
+            filesWatched
+          );
         } else if (event.type === 'delete') {
           onSourceFileRemoved(filePath, watchedDirAncestor);
         }
@@ -405,5 +429,5 @@ export async function startModuleGenerationAsync({
 
   watcher?.addListener('change', listener);
 
-  await generateMirrorDirectories(projectRoot, filesWatched);
+  await generateMirrorDirectories(projectRoot, filesWatched, directoryToPackage);
 }

packages/@expo/cli/src/start/server/metro/MetroBundlerDevServer.ts

@@ -1493,21 +1493,26 @@ export class MetroBundlerDevServer extends BundlerDevServer {
   }
 
   public async startTypeScriptServices(): Promise<any> {
-    const { projectRoot, metro } = this;
     const startTypescriptTypeGenerationPromise = startTypescriptTypeGenerationAsync({
       server: this.instance?.server,
       metro: this.metro,
       projectRoot: this.projectRoot,
     });
 
+    return startTypescriptTypeGenerationPromise;
+  }
+
+  private async inlineModulesSetup(): Promise<void> {
+    const { projectRoot, metro } = this;
     const { exp } = getConfig(this.projectRoot);
     if (exp.experiments?.inlineModules === true) {
-      return Promise.all([
-        startTypescriptTypeGenerationPromise,
-        startModuleGenerationAsync({ projectRoot, metro }),
-      ]);
+      return startModuleGenerationAsync({ projectRoot, metro });
     }
-    return startTypescriptTypeGenerationPromise;
+  }
+
+  protected async postStartAsync(options: BundlerStartOptions): Promise<void> {
+    await super.postStartAsync(options);
+    return this.inlineModulesSetup();
   }
 
   protected getConfigModuleIds(): string[] {