minor #54424 [WebProfilerBundle] Inline flowchart-only Mermaid versio…

…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

src/Symfony/Bundle/WebProfilerBundle/.gitattributes

@@ -2,3 +2,4 @@
 /phpunit.xml.dist export-ignore
 /.gitattributes export-ignore
 /.gitignore export-ignore
+/Resources/views/Script/Mermaid/Makefile export-ignore

src/Symfony/Bundle/WebProfilerBundle/.gitignore

@@ -1,3 +1,4 @@
 vendor/
 composer.lock
 phpunit.xml
+/Resources/views/Script/Mermaid/repo-*

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/workflow.html.twig

@@ -132,8 +132,8 @@
             <p>There are no workflows configured.</p>
         </div>
     {% else %}
-        <script type="module">
-            import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+        <script>
+            {{ source('@WebProfiler/Script/Mermaid/mermaid-flowchart-v2.min.js') }}
             const isDarkMode = document.querySelector('body').classList.contains('theme-dark');
             mermaid.initialize({
                 flowchart: { useMaxWidth: false },

src/Symfony/Bundle/WebProfilerBundle/Resources/views/Script/Mermaid/Makefile

@@ -0,0 +1,32 @@
+define diagram-orchestration
+import { diagram as flowchartV2 } from '../diagrams/flowchart/flowDiagram-v2.js';
+import { registerDiagram } from './diagramAPI.js';
+
+let hasLoadedDiagrams = false;
+export const addDiagrams = () => {
+  if (hasLoadedDiagrams) {
+    return;
+  }
+  hasLoadedDiagrams = true;
+  registerDiagram('flowchart-v2', flowchartV2, () => true);
+};
+endef
+
+override tag := v10.9.0
+
+.PHONY: mermaid-flowchart-v2.min.js
+mermaid-flowchart-v2.min.js: | repo-$(tag)/node_modules
+	$(file >repo-$(tag)/packages/mermaid/src/diagram-api/diagram-orchestration.ts,$(diagram-orchestration))
+	pnpm -C repo-$(tag) run build
+	cp repo-$(tag)/packages/mermaid/dist/mermaid.min.js $@
+
+repo-$(tag)/node_modules: | repo-$(tag)
+	pnpm -C $(@D) install --ignore-scripts
+
+.SECONDARY: repo-$(tag)
+repo-$(tag):
+	curl -fL https://github.com/mermaid-js/mermaid/archive/refs/tags/$(tag).tar.gz | tar -xz --strip-components=1 --one-top-level=$@
+
+.PHONY: clean
+clean:
+	rm -rf ./repo-*