-
-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Upgrade unist-util-visit to 4.1.0 #19
Conversation
jest.mock doesn't work work against ES6 modules, but this approach of using spys instead does. See: jestjs/jest#10025
@sjwall could you please take a look at this PR? |
Hi, yes I will hopefully get chance to look at it tomorrow. Appologies for the delay |
7c035fa
to
135b622
Compare
Codecov Report
@@ Coverage Diff @@
## main #19 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 2 2
Lines 41 37 -4
Branches 7 7
=========================================
- Hits 41 37 -4
Continue to review full report at Codecov.
|
@@ -83,7 +83,7 @@ const config = { | |||
/** @type {import('@docusaurus/preset-classic').Options} */ | |||
({ | |||
docs: { | |||
remarkPlugins: [require('mdx-mermaid')], | |||
remarkPlugins: [import('mdx-mermaid')], |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Docusaurus does not support ESM yet facebook/docusaurus#5379
I am happy to merge this change in (and make the appropriate changes to document this) if there are people wanting to use this library outside of Docusaurus.
I don't see a reason to merge this change until Docusaurus is up upgraded to support ESM if there are no use cases outside of it. The main reason for this is that it could cause confusion in the documentation and will add more support overhead
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Are you sure that doesn't work?
The GitHub Action at https://github.com/candrews/mdx-mermaid/blob/135b622f14972e347b1e6b84f9303d3ea23cee43/.github/workflows/build.yml#L28 passes, meaning that the "doc" project builds (which includes the require
-> import
change).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The code compiles and the React component works but the mdx parser in Docusuarus doesn't process the markdown files.
Running up the docs locally with yarn start
at the bottom of intro.md there should be a diagram http://localhost:3000/mdx-mermaid/docs/intro/
The diagram on the index works because it is using the React component directly and not the plugin
mdx-mermaid/doc/src/components/HomepageFeatures.js
Lines 10 to 19 in 3d6784c
<Mermaid chart={` | |
graph LR; | |
User-->mf[Markdown file]; | |
mf-->cm[\`\`\`mermaid \`\`\`]; | |
cm-->mdx[mdx-mermaid]; | |
mdx-->Mermaid; | |
Mermaid-->SVG; | |
`} | |
// This isn't processed by the parser so needs config passing if it's to be configured | |
config={{}}/> |
The import statement is returning a promise which I guess that the parser is ignoring as it doesn't know how to handle it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
A dynamic import is always a promise this is why it needs to be awaited. Docusaurus itself is also using .mjs
inside their own config.
Which means the docusaurus config needs to be following:
const createConfig = async () => ({
...
docs: {
remarkPlugins: [
(await import('mdx-mermaid')).default,
],
},
...
});
module.exports = createConfig;
With that config it should actually work.
It's best to use a specific version to ensure a consistent, reproducible product.
Thank you for the pull request! I have merged it into the esm branch so that I can do some more documentation work before releasing it as a version 2 ready for Docusaurus to upgrade to esm |
* Upgrade unist-util-visit to 4.1.0 (#19) * Set up spys instead of using mock jest.mock doesn't work work against ES6 modules, but this approach of using spys instead does. See: jestjs/jest#10025 * Export as an ES6 module instead of CommonJS * Upgrade unist-util-visit to 3.0.0 * Upgrade unist-util-visit to 4.1.0 Closes: #18 * Use `import` instead of `require` * Use ES2020 instead of ESNext It's best to use a specific version to ensure a consistent, reproducible product. Co-authored-by: Sam Wall <oss@samuelwall.co.uk> * refactor(imports): use import type * build(deps): bump * fix(docs): module import * fix(Mermaid): import theme config module * docs: update docs for v2 * fix(reactsample): add missing type Co-authored-by: Craig Andrews <candrews@integralblue.com>
Closes: #18