feat: introduce examples that not rely on default plugins and styles #774
Conversation
The existing "without-defaults" examples demonstrate the maximum size reduction by removing all optional features i.e. they show the absolute minimal footprint of using `maxGraph`. The new "selected-features" examples show what happens when some optional features are used. Having those now will make it easier to show the gains when tree-shaking improvements will be available.
WalkthroughThis change introduces two new example projects— Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant CustomGraph (JS/TS)
participant maxGraph Core
User->>Browser: Loads example page (index.html)
Browser->>CustomGraph: Executes entry script (index.js/main.ts)
CustomGraph->>maxGraph Core: Import and selectively register required features
CustomGraph->>maxGraph Core: Initialize graph with selected plugins and styles
CustomGraph->>Browser: Render graph in #graph-container
User->>Browser: Interacts (selects, pans, zooms, fits)
Browser->>CustomGraph: Event handling (selection, panning, button clicks)
CustomGraph->>maxGraph Core: Manipulate graph model/state as needed
Possibly related issues
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (15)
packages/ts-example-selected-features/vite.config.js (2)
19-19: Remove unusedmodeparameter
Themodeargument indefineConfig(({ mode }) => { ... })is not used anywhere in the config. You can simplify this todefineConfig(() => { ... }).
25-26: Clarify manualChunks comment grammar
The inline comment is a bit unclear:// put the maxgraph code in a dedicated file. It lets know the size the produced bundle ...Consider rephrasing to something like:
- // put the maxgraph code in a dedicated file. It lets know the size the produced bundle... + // Extract maxGraph core into its own chunk to observe bundle size and verify tree-shaking.packages/ts-example-selected-features/package.json (1)
8-8: Optional: Remove--versionfrom build script
Printing the TypeScript compiler version (tsc --version) is useful for debugging but may be unnecessary in CI. Consider simplifying to:- "build": "tsc --version && tsc && vite build --base ./", + "build": "tsc && vite build --base ./",packages/ts-example-selected-features/README.md (3)
13-13: Add a comma for clarity in the note line.Consider updating the sentence to:
“Note: This example should be kept in sync with the ts-example example, as it replicates the same use case.”
🧰 Tools
🪛 LanguageTool
[uncategorized] ~13-~13: Possible missing comma found.
Context: ...nc with the ts-example example as it replicates the same use case. In...(AI_HYDRA_LEO_MISSING_COMMA)
15-15: Convert bare URL into a markdown link.Replace the bare link with a reference-style link for better readability, e.g.:
Initialized from [Vite vanilla‑ts template](https://github.com/vitejs/vite/tree/v2.9.8/packages/create-vite/template-vanilla-ts).🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
15-15: Bare URL used
null(MD034, no-bare-urls)
27-27: Link or annotate the localhost URL.Either convert “http://localhost:5173/” into markdown link syntax or clearly mark it as a local dev‑server endpoint to address the “bare URL” warning.
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
27-27: Bare URL used
null(MD034, no-bare-urls)
packages/ts-example-selected-features/index.html (2)
9-11: Remove the unused<style>block.The empty
<style>element serves no purpose and can be removed to keep the HTML lean:- <style> - - </style>
25-25: Consider populating or removing the empty<footer>.An empty
<footer>may mislead readers—either add appropriate content or remove the tag altogether.packages/js-example-selected-features/src/style.css (2)
8-9: Use HTTPS for the Apache license URL.Update the license link to use HTTPS:
- http://www.apache.org/licenses/LICENSE-2.0 + https://www.apache.org/licenses/LICENSE-2.0
53-53: Ensure a newline at end of file.Add a trailing newline to conform with POSIX text file conventions.
packages/js-example-selected-features/README.md (2)
15-15: Add a comma for clarity in the note line.Update to:
“Note: This example should be kept in sync with the js-example example, as it replicates the same use case.”
🧰 Tools
🪛 LanguageTool
[uncategorized] ~15-~15: Possible missing comma found.
Context: ...nc with the js-example example as it replicates the same use case. ##...(AI_HYDRA_LEO_MISSING_COMMA)
34-34: Link or annotate the localhost URL.Convert “http://localhost:8080/” into markdown link syntax or clarify it's a local dev server URL to avoid markdownlint’s “bare URL” warning.
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
34-34: Bare URL used
null(MD034, no-bare-urls)
packages/js-example-selected-features/webpack.config.js (1)
29-33: Anchor the regex for JS/MJS files.The rule
test: /\.m?js/will match any path containing “.mjs”. To limit it to file extensions, add an end‑of‑string anchor:- test: /\.m?js/, + test: /\.m?js$/i,packages/ts-example-selected-features/src/main.ts (1)
37-61: Good approach for selective feature registrationThe CustomGraph implementation effectively demonstrates how to customize maxGraph by only registering the needed components. The explanatory comments are excellent, especially the reference to issue #760 for future improvements.
A few notes:
- Line 49: Great comment explaining why RectangleShape isn't registered
- Line 54: Helpful explanation about rectanglePerimeter
- Lines 57-60: Consider extracting the arrow creation into a separate variable since it's reused
- const arrowFunction = EdgeMarker.createArrow(2); - MarkerShape.addMarker('classic', arrowFunction); - MarkerShape.addMarker('block', arrowFunction); + const arrow = EdgeMarker.createArrow(2); + MarkerShape.addMarker('classic', arrow); + MarkerShape.addMarker('block', arrow);packages/js-example-selected-features/src/index.js (1)
109-111: Consider enhancing the XML display methodThe popup function using window.alert is simple but has limitations for displaying large XML content. While adequate for a basic example, consider adding a comment mentioning this limitation.
// poor way to display the XML const popup = (content) => { + // Note: This is a simple approach for demo purposes only. + // For larger XML content, consider using a modal dialog with scrollable content. window.alert(content); };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (3)
package-lock.jsonis excluded by!**/package-lock.jsonpackages/js-example-selected-features/favicon.svgis excluded by!**/*.svgpackages/ts-example-selected-features/favicon.svgis excluded by!**/*.svg
📒 Files selected for processing (22)
.github/workflows/build.yml(2 hunks)README.md(1 hunks)packages/js-example-selected-features/.gitignore(1 hunks)packages/js-example-selected-features/README.md(1 hunks)packages/js-example-selected-features/index.html(1 hunks)packages/js-example-selected-features/package.json(1 hunks)packages/js-example-selected-features/src/index.js(1 hunks)packages/js-example-selected-features/src/style.css(1 hunks)packages/js-example-selected-features/webpack.config.js(1 hunks)packages/js-example-without-defaults/README.md(1 hunks)packages/js-example/src/index.js(1 hunks)packages/ts-example-selected-features/README.md(1 hunks)packages/ts-example-selected-features/index.html(1 hunks)packages/ts-example-selected-features/package.json(1 hunks)packages/ts-example-selected-features/src/main.ts(1 hunks)packages/ts-example-selected-features/src/style.css(1 hunks)packages/ts-example-selected-features/src/vite-env.d.ts(1 hunks)packages/ts-example-selected-features/tsconfig.json(1 hunks)packages/ts-example-selected-features/vite.config.js(1 hunks)packages/ts-example-without-defaults/README.md(1 hunks)packages/ts-example/README.md(1 hunks)packages/website/docs/demo-and-examples.md(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
packages/ts-example-selected-features/src/main.ts (2)
packages/js-example-selected-features/src/index.js (4)
initializeGraph(82-98)container(105-105)graph(86-91)graph(106-106)packages/core/src/view/plugins/FitPlugin.ts (1)
FitPlugin(43-109)
🪛 LanguageTool
packages/js-example-selected-features/README.md
[uncategorized] ~15-~15: Possible missing comma found.
Context: ...nc with the js-example example as it replicates the same use case. ##...
(AI_HYDRA_LEO_MISSING_COMMA)
packages/ts-example-selected-features/README.md
[uncategorized] ~13-~13: Possible missing comma found.
Context: ...nc with the ts-example example as it replicates the same use case. In...
(AI_HYDRA_LEO_MISSING_COMMA)
🪛 markdownlint-cli2 (0.17.2)
packages/js-example-selected-features/README.md
34-34: Bare URL used
null
(MD034, no-bare-urls)
packages/ts-example-selected-features/README.md
15-15: Bare URL used
null
(MD034, no-bare-urls)
27-27: Bare URL used
null
(MD034, no-bare-urls)
🪛 ESLint
packages/js-example-selected-features/webpack.config.js
[error] 2-2: A require() style import is forbidden.
(@typescript-eslint/no-require-imports)
[error] 2-2: 'require' is not defined.
(no-undef)
[error] 3-3: A require() style import is forbidden.
(@typescript-eslint/no-require-imports)
[error] 3-3: 'require' is not defined.
(no-undef)
[error] 4-4: A require() style import is forbidden.
(@typescript-eslint/no-require-imports)
[error] 4-4: 'require' is not defined.
(no-undef)
[error] 5-5: A require() style import is forbidden.
(@typescript-eslint/no-require-imports)
[error] 5-5: 'require' is not defined.
(no-undef)
[error] 8-8: 'process' is not defined.
(no-undef)
[error] 10-10: 'module' is not defined.
(no-undef)
[error] 15-15: '__dirname' is not defined.
(no-undef)
🔇 Additional comments (28)
packages/js-example/src/index.js (1)
17-17: Helpful inline CSS import clarification
The comment clearly indicates whycommon.cssis needed forRubberBandHandler, improving onboarding for new readers.packages/js-example-without-defaults/README.md (1)
3-3: Refined wording enhances clarity
Changing to "without loading defaults" precisely conveys that default plugins and styles are not loaded.packages/js-example-selected-features/.gitignore (1)
1-4: Correct .gitignore setup
Excludingnode_modules,dist, andpackage-lock.jsonensures build artifacts and dependencies aren’t checked into version control.packages/ts-example/README.md (1)
5-9: Comprehensive feature listing added
The new section succinctly outlines key interactions (selection, zoom, panning), which aids users in understanding this example’s capabilities.packages/ts-example-without-defaults/README.md (1)
3-3: Accurate phrasing of example objective
"without loading defaults" better describes the exclusion of default plugins, styles, shapes, etc., aligning with the JS counterpart.packages/ts-example-selected-features/vite.config.js (1)
30-30: ValidatechunkSizeWarningLimitvalue
The limit is set to440(kB by default). Confirm this threshold aligns with your size budget for the@maxgraph/corechunk. If you expect future growth, you might lower it or add a note explaining the choice.packages/ts-example-selected-features/src/vite-env.d.ts (1)
1-1: Type definitions reference is correct
The/// <reference types="vite/client" />directive is necessary for Vite-specific globals and looks good.packages/website/docs/demo-and-examples.md (2)
29-29: TS selected-features example entry
The new bullet forts-example-selected-featuresis clear and consistent with the existing entries.
34-34: JS selected-features example entry
The new bullet forjs-example-selected-featuresaligns with the surrounding style and links correctly.README.md (2)
146-146: Approve TS selected-features entry
Thets-example-selected-featuresentry is correctly added and matches the documentation inpackages/website.
149-149: Approve JS selected-features entry
Thejs-example-selected-featuresentry is correctly added and matches the documentation inpackages/website..github/workflows/build.yml (3)
60-61: Include new TypeScript “selected-features” example in CI build
The new steps correctly invokenpm run build -w packages/ts-example-selected-features, mirroring the pattern used for the otherts-examplevariants. This ensures the selected‐features example is built on all OS matrices.
68-69: Include new JavaScript “selected-features” example in CI build
Similarly, the addition ofnpm run build -w packages/js-example-selected-featuresaligns with the otherjs-examplebuilds and will produce the needed artifacts for this new example.
78-79: Verify artifact upload globs capture new example outputs
You’ve expanded the upload paths topackages/js-example*/dist/andpackages/ts-example*/dist/, which should include both the existing and newly added examples. Please double‐check that these wildcards match the actual dist directories (e.g.packages/js-example-selected-features/dist/andpackages/ts-example-selected-features/dist/) to avoid missing artifacts.packages/ts-example-selected-features/src/style.css (1)
1-52: Approve new stylesheet for the selected‐features TypeScript example
The CSS is well-structured, with sensible defaults and clear overrides for the rubberband UI. The license header is in place, and styling rules (font smoothing, layout, custom rubberband colors) are concise and appropriate for the example’s minimal setup.packages/js-example-selected-features/package.json (2)
5-7: Scripts look correct for development lifecycle
Thedev,build, andpreviewcommands align with the existing Webpack‐based examples, facilitating local development, production builds, and static previews.
10-19: DevDependencies versions review
The chosen tilde constraints mirror the peer examples’ approach. Ensure these align with the versions used in other Webpack examples to prevent discrepancies during CI builds.packages/js-example-selected-features/index.html (1)
1-19: Basic HTML structure aligns with other examples
The document head, title, and body sections mirror the patterns of existing examples. The list of activated behaviors is clear. No immediate issues found.packages/ts-example-selected-features/tsconfig.json (1)
1-14: Strict TS configuration is appropriate for the example
Extending the roottsconfig.jsonand enabling strict flags (noUnusedLocals,noImplicitReturns, etc.) will catch regressions early. Including onlysrc/*.tsis sufficient for this minimal example.packages/ts-example-selected-features/src/main.ts (4)
17-35: Well-organized imports for effective tree-shakingThe imports are well-structured to only include the specific components needed for this example, which aligns with the goal of demonstrating efficient tree-shaking capabilities. The comment about common.css being required by RubberBandHandler is particularly helpful.
63-83: Well-structured graph initialization with good commentsThe initialization function is properly implemented with helpful inline comments explaining each plugin's purpose. The custom style definition for 'myEllipse' is a good demonstration of how to create reusable styles.
The FitPlugin (line 68) is included here but not in the JS example, which shows a good variation between examples.
84-140: Comprehensive batch update example with diverse stylingThis batch update section demonstrates a variety of vertex and edge styles, showing the flexibility of maxGraph. The code includes:
- Regular and custom rectangles and ellipses
- Different approaches for position/size properties (object notation vs individual properties)
- Style inheritance via baseStyleNames
- Edge styling with orthogonal layout and arrows
This provides a good template for users to understand graph creation and styling.
145-158: Effective UI interaction setupThe footer display of the version and the button event handlers are well implemented. The getPlugin('fit') approach for accessing plugins is correctly used with proper null handling via the optional chaining operator.
This section effectively demonstrates how to integrate graph controls with UI elements.
packages/js-example-selected-features/src/index.js (5)
17-33: Well-organized imports for tree-shakingThe imports are properly structured to include only the specific components needed for this example, matching the objective of demonstrating selective feature loading.
35-50: Minimal style registration approachThe CustomGraph implementation effectively demonstrates how to customize maxGraph by registering only the required styles. The implementation is simpler than the TypeScript version, showing an even more minimal approach.
Note: The JS example only registers rectanglePerimeter and classic marker, while the TS example registers additional components. This provides a good contrast in minimization approaches.
52-80: XML-based graph definition approachThis example uses a predefined XML string to define the graph model, which is a different approach from the TypeScript example that creates nodes programmatically. This provides users with an alternative implementation style.
The XML structure is well-formed and includes various styling attributes to demonstrate different visualization capabilities.
82-98: Effective graph initialization with XML importThe initialization function properly sets up the graph with necessary handlers. This example doesn't include the FitPlugin unlike the TypeScript version, showing a different feature selection approach.
The use of ModelXmlSerializer to import the predefined XML model demonstrates an alternative approach to graph creation that complements the programmatic approach shown in the TypeScript example.
113-123: Good demonstration of XML serialization/deserializationThe button implementations for viewing original XML and exporting the current model state effectively demonstrate the serialization capabilities of maxGraph. This is a useful feature that's not shown in the TypeScript example.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
packages/js-example-selected-features/README.md (3)
1-6: Refine title and introduction for clarityThe title and introductory lines can be streamlined for consistency and readability:
- # Integrate `maxGraph` in a vanilla JavaScript project built with Webpack - features selection + # Integrate `maxGraph` into a Vanilla JavaScript Webpack project — Selected Features Example - This example only loads the features and configuration required by the application for an efficient tree-shaking. + This example only registers the specific features and configurations the application requires, enabling more efficient tree-shaking. - So, it demonstrates how to only register Shapes, Perimeters, EdgeMarkers and EdgeStyles used by the application. + So, it demonstrates how to only register Shapes, Perimeters, EdgeMarkers, and EdgeStyles used by the application.
15-15: Add missing comma for readabilityInsert a comma after "example" for smoother readability:
- Note: This example should be kept in sync with the [js-example](../js-example) example as it replicates the same use case. + Note: This example should be kept in sync with the [js-example](../js-example) example, as it replicates the same use case.🧰 Tools
🪛 LanguageTool
[uncategorized] ~15-~15: Possible missing comma found.
Context: ...nc with the js-example example as it replicates the same use case. ##...(AI_HYDRA_LEO_MISSING_COMMA)
32-36: Replace bare URL with markdown linkMarkdownlint flags bare URLs; convert the localhost URL into a link for compliance:
- Run `npm run dev` from this directory and go to http://localhost:8080/ + Run `npm run dev` from this directory and go to [http://localhost:8080/](http://localhost:8080/)🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
34-34: Bare URL used
null(MD034, no-bare-urls)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
README.md(1 hunks)packages/js-example-selected-features/README.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- README.md
🧰 Additional context used
🪛 LanguageTool
packages/js-example-selected-features/README.md
[uncategorized] ~15-~15: Possible missing comma found.
Context: ...nc with the js-example example as it replicates the same use case. ##...
(AI_HYDRA_LEO_MISSING_COMMA)
🪛 markdownlint-cli2 (0.17.2)
packages/js-example-selected-features/README.md
34-34: Bare URL used
null
(MD034, no-bare-urls)
🔇 Additional comments (3)
packages/js-example-selected-features/README.md (3)
7-12: Bullet list clearly outlines featuresThe list of application features is well-structured and informative. No changes needed.
13-13: Reference to main example is goodThis line correctly points to the existing
js-exampleto demonstrate XML model import and decoding.
17-27: Setup instructions are clearThe setup block correctly describes how to install dependencies, build the core package, and start the dev server. No changes needed.
|
1 participant
The existing "without-defaults" examples demonstrate the maximum size reduction by removing all optional features i.e. they show the absolute minimal footprint of using
maxGraph.The new "selected-features" examples show what happens when some optional features are used.
Having those now will make it easier to show the gains when tree-shaking improvements will be available.
Notes
Covers #760
SonarQube detects duplication in the new examples: this is done on purpose as they are all built independently, and currently, they do not share any code of configuration. This may be improved in the future.
Size of the examples
For now, the new examples have the same size as their regular counter parts because the tree-shaking have not been implemented for now.
Remember that:
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Documentation
Chores
Style