mirrors/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2025-05-20 18:25:21 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Lazy-load viz.js

Browse source 
This commit moves the import of viz.js into a `require.ensure` block,
that is only executed when a graphviz diagram is actually present
in a note. Webpack automatically splits the library into a separate
chunk and loads that on demand.

To ensure that graphviz code-blocks are not treated as normal
code-blocks while the chunk is loading, a corresponding check is added
to `finishView`.

The library is also removed from the Webpack config file, as it only
is used at one place in extra.js, which is handled by Webpack
without any extra config.

Signed-off-by: David Mehren <git@herrmehren.de>
This commit is contained in:
David Mehren 2021-06-06 22:08:27 +02:00
parent 1c023e7881
commit 5b8b76135b
No known key found for this signature in database
GPG key ID: 185982BA4C42B7C3
2 changed files with 9 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

17
public/js/extra.js
View file

@ -31,7 +31,6 @@ require('prismjs/components/prism-gherkin')
require('./lib/common/login')
require('./locale')
require('../vendor/md-toc')
const Viz = require('viz.js')
const ui = getUIElements()
// auto update last change
@ -367,13 +366,15 @@ export function finishView (view) {
try {
$value = $(value)
const $ele = $(value).parent().parent()
require.ensure([], function (require) {
const Viz = require('viz.js')
const graphviz = Viz($value.text())
if (!graphviz) throw Error('viz.js output empty graph')
$value.html(graphviz)
const graphviz = Viz($value.text())
if (!graphviz) throw Error('viz.js output empty graph')
$value.html(graphviz)
$ele.addClass('graphviz')
$value.children().unwrap().unwrap()
$ele.addClass('graphviz')
$value.children().unwrap().unwrap()
})
} catch (err) {
$value.unwrap()
$value.parent().append(`<div class="alert alert-warning">${escapeHTML(err)}</div>`)
@ -496,7 +497,7 @@ export function finishView (view) {
const langDiv = $(value)
if (langDiv.length > 0) {
const reallang = langDiv[0].className.replace(/hljs|wrap/g, '').trim()
if (reallang === 'mermaid' || reallang === 'abc') {
if (reallang === 'mermaid' || reallang === 'abc' || reallang === 'graphviz') {
return
}
const codeDiv = langDiv.find('.code')