Skip to content
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

inoperable in an AMD/requirejs environment: IPython Notebook #127

Closed
bollwyvl opened this issue Mar 6, 2015 · 14 comments
Closed

inoperable in an AMD/requirejs environment: IPython Notebook #127

bollwyvl opened this issue Mar 6, 2015 · 14 comments
Milestone

Comments

@bollwyvl
Copy link
Contributor

bollwyvl commented Mar 6, 2015

Great project!

I desperately want to use mermaid in the IPython notebook. It would be beautiful and painless to flip between a markdown cell with a tiny bit of html wrapping.

Right now, there are some misbehaved files inside both the slim and full builds when used in the requirejs enviornment. While I hate the dependency-management infighting as much as the next guy, big projects like the notebook end up needing a solution to dependency management more robust than globals.

Here is a collection of notebooks that show various attempts I have made at running it:
http://nbviewer.ipython.org/gist/bollwyvl/7b4729c21b3d1ad4c31e

There are a few other approaches, such as shim, that I tried, but it basically all ended up the same way.

Please consider adding requirejs support... very possibly, it could be a one-liner modification to the build process, or a tiny wrapper. I'm happy to help, if PRs to solve this would be welcome.

@bollwyvl
Copy link
Contributor Author

bollwyvl commented Mar 6, 2015

Just noticed that this is a duplicate (maybe) of #37. Will pitch in over there.

@bollwyvl
Copy link
Contributor Author

Shucks, I figured we'd fixed this, and I could come back after a release, and make a nice little wrapper for the notebook. Waited a little too long, as I see the tool churn fairy has come, with no mention of standalone or umd to save me.

I tried a number of thing in gulp with the various builds, and never got anything that I could shim back out. There is a a gulp-umd, which I tried, but to no avail.

Here's a minimal example:
http://nbviewer.org/8e413b6a33a8019f6db8

Error occurs around line 25104, the first time it tries to talk about d3 (which is undefined).

For now, I'm still an old full build, but would really like to just integrate it and move on.

Any thoughts? Do you have any pure browser-side tests? I'd like very much to make a requirejs test so that this can stay on the radar.

@bollwyvl bollwyvl reopened this Jul 21, 2015
@knsv
Copy link
Collaborator

knsv commented Jul 21, 2015

Yes that would be a good idea. Meanwhile I'l make a requirejs testpage and to reproduce this.

@bollwyvl
Copy link
Contributor Author

Thanks, sir!

Let me know how I can pitch in! Really looking forward to where adding live-editing mermaid is a one-click experience in the Notebook, either as an authoring tool (pure js, with the output svg stored in data-url img), or as a visualization layer (js + python/networkx).

@knsv
Copy link
Collaborator

knsv commented Jul 22, 2015

A simple way to mermaid in a requirejs environment without the shim is to move the script tag that includes mermaid to load before requirejs. Then mermaid initialization is not confused by the require from requirejs.

I tried this on your example and managed to replicate the error and then to see it gone.

I hope that helps.

@bollwyvl
Copy link
Contributor Author

Thanks for the feedback!

The specific use case I am targeting is an nbextension in the IPython environment, which actually uses the asynchronous nature of un-optimized requirejs to load scripts at runtime based on what the user does.

The extension can be loaded several ways: installed in the user's environment, or run as a bookmarklet. Either way, I don't control the HTML, and requirejs is going to be there before my code gets to run.

The $.getScript("mermaid.js", function(){}) and $("body").append("<script/>", {src: "mermaid.js"}) approaches both fail in the same way as the example above.

@knsv
Copy link
Collaborator

knsv commented Jul 22, 2015

ok ... and I assume that the shim you setup for the browser the test is not an option either...

When i test now with a copy of the setup in http://nbviewer.org/8e413b6a33a8019f6db8, I get

Uncaught Error: Mismatched anonymous define() module

@bollwyvl
Copy link
Contributor Author

I didn't commit the build with standalone... and didn't get around to
testing it in place yesterday. Will update!

On Wed, Jul 22, 2015 at 9:43 AM Knut Sveidqvist notifications@github.com
wrote:

ok ... and I assume that the shim you setup for the browser the test is
not an option either...

When i test now with a copy of the setup in
http://nbviewer.org/8e413b6a33a8019f6db8, I get

Uncaught Error: Mismatched anonymous define() module


Reply to this email directly or view it on GitHub
#127 (comment).

@bollwyvl
Copy link
Contributor Author

Here's the minified build (whatever it's worth):
https://gist.github.com/bollwyvl/4981cacfd330a92ea767

I guess I figured you'd rather run the build yourself, rather than having the PR get bloated with 25k lines.

Also, I went ahead and launched the evolution of my notebook hack:
https://bollwyvl.github.io/nb-mermaid/

Hopefully I'll get some more time to work on it: the publishing story is not great right now.

I guess close this once the standalone build ships?

@knsv
Copy link
Collaborator

knsv commented Jul 25, 2015

Thanks! Your notebook tool looks really cool!

So I read this as that the build with the standalone option solves your problem and that I can close this issue once this is released!

@bollwyvl
Copy link
Contributor Author

Thanks! There are some remaining questions on how best to publish notebooks
with diagrams... Base64 encoded img tags are the most robust, but have css
issues (apparently).

Yes this issue is good to go after a release, only question is whether you
want to have amd/standalone be a separate build target. Also i didn't touch
the api build...

On 05:15, Sat, Jul 25, 2015 Knut Sveidqvist notifications@github.com
wrote:

Thanks! Your notebook tool looks really cool!

So I read this as that the build with the standalone option solves your
problem and that I can close this issue once this is released!


Reply to this email directly or view it on GitHub
#127 (comment).

@knsv knsv added the Fixed label Oct 4, 2015
@knsv knsv added this to the 0.5.2 milestone Oct 4, 2015
@knsv
Copy link
Collaborator

knsv commented Oct 4, 2015

Fix for this issue was released in mermaid 0.5.2. Will close this now, let me know if you issues still remain.

@knsv knsv closed this as completed Oct 4, 2015
@bollwyvl
Copy link
Contributor Author

bollwyvl commented Oct 5, 2015

Huzzah! I'll check it out!

On Sun, Oct 4, 2015 at 5:15 PM Knut Sveidqvist notifications@github.com
wrote:

Fix for this issue was released in mermaid 0.5.2. Will close this now, let
me know if you issues still remain.


Reply to this email directly or view it on GitHub
#127 (comment).

@fredbalves
Copy link

fredbalves commented Apr 7, 2020

Hi, I'm still having problems when trying to load mermaid with requireJS. What tweaks can be done for this to work?

If I use this minified build everything works great. How can I build from the latest version? I need it built for requirejs but unminified.

Here's the minified build (whatever it's worth):
https://gist.github.com/bollwyvl/4981cacfd330a92ea767

I guess I figured you'd rather run the build yourself, rather than having the PR get bloated with 25k lines.

Also, I went ahead and launched the evolution of my notebook hack:
https://bollwyvl.github.io/nb-mermaid/

Hopefully I'll get some more time to work on it: the publishing story is not great right now.

I guess close this once the standalone build ships?

mgenereu pushed a commit to mgenereu/mermaid that referenced this issue Jun 25, 2022
…and_yarn/svelte-loader-3.1.0

Bump svelte-loader from 2.13.3 to 3.1.0
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants