markmap-cli 0.18.4 → 0.18.5-alpha.7

package/dist/client/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/client.js

@@ -0,0 +1,91 @@
+const { mm, markmap } = window;
+const { cliOptions } = markmap;
+const key = new URLSearchParams(window.location.search).get("key") || "";
+const state = {
+  content: {
+    ts: 0,
+    value: void 0
+  },
+  line: {
+    ts: 0,
+    value: 0
+  }
+};
+const activeNodeOptions = {};
+const highlightEl = document.createElement("div");
+highlightEl.className = "markmap-highlight-area";
+checkData();
+async function checkData() {
+  var _a;
+  try {
+    const query = new URLSearchParams(
+      [
+        ["key", key],
+        ["content", state.content.ts],
+        ["line", state.line.ts]
+      ].map((pair) => pair.map((s) => `${s}`))
+    );
+    const resp = await fetch(`/~data?${query}`);
+    if (!resp.ok)
+      throw {
+        status: resp.status
+      };
+    const res = await resp.json();
+    if (res.content) {
+      const value = res.content.value;
+      mm.setOptions(markmap.deriveOptions((_a = value.frontmatter) == null ? void 0 : _a.markmap));
+      await mm.setData(value.root);
+      if (!state.content.ts) await mm.fit();
+    }
+    Object.assign(state, res);
+    if (res.line && state.content.value) {
+      await setCursor({ line: res.line.value });
+    }
+    setTimeout(checkData);
+  } catch (err) {
+    if (err.status !== 404) {
+      setTimeout(checkData, 1e3);
+    }
+  }
+}
+function findActiveNode({
+  line,
+  autoExpand = true
+}) {
+  function dfs(node, ancestors = []) {
+    var _a, _b, _c;
+    const [start, end] = ((_b = (_a = node.payload) == null ? void 0 : _a.lines) == null ? void 0 : _b.split(",").map((s) => +s)) || [];
+    if (start >= 0 && start <= line && line < end) {
+      best = node;
+      bestAncestors = ancestors;
+    }
+    ancestors = [...ancestors, node];
+    (_c = node.children) == null ? void 0 : _c.forEach((child) => {
+      dfs(child, ancestors);
+    });
+  }
+  let best;
+  let bestAncestors = [];
+  dfs(state.content.value.root);
+  if (autoExpand) {
+    bestAncestors.forEach((node) => {
+      var _a;
+      if ((_a = node.payload) == null ? void 0 : _a.fold) {
+        node.payload.fold = 0;
+      }
+    });
+  }
+  return best;
+}
+async function setCursor(options) {
+  if (!state.content.value) return;
+  const node = findActiveNode(options);
+  await highlightNode(node);
+}
+async function highlightNode(node) {
+  await mm.setHighlight(node);
+  if (!node) return;
+  await mm[activeNodeOptions.placement === "center" ? "centerNode" : "ensureVisible"](node, {
+    bottom: cliOptions.toolbar ? 80 : 0
+  });
+}

package/dist/dev-server.d.ts

@@ -1,5 +1,29 @@
+import { ServerType } from '@hono/node-server';
+import { Transformer } from 'markmap-lib';
+import { AddressInfo } from 'net';
 import { IContentProvider, IDevelopOptions } from './types';
-export declare function develop(fileName: string | undefined, options: IDevelopOptions): Promise<{
-    provider: IContentProvider;
-    close(): Promise<void>;
-}>;
+export declare class MarkmapDevServer {
+    options: IDevelopOptions;
+    providers: Record<string, IContentProvider>;
+    private transformer;
+    private html;
+    private watcher;
+    private callbacks;
+    private disposeList;
+    serverInfo: {
+        server: ServerType;
+        address: AddressInfo;
+    } | null;
+    constructor(options: IDevelopOptions, transformer?: Transformer);
+    private _buildHtml;
+    setup(): Promise<void>;
+    shutdown(): Promise<void>;
+    destroy(): Promise<void>;
+    private _watch;
+    addProvider(options?: {
+        key?: string;
+        filePath?: string;
+    }): IContentProvider;
+    delProvider(key: string): void;
+}
+export declare function develop(options: IDevelopOptions): Promise<MarkmapDevServer>;

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 import { type IMarkmapCreateOptions } from 'markmap-lib';
-import { config } from './util';
-import { IDevelopOptions } from './types';
-import { develop } from './dev-server';
 import { fetchAssets } from './fetch-assets';
-export * from 'markmap-lib';
+import { IDevelopOptions } from './types';
+import { config } from './util';
+export * from './dev-server';
 export * from './types';
-export { config, develop, fetchAssets };
-export declare function createMarkmap(options: IMarkmapCreateOptions & IDevelopOptions): Promise<void>;
+export { config, fetchAssets };
+export * as markmap from 'markmap-lib';
+export declare function createMarkmap(options: IMarkmapCreateOptions & IDevelopOptions & {
+    open: boolean;
+}): Promise<void>;
 export declare function main(): Promise<void>;

package/dist/index.js

@@ -1,77 +1,21 @@
-import { readFile, stat, mkdir, writeFile } from "fs/promises";
-import { dirname, join, resolve } from "path";
-import { fileURLToPath } from "url";
 import { Command } from "commander";
-import open from "open";
-import updateNotifier from "update-notifier";
-import { readPackageUp } from "read-package-up";
-import { buildCSSItem, buildJSItem, defer } from "markmap-common";
+import { readFile, stat, mkdir, writeFile } from "fs/promises";
+import { buildCSSItem, buildJSItem, mergeAssets, defer, extractAssets } from "markmap-common";
 import { Transformer } from "markmap-lib";
-export * from "markmap-lib";
+import * as markmapLib from "markmap-lib";
 import { fillTemplate, baseJsPaths } from "markmap-render";
+import open from "open";
+import { dirname, join, resolve, basename } from "path";
+import { readPackageUp } from "read-package-up";
+import updateNotifier from "update-notifier";
+import { fileURLToPath } from "url";
 import { serve } from "@hono/node-server";
 import { watch } from "chokidar";
-import { EventEmitter } from "events";
+import { createHash } from "crypto";
 import { createReadStream, createWriteStream } from "fs";
 import { Hono } from "hono";
 import { Readable } from "stream";
 import { finished } from "stream/promises";
-const TOOLBAR_VERSION = "0.18.4";
-const TOOLBAR_CSS = `markmap-toolbar@${TOOLBAR_VERSION}/dist/style.css`;
-const TOOLBAR_JS = `markmap-toolbar@${TOOLBAR_VERSION}/dist/index.js`;
-const currentDir = dirname(fileURLToPath(import.meta.url));
-const ASSETS_PREFIX = "/assets/";
-const renderToolbar = () => {
-  const { markmap, mm } = window;
-  const toolbar = new markmap.Toolbar();
-  toolbar.attach(mm);
-  const el = toolbar.render();
-  el.setAttribute("style", "position:absolute;bottom:20px;right:20px");
-  document.body.append(el);
-};
-function addToolbar(urlBuilder, assets) {
-  return {
-    styles: [
-      ...assets.styles || [],
-      ...[TOOLBAR_CSS].map((path) => urlBuilder.getFullUrl(path)).map((path) => buildCSSItem(path))
-    ],
-    scripts: [
-      ...assets.scripts || [],
-      ...[TOOLBAR_JS].map((path) => urlBuilder.getFullUrl(path)).map((path) => buildJSItem(path)),
-      {
-        type: "iife",
-        data: {
-          fn: (r) => {
-            setTimeout(r);
-          },
-          getParams: () => [renderToolbar]
-        }
-      }
-    ]
-  };
-}
-function localProvider(path) {
-  return `${ASSETS_PREFIX}${path}`;
-}
-function createStreamBody(stream) {
-  const body = new ReadableStream({
-    start(controller) {
-      stream.on("data", (chunk) => {
-        controller.enqueue(chunk);
-      });
-      stream.on("end", () => {
-        controller.close();
-      });
-    },
-    cancel() {
-      stream.destroy();
-    }
-  });
-  return body;
-}
-const config = {
-  assetsDir: `${currentDir}${ASSETS_PREFIX}`
-};
 var getMimeType = (filename, mimes = baseMimes) => {
   const regexp = /\.([a-zA-Z0-9]+?)$/;
   const match = filename.match(regexp);
@@ -79,7 +23,7 @@ var getMimeType = (filename, mimes = baseMimes) => {
     return;
   }
   let mimeType = mimes[match[1]];
-  if (mimeType && mimeType.startsWith("text") || mimeType === "application/json") {
+  if (mimeType && mimeType.startsWith("text")) {
     mimeType += "; charset=utf-8";
   }
   return mimeType;
@@ -142,215 +86,343 @@ var _baseMimes = {
   glb: "model/gltf-binary"
 };
 var baseMimes = _baseMimes;
+const TOOLBAR_VERSION = "0.18.5-alpha.7+41488b9";
+const TOOLBAR_CSS = `markmap-toolbar@${TOOLBAR_VERSION}/dist/style.css`;
+const TOOLBAR_JS = `markmap-toolbar@${TOOLBAR_VERSION}/dist/index.js`;
+const distDir = dirname(fileURLToPath(import.meta.url));
+const ASSETS_PREFIX = "/assets/";
+const renderToolbar = () => {
+  const { markmap, mm } = window;
+  const toolbar = new markmap.Toolbar();
+  toolbar.attach(mm);
+  const el = toolbar.render();
+  el.setAttribute("style", "position:absolute;bottom:20px;right:20px");
+  document.body.append(el);
+};
+const toolbarAssets = {
+  styles: [buildCSSItem(TOOLBAR_CSS)],
+  scripts: [
+    buildJSItem(TOOLBAR_JS),
+    {
+      type: "iife",
+      data: {
+        fn: (r) => {
+          setTimeout(r);
+        },
+        getParams: () => [renderToolbar]
+      }
+    }
+  ]
+};
+function localProvider(path) {
+  return `${ASSETS_PREFIX}${path}`;
+}
+function createStreamBody(stream) {
+  const body = new ReadableStream({
+    start(controller) {
+      stream.on("data", (chunk) => {
+        controller.enqueue(chunk);
+      });
+      stream.on("end", () => {
+        controller.close();
+      });
+    },
+    cancel() {
+      stream.destroy();
+    }
+  });
+  return body;
+}
+const config = {
+  distDir,
+  assetsDir: `${distDir}${ASSETS_PREFIX}`
+};
 function sequence(fn) {
   let promise;
   return () => {
-    promise || (promise = fn().finally(() => {
+    promise || (promise = Promise.resolve(fn()).finally(() => {
       promise = void 0;
     }));
     return promise;
   };
 }
 class BufferContentProvider {
-  constructor() {
+  constructor(key) {
+    this.key = key;
     this.deferredSet = /* @__PURE__ */ new Set();
-    this.events = new EventEmitter();
-    this.ts = 0;
-    this.content = "";
-    this.line = -1;
-    this.events.on("content", () => {
-      this.feed({
-        ts: this.ts,
-        content: this.content
-      });
-    });
-    this.events.on("cursor", () => {
-      this.feed({
-        line: this.line
-      });
-    });
+    this.state = {
+      content: {
+        ts: 0,
+        value: ""
+      },
+      line: {
+        ts: 0,
+        value: 0
+      }
+    };
+    this.disposeList = [];
   }
-  async getUpdate(ts, timeout = 1e4) {
+  async getUpdate(query, timeout = 1e4) {
     const deferred = defer();
     this.deferredSet.add(deferred);
     setTimeout(() => {
-      this.feed({}, deferred);
+      this.feed(null, deferred);
     }, timeout);
-    if (ts < this.ts) {
-      this.feed({ ts: this.ts, content: this.content }, deferred);
+    if (Object.keys(query).some((key) => query[key] < this.state[key].ts)) {
+      this.feed(null, deferred);
     }
-    return deferred.promise;
+    await deferred.promise;
   }
   feed(data, deferred) {
+    if (data) {
+      Object.assign(this.state, data);
+    }
     if (deferred) {
-      deferred.resolve(data);
+      deferred.resolve();
       this.deferredSet.delete(deferred);
     } else {
       for (const d of this.deferredSet) {
-        d.resolve(data);
+        d.resolve();
       }
       this.deferredSet.clear();
     }
   }
   setCursor(line) {
-    this.line = line;
-    this.events.emit("cursor");
+    this.feed({
+      line: {
+        ts: Date.now(),
+        value: line
+      }
+    });
   }
   setContent(content) {
-    this.ts = Date.now();
-    this.content = content;
-    this.events.emit("content");
+    this.feed({
+      content: {
+        ts: Date.now(),
+        value: content
+      }
+    });
   }
   dispose() {
+    this.disposeList.forEach((dispose) => dispose());
   }
 }
 class FileSystemProvider extends BufferContentProvider {
-  constructor(fileName) {
-    super();
-    this.fileName = fileName;
-    this.watcher = watch(fileName).on(
-      "all",
-      sequence(() => this.update())
-    );
+  constructor(key, filePath, watch2) {
+    super(key);
+    this.filePath = filePath;
+    this.disposeList.push(watch2(() => this.update()));
   }
   async update() {
-    const content = await readFile(this.fileName, "utf8");
+    const content = await readFile(this.filePath, "utf8");
     this.setContent(content);
   }
-  dispose() {
-    super.dispose();
-    this.watcher.close();
+}
+function sha256(input) {
+  return createHash("sha256").update(input, "utf8").digest("hex").slice(0, 7);
+}
+async function sendStatic(c, realpath) {
+  try {
+    const result = await stat(realpath);
+    if (!result.isFile()) throw new Error("File not found");
+  } catch {
+    return c.body("File not found", 404);
   }
+  const stream = createReadStream(realpath);
+  const type = getMimeType(realpath);
+  if (type) c.header("content-type", type);
+  return c.body(createStreamBody(stream));
 }
-function startServer(paddingBottom) {
-  let ts = 0;
-  let root;
-  let line;
-  const { mm, markmap } = window;
-  refresh();
-  function refresh() {
-    fetch(`/~data?ts=${ts}`).then((res) => res.json()).then(
-      (res) => {
-        if (res.ts && res.ts > ts && res.result) {
-          let frontmatter;
-          ({ root, frontmatter } = res.result);
-          mm.setOptions(markmap.deriveOptions(frontmatter == null ? void 0 : frontmatter.markmap));
-          mm.setData(root);
-          if (!ts) mm.fit();
-          ts = res.ts;
-          line = -1;
-        }
-        if (root && res.line != null && line !== res.line) {
-          line = res.line;
-          const active = findActiveNode();
-          if (active) mm.ensureView(active, { bottom: paddingBottom });
-        }
-        setTimeout(refresh, 300);
+class MarkmapDevServer {
+  constructor(options, transformer) {
+    this.options = options;
+    this.providers = {};
+    this.callbacks = {};
+    this.disposeList = [];
+    this.serverInfo = null;
+    this.transformer = transformer || new Transformer();
+    this.html = this._buildHtml();
+    this.disposeList.push(() => {
+      var _a;
+      (_a = this.watcher) == null ? void 0 : _a.close();
+    });
+  }
+  _buildHtml() {
+    var _a, _b;
+    const otherAssets = mergeAssets(
+      this.options.toolbar ? toolbarAssets : null,
+      {
+        scripts: [
+          {
+            type: "iife",
+            data: {
+              fn: (options) => {
+                window.markmap.cliOptions = options;
+              },
+              getParams: () => [this.options]
+            }
+          }
+        ]
       }
     );
+    const assets = mergeAssets(this.transformer.getAssets(), {
+      scripts: (_a = otherAssets.scripts) == null ? void 0 : _a.map(
+        (item) => this.transformer.resolveJS(item)
+      ),
+      styles: (_b = otherAssets.styles) == null ? void 0 : _b.map(
+        (item) => this.transformer.resolveCSS(item)
+      )
+    });
+    const html = fillTemplate(null, assets, {
+      urlBuilder: this.transformer.urlBuilder
+    }) + '<script src="/~client.js"><\/script>';
+    return html;
   }
-  function findActiveNode() {
-    let best;
-    dfs(root);
-    return best;
-    function dfs(node) {
-      var _a, _b, _c;
-      const [start, end] = ((_b = (_a = node.payload) == null ? void 0 : _a.lines) == null ? void 0 : _b.split(",").map((s) => +s)) || [];
-      if (start >= 0 && start <= line && line < end) {
-        best = node;
-      }
-      (_c = node.children) == null ? void 0 : _c.forEach(dfs);
+  async setup() {
+    if (this.serverInfo) throw new Error("Server already set up");
+    const app = new Hono();
+    app.get("/", (c) => {
+      const key = c.req.query("key") || "";
+      if (!this.providers[key]) return c.notFound();
+      return c.html(this.html);
+    });
+    app.get("/~data", async (c) => {
+      const key = c.req.query("key") || "";
+      const provider = this.providers[key];
+      if (!provider) return c.json({}, 404);
+      const query = Object.fromEntries(
+        ["content", "line"].map((key2) => [key2, +(c.req.query(key2) || "") || 0])
+      );
+      await provider.getUpdate(query);
+      const updatedKeys = Object.keys(query).filter(
+        (key2) => query[key2] < provider.state[key2].ts
+      );
+      const result = Object.fromEntries(
+        updatedKeys.map((key2) => {
+          let data = provider.state[key2];
+          if (key2 === "content") {
+            const result2 = this.transformer.transform(data.value);
+            data = {
+              ...data,
+              value: {
+                frontmatter: result2.frontmatter,
+                root: result2.root
+              }
+            };
+          }
+          return [key2, data];
+        })
+      );
+      return c.json(result);
+    });
+    app.post("/~api", async (c) => {
+      var _a;
+      const key = c.req.query("key") || "";
+      const provider = this.providers[key];
+      if (!provider) return c.json({}, 404);
+      const { cmd, args } = await c.req.json();
+      await ((_a = provider[cmd]) == null ? void 0 : _a.call(provider, ...args));
+      return c.body(null, 204);
+    });
+    const { distDir: distDir2, assetsDir } = config;
+    app.get("/~client.*", async (c) => {
+      const realpath = join(distDir2, c.req.path.slice(2));
+      return sendStatic(c, realpath);
+    });
+    app.get(`${ASSETS_PREFIX}*`, async (c) => {
+      const relpath = c.req.path.slice(ASSETS_PREFIX.length);
+      const realpath = join(assetsDir, relpath);
+      return sendStatic(c, realpath);
+    });
+    const deferred = defer();
+    const server = serve(
+      {
+        fetch: app.fetch,
+        port: this.options.port
+      },
+      deferred.resolve
+    );
+    const address = await deferred.promise;
+    this.serverInfo = {
+      server,
+      address
+    };
+  }
+  async shutdown() {
+    if (!this.serverInfo) throw new Error("Server is not set up yet");
+    const deferred = defer();
+    this.serverInfo.server.close((err) => {
+      if (err) deferred.reject();
+      else deferred.resolve();
+    });
+    await deferred.promise;
+    this.serverInfo = null;
+  }
+  async destroy() {
+    await this.shutdown();
+    this.disposeList.forEach((dispose) => dispose());
+  }
+  _watch(filePath, callback) {
+    let { watcher } = this;
+    if (!watcher) {
+      watcher = watch([]).on("all", (_event, path) => {
+        const callback2 = this.callbacks[path];
+        callback2 == null ? void 0 : callback2();
+      });
+      this.watcher = watcher;
     }
+    watcher.add(filePath);
+    this.callbacks[filePath] = sequence(callback);
+    return () => {
+      watcher.unwatch(filePath);
+      delete this.callbacks[filePath];
+    };
   }
-}
-async function setUpServer(transformer, provider, options) {
-  let assets = transformer.getAssets();
-  if (options.toolbar) assets = addToolbar(transformer.urlBuilder, assets);
-  const html = `${fillTemplate(null, assets, {
-    urlBuilder: transformer.urlBuilder
-  })}<script>(${startServer.toString()})(${options.toolbar ? 60 : 0})<\/script>`;
-  const app = new Hono();
-  app.get("/", (c) => c.html(html));
-  app.get("/~data", async (c) => {
-    const update = await provider.getUpdate(+(c.req.query("ts") || 0));
-    const result = update.content == null ? null : transformer.transform(update.content || "");
-    return c.json({ ts: update.ts, result, line: update.line });
-  });
-  app.post("/~api", async (c) => {
+  addProvider(options) {
     var _a;
-    const { cmd, args } = await c.req.json();
-    await ((_a = provider[cmd]) == null ? void 0 : _a.call(provider, ...args));
-    return c.body(null, 204);
-  });
-  const { assetsDir } = config;
-  app.get(`${ASSETS_PREFIX}*`, async (c) => {
-    const relpath = c.req.path.slice(ASSETS_PREFIX.length);
-    const realpath = join(assetsDir, relpath);
-    try {
-      const result = await stat(realpath);
-      if (!result.isFile()) throw new Error("File not found");
-    } catch {
-      return c.body("File not found", 404);
-    }
-    const stream = createReadStream(realpath);
-    const type = getMimeType(relpath);
-    if (type) c.header("content-type", type);
-    return c.body(createStreamBody(stream));
-  });
-  const server = serve(
-    {
-      fetch: app.fetch,
-      port: options.port
-    },
-    (info) => {
-      const { port } = info;
-      console.info(`Listening at http://localhost:${port}`);
-      if (options.open) open(`http://localhost:${port}`);
-    }
-  );
-  let closing;
-  return {
-    provider,
-    close() {
-      if (!closing) {
-        closing = new Promise(
-          (resolve2, reject) => server.close((err) => {
-            if (err) reject(err);
-            else resolve2();
-          })
-        );
-      }
-      return closing;
-    }
-  };
+    const filePath = (options == null ? void 0 : options.filePath) && resolve(options.filePath);
+    const key = (options == null ? void 0 : options.key) || (filePath ? sha256(filePath) : Math.random().toString(36).slice(2, 9));
+    (_a = this.providers)[key] || (_a[key] = filePath ? new FileSystemProvider(
+      key,
+      filePath,
+      (callback) => this._watch(filePath, callback)
+    ) : new BufferContentProvider(key));
+    return this.providers[key];
+  }
+  delProvider(key) {
+    const provider = this.providers[key];
+    provider == null ? void 0 : provider.dispose();
+    delete this.providers[key];
+  }
 }
-async function develop(fileName, options) {
+async function develop(options) {
   const transformer = new Transformer();
   transformer.urlBuilder.setProvider("local", localProvider);
   transformer.urlBuilder.provider = "local";
-  const provider = fileName ? new FileSystemProvider(fileName) : new BufferContentProvider();
-  return setUpServer(transformer, provider, options);
+  const devServer = new MarkmapDevServer(options, transformer);
+  await devServer.setup();
+  return devServer;
 }
 const providerName = "local-hook";
 async function fetchAssets(assetsDir = config.assetsDir) {
-  var _a, _b;
   const transformer = new Transformer();
-  const { provider } = transformer.urlBuilder;
   transformer.urlBuilder.setProvider(providerName, localProvider);
   transformer.urlBuilder.provider = providerName;
-  let assets = transformer.getAssets();
-  assets = addToolbar(transformer.urlBuilder, assets);
+  const assets = transformer.getAssets();
   delete transformer.urlBuilder.providers[providerName];
-  transformer.urlBuilder.provider = provider;
-  const pluginPaths = [
-    ...((_a = assets.scripts) == null ? void 0 : _a.map(
-      (item) => item.type === "script" && item.data.src || ""
-    )) || [],
-    ...((_b = assets.styles) == null ? void 0 : _b.map(
-      (item) => item.type === "stylesheet" && item.data.href || ""
-    )) || []
-  ].filter((url) => url.startsWith(ASSETS_PREFIX)).map((url) => url.slice(ASSETS_PREFIX.length));
-  const paths = [...baseJsPaths, ...pluginPaths];
+  const pluginPaths = extractAssets(assets).filter((url) => url.startsWith(ASSETS_PREFIX)).map((url) => url.slice(ASSETS_PREFIX.length));
+  const resources = transformer.plugins.flatMap(
+    (plugin) => {
+      var _a;
+      return ((_a = plugin.config) == null ? void 0 : _a.resources) || [];
+    }
+  );
+  const paths = [
+    ...baseJsPaths,
+    ...pluginPaths,
+    ...resources,
+    ...extractAssets(toolbarAssets)
+  ];
   let findingProvider;
   const findProvider = () => {
     findingProvider || (findingProvider = transformer.urlBuilder.getFastestProvider());
@@ -417,6 +489,7 @@ async function inlineAssets(assets) {
   };
 }
 async function createMarkmap(options) {
+  var _a, _b;
   const transformer = new Transformer();
   if (options.offline) {
     transformer.urlBuilder.setProvider("local", localProvider);
@@ -430,20 +503,20 @@ async function createMarkmap(options) {
   const { root, features, frontmatter } = transformer.transform(
     options.content || ""
   );
-  let assets = transformer.getUsedAssets(features);
-  assets = {
-    ...assets,
-    scripts: [
-      ...baseJsPaths.map((path) => transformer.urlBuilder.getFullUrl(path)).map((path) => buildJSItem(path)),
-      ...assets.scripts || []
-    ]
-  };
-  if (options.toolbar) {
-    assets = addToolbar(transformer.urlBuilder, assets);
-  }
-  if (options.offline) {
-    assets = await inlineAssets(assets);
-  }
+  const otherAssets = mergeAssets(
+    {
+      scripts: baseJsPaths.map(buildJSItem)
+    },
+    options.toolbar ? toolbarAssets : null
+  );
+  let assets = mergeAssets(
+    {
+      scripts: (_a = otherAssets.scripts) == null ? void 0 : _a.map((item) => transformer.resolveJS(item)),
+      styles: (_b = otherAssets.styles) == null ? void 0 : _b.map((item) => transformer.resolveCSS(item))
+    },
+    transformer.getUsedAssets(features)
+  );
+  if (options.offline) assets = await inlineAssets(assets);
   const html = fillTemplate(root, assets, {
     baseJs: [],
     jsonOptions: frontmatter == null ? void 0 : frontmatter.markmap,
@@ -475,11 +548,16 @@ async function main() {
     const content = await readFile(input, "utf8");
     const output = cmd.output || `${input.replace(/\.\w*$/, "")}.html`;
     if (cmd.watch) {
-      await develop(input, {
-        open: cmd.open,
+      const devServer = await develop({
         toolbar: cmd.toolbar,
         offline
       });
+      const address = devServer.serverInfo.address;
+      const provider = devServer.addProvider({ filePath: input });
+      const filename = basename(input);
+      const url = `http://localhost:${address.port}/?key=${provider.key}&filename=${encodeURIComponent(filename)}`;
+      console.log(`Listening at ${url}`);
+      if (cmd.open) open(url);
     } else {
       await createMarkmap({
         content,
@@ -493,9 +571,11 @@ async function main() {
   program.parse(process.argv);
 }
 export {
+  MarkmapDevServer,
   config,
   createMarkmap,
   develop,
   fetchAssets,
-  main
+  main,
+  markmapLib as markmap
 };

package/dist/types.d.ts

@@ -1,8 +1,4 @@
 export interface IDevelopOptions {
-    /**
-     * Whether to open the generated markmap in browser
-     */
-    open: boolean;
     /**
      * Whether to show the default toolbar
      */
@@ -15,13 +11,15 @@ export interface IDevelopOptions {
     /** Port number for the devServer to listen. */
     port?: number;
 }
-export interface IFileUpdate {
-    ts?: number;
-    content?: string;
-    line?: number;
+export interface IVersionedValue<T = unknown> {
+    ts: number;
+    value: T;
 }
+export type IFileState = Record<string, IVersionedValue>;
 export interface IContentProvider {
-    getUpdate: (ts: number, timeout?: number) => Promise<IFileUpdate>;
+    key: string;
+    state: IFileState;
+    getUpdate: (query: Record<string, number>, timeout?: number) => Promise<void>;
     setContent: (content: string) => void;
     setCursor: (line: number) => void;
     dispose: () => void;

package/dist/util.d.ts

@@ -1,10 +1,10 @@
 import type { ReadStream } from 'fs';
-import { UrlBuilder } from 'markmap-common';
 import { IAssets } from 'markmap-lib';
 export declare const ASSETS_PREFIX = "/assets/";
-export declare function addToolbar(urlBuilder: UrlBuilder, assets: IAssets): IAssets;
+export declare const toolbarAssets: IAssets;
 export declare function localProvider(path: string): string;
 export declare function createStreamBody(stream: ReadStream): ReadableStream<any>;
 export declare const config: {
+    distDir: string;
     assetsDir: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-cli",
-  "version": "0.18.4",
+  "version": "0.18.5-alpha.7+41488b9",
   "description": "Create markmaps from CLI",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -49,14 +49,13 @@
     "chokidar": "^4.0.1",
     "commander": "^12.1.0",
     "hono": "^4.6.13",
-    "markmap-common": "0.18.4",
-    "markmap-lib": "0.18.4",
-    "markmap-render": "0.18.4",
-    "markmap-toolbar": "0.18.4",
+    "markmap-common": "0.18.5-alpha.7+41488b9",
+    "markmap-lib": "0.18.5-alpha.7+41488b9",
+    "markmap-render": "0.18.5-alpha.7+41488b9",
+    "markmap-toolbar": "0.18.5-alpha.7+41488b9",
     "open": "^10.1.0",
-    "pkg-dir": "^8.0.0",
     "read-package-up": "^11.0.0",
     "update-notifier": "^7.3.1"
   },
-  "gitHead": "eb77f9eb79a44d60237f9a9cdadf0a7ca7fa9e29"
+  "gitHead": "41488b9988a1f49f7dadc029ef6be18fed981cac"
 }