From 1c023e7881a53f159380902fcecaf2c9d1b3471e Mon Sep 17 00:00:00 2001 From: David Mehren Date: Sun, 6 Jun 2021 20:57:05 +0200 Subject: [PATCH] Lazy-load abcjs This commit moves the import of abcjs into a `require.ensure` block, that is only executed when a abc diagram is actually present in a note. Webpack automatically splits the library into a separate chunk and loads that on demand. To ensure that abc code-blocks are not treated as normal code-blocks while the chunk is loading, a corresponding check is added to `finishView`. Signed-off-by: David Mehren --- public/js/extra.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/public/js/extra.js b/public/js/extra.js index fbb5de43e..ba6ab12a6 100644 --- a/public/js/extra.js +++ b/public/js/extra.js @@ -18,7 +18,6 @@ import markdownitContainer from 'markdown-it-container' import Plugin from 'markdown-it-regexp' import 'gist-embed' -import abcjs from 'abcjs' require('prismjs/themes/prism.css') require('prismjs/components/prism-wiki') @@ -412,14 +411,15 @@ export function finishView (view) { try { $value = $(value) const $ele = $(value).parent().parent() - - abcjs.renderAbc(value, $value.text()) - - $ele.addClass('abc') - $value.children().unwrap().unwrap() - const svg = $ele.find('> svg') - svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`) - svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet') + require.ensure([], function (require) { + const abcjs = require('abcjs') + abcjs.renderAbc(value, $value.text()) + $ele.addClass('abc') + $value.children().unwrap().unwrap() + const svg = $ele.find('> svg') + svg[0].setAttribute('viewBox', `0 0 ${svg.attr('width')} ${svg.attr('height')}`) + svg[0].setAttribute('preserveAspectRatio', 'xMidYMid meet') + }) } catch (err) { $value.unwrap() $value.parent().append(`
${escapeHTML(err)}
`) @@ -496,7 +496,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') { + if (reallang === 'mermaid' || reallang === 'abc') { return } const codeDiv = langDiv.find('.code')