fix: Move redirection to router

packages/mermaid/src/docs.mts

@@ -243,7 +243,7 @@ const transformHtml = (filename: string) => {
 };
 
 const getGlobs = (globs: string[]): string[] => {
-  globs.push('!**/dist');
+  globs.push('!**/dist', '!**/redirect.spec.ts');
   if (!vitepress) {
     globs.push('!**/.vitepress', '!**/vite.config.ts', '!src/docs/index.md');
   }

packages/mermaid/src/docs/.vitepress/redirect.spec.ts

@@ -1,27 +0,0 @@
-import { expect, test } from 'vitest';
-import { getBaseFile } from './redirect';
-
-test.each([
-  ['http://localhost:1234/mermaid/#/flowchart.md', 'flowchart'],
-  ['http://localhost/mermaid/#/flowchart.md', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#/flowchart.md', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#/./flowchart', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#/flowchart', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#flowchart', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#/flowchart', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#/flowchart.md?id=no-id', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#/./flowchart.md?id=no-id', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#/flowchart?id=no-id', 'flowchart'],
-  ['https://mermaid-js.github.io/mermaid/#/language-highlight', 'language-highlight'],
-  ['https://mermaid-js.github.io/mermaid/#/language-highlight.md', 'language-highlight'],
-])('should process url %s to %s', (link, expected) => {
-  expect(getBaseFile(link)).toBe(expected);
-});
-
-test('should throw for invalid URL', () => {
-  // Not mermaid domain
-  expect(() => getBaseFile('https://www.google.com')).toThrowError();
-
-  // Not `/mermaid/` path
-  expect(() => getBaseFile('http://localhost/#/flowchart.md')).toThrowError();
-});

packages/mermaid/src/docs/.vitepress/theme/index.ts

@@ -2,11 +2,25 @@ import DefaultTheme from 'vitepress/theme';
 // @ts-ignore
 import Mermaid from 'vitepress-plugin-mermaid/Mermaid.vue';
 import './custom.css';
+import { getRedirect } from './redirect';
 
 export default {
   ...DefaultTheme,
-  enhanceApp({ app }) {
+  enhanceApp({ app, router }) {
     // register global components
     app.component('Mermaid', Mermaid);
+    router.onBeforeRouteChange = (to) => {
+      if (router.route.path !== '/') {
+        return;
+      }
+      try {
+        const newPath = getRedirect(to);
+        if (newPath) {
+          console.log(`Redirecting to ${newPath} from ${window.location}`);
+          // router.go isn't loading the ID properly.
+          window.location.href = `/mermaid/${newPath}`;
+        }
+      } catch (e) {}
+    };
   },
-};
+} as typeof DefaultTheme;

packages/mermaid/src/docs/.vitepress/theme/redirect.ts

@@ -1,8 +1,13 @@
+export interface Redirect {
+  path: string;
+  id?: string;
+}
+
 /**
  * Extracts the base slug from the old URL.
  * @param link - The old URL.
  */
-export const getBaseFile = (link: string): string => {
+const getBaseFile = (link: string): Redirect => {
   const url = new URL(link);
   if (
     (url.hostname !== 'mermaid-js.github.io' && url.hostname !== 'localhost') ||
@@ -10,13 +15,20 @@ export const getBaseFile = (link: string): string => {
   ) {
     throw new Error('Not mermaidjs url');
   }
-  const hash = url.hash
+  const [path, params, ...rest] = url.hash
     .toLowerCase()
     .replace('.md', '')
     .replace(/^#\/?/g, '')
     .replace(/^\.\//g, '')
-    .split('?')[0];
-  return hash;
+    .split('?');
+
+  // Find id in params
+  const id = params
+    ?.split('&')
+    .find((param) => param.startsWith('id='))
+    ?.split('=')[1];
+
+  return { path, id };
 };
 
 const redirectMap: Record<string, string> = {
@@ -53,7 +65,7 @@ const redirectMap: Record<string, string> = {
   requirementdiagram: 'syntax/requirementDiagram',
   security: 'community/security',
   sequencediagram: 'syntax/sequenceDiagram',
-  setup: '',
+  setup: 'config/setup/README',
   statediagram: 'syntax/stateDiagram',
   themes: 'config/theming',
   theming: 'config/theming',
@@ -69,6 +81,9 @@ const redirectMap: Record<string, string> = {
  * @returns The new documentation path.
  */
 export const getRedirect = (link: string): string | undefined => {
-  const base = getBaseFile(link);
-  return redirectMap[base];
+  const { path, id } = getBaseFile(link);
+  if (!(path in redirectMap)) {
+    return;
+  }
+  return `${redirectMap[path]}.html${id ? `#${id}` : ''}`;
 };

packages/mermaid/src/docs/index.md

@@ -32,16 +32,6 @@ features:
 
 <script setup>
 import { VPTeamMembers } from 'vitepress/theme'
-import { getRedirect } from './.vitepress/redirect';
-
-try{
-  const newPath = getRedirect(window.location);
-  if(newPath) {
-    console.log(`Redirecting to ${newPath} from ${window.location}`);
-    window.location.replace(`/mermaid/${getRedirect(window.location)}.html`);
-  }
-}catch(e){
-}
 
 const websiteSVG = {
   svg: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></svg>'

packages/mermaid/src/docs/redirect.spec.ts

@@ -0,0 +1,37 @@
+// This file should be moved into .vitepress folder once https://github.com/vitest-dev/vitest/issues/2344 is resolved.
+// Update https://github.com/mermaid-js/mermaid/blob/18c27c6f1d0537a738cbd95898df301b83c38ffc/packages/mermaid/src/docs.mts#L246 once fixed
+
+import { expect, test } from 'vitest';
+import { getRedirect } from './.vitepress/theme/redirect';
+
+test.each([
+  ['http://localhost:1234/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
+  ['http://localhost/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/flowchart.md', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/./flowchart', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#flowchart', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/flowchart', 'syntax/flowchart.html'],
+  ['https://mermaid-js.github.io/mermaid/#/flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'],
+  ['https://mermaid-js.github.io/mermaid/#/./flowchart.md?id=my-id', 'syntax/flowchart.html#my-id'],
+  [
+    'https://mermaid-js.github.io/mermaid/#/flowchart?another=test&id=my-id&one=more',
+    'syntax/flowchart.html#my-id',
+  ],
+  ['https://mermaid-js.github.io/mermaid/#/n00b-advanced', 'config/n00b-advanced.html'],
+  ['https://mermaid-js.github.io/mermaid/#/n00b-advanced.md', 'config/n00b-advanced.html'],
+  [
+    'https://mermaid-js.github.io/mermaid/#/flowchart?id=a-node-in-the-form-of-a-circle',
+    'syntax/flowchart.html#a-node-in-the-form-of-a-circle',
+  ],
+])('should process url %s to %s', (link: string, path: string) => {
+  expect(getRedirect(link)).toBe(path);
+});
+
+test('should throw for invalid URL', () => {
+  // Not mermaid domain
+  expect(() => getRedirect('https://www.google.com')).toThrowError();
+
+  // Not `/mermaid/` path
+  expect(() => getRedirect('http://localhost/#/flowchart.md')).toThrowError();
+});