prettier-plugin-mdc 0.1.0 → 0.1.2

package/README.md

@@ -2,24 +2,68 @@
 
 [![NPM version](https://img.shields.io/npm/v/prettier-plugin-mdc?color=a1b858&label=)](https://www.npmjs.com/package/prettier-plugin-mdc)
 
+A [Prettier](https://prettier.io/) plugin for formatting [MDC (Markdown Components)](https://content.nuxt.com/docs/files/markdown#mdc-syntax) syntax used in [Nuxt Content](https://content.nuxt.com/).
+
 ## 💎 Features
 
+- Preserve YAML front matter in components
+- Support for nested components
+- Compatible with GFM (GitHub Flavored Markdown) and math syntax
+
 ## 📦 Installation
 
 ```bash
-$ npm install prettier-plugin-mdc
-$ yarn add prettier-plugin-mdc
-$ pnpm add prettier-plugin-mdc
+npm install -D prettier-plugin-mdc
+# or
+yarn add -D prettier-plugin-mdc
+# or
+pnpm add -D prettier-plugin-mdc
 ```
 
 ## 🚀 Usage
 
-```ts
+Add the plugin to your Prettier configuration:
 
+```json
+// .prettierrc
+{
+  "plugins": ["prettier-plugin-mdc"],
+  "overrides": [
+    {
+      "files": ["*.md"],
+      "options": {
+        "parser": "mdc"
+      }
+    }
+  ]
+}
 ```
 
-## 📝 License
+Or in `prettier.config.js`:
 
-[MIT](./LICENSE). Made with ❤️ by [Ray](https://github.com/so1ve)
+```js
+export default {
+  plugins: ["prettier-plugin-mdc"],
+  overrides: [
+    {
+      files: ["*.md"],
+      options: {
+        parser: "mdc",
+      },
+    },
+  ],
+};
+```
+
+Then format your `.mdc` or `.md` files:
 
-[link](https://nuxtjs.org)
+```bash
+prettier --write "**/*.mdc"
+prettier --write "**/*.md"
+```
+
+For MDC Syntax Reference, please check [remark-mdc](https://github.com/nuxt-content/remark-mdc).
+
+## License
+
+[MIT](./LICENSE). Made with ❤️ by [Ray](https://github.com/so1ve)

package/dist/index.d.mts

@@ -1,4 +1,4 @@
-import { Parser, Printer } from "prettier";
+import { Parser, Printer, SupportLanguage } from "prettier";
 import { Node } from "unist";
 
 //#region src/constants.d.ts
@@ -10,4 +10,7 @@ declare const parsers: Record<typeof AST_FORMAT, Parser<Node>>;
 //#region src/printers.d.ts
 declare const printers: Record<typeof AST_FORMAT, Printer<Node>>;
 //#endregion
-export { parsers, printers };
+//#region src/index.d.ts
+declare const languages: Partial<SupportLanguage>[];
+//#endregion
+export { languages, parsers, printers };

package/dist/index.mjs

@@ -12,17 +12,6 @@ import { createSyncFn } from "synckit";
 //#region src/constants.ts
 const AST_FORMAT = "mdc";
 
-//#endregion
-//#region src/parsers.ts
-const parsers = { [AST_FORMAT]: {
-	...markdown.parsers.markdown,
-	astFormat: AST_FORMAT,
-	parse: async (text) => {
-		const processor = unified().use(remarkParse, { commonmark: true }).use(remarkMath).use(remarkGfm).use(remarkMdc);
-		return await processor.run(processor.parse(text));
-	}
-} };
-
 //#endregion
 //#region src/is.ts
 const isTextComponentNode = (node) => node.type === "textComponent";
@@ -52,6 +41,39 @@ function linkNeedsCustomPrinting(node) {
 	return false;
 }
 
+//#endregion
+//#region src/validate.ts
+function validateYamlBlocks(ast, text) {
+	function visit(node) {
+		if (isContainerComponentNode(node)) {
+			const pos = node.position;
+			if (pos) {
+				const startLine = pos.start.line;
+				const lines = text.split("\n");
+				if (startLine < lines.length) {
+					if (lines[startLine]?.trim() === "---" && !node.rawData) throw new Error(`Invalid YAML block in component "${node.name}" at line ${startLine + 1}: YAML block is
+    not properly closed`);
+				}
+			}
+			if (node.children) for (const child of node.children) visit(child);
+		} else if ("children" in node && Array.isArray(node.children)) for (const child of node.children) visit(child);
+	}
+	visit(ast);
+}
+
+//#endregion
+//#region src/parsers.ts
+const parsers = { [AST_FORMAT]: {
+	...markdown.parsers.markdown,
+	astFormat: AST_FORMAT,
+	parse: async (text) => {
+		const processor = unified().use(remarkParse, { commonmark: true }).use(remarkMath).use(remarkGfm).use(remarkMdc);
+		const ast = await processor.run(processor.parse(text));
+		validateYamlBlocks(ast, text);
+		return ast;
+	}
+} };
+
 //#endregion
 //#region src/visitor-keys.ts
 const visitorKeys = {
@@ -71,8 +93,23 @@ const extendedInlineNodes = [
 	"inlineCode",
 	"emphasis"
 ];
-const hasInlineAttribute = (node) => extendedInlineNodes.includes(node.type) && "attributes" in node;
+const extendedInlineNodesHaveAttributes = (node) => extendedInlineNodes.includes(node.type) && "attributes" in node;
 const escapeQuotes = (value, quote) => value.replace(new RegExp(quote, "g"), `\\${quote}`);
+/**
+* Quote a string value using Prettier's quote selection logic:
+*
+* - Use preferred quote if value doesn't contain it
+* - Switch to alternative quote if value contains preferred but not alternative
+* - Use preferred quote with escaping if value contains both
+*/
+function quoteString(value, options) {
+	const preferredQuote = options.singleQuote ? "'" : "\"";
+	const alternativeQuote = options.singleQuote ? "\"" : "'";
+	const hasPreferred = value.includes(preferredQuote);
+	const hasAlternative = value.includes(alternativeQuote);
+	const quote = hasPreferred && !hasAlternative ? alternativeQuote : preferredQuote;
+	return `${quote}${escapeQuotes(value.replace(/\\/g, "\\\\"), quote)}${quote}`;
+}
 
 //#endregion
 //#region src/yaml.ts
@@ -92,16 +129,15 @@ const formatYaml = (text, options) => {
 const { hardline, join } = doc.builders;
 const mapChildren = (path, print) => path.map(print, "children");
 function serializeValue(value, options) {
-	const quote = options.singleQuote ? "'" : "\"";
-	if (typeof value === "string") return `${quote}${escapeQuotes(value.replace(/\\/g, "\\\\"), quote)}${quote}`;
+	if (typeof value === "string") return quoteString(value, options);
 	if (typeof value === "number" || typeof value === "boolean") return String(value);
-	return `${quote}${escapeQuotes(JSON.stringify(value), quote)}${quote}`;
+	const preferredQuote = options.singleQuote ? "'" : "\"";
+	return `${preferredQuote}${escapeQuotes(JSON.stringify(value), preferredQuote)}${preferredQuote}`;
 }
-function printAttributes(node, options) {
-	const attrs = node.attributes;
-	if (!attrs || Object.keys(attrs).length === 0) return "";
+function printAttributes({ attributes }, options) {
+	if (!attributes || Object.keys(attributes).length === 0) return "";
 	const parts = [];
-	for (const [key, value] of Object.entries(attrs)) if (key === "id") parts.push(`#${value}`);
+	for (const [key, value] of Object.entries(attributes)) if (key === "id") parts.push(`#${value}`);
 	else if (key === "class") {
 		const classes = String(value).split(/\s+/).filter(Boolean);
 		for (const cls of classes) parts.push(`.${cls}`);
@@ -115,8 +151,7 @@ function printAttributes(node, options) {
 function printBinding(node, options) {
 	const value = node.attributes?.value ?? "";
 	const defaultValue = node.attributes?.defaultValue;
-	const quote = options.singleQuote ? "'" : "\"";
-	if (defaultValue !== void 0 && defaultValue !== "undefined") return [`{{ ${value} || ${quote}${escapeQuotes(String(defaultValue), quote)}${quote} }}`];
+	if (defaultValue !== void 0 && defaultValue !== "undefined") return [`{{ ${value} || ${quoteString(String(defaultValue), options)} }}`];
 	return [`{{ ${value} }}`];
 }
 /**
@@ -134,6 +169,7 @@ function isShorthandSpan(node) {
 	}
 	return nodeLength <= 3;
 }
+const EMPTY_PROPS_RE = /\{\s*\}\s*$/;
 /**
 * Print inline text component: :name[content]{attrs} Special cases:
 *
@@ -165,6 +201,10 @@ function printTextComponent(path, print, options) {
 	const parts = [`:${node.name}`];
 	if (node.children && node.children.length > 0) parts.push("[", ...printChildrenWithEscapedBrackets(), "]");
 	if (attrStr) parts.push(attrStr);
+	else if (node.position) {
+		const text = options.originalText.slice(node.position.start.offset, node.position.end.offset);
+		if (EMPTY_PROPS_RE.test(text)) parts.push("{}");
+	}
 	return parts;
 }
 /**
@@ -180,7 +220,7 @@ function getContainerDepth(path) {
 */
 function printRawData(rawData, options) {
 	if (!rawData) return [];
-	let content = rawData.slice(1, -3).trimEnd();
+	let content = rawData.trimEnd().slice(1, -3).trimEnd();
 	if (!content) return [];
 	content = formatYaml(content, options);
 	return [
@@ -203,8 +243,15 @@ function printContainerComponent(path, print, options) {
 	const attrStr = printAttributes(node, options);
 	if (attrStr) parts.push(attrStr);
 	parts.push(hardline);
-	parts.push(...printRawData(node.rawData, options));
+	const rawDataDoc = printRawData(node.rawData, options);
+	parts.push(...rawDataDoc);
 	if (node.children && node.children.length > 0) {
+		if (rawDataDoc.length > 0 && node.rawData) {
+			const componentStartLine = node.position?.start.line ?? 0;
+			const rawDataNewlines = (node.rawData.match(/\n/g) ?? []).length;
+			const rawDataEndLine = componentStartLine + 1 + rawDataNewlines;
+			if ((node.children[0].position?.start.line ?? 0) > rawDataEndLine + 1) parts.push(hardline);
+		}
 		const childDocs = mapChildren(path, print);
 		parts.push(join(hardline, childDocs));
 		parts.push(hardline);
@@ -257,6 +304,8 @@ function printLink(path, print, options) {
 		parts.push(" ", quote, node.title, quote);
 	}
 	parts.push(")");
+	const attrStr = printAttributes(node, options);
+	if (attrStr) parts.push(attrStr);
 	return parts;
 }
 
@@ -271,8 +320,8 @@ const printers = { [AST_FORMAT]: {
 	},
 	print(path, options, print, args) {
 		const { node } = path;
-		if (hasInlineAttribute(node)) return [mdastPrinter.print(path, options, print, args), printAttributes(node, options)];
 		if (isLinkNode(node) && linkNeedsCustomPrinting(node)) return printLink(path, print, options);
+		if (extendedInlineNodesHaveAttributes(node)) return [mdastPrinter.print(path, options, print, args), printAttributes(node, options)];
 		if (isTextComponentNode(node)) return printTextComponent(path, print, options);
 		else if (isContainerComponentNode(node)) return printContainerComponent(path, print, options);
 		else if (isComponentContainerSectionNode(node)) return printComponentContainerSection(path, print);
@@ -281,4 +330,13 @@ const printers = { [AST_FORMAT]: {
 } };
 
 //#endregion
-export { parsers, printers };
+//#region src/index.ts
+const languages = [{
+	name: "mdc",
+	parsers: [AST_FORMAT],
+	extensions: [".mdc"],
+	vscodeLanguageIds: ["mdc"]
+}];
+
+//#endregion
+export { languages, parsers, printers };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "prettier-plugin-mdc",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "author": "Ray <i@mk1.io> (@so1ve)",
   "type": "module",
   "description": "Prettier plugin for MDC syntax",