mdat-plugin-tldraw 1.0.9 → 2.0.0

package/dist/index.d.ts

@@ -1,7 +1,9 @@
+import * as _$remark_mdat0 from "remark-mdat";
+
 //#region src/index.d.ts
 declare const _default: {
   tldraw: {
-    content(options?: unknown): Promise<string>;
+    content(options?: unknown, context?: _$remark_mdat0.RuleContext | undefined): Promise<string>;
   };
 };
 //#endregion

package/dist/index.js

@@ -1,25 +1,26 @@
 import { tldrawToImage } from "@kitschpatrol/tldraw-cli";
-import { loadConfig } from "mdat";
 import crypto from "node:crypto";
 import fs from "node:fs/promises";
 import path from "node:path";
-import { isFile } from "path-type";
+import { isDirectory, isFile } from "path-type";
 import { z } from "zod";
 //#region src/index.ts
-var src_default = { tldraw: { async content(options) {
-	const { alt = "tldraw diagram", src } = z.object({
+var src_default = { tldraw: { async content(options, context) {
+	const { alt = "tldraw diagram", dest: destination = "./assets", src } = z.object({
 		alt: z.string().optional(),
+		dest: z.string().optional(),
 		src: z.string()
 	}).parse(options);
-	const config = await loadConfig();
-	const { assetsPath } = config;
+	const markdownFilePath = context?.filePath ?? process.cwd();
+	const assetsPath = path.resolve(path.dirname(markdownFilePath), destination);
+	if (!await isDirectory(assetsPath)) throw new Error("Destination must be a directory`");
 	await fs.mkdir(assetsPath, { recursive: true });
 	let sourceHash = await isFile(src) ? await getFileHash(src) : void 0;
 	if (sourceHash !== void 0) {
 		const fileName = path.basename(src, path.extname(src));
 		const possibleLightPath = path.join(assetsPath, `${fileName}-${sourceHash}-light.svg`);
 		const possibleDarkPath = path.join(assetsPath, `${fileName}-${sourceHash}-dark.svg`);
-		if (await isFile(possibleLightPath) && await isFile(possibleDarkPath)) return getPictureElement(config, possibleLightPath, possibleDarkPath, alt);
+		if (await isFile(possibleLightPath) && await isFile(possibleDarkPath)) return getPictureElement(markdownFilePath, possibleLightPath, possibleDarkPath, alt);
 	}
 	const [lightPath] = await tldrawToImage(src, {
 		dark: false,
@@ -46,12 +47,10 @@ var src_default = { tldraw: { async content(options) {
 		const assetName = path.basename(asset);
 		if (assetName !== darkPathHashedName && assetName !== lightPathHashedName && assetName.startsWith(filePrefix) && assetName.endsWith(".svg")) await fs.rm(path.join(assetsPath, assetName));
 	}
-	return getPictureElement(config, lightPathHashed, darkPathHashed, alt);
+	return getPictureElement(markdownFilePath, lightPathHashed, darkPathHashed, alt);
 } } };
-function getPictureElement(config, lightPath, darkPath, alt) {
-	const { packageFile } = config;
-	if (packageFile === void 0) throw new Error("No package file found");
-	const basePath = path.dirname(packageFile);
+function getPictureElement(markdownFilePath, lightPath, darkPath, alt) {
+	const basePath = path.dirname(markdownFilePath);
 	const relativeLightPath = path.relative(basePath, lightPath);
 	return `<picture>
   <source media="(prefers-color-scheme: dark)" srcset="${path.relative(basePath, darkPath)}">
@@ -65,8 +64,9 @@ async function getFileHash(filePath) {
 	hash.update(fileBuffer);
 	return hash.digest("hex").slice(0, 8);
 }
+const FILE_EXTENSION_REGEX = /\.[^./]+$/;
 function stripExtension(file) {
-	return file.replace(/\.[^./]+$/, "");
+	return file.replace(FILE_EXTENSION_REGEX, "");
 }
 //#endregion
 export { src_default as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdat-plugin-tldraw",
-  "version": "1.0.9",
+  "version": "2.0.0",
   "description": "Mdat plugin to embed tldraw diagrams in Markdown files.",
   "keywords": [
     "markdown",
@@ -37,20 +37,21 @@
   "dependencies": {
     "@kitschpatrol/tldraw-cli": "^5.0.13",
     "path-type": "^6.0.0",
-    "type-fest": "^5.5.0",
-    "zod": "^3.25.76"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@kitschpatrol/shared-config": "^6.1.0",
+    "@kitschpatrol/shared-config": "^7.0.0",
     "@types/node": "~20.19.37",
     "bumpp": "^11.0.1",
-    "mdat": "^1.4.2",
+    "mdat": "^2.0.0",
+    "remark-mdat": "^2.0.0",
     "tsdown": "^0.21.7",
     "typescript": "~5.9.3",
     "vitest": "^4.1.2"
   },
   "peerDependencies": {
-    "mdat": "^1.1.0"
+    "mdat": "^2.0.0",
+    "remark-mdat": "^2.0.0"
   },
   "engines": {
     "node": ">=20.19.0"

package/readme.md

@@ -1,5 +1,3 @@
-<!--+ Warning: Content inside HTML comment blocks was generated by mdat and may be overwritten. +-->
-
 <!-- title -->
 
 # mdat-plugin-tldraw
@@ -10,6 +8,7 @@
 
 [![NPM Package mdat-plugin-tldraw](https://img.shields.io/npm/v/mdat-plugin-tldraw.svg)](https://npmjs.com/package/mdat-plugin-tldraw)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![CI](https://github.com/kitschpatrol/mdat-plugin-tldraw/actions/workflows/ci.yml/badge.svg)](https://github.com/kitschpatrol/mdat-plugin-tldraw/actions/workflows/ci.yml)
 
 <!-- /badges -->
 
@@ -65,13 +64,19 @@ export default {
 Assuming you have a `sketch.tldr` file in the root of your project, you can embed it in your Markdown file this:
 
 ```markdown
-<!-- tldraw { src: "./sketch.tldr" } -->
+<!-- tldraw({ src: "./sketch.tldr" }) -->
 ```
 
 Then run the `mdat` CLI command on your Markdown file to expand the rule and embed the diagram:
 
+```sh
+mdat
+```
+
+To generate:
+
 ```markdown
-<!-- tldraw { src: "./sketch.tldr" } -->
+<!-- tldraw({ src: "./sketch.tldr" }) -->
 
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="assets/sketch-63a3366c-dark.svg">
@@ -82,6 +87,40 @@ Then run the `mdat` CLI command on your Markdown file to expand the rule and emb
 <!-- /tldraw -->
 ```
 
+By default, the generated assets are saved to an `./assets` folder adjacent the Markdown file.
+
+You can customize this by passing a `dest` argument relative to the Markdown file, e.g.:
+
+```markdown
+<!-- tldraw({ src: "./sketch.tldr", dest: "./sketches" }) -->
+```
+
+## Example Output
+
+Give:
+
+```md
+<!-- tldraw({ src: "./test/assets/tldraw-sketch.tldr" }) -->
+```
+
+Receive:
+
+<!-- tldraw({ src: "./test/assets/tldraw-sketch.tldr" }) -->
+
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/tldraw-sketch-132cbdb8-dark.svg">
+  <source media="(prefers-color-scheme: light)" srcset="assets/tldraw-sketch-132cbdb8-light.svg">
+  <img alt="tldraw diagram" src="assets/tldraw-sketch-132cbdb8-light.svg">
+</picture>
+
+<!-- /tldraw -->
+
+## Compatibility
+
+This version of the plugin is only compatible with `mdat` 2.x.
+
+Older `mdat` 1.x compatible versions [remain available](https://www.npmjs.com/package/mdat-plugin-tldraw/v/1.0.9).
+
 ## Maintainers
 
 [@kitschpatrol](https://github.com/kitschpatrol)