green: Use gray-matter to handle the frontmatter

Author: Jeroen Langeveld

package.json

@@ -62,7 +62,8 @@
     "tsconfig.json"
   ],
   "dependencies": {
-    "pug-lexer": "^5.0.1"
+    "gray-matter": "^4.0.3",
+    "pug-lexer": "^5.0.0"
   },
   "devDependencies": {
     "@eslint/compat": "1.4.1",

pnpm-lock.yaml

@@ -1,3 +1,4 @@
+import matter = require('gray-matter');
 import type {
   Parser,
   ParserOptions,
@@ -20,6 +21,7 @@ import { PugPrinter } from './printer';
 interface AstPathStackEntry {
   content: string;
   tokens: Token[];
+  frontmatter: matter.GrayMatterFile<string>;
 }
 
 /** The plugin object that is picked up by prettier. */
@@ -42,6 +44,8 @@ export const plugin: Plugin<AstPathStackEntry> = {
     pug: {
       parse(text, options) {
         logger.debug('[parsers:pug:parse]:', { text });
+        const frontmatter = matter(text);
+        text = frontmatter.content;
 
         let trimmedAndAlignedContent: string = text.replace(/^\s*\n/, '');
         const contentIndentation: RegExpExecArray | null = /^\s*/.exec(
@@ -64,7 +68,7 @@ export const plugin: Plugin<AstPathStackEntry> = {
         // 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 +97,21 @@ export const plugin: Plugin<AstPathStackEntry> = {
   },
   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/index.ts

@@ -1,4 +1,4 @@
-import { types } from 'node:util';
+import matter = require('gray-matter');
 import type { BuiltInParserName, Options, RequiredOptions } from 'prettier';
 import { format } from 'prettier';
 import type PrettierAngularPlugin from 'prettier/plugins/angular';
@@ -242,7 +242,9 @@ export class PugPrinter {
     private readonly content: string,
     private tokens: Token[],
     private readonly options: PugPrinterOptions,
+    private frontmatter: matter.GrayMatterFile<string>,
   ) {
+    this.frontmatter = frontmatter;
     this.indentString = options.pugUseTabs
       ? '\t'
       : ' '.repeat(options.pugTabWidth);
@@ -389,8 +391,7 @@ export class PugPrinter {
 
       token = this.getNextToken();
     }
-
-    return results.join('');
+    return matter.stringify(results.join(''), this.frontmatter.data);
   }
 
   private getNextToken(): Token | null {