fix: separate class getters from methods in docs rendering (#1943)

Author: RYGRIT

server/utils/docs/render.ts

@@ -293,11 +293,32 @@ function renderClassMembers(def: NonNullable<DenoDocNode['classDef']>): string {
     lines.push(`</div>`)
   }
 
-  if (methods && methods.length > 0) {
+  const getters = methods?.filter(m => m.kind === 'getter') || []
+  const regularMethods = methods?.filter(m => m.kind !== 'getter') || []
+
+  if (getters.length > 0) {
+    lines.push(`<div class="docs-members">`)
+    lines.push(`<h4>Getters</h4>`)
+    lines.push(`<dl>`)
+    for (const getter of getters) {
+      const ret = formatType(getter.functionDef?.returnType) || 'unknown'
+      const staticStr = getter.isStatic ? 'static ' : ''
+      lines.push(
+        `<dt><code>${escapeHtml(staticStr)}get ${escapeHtml(getter.name)}: ${escapeHtml(ret)}</code></dt>`,
+      )
+      if (getter.jsDoc?.doc) {
+        lines.push(`<dd>${escapeHtml(getter.jsDoc.doc.split('\n')[0] ?? '')}</dd>`)
+      }
+    }
+    lines.push(`</dl>`)
+    lines.push(`</div>`)
+  }
+
+  if (regularMethods.length > 0) {
     lines.push(`<div class="docs-members">`)
     lines.push(`<h4>Methods</h4>`)
     lines.push(`<dl>`)
-    for (const method of methods) {
+    for (const method of regularMethods) {
       const params = method.functionDef?.params?.map(p => formatParam(p)).join(', ') || ''
       const ret = formatType(method.functionDef?.returnType) || 'void'
       const staticStr = method.isStatic ? 'static ' : ''

shared/types/deno-doc.ts

@@ -100,6 +100,7 @@ export interface DenoDocNode {
     }>
     methods?: Array<{
       name: string
+      kind?: string
       isStatic?: boolean
       functionDef?: {
         params?: FunctionParam[]

test/unit/server/utils/docs/render.spec.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it } from 'vitest'
+import { renderDocNodes } from '../../../../../server/utils/docs/render'
+import type { DenoDocNode } from '#shared/types/deno-doc'
+import type { MergedSymbol } from '../../../../../server/utils/docs/types'
+
+// =============================================================================
+// Issue #1943: class getters shown as methods
+// https://github.com/npmx-dev/npmx.dev/issues/1943
+// =============================================================================
+
+function createClassSymbol(classDef: DenoDocNode['classDef']): MergedSymbol {
+  const node: DenoDocNode = {
+    name: 'TestClass',
+    kind: 'class',
+    classDef,
+  }
+  return {
+    name: 'TestClass',
+    kind: 'class',
+    nodes: [node],
+  }
+}
+
+describe('issue #1943 - class getters separated from methods', () => {
+  it('renders getters under a "Getters" heading, not "Methods"', async () => {
+    const symbol = createClassSymbol({
+      methods: [
+        {
+          name: 'clientId',
+          kind: 'getter',
+          functionDef: {
+            returnType: { repr: 'string', kind: 'keyword', keyword: 'string' },
+          },
+        },
+      ],
+    })
+
+    const html = await renderDocNodes([symbol], new Map())
+
+    expect(html).toContain('<h4>Getters</h4>')
+    expect(html).toContain('get clientId')
+    expect(html).not.toContain('<h4>Methods</h4>')
+  })
+
+  it('renders regular methods under "Methods" heading', async () => {
+    const symbol = createClassSymbol({
+      methods: [
+        {
+          name: 'connect',
+          kind: 'method',
+          functionDef: {
+            params: [],
+            returnType: { repr: 'void', kind: 'keyword', keyword: 'void' },
+          },
+        },
+      ],
+    })
+
+    const html = await renderDocNodes([symbol], new Map())
+
+    expect(html).toContain('<h4>Methods</h4>')
+    expect(html).toContain('connect(')
+    expect(html).not.toContain('<h4>Getters</h4>')
+  })
+
+  it('renders both getters and methods in separate sections', async () => {
+    const symbol = createClassSymbol({
+      methods: [
+        {
+          name: 'clientId',
+          kind: 'getter',
+          functionDef: {
+            returnType: { repr: 'string', kind: 'keyword', keyword: 'string' },
+          },
+          jsDoc: { doc: 'The client ID' },
+        },
+        {
+          name: 'connect',
+          kind: 'method',
+          functionDef: {
+            params: [
+              {
+                kind: 'identifier',
+                name: 'url',
+                tsType: { repr: 'string', kind: 'keyword', keyword: 'string' },
+              },
+            ],
+            returnType: { repr: 'void', kind: 'keyword', keyword: 'void' },
+          },
+          jsDoc: { doc: 'Connect to server' },
+        },
+      ],
+    })
+
+    const html = await renderDocNodes([symbol], new Map())
+
+    // Both sections should exist
+    expect(html).toContain('<h4>Getters</h4>')
+    expect(html).toContain('<h4>Methods</h4>')
+
+    // Getter should use "get" prefix without parentheses
+    expect(html).toContain('get clientId')
+    expect(html).toContain('The client ID')
+
+    // Method should have parentheses
+    expect(html).toContain('connect(')
+    expect(html).toContain('Connect to server')
+
+    // Getters section should appear before Methods section
+    const gettersIndex = html.indexOf('<h4>Getters</h4>')
+    const methodsIndex = html.indexOf('<h4>Methods</h4>')
+    expect(gettersIndex).toBeLessThan(methodsIndex)
+  })
+
+  it('renders static getter correctly', async () => {
+    const symbol = createClassSymbol({
+      methods: [
+        {
+          name: 'instance',
+          kind: 'getter',
+          isStatic: true,
+          functionDef: {
+            returnType: { repr: 'TestClass', kind: 'typeRef', typeRef: { typeName: 'TestClass' } },
+          },
+        },
+      ],
+    })
+
+    const html = await renderDocNodes([symbol], new Map())
+
+    expect(html).toContain('static get instance')
+  })
+})