From c55b5978fd75de251692959e6f400db1b1941648 Mon Sep 17 00:00:00 2001
From: evanbacon <bacon@expo.io>
Date: Wed, 21 Aug 2024 15:54:56 +0200
Subject: [PATCH 1/2] add env property

---
 src/data/AtlasFileSource.ts                   | 18 +++++---
 src/data/MetroGraphSource.ts                  |  9 ++--
 src/data/types.ts                             |  6 ++-
 webui/.env                                    |  1 +
 webui/src/app/(atlas)/[bundle].tsx            |  2 +-
 .../app/(atlas)/[bundle]/folders/[path].tsx   |  2 +-
 .../app/(atlas)/[bundle]/modules/[path].tsx   |  2 +-
 webui/src/app/--/bundles/index+api.ts         |  8 +++-
 webui/src/components/BundleSelectForm.tsx     | 14 ++++++-
 webui/src/ui/Tag.tsx                          | 41 +++++++++++++++----
 10 files changed, 75 insertions(+), 28 deletions(-)
 create mode 100644 webui/.env

diff --git a/src/data/AtlasFileSource.ts b/src/data/AtlasFileSource.ts
index e6d4ffb..45293be 100644
--- a/src/data/AtlasFileSource.ts
+++ b/src/data/AtlasFileSource.ts
@@ -39,14 +39,15 @@ export class AtlasFileSource implements AtlasSource {
  * This only reads the bundle name, and adds a line number as ID.
  */
 export async function listAtlasEntries(filePath: string) {
-  const bundlePattern = /^\["([^"]+)","([^"]+)","([^"]+)","([^"]+)"/;
+  const bundlePattern = /^\["([^"]+)","([^"]+)","([^"]+)","([^"]+)","([^"]+)"/;
   const entries: PartialAtlasBundle[] = [];
 
   await forEachJsonLines(filePath, (contents, line) => {
     // Skip the metadata line
     if (line === 1) return;
 
-    const [_, platform, projectRoot, sharedRoot, entryPoint] = contents.match(bundlePattern) ?? [];
+    const [_, platform, projectRoot, sharedRoot, entryPoint, environment] =
+      contents.match(bundlePattern) ?? [];
     if (platform && projectRoot && sharedRoot && entryPoint) {
       entries.push({
         id: String(line),
@@ -54,6 +55,7 @@ export async function listAtlasEntries(filePath: string) {
         projectRoot,
         sharedRoot,
         entryPoint,
+        environment: environment as any,
       });
     }
   });
@@ -72,10 +74,11 @@ export async function readAtlasEntry(filePath: string, id: number): Promise<Atla
     projectRoot: atlasEntry[1],
     sharedRoot: atlasEntry[2],
     entryPoint: atlasEntry[3],
-    runtimeModules: atlasEntry[4],
-    modules: new Map(atlasEntry[5].map((module: AtlasModule) => [module.absolutePath, module])),
-    transformOptions: atlasEntry[6],
-    serializeOptions: atlasEntry[7],
+    environment: atlasEntry[4],
+    runtimeModules: atlasEntry[5],
+    modules: new Map(atlasEntry[6].map((module: AtlasModule) => [module.absolutePath, module])),
+    transformOptions: atlasEntry[7],
+    serializeOptions: atlasEntry[8],
   };
 }
 
@@ -98,10 +101,13 @@ export function waitUntilAtlasFileReady() {
  */
 export function writeAtlasEntry(filePath: string, entry: AtlasBundle) {
   const line = [
+    // These must all be strings
     entry.platform,
     entry.projectRoot,
     entry.sharedRoot,
     entry.entryPoint,
+    entry.transformOptions?.customTransformOptions.environment ?? 'client',
+    // These can be more complex types
     entry.runtimeModules,
     Array.from(entry.modules.values()),
     entry.transformOptions,
diff --git a/src/data/MetroGraphSource.ts b/src/data/MetroGraphSource.ts
index b954468..8eeff27 100644
--- a/src/data/MetroGraphSource.ts
+++ b/src/data/MetroGraphSource.ts
@@ -67,6 +67,7 @@ export class MetroGraphSource implements AtlasSource {
       projectRoot: bundle.projectRoot,
       sharedRoot: bundle.sharedRoot,
       entryPoint: bundle.entryPoint,
+      environment: bundle.environment,
     }));
   }
 
@@ -104,11 +105,7 @@ export function convertGraph(options: ConvertGraphToAtlasOptions): AtlasBundle {
   const sharedRoot = getSharedRoot(options);
   const serializeOptions = convertSerializeOptions(options);
   const transformOptions = convertTransformOptions(options);
-  const platform =
-    transformOptions?.customTransformOptions?.environment === 'node'
-      ? 'server'
-      : transformOptions?.platform ?? 'unknown';
-
+  const platform = transformOptions?.platform ?? 'unknown';
   return {
     id: Buffer.from(`${path.relative(sharedRoot, options.entryPoint)}+${platform}`).toString(
       'base64url'
@@ -120,7 +117,7 @@ export function convertGraph(options: ConvertGraphToAtlasOptions): AtlasBundle {
     runtimeModules: options.preModules.map((module) => convertModule(options, module, sharedRoot)),
     modules: collectEntryPointModules(options, sharedRoot),
     serializeOptions,
-    transformOptions,
+    environment: transformOptions?.customTransformOptions?.environment ?? 'client',
   };
 }
 
diff --git a/src/data/types.ts b/src/data/types.ts
index 573b3ab..4c2d6fb 100644
--- a/src/data/types.ts
+++ b/src/data/types.ts
@@ -12,14 +12,16 @@ export interface AtlasSource {
 
 export type PartialAtlasBundle = Pick<
   AtlasBundle,
-  'id' | 'platform' | 'projectRoot' | 'sharedRoot' | 'entryPoint'
+  'id' | 'platform' | 'projectRoot' | 'sharedRoot' | 'entryPoint' | 'environment'
 >;
 
 export type AtlasBundle = {
   /** The unique reference or ID to this entry */
   id: string;
   /** The platform for which the bundle was created */
-  platform: 'android' | 'ios' | 'web' | 'server';
+  platform: 'android' | 'ios' | 'web';
+  /** Target bundling environment */
+  environment: 'client' | 'node' | 'react-server';
   /** The absolute path to the root of the project */
   projectRoot: string;
   /** The absolute path to the shared root of all imported modules */
diff --git a/webui/.env b/webui/.env
new file mode 100644
index 0000000..780f8a4
--- /dev/null
+++ b/webui/.env
@@ -0,0 +1 @@
+EXPO_USE_FAST_RESOLVER=1
\ No newline at end of file
diff --git a/webui/src/app/(atlas)/[bundle].tsx b/webui/src/app/(atlas)/[bundle].tsx
index 0e6e3c3..80d37ad 100644
--- a/webui/src/app/(atlas)/[bundle].tsx
+++ b/webui/src/app/(atlas)/[bundle].tsx
@@ -38,7 +38,7 @@ export default function BundlePage() {
         <LayoutTitle>
           <h1 className="text-lg font-bold mr-8">Bundle</h1>
           <PropertySummary>
-            <Tag variant={bundle.platform} />
+            <Tag variant={bundle.platform} environment={bundle.environment} />
             {!!modules.data && <span>{modules.data.bundle.moduleFiles} modules</span>}
             {!!modules.data && <span>{formatFileSize(modules.data.bundle.moduleSize)}</span>}
             {!!modules.data && modulesAreFiltered && (
diff --git a/webui/src/app/(atlas)/[bundle]/folders/[path].tsx b/webui/src/app/(atlas)/[bundle]/folders/[path].tsx
index 9da9ea3..80adaaf 100644
--- a/webui/src/app/(atlas)/[bundle]/folders/[path].tsx
+++ b/webui/src/app/(atlas)/[bundle]/folders/[path].tsx
@@ -37,7 +37,7 @@ export default function FolderPage() {
         <LayoutTitle>
           <BreadcrumbLinks bundle={bundle} path={relativePath!} />
           <PropertySummary>
-            <Tag variant={bundle.platform} />
+            <Tag variant={bundle.platform} environment={bundle.environment} />
             <span>folder</span>
             {!!modules.data?.filtered.moduleFiles && (
               <span>
diff --git a/webui/src/app/(atlas)/[bundle]/modules/[path].tsx b/webui/src/app/(atlas)/[bundle]/modules/[path].tsx
index 4003d9e..4a71661 100644
--- a/webui/src/app/(atlas)/[bundle]/modules/[path].tsx
+++ b/webui/src/app/(atlas)/[bundle]/modules/[path].tsx
@@ -29,7 +29,7 @@ export default function ModulePage() {
         <LayoutTitle>
           <BreadcrumbLinks bundle={bundle} path={relativePath!} />
           <PropertySummary>
-            <Tag variant={bundle.platform} />
+            <Tag variant={bundle.platform} environment={bundle.environment} />
             {!!module.data?.package && <span>{module.data.package}</span>}
             {!!module.data && <span>{getModuleType(module.data)}</span>}
             {!!module.data && <span>{formatFileSize(module.data.size)}</span>}
diff --git a/webui/src/app/--/bundles/index+api.ts b/webui/src/app/--/bundles/index+api.ts
index 78254b8..129d826 100644
--- a/webui/src/app/--/bundles/index+api.ts
+++ b/webui/src/app/--/bundles/index+api.ts
@@ -21,7 +21,11 @@ export async function GET() {
 }
 
 function sortBundlesByPlatform(a: PartialAtlasBundle, b: PartialAtlasBundle) {
-  if (a.platform === 'server') return 1;
-  if (b.platform === 'server') return -1;
+  if (isNonClient(a)) return 1;
+  if (isNonClient(b)) return -1;
   return 0;
 }
+
+function isNonClient(a: PartialAtlasBundle) {
+  return a.environment && a.environment !== 'client';
+}
diff --git a/webui/src/components/BundleSelectForm.tsx b/webui/src/components/BundleSelectForm.tsx
index 1a3159e..b17ca6b 100644
--- a/webui/src/components/BundleSelectForm.tsx
+++ b/webui/src/components/BundleSelectForm.tsx
@@ -17,7 +17,12 @@ export function BundleSelectForm() {
     <Select.Root value={bundle.id} onValueChange={(bundle) => router.setParams({ bundle })}>
       <Select.Trigger asChild>
         <Button variant="quaternary" size="sm">
-          <Tag variant={bundle.platform} size="xs" className="mr-2" />
+          <Tag
+            variant={bundle.platform}
+            environment={bundle.environment}
+            size="xs"
+            className="mr-2"
+          />
           <Select.Value placeholder="Select bundle to inspect" />
           <Select.Icon className="text-icon-default">
             <ChevronDownIcon size={16} className="m-1 mr-0 align-middle" />
@@ -39,7 +44,12 @@ export function BundleSelectForm() {
               <div key={item.id}>
                 <Select.Item value={item.id} asChild>
                   <Button variant="quaternary" size="sm" className="w-full !justify-start my-0.5">
-                    <Tag variant={item.platform} size="xs" className="mr-2" />
+                    <Tag
+                      variant={item.platform}
+                      environment={item.environment}
+                      size="xs"
+                      className="mr-2"
+                    />
                     <Select.ItemText>{relativeBundlePath(item, item.entryPoint)}</Select.ItemText>
                   </Button>
                 </Select.Item>
diff --git a/webui/src/ui/Tag.tsx b/webui/src/ui/Tag.tsx
index b539808..61dfd25 100644
--- a/webui/src/ui/Tag.tsx
+++ b/webui/src/ui/Tag.tsx
@@ -12,10 +12,15 @@ const tagVariants = cva(
         danger: 'bg-danger text-danger',
         // Platform-specific variants
         web: 'bg-palette-orange3 text-palette-orange11',
-        server: 'bg-palette-orange3 text-palette-orange11',
         ios: 'bg-palette-blue3 text-palette-blue11',
         android: 'bg-palette-green3 text-palette-green11',
       },
+      environment: {
+        // Platform-specific variants
+        node: 'bg-palette-orange3 text-palette-orange11',
+        client: 'bg-palette-blue3 text-palette-blue11',
+        'react-server': 'bg-palette-green3 text-palette-green11',
+      },
       size: {
         xs: 'px-3 py-1 text-3xs/4',
         sm: 'px-4 py-1 text-xs',
@@ -32,25 +37,47 @@ const tagVariants = cva(
   }
 );
 
-const platformChildren: Record<'android' | 'ios' | 'server' | 'web', string> = {
+const platformChildren: Record<'android' | 'ios' | 'web', string> = {
   android: 'Android',
   ios: 'iOS',
-  server: 'Server',
   web: 'Web',
 };
 
+const envChildren: Record<'client' | 'node' | 'react-server', string> = {
+  client: 'Client',
+  node: 'SSR',
+  'react-server': 'RSC',
+};
+
 type TagProps = ComponentProps<'span'> & VariantProps<typeof tagVariants>;
 
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size, children, ...props }, ref) => {
+  ({ className, variant, environment, size, children, ...props }, ref) => {
     if (variant && variant in platformChildren) {
       children = platformChildren[variant as keyof typeof platformChildren];
     }
 
+    const isDefaultEnvironment = !environment || environment === 'client';
+
     return (
-      <span className={tagVariants({ variant, size, className })} ref={ref} {...props}>
-        {children}
-      </span>
+      <>
+        {!isDefaultEnvironment && (
+          <span
+            className={tagVariants({ variant, environment, size, className })}
+            ref={ref}
+            {...props}
+          >
+            {envChildren[environment] || environment}
+          </span>
+        )}
+        <span
+          className={tagVariants({ variant, environment, size, className })}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </span>
+      </>
     );
   }
 );

From cea1b335ddcaa57dba13aefe79aa7a629fe49500 Mon Sep 17 00:00:00 2001
From: evanbacon <bacon@expo.io>
Date: Wed, 21 Aug 2024 15:56:29 +0200
Subject: [PATCH 2/2] Update Tag.tsx

---
 webui/src/ui/Tag.tsx | 24 ++++++------------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/webui/src/ui/Tag.tsx b/webui/src/ui/Tag.tsx
index 61dfd25..2eb7eb1 100644
--- a/webui/src/ui/Tag.tsx
+++ b/webui/src/ui/Tag.tsx
@@ -58,26 +58,14 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
     }
 
     const isDefaultEnvironment = !environment || environment === 'client';
+    if (!isDefaultEnvironment) {
+      children += ' × ' + envChildren[environment] || environment;
+    }
 
     return (
-      <>
-        {!isDefaultEnvironment && (
-          <span
-            className={tagVariants({ variant, environment, size, className })}
-            ref={ref}
-            {...props}
-          >
-            {envChildren[environment] || environment}
-          </span>
-        )}
-        <span
-          className={tagVariants({ variant, environment, size, className })}
-          ref={ref}
-          {...props}
-        >
-          {children}
-        </span>
-      </>
+      <span className={tagVariants({ variant, environment, size, className })} ref={ref} {...props}>
+        {children}
+      </span>
     );
   }
 );