Test that `src/diagrams/*/styles.ts` module returns a valid
CSS stylesheet that can be parsed via [stylis][1] and then
becomes a valid CSS that [csstree-validator][2] validates.
We test this for every diagram and for every theme, because
many of the invalid CSS bugs are caused by missing theme vars.
There are some CSS errors that I couldn't easily fix, so I've written
the tests to ignore the following CSS errors:
- 'Unknown property `rx`' (Valid in SVG2 draft and in some browsers)
- 'Unknown property `ry`' (Valid in SVG2 draft and in some browsers)
- 'Unknown property `dy`'
- This doesn't seem to be valid CSS in any SVG version, but maybe
some browsers support it 🤷 I feel like we should probably change
this though.
[1]: https://github.com/thysultan/stylis
[2]: https://github.com/csstree/validator
The `node16` module resolution requires imports to use the `.js` file
extension in type definitions.
`@rollup/plugin-typescript` is needed to make this work with the Vite
setup used by Mermaid.
The module option for Mermaid internally is set to `nodenext`. This is
needed to support `.json` imports. Note that setting `module` to
`node16` or `nodenext` implies a matching `moduleResolution` value.
Replace Mermaid's dependency on `moment` with `dayjs`.
[Moment is now in maintenance mode][1], and they don't recommend
using it.
[Dayjs][2] has almost exactly the same API as moment, and is still
curently being maintained. Unlike moment, dayjs objects are immutable,
which makes our life much easier, but we need to do
`a = a.add(1, "day")` instead of just `a.add(1, "day")`.
We can't use `dayjs.duration`, because unlike `moment.duration`,
[dayjs durations always degrade to ms][3].
This causes issues with daylight savings, since it assumes that each
day is 24 hours, when some days have 23/25 hours with daylight savings.
(it also assumes that each month is 30 days).
However, `dayjs.add(1, "d");` correctly adds 1 days, even when that
day is only 23 hours long, so we can use that instead.
[1]: https://momentjs.com/docs/#/-project-status/
[2]: https://day.js.org/
[3]: https://day.js.org/docs/en/durations/durations
Co-authored-by: Alois Klink <alois@aloisklink.com>
Replace Mermaid's dependency on `moment` with `dayjs`.
[Moment is now in maintenance mode][1], and they don't recommend
using it.
[Dayjs][2] has almost exactly the same API as moment, and is still
curently being maintained. Unlike moment, dayjs objects are immutable,
which makes our life much easier, but we need to do
`a = a.add(1, "day")` instead of just `a.add(1, "day")`.
We can't use `dayjs.duration`, because unlike `moment.duration`,
[dayjs durations always degrade to ms][3].
This causes issues with daylight savings, since it assumes that each
day is 24 hours, when some days have 23/25 hours with daylight savings.
(it also assumes that each month is 30 days).
However, `dayjs.add(1, "d");` correctly adds 1 days, even when that
day is only 23 hours long, so we can use that instead.
[1]: https://momentjs.com/docs/#/-project-status/
[2]: https://day.js.org/
[3]: https://day.js.org/docs/en/durations/durations
* develop:
Add highlight tag info in contributing.md
chore(deps): update dependency cypress to v12
docs: fix links
Fix types
chore(deps): update dependency vite to v4
* develop: (45 commits)
Showcase section to the docs - keepings docs up to date (#4055)
bugfix: add missing d3 curves to flowchart and docs
fix(deps): update dependency dagre-d3-es to v7.0.8
build(pre-commit): cache eslint in pre-commit
build(lint): cache eslint with strategy content
Update cypress/integration/rendering/sequencediagram.spec.js
feat(er): allow leading underscore for attributes name
ci(lint): show nice error on lint failure
chore: add moment to dependencies
Update docs
Update mindmap.md
chore: remove moment-mini
docs(readme-ch): fix twitter link
build(lint): cache prettier on `pnpm run lint`
fix: moment-mini default exporter
docs(readme): update broken twitter badge
test(er): improve tests on multiple key constraints
Fixes Typo, remove console.log
doc(er): add documentation on multiple key constraints
feat(er): allow multiple constraints on attributes
...
Vitepress uses YAML frontmatter to configure Vitepress specific
settings, see https://vitepress.vuejs.org/config/frontmatter-configs
We just need to use `remark-frontmatter` to add support for it.
GitHub also renders the YAML front-matter nicely in a table
automatically, but maybe we should instead strip it, if it's only
used by Vitepress?
* sidv/properlyWaitTests:
feat: Wait for rendering to finish before taking image snapshots
Update docs
chore(deps): update all non-major dependencies
Fix: Too many `primaryBorderColor`
Support using GFM in markdown documentation.
GitHub has some custom features in their Markdown documentation.
For example, they support using tables, footnotes, and task lists.
Vitepress supports tables too.
However, remark sometimes throws an error when parsing tables,
so we should use `remark-gfm` to handle them.
* master: (23 commits)
Update vitepress
fix: Add icon css
fix Top level await
v9.3.0
bump dagre-es 7.0.6
Bump mermaid version
Update dagre-es
Bump mermaid version
fix: Incorrect removal of existing elements
fix: add .js to external imports.
fix: add .js to external imports.
Bump mermaid version
fix: add .js to external imports.
Bump mermaid version
fix: Throw correct errors when parsing diagrams with errors
Update url snapshot test for external diagrams
Update url snapshot test for external diagrams
Updated package number
Updated package number
Updated package number to 9.3.0-rc1
...
`graphlib` has recently been replaced with the ESM version of
graphlib bundled with
[`dagre-d3-es`](https://www.npmjs.com/package/dagre-d3-es), in commit
f687abb1 (chore: Use `graphlib` from `dagre-d3-es`, 2022-11-20)
This means we can safely remove it from our dependencies list.
Fixes: f687abb165
In order to parse the YAML front-matter in a Mermaid diagram, the
YAML seperators **MUST NOT** be indented, e.g.:
````markdown
```mermaid
---
title: This is fine.
---
```
```mermaid
---
title: This is not fine, because the `---` are indented.
---
```
````
However, this makes it very difficult to write nice Mermaid diagrams in
HTML code-blocks.
This commit uses [`ts-dedent`](https://www.npmjs.com/package/ts-dedent)
to automatically remove the indentation from Mermaid diagrams when
parsed from HTML. Mermaid diagrams from mermaidAPI.render() are **NOT**
dedented, as that API is called from JavaScript code, and therefore
users can easily `dedent` their own diagrams.
* develop: (79 commits)
chore: docs:build
chore: docs:build
tiny fix and change: "The/y cannot" -> "Cannot..."
remove 'horz' from cSpell.json
update demos/state.html to includ examples; formatting
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
refine - what is not done yet
remove 'horz' from cSpell.json
Revert "Added pie"
chore: Fix cSpell in pieRenderer
update demos/state.html to includ examples; formatting
add 'horz' to cSpell (in pieDetector.ts commented out barChart work)
refine - what is not done yet
remove console stmt
#3831 Re-enabling themes for er diagrams
#3835 Adding path to list of elements to be styled
#3882 fix for issues with mindmaps with only a single node
chore(deps): update pnpm to v7.17.0
docs: Remove warning in readme
chore(deps): update lycheeverse/lychee-action action to v1.5.4
...