Next.js 13 - App directory

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .next
 .vscode/.chrome
 coverage/
+static/media/

jest.setup.js

@@ -1 +1,8 @@
 import "@testing-library/jest-dom/extend-expect";
+
+// Override the react.cache method to avoid caching in tests
+jest.mock("react", () => {
+    const React = jest.requireActual("react");
+    React.cache = (fn) => fn;
+    return React;
+});

next.config.js

@@ -1,7 +1,17 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
     reactStrictMode: true,
-    compiler: {
-        emotion: true,
+    // Does not work with appDir
+    // https://beta.nextjs.org/docs/styling/css-in-js
+    // compiler: {
+    //     emotion: true,
+    // },
+    experimental: {
+        serverComponentsExternalPackages: [
+            "libnpmdiff",
+            "npm-package-arg",
+            "pacote",
+        ],
+        appDir: true,
     },
 };

package.json

@@ -45,6 +45,7 @@
         "@emotion/styled": "^11.10.6",
         "@vercel/analytics": "^0.1.11",
         "downshift": "^7.6.0",
+        "gitdiff-parser": "^0.3.1",
         "jest": "^29.5.0",
         "libnpmdiff": "^5.0.15",
         "next": "^13.3.0",

src/components/ErrorBox.tsx → src/app/[...parts]/_error/ErrorBox.tsx

@@ -1,12 +1,12 @@
-import { Code, forwardRef } from "@chakra-ui/react";
-import BorderBox, { BorderBoxProps } from "./theme/BorderBox";
+import { Code, forwardRef, VStack } from "@chakra-ui/react";
+import BorderBox, { BorderBoxProps } from "^/components/BorderBox";
 
 export interface ErrorBoxProps extends BorderBoxProps {}
 
 const ErrorBox = forwardRef<ErrorBoxProps, typeof BorderBox>((props, ref) => {
     return (
         <BorderBox
-            as={Code}
+            as={VStack}
             backgroundColor="red.200"
             _dark={{
                 backgroundColor: "red.700",

src/app/[...parts]/_page/BundlephobiaDiff.tsx

@@ -0,0 +1,97 @@
+import bundlephobia from "^/lib/api/bundlephobia";
+import TIMED_OUT from "^/lib/api/TimedOut";
+import { Bundlephobia } from "^/lib/Services";
+import SimplePackageSpec from "^/lib/SimplePackageSpec";
+import measuredPromise from "^/lib/utils/measuredPromise";
+import BundlephobiaFlags, {
+    BundlephobiaFlagsSkeleton,
+} from "./DiffIntro/BundlePhobiaFlags";
+import SizeComparison, { SizeComparisonSkeleton } from "./SizeComparison";
+
+export interface BundlephobiaDiffProps {
+    a: SimplePackageSpec;
+    b: SimplePackageSpec;
+    specs: [string, string];
+}
+
+const { name } = Bundlephobia;
+
+const BundlephobiaDiff = async ({ specs, a, b }: BundlephobiaDiffProps) => {
+    const { result, time } = await measuredPromise(bundlephobia(specs));
+
+    if (result == null) {
+        console.warn(`${name} result is null`, { specs });
+        return null;
+    }
+
+    if (result === TIMED_OUT) {
+        console.warn(`${name} timed out`, { specs });
+        return null;
+    }
+
+    console.log(name, { specs, time });
+
+    return (
+        <SizeComparison
+            serviceName={name}
+            flags={<BundlephobiaFlags data={result} />}
+            a={a}
+            b={b}
+            sizeRows={[
+                {
+                    name: "Size",
+                    a: {
+                        bytes: result.a.size,
+                    },
+                    b: {
+                        bytes: result.b.size,
+                    },
+                },
+                {
+                    name: "Gzip",
+                    a: {
+                        bytes: result.a.gzip,
+                    },
+                    b: {
+                        bytes: result.b.gzip,
+                    },
+                },
+                {
+                    name: "Dependencies",
+                    a: {
+                        count: result.a.dependencyCount,
+                    },
+                    b: {
+                        count: result.b.dependencyCount,
+                    },
+                },
+            ]}
+        />
+    );
+};
+
+export default BundlephobiaDiff;
+
+export const BundlephobiaDiffSkeleton = () => (
+    <SizeComparisonSkeleton
+        serviceName={name}
+        flags={<BundlephobiaFlagsSkeleton />}
+        sizeRows={[
+            {
+                name: "Size",
+                a: 42,
+                b: 84,
+            },
+            {
+                name: "Gzip",
+                a: 42,
+                b: 84,
+            },
+            {
+                name: "Dependencies",
+                a: 16,
+                b: 32,
+            },
+        ]}
+    />
+);

src/components/DiffIntro/BundlePhobiaFlags/BundlePhobiaFlags.tsx → src/app/[...parts]/_page/DiffIntro/BundlePhobiaFlags/BundlePhobiaFlags.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { Code, forwardRef, HStack, StackProps, Text } from "@chakra-ui/react";
 import { ReactNode } from "react";
 import {

src/app/[...parts]/_page/DiffIntro/BundlePhobiaFlags/BundlePhobiaFlagsSkeleton.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { HStack } from "@chakra-ui/react";
+import { FlagSkeleton } from "./Flag";
+
+const BundlephobiaFlagsSkeleton = () => (
+    <HStack>
+        <FlagSkeleton />
+        <FlagSkeleton />
+    </HStack>
+);
+
+export default BundlephobiaFlagsSkeleton;

src/app/[...parts]/_page/DiffIntro/BundlePhobiaFlags/Flag.tsx

@@ -0,0 +1,55 @@
+import {
+    forwardRef,
+    Skeleton,
+    Tag,
+    TagLabel,
+    TagLeftIcon,
+    TagProps,
+} from "@chakra-ui/react";
+import { ElementType, ReactNode } from "react";
+import Tooltip from "^/components/Tooltip";
+import TreeshakeIcon from "./assets/TreeshakeIcon";
+
+interface FlagProps extends TagProps {
+    icon: ElementType;
+    label: string;
+    tooltip?: ReactNode;
+    colorScheme?: undefined | "green" | "red";
+}
+
+const Flag = forwardRef<FlagProps, "div">(
+    ({ label, icon, tooltip, colorScheme, ...props }, ref) => {
+        const tag = (
+            <Tag
+                colorScheme={colorScheme}
+                cursor="help"
+                margin="10px 0"
+                {...props}
+                ref={ref}
+            >
+                <TagLeftIcon boxSize="16px" as={icon} fill="currentColor" />
+                <TagLabel>{label}</TagLabel>
+            </Tag>
+        );
+
+        if (tooltip == null) {
+            return tag;
+        }
+
+        return (
+            <Tooltip
+                label={tooltip}
+                closeOnClick={false}
+                shouldWrapChildren={true}
+            >
+                {tag}
+            </Tooltip>
+        );
+    },
+);
+
+export default Flag;
+
+export const FlagSkeleton = () => (
+    <Skeleton margin="10px 0" width="130px" height="24px" />
+);

src/app/[...parts]/_page/DiffIntro/BundlePhobiaFlags/index.ts

@@ -0,0 +1,5 @@
+import BundlephobiaFlags, { BundlephobiaFlagsProps } from "./BundlePhobiaFlags";
+import BundlephobiaFlagsSkeleton from "./BundlePhobiaFlagsSkeleton";
+
+export default BundlephobiaFlags;
+export { BundlephobiaFlagsSkeleton, type BundlephobiaFlagsProps };

src/components/DiffIntro/Command.tsx → src/app/[...parts]/_page/DiffIntro/Command.tsx

@@ -1,13 +1,13 @@
 import { Code } from "@chakra-ui/react";
 import { forwardRef } from "@chakra-ui/system";
-import DiffOptions from "^/lib/DiffOptions";
+import { NpmDiffOptions } from "^/lib/npmDiff";
 
 export interface CommandProps {
     aName: string;
     aVersion: string;
     bName: string;
     bVersion: string;
-    options: DiffOptions;
+    options: NpmDiffOptions;
 }
 
 function toKebabCase(input: string): string {

src/app/[...parts]/_page/DiffIntro/DiffIntro.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import {
+    Box,
+    Code,
+    Flex,
+    FlexProps,
+    forwardRef,
+    Heading,
+    Text,
+} from "@chakra-ui/react";
+import { ReactNode } from "react";
+import { NpmDiffOptions } from "^/lib/npmDiff";
+import SimplePackageSpec from "^/lib/SimplePackageSpec";
+import contentVisibility from "^/lib/utils/contentVisibility";
+import Halfs from "./Halfs";
+import Options from "./Options";
+import SpecBox from "./SpecBox";
+
+export interface DiffIntroProps extends FlexProps {
+    a: SimplePackageSpec;
+    b: SimplePackageSpec;
+    services: ReactNode;
+    options: NpmDiffOptions;
+}
+
+const DiffIntro = forwardRef<DiffIntroProps, "h2">(
+    ({ a, b, services, options, ...props }, ref) => {
+        if (a.name == null) {
+            a.name = "ERROR";
+        }
+        if (b.name == null) {
+            b.name = "ERROR";
+        }
+
+        return (
+            <Flex
+                direction="column"
+                alignItems="center"
+                css={{
+                    label: "DiffIntro",
+                    ...contentVisibility("700px"),
+                }}
+                {...props}
+                ref={ref}
+            >
+                <Heading
+                    as="h2"
+                    size="sm"
+                    width="100%"
+                    textAlign="center"
+                    marginBottom="1.5em"
+                >
+                    <Text>Comparing </Text>
+                    <Halfs
+                        left={<SpecBox pkg={a} />}
+                        center={
+                            <Box>
+                                {/* Center column */}
+                                <Code>...</Code>
+                            </Box>
+                        }
+                        right={<SpecBox pkg={b} />}
+                    />
+                </Heading>
+                {services}
+                <Heading size="l">npm diff</Heading>
+                <Options options={options} />
+                {/* <Command
+                    aName={aName}
+                    aVersion={aVersion}
+                    bName={bName}
+                    bVersion={bVersion}
+                    options={options}
+                /> */}
+            </Flex>
+        );
+    },
+);
+
+export default DiffIntro;

src/components/DiffIntro/Halfs.tsx → src/app/[...parts]/_page/DiffIntro/Halfs.tsx

@@ -1,14 +1,15 @@
-import { Flex } from "@chakra-ui/react";
+import { Flex, FlexProps } from "@chakra-ui/react";
 import { forwardRef } from "@chakra-ui/system";
 import { ReactNode } from "react";
 
-interface ComparisonViewProps {
+export interface HalfsProps
+    extends Omit<FlexProps, "children" | "left" | "right"> {
     left: ReactNode;
     center?: ReactNode;
     right: ReactNode;
 }
 
-const Halfs = forwardRef<ComparisonViewProps, typeof Flex>(
+const Halfs = forwardRef<HalfsProps, typeof Flex>(
     ({ left, center, right, ...props }, ref) => (
         <Flex {...props} ref={ref}>
             <Flex flex="1 0 0px" justifyContent="flex-end">

src/components/DiffIntro/Options.tsx → src/app/[...parts]/_page/DiffIntro/Options.tsx

@@ -1,10 +1,10 @@
 import { Code, Heading, Text } from "@chakra-ui/react";
 import { forwardRef } from "@chakra-ui/system";
-import { BorderBox } from "^/components/theme";
-import DiffOptions from "^/lib/DiffOptions";
+import BorderBox from "^/components/BorderBox";
+import { NpmDiffOptions } from "^/lib/npmDiff";
 
 interface OptionsProps {
-    options: DiffOptions;
+    options: NpmDiffOptions;
 }
 
 const Options = forwardRef<OptionsProps, typeof BorderBox>(