cnpmweb/src/slugs/deps/index.tsx at 24fab4228a114bf3ad8117903daa42f0793aabc7 · cnpm/cnpmweb · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
'use client';
import type { TableColumnsType } from 'antd';
import { Card, Col, Row, Table } from 'antd';
import React from 'react';
import SizeContainer from '@/components/SizeContainer';
import Link from 'next/link';
import { PageProps } from '@/pages/package/[...slug]';

interface DepRecord {
  package: string;
  spec: string;
}

const columns: TableColumnsType<DepRecord> = [
  {
    title: '名称',
    dataIndex: 'package',
    render: (pkg: string, record: DepRecord) => {
      return (
        <Link href={`/package/${pkg}?version=${encodeURIComponent(record.spec)}`} target="_blank">
          {pkg}
        </Link>
      );
    },
  },
  {
    title: '版本范围',
    dataIndex: 'spec',
  },
];

export default function Deps({ manifest, version }: PageProps) {
  const depsInfo = React.useMemo(() => {
    const versionData = manifest.versions?.[version!];
    if (!versionData) return { dependencies: [], devDependencies: [], optionalDependencies: [], peerDependencies: [] };

    const deps = versionData.dependencies || {};
    const devDeps = versionData.devDependencies || {};
    const optionalDeps = versionData.optionalDependencies || {};
    const peerDeps = versionData.peerDependencies || {};

    return {
      dependencies: Object.entries(deps).map(([pkg, spec]) => ({
        package: pkg,
        spec,
      })),
      devDependencies: Object.entries(devDeps).map(([pkg, spec]) => ({
        package: pkg,
        spec,
      })),
      optionalDependencies: Object.entries(optionalDeps).map(([pkg, spec]) => ({
        package: pkg,
        spec,
      })),
      peerDependencies: Object.entries(peerDeps).map(([pkg, spec]) => ({
        package: pkg,
        spec,
      })),
    };
  }, [manifest, version]);

  const { dependencies, devDependencies, optionalDependencies, peerDependencies } = depsInfo;

  return (
    <SizeContainer maxWidth="90%">
      <Row gutter={[8, 8]}>
        <Col span={6}>
          <Card title={`Dependencies (${dependencies.length})`}>
            <Table
              dataSource={dependencies}
              rowKey={'package'}
              columns={columns}
              pagination={{ size: 'small', pageSize: 50 }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card title={`DevDependencies (${devDependencies.length})`}>
            <Table
              dataSource={devDependencies}
              columns={columns}
              rowKey={'package'}
              pagination={{ size: 'small', pageSize: 50 }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card title={`OptionalDependencies (${optionalDependencies.length})`}>
            <Table
              dataSource={optionalDependencies}
              columns={columns}
              rowKey={'package'}
              pagination={{ size: 'small', pageSize: 50 }}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card title={`PeerDependencies (${peerDependencies.length})`}>
            <Table
              dataSource={peerDependencies}
              columns={columns}
              rowKey={'package'}
              pagination={{ size: 'small', pageSize: 50 }}
            />
          </Card>
        </Col>
      </Row>
    </SizeContainer>
  );
}