refactor: TypeScript improvements to packages/mermaid/src/rendering-util/rendering-elements

[aloisklink]

📑 Summary

A bunch of TypeScript improvements to packages/mermaid/src/rendering-util/rendering-elements.

I'd recommend reviewing this PR commit-by-commit!

• packages/mermaid/src/rendering-util/rendering-elements/shapes.ts: Change the type of shapes from a generic Record<string, ShapeHandler> to a more specific type that knows every key in the variable, and every function and return value.
• packages/mermaid/src/rendering-util/rendering-elements/shapes/: Correct the types of all the shapes in this directory. Most of these functions were incorrectly using a raw DOM SVGAElement as a parameter. However, they actually accept a d3.Selection<SVGAElement, unknown, Element | null, unknown> | d3.Selection<SVGGElement, unknown, Element | null, unknown>. I've turned most of these functions into template functions, since otherwise TypeScript has issues with these types.
• packages/mermaid/src/rendering-util/rendering-elements/nodes.ts: Convert the nodes.js file to TypeScript.
• packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts: Convert the shapes/util.js file to TypeScript.
• packages/mermaid-layout-elk/src/rendering-util/rendering-elements/render.ts: Remove some any types from render(). This was mainly so I could see what types were being passed to src/rendering-util/rendering-elements/shapes/util.ts so I could accurately type it.

📏 Design Decisions

Calling d3.selection.attr('attr', undefined) is not supported and throws a TypeScript error https://d3js.org/d3-selection/modifying#selection_attr

However, I've noticed that it seems to do the same thing as d3.selection.attr('attr', null) (e.g. deleting the attribute if it exists), so I've made a new helper function called handleUndefinedAttr that basically just does ?? null:

mermaid/packages/mermaid/src/utils.ts

Lines 944 to 954 in 16a5fc0

	/**
	* D3's `selection.attr` method doesn't officially support `undefined`.
	*
	* However, it seems if you do pass `undefined`, it seems to be treated as `null`
	* (e.g. it removes the attribute).
	*/
	export function handleUndefinedAttr(
	attrValue: Parameters<d3.Selection<BaseType, unknown, HTMLElement, any>['attr']>[1] | undefined
	) {
	return attrValue ?? null;
	}

📋 Tasks

Make sure you

• 📖 have read the contribution guidelines
• 💻 have added necessary unit/e2e tests.
• 📓 have added documentation. Make sure MERMAID_RELEASE_VERSION is used for all new features.
• 🦋 If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpm changeset and following the prompts. Changesets that add features should be minor and those that fix bugs should be patch. Please prefix changeset messages with feat:, fix:, or chore:.
  • Internal only change, the only potential change in behavior is me adding a ?? 0 in

    mermaid/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.ts

    Line 52 in 16a5fc0

    const halfPadding = (node?.padding ?? 0) / 2;

    , but I'm unsure it if will actually ever change anything for users.

[changeset-bot]

⚠️ No Changeset found

Latest commit: b5cd101

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[netlify]

✅ Deploy Preview for mermaid-js ready!

Name	Link
🔨 Latest commit	b5cd101
🔍 Latest deploy log	https://app.netlify.com/sites/mermaid-js/deploys/671f868950494c000839f910
😎 Deploy Preview	https://deploy-preview-5974--mermaid-js.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/mermaid-js/mermaid@5974

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/mermaid-zenuml@5974

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/parser@5974

pnpm add https://pkg.pr.new/mermaid-js/mermaid/@mermaid-js/layout-elk@5974

commit: b5cd101

[codecov]

Codecov Report

Attention: Patch coverage is 1.58172% with 560 lines in your changes missing coverage. Please review.

Project coverage is 4.63%. Comparing base (d16e46a) to head (b5cd101).
Report is 12 commits behind head on develop.

Files with missing lines	Patch %	Lines
...c/rendering-util/rendering-elements/shapes/util.ts	0.00%	62 Missing ⚠️
packages/mermaid-layout-elk/src/render.ts	0.00%	41 Missing ⚠️
...id/src/rendering-util/rendering-elements/shapes.ts	0.00%	28 Missing ⚠️
...aid/src/rendering-util/rendering-elements/nodes.ts	0.00%	20 Missing ⚠️
...g-util/rendering-elements/shapes/tiltedCylinder.ts	0.00%	18 Missing ⚠️
...ing-util/rendering-elements/shapes/doubleCircle.ts	0.00%	11 Missing ⚠️
...ndering-util/rendering-elements/shapes/drawRect.ts	0.00%	11 Missing ⚠️
...ng-util/rendering-elements/shapes/linedCylinder.ts	0.00%	10 Missing ⚠️
...ng-util/rendering-elements/shapes/shadedProcess.ts	0.00%	10 Missing ⚠️
...ering-util/rendering-elements/shapes/stateStart.ts	0.00%	10 Missing ⚠️
... and 55 more

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #5974      +/-   ##
==========================================
- Coverage     4.64%   4.63%   -0.01%     
==========================================
  Files          374     375       +1     
  Lines        51965   52226     +261     
  Branches       613     587      -26     
==========================================
+ Hits          2414    2422       +8     
- Misses       49551   49804     +253     

Flag	Coverage Δ
unit	4.63% <1.58%> (-0.01%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
packages/mermaid/src/rendering-util/createText.ts	0.00% <0.00%> (ø)
...ering-util/rendering-elements/shapes/squareRect.ts	0.00% <0.00%> (ø)
.../rendering-util/rendering-elements/shapes/state.ts	0.00% <0.00%> (ø)
...c/rendering-util/rendering-elements/shapes/text.ts	0.00% <0.00%> (ø)
...rendering-util/rendering-elements/shapes/choice.ts	0.00% <0.00%> (ø)
...il/rendering-elements/shapes/insertPolygonShape.ts	0.00% <0.00%> (ø)
...ng-util/rendering-elements/shapes/lightningBolt.ts	0.00% <0.00%> (ø)
packages/mermaid/src/utils.ts	42.03% <69.23%> (+0.31%)	⬆️
...ering-util/rendering-elements/shapes/bowTieRect.ts	0.00% <0.00%> (ø)
...c/rendering-util/rendering-elements/shapes/card.ts	0.00% <0.00%> (ø)
... and 55 more

... and 1 file with indirect coverage changes

[argos-ci]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Waiting for the first build to start…

[saurabhg772244]

We should check on use of types/interface. try to use one.

[aloisklink]

We should check on use of types/interface. try to use one.

I believe @sidharthv96 prefers the use of interface whenever possible, and we've enabled the @typescript-eslint/consistent-type-definitions rule in our ESLint config, so we should get a lint error if we use type when we could use interface instead:

mermaid/eslint.config.js

Line 84 in 3e922c8

'@typescript-eslint/consistent-type-definitions': 'error',