@atlaspack/inspector 0.0.19-canary.3998

package/src/frontend/src/ui/app/treemap/ui/TreemapRenderer/controllers/useStableCallback.ts

@@ -0,0 +1,21 @@
+import {useCallback, useEffect, useRef} from 'react';
+
+/**
+ * Like `useCallback` but the callback never changes even if the fn captures change.
+ *
+ * @example
+ *
+ *     const onClick = useStableCallback(() => {
+ *       console.log(props.value);
+ *     });
+ *
+ */
+export function useStableCallback(fn: (...args: any[]) => void) {
+  const ref = useRef(fn);
+
+  useEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+
+  return useCallback((...args: any[]) => ref.current(...args), []);
+}

package/src/frontend/src/ui/app/treemap/ui/TreemapRenderer/useMouseMoveController.ts

@@ -0,0 +1,20 @@
+import {useEffect} from 'react';
+import {runInAction} from 'mobx';
+import {viewModel} from '../../../../model/ViewModel';
+
+/**
+ * Sync mouse state into viewModel
+ */
+export function useMouseMoveController() {
+  useEffect(() => {
+    const onMouseMove = (e: MouseEvent) => {
+      runInAction(() => {
+        viewModel.mouseState = {x: e.offsetX, y: e.offsetY};
+      });
+    };
+
+    window.addEventListener('mousemove', onMouseMove);
+
+    return () => window.removeEventListener('mousemove', onMouseMove);
+  }, []);
+}

package/src/frontend/src/ui/globals.css

@@ -0,0 +1,26 @@
+body,
+html {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+}
+
+nav {
+  display: initial !important;
+}
+
+strong {
+  font-weight: 600;
+}

package/src/frontend/src/ui/globals.css.d.ts

@@ -0,0 +1 @@
+export {};

package/src/frontend/src/ui/globals.d.ts

@@ -0,0 +1,9 @@
+declare module '*.png' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.module.css' {
+  const content: Record<string, string>;
+  export default content;
+}

package/src/frontend/src/ui/model/ViewModel.test.ts

@@ -0,0 +1,31 @@
+import {ViewModel} from './ViewModel';
+
+describe('ViewModel', () => {
+  describe('ViewModel::groupsById', () => {
+    it('should return a map of groups by id', () => {
+      const viewModel = new ViewModel();
+      viewModel.data = {
+        groups: [
+          {
+            id: '1',
+            type: 'bundle',
+            label: 'Bundle 1',
+            weight: 1,
+            groups: [],
+          },
+          {
+            id: '2',
+            type: 'bundle',
+            label: 'Bundle 2',
+            weight: 2,
+            groups: [],
+          },
+        ],
+      };
+
+      expect(viewModel.groupsById.size).toBe(2);
+      expect(viewModel.groupsById.get('1')?.label).toBe('Bundle 1');
+      expect(viewModel.groupsById.get('2')?.label).toBe('Bundle 2');
+    });
+  });
+});

package/src/frontend/src/ui/model/ViewModel.ts

@@ -0,0 +1,62 @@
+import {makeAutoObservable} from 'mobx';
+
+export class ViewModel {
+  data: BundleData | null = null;
+  focusedBundle: Group | null = null;
+  focusedGroup: Group | null = null;
+  relatedBundles: RelatedBundles | null = null;
+  hasDetails: boolean = false;
+  showLeftSidebar: boolean = true;
+  showRightSidebar: boolean = false;
+  tooltipState: TooltipState | null = null;
+  mouseState: {x: number; y: number} = {x: 0, y: 0};
+  bottomPanelHeight: number = 400;
+
+  get groupsById(): Map<string, Group> {
+    const groupsById = new Map<string, Group>();
+
+    function collectGroups(group: Group) {
+      groupsById.set(group.id, group);
+      for (const childGroup of group.groups ?? []) {
+        collectGroups(childGroup);
+      }
+    }
+
+    for (const group of this.data?.groups ?? []) {
+      collectGroups(group);
+    }
+
+    return groupsById;
+  }
+
+  constructor() {
+    makeAutoObservable(this);
+  }
+}
+
+export const viewModel: ViewModel = new ViewModel();
+
+export interface BundleData {
+  groups: Array<Group>;
+}
+
+export interface RelatedBundles {
+  childBundles: Array<{id: string; displayName: string; size: number}>;
+}
+
+export type Group = {
+  id: string;
+  type: 'bundle' | 'asset';
+  label: string;
+  weight: number;
+  groups?: Array<Group>;
+  /**
+   * If this is a bundle, then the size on disk is diff. than the sum of the assets
+   * due to minification.
+   */
+  assetTreeSize?: number;
+};
+
+export interface TooltipState {
+  group: Group;
+}

package/src/frontend/src/ui/not-found/NotFoundPage.module.css

@@ -0,0 +1,7 @@
+.notFoundPage {
+  display: flex;
+  padding-top: 100px;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}

package/src/frontend/src/ui/not-found/NotFoundPage.module.css.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const notFoundPage: string;
+

package/src/frontend/src/ui/not-found/NotFoundPage.tsx

@@ -0,0 +1,9 @@
+import * as styles from './NotFoundPage.module.css';
+
+export function NotFoundPage() {
+  return (
+    <div className={styles.notFoundPage}>
+      <h1>404: Page not found</h1>
+    </div>
+  );
+}

package/src/frontend/src/ui/types/Graph.tsx

@@ -0,0 +1,12 @@
+export interface Node<T = null> {
+  id: string;
+  nodeId: string;
+  path: string[] | null;
+  displayName: string;
+  level: number;
+  edges: string[];
+  extra: T;
+}
+export interface Graph<T = null> {
+  nodes: Node<T>[];
+}

package/src/frontend/src/ui/util/ErrorBoundary.module.css

@@ -0,0 +1,3 @@
+.errorMessage {
+  padding-top: 32px;
+}

package/src/frontend/src/ui/util/ErrorBoundary.module.css.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const errorMessage: string;
+

package/src/frontend/src/ui/util/ErrorBoundary.test.tsx

@@ -0,0 +1,65 @@
+import '../../hack-feature-flags';
+import '@testing-library/jest-dom';
+import {act, render, screen} from '@testing-library/react';
+import {ErrorBoundary} from './ErrorBoundary';
+import {makeAutoObservable, runInAction} from 'mobx';
+import {observer} from 'mobx-react-lite';
+
+describe('ErrorBoundary', () => {
+  beforeEach(() => {
+    jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render the main content when no error is thrown', () => {
+    render(
+      <ErrorBoundary>
+        <div>Hello</div>
+      </ErrorBoundary>,
+    );
+
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('should render the fallback component when an error is thrown', () => {
+    let state = makeAutoObservable({
+      shouldThrow: false,
+    });
+    let stopThrowing = false;
+    const Throws = observer(() => {
+      if (state.shouldThrow && !stopThrowing) {
+        throw new Error('test error');
+      }
+
+      return <div>Hello</div>;
+    });
+
+    const Sample = () => {
+      return (
+        <ErrorBoundary>
+          <Throws />
+        </ErrorBoundary>
+      );
+    };
+
+    render(<Sample />);
+    act(() => {
+      runInAction(() => {
+        state.shouldThrow = true;
+      });
+    });
+
+    expect(screen.getByText('test error')).toBeInTheDocument();
+
+    act(() => {
+      stopThrowing = true;
+      screen
+        .getByTestId('atlaspack-inspector-error-boundary-reset-error')
+        .click();
+    });
+
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+});

package/src/frontend/src/ui/util/ErrorBoundary.tsx

@@ -0,0 +1,75 @@
+import {CodeBlock} from '@atlaskit/code';
+import {Stack} from '@atlaskit/primitives';
+import Button from '@atlaskit/button/new';
+import {Component} from 'react';
+import * as styles from './ErrorBoundary.module.css';
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+  fallback?: (props: {error: Error; resetError: () => void}) => React.ReactNode;
+}
+
+function DefaultFallback({
+  error,
+  resetError,
+}: {
+  error: Error;
+  resetError: () => void;
+}) {
+  return (
+    <Stack
+      alignBlock="center"
+      alignInline="center"
+      space="space.300"
+      xcss={{
+        height: '100%',
+        width: '100%',
+      }}
+    >
+      <h1 className={styles.errorMessage}>
+        Error: <span>{error.message}</span>
+      </h1>
+      <CodeBlock text={error.stack ?? ''} />
+      <Button
+        appearance="primary"
+        onClick={resetError}
+        testId="atlaspack-inspector-error-boundary-reset-error"
+      >
+        Retry loading
+      </Button>
+    </Stack>
+  );
+}
+
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  {error: Error | null}
+> {
+  state = {
+    error: null as Error | null,
+  };
+
+  componentDidCatch(error: Error): void {
+    this.setState({error});
+  }
+
+  render() {
+    if (this.state.error) {
+      if (this.props.fallback == null) {
+        return (
+          <DefaultFallback
+            error={this.state.error}
+            resetError={() => this.setState({error: null})}
+          />
+        );
+      }
+
+      return this.props.fallback({
+        error: this.state.error,
+        resetError: () => this.setState({error: null}),
+      });
+    }
+
+    return this.props.children;
+  }
+}

package/src/frontend/src/ui/util/colorPalette.tsx

@@ -0,0 +1,122 @@
+export const colorPalette = {
+  Lime: [
+    '#E3FCEF',
+    '#ABF5D1',
+    '#79F2C0',
+    '#57D9A3',
+    '#36B37E',
+    '#00875A',
+    '#006644',
+    '#004E3A',
+    '#003D2C',
+    '#002A1F',
+  ],
+  Red: [
+    '#FFEBE6',
+    '#FFBDAD',
+    '#FF8F73',
+    '#FF7452',
+    '#FF5630',
+    '#DE350B',
+    '#BF2600',
+    '#A32100',
+    '#8A1C00',
+    '#6A1400',
+  ],
+  Orange: [
+    '#FFFAE6',
+    '#FFF0B3',
+    '#FFE380',
+    '#FFC400',
+    '#FFAB00',
+    '#FF991F',
+    '#FF8B00',
+    '#FF7000',
+    '#FF5C00',
+    '#FF4A00',
+  ],
+  Yellow: [
+    '#FFFAE6',
+    '#FFF0B3',
+    '#FFE380',
+    '#FFC400',
+    '#FFAB00',
+    '#FF991F',
+    '#FF8B00',
+    '#FF7000',
+    '#FF5C00',
+    '#FF4A00',
+  ],
+  Green: [
+    '#E3FCEF',
+    '#ABF5D1',
+    '#79F2C0',
+    '#57D9A3',
+    '#36B37E',
+    '#00875A',
+    '#006644',
+    '#004E3A',
+    '#003D2C',
+    '#002A1F',
+  ],
+  Teal: [
+    '#E6FCFF',
+    '#B3F5FF',
+    '#79E2F2',
+    '#00C7E6',
+    '#00B8D9',
+    '#00A3BF',
+    '#008DA6',
+    '#007C91',
+    '#006B7C',
+    '#005A68',
+  ],
+  Blue: [
+    '#DEEBFF',
+    '#B3D4FF',
+    '#4C9AFF',
+    '#2684FF',
+    '#0065FF',
+    '#0052CC',
+    '#0747A6',
+    '#053E85',
+    '#032F6B',
+    '#021F4B',
+  ],
+  Purple: [
+    '#EAE6FF',
+    '#C0B6F2',
+    '#998DD9',
+    '#8777D9',
+    '#6554C0',
+    '#5243AA',
+    '#403294',
+    '#352C63',
+    '#2B2451',
+    '#221C3F',
+  ],
+  Magenta: [
+    '#FFECF8',
+    '#FFB8D2',
+    '#FF8AB8',
+    '#F797D2',
+    '#E774BB',
+    '#DA62AC',
+    '#CD519D',
+    '#AE4787',
+    '#943D73',
+    '#50253F',
+  ],
+  Neutral: [
+    '#FAFBFC',
+    '#F4F5F7',
+    '#EBECF0',
+    '#DFE1E6',
+    '#C1C7D0',
+    '#B3BAC5',
+    '#A5ADBA',
+    '#8993A4',
+    '#7A869A',
+    '#6B778C',
+  ],
+};

package/src/frontend/src/ui/util/formatBytes.test.ts

@@ -0,0 +1,13 @@
+import {formatBytes} from './formatBytes';
+
+describe('formatBytes', () => {
+  it('should format bytes correctly', () => {
+    expect(formatBytes(0)).toBe('0 B');
+    expect(formatBytes(1024)).toBe('1.00 KB');
+    expect(formatBytes(1024 * 1024)).toBe('1.00 MB');
+    expect(formatBytes(1024 * 1024 * 1024)).toBe('1.00 GB');
+
+    // other examples
+    expect(formatBytes(1024 * 1024 * 2.55)).toBe('2.55 MB');
+  });
+});

package/src/frontend/src/ui/util/formatBytes.tsx

@@ -0,0 +1,9 @@
+/**
+ * Format a number of bytes into a human-readable string.
+ */
+export function formatBytes(bytes: number): string {
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === 0) return '0 B';
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return (bytes / Math.pow(1024, i)).toFixed(2) + ' ' + sizes[i];
+}

package/src/frontend/src/ui/util/getRandomDarkerColor.tsx

@@ -0,0 +1,31 @@
+import {colorPalette} from './colorPalette';
+
+/**
+ * Unused function.
+ *
+ * Was meant to color bundle nodes hierarchically.
+ *
+ * @deprecated
+ */
+export function getRandomDarkerColor(name: string): {
+  familyName: string;
+  family: string[];
+  shade: string;
+} {
+  const hash = name.split('').reduce((acc, char) => {
+    return acc + char.charCodeAt(0);
+  }, 0);
+  const randomIndex = hash % Object.keys(colorPalette).length;
+  const randomFamily = Object.keys(colorPalette)[
+    randomIndex
+  ] as keyof typeof colorPalette;
+  const darkerShades = randomFamily.slice(6);
+  const randomShade =
+    darkerShades[Math.floor(Math.random() * darkerShades.length)];
+
+  return {
+    familyName: randomFamily,
+    family: colorPalette[randomFamily],
+    shade: randomShade,
+  };
+}

package/src/frontend/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    "module": "commonjs" /* Specify what module code is generated. */,
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    "strict": true /* Enable all strict type-checking options. */,
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}