fix(runtime): use proper expo-router entrypoint detection (#439)

* fix(runtime): use proper expo-router entrypoint detection * fix(runtime): use proper `index` file detection
expo · Jun 29, 2023 · aaeb70b · aaeb70b
1 parent 6afa175
commit aaeb70b
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 9 deletions.
diff --git a/runtime/src/App.tsx b/runtime/src/App.tsx
@@ -27,7 +27,7 @@ import * as Logger from './Logger';
 import * as Messaging from './Messaging';
 import * as Modules from './Modules';
 import EXDevLauncher from './NativeModules/EXDevLauncher';
-import { ExpoRouterApp } from './NativeModules/ExpoRouterEntry';
+import { ExpoRouterApp, isExpoRouterEntry } from './NativeModules/ExpoRouterEntry';
 import Linking from './NativeModules/Linking';
 import { captureRef as takeSnapshotAsync } from './NativeModules/ViewShot';
 import getDeviceIdAsync from './NativeModules/getDeviceIdAsync';
@@ -443,12 +443,14 @@ export default class App extends React.Component<object, State> {
         await Modules.flush({ changedPaths, changedUris: [rootModuleUri] });
       }
 
-      // Special handling for Expo Router projects
-      if (Modules.hasDependency('expo-router')) {
+      // Handle Expo Router root with a Snack compatible components
+      if (isExpoRouterEntry(Files.get(Files.entry())?.contents)) {
         const ctx = await Modules.load(createVirtualModulePath({ directory: 'module://app' }));
         Logger.info('Updating Expo Router root element');
         rootElement = React.createElement(ExpoRouterApp, { ctx });
-      } else {
+      }
+      // Handle normal default exports
+      else {
         const hasRootModuleUri = await Modules.has(rootModuleUri);
         if (!hasRootModuleUri) {
           const rootDefaultExport = (await Modules.load(rootModuleUri)).default;

diff --git a/runtime/src/Files.tsx b/runtime/src/Files.tsx
@@ -136,7 +136,7 @@ export const update = async ({ message }: { message: Message }) => {
 
 // Return the entrypoint path
 export const entry = () => {
-  const names = ['App.tsx', 'App.ts', 'App.js', 'app.js'];
+  const names = ['index.js', 'index.ts', 'index.tsx', 'App.tsx', 'App.ts', 'App.js', 'app.js'];
 
   for (const name of names) {
     if (files[name]) {

diff --git a/runtime/src/Modules.tsx b/runtime/src/Modules.tsx
@@ -120,10 +120,6 @@ export const updateProjectDependencies = async (newProjectDependencies: Dependen
   return changedDependencies.map(sanitizeModule);
 };
 
-export function hasDependency(name: string) {
-  return !!projectDependencies[name];
-}
-
 // SystemJS fetch pipeline
 const _get = (header: { [key: string]: string }, value: string) =>
   header?.hasOwnProperty(value) ? header[value] : null;

diff --git a/runtime/src/NativeModules/ExpoRouterEntry.tsx b/runtime/src/NativeModules/ExpoRouterEntry.tsx
@@ -16,3 +16,10 @@ export function ExpoRouterApp({ ctx }: ExpoRouterAppProps) {
     </Head.Provider>
   );
 }
+
+/**
+ * Helper method to detect entry points of Expo Router.
+ */
+export function isExpoRouterEntry(fileContent = '') {
+  return /import.*expo-router\/entry/i.test(fileContent.trim());
+}