Merge pull request #3755 from mermaid-js/sidv/docsDev

Live edits for Docs

packages/mermaid/package.json

@@ -36,7 +36,7 @@
     "docs:verify": "pnpm docs:code && ts-node-esm src/docs.mts --verify",
     "docs:pre:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
     "docs:build:vitepress": "pnpm docs:pre:vitepress && vitepress build src/vitepress",
-    "docs:dev": "pnpm docs:pre:vitepress && vitepress dev src/vitepress",
+    "docs:dev": "pnpm docs:pre:vitepress && concurrently \"vitepress dev src/vitepress\" \"ts-node-esm src/docs.mts --watch --vitepress\"",
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "release": "pnpm build",
     "lint": "eslint --cache --ignore-path .gitignore . && pnpm lint:jison && prettier --check .",
@@ -88,10 +88,12 @@
     "@types/express": "4.17.14",
     "@types/jsdom": "20.0.0",
     "@types/lodash": "4.14.188",
+    "@types/micromatch": "4.0.2",
     "@types/prettier": "2.7.1",
     "@types/stylis": "4.0.2",
     "@typescript-eslint/eslint-plugin": "5.42.0",
     "@typescript-eslint/parser": "5.42.0",
+    "chokidar": "3.5.3",
     "concurrently": "7.5.0",
     "coveralls": "3.1.1",
     "cypress": "10.11.0",
@@ -114,6 +116,7 @@
     "js-base64": "3.7.2",
     "jsdom": "20.0.2",
     "lint-staged": "13.0.3",
+    "micromatch": "^4.0.5",
     "moment": "2.29.4",
     "path-browserify": "1.0.1",
     "prettier": "2.7.1",

packages/mermaid/src/docs.mts

@@ -30,14 +30,16 @@
  * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with
  *   it.)
  */
-import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
+import { readFileSync, writeFileSync, mkdirSync, existsSync, rmSync, rmdirSync } from 'fs';
 import { exec } from 'child_process';
 import { globby } from 'globby';
 import { JSDOM } from 'jsdom';
 import type { Code, Root } from 'mdast';
 import { posix, dirname, relative } from 'path';
 import prettier from 'prettier';
 import { remark } from 'remark';
+import chokidar from 'chokidar';
+import mm from 'micromatch';
 // @ts-ignore No typescript declaration file
 import flatmap from 'unist-util-flatmap';
 
@@ -47,6 +49,7 @@ const MERMAID_MAJOR_VERSION = (
 
 const verifyOnly: boolean = process.argv.includes('--verify');
 const git: boolean = process.argv.includes('--git');
+const watch: boolean = process.argv.includes('--watch');
 const vitepress: boolean = process.argv.includes('--vitepress');
 const noHeader: boolean = process.argv.includes('--noHeader') || vitepress;
 
@@ -239,11 +242,15 @@ const transformHtml = (filename: string) => {
   copyTransformedContents(filename, !verifyOnly, formattedHTML);
 };
 
-const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
+const getGlobs = (globs: string[]): string[] => {
   globs.push('!**/dist');
   if (!vitepress) {
     globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
   }
+  return globs;
+};
+
+const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
   return await globby(globs, { dot: true });
 };
 
@@ -256,15 +263,18 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
   const sourceDirGlob = posix.join('.', SOURCE_DOCS_DIR, '**');
   const action = verifyOnly ? 'Verifying' : 'Transforming';
 
-  const mdFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.md')]);
+  const mdFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.md')]);
+  const mdFiles = await getFilesFromGlobs(mdFileGlobs);
   console.log(`${action} ${mdFiles.length} markdown files...`);
   mdFiles.forEach(transformMarkdown);
 
-  const htmlFiles = await getFilesFromGlobs([posix.join(sourceDirGlob, '*.html')]);
+  const htmlFileGlobs = getGlobs([posix.join(sourceDirGlob, '*.html')]);
+  const htmlFiles = await getFilesFromGlobs(htmlFileGlobs);
   console.log(`${action} ${htmlFiles.length} html files...`);
   htmlFiles.forEach(transformHtml);
 
-  const otherFiles = await getFilesFromGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']);
+  const otherFileGlobs = getGlobs([sourceDirGlob, '!**/*.md', '!**/*.html']);
+  const otherFiles = await getFilesFromGlobs(otherFileGlobs);
   console.log(`${action} ${otherFiles.length} other files...`);
   otherFiles.forEach((file: string) => {
     copyTransformedContents(file, !verifyOnly); // no transformation
@@ -280,4 +290,32 @@ const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
       exec(`git add ${FINAL_DOCS_DIR}`);
     }
   }
+
+  if (watch) {
+    console.log(`Watching for changes in ${SOURCE_DOCS_DIR}`);
+
+    const matcher = (globs: string[]) => (file: string) => mm.every(file, globs);
+    const isMd = matcher(mdFileGlobs);
+    const isHtml = matcher(htmlFileGlobs);
+    const isOther = matcher(otherFileGlobs);
+
+    chokidar
+      .watch(SOURCE_DOCS_DIR)
+      // Delete files from the final docs dir if they are deleted from the source dir
+      .on('unlink', (file: string) => rmSync(changeToFinalDocDir(file)))
+      .on('unlinkDir', (file: string) => rmdirSync(changeToFinalDocDir(file)))
+      .on('all', (event, path) => {
+        // Ignore other events.
+        if (!['add', 'change'].includes(event)) {
+          return;
+        }
+        if (isMd(path)) {
+          transformMarkdown(path);
+        } else if (isHtml(path)) {
+          transformHtml(path);
+        } else if (isOther(path)) {
+          copyTransformedContents(path, true);
+        }
+      });
+  }
 })();