@reslide-dev/mdx 0.0.1

package/dist/index.mjs

@@ -0,0 +1,310 @@
+import remarkFrontmatter from "remark-frontmatter";
+import { visit } from "unist-util-visit";
+import { compile } from "@mdx-js/mdx";
+import remarkDirective from "remark-directive";
+//#region src/remark-slides.ts
+function parseYamlString(value) {
+	const options = {};
+	for (const line of value.split("\n")) {
+		const match = line.match(/^(\w[\w-]*):\s*(.+)$/);
+		if (match) options[match[1]] = match[2].trim();
+	}
+	return options;
+}
+/**
+* Try to extract frontmatter-like options from a slide section's first nodes.
+*
+* Two patterns are recognized:
+* 1. `yaml` node (first slide, parsed by remark-frontmatter)
+* 2. Setext heading created by remark when `---\nkey: val\n---` appears
+*    after a thematicBreak separator
+*/
+function tryExtractOptionsFromNodes(nodes) {
+	if (nodes[0]?.type === "yaml") return {
+		options: parseYamlString(nodes[0].value),
+		contentStart: 1
+	};
+	if (nodes[0]?.type === "heading") {
+		const heading = nodes[0];
+		if (heading.children.length === 1 && heading.children[0]?.type === "text") {
+			const text = heading.children[0].value;
+			if (text.split("\n").every((line) => /^(\w[\w-]*):\s*.+$/.test(line.trim()))) return {
+				options: parseYamlString(text),
+				contentStart: 1
+			};
+		}
+	}
+	return null;
+}
+/**
+* Remark plugin that splits MDX content at `---` (thematic breaks)
+* into `<Slide>` components wrapped in a `<Deck>`.
+*
+* Internally enables remark-frontmatter for the first YAML block.
+* Subsequent slide frontmatters are detected via setext heading pattern.
+*/
+function remarkSlides() {
+	this.use(remarkFrontmatter, ["yaml"]);
+	return (tree) => {
+		const slides = [];
+		let current = [];
+		for (const node of tree.children) if (node.type === "thematicBreak") {
+			slides.push(current);
+			current = [];
+		} else current.push(node);
+		slides.push(current);
+		const slideElements = [];
+		for (const slideContent of slides) {
+			if (slideContent.length === 0) continue;
+			const extracted = tryExtractOptionsFromNodes(slideContent);
+			const options = extracted?.options ?? {};
+			const contentStart = extracted?.contentStart ?? 0;
+			const content = slideContent.slice(contentStart);
+			if (content.length === 0 && Object.keys(options).length === 0) continue;
+			const clickCount = countClickDirectives(content);
+			const slideIndex = slideElements.length;
+			const attrs = [];
+			if (options.layout) attrs.push({
+				type: "mdxJsxAttribute",
+				name: "layout",
+				value: options.layout
+			});
+			if (options.class) attrs.push({
+				type: "mdxJsxAttribute",
+				name: "className",
+				value: options.class
+			});
+			const slideChildren = [...content];
+			if (clickCount > 0) slideChildren.unshift({
+				type: "mdxJsxFlowElement",
+				name: "ClickSteps",
+				attributes: [{
+					type: "mdxJsxAttribute",
+					name: "slideIndex",
+					value: {
+						type: "mdxJsxAttributeValueExpression",
+						value: String(slideIndex),
+						data: { estree: createNumericExpression(slideIndex) }
+					}
+				}, {
+					type: "mdxJsxAttribute",
+					name: "count",
+					value: {
+						type: "mdxJsxAttributeValueExpression",
+						value: String(clickCount),
+						data: { estree: createNumericExpression(clickCount) }
+					}
+				}],
+				children: []
+			});
+			slideElements.push({
+				type: "mdxJsxFlowElement",
+				name: "Slide",
+				attributes: attrs,
+				children: slideChildren
+			});
+		}
+		tree.children = [{
+			type: "mdxJsxFlowElement",
+			name: "Deck",
+			attributes: [],
+			children: slideElements
+		}];
+	};
+}
+function countClickDirectives(nodes) {
+	let count = 0;
+	function walk(node) {
+		const n = node;
+		if ((n.type === "leafDirective" || n.type === "containerDirective") && n.name === "click") count++;
+		if (n.children && Array.isArray(n.children)) for (const child of n.children) walk(child);
+	}
+	for (const node of nodes) walk(node);
+	return count;
+}
+function createNumericExpression(value) {
+	return {
+		type: "Program",
+		sourceType: "module",
+		body: [{
+			type: "ExpressionStatement",
+			expression: {
+				type: "Literal",
+				value,
+				raw: String(value)
+			}
+		}]
+	};
+}
+//#endregion
+//#region src/remark-click.ts
+/**
+* Remark plugin that converts `::click` directives (from remark-directive)
+* into `<Click>` MDX JSX components.
+*
+* Supports both leaf (`::click`) and container (`::: click ... :::`) forms.
+* Auto-increments the `at` attribute for sequential click steps.
+*/
+function remarkClick() {
+	return (tree) => {
+		let stepCounter = 0;
+		visit(tree, (node, index, parent) => {
+			if (node.type !== "leafDirective" && node.type !== "containerDirective") return;
+			if (node.name !== "click") return;
+			if (index == null || !parent) return;
+			stepCounter++;
+			const attrs = [{
+				type: "mdxJsxAttribute",
+				name: "at",
+				value: {
+					type: "mdxJsxAttributeValueExpression",
+					value: String(stepCounter),
+					data: { estree: {
+						type: "Program",
+						sourceType: "module",
+						body: [{
+							type: "ExpressionStatement",
+							expression: {
+								type: "Literal",
+								value: stepCounter,
+								raw: String(stepCounter)
+							}
+						}]
+					} }
+				}
+			}];
+			if (node.type === "leafDirective") {
+				const siblings = parent.children;
+				const gathered = [];
+				let i = index + 1;
+				while (i < siblings.length) {
+					const sibling = siblings[i];
+					if ((sibling.type === "leafDirective" || sibling.type === "containerDirective") && sibling.name === "click") break;
+					if (sibling.type === "thematicBreak") break;
+					gathered.push(siblings[i]);
+					i++;
+				}
+				if (gathered.length > 0) siblings.splice(index + 1, gathered.length);
+				parent.children[index] = {
+					type: "mdxJsxFlowElement",
+					name: "Click",
+					attributes: attrs,
+					children: gathered
+				};
+				return;
+			}
+			parent.children[index] = {
+				type: "mdxJsxFlowElement",
+				name: "Click",
+				attributes: attrs,
+				children: node.children
+			};
+		});
+	};
+}
+//#endregion
+//#region src/remark-mark.ts
+/**
+* Remark plugin that converts `:mark[text]{.style}` directives
+* into `<Mark>` MDX JSX components.
+*
+* Supports styles: highlight, underline, circle
+* Supports color via additional class: .orange, .red, .blue, etc.
+*
+* Example: `:mark[important text]{.highlight.orange}`
+* Produces: `<Mark type="highlight" color="orange">important text</Mark>`
+*/
+function remarkMark() {
+	return (tree) => {
+		visit(tree, (node, index, parent) => {
+			if (node.type !== "textDirective") return;
+			if (node.name !== "mark") return;
+			if (index == null || !parent) return;
+			const classes = (node.attributes?.class ?? "").split(/\s+/).filter(Boolean);
+			const markTypes = [
+				"highlight",
+				"underline",
+				"circle"
+			];
+			let type = "highlight";
+			let color;
+			for (const cls of classes) if (markTypes.includes(cls)) type = cls;
+			else if (cls) color = cls;
+			const attrs = [{
+				type: "mdxJsxAttribute",
+				name: "type",
+				value: type
+			}];
+			if (color) attrs.push({
+				type: "mdxJsxAttribute",
+				name: "color",
+				value: color
+			});
+			parent.children[index] = {
+				type: "mdxJsxTextElement",
+				name: "Mark",
+				attributes: attrs,
+				children: node.children
+			};
+		});
+	};
+}
+//#endregion
+//#region src/compile.ts
+/**
+* Parse frontmatter from MDX source without compiling.
+* Useful for extracting metadata in listing pages.
+*/
+function parseSlideMetadata(source) {
+	const fm = parseFrontmatter(source);
+	const slideCount = countSlides(source);
+	return {
+		...fm,
+		slideCount
+	};
+}
+/**
+* Compile MDX slides source to JavaScript code.
+* The returned code can be evaluated on the client with `ReslideEmbed`.
+*
+* Usage (server side):
+* ```ts
+* import { compileMdxSlides } from '@reslide/mdx/compile'
+* const { code, metadata } = await compileMdxSlides(mdxSource)
+* ```
+*/
+async function compileMdxSlides(source, options) {
+	const metadata = parseSlideMetadata(source);
+	const result = await compile(source, {
+		outputFormat: "function-body",
+		remarkPlugins: [
+			remarkDirective,
+			remarkSlides,
+			remarkClick,
+			remarkMark,
+			...options?.remarkPlugins ?? []
+		],
+		rehypePlugins: options?.rehypePlugins ?? [],
+		providerImportSource: void 0
+	});
+	return {
+		code: String(result),
+		metadata
+	};
+}
+function parseFrontmatter(source) {
+	const match = source.match(/^---\n([\s\S]*?)\n---/);
+	if (!match) return {};
+	const result = {};
+	for (const line of match[1].split("\n")) {
+		const m = line.match(/^(\w[\w-]*):\s*(.+)$/);
+		if (m) result[m[1]] = m[2].replace(/^["']|["']$/g, "").trim();
+	}
+	return result;
+}
+function countSlides(source) {
+	const parts = source.replace(/^---\n[\s\S]*?\n---\n?/, "").split(/\n---\n/);
+	return Math.max(1, parts.filter((p) => p.trim().length > 0).length);
+}
+//#endregion
+export { compileMdxSlides, parseSlideMetadata, remarkClick, remarkMark, remarkSlides };

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@reslide-dev/mdx",
+  "version": "0.0.1",
+  "description": "Remark/rehype plugins for reslide MDX preprocessing",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test"
+  },
+  "dependencies": {
+    "@mdx-js/mdx": "^3.1.1",
+    "remark-frontmatter": "^5.0.0",
+    "unist-util-visit": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/mdast": "catalog:",
+    "@types/unist": "catalog:",
+    "remark": "^15.0.0",
+    "remark-directive": "^3.0.0",
+    "remark-frontmatter": "catalog:",
+    "remark-mdx": "^3.1.0",
+    "unified": "catalog:",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:"
+  },
+  "peerDependencies": {
+    "remark-directive": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "inlinedDependencies": {
+    "@types/mdast": "4.0.4",
+    "@types/unist": "3.0.3",
+    "trough": "2.2.0",
+    "unified": "11.0.5",
+    "vfile": "6.0.3",
+    "vfile-message": "4.0.3"
+  }
+}