Merge pull request #566 from kamiazya/add-mermaid-version-option

feat: add mermaid version option
kamiazya · Apr 6, 2022 · b6abb78 · b6abb78
2 parents 9ef2329 + 2e2031e
commit b6abb78
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -60,6 +60,24 @@ export class Mermaid { }
 
 [![Example](./media/example.png)](https://kamiazya.github.io/typedoc-plugin-samples/classes/hoge.html)
 
+### Arguments
+
+The following arguments can be used in addition to the default TypeDoc arguments.
+
+```bash
+$ typedoc --help
+...
+Options:
+ --mermaidVersion            [Mermaid Plugin] The version of mermaid.js to use.
+...
+```
+
+- `--mermaidVersion`
+
+    Specify mermaid.js version to use.
+
+    Default: `latest`, Example: `8.14.0`
+
 ## Contributors
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

diff --git a/src/index.ts b/src/index.ts
@@ -2,5 +2,5 @@ import { Application } from 'typedoc';
 import { MermaidPlugin } from './plugin';
 
 export function load(app: Application): void {
-  new MermaidPlugin().addToApplication(app);
+  new MermaidPlugin(app).initialize();
 }
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -1,5 +1,5 @@
 import * as html from 'html-escaper';
-import { Converter, Context, PageEvent, Application, ReflectionKind, MarkdownEvent } from 'typedoc';
+import { Converter, Context, PageEvent, Application, ReflectionKind, MarkdownEvent, ParameterType } from 'typedoc';
 
 const style = String.raw`
 <style>
@@ -49,8 +49,9 @@ body.dark, :root[data-theme="dark"] {
  * 2. Initialize mermaid.
  * 3. Add special attribute after SVG has been inserted.
  */
-const script = String.raw`
-<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
+function createScript(version: string): string {
+  return String.raw`
+<script src="https://unpkg.com/mermaid@${version}/dist/mermaid.min.js"></script>
 <script>
 (function() {
   if (typeof mermaid === "undefined") {
@@ -77,24 +78,34 @@ const script = String.raw`
 })();
 </script>
 `;
+}
 
 const mermaidBlockStart = '<div class="mermaid-block">';
 const mermaidBlockEnd = '</div>';
 
 export class MermaidPlugin {
-  public addToApplication(app: Application): void {
-    app.converter.on(Converter.EVENT_RESOLVE_BEGIN, (context: Context) => {
+  constructor(private app: Application) {}
+
+  public initialize(): void {
+    this.app.options.addDeclaration({
+      help: '[Mermaid Plugin] The version of mermaid.js to use.',
+      name: 'mermaidVersion',
+      type: ParameterType.String,
+      defaultValue: 'latest',
+    });
+
+    this.app.converter.on(Converter.EVENT_RESOLVE_BEGIN, (context: Context) => {
       this.onConverterResolveBegin(context);
     });
 
-    app.renderer.on({
+    this.app.renderer.on({
       [PageEvent.END]: (event: PageEvent) => {
         this.onEndPage(event);
       },
     });
 
     // high priority markdown parser to catch blocks before the built-in parser
-    app.renderer.on(
+    this.app.renderer.on(
       MarkdownEvent.PARSE,
       (event: MarkdownEvent) => {
         this.onParseMarkdown(event);
@@ -174,6 +185,10 @@ export class MermaidPlugin {
 
     // find the closing </body> tag and insert our mermaid scripts
     const bodyEndIndex = html.lastIndexOf('</body>');
-    return html.slice(0, bodyEndIndex) + script + html.slice(bodyEndIndex);
+    return (
+      html.slice(0, bodyEndIndex) +
+      createScript(this.app.options.getValue('mermaidVersion') as string) +
+      html.slice(bodyEndIndex)
+    );
   }
 }
diff --git a/test/__snapshots__/plugin.test.ts.snap b/test/__snapshots__/plugin.test.ts.snap
@@ -66,7 +66,7 @@ body.dark, :root[data-theme=\\"dark\\"] {
 }
 </style>
 </head><body><div class=\\"mermaid-block\\"></div>
-<script src=\\"https://unpkg.com/mermaid/dist/mermaid.min.js\\"></script>
+<script src=\\"https://unpkg.com/mermaid@latest/dist/mermaid.min.js\\"></script>
 <script>
 (function() {
   if (typeof mermaid === \\"undefined\\") {

diff --git a/test/plugin.test.ts b/test/plugin.test.ts
@@ -1,7 +1,10 @@
+import { Application } from 'typedoc';
 import { MermaidPlugin } from '../src/plugin';
 
 describe('MermaidPlugin', () => {
-  const plugin = new MermaidPlugin();
+  const app = new Application();
+  const plugin = new MermaidPlugin(app);
+  plugin.initialize();
 
   it('convert CommentTag', () => {
     const input = 'title\ngraph';
@@ -16,7 +19,7 @@ describe('MermaidPlugin', () => {
     const result = plugin.insertMermaidScript(input);
     expect(result).toMatch('</body>');
     expect(result).toMatch('mermaid.initialize({');
-    expect(result).toMatch(/src="https:\/\/unpkg.com\/mermaid\/dist\/mermaid.min.js"/);
+    expect(result).toMatch(/src="https:\/\/unpkg.com\/mermaid\@latest\/dist\/mermaid.min.js"/);
     expect(result).toMatchSnapshot();
   });