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

[Fritz Lin]

Description

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

• structuredClone - https://caniuse.com/?search=structuredClone
• Obejct.hasOwn - https://caniuse.com/?search=hasOwn

(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

• Mermaid version: 10.9.0
• Browser and Version: [Safari14] Mozilla/5.0 (iPhone; CPU iPhone OS 14_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Mobile/15E148 Safari/604.1

Suggested Solutions

Suggested solutions:

• polyfill structuredClone
  • I'm not sure will it work just to revert structuredClone to be JSON.parse(JSON.stringify(x))
• polyfill Object.hasOwn

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.