@comark/vue 0.1.0

package/dist/vite.js

@@ -0,0 +1,175 @@
+import { fileURLToPath } from 'node:url';
+import { readdir } from 'node:fs/promises';
+import { join, basename } from 'node:path';
+import { existsSync } from 'node:fs';
+const runtimeDir = fileURLToPath(new URL('./utils', import.meta.url));
+function viteComarkSlot(node, context) {
+    const isVueSlotWithUnwrap = node.tag === 'slot'
+        && node.props.find(p => p.name === 'unwrap' || p.name === 'mdc-wunwrap' || (p.name === 'bind' && p.rawName === ':comark-unwrap'));
+    if (isVueSlotWithUnwrap) {
+        const transform = context.ssr
+            ? context.nodeTransforms.find(nt => nt.name === 'ssrTransformSlotOutlet')
+            : context.nodeTransforms.find(nt => nt.name === 'transformSlotOutlet');
+        return () => {
+            node.tag = 'slot';
+            node.type = 1;
+            node.tagType = 2;
+            transform?.(node, context);
+            const codegen = context.ssr ? node.ssrCodegenNode : node.codegenNode;
+            codegen.callee = context.ssr ? '_ssrRenderComarkSlot' : '_renderComarkSlot';
+            const importExp = context.ssr
+                ? '{ ssrRenderSlot as _ssrRenderComarkSlot }'
+                : '{ renderSlot as _renderComarkSlot }';
+            if (!context.imports.some(i => String(i.exp) === importExp)) {
+                context.imports.push({
+                    exp: importExp,
+                    path: `${runtimeDir}/${context.ssr ? 'ssrSlot' : 'slot'}`,
+                });
+            }
+        };
+    }
+    if (context.nodeTransforms[0]?.name !== 'viteComarkSlot') {
+        const index = context.nodeTransforms.findIndex(f => f.name === 'viteComarkSlot');
+        if (index !== -1) {
+            const nt = context.nodeTransforms.splice(index, 1);
+            context.nodeTransforms.unshift(nt[0]);
+        }
+    }
+}
+const VIRTUAL_COMPONENTS_ID = 'virtual:comark-vue/components';
+const RESOLVED_COMPONENTS_ID = '\0' + VIRTUAL_COMPONENTS_ID;
+function toPascalCase(str) {
+    return str.replace(/(^|[-_.])(\w)/g, (_, __, c) => c.toUpperCase());
+}
+async function getProseFiles(proseDir) {
+    const files = [];
+    try {
+        const entries = await readdir(proseDir, { withFileTypes: true, recursive: true });
+        for (const entry of entries) {
+            if (!entry.isFile() || !entry.name.endsWith('.vue'))
+                continue;
+            // parentPath was added in Node 21.4 / 20.12; path is the legacy name
+            const dir = entry.parentPath ?? entry.path;
+            files.push(join(dir, entry.name));
+        }
+    }
+    catch {
+        // prose directory doesn't exist — that's fine
+    }
+    return files;
+}
+function generateComponentsModule(files) {
+    if (!files.length) {
+        return 'export default { install(app) {} }';
+    }
+    const lines = [];
+    for (let i = 0; i < files.length; i++) {
+        lines.push(`import __comp_${i} from ${JSON.stringify(files[i].replace(/\\/g, '/'))}`);
+    }
+    lines.push('');
+    lines.push('export default {');
+    lines.push('  install(app) {');
+    for (let i = 0; i < files.length; i++) {
+        const name = toPascalCase(basename(files[i], '.vue'));
+        lines.push(`    app.component(${JSON.stringify(name)}, __comp_${i})`);
+    }
+    lines.push('  },');
+    lines.push('}');
+    return lines.join('\n');
+}
+/**
+ * Vite plugin for @comark/vue.
+ *
+ * - Adds `<slot unwrap="...">` support inside custom markdown components.
+ * - Auto-registers every `.vue` file in `src/components/prose` as a global
+ *   component
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from 'vite'
+ * import vue from '@vitejs/plugin-vue'
+ * import comark from '@comark/vue/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [vue(), comark()],
+ * })
+ * ```
+ */
+export default function comark() {
+    let proseDir;
+    let proseFilesCache = null;
+    async function resolveProseFiles() {
+        if (!proseDir)
+            return [];
+        if (!proseFilesCache) {
+            proseFilesCache = await getProseFiles(proseDir);
+        }
+        return proseFilesCache;
+    }
+    function invalidateCache(file) {
+        if (file.startsWith(proseDir)) {
+            proseFilesCache = null;
+        }
+    }
+    return {
+        name: 'comark-vue',
+        enforce: 'pre',
+        configResolved(config) {
+            if (existsSync(join(config.root, 'src', 'components', 'prose'))) {
+                proseDir = join(config.root, 'src', 'components', 'prose');
+            }
+            if (existsSync(join(config.root, 'components', 'prose'))) {
+                proseDir = join(config.root, 'components', 'prose');
+            }
+            const vuePlugin = config.plugins.find(p => p.name === 'vite:vue');
+            if (!vuePlugin) {
+                console.warn('[comark-vue] @vitejs/plugin-vue not found. Make sure vue() is in your plugins.');
+                return;
+            }
+            const vueOptions = vuePlugin.api?.options;
+            if (!vueOptions)
+                return;
+            vueOptions.template ??= {};
+            vueOptions.template.compilerOptions ??= {};
+            vueOptions.template.compilerOptions.nodeTransforms ??= [];
+            vueOptions.template.compilerOptions.nodeTransforms.unshift(viteComarkSlot);
+        },
+        resolveId(id) {
+            if (id === VIRTUAL_COMPONENTS_ID)
+                return RESOLVED_COMPONENTS_ID;
+        },
+        async load(id) {
+            if (id !== RESOLVED_COMPONENTS_ID)
+                return;
+            const files = await resolveProseFiles();
+            return generateComponentsModule(files);
+        },
+        async transform(code) {
+            if (!code.includes('createApp') || !code.includes('.mount('))
+                return null;
+            // Skip if already injected
+            if (code.includes(VIRTUAL_COMPONENTS_ID))
+                return null;
+            const files = await resolveProseFiles();
+            if (!files.length)
+                return null;
+            const injected = `import __comarkProse from ${JSON.stringify(VIRTUAL_COMPONENTS_ID)};\n`
+                + code.replace(/\.mount\s*\(/, '.use(__comarkProse).mount(');
+            return { code: injected, map: null };
+        },
+        configureServer(server) {
+            if (!proseDir)
+                return;
+            server.watcher.add(proseDir);
+            const invalidate = (file) => {
+                invalidateCache(file);
+                const mod = server.moduleGraph.getModuleById(RESOLVED_COMPONENTS_ID);
+                if (mod)
+                    server.moduleGraph.invalidateModule(mod);
+            };
+            server.watcher.on('add', invalidate);
+            server.watcher.on('unlink', invalidate);
+        },
+    };
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@comark/vue",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "Vue components for Comark",
+  "exports": {
+    ".": "./dist/index.js",
+    "./vite": "./dist/vite.js",
+    "./plugins/*": "./dist/plugins/*.js",
+    "./utils": "./dist/utils/index.js",
+    "./parse": "./dist/parse.js",
+    "./render": "./dist/render.js",
+    "./components/*": "./dist/components/*.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "stub": "node ../../scripts/stub.mjs",
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest run",
+    "prepack": "tsc",
+    "release": "release-it"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0",
+    "beautiful-mermaid": "^1.1.3",
+    "katex": "^0.16.33",
+    "shiki": "^3.22.0"
+  },
+  "peerDependenciesMeta": {
+    "shiki": {
+      "optional": true
+    },
+    "beautiful-mermaid": {
+      "optional": true
+    },
+    "katex": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "comark": "^0.0.1"
+  },
+  "devDependencies": {
+    "@vue/server-renderer": "^3.5.30",
+    "comark": "workspace:*",
+    "vitest": "^4.1.1",
+    "vue": "^3.5.30"
+  }
+}