Skip to content

[WebProfilerBundle] Don't load external JS dependencies in Workflow profiler #54416

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
javiereguiluz opened this issue Mar 27, 2024 · 1 comment · Fixed by #54424
Closed

[WebProfilerBundle] Don't load external JS dependencies in Workflow profiler #54416

javiereguiluz opened this issue Mar 27, 2024 · 1 comment · Fixed by #54424
Labels
WebProfilerBundle

Comments

@javiereguiluz
Copy link
Member

javiereguiluz commented Mar 27, 2024 •
edited
Loading

In my opinion, all features of WebProfilerBundle should work even if you don't have an active Internet connection. This is both for security reasons (to not make connections to third-party services from your work environment) and for practical reasons (those external connections could be restricted in your company or your Internet connection could be weak or failing).

That's why we embed things like SVG icons and serve custom web fonts via the ProfilerController.

However, the workflow.html.twig has this:

import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';

I tried to fix this but I can't:

  • I downloaded mermaid.min.js from jsDelivr, but it's a 3.3 MB file 😰
  • I tried to only get the files related to "flowChart", which is the only feature needed here, but I can't.

So, is there some JavaScript expert who can tell us how to get all these files in a single JS file (e.g. mermaid-flowchart.min.js) so we can include that from the Profiler?

image

Thanks!
@MatTheCat
Copy link
Contributor

MatTheCat commented Mar 27, 2024 •
edited
Loading

From mermaid-js/mermaid#2920 (comment) I was able to generate a working flowchart-only 723Ko (706Kio) script from Mermaid v10.9.0.

@MatTheCat MatTheCat mentioned this issue Mar 27, 2024
Merged
@fabpot fabpot closed this as completed Apr 8, 2024
fabpot added a commit that referenced this issue Apr 8, 2024
@fabpot
minor #54424 [WebProfilerBundle] Inline flowchart-only Mermaid versio…
44e4699 
…n (MatTheCat)

This PR was merged into the 7.1 branch.

Discussion
----------

[WebProfilerBundle] Inline flowchart-only Mermaid version

| Q             | A
| ------------- | ---
| Branch?       | 7.1
| Bug fix?      | no
| New feature?  | no
| Deprecations? | no
| Issues        | Fix #54416
| License       | MIT

From mermaid-js/mermaid#2920 (comment) there is no official way to generate a diagram-specific script, but it is possible by patching the `packages/mermaid/src/diagram-api/diagram-orchestration.ts` file before building.

This PR comes with a Makefile whose default recipe does so, and the `mermaid-flowchart-v2.min.js` file it generated from v10.9.0.

Bumping the script’s version will require to update the Makefile’s `tag` variable to the corresponding `mermaid-js/mermaid`’s (from https://github.com/mermaid-js/mermaid/tags) and running `make`. The recipe depends on cURL, GNU tar, and pnpm.

Commits
-------

32612e7 [WebProfilerBundle] Inline flowchart-only Mermaid version
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
WebProfilerBundle
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[WebProfilerBundle] Inline flowchart-only Mermaid version MatTheCat/symfony
3 participants
@fabpot @javiereguiluz @MatTheCat