Add support for frontmatter

src/index.ts

@@ -15,11 +15,13 @@
 import { convergeOptions } from './options/converge';
 import type { PugPrinterOptions } from './printer';
 import { PugPrinter } from './printer';
+import parse from './utils/frontmatter/parse';
 
 /** Ast path stack entry. */
 interface AstPathStackEntry {
   content: string;
   tokens: Token[];
+  frontmatter: Frontmatter<string>;
 }
 
 /** The plugin object that is picked up by prettier. */
@@ -43,6 +45,10 @@
       parse(text, options) {
         logger.debug('[parsers:pug:parse]:', { text });
 
+        const parts = parse(text);
+        const frontmatter = parts.frontMatter;
+        text = parts.content;
+
         let trimmedAndAlignedContent: string = text.replace(/^\s*\n/, '');
         const contentIndentation: RegExpExecArray | null = /^\s*/.exec(
           trimmedAndAlignedContent,
@@ -64,7 +70,7 @@
         // logger.debug('[parsers:pug:parse]: tokens', JSON.stringify(tokens, undefined, 2));
         // const ast: AST = parse(tokens, {});
         // logger.debug('[parsers:pug:parse]: ast', JSON.stringify(ast, undefined, 2));
-        return { content, tokens };
+        return { content, tokens, frontmatter };
       },
 
       astFormat: 'pug-ast',
@@ -93,13 +99,21 @@
   },
   printers: {
     'pug-ast': {
-      // @ts-expect-error: Prettier allow it to be async if we don't do recursively print
-      async print(path, options: ParserOptions & PugParserOptions) {
-        const entry: AstPathStackEntry = path.stack[0]!;
-        const { content, tokens } = entry;
+      print(
+        path: AstPath,
+        options: ParserOptions & PugParserOptions,
+        print: (path: AstPath) => Doc,
+      ): Doc {
+        const entry: AstPathStackEntry = path.stack[0];
+        const { content, tokens, frontmatter } = entry;
         const pugOptions: PugPrinterOptions = convergeOptions(options);
-        const printer: PugPrinter = new PugPrinter(content, tokens, pugOptions);
-        const result: string = await printer.build();
+        const printer: PugPrinter = new PugPrinter(
+          content,
+          tokens,
+          pugOptions,
+          frontmatter,
+        );
+        const result: string = printer.build();
         logger.debug('[printers:pug-ast:print]:', result);
         return result;
       },

src/printer.ts

@@ -1,4 +1,3 @@
-import { types } from 'node:util';
 import type { BuiltInParserName, Options, RequiredOptions } from 'prettier';
 import { format } from 'prettier';
 import type PrettierAngularPlugin from 'prettier/plugins/angular';
@@ -231,7 +230,7 @@
   private readonly classLiteralToAttribute: string[] = [];
   private readonly classLiteralAfterAttributes: string[] = [];
 
   /**
    * Constructs a new pug printer.
    *
    * @param content The pug content string.
@@ -242,7 +241,9 @@
     private readonly content: string,
     private tokens: Token[],
     private readonly options: PugPrinterOptions,
+    private frontmatter: Frontmatter<string>,
   ) {
+    this.frontmatter = frontmatter;
     this.indentString = options.pugUseTabs
       ? '\t'
       : ' '.repeat(options.pugTabWidth);
@@ -390,7 +391,10 @@
       token = this.getNextToken();
     }
 
-    return results.join('');
+    const fm = await this.frontmatterFormat(this.frontmatter.value);
+    const formattedFrontmatter = this.frontmatter ? '---\n' + fm + '---\n' : '';
+
+    return formattedFrontmatter + results.join('');
   }
 
   private getNextToken(): Token | null {
@@ -478,6 +482,15 @@
     }
   }
 
+  private async frontmatterFormat(frontmatter: string): Promise<string> {
+    const options = {
+      parser: 'yaml',
+      collectionStyle: 'block',
+    };
+
+    return format(frontmatter, options);
+  }
+
   private async frameworkFormat(code: string): Promise<string> {
     const options: Options = {
       ...this.codeInterpolationOptions,

src/utils/frontmatter/constants.js

@@ -0,0 +1,3 @@
+/** @type {unique symbol} */
+export const FRONT_MATTER_MARK = Symbol.for("PRETTIER_IS_FRONT_MATTER");
+export const FRONT_MATTER_VISITOR_KEYS = [];

src/utils/frontmatter/embed.js

@@ -0,0 +1,47 @@
+import { doc, util } from 'prettier';
+// import inferParser from '../../utilities/infer-parser.js';
+import isFrontMatter from './is-front-matter.js';
+
+const SUPPORTED_EMBED_LANGUAGES = new Set(['yaml', 'toml']);
+
+const hardline = doc.builders.hardline;
+const markAsRoot = doc.builders.markAsRoot;
+const inferParser = util.inferParser;
+
+const isEmbedFrontMatter = ({ node } /* , options */) =>
+  isFrontMatter(node) && SUPPORTED_EMBED_LANGUAGES.has(node.language);
+
+async function printEmbedFrontMatter(textToDoc, print, path, options) {
+  const { node } = path;
+  const { language } = node;
+
+  if (!SUPPORTED_EMBED_LANGUAGES.has(language)) {
+    return;
+  }
+
+  const value = node.value.trim();
+
+  let doc;
+  if (value) {
+    const parser =
+      language === 'yaml' ? language : inferParser(options, { language });
+    if (!parser) {
+      return;
+    }
+
+    doc = value ? await textToDoc(value, { parser }) : '';
+  } else {
+    doc = value;
+  }
+
+  return markAsRoot([
+    node.startDelimiter,
+    node.explicitLanguage ?? '',
+    hardline,
+    doc,
+    doc ? hardline : '',
+    node.endDelimiter,
+  ]);
+}
+
+export { isEmbedFrontMatter, printEmbedFrontMatter };

src/utils/frontmatter/is-front-matter.js

@@ -0,0 +1,7 @@
+import { FRONT_MATTER_MARK } from './constants.js';
+
+function isFrontMatter(node) {
+  return Boolean(node?.[FRONT_MATTER_MARK]);
+}
+
+export default isFrontMatter;

src/utils/frontmatter/parse.js

@@ -0,0 +1,121 @@
+import replaceNonLineBreaksWithSpace from './replace-non-line-breaks-with-space.js';
+import { FRONT_MATTER_MARK } from './constants.js';
+
+const DELIMITER_LENGTH = 3;
+
+/**
+@typedef {{
+  index: number,
+  // 1-based line number
+  line: number,
+  // 0-based column number
+  column: number,
+}} Position
+@typedef {{
+  language: string,
+  explicitLanguage: string | null,
+  value: string,
+  startDelimiter: string,
+  endDelimiter: string,
+  raw: string,
+  start: Position,
+  end: Position,
+  [FRONT_MATTER_MARK]: true,
+}} FrontMatter
+*/
+
+/**
+@param {string} text
+@returns {FrontMatter | undefined}
+*/
+function getFrontMatter(text) {
+  const startDelimiter = text.slice(0, DELIMITER_LENGTH);
+
+  if (startDelimiter !== '---' && startDelimiter !== '+++') {
+    return;
+  }
+
+  const firstLineBreakIndex = text.indexOf('\n', DELIMITER_LENGTH);
+  if (firstLineBreakIndex === -1) {
+    return;
+  }
+
+  const explicitLanguage = text
+    .slice(DELIMITER_LENGTH, firstLineBreakIndex)
+    .trim();
+
+  let endDelimiterIndex = text.indexOf(
+    `\n${startDelimiter}`,
+    firstLineBreakIndex,
+  );
+
+  let language = explicitLanguage;
+  if (!language) {
+    language = startDelimiter === '+++' ? 'toml' : 'yaml';
+  }
+
+  if (
+    endDelimiterIndex === -1 &&
+    startDelimiter === '---' &&
+    language === 'yaml'
+  ) {
+    // In some markdown processors such as pandoc,
+    // "..." can be used as the end delimiter for YAML front-matter.
+    endDelimiterIndex = text.indexOf('\n...', firstLineBreakIndex);
+  }
+
+  if (endDelimiterIndex === -1) {
+    return;
+  }
+
+  const frontMatterEndIndex = endDelimiterIndex + 1 + DELIMITER_LENGTH;
+
+  const nextCharacter = text.charAt(frontMatterEndIndex + 1);
+  if (!/\s?/.test(nextCharacter)) {
+    return;
+  }
+
+  const raw = text.slice(0, frontMatterEndIndex);
+  /** @type {string[]} */
+  let lines;
+
+  return {
+    language,
+    explicitLanguage: explicitLanguage || null,
+    value: text.slice(firstLineBreakIndex + 1, endDelimiterIndex),
+    startDelimiter,
+    endDelimiter: raw.slice(-DELIMITER_LENGTH),
+    raw,
+    start: { line: 1, column: 0, index: 0 },
+    end: {
+      index: raw.length,
+      get line() {
+        lines ??= raw.split('\n');
+        return lines.length;
+      },
+      get column() {
+        lines ??= raw.split('\n');
+        return lines.at(-1).length;
+      },
+    },
+    [FRONT_MATTER_MARK]: true,
+  };
+}
+
+function parse(text) {
+  const frontMatter = getFrontMatter(text);
+
+  if (!frontMatter) {
+    return { content: text };
+  }
+
+  return {
+    frontMatter,
+    get content() {
+      const { raw } = frontMatter;
+      return replaceNonLineBreaksWithSpace(raw) + text.slice(raw.length);
+    },
+  };
+}
+
+export default parse;

src/utils/frontmatter/print.js

@@ -0,0 +1,5 @@
+function printFrontMatter({ node }) {
+  return node.raw;
+}
+
+export default printFrontMatter;

src/utils/frontmatter/replace-non-line-breaks-with-space.js

@@ -0,0 +1,19 @@
+// import * as assert from "#universal/assert";
+
+/**
+Replaces all characters in the input string except line breaks `\n` with a space.
+
+@param {string} string - The input string to process.
+@returns {string}
+*/
+function replaceNonLineBreaksWithSpace(string) {
+  const replaced = string.replaceAll(/[^\n]/g, ' ');
+
+  if (process.env.NODE_ENV !== 'production') {
+    // assert.equal(replaced.length, string.length);
+  }
+
+  return replaced;
+}
+
+export default replaceNonLineBreaksWithSpace;

tests/frontmatter/formatted.pug

@@ -0,0 +1,33 @@
+---
+name: YAML test
+tags:
+  - this
+  - squence
+  - should
+  - be
+  - indented
+lets:
+  have:
+    us:
+      some: nesting
+      and: some more
+    flow style not supported:
+      key: value
+      bar: baz
+    not even arrays:
+      - 1
+      - 2
+      - 3
+      - 4
+      - 5
+---
+doctype
+html
+  head
+    title This is a !{ name }!
+
+  body
+    h1 Hello world!
+    h2= name
+
+    #example

tests/frontmatter/frontmatter.test.ts

@@ -0,0 +1,9 @@
+import { compareFiles } from 'tests/common';
+import { describe, expect, it } from 'vitest';
+
+describe('Frontmatter', () => {
+  it('should format yaml frontmatter', async () => {
+    const { expected, actual } = await compareFiles(import.meta.url);
+    expect(actual).toBe(expected);
+  });
+});

tests/frontmatter/unformatted.pug

@@ -0,0 +1,27 @@
+---
+name: YAML test
+tags:
+- this
+- squence
+- should
+- be
+- indented
+lets:
+  have:
+    us:
+      some: nesting
+      and: some more
+    flow style not supported:
+      {key: value, bar: baz}
+    not even arrays: [1,2,3,4,5]
+---
+doctype
+html
+  head
+    title This is a !{name}!
+
+  body
+    h1 Hello world!
+    h2= name
+
+    div( id='example' )