@canofold/vite 0.3.1 → 0.3.3

package/README.md

@@ -15,4 +15,14 @@ export default defineConfig({
 
 Run `canofold dev`; Vite is mounted on the same development server and port.
 
+Canofold and Vite share one HTTP server, and a development session creates only one long-lived Vite server. Vite's module graph watches components, styles, and Demo dependencies and delivers their HMR updates; Canofold continues to rebuild Markdown and Canofold configuration inputs.
+
+No documentation-specific Vite configuration is required. `@canofold/vite` reuses the project's existing `vite.config`, plugins, aliases, React resolution, TypeScript/JSX settings, and CSS pipeline. Demos should import components through the package name or aliases the project already uses. Component CSS belongs in the component or Demo dependency graph, not in Canofold's site-level `styles` list.
+
+For a standard component library with a package name and one `build.lib.entry`, Canofold resolves the package name to that source entry when no same-name alias exists, so the entry does not need to be repeated as an alias. Multi-entry libraries and workspaces are not inferred and keep using their existing exports or aliases.
+
+Production uses one Vite graph for the Markdown browser enhancer, Demo runtime, and project components. The component project owns React and React DOM resolution, while Vite deduplicates them and splits Demo JavaScript and CSS on demand instead of placing every example in the entry chunk. That graph emits a lightweight Markdown entry and a Demo entry: pages without Demos do not statically load React for native Markdown behavior, while Demo pages reuse the enhancer from the Demo entry.
+
+Use `demos.setup` only for shared providers, themes, internationalization, or routing context. Ordinary components do not need it.
+
 Demos render inline by default. `sandbox="iframe"` places trusted local demo code in a restricted iframe for DOM and global-style isolation; it is not a security boundary for untrusted code.

package/README.zh-CN.md

@@ -13,4 +13,14 @@ export default defineConfig({
 })
 ```
 
+运行 `canofold dev` 即可。Canofold 与 Vite 共用一个 HTTP Server 和端口；同一开发会话只创建一个 Vite Server，组件、样式和 Demo 依赖由 Vite module graph 监听并通过 HMR 更新，Markdown 与 Canofold 配置仍由 Canofold 重建。
+
+无需为文档单独维护 Vite 配置。`@canofold/vite` 会复用项目现有的 `vite.config`、插件、alias、React、TypeScript/JSX 与 CSS 配置。Demo 应像应用代码一样从组件包名或项目已有 alias 导入组件，组件 CSS 由组件或 Demo 自己 import；不要把每个组件样式登记到 Canofold 的 `styles`。
+
+对于 `package.json` 有包名且 `build.lib.entry` 只有一个入口的标准组件库，Canofold 会在没有同名自定义 alias 时自动把包名解析到该源码入口，因此不需要把同一入口再写一遍 alias。多入口库和 workspace 不做推断，继续使用项目已有的 exports 或 alias。
+
+生产构建中，Markdown 浏览器增强、Demo 运行时和项目组件进入同一 Vite 构建图。React 与 React DOM 由组件项目解析并去重，Demo 与 CSS 按需分块，不会把全部示例和样式无条件放进入口。同一构建图会输出轻量 Markdown 入口和 Demo 入口：没有 Demo 的页面不会因为原生 Markdown 交互而静态加载 React，有 Demo 的页面则复用 Demo 入口中的 Markdown 增强能力。
+
+`demos.setup` 只用于所有 Demo 共享的 Provider、主题、国际化或路由环境；普通组件不需要设置。
+
 Demo 默认渲染在文档页面中。`sandbox="iframe"` 会把可信的本地 Demo 放进受限 iframe，隔离 DOM 与全局样式；它不是运行不可信代码的安全边界。

package/dist/index.js

@@ -1,7 +1,9 @@
 // src/index.ts
+import { createHash } from "crypto";
 import { realpathSync } from "fs";
-import { readFile, writeFile } from "fs/promises";
+import { access, readFile, readdir } from "fs/promises";
 import { extname, isAbsolute, join, relative, resolve, sep } from "path";
+import { fileURLToPath } from "url";
 import {
   build as viteBuild,
   createServer as createViteServer,
@@ -11,16 +13,16 @@ import {
 } from "vite";
 
 // src/runtime.ts
-function demoRuntimeSource(registryEntries, setupImport, styleUrls = []) {
+function demoRuntimeSource(registryEntries, setupImport, markdownClientSpecifier) {
   const imports = registryEntries.join("\n");
   const setup = setupImport ?? "const CanofoldDemoSetup = null;";
   return `${imports}
 ${setup}
+export { enhanceMarkdown } from ${JSON.stringify(markdownClientSpecifier)};
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 const registry = new Map(CANOFOLD_DEMO_REGISTRY);
-const iframeStyleUrls = ${JSON.stringify(styleUrls)};
 const roots = new Set();
 const frameObservers = new Set();
 let eventController;
@@ -34,15 +36,16 @@ class DemoBoundary extends React.Component {
   }
 }
 
-function componentFor(id) {
-  const value = registry.get(id);
+async function componentFor(id) {
+  const load = registry.get(id);
+  const value = load && await load();
   const component = value && (value.default || value.Demo);
   if (!component) throw new Error('Demo module ' + id + ' must export a default React component.');
   return component;
 }
 
-export function mountDemo(element, id, failedLabel) {
-  const Demo = componentFor(id);
+export async function mountDemo(element, id, failedLabel) {
+  const Demo = await componentFor(id);
   const content = React.createElement(Demo);
   const wrapped = CanofoldDemoSetup ? React.createElement(CanofoldDemoSetup, null, content) : content;
   const root = createRoot(element);
@@ -53,8 +56,7 @@ export function mountDemo(element, id, failedLabel) {
 
 function iframeDocument(id, failedLabel) {
   const script = \`import(\${JSON.stringify(import.meta.url)}).then(({ mountDemo }) => mountDemo(document.getElementById('root'),\${JSON.stringify(id)},\${JSON.stringify(failedLabel)})).catch((error) => { console.error('[Canofold demo iframe]', error); const root = document.getElementById('root'); root.setAttribute('role', 'alert'); root.textContent = \${JSON.stringify(failedLabel)}; });\`;
-  const styles = iframeStyleUrls.map((href) => '<link rel="stylesheet" href="' + href.replace(/&/g, '&amp;').replace(/"/g, '&quot;') + '">').join('');
-  return '<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">' + styles + '<style>html,body,#root{min-height:100%;margin:0}body{display:grid;place-items:center;padding:24px;box-sizing:border-box;font-family:system-ui,sans-serif}</style></head><body><div id="root"></div><script type="module">' + script.replace(/<\\/script/gi, '<\\\\/script') + '<\\/script></body></html>';
+  return '<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><style>html,body,#root{min-height:100%;margin:0}body{display:grid;place-items:center;padding:24px;box-sizing:border-box;font-family:system-ui,sans-serif}</style></head><body><div id="root"></div><script type="module">' + script.replace(/<\\/script/gi, '<\\\\/script') + '<\\/script></body></html>';
 }
 
 function fitFrame(frame) {
@@ -86,7 +88,7 @@ function bindSourceToggle(button, signal) {
   button.addEventListener('click', () => setExpanded(button.getAttribute('aria-expanded') !== 'true'), { signal });
 }
 
-function standaloneDemo() {
+async function standaloneDemo() {
   const id = new URL(window.location.href).searchParams.get('canofold-demo');
   if (!id || !registry.has(id)) return false;
   const preview = Array.from(document.querySelectorAll('[data-cf-demo-preview]')).find(
@@ -98,13 +100,13 @@ function standaloneDemo() {
   root.setAttribute('data-cf-demo-id', id);
   document.documentElement.setAttribute('data-cf-demo-standalone', '');
   document.body.replaceChildren(root);
-  mountDemo(root, id, failed);
+  await mountDemo(root, id, failed);
   return true;
 }
 
 export async function bootstrapDemos() {
   window.__canofoldDemoDispose?.();
-  if (standaloneDemo()) {
+  if (await standaloneDemo()) {
     window.__canofoldDemoDispose = () => {
       roots.forEach((root) => root.unmount());
       roots.clear();
@@ -115,7 +117,7 @@ export async function bootstrapDemos() {
   document.documentElement.removeAttribute('data-cf-demo-standalone');
   eventController = new AbortController();
   document.querySelectorAll('[data-cf-demo-source-toggle]').forEach((button) => bindSourceToggle(button, eventController.signal));
-  document.querySelectorAll('[data-cf-demo-preview]').forEach((preview) => {
+  await Promise.all(Array.from(document.querySelectorAll('[data-cf-demo-preview]')).map(async (preview) => {
     const id = preview.getAttribute('data-cf-demo-id');
     if (!id) return;
     const loading = preview.getAttribute('data-cf-demo-loading-label') || 'Loading example\u2026';
@@ -135,14 +137,14 @@ export async function bootstrapDemos() {
         preview.replaceChildren(frame);
       } else {
         preview.textContent = '';
-        mountDemo(preview, id, failed);
+        await mountDemo(preview, id, failed);
       }
     } catch (error) {
       console.error('[Canofold demo]', error);
       preview.textContent = failed;
       preview.setAttribute('data-cf-demo-error', '');
     }
-  });
+  }));
   window.__canofoldDemoDispose = () => {
     eventController?.abort();
     eventController = undefined;
@@ -165,6 +167,21 @@ if (import.meta.hot) {
 // src/index.ts
 var PUBLIC_CLIENT_ID = "virtual:canofold-demo-client";
 var RESOLVED_CLIENT_ID = `\0${PUBLIC_CLIENT_ID}`;
+var PUBLIC_MARKDOWN_CLIENT_ID = "virtual:canofold-markdown-client";
+var RESOLVED_MARKDOWN_CLIENT_ID = `\0${PUBLIC_MARKDOWN_CLIENT_ID}`;
+var PACKAGE_MODULE_PATH = fileURLToPath(import.meta.url);
+var PROJECT_METADATA_FILES = [
+  "package.json",
+  "pnpm-lock.yaml",
+  "package-lock.json",
+  "yarn.lock",
+  "bun.lock",
+  "bun.lockb"
+];
+var devSessions = /* @__PURE__ */ new WeakMap();
+function jsonForJavaScript(value) {
+  return JSON.stringify(value).replace(/</g, "\\u003c").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+}
 function baseUrl(basePath, path) {
   const prefix = basePath === "/" ? "" : basePath.replace(/\/$/, "");
   return `${prefix}/${path.replace(/^\//, "")}`;
@@ -191,6 +208,21 @@ function canonicalPath(path) {
     return resolve(path);
   }
 }
+async function projectMetadataPaths(projectRoot) {
+  const candidates = PROJECT_METADATA_FILES.map((file) => join(projectRoot, file));
+  const existing = await Promise.all(
+    candidates.map(async (path) => {
+      try {
+        await access(path);
+        return canonicalPath(path);
+      } catch (error) {
+        if (error.code === "ENOENT") return void 0;
+        throw error;
+      }
+    })
+  );
+  return existing.filter((path) => Boolean(path));
+}
 function isProjectSource(cwd, path) {
   const projectRelative = relative(canonicalPath(cwd), canonicalPath(path));
   return projectRelative !== ".." && !projectRelative.startsWith(`..${sep}`) && !isAbsolute(projectRelative) && !projectRelative.split(sep).some((segment) => segment === "node_modules" || segment === ".canofold");
@@ -273,30 +305,78 @@ async function resolvedSetup(server, setup, cwd) {
     dependencyPaths: await collectLocalDependencies(server, modulePath, cwd)
   };
 }
+function hasPackageAlias(config, packageName) {
+  const alias = config.resolve?.alias;
+  if (!alias) return false;
+  if (!Array.isArray(alias)) return Object.hasOwn(alias, packageName);
+  return alias.some(
+    ({ find }) => typeof find === "string" ? find === packageName : new RegExp(find.source, find.flags).test(packageName)
+  );
+}
+function singleLibraryEntry(config) {
+  const library = config.build?.lib;
+  if (!library) return void 0;
+  const { entry } = library;
+  if (typeof entry === "string") return entry;
+  if (Array.isArray(entry)) return entry.length === 1 ? entry[0] : void 0;
+  const entries = Object.values(entry);
+  return entries.length === 1 ? entries[0] : void 0;
+}
+async function inferredPackageAlias(config, projectRoot) {
+  const entry = singleLibraryEntry(config);
+  if (!entry) return void 0;
+  try {
+    const manifest = JSON.parse(await readFile(join(projectRoot, "package.json"), "utf8"));
+    if (typeof manifest.name !== "string" || manifest.name.length === 0) return void 0;
+    if (hasPackageAlias(config, manifest.name)) return void 0;
+    return {
+      find: new RegExp(`^${manifest.name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}$`),
+      replacement: canonicalPath(resolve(projectRoot, entry))
+    };
+  } catch (error) {
+    if (error.code === "ENOENT") return void 0;
+    throw error;
+  }
+}
 function virtualClientPlugin({
+  projectRoot,
   getDemos,
-  getSetup,
-  styleUrls = []
+  getSetup
 }) {
   return {
     name: "canofold-demo-client",
     enforce: "post",
+    async config(config) {
+      const alias = await inferredPackageAlias(config, projectRoot);
+      return alias ? { resolve: { alias: [alias] } } : void 0;
+    },
     resolveId(id) {
-      return id === PUBLIC_CLIENT_ID ? RESOLVED_CLIENT_ID : void 0;
+      if (id === PUBLIC_CLIENT_ID) return RESOLVED_CLIENT_ID;
+      if (id === PUBLIC_MARKDOWN_CLIENT_ID) return RESOLVED_MARKDOWN_CLIENT_ID;
+      return void 0;
     },
-    load(id) {
+    async load(id) {
+      if (id === RESOLVED_MARKDOWN_CLIENT_ID) {
+        const markdownClient = await this.resolve("@canofold/markdown/client", PACKAGE_MODULE_PATH, {
+          skipSelf: true
+        });
+        if (!markdownClient || markdownClient.external) {
+          throw new Error("@canofold/vite could not resolve its @canofold/markdown client dependency");
+        }
+        return `export { enhanceMarkdown } from ${jsonForJavaScript(normalizePath(markdownClient.id))};`;
+      }
       if (id !== RESOLVED_CLIENT_ID) return void 0;
       const entries = [];
       const registry = [];
-      getDemos().forEach((demo, index) => {
-        const binding = `CanofoldDemo${index}`;
-        entries.push(`import * as ${binding} from ${JSON.stringify(normalizePath(demo.modulePath))};`);
-        registry.push(`[${JSON.stringify(demo.id)}, ${binding}]`);
+      getDemos().forEach((demo) => {
+        registry.push(
+          `[${jsonForJavaScript(demo.id)}, () => import(${jsonForJavaScript(normalizePath(demo.modulePath))})]`
+        );
       });
       entries.push(`const CANOFOLD_DEMO_REGISTRY = [${registry.join(",")}];`);
       const setup = getSetup();
-      const setupImport = setup ? `import CanofoldDemoSetup from ${JSON.stringify(setup)};` : void 0;
-      return demoRuntimeSource(entries, setupImport, styleUrls);
+      const setupImport = setup ? `import CanofoldDemoSetup from ${jsonForJavaScript(setup)};` : void 0;
+      return demoRuntimeSource(entries, setupImport, PUBLIC_MARKDOWN_CLIENT_ID);
     }
   };
 }
@@ -308,6 +388,9 @@ function inlineConfig(cwd, basePath, options, plugins) {
     base: basePath,
     appType: "custom",
     plugins: Array.isArray(plugins) ? plugins : [plugins],
+    // The dev server ships native ESM to the current browser. Avoid asking
+    // esbuild to lower dependency syntax that its transformer cannot lower.
+    optimizeDeps: { esbuildOptions: { target: "esnext" } },
     resolve: { dedupe: ["react", "react-dom"] }
   };
 }
@@ -320,15 +403,22 @@ function demoBuildOptions(context) {
     outDir: join(context.outputRoot, "assets/canofold-demos"),
     emptyOutDir: true,
     copyPublicDir: false,
-    cssCodeSplit: false,
+    cssCodeSplit: true,
     rollupOptions: {
       external: () => false,
-      input: PUBLIC_CLIENT_ID,
+      // Canofold loads both browser entries with dynamic import() and consumes
+      // their named exports. Vite's application default may otherwise remove
+      // entry exports that are not referenced inside the bundle.
+      preserveEntrySignatures: "strict",
+      input: {
+        index: PUBLIC_CLIENT_ID,
+        markdown: PUBLIC_MARKDOWN_CLIENT_ID
+      },
       output: {
         format: "es",
-        inlineDynamicImports: true,
-        entryFileNames: "index.js",
-        assetFileNames: (asset) => asset.names?.some((name) => name.endsWith(".css")) ? "styles.css" : "[name][extname]"
+        entryFileNames: "[name].js",
+        chunkFileNames: "chunks/[name]-[hash].js",
+        assetFileNames: "assets/[name]-[hash][extname]"
       }
     }
   };
@@ -341,12 +431,20 @@ async function isolatedBuildConfig(context, options, plugin, build) {
     configFile,
     root
   );
-  const sharedConfig = { ...loaded?.config ?? {} };
+  let sharedConfig = { ...loaded?.config ?? {} };
+  const packageAlias = await inferredPackageAlias(sharedConfig, root);
+  if (packageAlias) {
+    sharedConfig = mergeConfig(sharedConfig, { resolve: { alias: [packageAlias] } });
+  }
   delete sharedConfig.build;
   delete sharedConfig.server;
   delete sharedConfig.preview;
   const engineConfig = {
     ...inlineConfig(context.cwd, context.basePath, { ...options, configFile: false }, plugin),
+    // The demo bundle is emitted below the site's own asset directory. Vite 8
+    // resolves preload dependencies from `base`, so using the site root here
+    // would incorrectly request demo chunks from `/chunks` and `/assets`.
+    base: baseUrl(context.basePath, "/assets/canofold-demos/"),
     mode: "production",
     define: {
       "process.env.NODE_ENV": JSON.stringify("production")
@@ -354,17 +452,23 @@ async function isolatedBuildConfig(context, options, plugin, build) {
     esbuild: {
       jsxDev: false
     },
-    build
+    build: {
+      // Markdown browser modules are published as ES2022. Keep that baseline
+      // when a component project does not declare its own Vite target.
+      target: loaded?.config.build?.target ?? "es2022",
+      ...build
+    }
   };
   return mergeConfig(sharedConfig, engineConfig);
 }
 async function prepareDemos(context, options) {
+  const projectRoot = canonicalPath(options.root ? resolve(context.cwd, options.root) : context.cwd);
   let demos = [];
   let setup;
   const plugin = virtualClientPlugin({
+    projectRoot,
     getDemos: () => demos,
-    getSetup: () => setup,
-    styleUrls: context.mode === "build" ? [baseUrl(context.basePath, "/assets/canofold-demos/styles.css")] : []
+    getSetup: () => setup
   });
   const server = await createViteServer({
     ...inlineConfig(context.cwd, context.basePath, options, plugin),
@@ -384,6 +488,7 @@ async function prepareDemos(context, options) {
       dependencyPaths: [
         .../* @__PURE__ */ new Set([
           ...server.config.configFileDependencies.map((path) => canonicalPath(path)),
+          ...await projectMetadataPaths(projectRoot),
           ...resolved?.dependencyPaths ?? []
         ])
       ],
@@ -393,6 +498,119 @@ async function prepareDemos(context, options) {
     await server.close();
   }
 }
+function devSessionKey(context, options) {
+  return JSON.stringify({
+    cwd: canonicalPath(context.cwd),
+    outputRoot: canonicalPath(context.outputRoot),
+    basePath: context.basePath,
+    root: options.root ?? null,
+    configFile: options.configFile ?? null
+  });
+}
+async function configDependencySignature(paths) {
+  const hash = createHash("sha256");
+  for (const path of [...paths].map(canonicalPath).sort()) {
+    hash.update(path);
+    try {
+      hash.update(await readFile(path));
+    } catch (error) {
+      if (error.code !== "ENOENT") throw error;
+      hash.update("\0missing");
+    }
+  }
+  return hash.digest("hex");
+}
+async function devEnvironmentSignature(server, projectRoot) {
+  return configDependencySignature([
+    ...server.config.configFileDependencies,
+    ...await projectMetadataPaths(projectRoot)
+  ]);
+}
+function isGeneratedPath(context, path) {
+  const projectRelative = relative(canonicalPath(context.cwd), canonicalPath(path));
+  const outputRelative = relative(canonicalPath(context.outputRoot), canonicalPath(path));
+  return projectRelative.split(sep).some((segment) => segment === "node_modules" || segment === ".git" || segment === ".canofold") || outputRelative !== ".." && !outputRelative.startsWith(`..${sep}`) && !isAbsolute(outputRelative);
+}
+async function prepareDevDemos(context, options) {
+  if (!context.server) {
+    throw new Error("@canofold/vite requires the shared Canofold HTTP server in dev mode");
+  }
+  const key = devSessionKey(context, options);
+  const projectRoot = canonicalPath(options.root ? resolve(context.cwd, options.root) : context.cwd);
+  let session = devSessions.get(context.server);
+  const environmentChanged = session?.key === key && await devEnvironmentSignature(session.server, projectRoot) !== session.environmentSignature;
+  if (environmentChanged && session) {
+    await session.server.restart(true);
+    session.environmentSignature = await devEnvironmentSignature(session.server, projectRoot);
+  }
+  if (session?.key !== key) {
+    if (session) await session.server.close();
+    const state = { demos: [] };
+    const plugin = virtualClientPlugin({
+      projectRoot,
+      getDemos: () => state.demos,
+      getSetup: () => state.setup
+    });
+    const server = await createViteServer({
+      ...inlineConfig(context.cwd, context.basePath, options, plugin),
+      server: {
+        middlewareMode: true,
+        hmr: { server: context.server },
+        watch: { ignored: (path) => isGeneratedPath(context, path) }
+      }
+    });
+    session = {
+      key,
+      environmentSignature: await devEnvironmentSignature(server, projectRoot),
+      server,
+      plugin,
+      state
+    };
+    devSessions.set(context.server, session);
+  }
+  const wasInitialized = session.state.demos.length > 0 || session.state.setup !== void 0;
+  const previousSignature = JSON.stringify([
+    session.state.demos.map((demo) => [demo.id, demo.modulePath]),
+    session.state.setup
+  ]);
+  const demos = await Promise.all(
+    context.demos.map((reference) => resolveDemo(session.server, reference, context.cwd))
+  );
+  const setup = await resolvedSetup(session.server, context.setup, context.cwd);
+  session.state.demos = demos;
+  session.state.setup = setup?.id;
+  const nextSignature = JSON.stringify([
+    session.state.demos.map((demo) => [demo.id, demo.modulePath]),
+    session.state.setup
+  ]);
+  if (wasInitialized && previousSignature !== nextSignature) {
+    const module = session.server.moduleGraph.getModuleById(RESOLVED_CLIENT_ID);
+    if (module) session.server.moduleGraph.invalidateModule(module);
+    session.server.ws.send({ type: "full-reload" });
+  }
+  return {
+    demos,
+    setup: session.state.setup,
+    dependencyPaths: [
+      .../* @__PURE__ */ new Set([
+        ...session.server.config.configFileDependencies.map((path) => canonicalPath(path)),
+        ...await projectMetadataPaths(projectRoot),
+        ...setup?.dependencyPaths ?? []
+      ])
+    ],
+    plugin: session.plugin
+  };
+}
+async function outputPathsUnder(root, prefix) {
+  const entries = await readdir(root, { withFileTypes: true });
+  const paths = await Promise.all(
+    entries.map(async (entry) => {
+      const relativePath = `${prefix}/${entry.name}`;
+      return entry.isDirectory() ? outputPathsUnder(join(root, entry.name), relativePath) : [relativePath];
+    })
+  );
+  return paths.flat().sort();
+}
 function vite(options = {}) {
   return {
     id: "@canofold/vite",
@@ -402,63 +620,46 @@ function vite(options = {}) {
       configFile: options.configFile ?? null
     },
     async prepare(context) {
-      const prepared = await prepareDemos(context, options);
+      const prepared = context.mode === "dev" ? await prepareDevDemos(context, options) : await prepareDemos(context, options);
       if (context.mode === "build") {
         const build = demoBuildOptions(context);
         await viteBuild(await isolatedBuildConfig(context, options, prepared.plugin, build));
-        await writeFile(join(context.outputRoot, "assets/canofold-demos/styles.css"), "", {
-          flag: "a"
-        });
       }
+      const clientUrl = context.mode === "build" ? baseUrl(context.basePath, "/assets/canofold-demos/index.js") : baseUrl(context.basePath, `/@id/__x00__${PUBLIC_CLIENT_ID}`);
+      const markdownClientUrl = context.mode === "build" ? baseUrl(context.basePath, "/assets/canofold-demos/markdown.js") : baseUrl(context.basePath, `/@id/__x00__${PUBLIC_MARKDOWN_CLIENT_ID}`);
       return {
-        clientUrl: context.mode === "build" ? baseUrl(context.basePath, "/assets/canofold-demos/index.js") : baseUrl(context.basePath, `/@id/__x00__${PUBLIC_CLIENT_ID}`),
-        ...context.mode === "build" ? { styleUrls: [baseUrl(context.basePath, "/assets/canofold-demos/styles.css")] } : {},
+        clientUrl,
+        markdownClientUrl,
         demos: Object.fromEntries(prepared.demos.map((demo) => [demo.id, demo])),
         dependencyPaths: prepared.dependencyPaths,
         ...context.mode === "build" ? {
-          outputPaths: ["assets/canofold-demos/index.js", "assets/canofold-demos/styles.css"]
+          outputPaths: await outputPathsUnder(
+            join(context.outputRoot, "assets/canofold-demos"),
+            "assets/canofold-demos"
+          )
         } : {}
       };
     },
     async startDev(context) {
-      const currentDemos = () => context.getDemos();
-      let setup;
-      const plugin = virtualClientPlugin({ getDemos: currentDemos, getSetup: () => setup });
-      const server = await createViteServer({
-        ...inlineConfig(context.cwd, context.basePath, options, plugin),
-        server: {
-          middlewareMode: true,
-          hmr: { server: context.server },
-          watch: { ignored: (path) => context.shouldIgnorePath(path) }
-        }
-      });
-      setup = (await resolvedSetup(server, context.setup, context.cwd))?.id;
-      let demoSignature = JSON.stringify(
-        currentDemos().map((demo) => [demo.id, normalizePath(demo.modulePath)])
-      );
+      const session = devSessions.get(context.server);
+      if (!session) {
+        throw new Error("@canofold/vite dev session was not prepared on the shared HTTP server");
+      }
+      const { server } = session;
       return {
         middleware(request, response, next) {
           server.middlewares(request, response, next);
         },
         handlesFile(path) {
           const absolutePath = canonicalPath(path);
-          const isEntry = currentDemos().some((demo) => canonicalPath(demo.modulePath) === absolutePath);
-          if (isEntry || setup && canonicalPath(filePathFromResolvedId(setup)) === absolutePath) {
-            return false;
-          }
           return Boolean(server.moduleGraph.getModulesByFile(absolutePath)?.size);
         },
-        update() {
-          const nextSignature = JSON.stringify(
-            currentDemos().map((demo) => [demo.id, normalizePath(demo.modulePath)])
-          );
-          if (nextSignature === demoSignature) return;
-          demoSignature = nextSignature;
-          const module = server.moduleGraph.getModuleById(RESOLVED_CLIENT_ID);
-          if (module) server.moduleGraph.invalidateModule(module);
-          server.ws.send({ type: "full-reload" });
-        },
-        close: () => server.close()
+        async close() {
+          if (devSessions.get(context.server) === session) {
+            devSessions.delete(context.server);
+          }
+          await server.close();
+        }
       };
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canofold/vite",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "Official Vite demo engine for interactive Canofold component documentation.",
   "license": "MIT",
   "author": "Canofold Contributors",
@@ -41,19 +41,24 @@
     "access": "public",
     "provenance": true
   },
+  "dependencies": {
+    "@canofold/markdown": "0.3.3"
+  },
   "peerDependencies": {
-    "canofold": "^0.3.1",
+    "canofold": "^0.3.3",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "vite": "^6.4.0 || ^7.0.0 || ^8.0.0"
   },
   "devDependencies": {
-    "@types/node": "^22.10.0",
+    "@types/node": "^22.20.3",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
     "tsup": "^8.3.5",
     "typescript": "^6.0.3",
     "vite": "^6.4.3",
     "vitest": "^4.1.11",
-    "canofold": "0.3.1"
+    "canofold": "0.3.3"
   },
   "scripts": {
     "build": "tsup",