Skip to content

Commit

Permalink
feature(webui): add explanation of bundle platform and environment
Browse files Browse the repository at this point in the history
  • Loading branch information
byCedric committed Aug 29, 2024
1 parent b20ec48 commit 5e7a3bb
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 45 deletions.
15 changes: 9 additions & 6 deletions webui/src/app/_layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { HmrProvider } from '~/providers/hmr';
import { QueryProvider } from '~/providers/query';
import { ThemeProvider } from '~/providers/theme';
import { ToastProvider } from '~/ui/Toast';
import { TooltipProvider } from '~/ui/Tooltip';

// Import the Expo-required radix styles
import '@radix-ui/colors/green.css';
Expand Down Expand Up @@ -34,12 +35,14 @@ export default function RootLayout() {
return (
<QueryProvider>
<ThemeProvider>
<BundleProvider>
<ToastProvider />
<HmrProvider>
<Slot />
</HmrProvider>
</BundleProvider>
<TooltipProvider delayDuration={200}>
<BundleProvider>
<ToastProvider />
<HmrProvider>
<Slot />
</HmrProvider>
</BundleProvider>
</TooltipProvider>
</ThemeProvider>
</QueryProvider>
);
Expand Down
62 changes: 50 additions & 12 deletions webui/src/components/BundleTag.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { EnvironmentIcon } from '~/components/EnvironmentIcon';
import { EnvironmentName } from '~/components/EnvironmentName';
import { PlatformName } from '~/components/PlatformName';
import { Tag } from '~/ui/Tag';
import { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/Tooltip';
import type { AtlasBundle } from '~core/data/types';

const bundleTagVariants = cva('', {
Expand Down Expand Up @@ -34,17 +35,54 @@ type BundelTagProps = Omit<

export function BundleTag({ className, platform, environment, ...props }: BundelTagProps) {
return (
<Tag
className={bundleTagVariants({ platform, environment, className })}
variant="none"
{...props}
>
<PlatformName platform={platform!} className="inline-flex items-center gap-1.5">
<PlatformName platform={platform!} />
<span>×</span>
<EnvironmentName environment={environment!} />
<EnvironmentIcon environment={environment!} size={14} />
</PlatformName>
</Tag>
<Tooltip>
<TooltipTrigger>
<Tag
className={bundleTagVariants({ platform, environment, className })}
variant="none"
{...props}
>
<PlatformName platform={platform!} className="inline-flex items-center gap-1.5">
<PlatformName platform={platform!} />
<span>×</span>
<EnvironmentName environment={environment!} />
<EnvironmentIcon environment={environment!} size={14} />
</PlatformName>
</Tag>
</TooltipTrigger>
<TooltipContent>
<p>
Expo creates bundles for every platform containing only{' '}
<a
className="text-link hover:underline"
href="https://reactnative.dev/docs/platform-specific-code"
target="_blank"
>
platform-specific code
</a>
, like Android, iOS, and Web. Some platforms can also run in multiple environments.
</p>
<p className="my-2">
Atlas marks every bundle with both the platform and target environment for which the
bundle is built.
</p>
<p className="mt-2">
<ul className="list-disc">
<li className="inline-flex items-center gap-1">
<EnvironmentIcon environment="client" size={14} /> Client — Bundles that run on
device.
</li>
<li className="inline-flex items-center gap-1">
<EnvironmentIcon environment="node" size={14} /> SSR — Bundles that only run on
server.
</li>
<li className="inline-flex items-center gap-1">
<EnvironmentIcon environment="react-server" size={14} /> RSC — React server component
bundles.
</li>
</ul>
</p>
</TooltipContent>
</Tooltip>
);
}
52 changes: 25 additions & 27 deletions webui/src/components/FileSize.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// @ts-expect-error
import AsteriskIcon from 'lucide-react/dist/esm/icons/asterisk';

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/ui/Tooltip';
import { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/Tooltip';

type BundleFileSizeProps = {
/** The size of the files or bundle, in bytes */
Expand All @@ -12,32 +12,30 @@ export function FileSize(props: BundleFileSizeProps) {
return (
<div className="inline-flex flex-row items-start">
{formatByteSize(props.byteSize)}
<TooltipProvider delayDuration={0}>
<Tooltip>
<TooltipTrigger className="group">
<AsteriskIcon
className="hover:color-info group-data-[state=delayed-open]:color-info group-data-[state=instant-open]:color-info"
size={12}
/>
</TooltipTrigger>
<TooltipContent className="border-info text-quaternary shadow-md">
<p className="mb-2">
All file sizes are calculated based on the transpiled JavaScript byte size.
</p>
<p className="">
While these sizes might differ from actual bundle size when using{' '}
<a
className="text-link hover:underline"
href="https://github.com/facebook/hermes/blob/main/doc/Design.md"
target="_blank"
>
Hermes Bytecode (HBC)
</a>
, the relative proportions are still correct.
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<Tooltip>
<TooltipTrigger className="group">
<AsteriskIcon
className="hover:color-info group-data-[state=delayed-open]:color-info group-data-[state=instant-open]:color-info"
size={12}
/>
</TooltipTrigger>
<TooltipContent className="border-info text-quaternary shadow-md">
<p className="mb-2">
All file sizes are calculated based on the transpiled JavaScript byte size.
</p>
<p>
While these sizes might differ from actual bundle size when using{' '}
<a
className="text-link hover:underline"
href="https://github.com/facebook/hermes/blob/main/doc/Design.md"
target="_blank"
>
Hermes Bytecode (HBC)
</a>
, the relative proportions are still correct.
</p>
</TooltipContent>
</Tooltip>
</div>
);
}
Expand Down

0 comments on commit 5e7a3bb

Please sign in to comment.