npm - @atlaspack/inspector-frontend - Versions diffs - 0.1.1 - Mend

@atlaspack/inspector-frontend 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (164) hide show

package/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Atlaspack Inspector</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="src/main.tsx" type="module"></script>
+  </body>
+</html>

package/jest.config.js ADDED Viewed

@@ -0,0 +1,16 @@
+const {createDefaultPreset} = require('ts-jest');
+const tsJestTransformCfg = createDefaultPreset().transform;
+/** @type {import("jest").Config} **/
+module.exports = {
+  testEnvironment: 'jsdom',
+  transform: {
+    ...tsJestTransformCfg,
+  },
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/src/test/stubCssModule.js',
+    '\\.module\\.css$': '<rootDir>/src/test/stubCssModule.js',
+  },
+  collectCoverageFrom: ['src/**/*.tsx'],
+};

package/package.json ADDED Viewed

@@ -0,0 +1,64 @@
+{
+  "name": "@atlaspack/inspector-frontend",
+  "version": "0.1.1",
+  "license": "MIT",
+  "authors": [
+    "Pedro Tacla Yamada"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "ATLASPACK_INSPECTOR_BACKEND_URL='http://localhost:3000' atlaspack serve --feature-flag cachePerformanceImprovements=true --cache-dir=.atlaspack-cache ./index.html",
+    "build:css-types": "rm -rf src/**/*.module.css.d.ts && tcm --namedExports ./src && prettier --write src/**/*.css.d.ts",
+    "lint": "oxlint",
+    "build": "yarn build:css-types && rm -rf .atlaspack-cache && rm -rf dist && ATLASPACK_INSPECTOR_BACKEND_URL='' atlaspack build --feature-flag cachePerformanceImprovements=false --cache-dir=.atlaspack-cache ./index.html",
+    "prepack": "yarn run build",
+    "test": "yarn test:unit",
+    "test:unit": "jest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@atlaskit/app-provider": "^2.2.1",
+    "@atlaskit/code": "^17.2.2",
+    "@atlaskit/css-reset": "^7.3.2",
+    "@atlaskit/heading": "^5.2.1",
+    "@atlaskit/logo": "^19.0.1",
+    "@atlaskit/navigation-system": "^0.170.0",
+    "@atlaskit/primitives": "^14.8.4",
+    "@atlaskit/tabs": "^18.1.2",
+    "@atlaspack/cli": "2.14.13",
+    "@atlaspack/core": "2.25.1",
+    "@atlaspack/graph": "3.5.23",
+    "@carrotsearch/foamtree": "^3.5.2",
+    "@tanstack/react-query": "^5.81.5",
+    "@tanstack/react-virtual": "^3.13.12",
+    "axios": "^1.9.0",
+    "graphology": "^0.26.0",
+    "graphology-layout": "^0.6.1",
+    "graphology-layout-forceatlas2": "^0.10.1",
+    "graphology-types": "^0.24.8",
+    "mobx": "^6.13.7",
+    "mobx-react-lite": "^4.1.0",
+    "path-browserify": "^1.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router": "^7.6.0",
+    "sigma": "^3.0.1"
+  },
+  "browserslist": "Chrome 75",
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "eslint-config-react-app": "^7.0.1",
+    "jest": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4",
+    "oxlint": "^1.2.0",
+    "ts-jest": "^29.4.0",
+    "typed-css-modules": "^0.9.1"
+  },
+  "type": "commonjs"
+}

package/src/APIError.test.ts ADDED Viewed

@@ -0,0 +1,72 @@
+import assert from 'assert';
+import {AxiosError} from 'axios';
+import {APIError} from './APIError';
+/**
+ * Helper to create a minimal AxiosError-like object for testing purposes.
+ */
+function createAxiosError(
+  method: string,
+  url: string,
+  status?: number,
+  statusText?: string,
+  data?: unknown,
+  cause?: Error,
+): AxiosError {
+  return {
+    name: 'AxiosError',
+    message: 'mock',
+    config: {method, url} as any,
+    response: status ? ({status, statusText, data} as any) : undefined,
+    cause,
+    isAxiosError: true,
+    toJSON() {
+      return {};
+    },
+  } as unknown as AxiosError;
+}
+describe('APIError', function () {
+  it('should create message including method, url, status, statusText and data', function () {
+    const axiosErr = createAxiosError(
+      'get',
+      '/api/test',
+      404,
+      'Not Found',
+      'Page not found',
+    );
+    const error = new APIError(axiosErr);
+    assert(
+      error.message.includes('GET /api/test 404 Not Found'),
+      'Expected message to include HTTP method, url, and status',
+    );
+    assert(
+      error.message.includes('Page not found'),
+      'Expected message to include response data',
+    );
+    assert(error instanceof Error);
+    assert(error instanceof APIError);
+  });
+  it('should include cause message when provided', function () {
+    const cause = new Error('connection closed');
+    const axiosErr = createAxiosError(
+      'post',
+      '/api/submit',
+      500,
+      'Internal Server Error',
+      undefined,
+      cause,
+    );
+    const error = new APIError(axiosErr);
+    assert(
+      error.message.includes('connection closed'),
+      'Expected error message to include cause',
+    );
+  });
+});

package/src/APIError.tsx ADDED Viewed

@@ -0,0 +1,29 @@
+import {AxiosError} from 'axios';
+/**
+ * A custom error class for HTTP errors.
+ */
+export class APIError extends Error {
+  constructor(err: AxiosError) {
+    const url = err.config?.url;
+    const method = err.config?.method;
+    const status = err.response?.status;
+    const statusText = err.response?.statusText;
+    const data = err.response?.data;
+    const cause = err.cause;
+    super(
+      `Failed to fetch: ${[
+        method?.toUpperCase(),
+        url,
+        status,
+        statusText,
+        cause?.message,
+        '\n',
+        JSON.stringify(data, null, 2),
+      ]
+        .filter(Boolean)
+        .join(' ')}`,
+    );
+  }
+}

package/src/AppRoutes.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+import {Routes, Route} from 'react-router';
+import {Suspense} from 'react';
+import {CacheValuePage} from './ui/app/cache/[key]/CacheValuePage';
+import {CacheKeysIndexPage} from './ui/app/cache/CacheKeysIndexPage';
+import {StatsPage} from './ui/app/StatsPage';
+import {FoamTreemapPage} from './ui/app/treemap/FoamTreemapPage';
+import {AppLayout} from './ui/AppLayout/AppLayout';
+import {CacheKeysPage} from './ui/app/cache/CacheKeysPage';
+import {CacheInvalidationPage} from './ui/app/cache-invalidation/CacheInvalidationPage';
+import {NotFoundPage} from './ui/not-found/NotFoundPage';
+import {ErrorBoundary} from './ui/util/ErrorBoundary';
+import {DefaultLoadingIndicator} from './ui/DefaultLoadingIndicator/DefaultLoadingIndicator';
+import {CacheInvalidationFilePage} from './ui/app/cache-invalidation/[fileId]/CacheInvalidationFilePage';
+/**
+ * All the routes in the atlaspack-inspector app.
+ */
+export default function AppRoutes() {
+  return (
+    <Suspense
+      fallback={
+        <DefaultLoadingIndicator message="Loading atlaspack-inspector..." />
+      }
+    >
+      <ErrorBoundary>
+        <Routes>
+          <Route path="/" element={<AppLayout />}>
+            <Route index element={<FoamTreemapPage />} />
+            <Route path="/app/cache-stats" element={<StatsPage />} />
+            <Route path="/app/cache" element={<CacheKeysPage />}>
+              <Route index element={<CacheKeysIndexPage />} />
+              <Route path="/app/cache/:key" element={<CacheValuePage />} />
+            </Route>
+            <Route
+              path="/app/cache-invalidation"
+              element={<CacheInvalidationPage />}
+            >
+              <Route index element={null} />
+              <Route
+                path="/app/cache-invalidation/:fileId"
+                element={<CacheInvalidationFilePage />}
+              />
+            </Route>
+            <Route path="/app/treemap" element={<FoamTreemapPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Route>
+        </Routes>
+      </ErrorBoundary>
+    </Suspense>
+  );
+}

package/src/hack-feature-flags.ts ADDED Viewed

@@ -0,0 +1,6 @@
+// @ts-expect-error
+window.__PLATFORM_FEATURE_FLAGS__ = {
+  booleanResolver() {
+    return true;
+  },
+};

package/src/main.tsx ADDED Viewed

@@ -0,0 +1,50 @@
+import './hack-feature-flags';
+import './ui/globals.css';
+import {createRoot} from 'react-dom/client';
+import {BrowserRouter} from 'react-router';
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryFunction,
+} from '@tanstack/react-query';
+import axios, {AxiosError} from 'axios';
+import AppRoutes from './AppRoutes';
+import {APIError} from './APIError';
+const defaultQueryFn: QueryFunction = async ({queryKey}) => {
+  const backendUrl = process.env.ATLASPACK_INSPECTOR_BACKEND_URL;
+  try {
+    const {data} = await axios.get(`${backendUrl}${queryKey[0]}`);
+    return data;
+  } catch (err) {
+    if (err instanceof AxiosError) {
+      throw new APIError(err);
+    }
+    throw err;
+  }
+};
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      queryFn: defaultQueryFn,
+    },
+  },
+});
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error('Failed to find the root element');
+}
+const root = createRoot(rootElement);
+root.render(
+  <QueryClientProvider client={queryClient}>
+    <BrowserRouter>
+      <AppRoutes />
+    </BrowserRouter>
+  </QueryClientProvider>,
+);

package/src/test/stubCssModule.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ module.exports = {};

package/src/ui/App.module.css ADDED Viewed

@@ -0,0 +1,122 @@
+.app {
+  display: flex;
+  height: 100vh;
+  width: 100vw;
+  color: var(--color);
+  background-color: var(--background-color);
+  --background-color: rgb(255, 255, 255);
+  --color: rgb(0, 0, 0);
+  --border-color: #b8b8b8;
+  --base-spacing: 4px;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+.sidebar {
+  height: 100vh;
+  overflow-y: scroll;
+  /* width: 300px; */
+  border-right: 1px solid #434343;
+  display: flex;
+  flex-direction: column;
+  /* flex: 0 0 300px; */
+}
+.sidebar h1 {
+  padding: calc(var(--base-spacing) / 2) var(--base-spacing);
+  border-bottom: 1px solid var(--border-color);
+}
+.sidebar ul {
+  list-style: none;
+  padding: 0px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+.sidebar .sidebarItem {
+  padding: var(--base-spacing);
+  white-space: nowrap;
+  border-bottom: 1px solid var(--border-color);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+}
+.sidebar .sidebarItem:hover {
+  background-color: var(--color);
+  color: var(--background-color);
+}
+.sidebar .sidebarItem a {
+  text-decoration: none;
+  color: inherit;
+  display: inline-block;
+  text-overflow: ellipsis;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.sidebarFilter {
+  display: flex;
+  gap: calc(var(--base-spacing) * 2);
+  border-bottom: 1px solid var(--border-color);
+  padding: calc(var(--base-spacing) * 2) var(--base-spacing);
+}
+.sidebarFilter select {
+  flex: 1;
+}
+table {
+  border-collapse: collapse;
+}
+table td {
+  border: solid 1px var(--border-color);
+  margin: 0;
+  padding: calc(var(--base-spacing) / 2) var(--base-spacing);
+}
+.content {
+  flex: 1;
+  display: flex;
+  width: calc(100% - 300px);
+  overflow-x: scroll;
+  flex-direction: column;
+  gap: calc(var(--base-spacing) * 2);
+  min-height: 100%;
+  /* padding: calc(var(--base-spacing) / 2) var(--base-spacing); */
+}
+.contentInner {
+  min-height: 100%;
+}
+.treemapTable tr {
+  border-bottom: solid 1px var(--ds-border);
+}
+.treemapTable tr:focus-within {
+  background-color: #dbe7ff !important;
+}
+.treemapTable tr:nth-child(even) {
+  background-color: #e7e7e79b;
+}
+.treemapTable tr:hover {
+  background-color: var(--ds-background-neutral-hovered);
+}

package/src/ui/App.module.css.d.ts ADDED Viewed

@@ -0,0 +1,8 @@
+export const __esModule: true;
+export const app: string;
+export const content: string;
+export const contentInner: string;
+export const sidebar: string;
+export const sidebarFilter: string;
+export const sidebarItem: string;
+export const treemapTable: string;

package/src/ui/AppLayout/AppLayout.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import '@atlaskit/css-reset';
+import {Root as PageLayoutRoot} from '@atlaskit/navigation-system/layout/root';
+import AppProvider from '@atlaskit/app-provider';
+import {Main} from '@atlaskit/navigation-system';
+import {Outlet} from 'react-router';
+import {useState} from 'react';
+import {TopNavigation} from './TopNavigation/TopNavigation';
+import {SidebarNavigation} from './SidebarNavigation/SidebarNavigation';
+export function AppLayout() {
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  return (
+    <AppProvider>
+      <PageLayoutRoot>
+        <TopNavigation setSidebarCollapsed={setSidebarCollapsed} />
+        {sidebarCollapsed ? null : <SidebarNavigation />}
+        <Main>
+          <Outlet />
+        </Main>
+      </PageLayoutRoot>
+    </AppProvider>
+  );
+}

package/src/ui/AppLayout/SidebarNavigation/LinkItem.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import {LinkMenuItem} from '@atlaskit/navigation-system';
+import {useCallback} from 'react';
+import {useNavigate} from 'react-router';
+interface LinkItemProps {
+  href: string;
+  children: React.ReactNode;
+  elemBefore: React.ReactNode;
+}
+export function LinkItem({href, children, elemBefore}: LinkItemProps) {
+  const navigate = useNavigate();
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      e.preventDefault();
+      navigate(href);
+    },
+    [href, navigate],
+  );
+  return (
+    <LinkMenuItem href={href} onClick={onClick} elemBefore={elemBefore}>
+      {children}
+    </LinkMenuItem>
+  );
+}

package/src/ui/AppLayout/SidebarNavigation/SidebarNavigation.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import '@atlaskit/css-reset';
+import {
+  SideNav,
+  SideNavContent,
+} from '@atlaskit/navigation-system/layout/side-nav';
+import {PanelSplitter} from '@atlaskit/navigation-system';
+import HomeIcon from '@atlaskit/icon/glyph/home';
+import CacheData from '@atlaskit/icon/glyph/component';
+import PageIcon from '@atlaskit/icon/glyph/page';
+import {LinkItem} from './LinkItem';
+export function SidebarNavigation() {
+  return (
+    <SideNav>
+      <SideNavContent>
+        <LinkItem elemBefore={<PageIcon label="Page" />} href="/">
+          Bundle size data
+        </LinkItem>
+        <LinkItem
+          elemBefore={<HomeIcon label="Home" />}
+          href="/app/cache-stats"
+        >
+          Cache statistics
+        </LinkItem>
+        <LinkItem
+          elemBefore={<CacheData label="Cache invalidation" />}
+          href="/app/cache-invalidation"
+        >
+          Cache invalidation
+        </LinkItem>
+        <LinkItem
+          elemBefore={<CacheData label="Cache data" />}
+          href="/app/cache"
+        >
+          Cache data
+        </LinkItem>
+      </SideNavContent>
+      <PanelSplitter label="Resize side nav" />
+    </SideNav>
+  );
+}

package/src/ui/AppLayout/TopNavigation/Logo.module.css ADDED Viewed

@@ -0,0 +1,12 @@
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.logoText {
+  color: var(--ds-text);
+  font-size: 20px;
+  font-weight: 600;
+  text-decoration: none !important;
+}

package/src/ui/AppLayout/TopNavigation/Logo.module.css.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const logo: string;
+export const logoText: string;

package/src/ui/AppLayout/TopNavigation/Logo.tsx ADDED Viewed

@@ -0,0 +1,11 @@
+import atlaspackBadge from './badge-light.png';
+import * as styles from './Logo.module.css';
+export function Logo() {
+  return (
+    <div className={styles.logo}>
+      <img src={atlaspackBadge} alt="Atlaspack" />
+      <span className={styles.logoText}>Atlaspack</span>
+    </div>
+  );
+}

package/src/ui/AppLayout/TopNavigation/TopNavigation.module.css ADDED Viewed

@@ -0,0 +1,14 @@
+.logoContainer {
+  max-height: 48px;
+  display: flex;
+  align-items: center;
+}
+.logoContainer img {
+  height: calc(48px - 24px);
+  width: auto;
+}
+.logoContainer a {
+  text-decoration: none !important;
+}

package/src/ui/AppLayout/TopNavigation/TopNavigation.module.css.d.ts ADDED Viewed

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

package/src/ui/AppLayout/TopNavigation/TopNavigation.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import '@atlaskit/css-reset';
+import {SideNavToggleButton} from '@atlaskit/navigation-system/layout/side-nav';
+import {TopNav, TopNavStart} from '@atlaskit/navigation-system/layout/top-nav';
+import {Link, useNavigate} from 'react-router';
+import {useCallback} from 'react';
+import {Logo} from './Logo';
+import * as styles from './TopNavigation.module.css';
+interface TopNavigationProps {
+  setSidebarCollapsed: (update: (collapsed: boolean) => boolean) => void;
+}
+export function TopNavigation({setSidebarCollapsed}: TopNavigationProps) {
+  const navigate = useNavigate();
+  const onClickLogo = useCallback(
+    (e: React.MouseEvent<HTMLAnchorElement>) => {
+      e.preventDefault();
+      navigate('/');
+    },
+    [navigate],
+  );
+  const onClickSideNavToggleButton = useCallback(() => {
+    setSidebarCollapsed((collapsed) => !collapsed);
+  }, [setSidebarCollapsed]);
+  return (
+    <TopNav>
+      <TopNavStart>
+        <SideNavToggleButton
+          defaultCollapsed={false}
+          expandLabel="Expand sidebar"
+          collapseLabel="Collapse sidebar"
+          onClick={onClickSideNavToggleButton}
+        />
+        <div className={styles.logoContainer}>
+          <Link to="/" onClick={onClickLogo}>
+            <Logo />
+          </Link>
+        </div>
+      </TopNavStart>
+    </TopNav>
+  );
+}

package/src/ui/AppLayout/TopNavigation/badge-light.png ADDED Viewed

Binary file

package/src/ui/AppLayout/TopNavigation/logo-light.png ADDED Viewed

Binary file

package/src/ui/DefaultLoadingIndicator/DefaultLoadingIndicator.module.css ADDED Viewed

@@ -0,0 +1,9 @@
+.defaultLoadingIndicator {
+  display: flex;
+  padding-top: 100px;
+  flex-direction: column;
+  gap: 32px;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}

package/src/ui/DefaultLoadingIndicator/DefaultLoadingIndicator.module.css.d.ts ADDED Viewed

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

package/src/ui/DefaultLoadingIndicator/DefaultLoadingIndicator.test.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import '@testing-library/jest-dom';
+import {render, screen} from '@testing-library/react';
+import {DefaultLoadingIndicator} from './DefaultLoadingIndicator';
+describe('DefaultLoadingIndicator', () => {
+  it('should render', () => {
+    render(<DefaultLoadingIndicator />);
+    expect(screen.getByText('Loading cache stats...')).toBeInTheDocument();
+  });
+  it('renders provided message', () => {
+    render(<DefaultLoadingIndicator message="Loading..." />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+});