Complete vitepress migration

[sidharthv96]

@emersonbottero, seems like #3515 was not completed before merge.

Can you please finish it so that we can publish the new docs page?

[emersonbottero]

I pull the last version and it is not building...

yarn build
yarn run v1.22.5
$ yarn clean && concurrently "yarn build:vite" "yarn build:types"
$ rimraf dist
$ ts-node-esm --transpileOnly --project=.vite/tsconfig.json .vite/build.ts
$ tsc -p ./tsconfig.json --emitDeclarationOnly
[0] SyntaxError: Unexpected identifier
[0]     at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:139:18)
[0]     at ESMLoader.moduleProvider (node:internal/modules/esm/loader:236:14)
[0]     at async link (node:internal/modules/esm/module_job:67:21)
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
[0] yarn build:vite exited with code 1
[1] yarn build:types exited with code 0

System:
OS: Windows 10 10.0.22621
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Memory: 7.72 GB / 15.92 GB
Binaries:
Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
npm: 8.1.3 - ~\AppData\Roaming\npm\npm.CMD
Browsers:
Chrome: 105.0.5195.127
Edge: Spartan (44.22621.730.0), Chromium (106.0.1370.34)
Internet Explorer: 11.0.22621.1
npmPackages:
vite: ^3.1.6 => 3.1.6

[sidharthv96]

We're using pnpm now instead of yarn. So install pnpm and delete node_modules folder.
Please try using that.

Also, make sure you have

• Deleted existing docs and vdocs
• Modified contents in packages/mermaid/src/docs to match any changes you had made in vdocs if necessary
• Modified packages/mermaid/src/docs.mts if necessary
• Useed https://vitepress.vuejs.org/guide/deploying#github-pages to publish the generated docs instead of checking that into repo.

[kevsturman]

I'm having the same issue running pnpm on a fresh copy

│ [1] [0] SyntaxError: Unexpected identifier
│ [1] [0]     at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:139:18)
│ [1] [0]     at ESMLoader.moduleProvider (node:internal/modules/esm/loader:236:14)
│ [1] [0]     at async link (node:internal/modules/esm/module_job:67:21)
│ [1] [0]  ELIFECYCLE  Command failed with exit code 1.

Should I raise this on a new issue? I can't see it mentioned anywhere else.

[t-moennich]

@kevsturman this may be related to Node version < 18.
I also got an error during initial project setup and after switching to Node v18, it was resolved.

@sidharthv96 maybe it's a good idea to point to the minimal required node version in the contribution docs?
I only realized this projects depends on Node 18 because of the dependency @types/node ☺️

[sidharthv96]

❯ node -v                  
v16.17.1

I've been using v16 without any issues so far... Wonder why it's not working there.

[knsv]

I could replicate the issue on one of my machines running node version 16.13. After upgrading to node v16.16 the problem is gone. Something happened between 16.13 and 16.16 it seems. We can set minimum version to 16.16, not wirth spending too much time on as LTS is moving to 18 soon.

[sidharthv96]

Can you try the steps mentioned here?
https://github.com/mermaid-js/mermaid/pull/3628/files

I'll raise a PR with v18 migration soon.

[t-moennich]

@knsv good catch!
I'm also getting errors with v16.14, but not with v16.16.

So yeah, seems like 16.16.x is the current min version, which could be related to some path resolution stuff used by tsc.
Thanks for confirmation ❤️

[sidharthv96]

@emersonbottero please let us know if this solves your issue.

[emersonbottero]

@sidharthv96 Yes I can (updating the node worked) .
But there seems to be more updates in this docs and would take some effort to track and update those. (between when I created my version and the current one)

example:

• docs/deveoper-doc
• docs/diagrams-and-syntax-and-examples
• docs/README
• probably a lot more 🤷

I have 2 options..

1. I redo the work with the current docs folder (please don't merge more while I'm doing the migration), 1 to 2 weeks
2. We just use my current version (In this case I will replace the docs folder with my version) and we track the changes and update my version with it..

Missing ci/cd in my version

• the auto copy src/docs to docs. ( Usually my README just have the basic description and a link to the official docs and I do not expect people to read from github when we have an official documentation page)
• the Setup.md I managed to extract the docs from the 3 used ts files.. but it does not display default values from example.. (It is probably possible with the correct config file though)

please let me know which options should I follow. 😁

P.S. Next docs updates should use vitepress logic in mind.

• Usually Changelogs are not placed inside docs and the docs have a link to it
• Use features like ::: Note ::: Warning and so on.

[sidharthv96]

You can see which all files have changed in docs by running

git diff 9468bffcbb develop -- packages/mermaid/src/docs/

I think it'll be easier for you to go with Option 2. Replace packages/mermaid/src/docs/ with your docs and then add relevant changes you find with the above command to that.

This will also help us track what changes you've made instead of having a completely new folder like we had in vdocs, which made change tracking hard.

Although, now thinking about it, you could checkout 9468bff, move vdocs to docs, and then do a diff to see what your changes were.

---

the auto copy src/docs to docs...

It's not just a copy, we're doing multiple transformations.
Let's stick with that workflow for now.

the Setup.md...

You could leave it as is if it's not a major issue.

---

Linking #2910 for context.

[emersonbottero]

#3678

an gh-pages branch is required. (and you need to configure pages to use this branch