feature: add preliminary support for dom components (#75)

* feature: add `dom` environment based on `web` + `customTransformOptions.dom` existence

* feature: add basic `dom` environment ui

* refactor(ui): replace globe with panel-top to emphasize "embedded webview"

packages/expo-atlas-ui/components/BundleTag.tsx

@@ -18,6 +18,7 @@ const bundleTagVariants = cva('', {
     } satisfies Record<AtlasBundle['platform'], string>,
     environment: {
       client: '',
+      dom: 'bg-palette-blue3',
       node: 'bg-palette-orange3',
       'react-server': 'bg-palette-orange3',
     } satisfies Record<AtlasBundle['environment'], string>,
@@ -72,6 +73,9 @@ export function BundleTag({ className, platform, environment, ...props }: Bundel
               <EnvironmentIcon environment="client" size={14} /> Client — Bundles that run on
               device.
             </li>
+            <li className="inline-flex items-center gap-1">
+              <EnvironmentIcon environment="dom" size={14} /> DOM — Webview embedded components.
+            </li>
             <li className="inline-flex items-center gap-1">
               <EnvironmentIcon environment="node" size={14} /> SSR — Bundles that only run on
               server.

packages/expo-atlas-ui/components/EnvironmentIcon.tsx

@@ -10,6 +10,7 @@ type EnvironmentIconProps = Omit<
 
 const iconsByEnvironment: Record<AtlasBundle['environment'], any> = {
   client: require('lucide-react/dist/esm/icons/tablet-smartphone').default,
+  dom: require('lucide-react/dist/esm/icons/panel-top').default,
   node: require('lucide-react/dist/esm/icons/hexagon').default,
   'react-server': require('lucide-react/dist/esm/icons/server').default,
 };

packages/expo-atlas-ui/components/EnvironmentName.tsx

@@ -8,6 +8,7 @@ type EnvironmentNameProps = PropsWithChildren<{
 
 export const environmentNames: Record<AtlasBundle['environment'], string> = {
   client: 'Client',
+  dom: 'DOM',
   node: 'SSR',
   'react-server': 'RSC',
 };

packages/expo-atlas/src/data/MetroGraphSource.ts

@@ -107,16 +107,17 @@ export function convertGraph(options: ConvertGraphToAtlasOptions): AtlasBundle {
   const environment = getEnvironment(options) ?? 'client';
   const serializeOptions = convertSerializeOptions(options);
   const transformOptions = convertTransformOptions(options);
+  const entryPoint = getEntryPoint(options, environment);
 
   return {
-    id: Buffer.from(
-      `${path.relative(sharedRoot, options.entryPoint)}+${platform}+${environment}`
-    ).toString('base64url'),
+    id: Buffer.from(`${path.relative(sharedRoot, entryPoint)}+${platform}+${environment}`).toString(
+      'base64url'
+    ),
     platform,
     environment,
     projectRoot: options.projectRoot,
     sharedRoot,
-    entryPoint: options.entryPoint,
+    entryPoint,
     runtimeModules: options.preModules.map((module) => convertModule(options, module, sharedRoot)),
     modules: collectEntryPointModules(options, sharedRoot),
     serializeOptions,
@@ -253,6 +254,15 @@ function moduleIsVirtual(module: MetroModule) {
 function getEnvironment(options: Pick<ConvertGraphToAtlasOptions, 'graph'>) {
   const environment = options.graph.transformOptions?.customTransformOptions?.environment;
 
+  // Check if this graph is related to a DOM component
+  // NOTE(cedric): this is early/alpha support and may change in the future
+  if (
+    options.graph.transformOptions.platform === 'web' &&
+    !!options.graph.transformOptions.customTransformOptions?.dom
+  ) {
+    return 'dom' as AtlasBundle['environment'];
+  }
+
   if (typeof environment === 'string') {
     return environment as AtlasBundle['environment'];
   }
@@ -270,3 +280,30 @@ function getPlatform(options: Pick<ConvertGraphToAtlasOptions, 'graph'>) {
 
   return null;
 }
+
+/**
+ * Determine if this graph is related to a DOM component, using the (custom) transform options.
+ * @remarks - This is preliminary support, and may change in the future
+ */
+function getEntryPoint(
+  options: ConvertGraphToAtlasOptions,
+  environment: AtlasBundle['environment'] = 'client'
+) {
+  if (environment === 'dom') {
+    console.log({
+      entryPoint: options.entryPoint,
+      dom: options.graph.transformOptions.customTransformOptions?.dom,
+      _result: path.join(
+        options.entryPoint,
+        options.graph.transformOptions.customTransformOptions!.dom as string
+      ),
+    });
+  }
+
+  return environment !== 'dom'
+    ? options.entryPoint
+    : path.join(
+        options.entryPoint,
+        options.graph.transformOptions.customTransformOptions!.dom as string
+      );
+}

packages/expo-atlas/src/data/types.ts

@@ -21,7 +21,7 @@ export type AtlasBundle = {
   /** The platform for which the bundle was created */
   platform: 'android' | 'ios' | 'web' | 'unknown';
   /** The environment this bundle is compiled for */
-  environment: 'client' | 'node' | 'react-server';
+  environment: 'client' | 'dom' | '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 */