rdela · July 30, 2024 13:25 · Jul 30, 2024
diff --git a/prettier-plugin-js-frontmatter.js b/prettier-plugin-js-frontmatter.js
@@ -0,0 +1,72 @@
+import prettier from 'prettier';
+import babelParser from 'prettier/plugins/babel';
+import htmlParser from 'prettier/plugins/html';
+const frontmatterRegex = /^---js\n([\s\S]*?)\n---\n/;
+
+function parse(text, options) {
+  const match = text.match(frontmatterRegex);
+  if (match) {
+    const frontmatter = match[1];
+    const content = text.slice(match[0].length);
+    return {
+      type: 'frontmatterDocument',
+      frontmatter,
+      content,
+    };
+  }
+  return {
+    type: 'root',
+    text: text,
+  };
+}
+
+async function print(path, options, print) {
+  const node = path.getValue();
+  if (node.type === 'frontmatterDocument') {
+    // Ensure babel can interpret the frontmatter by wrapping it as an expression.
+    const prependedFrontmatter = `(${node.frontmatter})`;
+    const formattedFrontmatterWithReturn = await prettier.format(
+      prependedFrontmatter,
+      {
+        ...options,
+        parser: 'babel',
+        plugins: [babelParser],
+      },
+    );
+    // Switch formatted code back to object literal by removing `(` and `);\n`.
+    const formattedFrontmatterWithoutReturn =
+      formattedFrontmatterWithReturn.slice(1, -3);
+    // Format remaining context as HTML
+    const formattedContent = await prettier.format(node.content, {
+      ...options,
+      parser: 'html',
+      plugins: [htmlParser],
+    });
+    return `---js\n${formattedFrontmatterWithoutReturn}\n---\n\n${formattedContent}`;
+  }
+  // No js frontmatter detected, just format as HTML.
+  const formattedContent = await prettier.format(node.text, {
+    ...options,
+    parser: 'html',
+    plugins: [htmlParser],
+  });
+
+  return formattedContent;
+}
+
+export default {
+  parsers: {
+    'js-frontmatter': {
+      parse,
+      astFormat: 'js-frontmatter',
+      locStart: () => 0,
+      locEnd: () => 0,
+    },
+  },
+  printers: {
+    'js-frontmatter': {
+      print,
+    },
+  },
+  options: {},
+};
diff --git a/prettier.config.example.js b/prettier.config.example.js
@@ -0,0 +1,12 @@
+/** @type {import('prettier').Config} */
+export default {
+  plugins: ['./prettier-plugin-js-frontmatter.js'],
+  overrides: [
+    {
+      files: '*.webc',
+      options: {
+        parser: 'js-frontmatter',
+      },
+    },
+  ],
+};