Update prettier and post-process to fix single character closing tags.

Author: koculu

packages/ts-css/package.json

@@ -40,6 +40,6 @@
   },
   "dependencies": {
     "@purestack/ts-util": "workspace:^",
-    "prettier": "^3.8.1"
+    "prettier": "^3.9.10"
   }
 }

packages/ts-format/package.json

@@ -38,7 +38,7 @@
     "LICENSE"
   ],
   "dependencies": {
-    "prettier": "^3.8.1",
+    "prettier": "^3.9.10",
     "typescript-parser": "npm:typescript@6.0.3"
   },
   "scripts": {

packages/ts-format/src/html.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from 'vitest'
+import { normalizeClosingTagSpacing } from './html'
+import { formatSource } from './index'
+
+describe('closing tag formatting', () => {
+  it.each(['page.mdx', 'view.ts'])(
+    'keeps closing tags together in %s and remains stable on repeated formatting',
+    async (filePath) => {
+      const markup =
+        '<Flex><a href="/a-long-documentation-path/">Read the documentation</a><BtnLink href="/another-long-path/">Start building</BtnLink></Flex>'
+      const source = filePath.endsWith('.ts')
+        ? `const view = html\`${markup}\``
+        : markup
+      const options = { filePath, printWidth: 30 }
+      const result = await formatSource(source, options)
+      expect(result.diagnostics).toEqual([])
+      expect(result.code).toContain('</a>')
+      expect(result.code).toContain('</BtnLink>')
+      expect(result.code).not.toMatch(/<\/[\w:.-]+\s+>/)
+      expect((await formatSource(result.code, options)).code).toBe(result.code)
+    },
+  )
+
+  it('preserves whitespace between inline elements', async () => {
+    const source =
+      '<span>Before</span><a href="/a-long-documentation-path/">Link</a> <em>After</em>'
+    const result = await formatSource(source, { printWidth: 25 })
+    expect(result.diagnostics).toEqual([])
+    expect(result.code).toContain('Before</span><a')
+    expect(result.code).toMatch(/Link<\/a>\s+<em/)
+  })
+
+  it('leaves closing-tag examples in attributes, comments and raw text untouched', () => {
+    const source =
+      '<Panel example="</a\n>"><!-- </a\n> --><script type="text/plain">"</a\n>"</script><textarea></a\n></textarea><a>Link</a\r\n  ></Panel>'
+    expect(normalizeClosingTagSpacing(source)).toBe(
+      source.replace('Link</a\r\n  >', 'Link</a>'),
+    )
+  })
+
+  it('joins closing tags inside PascalCase components named like raw-text tags', () => {
+    const source =
+      '<Title><a>Link</a\n  ></Title\n><Style><em>Note</em\n></Style><title></a\n></title>'
+    expect(normalizeClosingTagSpacing(source)).toBe(
+      '<Title><a>Link</a></Title><Style><em>Note</em></Style><title></a\n></title>',
+    )
+  })
+})

packages/ts-format/src/html.ts

@@ -2,6 +2,24 @@ import htmlPlugin from 'prettier/plugins/html'
 import postcssPlugin from 'prettier/plugins/postcss'
 import prettier from 'prettier/standalone'
 
+const RAW_TEXT_TAG =
+  'script|style|textarea|title|xmp|iframe|noembed|noframes|plaintext'
+const TAG_BODY = String.raw`(?:"[^"]*"|'[^']*'|[^"'>])*>`
+
+/**
+ * Skips comments, raw text and opening tags; captures closing tags broken before `>`.
+ * Case-sensitive so PascalCase components such as `<Title>` are not raw text.
+ */
+const BROKEN_CLOSING_TAG = new RegExp(
+  [
+    String.raw`<!--[\s\S]*?-->`,
+    String.raw`<(${RAW_TEXT_TAG})\b${TAG_BODY}[\s\S]*?</\1\s*>`,
+    String.raw`<[A-Za-z]${TAG_BODY}`,
+    String.raw`(</[^\s>]+)\s*\n\s*>`,
+  ].join('|'),
+  'g',
+)
+
 export interface HtmlFormattingOptions {
   printWidth: number
   tabSize: number
@@ -12,14 +30,24 @@ export async function formatHtmlFragment(
   source: string,
   options: HtmlFormattingOptions,
 ) {
-  return prettier.format(source, {
+  const formatted = await prettier.format(source, {
     htmlWhitespaceSensitivity: 'css',
     parser: 'html',
     plugins: [htmlPlugin, postcssPlugin],
     printWidth: options.printWidth,
     tabWidth: options.tabSize,
     useTabs: options.useTabs,
   })
+  return normalizeClosingTagSpacing(formatted)
+}
+
+/** Keep closing tags readable without inserting whitespace into inline content. */
+export function normalizeClosingTagSpacing(source: string) {
+  return source.replace(
+    BROKEN_CLOSING_TAG,
+    (match, _rawTextTag: string, closingTag?: string) =>
+      closingTag ? `${closingTag}>` : match,
+  )
 }
 
 export function getLineIndent(line: string) {

packages/ts-html/package.json

@@ -40,6 +40,6 @@
   },
   "dependencies": {
     "@purestack/ts-util": "workspace:^",
-    "prettier": "^3.8.1"
+    "prettier": "^3.9.10"
   }
 }

yarn.lock

@@ -1060,15 +1060,15 @@ __metadata:
   resolution: "@purestack/ts-css@workspace:packages/ts-css"
   dependencies:
     "@purestack/ts-util": "workspace:^"
-    prettier: "npm:^3.8.1"
+    prettier: "npm:^3.9.10"
   languageName: unknown
   linkType: soft
 
 "@purestack/ts-format@workspace:^, @purestack/ts-format@workspace:packages/ts-format":
   version: 0.0.0-use.local
   resolution: "@purestack/ts-format@workspace:packages/ts-format"
   dependencies:
-    prettier: "npm:^3.8.1"
+    prettier: "npm:^3.9.10"
     typescript-parser: "npm:typescript@6.0.3"
   languageName: unknown
   linkType: soft
@@ -1089,7 +1089,7 @@ __metadata:
   resolution: "@purestack/ts-html@workspace:packages/ts-html"
   dependencies:
     "@purestack/ts-util": "workspace:^"
-    prettier: "npm:^3.8.1"
+    prettier: "npm:^3.9.10"
   languageName: unknown
   linkType: soft
 
@@ -4735,12 +4735,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^3.8.1":
-  version: 3.8.1
-  resolution: "prettier@npm:3.8.1"
+"prettier@npm:^3.9.10":
+  version: 3.9.10
+  resolution: "prettier@npm:3.9.10"
   bin:
     prettier: bin/prettier.cjs
-  checksum: 10c0/33169b594009e48f570471271be7eac7cdcf88a209eed39ac3b8d6d78984039bfa9132f82b7e6ba3b06711f3bfe0222a62a1bfb87c43f50c25a83df1b78a2c42
+  checksum: 10c0/0b3531593aa6fb36ac6baf629cb058bda472c59a6938774f931fe55283a07c62e6f56e621b043a82d8a3e21fc284c08c34f9e539fc70072635f79b7bae1a1067
   languageName: node
   linkType: hard