chore: Fix vitepress build

packages/mermaid/package.json

@@ -31,15 +31,13 @@
     "build:esbuild": "concurrently \"pnpm build:code\" \"pnpm build:types\"",
     "build": "pnpm clean; pnpm build:esbuild",
     "dev": "node .esbuild/serve.cjs",
-    "predocs:build": "rimraf docs && pnpm docs:code",
-    "docs:build": "rimraf ../../docs; ts-node-esm src/docs.mts",
+    "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --githubPages false --hideBreadcrumbs --gitRemote disable --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
+    "docs:build": "rimraf ../../docs && pnpm docs:code && ts-node-esm src/docs.mts",
     "docs:verify": "ts-node-esm src/docs.mts --verify",
-    "docs:code": "typedoc --plugin typedoc-plugin-markdown --readme none --hideBreadcrumbs --gitRemote disable --hideInPageTOC --namedAnchors --out src/docs/config/setup --entryPointStrategy expand src/defaultConfig.ts src/config.ts src/mermaidAPI.ts",
-    "predocs:dev": "pnpm docs:code",
-    "docs:dev": "vitepress dev src/docs",
-    "predocs:bundle": "pnpm docs:code",
-    "docs:bundle": "vitepress build src/docs",
-    "docs:serve": "vitepress serve src/docs",
+    "docs:build:vitepress": "rimraf src/vitepress && pnpm docs:code && ts-node-esm src/docs.mts --vitepress",
+    "docs:dev": "pnpm docs:build:vitepress && vitepress dev src/vitepress",
+    "docs:bundle": "pnpm docs:build:vitepress && vitepress build src/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 .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",

packages/mermaid/src/docs.mts

@@ -45,10 +45,15 @@ const MERMAID_MAJOR_VERSION = (
   JSON.parse(readFileSync('../mermaid/package.json', 'utf8')).version as string
 ).split('.')[0];
 
+const verifyOnly: boolean = process.argv.includes('--verify');
+const git: boolean = process.argv.includes('--git');
+const vitepress: boolean = process.argv.includes('--vitepress');
+const noHeader: boolean = process.argv.includes('--noHeader') || vitepress;
+
 // These paths are from the root of the mono-repo, not from the
 // mermaid sub-directory
 const SOURCE_DOCS_DIR = 'src/docs';
-const FINAL_DOCS_DIR = '../../docs';
+const FINAL_DOCS_DIR = vitepress ? 'src/vitepress' : '../../docs';
 
 const AUTOGENERATED_TEXT = `> **Warning**
 > ## THIS IS AN AUTOGENERATED FILE. DO NOT EDIT. 
@@ -60,9 +65,6 @@ const LOGMSG_COPIED = `, and copied to ${FINAL_DOCS_DIR}`;
 
 const WARN_DOCSDIR_DOESNT_MATCH = `Changed files were transformed in ${SOURCE_DOCS_DIR} but do not match the files in ${FINAL_DOCS_DIR}. Please run pnpm docs:build after making changes to ${SOURCE_DOCS_DIR} to update the ${FINAL_DOCS_DIR} directory with the transformed files.`;
 
-const verifyOnly: boolean = process.argv.includes('--verify');
-const git: boolean = process.argv.includes('--git');
-
 // TODO: Read from .prettierrc?
 const prettierConfig: prettier.Config = {
   useTabs: false,
@@ -176,8 +178,17 @@ const transformMarkdown = (file: string) => {
     return [c];
   });
 
-  // Add the AUTOGENERATED_TEXT to the start of the file
-  const transformed = `${AUTOGENERATED_TEXT}\n${remark.stringify(out)}`;
+  let transformed = remark.stringify(out);
+  if (!noHeader) {
+    // Add the AUTOGENERATED_TEXT to the start of the file
+    transformed = `${AUTOGENERATED_TEXT}\n${transformed}`;
+  }
+
+  if (vitepress && file === 'src/docs/index.md') {
+    // Skip transforming index if vitepress is enabled
+    transformed = doc;
+  }
+
   const formatted = prettier.format(transformed, {
     parser: 'markdown',
     ...prettierConfig,
@@ -206,6 +217,11 @@ const transformHtml = (filename: string) => {
       /<MERMAID_VERSION>/g,
       MERMAID_MAJOR_VERSION
     );
+
+    if (noHeader) {
+      return fileContents;
+    }
+
     const jsdom = new JSDOM(fileContents);
     const htmlDoc = jsdom.window.document;
     const autoGeneratedComment = jsdom.window.document.createComment(AUTOGENERATED_TEXT);
@@ -224,6 +240,10 @@ const transformHtml = (filename: string) => {
 };
 
 const getFilesFromGlobs = async (globs: string[]): Promise<string[]> => {
+  globs.push('!**/dist');
+  if (!vitepress) {
+    globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
+  }
   return await globby(globs, { dot: true });
 };
 

packages/mermaid/src/docs/.vitepress/blocks-markdown.ts

@@ -1,25 +0,0 @@
-const CustomMarkdown = (md) => {
-  const fence = md.renderer.rules.fence.bind(md.renderer.rules);
-
-  md.renderer.rules.fence = (tokens, index, options, env, slf) => {
-    const token = tokens[index];
-
-    if (token.info.trim() === 'warning') {
-      return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
-    }
-
-    if (token.info.trim() === 'note') {
-      return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
-    }
-
-    if (token.info.trim() === 'jison') {
-      return `<div class="language-"><button class="copy"></button><span class="lang">jison</span><pre><code>${token.content
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;')}}</code></pre></div>`;
-    }
-
-    return fence(tokens, index, options, env, slf);
-  };
-};
-
-export default CustomMarkdown;

packages/mermaid/src/docs/.vitepress/config.ts

@@ -1,14 +1,12 @@
 import { version } from '../../../package.json';
 import MermaidExample from './mermaid-markdown-all';
 import { MermaidMarkdown } from 'vitepress-plugin-mermaid';
-import CustomMarkdown from './blocks-markdown';
-import { defineConfig } from 'vitepress';
+import { defineConfig, MarkdownOptions } from 'vitepress';
 
-const allMarkdownTransformers = {
+const allMarkdownTransformers: MarkdownOptions = {
   config: async (md) => {
-    MermaidMarkdown(md);
     await MermaidExample(md);
-    CustomMarkdown(md);
+    MermaidMarkdown(md);
   },
 };
 
@@ -28,11 +26,6 @@ export default defineConfig({
 
     sidebar: {
       '/': sidebarAll(),
-      // "/intro/": sidebarIntro(),
-      // "/syntax/": sidebarSyntax(),
-      // "/config": sidebarConfig(),
-      // "/misc/": sidebarMisc(),
-      // "/community/": sidebarCommunity(),
     },
   },
 });
@@ -90,10 +83,6 @@ function sidebarAll() {
     ...sidebarConfig(),
     ...sidebarMisc(),
     ...sidebarCommunity(),
-    // {
-    //   text: "Generated",
-    //   items: [{ text: "modules", link: "docs/code/modules" }],
-    // },
   ];
 }
 

packages/mermaid/src/docs/.vitepress/mermaid-markdown-all.ts

@@ -1,32 +1,55 @@
+import type { MarkdownRenderer } from 'vitepress';
 import shiki from 'shiki';
 
-const MermaidExample = async (md) => {
-  const fence = md.renderer.rules.fence.bind(md.renderer.rules);
+const MermaidExample = async (md: MarkdownRenderer) => {
+  const defaultRenderer = md.renderer.rules.fence;
 
-  const highlighter = await shiki.getHighlighter({ theme: 'material-palenight' });
+  if (!defaultRenderer) {
+    throw new Error('defaultRenderer is undefined');
+  }
+
+  const highlighter = await shiki.getHighlighter({
+    theme: 'material-palenight',
+    langs: ['mermaid'],
+  });
 
   md.renderer.rules.fence = (tokens, index, options, env, slf) => {
     const token = tokens[index];
-    // console.log("==>",token.info);
 
     if (token.info.trim() === 'mermaid-example') {
-      let code = highlighter.codeToHtml(token.content, { lang: 'mermaid' });
-      code = code.replace('#2e3440ff', 'transparent');
-      code = code.replace('#292D3E', 'transparent');
+      const highlight = highlighter
+        .codeToHtml(token.content, { lang: 'mermaid' })
+        .replace(/<span/g, '<span v-pre')
+        .replace('#2e3440ff', 'transparent')
+        .replace('#292D3E', 'transparent');
 
-      code =
-        '<h5>Code:</h5>' +
-        `<div class="language-mermaid">` +
-        `<button class="copy"></button><span class="lang">mermaid</span>` +
-        code +
-        '</div>';
-
-      // return code;
-      return `${code}
-          <h5>Render:</h5>
-          <Mermaid id="me${index}"  graph="${encodeURIComponent(token.content)}"></Mermaid>`;
+      return `<h5>Code:</h5>
+          <div class="language-mermaid">
+          <button class="copy"></button>
+          <span class="lang">mermaid</span>
+${highlight}
+          </div>
+          <h5>Diagram:</h5>`;
     }
-    return fence(tokens, index, options, env, slf);
+    if (token.info.trim() === 'warning') {
+      return `<div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>${token.content}}</p></div>`;
+    }
+
+    if (token.info.trim() === 'note') {
+      return `<div class="tip custom-block"><p class="custom-block-title">NOTE</p><p>${token.content}}</p></div>`;
+    }
+
+    if (token.info.trim() === 'jison') {
+      return `<div class="language-">
+      <button class="copy"></button>
+      <span class="lang">jison</span>
+      <pre>
+      <code>${token.content.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</code>
+      </pre>
+      </div>`;
+    }
+
+    return defaultRenderer(tokens, index, options, env, slf);
   };
 };
 

packages/mermaid/src/docs/config/setup/README.md

@@ -0,0 +1,7 @@
+# mermaid
+
+## Modules
+
+- [config](modules/config.md)
+- [defaultConfig](modules/defaultConfig.md)
+- [mermaidAPI](modules/mermaidAPI.md)

packages/mermaid/src/docs/config/setup/modules/config.md

@@ -0,0 +1,270 @@
+# Module: config
+
+## Variables
+
+### <a id="defaultconfig" name="defaultconfig"></a> defaultConfig
+
+• `Const` **defaultConfig**: `MermaidConfig`
+
+#### Defined in
+
+config.ts:7
+
+## Functions
+
+### <a id="adddirective" name="adddirective"></a> addDirective
+
+▸ **addDirective**(`directive`): `void`
+
+Pushes in a directive to the configuration
+
+#### Parameters
+
+| Name        | Type  | Description              |
+| :---------- | :---- | :----------------------- |
+| `directive` | `any` | The directive to push in |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+config.ts:191
+
+---
+
+### <a id="getconfig" name="getconfig"></a> getConfig
+
+▸ **getConfig**(): `MermaidConfig`
+
+## getConfig
+
+| Function  | Description               | Type        | Return Values                  |
+| --------- | ------------------------- | ----------- | ------------------------------ |
+| getConfig | Obtains the currentConfig | Get Request | Any Values from current Config |
+
+**Notes**: Returns **any** the currentConfig
+
+#### Returns
+
+`MermaidConfig`
+
+The currentConfig
+
+#### Defined in
+
+config.ts:136
+
+---
+
+### <a id="getsiteconfig" name="getsiteconfig"></a> getSiteConfig
+
+▸ **getSiteConfig**(): `MermaidConfig`
+
+## getSiteConfig
+
+| Function      | Description                                       | Type        | Values                           |
+| ------------- | ------------------------------------------------- | ----------- | -------------------------------- |
+| setSiteConfig | Returns the current siteConfig base configuration | Get Request | Returns Any Values in siteConfig |
+
+**Notes**: Returns **any** values in siteConfig.
+
+#### Returns
+
+`MermaidConfig`
+
+The siteConfig
+
+#### Defined in
+
+config.ts:96
+
+---
+
+### <a id="reset" name="reset"></a> reset
+
+▸ **reset**(`config?`): `void`
+
+## reset
+
+| Function | Description                  | Type        | Required | Values |
+| -------- | ---------------------------- | ----------- | -------- | ------ |
+| reset    | Resets currentConfig to conf | Put Request | Required | None   |
+
+## conf
+
+| Parameter | Description                                                    | Type       | Required | Values                                       |
+| --------- | -------------------------------------------------------------- | ---------- | -------- | -------------------------------------------- |
+| conf      | base set of values, which currentConfig could be **reset** to. | Dictionary | Required | Any Values, with respect to the secure Array |
+
+**Notes**: (default: current siteConfig ) (optional, default `getSiteConfig()`)
+
+#### Parameters
+
+| Name     | Type            | Default value | Description                                                                                                                                                   |
+| :------- | :-------------- | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `config` | `MermaidConfig` | `siteConfig`  | base set of values, which currentConfig could be **reset** to. Defaults to the current siteConfig (e.g returned by [getSiteConfig](config.md#getsiteconfig)). |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+config.ts:223
+
+---
+
+### <a id="sanitize" name="sanitize"></a> sanitize
+
+▸ **sanitize**(`options`): `void`
+
+## sanitize
+
+| Function | Description                            | Type        | Values |
+| -------- | -------------------------------------- | ----------- | ------ |
+| sanitize | Sets the siteConfig to desired values. | Put Request | None   |
+
+Ensures options parameter does not attempt to override siteConfig secure keys **Notes**: modifies
+options in-place
+
+#### Parameters
+
+| Name      | Type  | Description                       |
+| :-------- | :---- | :-------------------------------- |
+| `options` | `any` | The potential setConfig parameter |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+config.ts:151
+
+---
+
+### <a id="saveconfigfrominitialize" name="saveconfigfrominitialize"></a> saveConfigFromInitialize
+
+▸ **saveConfigFromInitialize**(`conf`): `void`
+
+#### Parameters
+
+| Name   | Type            |
+| :----- | :-------------- |
+| `conf` | `MermaidConfig` |
+
+#### Returns
+
+`void`
+
+#### Defined in
+
+config.ts:75
+
+---
+
+### <a id="setconfig" name="setconfig"></a> setConfig
+
+▸ **setConfig**(`conf`): `MermaidConfig`
+
+## setConfig
+
+| Function      | Description                           | Type        | Values                                  |
+| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
+| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
+
+**Notes**: Sets the currentConfig. The parameter conf is sanitized based on the siteConfig.secure
+keys. Any values found in conf with key found in siteConfig.secure will be replaced with the
+corresponding siteConfig value.
+
+#### Parameters
+
+| Name   | Type            | Description                 |
+| :----- | :-------------- | :-------------------------- |
+| `conf` | `MermaidConfig` | The potential currentConfig |
+
+#### Returns
+
+`MermaidConfig`
+
+The currentConfig merged with the sanitized conf
+
+#### Defined in
+
+config.ts:113
+
+---
+
+### <a id="setsiteconfig" name="setsiteconfig"></a> setSiteConfig
+
+▸ **setSiteConfig**(`conf`): `MermaidConfig`
+
+## setSiteConfig
+
+| Function      | Description                           | Type        | Values                                  |
+| ------------- | ------------------------------------- | ----------- | --------------------------------------- |
+| setSiteConfig | Sets the siteConfig to desired values | Put Request | Any Values, except ones in secure array |
+
+**Notes:** Sets the siteConfig. The siteConfig is a protected configuration for repeat use. Calls
+to reset() will reset the currentConfig to siteConfig. Calls to reset(configApi.defaultConfig)
+will reset siteConfig and currentConfig to the defaultConfig Note: currentConfig is set in this
+function _Default value: At default, will mirror Global Config_
+
+#### Parameters
+
+| Name   | Type            | Description                                 |
+| :----- | :-------------- | :------------------------------------------ |
+| `conf` | `MermaidConfig` | The base currentConfig to use as siteConfig |
+
+#### Returns
+
+`MermaidConfig`
+
+The new siteConfig
+
+#### Defined in
+
+config.ts:61
+
+---
+
+### <a id="updatecurrentconfig" name="updatecurrentconfig"></a> updateCurrentConfig
+
+▸ **updateCurrentConfig**(`siteCfg`, `_directives`): `MermaidConfig`
+
+#### Parameters
+
+| Name          | Type            |
+| :------------ | :-------------- |
+| `siteCfg`     | `MermaidConfig` |
+| `_directives` | `any`[]         |
+
+#### Returns
+
+`MermaidConfig`
+
+#### Defined in
+
+config.ts:14
+
+---
+
+### <a id="updatesiteconfig" name="updatesiteconfig"></a> updateSiteConfig
+
+▸ **updateSiteConfig**(`conf`): `MermaidConfig`
+
+#### Parameters
+
+| Name   | Type            |
+| :----- | :-------------- |
+| `conf` | `MermaidConfig` |
+
+#### Returns
+
+`MermaidConfig`
+
+#### Defined in
+
+config.ts:79

packages/mermaid/src/docs/config/setup/modules/defaultConfig.md

@@ -0,0 +1,50 @@
+# Module: defaultConfig
+
+## Variables
+
+### <a id="configkeys" name="configkeys"></a> configKeys
+
+• `Const` **configKeys**: `string`[]
+
+#### Defined in
+
+defaultConfig.ts:1869
+
+---
+
+### <a id="default" name="default"></a> default
+
+• `Const` **default**: `Partial`<`MermaidConfig`\>
+
+**Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
+here](8.6.0_docs.md)].**
+
+## **What follows are config instructions for older versions**
+
+These are the default options which can be overridden with the initialization call like so:
+
+**Example 1:**
+
+```js
+mermaid.initialize({ flowchart: { htmlLabels: false } });
+```
+
+**Example 2:**
+
+```html
+<script>
+  const config = {
+    startOnLoad: true,
+    flowchart: { useMaxWidth: true, htmlLabels: true, curve: 'cardinal' },
+    securityLevel: 'loose',
+  };
+  mermaid.initialize(config);
+</script>
+```
+
+A summary of all options and their defaults is found [here](#mermaidapi-configuration-defaults).
+A description of each option follows below.
+
+#### Defined in
+
+defaultConfig.ts:33

packages/mermaid/src/docs/config/setup/modules/mermaidAPI.md

@@ -0,0 +1,57 @@
+# Module: mermaidAPI
+
+## References
+
+### <a id="default" name="default"></a> default
+
+Renames and re-exports [mermaidAPI](mermaidAPI.md#mermaidapi)
+
+## Variables
+
+### <a id="mermaidapi" name="mermaidapi"></a> mermaidAPI
+
+• `Const` **mermaidAPI**: `Readonly`<{ `defaultConfig`: `MermaidConfig` = configApi.defaultConfig; `getConfig`: () => `MermaidConfig` = configApi.getConfig; `getSiteConfig`: () => `MermaidConfig` = configApi.getSiteConfig; `globalReset`: () => `void` ; `initialize`: (`options`: `MermaidConfig`) => `Promise`<`void`\> ; `parse`: (`text`: `string`, `parseError?`: `ParseErrorFunction`) => `boolean` ; `parseDirective`: (`p`: `any`, `statement`: `string`, `context`: `string`, `type`: `string`) => `void` ; `render`: (`id`: `string`, `text`: `string`, `cb`: (`svgCode`: `string`, `bindFunctions?`: (`element`: `Element`) => `void`) => `void`, `container?`: `Element`) => `Promise`<`void`\> ; `reset`: () => `void` ; `setConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.setConfig; `updateSiteConfig`: (`conf`: `MermaidConfig`) => `MermaidConfig` = configApi.updateSiteConfig }\>
+
+#### Defined in
+
+mermaidAPI.ts:485
+
+## Functions
+
+### <a id="decodeentities" name="decodeentities"></a> decodeEntities
+
+▸ **decodeEntities**(`text`): `string`
+
+#### Parameters
+
+| Name   | Type     |
+| :----- | :------- |
+| `text` | `string` |
+
+#### Returns
+
+`string`
+
+#### Defined in
+
+mermaidAPI.ts:72
+
+---
+
+### <a id="encodeentities" name="encodeentities"></a> encodeEntities
+
+▸ **encodeEntities**(`text`): `string`
+
+#### Parameters
+
+| Name   | Type     |
+| :----- | :------- |
+| `text` | `string` |
+
+#### Returns
+
+`string`
+
+#### Defined in
+
+mermaidAPI.ts:46