Merge branch 'develop' into sidv/viteVitest

* develop: (30 commits)
  Fix docs
  Auto stash before merge of "develop" and "origin/develop"
  vite -> cts
  add lcov
  chore(deps-dev): bump esbuild from 0.15.6 to 0.15.8
  fix(docs): update link
  CI Concurrency 4
  Remove build
  Parallel e2e
  Revert "unify Jison tranformers"
  Update yarn.lock
  fix(docs): `mmd` detection
  Hope this fails
  Remove `docs:build` from postbuild.
  Add verification log
  This should fail CI
  chore(deps-dev): bump @types/lodash from 4.14.184 to 4.14.185
  Update integrations.md
  Add vitepress pluin
  Fix lint
  ...

.github/workflows/e2e.yml

@@ -9,30 +9,39 @@ jobs:
   build:
     runs-on: ubuntu-latest
     strategy:
+      fail-fast: false
       matrix:
         node-version: [16.x]
+        containers: [1, 2, 3, 4]
     steps:
       - uses: actions/checkout@v3
 
+      - uses: actions/cache@v3
+        id: yarn-and-build-cache
+        with:
+          path: |
+            ~/.cache/Cypress
+            build
+            node_modules
+          key: ${{ runner.os }}-node_modules-build-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-node_modules-build-
+
       - name: Setup Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
           cache: yarn
           node-version: ${{ matrix.node-version }}
 
-      - name: Install Yarn
+      # Install NPM dependencies, cache them correctly
-        run: npm i yarn --global
+      # and run all Cypress tests
-
+      - name: Cypress run
-      - name: Install Packages
+        uses: cypress-io/github-action@v3
-        run: |
+        with:
-          yarn install --frozen-lockfile
+          start: yarn dev
+          wait-on: 'http://localhost:9000'
+          record: true
+          headless: true
+          parallel: true
         env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
-
-      - name: Run Build
-        run: yarn build
-
-      - name: Run E2E Tests
-        run: yarn e2e
-        env:
-          CYPRESS_CACHE_FOLDER: .cache/Cypress

cypress.config.cjs

@@ -4,6 +4,7 @@ const { defineConfig } = require('cypress');
 const { addMatchImageSnapshotPlugin } = require('cypress-image-snapshot/plugin');
 
 module.exports = defineConfig({
+  projectId: 'n2sma2',
   e2e: {
     specPattern: 'cypress/integration/**/*.{js,jsx,ts,tsx}',
     setupNodeEvents(on, config) {

docs/8.6.0_docs.md

@@ -77,7 +77,19 @@ When deployed within code, init is called before the graph/diagram description.
 
 **for example**:
 
-```mmd
+```mermaid-example
+%%{init: {"theme": "default", "logLevel": 1 }}%%
+ graph LR
+  a-->b
+  b-->c
+  c-->d
+  d-->e
+  e-->f
+  f-->g
+  g-->
+```
+
+```mermaid
 %%{init: {"theme": "default", "logLevel": 1 }}%%
  graph LR
   a-->b

docs/CHANGELOG.md

@@ -42,7 +42,13 @@ It is also possible to override site-wide theme settings locally, for a specific
 
 **Following is an example:**
 
-```mmd
+```mermaid-example
+%%{init: {'theme':'base'}}%%
+  graph TD
+    a --> b
+```
+
+```mermaid
 %%{init: {'theme':'base'}}%%
   graph TD
     a --> b
@@ -58,7 +64,25 @@ The easiest way to make a custom theme is to start with the base theme, and just
 
 Here is an example of overriding `primaryColor` and giving everything a different look, using `%%init%%`.
 
-```mmd
+```mermaid-example
+%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
+```mermaid
 %%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#ff0000'}}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)

docs/README.md

@@ -49,7 +49,15 @@ In our release process we rely heavily on visual regression tests using [applito
 
 ### [Flowchart](./flowchart.md?id=flowcharts-basic-syntax)
 
-```mmd
+```mermaid-example
+graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;
+```
+
+```mermaid
 graph TD;
     A-->B;
     A-->C;
@@ -61,7 +69,21 @@ graph TD;
 
 ### [Sequence diagram](./sequenceDiagram.md)
 
-```mmd
+```mermaid-example
+sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+```
+
+```mermaid
 sequenceDiagram
     participant Alice
     participant Bob
@@ -79,7 +101,20 @@ sequenceDiagram
 
 ### [Gantt diagram](./gantt.md)
 
-```mmd
+```mermaid-example
+gantt
+dateFormat  YYYY-MM-DD
+title Adding GANTT diagram to mermaid
+excludes weekdays 2014-01-10
+
+section A section
+Completed task            :done,    des1, 2014-01-06,2014-01-08
+Active task               :active,  des2, 2014-01-09, 3d
+Future task               :         des3, after des2, 5d
+Future task2               :         des4, after des3, 5d
+```
+
+```mermaid
 gantt
 dateFormat  YYYY-MM-DD
 title Adding GANTT diagram to mermaid
@@ -96,7 +131,24 @@ Future task2               :         des4, after des3, 5d
 
 ### [Class diagram](./classDiagram.md)
 
-```mmd
+```mermaid-example
+classDiagram
+Class01 <|-- AveryLongClass : Cool
+Class03 *-- Class04
+Class05 o-- Class06
+Class07 .. Class08
+Class09 --> C2 : Where am i?
+Class09 --* C3
+Class09 --|> Class07
+Class07 : equals()
+Class07 : Object[] elementData
+Class01 : size()
+Class01 : int chimp
+Class01 : int gorilla
+Class08 <--> C2: Cool label
+```
+
+```mermaid
 classDiagram
 Class01 <|-- AveryLongClass : Cool
 Class03 *-- Class04
@@ -145,7 +197,15 @@ Class08 <--> C2: Cool label
 
 ### [Entity Relationship Diagram - :exclamation: experimental](./entityRelationshipDiagram.md)
 
-```mmd
+```mermaid-example
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE-ITEM : contains
+    CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
+
+```
+
+```mermaid
 erDiagram
     CUSTOMER ||--o{ ORDER : places
     ORDER ||--|{ LINE-ITEM : contains
@@ -157,7 +217,19 @@ erDiagram
 
 ### [User Journey Diagram](./user-journey.md)
 
-```mmd
+```mermaid-example
+journey
+    title My working day
+    section Go to work
+      Make tea: 5: Me
+      Go upstairs: 3: Me
+      Do work: 1: Me, Cat
+    section Go home
+      Go downstairs: 5: Me
+      Sit down: 5: Me
+```
+
+```mermaid
 journey
     title My working day
     section Go to work

docs/classDiagram.md

@@ -336,7 +336,12 @@ classE o-- classF : aggregation
 
 Relations can logically represent an N:M association:
 
-```mmd
+```mermaid-example
+classDiagram
+    Animal <|--|> Zebra
+```
+
+```mermaid
 classDiagram
     Animal <|--|> Zebra
 ```
@@ -468,7 +473,17 @@ class Color{
 
 Comments can be entered within a class diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including any class diagram syntax.
 
-```mmd
+```mermaid-example
+classDiagram
+%% This whole line is a comment classDiagram class Shape <<interface>>
+class Shape{
+    <<interface>>
+    noOfVertices
+    draw()
+}
+```
+
+```mermaid
 classDiagram
 %% This whole line is a comment classDiagram class Shape <<interface>>
 class Shape{
@@ -538,7 +553,15 @@ You would define these actions on a separate line after all classes have been de
 
 _URL Link:_
 
-```mmd
+```mermaid-example
+classDiagram
+class Shape
+link Shape "https://www.github.com" "This is a tooltip for a link"
+class Shape2
+click Shape2 href "https://www.github.com" "This is a tooltip for a link"
+```
+
+```mermaid
 classDiagram
 class Shape
 link Shape "https://www.github.com" "This is a tooltip for a link"
@@ -548,7 +571,15 @@ click Shape2 href "https://www.github.com" "This is a tooltip for a link"
 
 _Callback:_
 
-```mmd
+```mermaid-example
+classDiagram
+class Shape
+callback Shape "callbackFunction" "This is a tooltip for a callback"
+class Shape2
+click Shape2 call callbackFunction() "This is a tooltip for a callback"
+```
+
+```mermaid
 classDiagram
 class Shape
 callback Shape "callbackFunction" "This is a tooltip for a callback"

docs/diagrams-and-syntax-and-examples/flowchart.md

@@ -397,7 +397,15 @@ graph TB
 
 If you describe the same diagram using the the basic syntax, it will take four lines:
 
-```mmd
+```mermaid-example
+graph TB
+    A --> C
+    A --> D
+    B --> C
+    B --> D
+```
+
+```mermaid
 graph TB
     A --> C
     A --> D
@@ -740,7 +748,13 @@ Beginner's tip—here's a full example of using interactive links in HTML:
 
 Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text until the next newline will be treated as a comment, including all punctuation and any flow syntax.
 
-```mmd
+```mermaid-example
+graph LR
+%% this is a comment A -- text --> B{node}
+   A -- text --> B -- text2 --> C
+```
+
+```mermaid
 graph LR
 %% this is a comment A -- text --> B{node}
    A -- text --> B -- text2 --> C

docs/entityRelationshipDiagram.md

@@ -114,7 +114,13 @@ Cardinality is a property that describes how many elements of another entity can
 
 Relationships may be classified as either _identifying_ or _non-identifying_ and these are rendered with either solid or dashed lines respectively. This is relevant when one of the entities in question can not have independent existence without the other. For example a firm that insures people to drive cars might need to store data on `NAMED-DRIVER`s. In modelling this we might start out by observing that a `CAR` can be driven by many `PERSON` instances, and a `PERSON` can drive many `CAR`s - both entities can exist without the other, so this is a non-identifying relationship that we might specify in Mermaid as: `PERSON }|..|{ CAR : "driver"`. Note the two dots in the middle of the relationship that will result in a dashed line being drawn between the two entities. But when this many-to-many relationship is resolved into two one-to-many relationships, we observe that a `NAMED-DRIVER` cannot exist without both a `PERSON` and a `CAR` - the relationships become identifying and would be specified using hyphens, which translate to a solid line:
 
-```mmd
+```mermaid-example
+erDiagram
+    CAR ||--o{ NAMED-DRIVER : allows
+    PERSON ||--o{ NAMED-DRIVER : is
+```
+
+```mermaid
 erDiagram
     CAR ||--o{ NAMED-DRIVER : allows
     PERSON ||--o{ NAMED-DRIVER : is

docs/flowchart.md

@@ -403,7 +403,15 @@ word of warning, one could go overboard with this making the flowchart harder to
 markdown form. The Swedish word `lagom` comes to mind. It means, not too much and not too little.
 This goes for expressive syntaxes as well.
 
-```mmd
+```mermaid-example
+flowchart TB
+    A --> C
+    A --> D
+    B --> C
+    B --> D
+```
+
+```mermaid
 flowchart TB
     A --> C
     A --> D
@@ -778,7 +786,13 @@ Beginner's tip—a full example using interactive links in a html context:
 
 Comments can be entered within a flow diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any flow syntax
 
-```mmd
+```mermaid-example
+flowchart LR
+%% this is a comment A -- text --> B{node}
+   A -- text --> B -- text2 --> C
+```
+
+```mermaid
 flowchart LR
 %% this is a comment A -- text --> B{node}
    A -- text --> B -- text2 --> C

docs/gantt.md

@@ -234,7 +234,21 @@ More info in: https://github.com/mbostock/d3/wiki/Time-Formatting
 
 Comments can be entered within a gantt chart, which will be ignored by the parser. Comments need to be on their own line and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
 
-```mmd
+```mermaid-example
+gantt
+    title A Gantt Diagram
+    %% this is a comment
+    dateFormat  YYYY-MM-DD
+    section Section
+    A task           :a1, 2014-01-01, 30d
+    Another task     :after a1  , 20d
+    section Another
+    Task in sec      :2014-01-12  , 12d
+    another task      : 24d
+
+```
+
+```mermaid
 gantt
     title A Gantt Diagram
     %% this is a comment

docs/integrations.md

@@ -51,6 +51,8 @@ They also serve as proof of concept, for the variety of things that can be built
 
 ## CMS
 
+- [VitePress](https://vitepress.vuejs.org/)
+  - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
 - [VuePress](https://vuepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
 - [Grav CMS](https://getgrav.org/)

docs/sequenceDiagram.md

@@ -481,7 +481,14 @@ sequenceDiagram
 
 Comments can be entered within a sequence diagram, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
 
-```mmd
+```mermaid-example
+sequenceDiagram
+    Alice->>John: Hello John, how are you?
+    %% this is a comment
+    John-->>Alice: Great!
+```
+
+```mermaid
 sequenceDiagram
     Alice->>John: Hello John, how are you?
     %% this is a comment
@@ -554,7 +561,20 @@ This can be configured by adding one or more link lines with the format:
 
     link <actor>: <link-label> @ <link-url>
 
-```mmd
+```mermaid-example
+sequenceDiagram
+    participant Alice
+    participant John
+    link Alice: Dashboard @ https://dashboard.contoso.com/alice
+    link Alice: Wiki @ https://wiki.contoso.com/alice
+    link John: Dashboard @ https://dashboard.contoso.com/john
+    link John: Wiki @ https://wiki.contoso.com/john
+    Alice->>John: Hello John, how are you?
+    John-->>Alice: Great!
+    Alice-)John: See you later!
+```
+
+```mermaid
 sequenceDiagram
     participant Alice
     participant John

docs/stateDiagram.md

@@ -403,7 +403,18 @@ stateDiagram
 
 Comments can be entered within a state diagram chart, which will be ignored by the parser. Comments need to be on their own line, and must be prefaced with `%%` (double percent signs). Any text after the start of the comment to the next newline will be treated as a comment, including any diagram syntax
 
-```mmd
+```mermaid-example
+stateDiagram-v2
+    [*] --> Still
+    Still --> [*]
+%% this is a comment
+    Still --> Moving
+    Moving --> Still %% another comment
+    Moving --> Crash
+    Crash --> [*]
+```
+
+```mermaid
 stateDiagram-v2
     [*] --> Still
     Still --> [*]

docs/theming.md

@@ -41,7 +41,13 @@ mermaidAPI.initialize({
 
 When Generating a diagram using on a webpage that supports mermaid. It is also possible to override site-wide theme settings locally, for a specific diagram, using directives, as long as it is not prohibited by the `secure` array.
 
-```mmd
+```mermaid-example
+%%{init: {'theme':'base'}}%%
+  graph TD
+    a --> b
+```
+
+```mermaid
 %%{init: {'theme':'base'}}%%
   graph TD
     a --> b
@@ -329,7 +335,25 @@ In the following examples, the directive `init` is used, with the `theme` being
 
 ### Flowchart
 
-```mmd
+```mermaid-example
+%%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
+        graph TD
+          A[Christmas] -->|Get money| B(Go shopping)
+          B --> C{Let me think}
+          B --> G[/Another/]
+          C ==>|One| D[Laptop]
+          C -->|Two| E[iPhone]
+          C -->|Three| F[fa:fa-car Car]
+          subgraph section
+            C
+            D
+            E
+            F
+            G
+          end
+```
+
+```mermaid
 %%{init: {'securityLevel': 'loose', 'theme':'base'}}%%
         graph TD
           A[Christmas] -->|Get money| B(Go shopping)

package.json

@@ -32,8 +32,8 @@
     "build": "yarn clean; concurrently \"yarn build:vite\" \"yarn build:types\"",
     "dev": "concurrently \"yarn build:vite --watch\" \"ts-node-esm .vite/server\"",
     "docs:build": "ts-node-esm src/docs.mts",
-    "docs:verify": "ts-node-esm src/docs.mts --verify",
+    "docs:verify": "yarn docs:build --verify",
-    "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md && yarn docs:build",
+    "postbuild": "documentation build src/mermaidAPI.ts src/config.ts src/defaultConfig.ts --shallow -f md --markdown-toc false > src/docs/Setup.md && prettier --write src/docs/Setup.md",
     "release": "yarn build",
     "lint": "eslint --cache --ignore-path .gitignore . && yarn lint:jison && prettier --check .",
     "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write .",
@@ -88,7 +88,7 @@
     "@types/eslint": "^8.4.6",
     "@types/express": "^4.17.13",
     "@types/jsdom": "^20.0.0",
-    "@types/lodash": "^4.14.184",
+    "@types/lodash": "^4.14.185",
     "@types/prettier": "^2.7.0",
     "@types/stylis": "^4.0.2",
     "@typescript-eslint/eslint-plugin": "^5.37.0",
@@ -100,7 +100,7 @@
     "cypress": "^10.0.0",
     "cypress-image-snapshot": "^4.0.1",
     "documentation": "13.2.0",
-    "esbuild": "^0.15.6",
+    "esbuild": "^0.15.8",
     "eslint": "^8.23.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
@@ -123,6 +123,7 @@
     "prettier-plugin-jsdoc": "^0.4.2",
     "remark": "^14.0.2",
     "rimraf": "^3.0.2",
+    "rollup": "^2.79.1",
     "start-server-and-test": "^1.12.6",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.3",

src/docs.mts

@@ -1,11 +1,10 @@
 /* eslint-disable no-console */
 
 /**
- * @file Transform documentation source files into files suitable for publishing
+ * @file Transform documentation source files into files suitable for publishing and optionally copy
- *   and optionally copy the transformed files from the source directory to the
+ *   the transformed files from the source directory to the directory used for the final, published
- *   directory used for the final, published documentation directory. The list
+ *   documentation directory. The list of files transformed and copied to final documentation
- *   of files transformed and copied to final documentation directory are logged
+ *   directory are logged to the console. If a file in the source directory has the same contents in
- *   to the console. If a file in the source directory has the same contents in
  *   the final directory, nothing is done (the final directory is up-to-date).
  * @example
  *   docs
@@ -24,12 +23,12 @@
  *   If the --git option is used, the command `git add docs` will be run after all transformations (and/or verifications) have completed successfully
  *   If not files were transformed, the git command is not run.
  *
- * @todo Ensure that the documentation source and final paths are correct by
+ * @todo Ensure that the documentation source and final paths are correct by using process.cwd() to
- *   using process.cwd() to get their absolute paths. Ensures that the location
+ *   get their absolute paths. Ensures that the location of those 2 directories is not dependent on
- *   of those 2 directories is not dependent on where this file resides.
+ *   where this file resides.
  *
- * @todo Write a test file for this. (Will need to be able to deal .mts file.
+ * @todo Write a test file for this. (Will need to be able to deal .mts file. Jest has trouble with
- *   Jest has trouble with it.)
+ *   it.)
  */
 import { readFileSync, writeFileSync, mkdirSync, existsSync } from 'fs';
 import { exec } from 'child_process';
@@ -68,14 +67,13 @@ const prettierConfig: prettier.Config = {
 let filesWereTransformed = false;
 
 /**
- * Given a source file name and path, return the documentation destination full
+ * Given a source file name and path, return the documentation destination full path and file name
- * path and file name Create the destination path if it does not already exist.
+ * Create the destination path if it does not already exist.
  *
  * @param {string} file - Name of the file (including full path)
- * @returns {string} Name of the file with the path changed from the source
+ * @returns {string} Name of the file with the path changed from the source directory to final
- *   directory to final documentation directory
+ *   documentation directory
- * @todo Possible Improvement: combine with lint-staged to only copy files that
+ * @todo Possible Improvement: combine with lint-staged to only copy files that have changed
- *   have changed
  */
 const changeToFinalDocDir = (file: string): string => {
   const newDir = file.replace(SOURCE_DOCS_DIR, FINAL_DOCS_DIR);
@@ -84,8 +82,8 @@ const changeToFinalDocDir = (file: string): string => {
 };
 
 /**
- * Log messages to the console showing if the transformed file copied to the
+ * Log messages to the console showing if the transformed file copied to the final documentation
- * final documentation directory or still needs to be copied.
+ * directory or still needs to be copied.
  *
  * @param {string} filename Name of the file that was transformed
  * @param {boolean} wasCopied Whether or not the file was copied
@@ -101,14 +99,13 @@ const logWasOrShouldBeTransformed = (filename: string, wasCopied: boolean) => {
 };
 
 /**
- * If the file contents were transformed, set the _filesWereTransformed_ flag to
+ * If the file contents were transformed, set the _filesWereTransformed_ flag to true and copy the
- * true and copy the transformed contents to the final documentation directory
+ * transformed contents to the final documentation directory if the doCopy flag is true. Log
- * if the doCopy flag is true. Log messages to the console.
+ * messages to the console.
  *
  * @param {string} filename Name of the file that will be verified
- * @param {boolean} [doCopy=false] Whether we should copy that
+ * @param {boolean} [doCopy=false] Whether we should copy that transformedContents to the final
- *   transformedContents to the final documentation directory. Default is
+ *   documentation directory. Default is `false`
- *   `false`. Default is `false`
  * @param {string} [transformedContent] New contents for the file
  */
 const copyTransformedContents = (filename: string, doCopy = false, transformedContent?: string) => {
@@ -133,15 +130,14 @@ const readSyncedUTF8file = (filename: string): string => {
 };
 
 /**
- * Transform a markdown file and write the transformed file to the directory for
+ * Transform a markdown file and write the transformed file to the directory for published
- * published documentation
+ * documentation
  *
- * 1. Add a `mermaid-example` block before every `mermaid` or `mmd` block On the
+ * 1. Add a `mermaid-example` block before every `mermaid` or `mmd` block On the docsify site (one
- *    docsify site (one place where the documentation is published), this will
+ *    place where the documentation is published), this will show the code used for the mermaid
- *    show the code used for the mermaid diagram
+ *    diagram
  * 2. Add the text that says the file is automatically generated
- * 3. Use prettier to format the file Verify that the file has been changed and
+ * 3. Use prettier to format the file Verify that the file has been changed and write out the changes
- *    write out the changes
  *
  * @param file {string} name of the file that will be verified
  */
@@ -149,12 +145,15 @@ const transformMarkdown = (file: string) => {
   const doc = readSyncedUTF8file(file);
   const ast: Root = remark.parse(doc);
   const out = flatmap(ast, (c: Code) => {
-    if (c.type !== 'code' || !c.lang?.startsWith('mermaid')) {
+    if (c.type !== 'code') {
       return [c];
     }
     if (c.lang === 'mermaid' || c.lang === 'mmd') {
       c.lang = 'mermaid-example';
     }
+    if (c.lang !== 'mermaid-example') {
+      return [c];
+    }
     return [c, Object.assign({}, c, { lang: 'mermaid' })];
   });
 
@@ -168,11 +167,11 @@ const transformMarkdown = (file: string) => {
 };
 
 /**
- * Transform an HTML file and write the transformed file to the directory for
+ * Transform an HTML file and write the transformed file to the directory for published
- * published documentation
+ * documentation
  *
- * - Add the text that says the file is automatically generated Verify that the
+ * - Add the text that says the file is automatically generated Verify that the file has been changed
- *   file has been changed and write out the changes
+ *   and write out the changes
  *
  * @param filename {string} name of the HTML file to transform
  */
@@ -204,6 +203,9 @@ const transformHtml = (filename: string) => {
 
 /** Main method (entry point) */
 (async () => {
+  if (verifyOnly) {
+    console.log('Verifying that all files are in sync with the source files');
+  }
   const sourceDirGlob = join('.', SOURCE_DOCS_DIR, '**');
   const includeFilesStartingWithDot = true;
 

src/docs/integrations.md

@@ -49,6 +49,8 @@ They also serve as proof of concept, for the variety of things that can be built
 
 ## CMS
 
+- [VitePress](https://vitepress.vuejs.org/)
+  - [Plugin for Mermaid.js](https://emersonbottero.github.io/vitepress-plugin-mermaid/)
 - [VuePress](https://vuepress.vuejs.org/)
   - [Plugin for Mermaid.js](https://github.com/eFrane/vuepress-plugin-mermaidjs)
 - [Grav CMS](https://getgrav.org/)

vite.config.cts

@@ -0,0 +1,38 @@
+import { Generator } from 'jison';
+import { defineConfig } from 'vitest/config';
+
+const fileRegex = /\.jison$/;
+
+/** Transforms jison to js. */
+export function jisonPlugin() {
+  return {
+    name: 'transform-jison',
+
+    transform(src: string, id: string) {
+      if (fileRegex.test(id)) {
+        // eslint-disable-next-line no-console
+        console.log('Transforming', id);
+        return {
+          // @ts-ignore no typings for jison
+          code: new Generator(src, { 'token-stack': true }).generate(),
+          map: null, // provide source map if available
+        };
+      }
+    },
+  };
+}
+
+export default defineConfig({
+  resolve: {
+    extensions: ['.jison', '.js', '.ts', '.json'],
+  },
+  plugins: [jisonPlugin()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['src/tests/setup.ts'],
+    coverage: {
+      reporter: ['text', 'json', 'html', 'lcov'],
+    },
+  },
+});