feat: add esm change

Author: 43081j

app/composables/npm/usePackage.ts

@@ -99,6 +99,7 @@ export function transformPackument(
         deprecated: version.deprecated,
         tags: version.tags as string[],
         license: typeof versionLicense === 'string' ? versionLicense : undefined,
+        type: typeof version.type === 'string' ? version.type : undefined,
       }
     }
   }

app/pages/package-timeline/[[org]]/[packageName].vue

@@ -168,6 +168,29 @@ const licenseChanges = computed(() => {
   return changes
 })
 
+// Detect ESM support changes (package "type" field) between consecutive versions
+const esmChanges = computed(() => {
+  const changes = new Map<string, 'added' | 'removed'>()
+  const entries = timelineEntries.value
+
+  for (let i = 0; i < entries.length - 1; i++) {
+    const current = pkg.value?.versions[entries[i]!.version]
+    const previous = pkg.value?.versions[entries[i + 1]!.version]
+    if (!current || !previous) continue
+
+    const currentIsEsm = current.type === 'module'
+    const previousIsEsm = previous.type === 'module'
+
+    if (currentIsEsm && !previousIsEsm) {
+      changes.set(entries[i]!.version, 'added')
+    } else if (!currentIsEsm && previousIsEsm) {
+      changes.set(entries[i]!.version, 'removed')
+    }
+  }
+
+  return changes
+})
+
 const bytesFormatter = useBytesFormatter()
 
 useSeoMeta({
@@ -273,6 +296,33 @@ useSeoMeta({
               }}
             </p>
           </div>
+          <!-- ESM change -->
+          <div v-if="esmChanges.has(entry.version)" class="mb-4 -ms-6 ps-6 relative">
+            <span
+              class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border"
+              :class="
+                esmChanges.get(entry.version) === 'added'
+                  ? 'bg-green-500 border-green-600'
+                  : 'bg-amber-500 border-amber-600'
+              "
+            >
+              <span class="w-2.5 h-2.5 text-white i-lucide:package" aria-hidden="true" />
+            </span>
+            <p
+              class="text-sm"
+              :class="
+                esmChanges.get(entry.version) === 'added'
+                  ? 'text-green-700 dark:text-green-400'
+                  : 'text-amber-700 dark:text-amber-400'
+              "
+            >
+              {{
+                esmChanges.get(entry.version) === 'added'
+                  ? $t('package.timeline.esm_added')
+                  : $t('package.timeline.esm_removed')
+              }}
+            </p>
+          </div>
           <!-- Dot -->
           <span
             class="absolute -start-2 flex items-center justify-center w-4 h-4 rounded-full border border-border"

i18n/locales/en.json

@@ -427,7 +427,9 @@
       "size_decrease": "Install size decreased by {percent}% ({size})",
       "dep_increase": "{count} dependencies added",
       "dep_decrease": "{count} dependencies removed",
-      "license_change": "License changed from {from} to {to}"
+      "license_change": "License changed from {from} to {to}",
+      "esm_added": "Module type changed to ESM",
+      "esm_removed": "Module type changed from ESM to CJS"
     },
     "dependencies": {
       "title": "Dependency ({count}) | Dependencies ({count})",

i18n/schema.json

@@ -1287,6 +1287,12 @@
             },
             "license_change": {
               "type": "string"
+            },
+            "esm_added": {
+              "type": "string"
+            },
+            "esm_removed": {
+              "type": "string"
             }
           },
           "additionalProperties": false

shared/types/npm-registry.ts

@@ -48,6 +48,8 @@ export type SlimVersion = Pick<SlimPackumentVersion, 'version' | 'deprecated' |
   hasProvenance?: boolean
   trustLevel?: PublishTrustLevel
   license?: string
+  /** Package type field — "module" indicates ESM */
+  type?: string
 }
 
 /**