Skip to content

Commit edd7b68

Browse files
fengmk2claude
andcommitted
feat: display optionalDependencies in deps page
Add optionalDependencies support to the dependencies info page, displaying it alongside dependencies and devDependencies in a three-column layout. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 2937035 commit edd7b68

File tree

2 files changed

+20
-4
lines changed

2 files changed

+20
-4
lines changed

src/hooks/useManifest.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export interface NpmPackageVersion {
2626
_cnpmcore_publish_time: string;
2727
dependencies: Record<string, string>;
2828
devDependencies: Record<string, string>;
29+
optionalDependencies?: Record<string, string>;
2930
}
3031

3132
export type PackageManifest = {

src/slugs/deps/index.tsx

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,11 @@ const columns: TableColumnsType<DepRecord> = [
3232
export default function Deps({ manifest, version }: PageProps) {
3333
const depsInfo = React.useMemo(() => {
3434
const versionData = manifest.versions?.[version!];
35-
if (!versionData) return { dependencies: [], devDependencies: [] };
35+
if (!versionData) return { dependencies: [], devDependencies: [], optionalDependencies: [] };
3636

3737
const deps = versionData.dependencies || {};
3838
const devDeps = versionData.devDependencies || {};
39+
const optionalDeps = versionData.optionalDependencies || {};
3940

4041
return {
4142
dependencies: Object.entries(deps).map(([pkg, spec]) => ({
@@ -46,15 +47,19 @@ export default function Deps({ manifest, version }: PageProps) {
4647
package: pkg,
4748
spec,
4849
})),
50+
optionalDependencies: Object.entries(optionalDeps).map(([pkg, spec]) => ({
51+
package: pkg,
52+
spec,
53+
})),
4954
};
5055
}, [manifest, version]);
5156

52-
const { dependencies, devDependencies } = depsInfo;
57+
const { dependencies, devDependencies, optionalDependencies } = depsInfo;
5358

5459
return (
5560
<SizeContainer maxWidth="90%">
5661
<Row gutter={[8, 8]}>
57-
<Col span={12}>
62+
<Col span={8}>
5863
<Card title={`Dependencies (${dependencies.length})`}>
5964
<Table
6065
dataSource={dependencies}
@@ -64,7 +69,7 @@ export default function Deps({ manifest, version }: PageProps) {
6469
/>
6570
</Card>
6671
</Col>
67-
<Col span={12}>
72+
<Col span={8}>
6873
<Card title={`DevDependencies (${devDependencies.length})`}>
6974
<Table
7075
dataSource={devDependencies}
@@ -74,6 +79,16 @@ export default function Deps({ manifest, version }: PageProps) {
7479
/>
7580
</Card>
7681
</Col>
82+
<Col span={8}>
83+
<Card title={`OptionalDependencies (${optionalDependencies.length})`}>
84+
<Table
85+
dataSource={optionalDependencies}
86+
columns={columns}
87+
rowKey={'package'}
88+
pagination={{ size: 'small' }}
89+
/>
90+
</Card>
91+
</Col>
7792
</Row>
7893
</SizeContainer>
7994
);

0 commit comments

Comments
 (0)