markmap-cli 0.18.5-alpha.6 → 0.18.5-alpha.7

package/dist/client/index.d.ts

@@ -1 +1 @@
-import './style.css';
+export {};

package/dist/client.js

@@ -1,31 +1,51 @@
 const { mm, markmap } = window;
 const { cliOptions } = markmap;
 const key = new URLSearchParams(window.location.search).get("key") || "";
-let ts = 0;
-let root;
-let active;
+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();
-checkHighlight();
 async function checkData() {
+  var _a;
   try {
-    const resp = await fetch(`/~data?key=${key}&ts=${ts}`);
+    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.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 (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 });
     }
-    if (root && res.line != null) {
-      await setCursor({ line: res.line });
+    setTimeout(checkData);
+  } catch (err) {
+    if (err.status !== 404) {
+      setTimeout(checkData, 1e3);
     }
-  } finally {
-    setTimeout(checkData, 3e3);
   }
 }
 function findActiveNode({
@@ -46,48 +66,26 @@ function findActiveNode({
   }
   let best;
   let bestAncestors = [];
-  dfs(root);
-  let needRerender = false;
+  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;
-        needRerender = true;
       }
     });
   }
-  return best && { node: best, needRerender };
+  return best;
 }
 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);
+  if (!state.content.value) return;
+  const node = findActiveNode(options);
+  await highlightNode(node);
 }
 async function highlightNode(node) {
-  var _a;
+  await mm.setHighlight(node);
+  if (!node) return;
   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

@@ -7,6 +7,9 @@ export declare class MarkmapDevServer {
     providers: Record<string, IContentProvider>;
     private transformer;
     private html;
+    private watcher;
+    private callbacks;
+    private disposeList;
     serverInfo: {
         server: ServerType;
         address: AddressInfo;
@@ -15,7 +18,12 @@ export declare class MarkmapDevServer {
     private _buildHtml;
     setup(): Promise<void>;
     shutdown(): Promise<void>;
-    addProvider(filePath?: string): string;
-    delProvider(filePath?: string): 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.js

@@ -1,6 +1,6 @@
 import { Command } from "commander";
 import { readFile, stat, mkdir, writeFile } from "fs/promises";
-import { buildCSSItem, buildJSItem, defer } from "markmap-common";
+import { buildCSSItem, buildJSItem, mergeAssets, defer, extractAssets } from "markmap-common";
 import { Transformer } from "markmap-lib";
 import * as markmapLib from "markmap-lib";
 import { fillTemplate, baseJsPaths } from "markmap-render";
@@ -8,13 +8,12 @@ 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 { 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";
 var getMimeType = (filename, mimes = baseMimes) => {
@@ -87,7 +86,7 @@ var _baseMimes = {
   glb: "model/gltf-binary"
 };
 var baseMimes = _baseMimes;
-const TOOLBAR_VERSION = "0.18.5-alpha.6+cea75c9";
+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));
@@ -100,27 +99,21 @@ const renderToolbar = () => {
   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]
-        }
+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}`;
 }
@@ -147,84 +140,83 @@ const config = {
 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.key = "";
-    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(key, filePath) {
-    super();
-    this.key = key;
+  constructor(key, filePath, watch2) {
+    super(key);
     this.filePath = filePath;
-    this.watcher = watch(filePath).on(
-      "all",
-      sequence(() => this.update())
-    );
+    this.disposeList.push(watch2(() => this.update()));
   }
   async update() {
     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);
@@ -245,37 +237,42 @@ 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() {
-    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"
-          }
-        }
-      ],
-      scripts: [
-        ...assets.scripts || [],
-        {
-          type: "iife",
-          data: {
-            fn: (options) => {
-              window.markmap.cliOptions = options;
-            },
-            getParams: () => [this.options]
+    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>';
@@ -284,15 +281,39 @@ class MarkmapDevServer {
   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("/", (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 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 });
+      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;
@@ -337,16 +358,40 @@ class MarkmapDevServer {
     await deferred.promise;
     this.serverInfo = null;
   }
-  addProvider(filePath) {
+  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];
+    };
+  }
+  addProvider(options) {
     var _a;
-    filePath = filePath && resolve(filePath);
-    const key = filePath ? sha256(filePath) : "";
-    (_a = this.providers)[key] || (_a[key] = filePath ? new FileSystemProvider(key, filePath) : new BufferContentProvider());
-    return key;
+    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(filePath) {
-    filePath = filePath && resolve(filePath);
-    const key = filePath ? sha256(filePath) : "";
+  delProvider(key) {
+    const provider = this.providers[key];
+    provider == null ? void 0 : provider.dispose();
     delete this.providers[key];
   }
 }
@@ -354,36 +399,30 @@ async function develop(options) {
   const transformer = new Transformer();
   transformer.urlBuilder.setProvider("local", localProvider);
   transformer.urlBuilder.provider = "local";
-  const devServer = new MarkmapDevServer(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();
+  const assets = transformer.getAssets();
+  delete transformer.urlBuilder.providers[providerName];
+  const pluginPaths = extractAssets(assets).filter((url) => url.startsWith(ASSETS_PREFIX)).map((url) => url.slice(ASSETS_PREFIX.length));
   const resources = transformer.plugins.flatMap(
     (plugin) => {
-      var _a2;
-      return ((_a2 = plugin.config) == null ? void 0 : _a2.resources) || [];
+      var _a;
+      return ((_a = plugin.config) == null ? void 0 : _a.resources) || [];
     }
   );
-  assets = addToolbar(transformer.urlBuilder, assets);
-  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, ...resources];
+  const paths = [
+    ...baseJsPaths,
+    ...pluginPaths,
+    ...resources,
+    ...extractAssets(toolbarAssets)
+  ];
   let findingProvider;
   const findProvider = () => {
     findingProvider || (findingProvider = transformer.urlBuilder.getFastestProvider());
@@ -450,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);
@@ -463,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,
@@ -489,7 +529,7 @@ async function createMarkmap(options) {
 async function main() {
   var _a;
   const pkg = (_a = await readPackageUp({
-    cwd: import.meta.url
+    cwd: fileURLToPath(import.meta.url)
   })) == null ? void 0 : _a.packageJson;
   if (!pkg) throw new Error("package.json not found");
   const notifier = updateNotifier({ pkg });
@@ -513,9 +553,9 @@ async function main() {
         offline
       });
       const address = devServer.serverInfo.address;
-      const key = devServer.addProvider(input);
+      const provider = devServer.addProvider({ filePath: input });
       const filename = basename(input);
-      const url = `http://localhost:${address.port}/?key=${key}&filename=${filename}`;
+      const url = `http://localhost:${address.port}/?key=${provider.key}&filename=${encodeURIComponent(filename)}`;
       console.log(`Listening at ${url}`);
       if (cmd.open) open(url);
     } else {

package/dist/types.d.ts

@@ -11,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,8 +1,7 @@
 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: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "markmap-cli",
-  "version": "0.18.5-alpha.6+cea75c9",
+  "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.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",
+    "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": "cea75c9906a30ddf515f94bd6ad61d6c9ca4035a"
+  "gitHead": "41488b9988a1f49f7dadc029ef6be18fed981cac"
 }

package/dist/client.css

@@ -1,11 +0,0 @@
-.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));
-}