minor #54424 [WebProfilerBundle] Inline flowchart-only Mermaid version (MatTheCat)

fabpot · fabpot · commit 44e4699c5213 · 2024-04-08T13:30:47.000+02:00
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
diff --git a/src/Symfony/Bundle/WebProfilerBundle/.gitattributes b/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
diff --git a/src/Symfony/Bundle/WebProfilerBundle/.gitignore b/src/Symfony/Bundle/WebProfilerBundle/.gitignore
@@ -1,3 +1,4 @@
 vendor/
 composer.lock
 phpunit.xml
+/Resources/views/Script/Mermaid/repo-*
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/workflow.html.twig b/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 },
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Script/Mermaid/Makefile b/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-*
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Script/Mermaid/mermaid-flowchart-v2.min.js b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Script/Mermaid/mermaid-flowchart-v2.min.js
