-
-
Notifications
You must be signed in to change notification settings - Fork 6.5k
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
Ability to import only mermaidAPI #1155
Comments
I was able to create a standalone mermaidAPI.js file by changing the below webpack.config.base.js objects. After running entry
output
The below code seems to work. So creating a standalone mermaidAPI.js file is indeed possible. Not sure the above changes are the most elegant solution though.
|
Imo mermaid should ship as a single file where you can import either mermaid or mermaidAPI. Having two separate files means redundant code. |
I think that with the config above a mermaid.js and a mermaidAPI.js is generated under dist. The mermaid.js will contain mermaid + mermaidApi thanks to webpack and mermaidApi will only contain mermaidApi. When a consumer of mermaid creates a bundle with webpack or similar redundant code will be excluded by the bundler so I think this would work. Thanks @jdavis61. I will test this with webpack and see how it behaves. Do you want to create pull request, if not I can copy from here and fiddle around a bit with it. |
Hi @knsv, I have been trying to implement @chris579's feedback but have not been able to configure webpack to allow mermaid to ship as a single file and import both mermaidAPI and mermaid. I will keep researching and hopefully open a PR that implements his feedback. If I cannot figure out a solution, I will open a PR with the above webpack config + some cypress tests as you suggested. If you have a solution feel free to open a PR as well, do not wait for me. |
I have been trying this out and I am starting to hesitate a little. The solution works and when using webpack it is able to to bundle only the API part of mermaid and not the bootstrapping parts. Whats makes me hesitate a bit is that the bootstrapping is quite small. The sizes (uncompressed):
Is it worth the additional complexity for the relative small change in file size? Opinions are appreciated. |
@knsv I personally think allowing mermaidAPI to be imported on its own unnecessary. Or maybe not worth the effort to implement, e.g. doubling the size of the mermaid CDN. Just my opinion, I am sure there is a valid use case for allowing mermaidAPI to be imported on its own. I just cannot think of one. I used the below code in a project and it works perfectly.
This warning does not make any sense to me, though I am not a mermaid.js expert. Again I am sure there is a good reason for this.
I will try to figure out how to import mermaidAPI standalone without doubling the size of the CDN. It would be cool to figure out a solution to this problem. Cheers! |
Well, I think we should favor into exposing all |
Hi @knsv , as far as I know, the only way to allow Unfortunately I cannot think of any other way to implement this request using webpack. I guess the only other way to do this is to implement chris579's suggestion. Anyways best of luck, thank you for creating such an awesome online flowchart library! -- MISC Cheers! |
Please reopen is there is a clear usecase. |
This is related to: #617, #813
The idea with having both mermaidAPI and mermaid are the separation of the actual bootstrapping part of mermaid with the diagram rendering. With bootstrapping I mean the code in mermaid for checking if the document is loaded, finding the elements to render etc. The rendering code is in mermaidApi, the default bootstrapping that looks for elements with the classname mermaid might not be suitable in all integrations.
The ability to import only mermaidAPI and not mermaid was lost when migrating to webpack and es6. This should be re-enabled.
If an integrator wants to do their own bootstrapping as in some other mechanism for rendering diagrams he or she is free to do so via the API. This is currently not obvious from the docs.
An example of usage for the mermaidAPI is available in this example repo:
https://github.com/mermaid-js/api-integration-ex
In the example the mermaidAPI is fetched from mermaid. After this issue is resolved it will be possible to skip mermaid and only import mermaidAPI.
The text was updated successfully, but these errors were encountered: