Add ES6 module compilation

package.json

@@ -1,90 +1,99 @@
 {
-  "name": "@coderline/alphatab",
-  "version": "1.3.0",
-  "description": "alphaTab is a music notation and guitar tablature rendering library",
-  "keywords": [
-    "guitar",
-    "music-notation",
-    "music-sheet",
-    "html5",
-    "svg",
-    "guitar-tablature"
-  ],
-  "homepage": "https://alphatab.net",
-  "bugs": {
-    "url": "https://github.com/coderline/alphaTab/issues"
-  },
-  "author": "Daniel Kuschny",
-  "license": "MPL-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/coderline/alphaTab"
-  },
-  "main": "dist/alphaTab.js",
-  "typings": "dist/alphaTab.d.ts",
-  "engines": {
-    "node": ">=6.0.0"
-  },
-  "scripts": {
-    "clean": "rimraf dist",
-    "lint": "tslint --project tsconfig.build.json -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
-    "generate-typescript": "rimraf src/generated && ts-node --project tsconfig.build-csharp.json src.compiler/typescript/AlphaTabGenerator.ts --project tsconfig.build-csharp.json",
-    "generate-csharp": "npm run generate-typescript && ts-node --project tsconfig.build-csharp.json src.compiler/csharp/CSharpTranspiler.ts --project tsconfig.build-csharp.json",
-    "generate-kotlin": "npm run generate-typescript && ts-node --project tsconfig.build-kotlin.json src.compiler/kotlin/KotlinTranspiler.ts --project tsconfig.build-kotlin.json",
-    "build": "npm run generate-typescript && tsc --project tsconfig.build.json && rollup -c rollup.config.js",
-    "build-ci": "npm run clean && npm run build && npm pack",
-    "build-csharp": "npm run generate-csharp && cd src.csharp && dotnet build -c Release",
-    "build-csharp-ci": "npm run clean && npm run generate-csharp && cd src.csharp && dotnet build -c Release",
-    "build-kotlin": "npm run generate-kotlin && cd src.kotlin/alphaTab && gradlew assemble",
-    "build-kotlin-ci": "npm run clean && npm run generate-kotlin && cd src.kotlin/alphaTab && gradlew assemble",
-    "start": "node scripts/setup-playground.js && npm run build && concurrently --kill-others \"tsc --project tsconfig.build.json --watch\" \"rollup -c rollup.config.js -w\"",
-    "test": "npm run generate-typescript && tsc --project tsconfig.json && concurrently --kill-others \"tsc --project tsconfig.json -w\" \"karma start karma.conf.js --browsers Chrome --no-single-run --reporters spec,kjhtml\"",
-    "test-ci": "npm run generate-typescript && tsc --project tsconfig.json && karma start karma.conf.js --browsers ChromeHeadless --single-run --reporters spec",
-    "test-csharp": "cd src.csharp && dotnet test",
-    "test-csharp-ci": "cd src.csharp && dotnet test",
-    "test-kotlin": "cd src.kotlin/alphaTab && gradlew jvmTest",
-    "test-kotlin-ci": "cd src.kotlin/alphaTab && gradlew jvmTest"
-  },
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@types/css-font-loading-module": "0.0.4",
-    "@types/jasmine": "^3.7.1",
-    "@types/resize-observer-browser": "^0.1.5",
-    "concurrently": "^6.1.0",
-    "cors": "^2.8.5",
-    "fs-extra": "^10.0.0",
-    "git-branch": "^2.0.1",
-    "karma": "^6.3.2",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-express-http-server": "0.0.1",
-    "karma-jasmine": "^4.0.1",
-    "karma-jasmine-html-reporter": "^1.6.0",
-    "karma-rollup-preprocessor": "^7.0.7",
-    "karma-spec-reporter": "0.0.32",
-    "lodash": "^4.17.21",
-    "multer": "^1.4.2",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.47.0",
-    "rollup-plugin-copy": "^3.4.0",
-    "rollup-plugin-dts": "^3.0.1",
-    "rollup-plugin-license": "^2.3.0",
-    "rollup-plugin-serve": "^1.1.0",
-    "rollup-plugin-terser": "^7.0.2",
-    "terser": "^5.7.0",
-    "ts-node": "^9.1.1",
-    "tslint": "^6.1.3",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-config-standard": "^9.0.0",
-    "ttypescript": "^1.5.12",
-    "typescript": "^4.2.4"
-  },
-  "files": [
-    "/dist/alphaTab.js",
-    "/dist/alphaTab.min.js",
-    "/dist/alphaTab.d.ts",
-    "/dist/font/Bravura.*",
-    "/dist/font/*.txt",
-    "/dist/soundfont/*",
-    "LICENSE.header"
-  ]
+    "name": "@coderline/alphatab",
+    "version": "1.3.0",
+    "description": "alphaTab is a music notation and guitar tablature rendering library",
+    "keywords": [
+        "guitar",
+        "music-notation",
+        "music-sheet",
+        "html5",
+        "svg",
+        "guitar-tablature"
+    ],
+    "homepage": "https://alphatab.net",
+    "bugs": {
+        "url": "https://github.com/coderline/alphaTab/issues"
+    },
+    "author": "Daniel Kuschny",
+    "license": "MPL-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/coderline/alphaTab"
+    },
+    "main": "dist/alphaTab.js",
+    "module": "dist/alphaTab.mjs",
+    "typings": "dist/alphaTab.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/alphaTab.mjs",
+            "require": "./dist/alphaTab.js"
+        }
+    },
+    "engines": {
+        "node": ">=6.0.0"
+    },
+    "scripts": {
+        "clean": "rimraf dist",
+        "lint": "tslint --project tsconfig.build.json -t codeFrame 'src/**/*.ts' 'test/**/*.ts'",
+        "generate-typescript": "rimraf src/generated && ts-node --project tsconfig.build-csharp.json src.compiler/typescript/AlphaTabGenerator.ts --project tsconfig.build-csharp.json",
+        "generate-csharp": "npm run generate-typescript && ts-node --project tsconfig.build-csharp.json src.compiler/csharp/CSharpTranspiler.ts --project tsconfig.build-csharp.json",
+        "generate-kotlin": "npm run generate-typescript && ts-node --project tsconfig.build-kotlin.json src.compiler/kotlin/KotlinTranspiler.ts --project tsconfig.build-kotlin.json",
+        "build": "npm run generate-typescript && tsc --project tsconfig.build.json && rollup -c rollup.config.js",
+        "build-ci": "npm run clean && npm run build && npm pack",
+        "build-csharp": "npm run generate-csharp && cd src.csharp && dotnet build -c Release",
+        "build-csharp-ci": "npm run clean && npm run generate-csharp && cd src.csharp && dotnet build -c Release",
+        "build-kotlin": "npm run generate-kotlin && cd src.kotlin/alphaTab && gradlew assemble",
+        "build-kotlin-ci": "npm run clean && npm run generate-kotlin && cd src.kotlin/alphaTab && gradlew assemble",
+        "start": "node scripts/setup-playground.js && npm run build && concurrently --kill-others \"tsc --project tsconfig.build.json --watch\" \"rollup -c rollup.config.js -w\"",
+        "test": "npm run generate-typescript && tsc --project tsconfig.json && concurrently --kill-others \"tsc --project tsconfig.json -w\" \"karma start karma.conf.js --browsers Chrome --no-single-run --reporters spec,kjhtml\"",
+        "test-ci": "npm run generate-typescript && tsc --project tsconfig.json && karma start karma.conf.js --browsers ChromeHeadless --single-run --reporters spec",
+        "test-csharp": "cd src.csharp && dotnet test",
+        "test-csharp-ci": "cd src.csharp && dotnet test",
+        "test-kotlin": "cd src.kotlin/alphaTab && gradlew jvmTest",
+        "test-kotlin-ci": "cd src.kotlin/alphaTab && gradlew jvmTest"
+    },
+    "devDependencies": {
+        "@rollup/plugin-commonjs": "^19.0.0",
+        "@types/css-font-loading-module": "0.0.4",
+        "@types/jasmine": "^3.7.1",
+        "@types/resize-observer-browser": "^0.1.5",
+        "concurrently": "^6.1.0",
+        "cors": "^2.8.5",
+        "fs-extra": "^10.0.0",
+        "git-branch": "^2.0.1",
+        "karma": "^6.3.2",
+        "karma-chrome-launcher": "^3.1.0",
+        "karma-express-http-server": "0.0.1",
+        "karma-jasmine": "^4.0.1",
+        "karma-jasmine-html-reporter": "^1.6.0",
+        "karma-rollup-preprocessor": "^7.0.7",
+        "karma-spec-reporter": "0.0.32",
+        "lodash": "^4.17.21",
+        "multer": "^1.4.2",
+        "rimraf": "^3.0.2",
+        "rollup": "^2.47.0",
+        "rollup-plugin-copy": "^3.4.0",
+        "rollup-plugin-dts": "^3.0.1",
+        "rollup-plugin-license": "^2.3.0",
+        "rollup-plugin-serve": "^1.1.0",
+        "rollup-plugin-terser": "^7.0.2",
+        "terser": "^5.7.0",
+        "ts-node": "^9.1.1",
+        "tslint": "^6.1.3",
+        "tslint-config-prettier": "^1.18.0",
+        "tslint-config-standard": "^9.0.0",
+        "ttypescript": "^1.5.12",
+        "typescript": "^4.2.4"
+    },
+    "files": [
+        "/dist/alphaTab.js",
+        "/dist/alphaTab.mjs",
+        "/dist/alphaTab.min.js",
+        "/dist/alphaTab.min.mjs",
+        "/dist/alphaTab.d.ts",
+        "/dist/font/Bravura.*",
+        "/dist/font/*.txt",
+        "/dist/soundfont/*",
+        "LICENSE.header"
+    ]
 }

rollup.config.js

@@ -14,6 +14,12 @@ const commonOutput = {
     }
 };
 
+const importMetaPlugin = {
+    resolveImportMeta() {
+        return '{}'; // prevent import.meta to be empty in non ES outputs
+    }
+};
+
 const isWatch = process.env.ROLLUP_WATCH;
 
 module.exports = [
@@ -22,14 +28,22 @@ module.exports = [
         output: [
             {
                 file: 'dist/alphaTab.js',
-                name: 'alphaTab'
+                plugins: [importMetaPlugin]
             },
             {
                 file: 'dist/alphaTab.min.js',
-                name: 'alphaTab',
+                plugins: [terser(), importMetaPlugin]
+            },
+            {
+                file: 'dist/alphaTab.mjs',
+                format: 'es'
+            },
+            {
+                file: 'dist/alphaTab.min.mjs',
+                format: 'es',
                 plugins: [terser()]
             }
-        ].map(o => ({ ...o, ...commonOutput })),
+        ].map(o => ({ ...commonOutput, ...o })),
         external: [],
         watch: {
             include: 'dist/lib/**',
@@ -64,12 +78,13 @@ module.exports = [
                 }
             }),
 
-            isWatch && serve({
-                open: true,
-                openPage: '/playground/control.html',
-                contentBase: '', 
-                port: 8080
-            })
+            isWatch &&
+                serve({
+                    open: true,
+                    openPage: '/playground/control.html',
+                    contentBase: '',
+                    port: 8080
+                })
         ]
     },
     {

src/Environment.ts

@@ -213,6 +213,21 @@ export class Environment {
         return 'AudioWorkletGlobalScope' in Environment.globalThis;
     }
 
+    /**
+     * @target web
+     */
+    public static createAlphaTabWorker(scriptFile: string): Worker {
+        if (Environment.webPlatform === WebPlatform.BrowserModule) {
+            let script: string = `import * as alphaTab from '${scriptFile}'`;
+            let blob: Blob = new Blob([script], { type: 'text/javascript' });
+            return new Worker(URL.createObjectURL(blob), { type: 'module' });
+        } else {
+            let script: string = `importScripts('${scriptFile}')`;
+            let blob: Blob = new Blob([script]);
+            return new Worker(URL.createObjectURL(blob));
+        }
+    }
+
     /**
      * @target web
      * @partial
@@ -229,10 +244,25 @@ export class Environment {
      * @target web
      */
     private static detectScriptFile(): string | null {
-        if (!('document' in Environment.globalThis)) {
-            return null;
+        // normal browser include as <script>
+        if ('document' in Environment.globalThis && document.currentScript) {
+            return (document.currentScript as HTMLScriptElement).src;
         }
-        return (document.currentScript as HTMLScriptElement).src;
+
+        // browser include as ES6 import
+        // <script type="module">
+        // import * as alphaTab from 'dist/alphaTab.js';
+        try {
+            // @ts-ignore
+            const meta = import.meta;
+            if ('url' in meta) {
+                return meta.url;
+            }
+        } catch (e) {
+            // ignore potential errors
+        }
+
+        return null;
     }
 
     /**
@@ -475,7 +505,10 @@ export class Environment {
         } else if (Environment.isRunningInWorker) {
             AlphaTabWebWorker.init();
             AlphaSynthWebWorker.init();
-        } else if (Environment.webPlatform === WebPlatform.Browser) {
+        } else if (
+            Environment.webPlatform === WebPlatform.Browser ||
+            Environment.webPlatform === WebPlatform.BrowserModule
+        ) {
             Environment.registerJQueryPlugin();
             Environment.HighDpiFactor = window.devicePixelRatio;
             // ResizeObserver API does not yet exist so long on Safari (only start 2020 with iOS Safari 13.7 and Desktop 13.1)
@@ -508,6 +541,15 @@ export class Environment {
             // no node.js
         }
 
+        try {
+            // @ts-ignore
+            if ('url' in import.meta) {
+                return WebPlatform.BrowserModule;
+            }
+        } catch (e) {
+            // no browser module
+        }
+
         return WebPlatform.Browser;
     }
 }

src/platform/javascript/AlphaSynthWebWorkerApi.ts

@@ -15,6 +15,7 @@ import { ProgressEventArgs } from '@src/alphatab';
 import { FileLoadError } from '@src/FileLoadError';
 import { MidiEventsPlayedEventArgs } from '@src/synth/MidiEventsPlayedEventArgs';
 import { MidiEventType } from '@src/midi/MidiEvent';
+import { Environment } from '@src/Environment';
 
 /**
  * a WebWorker based alphaSynth which uses the given player as output.
@@ -204,9 +205,7 @@ export class AlphaSynthWebWorkerApi implements IAlphaSynth {
         this._output.sampleRequest.on(this.onOutputSampleRequest.bind(this));
         this._output.open();
         try {
-            let script: string = "importScripts('" + alphaSynthScriptFile + "')";
-            let blob: Blob = new Blob([script]);
-            this._synth = new Worker(URL.createObjectURL(blob));
+            this._synth = Environment.createAlphaTabWorker(alphaSynthScriptFile)
         } catch (e) {
             // fallback to direct worker
             try {

src/platform/javascript/AlphaTabWorkerScoreRenderer.ts

@@ -8,6 +8,7 @@ import { RenderFinishedEventArgs } from '@src/rendering/RenderFinishedEventArgs'
 import { BoundsLookup } from '@src/rendering/utils/BoundsLookup';
 import { Settings } from '@src/Settings';
 import { Logger } from '@src/Logger';
+import { Environment } from '@src/Environment';
 
 /**
  * @target web
@@ -29,9 +30,7 @@ export class AlphaTabWorkerScoreRenderer<T> implements IScoreRenderer {
 
         // first try blob worker
         try {
-            let script: string = `importScripts('${settings.core.scriptFile}')`;
-            let blob: Blob = new Blob([script]);
-            this._worker = new Worker(URL.createObjectURL(blob));
+            this._worker = Environment.createAlphaTabWorker(settings.core.scriptFile);
         } catch (e) {
             try {
                 this._worker = new Worker(settings.core.scriptFile);

src/platform/javascript/BrowserUiFacade.ts

@@ -86,7 +86,8 @@ export class BrowserUiFacade implements IUiFacade<unknown> {
     }
 
     public constructor(rootElement: HTMLElement) {
-        if (Environment.webPlatform !== WebPlatform.Browser) {
+        if (Environment.webPlatform !== WebPlatform.Browser &&
+            Environment.webPlatform !== WebPlatform.BrowserModule) {
             throw new AlphaTabError(
                 AlphaTabErrorType.General,
                 'Usage of AlphaTabApi is only possible in browser environments. For usage in node use the Low Level APIs'

src/platform/javascript/WebPlatform.ts

@@ -4,5 +4,6 @@
  */
 export enum WebPlatform {
     Browser,
-    NodeJs
+    NodeJs,
+    BrowserModule
 }