VerovioReact.js

import './App.css';
// import filename from './hello.mei';
import filename from './sample.musicxml';
import { useEffect, useState } from 'react';

function App() {
  return (
    <div className="App">
      <VerovioView />
    </div>
  );
}

export default App;

function VerovioView() {
  // setup async loaders of verovio toolkit and example file
  var [status, setStatus] = useState({ loading: false, error: null, data: null })

  useEffect(() => {
    async function load() {

      // Load verovio toolkit
      setStatus({ loading: true, data: 'Loading Verovio toolkit...' })
      const script = document.createElement("script")
      script.src = 'http://www.verovio.org/javascript/latest/verovio-toolkit.js'
      script.async = true
      await new Promise((resolve, reject) => {
        script.addEventListener("load", resolve)
        script.addEventListener("error", reject)
        document.body.appendChild(script)
      }).then(x => {
        console.log('Verovio loaded');
      }).catch(e => {
        setStatus({ loading: false, data: null, error: e });
      })

      // Check that verovio exists
      if (!window.verovio) {
        setStatus({ loading: false, data: null, error: 'window.verovio is undefined' })
        return;
      }

      // Load mei file
      setStatus({ loading: true, data: 'Loading mei file...' })
      var filedata = await fetch(filename).then(res => res.text()).catch(e => {
        setStatus({ loading: false, data: null, error: e });
      });

      // Render mei file
      setStatus({ loading: true, data: 'Rendering mei file...', error: null })
      var toolkit = new window.verovio.toolkit()
      const options = {
        scale: 30,
        adjustPageHeight: false
      }
      var svg = toolkit.renderData(filedata, options)
      setStatus({ loading: false, data: svg, error: null })
    }

    load()
  }, [])

  if (status.loading) return <p>{status.data}</p>
  if (status.error) return <p>Error: {JSON.stringify(status.error)}</p>
  return <div dangerouslySetInnerHTML={{ __html: status.data }} />
}

VerovioStore.js

// ./store/VerovioStore.js
import Signal from 'signals';
import React from 'react';
export var VerovioStore = function () { }

VerovioStore.initValue = { loading: true, msg: 'Verovio not initialized', toolkit: null, error: null }; // Set initial value here
VerovioStore.value = VerovioStore.initValue;
VerovioStore.signal = new Signal(VerovioStore.initValue);
VerovioStore.signal.add(v => VerovioStore.value = v);

VerovioStore.useSignalState = function () {
    var [status, setStatus] = React.useState(VerovioStore.value);
    React.useEffect(() => {
        function onChange(v) {
            setStatus(v);
        }
        VerovioStore.signal.add(onChange);
        return () => VerovioStore.signal.remove(onChange);
    }, []);
    return [status, VerovioStore.signal.dispatch];
}

VerovioStore.initVerovio = () => {
    async function load() {
        console.log({ loading: true, data: 'Loading Verovio toolkit...' })
        const script = document.createElement("script")
        script.src = 'http://www.verovio.org/javascript/latest/verovio-toolkit.js'
        script.async = true
        await new Promise((resolve, reject) => {
            script.addEventListener("load", resolve)
            script.addEventListener("error", reject)
            document.body.appendChild(script)
        }).then(x => {
            VerovioStore.signal.dispatch({ loading: true, msg: 'Veroivio loaded - initializing toolkit...', toolkit: null, error: null });
        }).catch(e => {
            VerovioStore.signal.dispatch({ loading: false, msg: 'Veroivio loading error', toolkit: null, error: e });
        })

        if (!window.verovio) {
            VerovioStore.signal.dispatch({ loading: false, msg: 'Erroro: window.verovio == undefined', toolkit: null, error: 'Erroro: window.verovio == undefined' });
            return;
        }

        var toolkit = new window.verovio.toolkit()
        VerovioStore.signal.dispatch({ loading: false, msg: 'Veroivio toolkit initialized', toolkit: toolkit, error: null });
    }
    load()
}