Add rendering logic for properties elements (#38)

* Add logic to render properties in documentation

* Add test coverage

* Use more compact inline rendering style

Author: mattt

src/lib/reference/render.ts

@@ -2,7 +2,14 @@
  * Apple Developer Reference documentation rendering functionality
  */
 
-import type { AppleDocJSON, ContentItem, IndexContentItem, TopicSection, Variant } from "./types"
+import type {
+  AppleDocJSON,
+  ContentItem,
+  IndexContentItem,
+  PropertyItem,
+  TopicSection,
+  Variant,
+} from "./types"
 
 interface RenderOptions {
   externalOrigin?: string
@@ -77,6 +84,16 @@ export async function renderFromJSON(
       )
     }
 
+    // Add properties (used by object/dictionary pages in data docs)
+    const propertiesSection = jsonData.primaryContentSections.find((s) => s.kind === "properties")
+    if (propertiesSection?.items) {
+      markdown += renderProperties(
+        propertiesSection.items,
+        jsonData.references,
+        options.externalOrigin,
+      )
+    }
+
     // Add content sections
     const contentSections = jsonData.primaryContentSections.filter((s) => s.kind === "content")
     for (const section of contentSections) {
@@ -242,6 +259,60 @@ function renderParameters(
   return markdown
 }
 
+/**
+ * Render properties section for data dictionary pages.
+ */
+function renderProperties(
+  properties: PropertyItem[],
+  references?: Record<string, ContentItem>,
+  externalOrigin?: string,
+): string {
+  if (properties.length === 0) return ""
+
+  let markdown = "## Properties\n\n"
+
+  for (const property of properties) {
+    if (!property.name) continue
+
+    const typeText = renderPropertyType(property.type, references, externalOrigin)
+    const requiredText = property.required === true ? "required" : "optional"
+    const metadata = [typeText, requiredText].filter(Boolean)
+    const headingSuffix = metadata.length > 0 ? ` *(${metadata.join(", ")})*` : ""
+    markdown += `### \`${property.name}\`${headingSuffix}\n\n`
+
+    if (property.content && Array.isArray(property.content)) {
+      markdown += `${renderContentArray(property.content, references, 0, externalOrigin)}`
+    }
+
+    const allowedValues = property.attributes?.find((a) => a.kind === "allowedValues")?.values
+    if (allowedValues && allowedValues.length > 0) {
+      const possibleValues = allowedValues.map((value) => `\`${value}\``).join(", ")
+      markdown += `Possible Values: ${possibleValues}\n\n`
+    }
+  }
+
+  return markdown
+}
+
+function renderPropertyType(
+  type: Array<{ text?: string; kind?: string; identifier?: string }> | undefined,
+  references?: Record<string, ContentItem>,
+  externalOrigin?: string,
+): string {
+  if (!type || type.length === 0) return ""
+
+  return type
+    .map((part) => {
+      if (part.kind === "typeIdentifier" && part.identifier && part.text) {
+        const url = convertIdentifierToURL(part.identifier, references, externalOrigin)
+        return url ? `[${part.text}](${url})` : part.text
+      }
+      return part.text || ""
+    })
+    .join("")
+    .trim()
+}
+
 /**
  * Render main content sections
  */

src/lib/reference/types.ts

@@ -21,6 +21,7 @@ export type {
   Parameter,
   Platform,
   PrimaryContentSection,
+  PropertyItem,
   SeeAlsoSection,
   SwiftInterfaceItem,
   SymbolVariant,

src/lib/types.ts

@@ -116,6 +116,25 @@ export interface PrimaryContentSection {
   content?: ContentItem[]
   declarations?: Declaration[]
   parameters?: Parameter[]
+  items?: PropertyItem[]
+}
+
+/**
+ * Represents a property item used in data dictionary pages.
+ */
+export interface PropertyItem {
+  name: string
+  required?: boolean
+  content?: ContentItem[]
+  type?: Array<{
+    text?: string
+    kind?: string
+    identifier?: string
+  }>
+  attributes?: Array<{
+    kind?: string
+    values?: string[]
+  }>
 }
 
 // ============================================================================

tests/render.test.ts

@@ -308,6 +308,55 @@ describe("Render Function", () => {
     })
   })
 
+  describe("Properties rendering", () => {
+    it("should render primaryContentSections with kind properties", async () => {
+      const data = {
+        metadata: { title: "Songs.Attributes" },
+        primaryContentSections: [
+          {
+            kind: "properties",
+            items: [
+              {
+                name: "audioVariants",
+                required: false,
+                type: [{ kind: "text", text: "[string]" }],
+                attributes: [
+                  {
+                    kind: "allowedValues",
+                    values: [
+                      "dolby-atmos",
+                      "dolby-audio",
+                      "hi-res-lossless",
+                      "lossless",
+                      "lossy-stereo",
+                    ],
+                  },
+                ],
+                content: [
+                  {
+                    type: "paragraph",
+                    inlineContent: [
+                      { type: "strong", inlineContent: [{ type: "text", text: "(Extended)" }] },
+                      { type: "text", text: " Indicates the specific audio variant for a song." },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      }
+
+      const result = await renderFromJSON(data as any, "https://test.com")
+      expect(result).toContain("## Properties")
+      expect(result).toContain("### `audioVariants` *([string], optional)*")
+      expect(result).toContain("**(Extended)** Indicates the specific audio variant for a song.")
+      expect(result).toContain(
+        "Possible Values: `dolby-atmos`, `dolby-audio`, `hi-res-lossless`, `lossless`, `lossy-stereo`",
+      )
+    })
+  })
+
   describe("Inline image rendering", () => {
     it("should render inline image with alt and URL from reference", async () => {
       const data = {