Improve Gruntfile to support NodeJS module loading. Support window, g…

…lobalThis, and this. Improve Node JS example.
0xfe · Sep 5, 2021 · cacf7af · cacf7af
1 parent d22c2a9
commit cacf7af
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 32 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -37,7 +37,7 @@ module.exports = (grunt) => {
         library: libraryName,
         libraryTarget: 'umd',
         libraryExport: 'default',
-        globalObject: `typeof window !== 'undefined' ? window : this`,
+        globalObject: `typeof window !== 'undefined' ? window : typeof globalThis !== 'undefined' ? globalThis : this`,
         publicPath: 'auto',
       },
       resolve: {

diff --git a/demos/modules/README.md b/demos/modules/README.md
@@ -1,16 +1,16 @@
 # Using VexFlow with ES Modules
 
-Copy the vexflow-debug.js into this folder.
+Use `test.sh`to build and copy `vexflow-debug.js` into this folder. Or do this manually:
 
 ```
-cp ../../build/vexflow-debug.js .
+grunt
+cp ../../build/vexflow-debug.js vexflow-debug.js
 ```
 
-Start a web server in this folder (e.g., https://www.npmjs.com/package/http-server).
+Start a web server in this folder.
 
 ```
-http-server
-
+npx http-server
 
 Starting up http-server, serving ./
 Available on:

diff --git a/demos/modules/index.classic.html b/demos/modules/index.classic.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="output"></div>
+    <p>VexFlow Build: <span id="info"></span></p>
+    <p>See also: <a href="index.html">index.html</a></p>
+    <script src="vexflow-debug.js"></script>
+    <script>
+      document.querySelector('#info').innerText = Vex.Flow.BUILD;
+
+      const vf = new Vex.Flow.Factory({
+        renderer: { elementId: 'output', width: 500, height: 200 },
+      });
+
+      const score = vf.EasyScore();
+      const system = vf.System();
+
+      system
+        .addStave({
+          voices: [
+            score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
+            score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
+          ],
+        })
+        .addClef('treble')
+        .addTimeSignature('4/4');
+
+      vf.draw();
+    </script>
+  </body>
+</html>
diff --git a/demos/modules/index.html b/demos/modules/index.html
@@ -1,9 +1,12 @@
 <!DOCTYPE html>
 <html>
-  <head>
+  <body>
+    <div id="output"></div>
+    <p>VexFlow Build: <span id="info"></span></p>
+    <p>See also: <a href="index.classic.html">index.classic.html</a></p>
     <script type="module" src="vexflow-debug.js"></script>
     <script type="module">
-      console.log(Vex.Flow.BUILD);
+      document.querySelector('#info').innerText = Vex.Flow.BUILD;
 
       const vf = new Vex.Flow.Factory({
         renderer: { elementId: 'output', width: 500, height: 200 },
@@ -24,8 +27,5 @@
 
       vf.draw();
     </script>
-  </head>
-  <body>
-    <div id="output"></div>
   </body>
 </html>
diff --git a/demos/modules/index.js b/demos/modules/index.js
diff --git a/demos/modules/index.node.js b/demos/modules/index.node.js
@@ -0,0 +1,22 @@
+// Usage:
+// node index.node.js
+//
+// THIS EXAMPLE FAILS with error:
+// SyntaxError: The requested module './vexflow-debug.js' does not provide an export named 'default'
+//
+// Solution: add the following to the bottom of vexflow-debug.js:
+//
+//   export default globalThis.Vex;
+//
+// However, doing so will make vexflow-debug.js incompatible with classic <script src="..."></script> tags.
+
+import Vex from './vexflow-debug.js';
+
+// console.log(this);       // this === undefined
+// console.log(window);     // ReferenceError: window is not defined
+// console.log(self);       // ReferenceError: self is not defined
+// console.log(global);     // success! global is the Node JS global object.
+// console.log(globalThis); // success! global is the Node JS global object.
+// console.log(globalThis === global); // true
+
+console.log('VexFlow BUILD: ' + Vex.Flow.BUILD);
diff --git a/demos/modules/test.sh b/demos/modules/test.sh
@@ -0,0 +1,19 @@
+#!/usr/bin/env bash
+# Build vexflow-debug.js if it does not exist.
+BUILD_FILE=../../build/vexflow-debug.js
+LOCAL_FILE=vexflow-debug.js
+
+if [ ! -f "$LOCAL_FILE" ]; then
+  printf "\n$LOCAL_FILE not found. Copy it from the build folder.\n"
+
+  if [ ! -f "$BUILD_FILE" ]; then
+    printf "\n$BUILD_FILE not found. Running grunt.\n\n"
+    grunt
+  fi
+
+  # Copy vexflow-debug.js into this folder.
+  cp $BUILD_FILE $LOCAL_FILE
+fi
+
+# Launch a web server to test index.html and index.classic.html
+npx http-server