0.19.0

⚡ This new version improves tree-shaking for EdgeStyle and Perimeter, updates the documentation, and fixes bugs. ⚡

Resources

• npm package: @maxgraph/core 0.19.0
• Fixed issues: milestone 0.19.0
• Documentation: maxgraph_0.19.0_website.zip
• Examples: maxgraph_0.19.0_examples.zip
• Changelog (only includes a summary and breaking changes): changelog

Breaking changes

Warning

These changes only impact advanced use cases where edge styles or perimeters are customized directly.

• EdgeStyle is now a namespace
  It used to be a class with static properties. You could technically mutate it to add or override values — but that’s no longer possible.
  If you were doing this, you now need to define your own EdgeStyle implementation and register it explicitly.

• Perimeter is now a namespace
  Previously a plain object, Perimeter could be mutated too. Not anymore.
  Like with EdgeStyle, create your own perimeter implementation and register it if needed.

Highlights

📦 Tree-shaking improvements for EdgeStyle and Perimeter

Until now, all edge styles and perimeters were bundled into your app even if you only used a few of them. Why? Because EdgeStyle and Perimeter were objects that referenced everything, which prevented bundlers from optimizing properly.

Here’s what changed:

• EdgeStyle is now a namespace. This allows bundlers to drop unused edge styles and only keep what’s actually registered and used via StyleRegistry.
• Perimeter is now also a namespace, instead of a value object. This improves bundling behavior, especially for bundlers that couldn’t previously optimize it (Webpack, Vite when misconfigured, etc.).

Note

Bundlers like Rollup already did a great job here. But now all bundlers should behave nicely 🎉

📉 Impact on bundle size

Depending on what edge styles and perimeters your app uses, and the bundler you're using, bundle size can shrink by 1 to 5 kB.

🔍 A few things to keep in mind

• The EdgeStyle change currently has limited effect, since many built-in styles are still referenced directly in the codebase. This will improve in the future (see #767).
• The Perimeter change doesn’t impact apps built with Rollup or Vite (which uses Rollup internally), since they already optimized this before. But it’s now cleaner and safer across the board.

Here’s a concrete example of what Rollup was doing with the old object-based Perimeter (with minification disabled):

const RectanglePerimeter = ...
const EllipsePerimeter = ...

const Perimeter = {
  RectanglePerimeter,
  EllipsePerimeter
};

Only the perimeters actually used are bundled in.

🔬 Real-world examples from the maxGraph repo

Note

JS examples use Webpack, TS examples use Vite (Rollup)
⚠️ The TS and JS examples don't cover the same use cases
📦 In JS examples: the size = full app
📦 In TS examples: the size = maxGraph chunk only

Example	v0.18.0	After #785	After #791
js-example	476.10 kB	475.92 kB	475.30 kB
js-example-selected-features	423.45 kB	415.59 kB	415.10 kB
js-example-without-default	347.86 kB	347.83 kB	347.33 kB
ts-example	439.30 kB	439.15 kB	438.64 kB
ts-example-selected-features	381.15 kB	381.14 kB	380.70 kB
ts-example-without-default	330.38 kB	330.38 kB	329.90 kB

Analysis:

• In the *-without-default examples, there's no change — because Perimeter wasn't used.
• In TS examples, the gains are minor (Rollup already tree-shaked well).
• The best gains are seen in JS/Webpack examples where tree-shaking was previously limited.

🔬 Examples from the maxgraph-integration-examples repository

Example	0.18.0	0.19.0
farm	407.8 kB (in 5 chunks)	406.1 kB (in 2 chunks)
lit (vite)	402.7 kB	402.2 kB
parcel	506.5 kB	506.7 kB
rollup	381.0 kB	380.4 kB
rsbuild	358.0 kB	361.9 kB
vite	384.0 kB	383.5 kB

• Related PR: #220

What's Changed

🎉 New Features

• feat!: improve tree-shaking of Perimeter by @tbouffard in #785
• feat: improve IDE guidance for style element registration by @tbouffard in #787
• feat!: improve tree-shaking of EdgeStyle by @tbouffard in #791

🐛 Bug Fixes

• fix: correctly convert "arc" attributes to boolean in StencilShape by @tbouffard in #788

📝 Documentation

• docs: add structure section and improve npm package details by @tbouffard in #792

Full Changelog: v0.18.0...v0.19.0