feat: support esm #5585
feat: support esm #5585
Conversation
✅ Deploy Preview for mermaid-js ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -326,7 +326,7 @@ describe('when formatting urls', function () { | |||
| expect(result).toEqual(url); | |||
|
|
|||
| result = utils.formatUrl(url, { securityLevel: 'strict' }); | |||
| expect(result).toEqual('about:blank'); | |||
| expect(result).toEqual('javascript:alert(%22test%22)'); | |||
There was a problem hiding this comment.
If this turns out to be an issue, we can also consider using a different url sanitization library, ill leave that up to the maintainers to decide :)
There was a problem hiding this comment.
I am a bit worried that this might cause XSS attacks (although, it might be impossible without using URL unsafe characters like ", as they'll get converted to %22).
If somebody makes a malicious mermaid diagram with a malicious javascript:xxxx link, hosts it on example.com, and convinces somebody to click it, I believe the JavaScript will have access to the user's data on example.com
However, it's possible that https://github.com/cure53/DOMPurify will handle that for us, though, even if it isn't handled by the URI sanitizer library. I'll let @knsv chime in on it, since he probably knows more!
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## develop #5585 +/- ##
=======================================
Coverage 5.73% 5.73%
=======================================
Files 278 277 -1
Lines 41999 41988 -11
Branches 490 515 +25
=======================================
Hits 2409 2409
+ Misses 39590 39579 -11
Flags with carried forward coverage won't be shown. Click here to find out more.
|
There was a problem hiding this comment.
I love the idea behind this, and I definitely also want to switch to a fully ESM library, but the main issue I see is that dayjs/esm doesn't fully support ESM, so some bundlers/libraries can't handle it, see iamkun/dayjs#1765
They were working on a dayjs v2 that was supposed to properly ESM, but maintainance of dayjs has slowed down, so 🤷, I don't know when it will be fixed.
| @@ -326,7 +326,7 @@ describe('when formatting urls', function () { | |||
| expect(result).toEqual(url); | |||
|
|
|||
| result = utils.formatUrl(url, { securityLevel: 'strict' }); | |||
| expect(result).toEqual('about:blank'); | |||
| expect(result).toEqual('javascript:alert(%22test%22)'); | |||
There was a problem hiding this comment.
I am a bit worried that this might cause XSS attacks (although, it might be impossible without using URL unsafe characters like ", as they'll get converted to %22).
If somebody makes a malicious mermaid diagram with a malicious javascript:xxxx link, hosts it on example.com, and convinces somebody to click it, I believe the JavaScript will have access to the user's data on example.com
However, it's possible that https://github.com/cure53/DOMPurify will handle that for us, though, even if it isn't handled by the URI sanitizer library. I'll let @knsv chime in on it, since he probably knows more!
| @@ -2,7 +2,7 @@ | |||
| /* eslint-disable @typescript-eslint/no-unused-vars */ | |||
| /* eslint-disable @typescript-eslint/no-empty-function */ | |||
| /* eslint-disable no-console */ | |||
| import dayjs from 'dayjs'; | |||
| import dayjs from 'dayjs/esm/index.js'; | |||
There was a problem hiding this comment.
Unfortunately, I think dayjs's ESM support is still a bit lackluster: iamkun/dayjs#1765
We've previously tried to use dayjs/esm, but had to revert it due to dayjs's ESM support being non-standard, and so many users faced issues with it: #4438
|
The dayjs issue is a blocker. Converting to draft. |
📑 Summary
This change allows mermaid to be imported (
import mermaid from 'mermaid') as native esm in the browser without requiring any buildtools/buildstep/transpilation/commonjs magicResolves #5584 #4320
📏 Design Decisions
Describe the way your implementation works or what design decisions you made if applicable.
📋 Tasks
Make sure you
MERMAID_RELEASE_VERSIONis used for all new features.developbranch