Merge pull request #1228 from DDMAL/verovio-load

Separate verovio prod and dev

package.json

@@ -32,8 +32,8 @@
     },
     "scripts": {
         "start": "http-server deployment/server/",
-        "build": "./setup-verovio && rm -rf deployment/server/Neon-gh && webpack --config webpack.config.js && cp -R assets src/workers deployment/server/Neon-gh",
-        "bundle:pages": "./setup-verovio && rm -rf dist/Neon/Neon-gh && webpack --config webpack.pages-config.js && cp -R assets src/workers dist/Neon/Neon-gh",
+        "build": "rm -rf deployment/server/Neon-gh && webpack --config webpack.config.js && cp -R assets src/workers deployment/server/Neon-gh",
+        "bundle:pages": "rm -rf dist/Neon/Neon-gh && webpack --config webpack.pages-config.js && cp -R assets src/workers dist/Neon/Neon-gh",
         "dev": "webpack --config webpack.dev.config.js",
         "doc": "typedoc --out ./doc --mode modules ./src",
         "cypress:open": "cypress open",
@@ -94,7 +94,6 @@
         "typedoc": "^0.18.0",
         "typescript": "4.6.4",
         "uuid": "^8.3.0",
-        "verovio-dev": "file:./verovio-util/verovio-dev",
         "webpack": "^4.12.0",
         "webpack-command": "^0.5.0",
         "webpack-dev-server": "^4.9.0",

src/VerovioWrapper.ts

@@ -1,26 +1,36 @@
 import { VerovioMessage } from './Types';
 
-
 /**
  * A wrapper around the verovio web worker to permit mocking in tests.
  */
 export default class VerovioWrapper {
   verovioWorker: Worker;
-  constructor () {
-    this.verovioWorker = new Worker(__ASSET_PREFIX__ + 'workers/VerovioWorker.js');
+  constructor() {
+    if (process.env.NODE_ENV === 'production') {
+      this.verovioWorker = new Worker(
+        __ASSET_PREFIX__ + 'workers/VerovioWorker.js'
+      );
+    } else {
+      this.verovioWorker = new Worker(
+        __ASSET_PREFIX__ + 'workers/VerovioWorker-dev.js'
+      );
+    }
   }
 
   /**
    * Set an event listener onto the actual web worker.
    */
-  addEventListener (type: string, handler: EventListenerOrEventListenerObject): void {
+  addEventListener(
+    type: string,
+    handler: EventListenerOrEventListenerObject
+  ): void {
     return this.verovioWorker.addEventListener(type, handler);
   }
 
   /**
    * Send a message to the actual web worker.
    */
-  postMessage (message: VerovioMessage): void {
+  postMessage(message: VerovioMessage): void {
     return this.verovioWorker.postMessage(message);
   }
 }

src/workers/VerovioWorker-dev.js

@@ -0,0 +1,69 @@
+importScripts('../assets/js/verovio-toolkit-wasm.js');
+
+let toolkit;
+const backlog = [];
+
+/**
+ * Parse and respond to messages sent by NeonCore.
+ * @param {MessageEvent} evt
+ */
+function handleNeonEvent (evt) {
+  const data = evt.data;
+  const result = {
+    id: data.id
+  };
+
+  switch (data.action) {
+    case 'renderData':
+      result.svg = toolkit.renderData(data.mei, {});
+      break;
+    case 'getElementAttr':
+      result.attributes = toolkit.getElementAttr(data.elementId);
+      break;
+    case 'edit':
+      result.result = toolkit.edit(data.editorAction);
+      break;
+    case 'getMEI':
+      result.mei = toolkit.getMEI({
+        pageNo: 0,
+        scoreBased: true
+      });
+      break;
+    case 'editInfo':
+      result.info = toolkit.editInfo();
+      break;
+    case 'renderToSVG':
+      result.svg = toolkit.renderToSVG(1);
+      break;
+    default:
+      break;
+  }
+  postMessage(result);
+}
+
+
+verovio.module.onRuntimeInitialized = function () {
+
+  toolkit = new verovio.toolkit();
+  toolkit.setOptions({
+    inputFrom: 'mei',
+    footer: 'none',
+    header: 'none',
+    pageMarginLeft: 0,
+    pageMarginTop: 0,
+    font: 'Bravura',
+    useFacsimile: false,
+  });
+  console.debug('READY');
+  onmessage = handleNeonEvent;
+  for (const message of backlog) {
+    handleNeonEvent(message);
+  }
+}
+
+
+function tempHandler (evt) {
+  backlog.push(evt);
+}
+
+onmessage = tempHandler;

test/VerovioWrapper.ts

@@ -1,5 +1,5 @@
 import { VerovioMessage, VerovioResponse } from '../src/Types';
-import * as verovio from 'verovio-dev';
+import verovio from '../assets/js/verovio-toolkit-wasm.js'
 
 /**
  * Wrapper to be used during tests when Web Workers are not available.