diff --git a/.github/workflows/dependency-review.yml b/.github/workflows/dependency-review.yml index 845c763e8..34b14c395 100644 --- a/.github/workflows/dependency-review.yml +++ b/.github/workflows/dependency-review.yml @@ -17,4 +17,4 @@ jobs: - name: 'Checkout Repository' uses: actions/checkout@v3 - name: 'Dependency Review' - uses: actions/dependency-review-action@v2 + uses: actions/dependency-review-action@v3 diff --git a/.github/workflows/pr-labeler.yml b/.github/workflows/pr-labeler.yml index 107743c6a..0a53c6e42 100644 --- a/.github/workflows/pr-labeler.yml +++ b/.github/workflows/pr-labeler.yml @@ -8,6 +8,6 @@ jobs: runs-on: ubuntu-latest steps: - name: Label PR - uses: TimonVS/pr-labeler-action@v3 + uses: TimonVS/pr-labeler-action@v4 env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/publish-docs.yml b/.github/workflows/publish-docs.yml index 1ac646de1..cdd6167b7 100644 --- a/.github/workflows/publish-docs.yml +++ b/.github/workflows/publish-docs.yml @@ -5,6 +5,7 @@ on: push: branches: - master + pull_request: # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -24,8 +25,6 @@ jobs: # Build job build: runs-on: ubuntu-latest - env: - NODE_OPTIONS: '--max_old_space_size=4096' steps: - name: Checkout uses: actions/checkout@v3 @@ -54,6 +53,7 @@ jobs: # Deployment job deploy: + if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/master' }} environment: name: github-pages runs-on: ubuntu-latest diff --git a/.github/workflows/release-publish.yml b/.github/workflows/release-publish.yml index 6f0806de1..28094453e 100644 --- a/.github/workflows/release-publish.yml +++ b/.github/workflows/release-publish.yml @@ -11,18 +11,21 @@ jobs: - uses: actions/checkout@v3 - uses: fregante/setup-git-user@v1 - - name: Setup Node.js + - uses: pnpm/action-setup@v2 + # uses version from "packageManager" field in package.json + + - name: Setup Node.js v18 uses: actions/setup-node@v3 with: + cache: pnpm node-version: 18.x - - name: Install Yarn - run: npm i yarn --global - - - name: Install Json - run: npm i json --global - name: Install Packages - run: yarn install --frozen-lockfile + run: | + pnpm install --frozen-lockfile + npm i json --global + env: + CYPRESS_CACHE_FOLDER: .cache/Cypress - name: Prepare release run: | @@ -31,7 +34,7 @@ jobs: git checkout -t origin/release/$VERSION npm version --no-git-tag-version --allow-same-version $VERSION git add package.json - git commit -m "Bump version $VERSION" + git commit -nm "Bump version $VERSION" git checkout -t origin/master git merge -m "Release $VERSION" --no-ff release/$VERSION git push --no-verify diff --git a/.vite/build.ts b/.vite/build.ts index c9d44219f..2de7c0ad4 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -122,11 +122,9 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) }; const buildPackage = async (entryName: keyof typeof packageOptions) => { - return Promise.allSettled([ - build(getBuildConfig({ minify: false, entryName })), - build(getBuildConfig({ minify: 'esbuild', entryName })), - build(getBuildConfig({ minify: false, core: true, entryName })), - ]); + await build(getBuildConfig({ minify: false, entryName })); + await build(getBuildConfig({ minify: 'esbuild', entryName })); + await build(getBuildConfig({ minify: false, core: true, entryName })); }; const main = async () => { diff --git a/README.md b/README.md index a47831282..f4cf8e105 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,37 @@ -# mermaid +

+ +

+

+Mermaid +

+

+Generate diagrams from markdown-like text. +

+

+ +

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_) +

+Live Editor! +

+

+ 📖 Documentation | 🚀 Getting Started | 🌐 CDN | 🙌 Join Us +

+

+简体中文 +

-English | [简体中文](./README.zh-CN.md) +
+
+ +[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) +[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) +[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) +[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) +[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) +[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) +[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) +[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_) @@ -33,8 +62,6 @@ You can also use Mermaid within [GitHub](https://github.blog/2022-02-14-include- For a more detailed introduction to Mermaid and some of its more basic uses, look to the [Beginner's Guide](./docs/community/n00b-overview.md), [Usage](./docs/config/usage.md) and [Tutorials](./docs/config/Tutorials.md). -🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [Documentation](https://mermaidjs.github.io) | 🙌 [Contribution](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [Changelog](./docs/CHANGELOG.md) - In our release process we rely heavily on visual regression tests using [applitools](https://applitools.com/). Applitools is a great service which has been easy to use and integrate with our tests. diff --git a/README.zh-CN.md b/README.zh-CN.md index df2769e74..65cf38645 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -1,8 +1,37 @@ -# mermaid +

+ +

+

+Mermaid +

+

+通过解析类 Markdown 的文本语法来实现图表的创建和动态修改。 +

+

+ +

-[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) [![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) [![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) [![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) [![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) [![NPM](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) [![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) [![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_) +

+Live Editor! +

+

+ 📖 文档 | 🚀 入门 | 🌐 CDN | 🙌 加入我们 +

+

+English +

-[English](./README.md) | 简体中文 +
+
+ +[![NPM](https://img.shields.io/npm/v/mermaid)](https://www.npmjs.com/package/mermaid) +[![Build CI Status](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml/badge.svg)](https://github.com/mermaid-js/mermaid/actions/workflows/build.yml) +[![npm minified gzipped bundle size](https://img.shields.io/bundlephobia/minzip/mermaid)](https://bundlephobia.com/package/mermaid) +[![Coverage Status](https://coveralls.io/repos/github/mermaid-js/mermaid/badge.svg?branch=master)](https://coveralls.io/github/mermaid-js/mermaid?branch=master) +[![CDN Status](https://img.shields.io/jsdelivr/npm/hm/mermaid)](https://www.jsdelivr.com/package/npm/mermaid) +[![NPM Downloads](https://img.shields.io/npm/dm/mermaid)](https://www.npmjs.com/package/mermaid) +[![Join our Slack!](https://img.shields.io/static/v1?message=join%20chat&color=9cf&logo=slack&label=slack)](https://join.slack.com/t/mermaid-talk/shared_invite/enQtNzc4NDIyNzk4OTAyLWVhYjQxOTI2OTg4YmE1ZmJkY2Y4MTU3ODliYmIwOTY3NDJlYjA0YjIyZTdkMDMyZTUwOGI0NjEzYmEwODcwOTE) +[![Twitter Follow](https://img.shields.io/badge/Social-mermaidjs__-blue?style=social&logo=twitter)](https://twitter.com/mermaidjs_) @@ -28,8 +57,6 @@ Mermaid 甚至能让非程序员也能通过 [Mermaid Live Editor](https://merma 如果想要查看关于 Mermaid 更详细的介绍及基础使用方式,可以查看 [入门指引](./docs/community/n00b-overview.md), [用法](./docs/config/usage.md) 和 [教程](./docs/config/Tutorials.md). -🌐 [CDN](https://www.jsdelivr.com/package/npm/mermaid) | 📖 [文档](https://mermaidjs.github.io) | 🙌 [贡献](https://github.com/mermaid-js/mermaid/blob/develop/CONTRIBUTING.md) | 📜 [更新日志](./docs/CHANGELOG.md) - ## 示例 @@ -325,7 +352,7 @@ _很不幸的是,鱼与熊掌不可兼得,在这个场景下它意味着在 来自 Knut Sveidqvist: -> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目,它们提供了图形布局和绘图工具库! _ >_同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ >_感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_ +> _特别感谢 [d3](https://d3js.org/) 和 [dagre-d3](https://github.com/cpettitt/dagre-d3) 这两个优秀的项目,它们提供了图形布局和绘图工具库!_ > _同样感谢 [js-sequence-diagram](https://bramp.github.io/js-sequence-diagrams) 提供了时序图语法的使用。 感谢 Jessica Peter 提供了甘特图渲染的灵感。_ > _感谢 [Tyler Long](https://github.com/tylerlong) 从 2017 年四月开始成为了项目的合作者。_ > > _感谢越来越多的 [贡献者们](https://github.com/knsv/mermaid/graphs/contributors),没有你们,就没有这个项目的今天!_ diff --git a/cypress/platform/sidv.html b/cypress/platform/sidv.html index 539288464..fce3c0082 100644 --- a/cypress/platform/sidv.html +++ b/cypress/platform/sidv.html @@ -65,7 +65,7 @@ graph TB
 flowchart-elk LR
   subgraph A
-  a -->b
+  a --> b
   end
   subgraph B
   b
@@ -246,10 +246,7 @@ sequenceDiagram
     
 
     
 ```
 
-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
+From version 9.4.0 you can simplify this code to:
+
+```html
+
+```
+
+or if you prefer not using the ESM package:
+
+```html
+
+```
+
+Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/docs/syntax/stateDiagram.md b/docs/syntax/stateDiagram.md
index 72d7ec63b..807d6149a 100644
--- a/docs/syntax/stateDiagram.md
+++ b/docs/syntax/stateDiagram.md
@@ -501,19 +501,19 @@ There are two ways to apply a `classDef` style to a state:
 
 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
 
-```text
+```txt
     class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```
 
 Here is an example applying the `badBadEvent` style to a state named `Crash`:
 
-```text
+```txt
 class Crash badBadEvent
 ```
 
 Here is an example applying the `movement` style to the two states `Moving` and `Crash`:
 
-```text
+```txt
 class Moving, Crash movement
 ```
 
@@ -572,7 +572,7 @@ and `badBadEvent`
 
 You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is
 
-```text
+```txt
 [state]:::[style name]
 ```
 
diff --git a/docs/syntax/timeline.md b/docs/syntax/timeline.md
index 4e917bc10..943f247a0 100644
--- a/docs/syntax/timeline.md
+++ b/docs/syntax/timeline.md
@@ -459,4 +459,16 @@ Let's put them to use, and see how our sample diagram looks in different themes:
           2010 : Pinterest
 ```
 
-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
+## Integrating with your library/website.
+
+Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
+
+You can use this method to add mermaid including the timeline diagram to a web page:
+
+```html
+
+```
+
+Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/package.json b/package.json
index ca421afd5..3a4847609 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "9.4.0",
   "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.",
   "type": "module",
-  "packageManager": "pnpm@7.25.1",
+  "packageManager": "pnpm@7.27.0",
   "keywords": [
     "diagram",
     "markdown",
@@ -20,11 +20,11 @@
     "build:viz": "pnpm build:mermaid --visualize",
     "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
     "build:watch": "pnpm build:vite --watch",
-    "build": "pnpm run -r clean && concurrently \"pnpm build:vite\" \"pnpm build:types\"",
+    "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
     "release": "pnpm build",
     "lint": "eslint --cache --cache-strategy content --ignore-path .gitignore . && pnpm lint:jison && prettier --cache --check .",
-    "lint:fix": "eslint --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
+    "lint:fix": "eslint --cache --cache-strategy content --fix --ignore-path .gitignore . && prettier --write . && ts-node-esm scripts/fixCSpell.ts",
     "lint:jison": "ts-node-esm ./scripts/jison/lint.mts",
     "cypress": "cypress run",
     "cypress:open": "cypress open",
@@ -61,7 +61,7 @@
     "@types/eslint": "^8.4.10",
     "@types/express": "^4.17.14",
     "@types/js-yaml": "^4.0.5",
-    "@types/jsdom": "^20.0.1",
+    "@types/jsdom": "^21.0.0",
     "@types/lodash": "^4.14.188",
     "@types/mdast": "^3.0.10",
     "@types/node": "^18.11.9",
@@ -69,8 +69,9 @@
     "@types/rollup-plugin-visualizer": "^4.2.1",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
-    "@vitest/coverage-c8": "^0.27.0",
-    "@vitest/ui": "^0.27.0",
+    "@vitest/coverage-c8": "^0.28.4",
+    "@vitest/spy": "^0.28.4",
+    "@vitest/ui": "^0.28.4",
     "concurrently": "^7.5.0",
     "coveralls": "^3.1.1",
     "cypress": "^10.11.0",
@@ -94,21 +95,21 @@
     "jest": "^29.3.1",
     "jison": "^0.4.18",
     "js-yaml": "^4.1.0",
-    "jsdom": "^20.0.2",
+    "jsdom": "^21.0.0",
     "lint-staged": "^13.0.3",
     "path-browserify": "^1.0.1",
     "pnpm": "^7.15.0",
     "prettier": "^2.7.1",
     "prettier-plugin-jsdoc": "^0.4.2",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.0.0",
     "rollup-plugin-visualizer": "^5.8.3",
     "start-server-and-test": "^1.14.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4",
     "vite": "^3.2.3",
-    "vitest": "^0.27.1"
+    "vitest": "^0.28.4"
   },
   "volta": {
-    "node": "18.13.0"
+    "node": "18.14.0"
   }
 }
diff --git a/packages/mermaid-example-diagram/package.json b/packages/mermaid-example-diagram/package.json
index c4d3a57cc..3c71a2ac3 100644
--- a/packages/mermaid-example-diagram/package.json
+++ b/packages/mermaid-example-diagram/package.json
@@ -49,8 +49,8 @@
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "concurrently": "^7.5.0",
-    "mermaid": "workspace:*",
-    "rimraf": "^3.0.2"
+    "rimraf": "^4.0.0",
+    "mermaid": "workspace:*"
   },
   "resolutions": {
     "d3": "^7.0.0"
diff --git a/packages/mermaid-example-diagram/src/detector.ts b/packages/mermaid-example-diagram/src/detector.ts
index fdf7345bb..93fd42762 100644
--- a/packages/mermaid-example-diagram/src/detector.ts
+++ b/packages/mermaid-example-diagram/src/detector.ts
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./diagram-definition');
+  const { diagram } = await import('./diagram-definition.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/.gitignore b/packages/mermaid/.gitignore
index 1a961ffe0..6ed32bcf7 100644
--- a/packages/mermaid/.gitignore
+++ b/packages/mermaid/.gitignore
@@ -1,2 +1,3 @@
 src/vitepress
-src/docs/config/setup
\ No newline at end of file
+src/docs/config/setup
+README.*
\ No newline at end of file
diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json
index cb105abf4..e4480286f 100644
--- a/packages/mermaid/package.json
+++ b/packages/mermaid/package.json
@@ -33,7 +33,7 @@
     "docs:serve": "pnpm docs:build:vitepress && vitepress serve src/vitepress",
     "docs:spellcheck": "cspell --config ../../cSpell.json \"src/docs/**/*.md\"",
     "release": "pnpm build",
-    "prepublishOnly": "pnpm -w run build"
+    "prepublishOnly": "cpy '../../README.*' ./ --cwd=. && pnpm -w run build"
   },
   "repository": {
     "type": "git",
@@ -66,18 +66,19 @@
     "non-layered-tidy-tree-layout": "^2.0.2",
     "stylis": "^4.1.2",
     "ts-dedent": "^2.2.0",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "web-worker": "^1.2.0"
   },
   "devDependencies": {
     "@types/cytoscape": "^3.19.9",
     "@types/d3": "^7.4.0",
     "@types/dompurify": "^2.4.0",
-    "@types/jsdom": "^20.0.1",
+    "@types/jsdom": "^21.0.0",
     "@types/lodash-es": "^4.17.6",
     "@types/micromatch": "^4.0.2",
     "@types/prettier": "^2.7.1",
     "@types/stylis": "^4.0.2",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^5.42.1",
     "@typescript-eslint/parser": "^5.42.1",
     "chokidar": "^3.5.3",
@@ -88,14 +89,14 @@
     "globby": "^13.1.2",
     "jison": "^0.4.18",
     "js-base64": "^3.7.2",
-    "jsdom": "^20.0.2",
+    "jsdom": "^21.0.0",
     "micromatch": "^4.0.5",
     "path-browserify": "^1.0.1",
     "prettier": "^2.7.1",
     "remark": "^14.0.2",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.0.0",
     "start-server-and-test": "^1.14.0",
     "typedoc": "^0.23.18",
     "typedoc-plugin-markdown": "^3.13.6",
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
index 1d825e35c..41760ff4d 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
+++ b/packages/mermaid/src/diagrams/flowchart/elk/detector.ts
@@ -16,7 +16,7 @@ const detector: DiagramDetector = (txt: string, config?: MermaidConfig): boolean
 };
 
 const loader = async () => {
-  const { diagram } = await import('./diagram-definition');
+  const { diagram } = await import('./diagram-definition.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
index 73b37e9f7..b8458efeb 100644
--- a/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
+++ b/packages/mermaid/src/diagrams/flowchart/elk/flowRenderer-elk.js
@@ -10,8 +10,7 @@ import { setupGraphViewbox } from '../../../setupGraphViewbox';
 import common, { evaluate } from '../../common/common';
 import { interpolateToCurve, getStylesFromArray } from '../../../utils';
 
-import ELK from 'elkjs/lib/elk.bundled.js';
-const elk = new ELK();
+let elk;
 
 const portPos = {};
 
@@ -187,7 +186,7 @@ export const addVertices = function (vert, svgId, root, doc, diagObj, parentLook
       default:
         _shape = 'rect';
     }
-    // // Add the node
+    // Add the node
     const node = {
       labelStyle: styles.labelStyle,
       shape: _shape,
@@ -766,6 +765,10 @@ const insertChildren = (nodeArray, parentLookupDb) => {
  */
 
 export const draw = async function (text, id, _version, diagObj) {
+  if (!elk) {
+    const ELK = (await import('elkjs/lib/elk.bundled.js')).default;
+    elk = new ELK();
+  }
   // Add temporary render element
   diagObj.db.clear();
   nodeDb = {};
diff --git a/packages/mermaid/src/diagrams/mindmap/detector.ts b/packages/mermaid/src/diagrams/mindmap/detector.ts
index 82664225b..c96b19097 100644
--- a/packages/mermaid/src/diagrams/mindmap/detector.ts
+++ b/packages/mermaid/src/diagrams/mindmap/detector.ts
@@ -6,7 +6,7 @@ const detector = (txt: string) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./diagram-definition');
+  const { diagram } = await import('./diagram-definition.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
index 8c90f774f..e8793e86a 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmap.spec.js
@@ -1,16 +1,7 @@
 import { parser as mindmap } from './parser/mindmap';
 import * as mindmapDB from './mindmapDb';
-// import { injectUtils } from './mermaidUtils';
 // Todo fix utils functions for tests
-import {
-  // log,
-  setLogLevel,
-  // getConfig,
-  // sanitizeText,
-  // setupGraphViewBox,
-} from '../../diagram-api/diagramAPI';
-
-// injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
+import { setLogLevel } from '../../diagram-api/diagramAPI';
 
 describe('when parsing a mindmap ', function () {
   beforeEach(function () {
diff --git a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
index 0e68a1015..0d814212e 100644
--- a/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
+++ b/packages/mermaid/src/diagrams/mindmap/mindmapRenderer.js
@@ -4,13 +4,9 @@ import { log } from '../../logger';
 import { getConfig } from '../../config';
 import { setupGraphViewbox } from '../../setupGraphViewbox';
 import svgDraw from './svgDraw';
-import cytoscape from 'cytoscape';
-import coseBilkent from 'cytoscape-cose-bilkent';
 import * as db from './mindmapDb';
 
-// Inject the layout algorithm into cytoscape
-cytoscape.use(coseBilkent);
-
+let cytoscape;
 /**
  * @param {any} svg The svg element to draw the diagram onto
  * @param {object} mindmap The mindmap data and hierarchy
@@ -93,7 +89,14 @@ function addNodes(mindmap, cy, conf, level) {
  * @param conf
  * @param cy
  */
-function layoutMindmap(node, conf) {
+async function layoutMindmap(node, conf) {
+  if (!cytoscape) {
+    cytoscape = (await import('cytoscape')).default;
+    const coseBilkent = (await import('cytoscape-cose-bilkent')).default;
+    // Inject the layout algorithm into cytoscape
+    cytoscape.use(coseBilkent);
+  }
+
   return new Promise((resolve) => {
     // Add temporary render element
     const renderEl = select('body').append('div').attr('id', 'cy').attr('style', 'display:none');
diff --git a/packages/mermaid/src/diagrams/mindmap/types/index.d.ts b/packages/mermaid/src/diagrams/mindmap/types/index.d.ts
deleted file mode 100644
index 999ff2f49..000000000
--- a/packages/mermaid/src/diagrams/mindmap/types/index.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export {};
-
-declare global {
-  interface Window {
-    mermaid: any; // 👈️ turn off type checking
-  }
-}
diff --git a/packages/mermaid/src/diagrams/timeline/detector.ts b/packages/mermaid/src/diagrams/timeline/detector.ts
index 9d06d6438..faa86a72c 100644
--- a/packages/mermaid/src/diagrams/timeline/detector.ts
+++ b/packages/mermaid/src/diagrams/timeline/detector.ts
@@ -7,7 +7,7 @@ const detector = (txt: string) => {
 };
 
 const loader = async () => {
-  const { diagram } = await import('./diagram-definition');
+  const { diagram } = await import('./diagram-definition.js');
   return { id, diagram };
 };
 
diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
index 52c9e88f2..2234ef498 100644
--- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
+++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts
@@ -1,17 +1,6 @@
 import mermaid, { type MermaidConfig } from 'mermaid';
-// import mindmap from '@mermaid-js/mermaid-mindmap';
-// import timeline from '@mermaid-js/mermaid-timeline';
-
-const init = (async () => {
-  try {
-    await mermaid.registerExternalDiagrams([]);
-  } catch (e) {
-    console.error(e);
-  }
-})();
 
 export const render = async (id: string, code: string, config: MermaidConfig): Promise => {
-  await init;
   mermaid.initialize(config);
   const svg = await mermaid.renderAsync(id, code);
   return svg;
diff --git a/packages/mermaid/src/docs/syntax/mindmap.md b/packages/mermaid/src/docs/syntax/mindmap.md
index 833f26941..cce7d2e3d 100644
--- a/packages/mermaid/src/docs/syntax/mindmap.md
+++ b/packages/mermaid/src/docs/syntax/mindmap.md
@@ -164,14 +164,32 @@ Root
 
 ## Integrating with your library/website.
 
-Mindmap uses the experimental lazy loading & async rendering features which could change in the future.
+Mindmap uses the experimental lazy loading & async rendering features which could change in the future. From version 9.4.0 this diagram is included in mermaid but use lazy loading in order to keep the size of mermaid down. This is important in order to be able to add additional diagrams going forward.
+
+You can still use the pre 9.4.0 method to add mermaid with mindmaps to a web page:
 
 ```html
 
 ```
 
-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
+From version 9.4.0 you can simplify this code to:
+
+```html
+
+```
+
+or if you prefer not using the ESM package:
+
+```html
+
+```
+
+Note that more complex integrations that use the **render** function directly need to use the **renderAsync** method instead in order to render mind maps.
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/docs/syntax/stateDiagram.md b/packages/mermaid/src/docs/syntax/stateDiagram.md
index 29e355a72..ddfe61c49 100644
--- a/packages/mermaid/src/docs/syntax/stateDiagram.md
+++ b/packages/mermaid/src/docs/syntax/stateDiagram.md
@@ -318,19 +318,19 @@ There are two ways to apply a `classDef` style to a state:
 
 A `class` statement tells Mermaid to apply the named classDef to one or more classes. The form is:
 
-```text
+```txt
     class [one or more state names, separated by commas] [name of a style defined with classDef]
 ```
 
 Here is an example applying the `badBadEvent` style to a state named `Crash`:
 
-```text
+```txt
 class Crash badBadEvent
 ```
 
 Here is an example applying the `movement` style to the two states `Moving` and `Crash`:
 
-```text
+```txt
 class Moving, Crash movement
 ```
 
@@ -365,7 +365,7 @@ and `badBadEvent`
 
 You can apply a classDef style to a state using the `:::` (three colons) operator. The syntax is
 
-```text
+```txt
 [state]:::[style name]
 ```
 
diff --git a/packages/mermaid/src/docs/syntax/timeline.md b/packages/mermaid/src/docs/syntax/timeline.md
index 76fdb5e60..94a485d22 100644
--- a/packages/mermaid/src/docs/syntax/timeline.md
+++ b/packages/mermaid/src/docs/syntax/timeline.md
@@ -291,4 +291,16 @@ Let's put them to use, and see how our sample diagram looks in different themes:
           2010 : Pinterest
 ```
 
-You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/fcf53c98c25604c90a218104268c339be53035a6/src/lib/util/mermaid.ts) to see how the async loading is done.
+## Integrating with your library/website.
+
+Timeline uses experimental lazy loading & async rendering features which could change in the future.The lazy loading is important in order to be able to add additional diagrams going forward.
+
+You can use this method to add mermaid including the timeline diagram to a web page:
+
+```html
+
+```
+
+Note that more complex integrations that the **render** function directly need to use the **renderAsync** method instead in order to render timeline.
+
+You can also refer the implementation in the live editor [here](https://github.com/mermaid-js/mermaid-live-editor/blob/develop/src/lib/util/mermaid.ts) to see how the async loading is done.
diff --git a/packages/mermaid/src/tests/MockedD3.ts b/packages/mermaid/src/tests/MockedD3.ts
index 284b21b08..4600e2667 100644
--- a/packages/mermaid/src/tests/MockedD3.ts
+++ b/packages/mermaid/src/tests/MockedD3.ts
@@ -1,3 +1,5 @@
+import type {} from '@vitest/spy';
+
 /**
  * This is a mocked/stubbed version of the d3 Selection type. Each of the main functions are all
  * mocked (via vi.fn()) so you can track if they have been called, etc.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 810df73a4..f20f95167 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,8 +26,8 @@ importers:
         specifier: ^4.0.5
         version: 4.0.5
       '@types/jsdom':
-        specifier: ^20.0.1
-        version: 20.0.1
+        specifier: ^21.0.0
+        version: 21.1.0
       '@types/lodash':
         specifier: ^4.14.188
         version: 4.14.188
@@ -50,11 +50,14 @@ importers:
         specifier: ^5.48.2
         version: 5.48.2_yygwinqv3a2io74xmwofqb7uka
       '@vitest/coverage-c8':
-        specifier: ^0.27.0
-        version: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce
+        specifier: ^0.28.4
+        version: 0.28.4_vun5xzxu3tkrssf3erdbijyyki
+      '@vitest/spy':
+        specifier: ^0.28.4
+        version: 0.28.4
       '@vitest/ui':
-        specifier: ^0.27.0
-        version: 0.27.1
+        specifier: ^0.28.4
+        version: 0.28.4
       concurrently:
         specifier: ^7.5.0
         version: 7.5.0
@@ -125,8 +128,8 @@ importers:
         specifier: ^4.1.0
         version: 4.1.0
       jsdom:
-        specifier: ^20.0.2
-        version: 20.0.2
+        specifier: ^21.0.0
+        version: 21.1.0
       lint-staged:
         specifier: ^13.0.3
         version: 13.0.3
@@ -143,8 +146,8 @@ importers:
         specifier: ^0.4.2
         version: 0.4.2_prettier@2.7.1
       rimraf:
-        specifier: ^3.0.2
-        version: 3.0.2
+        specifier: ^4.0.0
+        version: 4.1.2
       rollup-plugin-visualizer:
         specifier: ^5.8.3
         version: 5.8.3
@@ -161,8 +164,8 @@ importers:
         specifier: ^3.2.3
         version: 3.2.3_@types+node@18.11.9
       vitest:
-        specifier: ^0.27.1
-        version: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce
+        specifier: ^0.28.4
+        version: 0.28.4_vun5xzxu3tkrssf3erdbijyyki
 
   packages/mermaid:
     dependencies:
@@ -211,6 +214,9 @@ importers:
       uuid:
         specifier: ^9.0.0
         version: 9.0.0
+      web-worker:
+        specifier: ^1.2.0
+        version: 1.2.0
     devDependencies:
       '@types/cytoscape':
         specifier: ^3.19.9
@@ -222,8 +228,8 @@ importers:
         specifier: ^2.4.0
         version: 2.4.0
       '@types/jsdom':
-        specifier: ^20.0.1
-        version: 20.0.1
+        specifier: ^21.0.0
+        version: 21.1.0
       '@types/lodash-es':
         specifier: ^4.17.6
         version: 4.17.6
@@ -237,8 +243,8 @@ importers:
         specifier: ^4.0.2
         version: 4.0.2
       '@types/uuid':
-        specifier: ^8.3.4
-        version: 8.3.4
+        specifier: ^9.0.0
+        version: 9.0.0
       '@typescript-eslint/eslint-plugin':
         specifier: ^5.42.1
         version: 5.42.1_qxgr6oy2qtsmmpo3f6iejuryuq
@@ -270,8 +276,8 @@ importers:
         specifier: ^3.7.2
         version: 3.7.2
       jsdom:
-        specifier: ^20.0.2
-        version: 20.0.2
+        specifier: ^21.0.0
+        version: 21.1.0
       micromatch:
         specifier: ^4.0.5
         version: 4.0.5
@@ -291,8 +297,8 @@ importers:
         specifier: ^3.0.1
         version: 3.0.1
       rimraf:
-        specifier: ^3.0.2
-        version: 3.0.2
+        specifier: ^4.0.0
+        version: 4.1.2
       start-server-and-test:
         specifier: ^1.14.0
         version: 1.14.0
@@ -349,8 +355,8 @@ importers:
         specifier: workspace:*
         version: link:../mermaid
       rimraf:
-        specifier: ^3.0.2
-        version: 3.0.2
+        specifier: ^4.0.0
+        version: 4.1.2
 
   tests/webpack:
     dependencies:
@@ -2836,11 +2842,7 @@ packages:
   /@types/chai-subset/1.3.3:
     resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
     dependencies:
-      '@types/chai': 4.3.3
-    dev: true
-
-  /@types/chai/4.3.3:
-    resolution: {integrity: sha512-hC7OMnszpxhZPduX+m+nrx+uFoLkWOMiR4oa/AZF3MuSETYTZmFfJAHqZEM8MVlvfG7BEUcgvtwoCTxBp6hm3g==}
+      '@types/chai': 4.3.4
     dev: true
 
   /@types/chai/4.3.4:
@@ -3138,8 +3140,8 @@ packages:
     resolution: {integrity: sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA==}
     dev: true
 
-  /@types/jsdom/20.0.1:
-    resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
+  /@types/jsdom/21.1.0:
+    resolution: {integrity: sha512-leWreJOdnuIxq9Y70tBVm/bvTuh31DSlF/r4l7Cfi4uhVQqLHD0Q4v301GMisEMwwbMgF7ZKxuZ+Jbd4NcdmRw==}
     dependencies:
       '@types/node': 18.11.9
       '@types/tough-cookie': 4.0.2
@@ -3312,8 +3314,8 @@ packages:
     resolution: {integrity: sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==}
     dev: true
 
-  /@types/uuid/8.3.4:
-    resolution: {integrity: sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==}
+  /@types/uuid/9.0.0:
+    resolution: {integrity: sha512-kr90f+ERiQtKWMz5rP32ltJ/BtULDI5RVO0uavn1HQUOwjx0R1h0rnDYNL0CepF1zL5bSY6FISAfd9tOdDhU5Q==}
     dev: true
 
   /@types/web-bluetooth/0.0.16:
@@ -3613,11 +3615,13 @@ packages:
       vue: 3.2.45
     dev: true
 
-  /@vitest/coverage-c8/0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce:
-    resolution: {integrity: sha512-/9VTGDIAp4hv8PBawfyijxhkiyucfOxFRRP+7kzy3Dj0wONy1Mc2MBoPmiH4aZVc0LViQqecrQLs8JVGt42keA==}
+  /@vitest/coverage-c8/0.28.4_vun5xzxu3tkrssf3erdbijyyki:
+    resolution: {integrity: sha512-btelLBxaWhHnywXRQxDlrvPhGdnuIaD3XulsxcZRIcnpLPbFu39dNTT0IYu2QWP2ZZrV0AmNtdLIfD4c77zMAg==}
     dependencies:
       c8: 7.12.0
-      vitest: 0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce
+      picocolors: 1.0.0
+      std-env: 3.3.2
+      vitest: 0.28.4_vun5xzxu3tkrssf3erdbijyyki
     transitivePeerDependencies:
       - '@edge-runtime/vm'
       - '@vitest/browser'
@@ -3632,14 +3636,48 @@ packages:
       - terser
     dev: true
 
-  /@vitest/ui/0.27.1:
-    resolution: {integrity: sha512-o9LmWY/XyWt5Pqb+bLLK+N3Vk+PP2jqrdDDMEAY43dB6vtZ+gYuOt5IutUfB7gXeJ6xeIlzUZ/OabrR3leldCA==}
+  /@vitest/expect/0.28.4:
+    resolution: {integrity: sha512-JqK0NZ4brjvOSL8hXAnIsfi+jxDF7rH/ZWCGCt0FAqRnVFc1hXsfwXksQvEnKqD84avRt3gmeXoK4tNbmkoVsQ==}
+    dependencies:
+      '@vitest/spy': 0.28.4
+      '@vitest/utils': 0.28.4
+      chai: 4.3.7
+    dev: true
+
+  /@vitest/runner/0.28.4:
+    resolution: {integrity: sha512-Q8UV6GjDvBSTfUoq0QXVCNpNOUrWu4P2qvRq7ssJWzn0+S0ojbVOxEjMt+8a32X6SdkhF8ak+2nkppsqV0JyNQ==}
+    dependencies:
+      '@vitest/utils': 0.28.4
+      p-limit: 4.0.0
+      pathe: 1.1.0
+    dev: true
+
+  /@vitest/spy/0.28.4:
+    resolution: {integrity: sha512-8WuhfXLlvCXpNXEGJW6Gc+IKWI32435fQJLh43u70HnZ1otJOa2Cmg2Wy2Aym47ZnNCP4NolF+8cUPwd0MigKQ==}
+    dependencies:
+      tinyspy: 1.0.2
+    dev: true
+
+  /@vitest/ui/0.28.4:
+    resolution: {integrity: sha512-LQfCCFc17n49mwtraV9/NAWl2DUqJS/9ZEa3fqJjoYO+HowdseQ5jvWflpzliCyfrIAh6cXVo1bNzHnDXe0cbw==}
     dependencies:
       fast-glob: 3.2.12
       flatted: 3.2.7
+      pathe: 1.1.0
+      picocolors: 1.0.0
       sirv: 2.0.2
     dev: true
 
+  /@vitest/utils/0.28.4:
+    resolution: {integrity: sha512-l2QztOLdc2LkR+w/lP52RGh8hW+Ul4KESmCAgVE8q737I7e7bQoAfkARKpkPJ4JQtGpwW4deqlj1732VZD7TFw==}
+    dependencies:
+      cli-truncate: 3.1.0
+      diff: 5.1.0
+      loupe: 2.3.6
+      picocolors: 1.0.0
+      pretty-format: 27.5.1
+    dev: true
+
   /@vue/compiler-core/3.2.45:
     resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
     dependencies:
@@ -3986,7 +4024,7 @@ packages:
   /acorn-globals/7.0.1:
     resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
     dependencies:
-      acorn: 8.8.0
+      acorn: 8.8.1
       acorn-walk: 8.2.0
     dev: true
 
@@ -4639,7 +4677,7 @@ packages:
       check-error: 1.0.2
       deep-eql: 4.1.3
       get-func-name: 2.0.0
-      loupe: 2.3.4
+      loupe: 2.3.6
       pathval: 1.1.1
       type-detect: 4.0.8
     dev: true
@@ -5891,6 +5929,10 @@ packages:
     resolution: {integrity: sha512-F29o+vci4DodHYT9UrR5IEbfBw9pE5eSapIJdTqXK5+6hq+t8VRxwQyKlW2i+KDKFkkJQRvFyI/QXD83h8LyQw==}
     dev: true
 
+  /decimal.js/10.4.3:
+    resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
+    dev: true
+
   /decode-named-character-reference/1.0.2:
     resolution: {integrity: sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==}
     dependencies:
@@ -8622,8 +8664,8 @@ packages:
     engines: {node: '>=12.0.0'}
     dev: true
 
-  /jsdom/20.0.2:
-    resolution: {integrity: sha512-AHWa+QO/cgRg4N+DsmHg1Y7xnz+8KU3EflM0LVDTdmrYOc1WWTSkOjtpUveQH+1Bqd5rtcVnb/DuxV/UjDO4rA==}
+  /jsdom/21.1.0:
+    resolution: {integrity: sha512-m0lzlP7qOtthD918nenK3hdItSd2I+V3W9IrBcB36sqDwG+KnUs66IF5GY7laGWUnlM9vTsD0W1QwSEBYWWcJg==}
     engines: {node: '>=14'}
     peerDependencies:
       canvas: ^2.5.0
@@ -8632,12 +8674,12 @@ packages:
         optional: true
     dependencies:
       abab: 2.0.6
-      acorn: 8.8.0
+      acorn: 8.8.1
       acorn-globals: 7.0.1
       cssom: 0.5.0
       cssstyle: 2.3.0
       data-urls: 3.0.2
-      decimal.js: 10.4.1
+      decimal.js: 10.4.3
       domexception: 4.0.0
       escodegen: 2.0.0
       form-data: 4.0.0
@@ -8650,12 +8692,12 @@ packages:
       saxes: 6.0.0
       symbol-tree: 3.2.4
       tough-cookie: 4.1.2
-      w3c-xmlserializer: 3.0.0
+      w3c-xmlserializer: 4.0.0
       webidl-conversions: 7.0.0
       whatwg-encoding: 2.0.0
       whatwg-mimetype: 3.0.0
       whatwg-url: 11.0.0
-      ws: 8.9.0
+      ws: 8.12.0
       xml-name-validator: 4.0.0
     transitivePeerDependencies:
       - bufferutil
@@ -9004,8 +9046,8 @@ packages:
     resolution: {integrity: sha512-cHlYSUpL2s7Fb3394mYxwTYj8niTaNHUCLr0qdiCXQfSjfuA7CKofpX2uSwEfFDQ0EB7JcnMnm+GjbqqoinYYg==}
     dev: true
 
-  /loupe/2.3.4:
-    resolution: {integrity: sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==}
+  /loupe/2.3.6:
+    resolution: {integrity: sha512-RaPMZKiMy8/JruncMU5Bt6na1eftNoo++R4Y+N2FrxkDVTrGvcyzFTsaGif4QTeKESheMGegbhw6iUAq+5A8zA==}
     dependencies:
       get-func-name: 2.0.0
     dev: true
@@ -9642,7 +9684,7 @@ packages:
     resolution: {integrity: sha512-cwzBrBfwGC1gYJyfcy8TcZU1f+dbH/T+TuOhtYP2wLv/Fb51/uV7HJQfBPtEupZ2ORLRU1EKFS/QfS3eo9+kBQ==}
     dependencies:
       acorn: 8.8.1
-      pathe: 1.0.0
+      pathe: 1.1.0
       pkg-types: 1.0.1
       ufo: 1.0.1
     dev: true
@@ -9932,6 +9974,13 @@ packages:
       yocto-queue: 0.1.0
     dev: true
 
+  /p-limit/4.0.0:
+    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    dependencies:
+      yocto-queue: 1.0.0
+    dev: true
+
   /p-locate/3.0.0:
     resolution: {integrity: sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==}
     engines: {node: '>=6'}
@@ -10114,12 +10163,8 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /pathe/0.2.0:
-    resolution: {integrity: sha512-sTitTPYnn23esFR3RlqYBWn4c45WGeLcsKzQiUpXJAyfcWkolvlYpV8FLo7JishK946oQwMFUCHXQ9AjGPKExw==}
-    dev: true
-
-  /pathe/1.0.0:
-    resolution: {integrity: sha512-nPdMG0Pd09HuSsr7QOKUXO2Jr9eqaDiZvDwdyIhNG5SHYujkQHYKDfGQkulBxvbDHz8oHLsTgKN86LSwYzSHAg==}
+  /pathe/1.1.0:
+    resolution: {integrity: sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==}
     dev: true
 
   /pathval/1.1.1:
@@ -10191,7 +10236,7 @@ packages:
     dependencies:
       jsonc-parser: 3.2.0
       mlly: 1.1.0
-      pathe: 1.0.0
+      pathe: 1.1.0
     dev: true
 
   /plist/3.0.6:
@@ -10297,6 +10342,15 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /pretty-format/27.5.1:
+    resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
+    engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
+    dependencies:
+      ansi-regex: 5.0.1
+      ansi-styles: 5.2.0
+      react-is: 17.0.2
+    dev: true
+
   /pretty-format/29.3.1:
     resolution: {integrity: sha512-FyLnmb1cYJV8biEIiRyzRFvs2lry7PPIvOqKVe1GCUEYg4YGmlx1qG9EJNMxArYm7piII4qb8UV1Pncq5dxmcg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -10430,6 +10484,10 @@ packages:
       unpipe: 1.0.0
     dev: true
 
+  /react-is/17.0.2:
+    resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
+    dev: true
+
   /react-is/18.2.0:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: true
@@ -10741,6 +10799,12 @@ packages:
       glob: 7.2.3
     dev: true
 
+  /rimraf/4.1.2:
+    resolution: {integrity: sha512-BlIbgFryTbw3Dz6hyoWFhKk+unCcHMSkZGrTFVAx2WmttdBSonsdtRlwiuTbDqTKr+UlXIUqJVS4QT5tUzGENQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /robust-predicates/3.0.1:
     resolution: {integrity: sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==}
     dev: false
@@ -11278,6 +11342,10 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /std-env/3.3.2:
+    resolution: {integrity: sha512-uUZI65yrV2Qva5gqE0+A7uVAvO40iPo6jGhs7s8keRfHCmtg+uB2X6EiLGCI9IgL1J17xGhvoOqSz79lzICPTA==}
+    dev: true
+
   /stream-combiner/0.0.4:
     resolution: {integrity: sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==}
     dependencies:
@@ -11479,7 +11547,7 @@ packages:
     hasBin: true
     dependencies:
       '@jridgewell/source-map': 0.3.2
-      acorn: 8.8.0
+      acorn: 8.8.1
       commander: 2.20.3
       source-map-support: 0.5.21
     dev: true
@@ -11528,8 +11596,8 @@ packages:
     resolution: {integrity: sha512-hGYWYBMPr7p4g5IarQE7XhlyWveh1EKhy4wUBS1LrHXCKYgvz+4/jCqgmJqZxxldesn05vccrtME2RLLZNW7iA==}
     dev: true
 
-  /tinypool/0.3.0:
-    resolution: {integrity: sha512-NX5KeqHOBZU6Bc0xj9Vr5Szbb1j8tUHIeD18s41aDJaPeC5QTdEhK0SpdpUrZlj2nv5cctNcSjaKNanXlfcVEQ==}
+  /tinypool/0.3.1:
+    resolution: {integrity: sha512-zLA1ZXlstbU2rlpA4CIeVaqvWq41MTWqLY3FfsAXgC8+f7Pk7zroaJQxDgxn1xNudKW6Kmj4808rPFShUlIRmQ==}
     engines: {node: '>=14.0.0'}
     dev: true
 
@@ -12015,15 +12083,15 @@ packages:
       vfile-message: 3.1.2
     dev: true
 
-  /vite-node/0.27.1_@types+node@18.11.9:
-    resolution: {integrity: sha512-d6+ue/3NzsfndWaPbYh/bFkHbmAWfDXI4B874zRx+WREnG6CUHUbBC8lKaRYZjeR6gCPN5m1aVNNRXBYICA9XA==}
+  /vite-node/0.28.4_@types+node@18.11.9:
+    resolution: {integrity: sha512-KM0Q0uSG/xHHKOJvVHc5xDBabgt0l70y7/lWTR7Q0pR5/MrYxadT+y32cJOE65FfjGmJgxpVEEY+69btJgcXOQ==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
       mlly: 1.1.0
-      pathe: 0.2.0
+      pathe: 1.1.0
       picocolors: 1.0.0
       source-map: 0.6.1
       source-map-support: 0.5.21
@@ -12182,8 +12250,8 @@ packages:
       - terser
     dev: true
 
-  /vitest/0.27.1_6vhkb7zox2ro6wmx3rlvm5i5ce:
-    resolution: {integrity: sha512-1sIpQ1DVFTEn7c1ici1XHcVfdU4nKiBmPtPAtGKJJJLuJjojTv/OHGgcf69P57alM4ty8V4NMv+7Yoi5Cxqx9g==}
+  /vitest/0.28.4_vun5xzxu3tkrssf3erdbijyyki:
+    resolution: {integrity: sha512-sfWIy0AdlbyGRhunm+TLQEJrFH9XuRPdApfubsyLcDbCRrUX717BRQKInTgzEfyl2Ipi1HWoHB84Nqtcwxogcg==}
     engines: {node: '>=v14.16.0'}
     hasBin: true
     peerDependencies:
@@ -12207,22 +12275,28 @@ packages:
       '@types/chai': 4.3.4
       '@types/chai-subset': 1.3.3
       '@types/node': 18.11.9
-      '@vitest/ui': 0.27.1
+      '@vitest/expect': 0.28.4
+      '@vitest/runner': 0.28.4
+      '@vitest/spy': 0.28.4
+      '@vitest/ui': 0.28.4
+      '@vitest/utils': 0.28.4
       acorn: 8.8.1
       acorn-walk: 8.2.0
       cac: 6.7.14
       chai: 4.3.7
       debug: 4.3.4
-      jsdom: 20.0.2
+      jsdom: 21.1.0
       local-pkg: 0.4.2
+      pathe: 1.1.0
       picocolors: 1.0.0
       source-map: 0.6.1
+      std-env: 3.3.2
       strip-literal: 1.0.0
       tinybench: 2.3.1
-      tinypool: 0.3.0
+      tinypool: 0.3.1
       tinyspy: 1.0.2
       vite: 4.0.1_@types+node@18.11.9
-      vite-node: 0.27.1_@types+node@18.11.9
+      vite-node: 0.28.4_@types+node@18.11.9
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -12323,6 +12397,13 @@ packages:
       xml-name-validator: 4.0.0
     dev: true
 
+  /w3c-xmlserializer/4.0.0:
+    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
+    engines: {node: '>=14'}
+    dependencies:
+      xml-name-validator: 4.0.0
+    dev: true
+
   /wait-on/6.0.0_debug@4.3.2:
     resolution: {integrity: sha512-tnUJr9p5r+bEYXPUdRseolmz5XqJTTj98JgOsfBn7Oz2dxfE2g3zw1jE+Mo8lopM3j3et/Mq1yW7kKX6qw7RVw==}
     engines: {node: '>=10.0.0'}
@@ -12357,6 +12438,10 @@ packages:
       minimalistic-assert: 1.0.1
     dev: true
 
+  /web-worker/1.2.0:
+    resolution: {integrity: sha512-PgF341avzqyx60neE9DD+XS26MMNMoUQRz9NOZwW32nPQrF6p77f1htcnjBSEV8BGMKZ16choqUG4hyI0Hx7mA==}
+    dev: false
+
   /webdriver/7.16.11:
     resolution: {integrity: sha512-6nBOXae4xuBH4Nqvi/zvtwjnxSLTONBpxOiRJtQ68CYTYv5+w3m8CsaWy3HbK/0XXa++NYl62bDNn70OGEKb+Q==}
     engines: {node: '>=12.0.0'}
@@ -12672,6 +12757,19 @@ packages:
         optional: true
     dev: true
 
+  /ws/8.12.0:
+    resolution: {integrity: sha512-kU62emKIdKVeEIOIKVegvqpXMSTAMLJozpHZaJNDYqBjzlSYXQGviYwN1osDLJ9av68qHd4a2oSjd7yD4pacig==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: true
+
   /ws/8.5.0:
     resolution: {integrity: sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==}
     engines: {node: '>=10.0.0'}
@@ -12810,6 +12908,11 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /yocto-queue/1.0.0:
+    resolution: {integrity: sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==}
+    engines: {node: '>=12.20'}
+    dev: true
+
   /zwitch/2.0.2:
     resolution: {integrity: sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA==}
     dev: true