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

Cannot render PlantUML diagram when rendering DOM dynamically (like SPA) #21

Open
exKAZUu opened this issue Apr 5, 2019 · 2 comments
Open

Comments

@exKAZUu
Copy link

exKAZUu commented Apr 5, 2019

Some web apps (especially GitHub) renders web pages dynamically like SPA.
However, this plugin doesn't render a diagram of PlantUML code inserted dynamically.
So, I would recommend this plugin to detect DOM changes by watching DOM periodically (e.g. per 5 sec?) in order to render such a diagram.

Reproduction step

  1. Open https://github.com/dai0304/pegmatite
  2. Click Issues
  3. Click this issue
  4. Confirm the plugin doesn't render the following PlantUML code
    (If you open this issue page directly by entering the URL, then this plugin works well)
@startuml

[*] --> State1
State1 --> [*]
State1 : this is a string
State1 : this is another string

State1 -> State2
State2 --> [*]

@enduml
@exKAZUu
Copy link
Author

exKAZUu commented Apr 5, 2019

Hmm, or this plugin should try re-rendering the diagram of the DOM element double-clicked by a user ... ?

@tsujimitsu
Copy link
Contributor

I thought that using MutationObserver would solve it.

observer = new MutationObserver(function() {
    if (document.querySelectorAll("pre[lang='puml']").length > 0) {
        run(config);
    }
});

The following is a sample implementation.
https://github.com/tsujimitsu/pegmatite/blob/support-github-dynamically/pegmatite/content-script.js#L201

Fired every time change github.com's DOM. This is bad point.

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

2 participants