@kekonic/diagrams-unplugin 1.0.0-rc.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kekonic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+# `@kekonic/diagrams-unplugin`
+
+Import standalone `.kdiagram` files through Vite, Rollup, Rolldown, Webpack, Rspack, or esbuild.
+
+```ts
+import kdiagram from "@kekonic/diagrams-unplugin/vite";
+
+export default { plugins: [kdiagram()] };
+```
+
+Imports are explicit so applications choose static output or a live runtime deliberately:
+
+```ts
+import svg from "./system.kdiagram?svg";
+import url from "./system.kdiagram?url";
+import source from "./system.kdiagram?source";
+import Diagram from "./system.kdiagram?react";
+import DiagramElement from "./system.kdiagram?element";
+```
+
+- `?svg` exports portable SVG markup.
+- `?url` exports a self-contained SVG data URL that works consistently across supported bundlers.
+- `?source` exports the original DSL.
+- `?react` exports a live component backed by `@kekonic/diagrams-ui`.
+- `?element` exports an unregistered `KDiagram` subclass. Register it under an application-owned
+  tag with `customElements.define("system-diagram", DiagramElement)`.
+
+Add `@kekonic/diagrams-unplugin/client` to `compilerOptions.types` for TypeScript import
+declarations. React and element dependencies are optional unless their corresponding queries are
+used. Bare `.kdiagram` imports intentionally fail with a list of supported queries.

package/client.d.ts

@@ -0,0 +1,29 @@
+declare module "*.kdiagram?svg" {
+  const svg: string;
+  export default svg;
+}
+
+declare module "*.kdiagram?url" {
+  const url: string;
+  export default url;
+}
+
+declare module "*.kdiagram?source" {
+  const source: string;
+  export default source;
+}
+
+declare module "*.kdiagram?react" {
+  import type { ComponentType } from "react";
+  import type { KDiagramLiveProps } from "@kekonic/diagrams-ui";
+  export const source: string;
+  const Diagram: ComponentType<Omit<KDiagramLiveProps, "source">>;
+  export default Diagram;
+}
+
+declare module "*.kdiagram?element" {
+  import type { KDiagramElement } from "@kekonic/diagrams-element";
+  export const source: string;
+  const Diagram: new () => KDiagramElement;
+  export default Diagram;
+}

package/dist/esbuild.d.mts

@@ -0,0 +1,5 @@
+//#region src/esbuild.d.ts
+declare const _default: (options?: import("@kekonic/diagrams-build").KDiagramBuildOptions) => import("unplugin").EsbuildPlugin;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=esbuild.d.mts.map

package/dist/esbuild.mjs

@@ -0,0 +1,7 @@
+import kdiagramUnplugin from "./index.mjs";
+//#region src/esbuild.ts
+var esbuild_default = kdiagramUnplugin.esbuild;
+//#endregion
+export { esbuild_default as default };
+
+//# sourceMappingURL=esbuild.mjs.map

package/dist/esbuild.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"esbuild.mjs","names":["kdiagram"],"sources":["../src/esbuild.ts"],"sourcesContent":["import kdiagram from \"./index.ts\";\n\nexport default kdiagram.esbuild;\n"],"mappings":";;AAEA,IAAA,kBAAeA,iBAAS"}

package/dist/index.d.mts

@@ -0,0 +1,17 @@
+import { KDiagramBuildOptions } from "@kekonic/diagrams-build";
+import { UnpluginFactory } from "unplugin";
+
+//#region src/index.d.ts
+declare const QUERY_KINDS: readonly ["svg", "url", "source", "react", "element"];
+type KDiagramImportKind = (typeof QUERY_KINDS)[number];
+type KDiagramUnpluginOptions = KDiagramBuildOptions;
+type KDiagramRequest = {
+  filename: string;
+  kind?: KDiagramImportKind;
+};
+declare function parseKDiagramRequest(id: string, importer?: string): KDiagramRequest | undefined;
+declare const kdiagramUnpluginFactory: UnpluginFactory<KDiagramUnpluginOptions | undefined>;
+declare const kdiagramUnplugin: import("unplugin").UnpluginInstance<KDiagramBuildOptions, boolean>;
+//#endregion
+export { KDiagramImportKind, KDiagramRequest, KDiagramUnpluginOptions, kdiagramUnplugin as default, kdiagramUnplugin, kdiagramUnpluginFactory, parseKDiagramRequest };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.mjs

@@ -0,0 +1,55 @@
+import { readFile } from "node:fs/promises";
+import { dirname, isAbsolute, resolve } from "node:path";
+import { createKDiagramDataUrl, createKDiagramModule, formatKDiagramBuildError, renderKDiagramForBuild } from "@kekonic/diagrams-build";
+import { createUnplugin } from "unplugin";
+//#region src/index.ts
+const RESOLVED_PREFIX = "\0kdiagram:";
+const QUERY_KINDS = [
+	"svg",
+	"url",
+	"source",
+	"react",
+	"element"
+];
+function parseKDiagramRequest(id, importer) {
+	const unresolved = id.startsWith(RESOLVED_PREFIX) ? id.slice(10) : id;
+	const queryIndex = unresolved.indexOf("?");
+	const pathname = queryIndex === -1 ? unresolved : unresolved.slice(0, queryIndex);
+	if (!pathname.endsWith(".kdiagram")) return void 0;
+	const filename = isAbsolute(pathname) ? pathname : resolve(importer ? dirname(importer) : process.cwd(), pathname);
+	if (queryIndex === -1) return { filename };
+	const query = unresolved.slice(queryIndex + 1);
+	return {
+		filename,
+		kind: QUERY_KINDS.find((candidate) => candidate === query)
+	};
+}
+const kdiagramUnpluginFactory = (options = {}) => ({
+	name: "kdiagram",
+	enforce: "pre",
+	resolveId(id, importer) {
+		const request = parseKDiagramRequest(id, importer);
+		if (!request) return;
+		const suffix = request.kind ? `?${request.kind}` : "";
+		return `${RESOLVED_PREFIX}${request.filename}${suffix}`;
+	},
+	async load(id) {
+		if (!id.startsWith(RESOLVED_PREFIX)) return;
+		const request = parseKDiagramRequest(id);
+		if (!request) return;
+		if (!request.kind) return this.error(`KDiagram imports require one of ${QUERY_KINDS.map((kind) => `?${kind}`).join(", ")}: ${request.filename}`);
+		this.addWatchFile(request.filename);
+		const source = await readFile(request.filename, "utf8");
+		if (request.kind === "source" || request.kind === "react" || request.kind === "element") return createKDiagramModule(request.kind, source);
+		const result = await renderKDiagramForBuild(source, options);
+		if (!result.svg) return this.error(formatKDiagramBuildError(result.diagnostics));
+		for (const diagnostic of result.diagnostics) this.warn(`${request.filename}: ${diagnostic.code}: ${diagnostic.message}`);
+		if (request.kind === "svg") return createKDiagramModule("svg", source, result.svg);
+		return `export default ${JSON.stringify(createKDiagramDataUrl(result.svg))};\n`;
+	}
+});
+const kdiagramUnplugin = /* #__PURE__ */ createUnplugin(kdiagramUnpluginFactory);
+//#endregion
+export { kdiagramUnplugin as default, kdiagramUnplugin, kdiagramUnpluginFactory, parseKDiagramRequest };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/index.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\";\nimport { dirname, isAbsolute, resolve } from \"node:path\";\nimport {\n  createKDiagramDataUrl,\n  createKDiagramModule,\n  formatKDiagramBuildError,\n  renderKDiagramForBuild,\n  type KDiagramBuildOptions,\n} from \"@kekonic/diagrams-build\";\nimport { createUnplugin, type UnpluginFactory } from \"unplugin\";\n\nconst RESOLVED_PREFIX = \"\\0kdiagram:\";\nconst QUERY_KINDS = [\"svg\", \"url\", \"source\", \"react\", \"element\"] as const;\n\nexport type KDiagramImportKind = (typeof QUERY_KINDS)[number];\n\nexport type KDiagramUnpluginOptions = KDiagramBuildOptions;\n\nexport type KDiagramRequest = {\n  filename: string;\n  kind?: KDiagramImportKind;\n};\n\nexport function parseKDiagramRequest(id: string, importer?: string): KDiagramRequest | undefined {\n  const unresolved = id.startsWith(RESOLVED_PREFIX) ? id.slice(RESOLVED_PREFIX.length) : id;\n  const queryIndex = unresolved.indexOf(\"?\");\n  const pathname = queryIndex === -1 ? unresolved : unresolved.slice(0, queryIndex);\n  if (!pathname.endsWith(\".kdiagram\")) return undefined;\n\n  const filename = isAbsolute(pathname)\n    ? pathname\n    : resolve(importer ? dirname(importer) : process.cwd(), pathname);\n  if (queryIndex === -1) return { filename };\n\n  const query = unresolved.slice(queryIndex + 1);\n  const kind = QUERY_KINDS.find((candidate) => candidate === query);\n  return { filename, kind };\n}\n\nexport const kdiagramUnpluginFactory: UnpluginFactory<KDiagramUnpluginOptions | undefined> = (\n  options = {},\n) => ({\n  name: \"kdiagram\",\n  enforce: \"pre\",\n  resolveId(id, importer) {\n    const request = parseKDiagramRequest(id, importer);\n    if (!request) return;\n    const suffix = request.kind ? `?${request.kind}` : \"\";\n    return `${RESOLVED_PREFIX}${request.filename}${suffix}`;\n  },\n  async load(id) {\n    if (!id.startsWith(RESOLVED_PREFIX)) return;\n    const request = parseKDiagramRequest(id);\n    if (!request) return;\n    if (!request.kind) {\n      return this.error(\n        `KDiagram imports require one of ${QUERY_KINDS.map((kind) => `?${kind}`).join(\", \")}: ${request.filename}`,\n      );\n    }\n\n    this.addWatchFile(request.filename);\n    const source = await readFile(request.filename, \"utf8\");\n    if (request.kind === \"source\" || request.kind === \"react\" || request.kind === \"element\") {\n      return createKDiagramModule(request.kind, source);\n    }\n\n    const result = await renderKDiagramForBuild(source, options);\n    if (!result.svg) return this.error(formatKDiagramBuildError(result.diagnostics));\n    for (const diagnostic of result.diagnostics) {\n      this.warn(`${request.filename}: ${diagnostic.code}: ${diagnostic.message}`);\n    }\n    if (request.kind === \"svg\") return createKDiagramModule(\"svg\", source, result.svg);\n\n    return `export default ${JSON.stringify(createKDiagramDataUrl(result.svg))};\\n`;\n  },\n});\n\nconst kdiagramUnplugin = /* #__PURE__ */ createUnplugin(kdiagramUnpluginFactory);\n\nexport default kdiagramUnplugin;\nexport { kdiagramUnplugin };\n"],"mappings":";;;;;AAWA,MAAM,kBAAkB;AACxB,MAAM,cAAc;CAAC;CAAO;CAAO;CAAU;CAAS;AAAS;AAW/D,SAAgB,qBAAqB,IAAY,UAAgD;CAC/F,MAAM,aAAa,GAAG,WAAW,eAAe,IAAI,GAAG,MAAM,EAAsB,IAAI;CACvF,MAAM,aAAa,WAAW,QAAQ,GAAG;CACzC,MAAM,WAAW,eAAe,KAAK,aAAa,WAAW,MAAM,GAAG,UAAU;CAChF,IAAI,CAAC,SAAS,SAAS,WAAW,GAAG,OAAO,KAAA;CAE5C,MAAM,WAAW,WAAW,QAAQ,IAChC,WACA,QAAQ,WAAW,QAAQ,QAAQ,IAAI,QAAQ,IAAI,GAAG,QAAQ;CAClE,IAAI,eAAe,IAAI,OAAO,EAAE,SAAS;CAEzC,MAAM,QAAQ,WAAW,MAAM,aAAa,CAAC;CAE7C,OAAO;EAAE;EAAU,MADN,YAAY,MAAM,cAAc,cAAc,KACrC;CAAE;AAC1B;AAEA,MAAa,2BACX,UAAU,CAAC,OACP;CACJ,MAAM;CACN,SAAS;CACT,UAAU,IAAI,UAAU;EACtB,MAAM,UAAU,qBAAqB,IAAI,QAAQ;EACjD,IAAI,CAAC,SAAS;EACd,MAAM,SAAS,QAAQ,OAAO,IAAI,QAAQ,SAAS;EACnD,OAAO,GAAG,kBAAkB,QAAQ,WAAW;CACjD;CACA,MAAM,KAAK,IAAI;EACb,IAAI,CAAC,GAAG,WAAW,eAAe,GAAG;EACrC,MAAM,UAAU,qBAAqB,EAAE;EACvC,IAAI,CAAC,SAAS;EACd,IAAI,CAAC,QAAQ,MACX,OAAO,KAAK,MACV,mCAAmC,YAAY,KAAK,SAAS,IAAI,MAAM,CAAC,CAAC,KAAK,IAAI,EAAE,IAAI,QAAQ,UAClG;EAGF,KAAK,aAAa,QAAQ,QAAQ;EAClC,MAAM,SAAS,MAAM,SAAS,QAAQ,UAAU,MAAM;EACtD,IAAI,QAAQ,SAAS,YAAY,QAAQ,SAAS,WAAW,QAAQ,SAAS,WAC5E,OAAO,qBAAqB,QAAQ,MAAM,MAAM;EAGlD,MAAM,SAAS,MAAM,uBAAuB,QAAQ,OAAO;EAC3D,IAAI,CAAC,OAAO,KAAK,OAAO,KAAK,MAAM,yBAAyB,OAAO,WAAW,CAAC;EAC/E,KAAK,MAAM,cAAc,OAAO,aAC9B,KAAK,KAAK,GAAG,QAAQ,SAAS,IAAI,WAAW,KAAK,IAAI,WAAW,SAAS;EAE5E,IAAI,QAAQ,SAAS,OAAO,OAAO,qBAAqB,OAAO,QAAQ,OAAO,GAAG;EAEjF,OAAO,kBAAkB,KAAK,UAAU,sBAAsB,OAAO,GAAG,CAAC,EAAE;CAC7E;AACF;AAEA,MAAM,mBAAmC,+BAAe,uBAAuB"}

package/dist/rolldown.d.mts

@@ -0,0 +1,5 @@
+//#region src/rolldown.d.ts
+declare const _default: (options?: import("@kekonic/diagrams-build").KDiagramBuildOptions) => import("unplugin").RolldownPlugin<any> | import("unplugin").RolldownPlugin<any>[];
+//#endregion
+export { _default as default };
+//# sourceMappingURL=rolldown.d.mts.map

package/dist/rolldown.mjs

@@ -0,0 +1,7 @@
+import kdiagramUnplugin from "./index.mjs";
+//#region src/rolldown.ts
+var rolldown_default = kdiagramUnplugin.rolldown;
+//#endregion
+export { rolldown_default as default };
+
+//# sourceMappingURL=rolldown.mjs.map

package/dist/rolldown.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rolldown.mjs","names":["kdiagram"],"sources":["../src/rolldown.ts"],"sourcesContent":["import kdiagram from \"./index.ts\";\n\nexport default kdiagram.rolldown;\n"],"mappings":";;AAEA,IAAA,mBAAeA,iBAAS"}

package/dist/rollup.d.mts

@@ -0,0 +1,5 @@
+//#region src/rollup.d.ts
+declare const _default: (options?: import("@kekonic/diagrams-build").KDiagramBuildOptions) => any;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=rollup.d.mts.map

package/dist/rollup.mjs

@@ -0,0 +1,7 @@
+import kdiagramUnplugin from "./index.mjs";
+//#region src/rollup.ts
+var rollup_default = kdiagramUnplugin.rollup;
+//#endregion
+export { rollup_default as default };
+
+//# sourceMappingURL=rollup.mjs.map

package/dist/rollup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rollup.mjs","names":["kdiagram"],"sources":["../src/rollup.ts"],"sourcesContent":["import kdiagram from \"./index.ts\";\n\nexport default kdiagram.rollup;\n"],"mappings":";;AAEA,IAAA,iBAAeA,iBAAS"}

package/dist/rspack.d.mts

@@ -0,0 +1,5 @@
+//#region src/rspack.d.ts
+declare const _default: (options?: import("@kekonic/diagrams-build").KDiagramBuildOptions) => RspackPluginInstance;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=rspack.d.mts.map

package/dist/rspack.mjs

@@ -0,0 +1,7 @@
+import kdiagramUnplugin from "./index.mjs";
+//#region src/rspack.ts
+var rspack_default = kdiagramUnplugin.rspack;
+//#endregion
+export { rspack_default as default };
+
+//# sourceMappingURL=rspack.mjs.map

package/dist/rspack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rspack.mjs","names":["kdiagram"],"sources":["../src/rspack.ts"],"sourcesContent":["import kdiagram from \"./index.ts\";\n\nexport default kdiagram.rspack;\n"],"mappings":";;AAEA,IAAA,iBAAeA,iBAAS"}

package/dist/vite.d.mts

@@ -0,0 +1,5 @@
+//#region src/vite.d.ts
+declare const _default: (options?: import("@kekonic/diagrams-build").KDiagramBuildOptions) => import("unplugin").VitePlugin<any> | import("unplugin").VitePlugin<any>[];
+//#endregion
+export { _default as default };
+//# sourceMappingURL=vite.d.mts.map

package/dist/vite.mjs

@@ -0,0 +1,7 @@
+import kdiagramUnplugin from "./index.mjs";
+//#region src/vite.ts
+var vite_default = kdiagramUnplugin.vite;
+//#endregion
+export { vite_default as default };
+
+//# sourceMappingURL=vite.mjs.map

package/dist/vite.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.mjs","names":["kdiagram"],"sources":["../src/vite.ts"],"sourcesContent":["import kdiagram from \"./index.ts\";\n\nexport default kdiagram.vite;\n"],"mappings":";;AAEA,IAAA,eAAeA,iBAAS"}

package/dist/webpack.d.mts

@@ -0,0 +1,5 @@
+//#region src/webpack.d.ts
+declare const _default: (options?: import("@kekonic/diagrams-build").KDiagramBuildOptions) => WebpackPluginInstance;
+//#endregion
+export { _default as default };
+//# sourceMappingURL=webpack.d.mts.map

package/dist/webpack.mjs

@@ -0,0 +1,7 @@
+import kdiagramUnplugin from "./index.mjs";
+//#region src/webpack.ts
+var webpack_default = kdiagramUnplugin.webpack;
+//#endregion
+export { webpack_default as default };
+
+//# sourceMappingURL=webpack.mjs.map

package/dist/webpack.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"webpack.mjs","names":["kdiagram"],"sources":["../src/webpack.ts"],"sourcesContent":["import kdiagram from \"./index.ts\";\n\nexport default kdiagram.webpack;\n"],"mappings":";;AAEA,IAAA,kBAAeA,iBAAS"}

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@kekonic/diagrams-unplugin",
+  "version": "1.0.0-rc.4",
+  "description": "KDiagram file imports for Vite, Rollup, Rolldown, Webpack, Rspack, and esbuild.",
+  "keywords": [
+    "diagram",
+    "kdiagram",
+    "rollup",
+    "unplugin",
+    "vite",
+    "webpack"
+  ],
+  "homepage": "https://github.com/kekonic/diagrams#readme",
+  "bugs": {
+    "url": "https://github.com/kekonic/diagrams/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kekonic/diagrams.git",
+    "directory": "packages/diagrams-unplugin"
+  },
+  "files": [
+    "dist",
+    "client.d.ts"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.mts",
+      "import": "./dist/vite.mjs"
+    },
+    "./rollup": {
+      "types": "./dist/rollup.d.mts",
+      "import": "./dist/rollup.mjs"
+    },
+    "./rolldown": {
+      "types": "./dist/rolldown.d.mts",
+      "import": "./dist/rolldown.mjs"
+    },
+    "./webpack": {
+      "types": "./dist/webpack.d.mts",
+      "import": "./dist/webpack.mjs"
+    },
+    "./rspack": {
+      "types": "./dist/rspack.d.mts",
+      "import": "./dist/rspack.mjs"
+    },
+    "./esbuild": {
+      "types": "./dist/esbuild.d.mts",
+      "import": "./dist/esbuild.mjs"
+    },
+    "./client": "./client.d.ts"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "unplugin": "^3.3.0",
+    "@kekonic/diagrams": "1.0.0-rc.4",
+    "@kekonic/diagrams-build": "1.0.0-rc.4"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.17",
+    "react": "^19.2.8",
+    "typescript": "^5",
+    "vite": "npm:@voidzero-dev/vite-plus-core@0.2.2",
+    "vitest": "^4",
+    "@kekonic/diagrams-element": "1.0.0-rc.4",
+    "@kekonic/diagrams-ui": "1.0.0-rc.4"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "@kekonic/diagrams-element": "1.0.0-rc.4",
+    "@kekonic/diagrams-ui": "1.0.0-rc.4"
+  },
+  "peerDependenciesMeta": {
+    "@kekonic/diagrams-element": {
+      "optional": true
+    },
+    "@kekonic/diagrams-ui": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=22.18.0"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "test": "vp test"
+  }
+}