markmap-cli 0.18.4 → 0.18.5-alpha.6

package/dist/client/index.d.ts

@@ -0,0 +1 @@
+import './style.css';

package/dist/client.css

@@ -0,0 +1,11 @@
+.markmap-highlight-area {
+  --mm-highlight-scale: 1;
+  position: absolute;
+  width: var(--mm-highlight-width);
+  height: var(--mm-highlight-height);
+  left: var(--mm-highlight-x);
+  top: var(--mm-highlight-y);
+  z-index: -1;
+  background: #ff02;
+  transform: scale(var(--mm-highlight-scale));
+}

package/dist/client.js

@@ -0,0 +1,93 @@
+const { mm, markmap } = window;
+const { cliOptions } = markmap;
+const key = new URLSearchParams(window.location.search).get("key") || "";
+let ts = 0;
+let root;
+let active;
+const activeNodeOptions = {};
+const highlightEl = document.createElement("div");
+highlightEl.className = "markmap-highlight-area";
+checkData();
+checkHighlight();
+async function checkData() {
+  try {
+    const resp = await fetch(`/~data?key=${key}&ts=${ts}`);
+    const res = await resp.json();
+    if (res.ts && res.ts > ts && res.result) {
+      let frontmatter;
+      ({ root, frontmatter } = res.result);
+      mm.setOptions(markmap.deriveOptions(frontmatter == null ? void 0 : frontmatter.markmap));
+      await mm.setData(root);
+      if (!ts) await mm.fit();
+      ts = res.ts;
+    }
+    if (root && res.line != null) {
+      await setCursor({ line: res.line });
+    }
+  } finally {
+    setTimeout(checkData, 3e3);
+  }
+}
+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(root);
+  let needRerender = false;
+  if (autoExpand) {
+    bestAncestors.forEach((node) => {
+      var _a;
+      if ((_a = node.payload) == null ? void 0 : _a.fold) {
+        node.payload.fold = 0;
+        needRerender = true;
+      }
+    });
+  }
+  return best && { node: best, needRerender };
+}
+async function setCursor(options) {
+  const result = root && findActiveNode(options);
+  if (!result) return;
+  const { node, needRerender } = result;
+  if (needRerender) await mm.renderData();
+  if (node) highlightNode(node);
+}
+async function highlightNode(node) {
+  var _a;
+  await mm[activeNodeOptions.placement === "center" ? "centerNode" : "ensureVisible"](node, {
+    bottom: cliOptions.toolbar ? 80 : 0
+  });
+  const g = (_a = mm.findElement(node)) == null ? void 0 : _a.g;
+  const el = g == null ? void 0 : g.querySelector("foreignObject");
+  active = el && { el, node };
+}
+function checkHighlight() {
+  if (!active) {
+    highlightEl.remove();
+  } else {
+    const rect = active.el.getBoundingClientRect();
+    const padding = 4;
+    const { width } = active.node.state.rect;
+    const scale = (width + padding * 2) / width;
+    highlightEl.setAttribute(
+      "style",
+      `--mm-highlight-x:${rect.x}px;--mm-highlight-y:${rect.y}px;--mm-highlight-width:${rect.width}px;--mm-highlight-height:${rect.height}px;--mm-highlight-scale:${scale}`
+    );
+    if (!highlightEl.parentNode) document.body.append(highlightEl);
+  }
+  requestAnimationFrame(checkHighlight);
+}

package/dist/dev-server.d.ts

@@ -1,5 +1,21 @@
+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;
+    serverInfo: {
+        server: ServerType;
+        address: AddressInfo;
+    } | null;
+    constructor(options: IDevelopOptions, transformer?: Transformer);
+    private _buildHtml;
+    setup(): Promise<void>;
+    shutdown(): Promise<void>;
+    addProvider(filePath?: string): string;
+    delProvider(filePath?: 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,22 @@
-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 { readFile, stat, mkdir, writeFile } from "fs/promises";
 import { buildCSSItem, buildJSItem, defer } 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 { serve } from "@hono/node-server";
 import { watch } from "chokidar";
+import { createHash } from "crypto";
 import { EventEmitter } from "events";
 import { createReadStream, createWriteStream } from "fs";
 import { Hono } from "hono";
+import { fileURLToPath } from "url";
 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 +24,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,6 +87,63 @@ var _baseMimes = {
   glb: "model/gltf-binary"
 };
 var baseMimes = _baseMimes;
+const TOOLBAR_VERSION = "0.18.5-alpha.6+cea75c9";
+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);
+};
+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 = {
+  distDir,
+  assetsDir: `${distDir}${ASSETS_PREFIX}`
+};
 function sequence(fn) {
   let promise;
   return () => {
@@ -158,6 +160,7 @@ class BufferContentProvider {
     this.ts = 0;
     this.content = "";
     this.line = -1;
+    this.key = "";
     this.events.on("content", () => {
       this.feed({
         ts: this.ts,
@@ -205,16 +208,17 @@ class BufferContentProvider {
   }
 }
 class FileSystemProvider extends BufferContentProvider {
-  constructor(fileName) {
+  constructor(key, filePath) {
     super();
-    this.fileName = fileName;
-    this.watcher = watch(fileName).on(
+    this.key = key;
+    this.filePath = filePath;
+    this.watcher = watch(filePath).on(
       "all",
       sequence(() => this.update())
     );
   }
   async update() {
-    const content = await readFile(this.fileName, "utf8");
+    const content = await readFile(this.filePath, "utf8");
     this.setContent(content);
   }
   dispose() {
@@ -222,114 +226,137 @@ class FileSystemProvider extends BufferContentProvider {
     this.watcher.close();
   }
 }
-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;
+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));
+}
+class MarkmapDevServer {
+  constructor(options, transformer) {
+    this.options = options;
+    this.providers = {};
+    this.serverInfo = null;
+    this.transformer = transformer || new Transformer();
+    this.html = this._buildHtml();
+  }
+  _buildHtml() {
+    let assets = this.transformer.getAssets();
+    if (this.options.toolbar)
+      assets = addToolbar(this.transformer.urlBuilder, assets);
+    assets = {
+      styles: [
+        ...assets.styles || [],
+        {
+          type: "stylesheet",
+          data: {
+            href: "/~client.css"
+          }
         }
-        if (root && res.line != null && line !== res.line) {
-          line = res.line;
-          const active = findActiveNode();
-          if (active) mm.ensureView(active, { bottom: paddingBottom });
+      ],
+      scripts: [
+        ...assets.scripts || [],
+        {
+          type: "iife",
+          data: {
+            fn: (options) => {
+              window.markmap.cliOptions = options;
+            },
+            getParams: () => [this.options]
+          }
         }
-        setTimeout(refresh, 300);
-      }
+      ]
+    };
+    const html = fillTemplate(null, assets, {
+      urlBuilder: this.transformer.urlBuilder
+    }) + '<script src="/~client.js"><\/script>';
+    return html;
+  }
+  async setup() {
+    if (this.serverInfo) throw new Error("Server already set up");
+    const app = new Hono();
+    app.get("/", (c) => 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 ts = +(c.req.query("ts") || "") || 0;
+      const update = await provider.getUpdate(ts);
+      const result = update.content == null ? null : this.transformer.transform(update.content || "");
+      return c.json({ ts: update.ts, result, line: update.line });
+    });
+    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
+    };
   }
-  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 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 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(filePath) {
     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;
-    }
-  };
+    filePath = filePath && resolve(filePath);
+    const key = filePath ? sha256(filePath) : "";
+    (_a = this.providers)[key] || (_a[key] = filePath ? new FileSystemProvider(key, filePath) : new BufferContentProvider());
+    return key;
+  }
+  delProvider(filePath) {
+    filePath = filePath && resolve(filePath);
+    const key = filePath ? sha256(filePath) : "";
+    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);
+  await devServer.setup();
+  return devServer;
 }
 const providerName = "local-hook";
 async function fetchAssets(assetsDir = config.assetsDir) {
@@ -339,6 +366,12 @@ async function fetchAssets(assetsDir = config.assetsDir) {
   transformer.urlBuilder.setProvider(providerName, localProvider);
   transformer.urlBuilder.provider = providerName;
   let assets = transformer.getAssets();
+  const resources = transformer.plugins.flatMap(
+    (plugin) => {
+      var _a2;
+      return ((_a2 = plugin.config) == null ? void 0 : _a2.resources) || [];
+    }
+  );
   assets = addToolbar(transformer.urlBuilder, assets);
   delete transformer.urlBuilder.providers[providerName];
   transformer.urlBuilder.provider = provider;
@@ -350,7 +383,7 @@ async function fetchAssets(assetsDir = config.assetsDir) {
       (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 paths = [...baseJsPaths, ...pluginPaths, ...resources];
   let findingProvider;
   const findProvider = () => {
     findingProvider || (findingProvider = transformer.urlBuilder.getFastestProvider());
@@ -456,7 +489,7 @@ async function createMarkmap(options) {
 async function main() {
   var _a;
   const pkg = (_a = await readPackageUp({
-    cwd: fileURLToPath(import.meta.url)
+    cwd: import.meta.url
   })) == null ? void 0 : _a.packageJson;
   if (!pkg) throw new Error("package.json not found");
   const notifier = updateNotifier({ pkg });
@@ -475,11 +508,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 key = devServer.addProvider(input);
+      const filename = basename(input);
+      const url = `http://localhost:${address.port}/?key=${key}&filename=${filename}`;
+      console.log(`Listening at ${url}`);
+      if (cmd.open) open(url);
     } else {
       await createMarkmap({
         content,
@@ -493,9 +531,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
      */

package/dist/util.d.ts

@@ -6,5 +6,6 @@ export declare function addToolbar(urlBuilder: UrlBuilder, assets: IAssets): IAs
 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.6+cea75c9",
   "description": "Create markmaps from CLI",
   "author": "Gerald <gera2ld@live.com>",
   "license": "MIT",
@@ -49,14 +49,14 @@
     "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.6+cea75c9",
+    "markmap-lib": "0.18.5-alpha.6+cea75c9",
+    "markmap-render": "0.18.5-alpha.6+cea75c9",
+    "markmap-toolbar": "0.18.5-alpha.6+cea75c9",
     "open": "^10.1.0",
     "pkg-dir": "^8.0.0",
     "read-package-up": "^11.0.0",
     "update-notifier": "^7.3.1"
   },
-  "gitHead": "eb77f9eb79a44d60237f9a9cdadf0a7ca7fa9e29"
+  "gitHead": "cea75c9906a30ddf515f94bd6ad61d6c9ca4035a"
 }