mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
68.69k stars 6.07k forks source link

Failure to load in Safari 14 since 10.5.0-alpha.1 and a solution #5523

Open fritx opened 1 month ago

fritx commented 1 month ago

Description

The following JS features seem not to be supported in Safari 14 (or other older browsers)

(My iphoneX is carrying Safari 14.)

Steps to reproduce

<!-- not ok for Safari 14 -->
<script src="https://unpkg.com/mermaid@10.9.0/dist/mermaid.min.js"></script>
<!-- <script src="https://unpkg.com/mermaid@10.5.0-alpha.1/dist/mermaid.min.js"></script> -->

<!-- ok -->
<!-- <script src="https://unpkg.com/mermaid@10.4.0/dist/mermaid.min.js"></script> -->

Screenshots

1. With polyfills for both structuredClone and Object.hasOwn:

(Seems perfect except the ZenUML which is not yet supported)

2. With polyfills for only structuredClone:

(Diagrams not rendering)

3. Without any polyfills:

(Fatal error: Reference Error: Can't find variable: structuredClone)

Code Sample

No response

Setup

Suggested Solutions

Suggested solutions:

Below is my personal polyfill which seems to work (with at-least both of block and sequence diagrams).

/* fix mermaid not loading in Safari14 since 10.5.0-alpha.1 */
// https://caniuse.com/?search=structuredClone
if (!window.structuredClone) {
  window.structuredClone = function structuredClone(obj) {
    return JSON.parse(JSON.stringify(obj))
  }
}
// https://caniuse.com/?search=hasown
if (!Object.hasOwn) {
  Object.hasOwn = function hasOwn(o, k) {
    return Object.prototype.hasOwnProperty.call(o, k)
  }
}

Additional Context

I'm also happy to provide a PR, but it may cost some time... as I'm quite new to the code base.