feat: exclude optional packages in the filters by default

Author: antfu

packages/node-modules-inspector/src/app/components/display/ModuleType.ts

@@ -3,7 +3,7 @@ import type { PropType } from 'vue'
 import { Tooltip as FloatingTooltip } from 'floating-vue'
 import { computed, defineComponent, h } from 'vue'
 import { settings } from '../../state/settings'
-import { getModuleType, MODULE_TYPES_COLOR_BADGE } from '../../utils/module-type'
+import { getModuleType, MODULE_TYPES_COLOR_BADGE, MODULE_TYPES_NAME } from '../../utils/module-type'
 
 // @unocss-include
 
@@ -64,7 +64,7 @@ export default defineComponent({
  MODULE_TYPES_COLOR_BADGE[type.value],
  props.badge ? 'w-11 flex-none text-center px1 rounded text-sm' : 'bg-transparent! w-auto!',
  ],
- }, type.value.toUpperCase()),
+ }, MODULE_TYPES_NAME[type.value]),
  popper: () => h('div', { class: 'text-sm' }, description.value),
  })
  }

packages/node-modules-inspector/src/app/components/panel/FiltersOptionExcludes.vue

@@ -43,6 +43,9 @@ import { filters } from '../../state/filters'
  <OptionItem title="Exclude Types Packages" description="Exclude TypeScript declaration packages">
  <OptionCheckbox v-model="filters.state.excludeDts" />
  </OptionItem>
+ <OptionItem title="Exclude Optional Packages" description="Exclude optional packages">
+ <OptionCheckbox v-model="filters.state.excludeOptional" />
+ </OptionItem>
  <OptionItem title="Exclude Private Packages" description="Exclude private workspace packages and their dependencies">
  <OptionCheckbox v-model="filters.state.excludePrivate" />
  </OptionItem>

packages/node-modules-inspector/src/app/pages/grid/[...grid].vue

@@ -4,6 +4,7 @@ import { useRoute } from '#app/composables/router'
 import SafeImage from '@/components/display/SafeImage.vue'
 import { computed } from 'vue'
 import { payloads } from '../../state/payload'
+import { getModuleType } from '../../utils/module-type'
 import { getAuthors, getPackageData, getRepository } from '../../utils/package-json'
 
 const params = useRoute().params as Record<string, string>
@@ -24,7 +25,7 @@ const groups = computed<Group[]>(() => {
  if (tab.value === 'module-type') {
  const map = new Map<string, PackageNode[]>()
  for (const pkg of payloads.filtered.packages) {
- const type = pkg.resolved.module
+ const type = getModuleType(pkg)
  if (!map.has(type))
  map.set(type, [])
  map.get(type)?.push(pkg)

packages/node-modules-inspector/src/app/state/filters.ts

@@ -45,6 +45,8 @@ export function filtersExcludePredicate(pkg: PackageNode) {
  return true
  if (state.excludeDts && pkg.resolved.module === 'dts')
  return true
+ if (state.excludeOptional && !pkg.filepath)
+ return true
  if (state.excludePrivate && pkg.private)
  return true
  if (state.excludes?.length) {

packages/node-modules-inspector/src/app/utils/module-type.ts

@@ -15,6 +15,15 @@ export const MODULE_TYPES_COLOR_BADGE = {
  unknown: 'badge-color-gray',
 }
 
+export const MODULE_TYPES_NAME = {
+ esm: 'ESM',
+ dual: 'DUAL',
+ cjs: 'CJS',
+ faux: 'FAUX',
+ dts: 'DTS',
+ unknown: '?',
+}
+
 export function getModuleType(node: PackageNode | PackageModuleType) {
  const type = typeof node === 'string' ? node : node.resolved.module
 

packages/node-modules-inspector/src/shared/filters.ts

@@ -12,6 +12,7 @@ export interface FilterOptions {
 
  excludes: null | string[]
  excludeDts: boolean
+ excludeOptional: boolean
  excludePrivate: boolean
  excludeWorkspace: boolean
 
@@ -45,6 +46,7 @@ export const FILTERS_SCHEMA: {
  // Excludes
  excludes: { type: Array, default: null, category: 'exclude' },
  excludeDts: { type: Boolean, default: true, category: 'exclude' },
+ excludeOptional: { type: Boolean, default: true, category: 'exclude' },
  excludePrivate: { type: Boolean, default: false, category: 'exclude' },
  excludeWorkspace: { type: Boolean, default: import.meta.env.BACKEND === 'webcontainer', category: 'exclude' },
 }