Testing integrations

.eslintrc.cjs

@@ -1,7 +1,13 @@
 module.exports = {
 	parser: "@typescript-eslint/parser",
-	plugins: ["jsdoc", "html", "import"],
+	plugins: ["jsdoc", "html", "import", "file-extension-in-import-ts"],
 	extends: ["plugin:@typescript-eslint/recommended"],
+	settings: {
+		"import/extensions": [".js", ".ts"],
+		"import/resolver": {
+			typescript: true,
+		},
+	},
 	rules: {
 		"prefer-rest-params": "off",
 		"@typescript-eslint/ban-ts-ignore": "off",
@@ -86,6 +92,6 @@ module.exports = {
 			"error",
 			{ functions: "always", keywords: "always", classes: "always" },
 		],
-		"import/no-absolute-path": "error",
+		"file-extension-in-import-ts/file-extension-in-import-ts": "error"
 	},
 };

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v4
         with:
-          node-version: 18.12.0
+          node-version: 18.18.0
           cache: 'npm'
       - name: Install dependencies
         run: npm install
@@ -50,7 +50,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v4
         with:
-          node-version: 18.12.0
+          node-version: 18.18.0
           cache: 'npm'
       - name: Install dependencies
         run: npm install
@@ -70,7 +70,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v4
         with:
-          node-version: 18.12.0
+          node-version: 18.18.0
           cache: 'npm'
       - name: Install dependencies
         run: npm install
@@ -90,7 +90,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v4
         with:
-          node-version: 18.12.0
+          node-version: 18.18.0
           cache: 'npm'
       - name: Install dependencies
         run: npm install
@@ -108,7 +108,7 @@ jobs:
       - name: Setup Nodejs
         uses: actions/setup-node@v4
         with:
-          node-version: 18.12.0
+          node-version: 18.18.0
           cache: 'npm'
       - name: Install dependencies
         run: npm install
@@ -116,6 +116,26 @@ jobs:
         run: npm run build
       - name: Test
         run: npm run test:readme
+  test-integrations:
+    name: Test integrations
+    permissions:
+      contents: read
+      id-token: write
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out Git repository
+        uses: actions/checkout@v4
+      - name: Setup Nodejs
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.18.0
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        run: npm run build
+      - name: Test
+        run: npm run test:integrations
   publish:
     runs-on: ubuntu-latest
     # make sure all the tests pass first
@@ -130,7 +150,7 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v4
         with:
-          node-version: 18.12.0
+          node-version: 18.18.0
           registry-url: 'https://registry.npmjs.org'
       - name: Install dependencies
         run: npm install

.gitignore

@@ -21,7 +21,7 @@ test/supports.html
 coverage/
 
 build/*
-dist/*
+**/dist/*
 
 examples/scratch.js
 examples/scratch.ts
@@ -34,3 +34,4 @@ docs
 .vscode
 tone.d.ts
 examples/scratch.ts
+test/integration/*/package-lock.json

package.json

@@ -2,12 +2,11 @@
 	"name": "tone",
 	"version": "14.9.0",
 	"description": "A Web Audio framework for making interactive music in the browser.",
-	"browser": "build/Tone.js",
+	"type": "module",
 	"main": "build/esm/index.js",
 	"module": "build/esm/index.js",
-	"type": "module",
-	"unpkg": "build/Tone.js",
 	"types": "build/esm/index.d.ts",
+	"unpkg": "build/umd/Tone.js",
 	"files": [
 		"README.md",
 		"LICENSE.md",
@@ -18,11 +17,8 @@
 	"scripts": {
 		"build": "npm run increment && rimraf build && npm run ts:build && npm run webpack:build",
 		"docs": "node scripts/generate_docs.cjs",
-		"docs:json": "cross-var typedoc --options \"./scripts/typedoc.json\" --json \"./docs/tone.json\"",
+		"docs:json": "typedoc --options \"./scripts/typedoc.json\" --json \"./docs/tone.json\"",
 		"increment": "node scripts/increment_version.cjs",
-		"karma": "cross-var karma start ./test/karma.conf.cjs --single-run --file $npm_config_file --dir $npm_config_dir",
-		"karma:browser": "cross-var karma start ./test/karma.conf.cjs --auto-watch --browsers OnlineChrome --file $npm_config_file --dir $npm_config_dir",
-		"karma:watch": "cross-var karma start ./test/karma.conf.cjs --auto-watch --file $npm_config_file --dir $npm_config_dir",
 		"lint": "eslint --ignore-pattern ./Tone/**/*.test.ts --ext ts ./Tone",
 		"lint:fix": "eslint --ext ts --fix ./Tone",
 		"scratch": "webpack -w --env scratch=1 --mode=development",
@@ -30,13 +26,12 @@
 		"test:browser": "npm run karma:browser",
 		"test:examples": "node ./test/scripts/test_examples.cjs",
 		"test:html": "node ./test/scripts/test_html.cjs",
-		"test:node": "node ./test/scripts/node_test.cjs",
+		"test:integrations": "zx ./test/scripts/test_integrations.mjs",
 		"test:readme": "node ./test/scripts/test_readme.cjs",
 		"test:watch": "tsc && concurrently --raw \"tsc -w\" \"web-test-runner --config=./test/web-test-runner.config.js --watch\"",
 		"ts:build": "tsc --project ./scripts/tsconfig.build.json",
 		"watch": "tsc --watch",
-		"webpack:watch": "webpack -w --env production=1 --mode=development --config ./webpack.config.cjs",
-		"webpack:build": "webpack --env production=1 --config ./webpack.config.cjs"
+		"webpack:build": "webpack --env production=1 --config ./scripts/webpack.config.cjs"
 	},
 	"repository": {
 		"type": "git",
@@ -70,13 +65,12 @@
 		"@web/test-runner": "^0.18.1",
 		"@web/test-runner-puppeteer": "^0.16.0",
 		"array2d": "^0.0.5",
-		"async": "^3.2.2",
 		"audiobuffer-to-wav": "^1.0.0",
 		"chai": "^5.1.0",
 		"codecov": "^3.8.3",
 		"concurrently": "^8.2.2",
-		"cross-var": "^1.1.0",
 		"eslint": "^8.56.0",
+		"eslint-plugin-file-extension-in-import-ts": "^2.1.0",
 		"eslint-plugin-html": "^8.1.1",
 		"eslint-plugin-import": "^2.29.1",
 		"eslint-plugin-jsdoc": "^48.2.3",
@@ -94,12 +88,14 @@
 		"teoria": "^2.5.0",
 		"tmp-promise": "^2.1.1",
 		"tonal": "^6.0.1",
+		"ts-loader": "^9.5.1",
 		"typedoc": "^0.25.13",
 		"typescript": "^5.4.5",
 		"ua-parser-js": "^0.7.31",
-		"webpack": "^5.65.0",
-		"webpack-cli": "^4.10.0",
-		"yargs": "^17.3.0"
+		"webpack": "^5.91.0",
+		"webpack-cli": "^5.1.4",
+		"yargs": "^17.3.0",
+		"zx": "^8.0.2"
 	},
 	"dependencies": {
 		"standardized-audio-context": "^25.3.70",

scripts/tsconfig.build.json

@@ -3,6 +3,7 @@
 		"sourceMap": true,
 		"declaration": true,
 		"noUnusedLocals": true,
+		"rootDir": "../Tone"
 	},
 	"extends": "../tsconfig.json",
 	"include": [

scripts/webpack.config.cjs

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require("path");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 // /////////////////////////////////////
 // Defaults
@@ -10,17 +9,19 @@ const defaults = {
 	mode: "development",
 	context: __dirname,
 	entry: {
-		Tone: "./Tone/index.ts",
+		Tone: "../Tone/index.ts",
 	},
 	output: {
-		path: path.resolve(__dirname, "build"),
+		path: path.resolve(__dirname, "../build/umd"),
 		filename: "[name].js",
 		library: "Tone",
 		libraryTarget: "umd",
 		globalObject: "typeof self !== 'undefined' ? self : this",
 	},
 	resolve: {
-		extensions: [".ts", ".js"]
+		extensionAlias: {
+			".js": [".js", ".ts"],
+		},
 	},
 	module: {
 		rules: [
@@ -28,43 +29,12 @@ const defaults = {
 				test: /\.ts$/,
 				use: "ts-loader",
 				exclude: /(node_modules)/,
-			}
-		]
+			},
+		],
 	},
 	devtool: "cheap-source-map",
 };
 
-// /////////////////////////////////////
-// Scratch
-// /////////////////////////////////////
-
-const scratch = Object.assign({}, defaults, {
-	entry: {
-		scratch: "./examples/scratch.ts",
-	},
-	plugins: [
-		new HtmlWebpackPlugin({
-			template: "./examples/scratch.html"
-		})
-	],
-});
-
-// /////////////////////////////////////
-// Tests
-// /////////////////////////////////////
-
-const test = Object.assign({}, defaults, {
-	entry: {
-		test: "./test/test.js",
-	},
-	plugins: [
-		new HtmlWebpackPlugin({
-			filename: "test.html",
-			template: "./test/index.html",
-		})
-	],
-});
-
 // /////////////////////////////////////
 // Production
 // /////////////////////////////////////
@@ -74,7 +44,7 @@ const production = Object.assign({}, defaults, {
 	devtool: "source-map",
 });
 
-module.exports = env => {
+module.exports = (env) => {
 	if (env.test) {
 		return test;
 	} else if (env.production) {

test/integration/node/package.json

@@ -0,0 +1,9 @@
+{
+    "name": "tone-node-test",
+    "dependencies": {
+        "tone": "file:../../.."
+    },
+    "scripts": {
+        "test": "node test.mjs"
+    }
+}

test/integration/node/test.mjs

@@ -0,0 +1,8 @@
+/**
+ * @fileoverview Basic loading in node.js
+ */
+import * as Tone from "tone";
+import assert from "assert";
+
+assert("MonoSynth" in Tone, "Tone missing expected export");
+assert("start" in Tone, "Tone missing expected export");

test/integration/typescript/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "tone-typescript-test",
+    "dependencies": {
+        "@types/node": "^20.12.8",
+        "tone": "file:../../..",
+        "typescript": "^5.4.5"
+    },
+    "scripts": {
+        "test": "tsc ./test.ts --noEmit --lib dom"
+    }
+}

test/integration/typescript/test.ts

@@ -0,0 +1,3 @@
+import * as Tone from "tone";
+
+const synth = new Tone.MonoSynth();

test/integration/unpkg/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "tone-unpkg-test",
+    "dependencies": {
+        "puppeteer": "^22.7.1",
+        "tone": "file:../../.."
+    },
+    "scripts": {
+        "test": "node test.mjs"
+    }
+}

test/integration/unpkg/test.mjs

@@ -0,0 +1,22 @@
+/**
+ * @fileoverview Ensure that the unpkg link can be loaded in the browser
+ */
+import puppeteer from "puppeteer";
+import { fileURLToPath } from "url";
+import { readFile } from "fs/promises";
+import { resolve } from "path";
+import assert from "assert";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const rootDir = resolve(__dirname, "../../../");
+const pkg = JSON.parse((await readFile(resolve(rootDir, "package.json"))).toString());
+
+const browser = await puppeteer.launch();
+const page = await browser.newPage();
+await page.addScriptTag({
+	path: resolve(rootDir, pkg.unpkg),
+});
+const time = await page.evaluate("Tone.now()");
+await browser.close();
+
+assert(time >= 0, new Error("did not export a time value"));

test/integration/vite/index.html

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+</head>
+<body>
+    <script src="./index.ts" type="module"></script>
+</body>
+</html>

test/integration/vite/index.ts

@@ -0,0 +1,3 @@
+import { MonoSynth } from "tone";
+
+const synth = new MonoSynth();

test/integration/vite/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "tone-vite-test",
+    "dependencies": {
+        "tone": "file:../../..",
+        "vite": "^5.2.11"
+    },
+    "scripts": {
+        "test": "vite build ./"
+    }
+}

test/integration/webpack/package.json

@@ -0,0 +1,12 @@
+{
+    "name": "tone-webpack-test",
+    "type": "module",
+    "dependencies": {
+        "tone": "file:../../..",
+        "webpack": "^5.91.0",
+        "webpack-cli": "^5.1.4"
+    },
+    "scripts": {
+        "test": "webpack ./test.js --target=web"
+    }
+}

test/integration/webpack/test.js

@@ -0,0 +1,3 @@
+import { MonoSynth } from "tone";
+
+const synth = new MonoSynth();

test/scripts/test_integrations.mjs

@@ -0,0 +1,15 @@
+#!/usr/bin/env zx
+import "zx/globals";
+import { glob } from "glob";
+import { resolve, basename } from "path";
+
+const integrations = await glob(resolve(__dirname, "../integration/*"));
+for (let dir of integrations) {
+	await within(async () => {
+		cd(dir);
+		// eslint-disable-next-line no-console
+		console.log("Integration:", basename(dir));
+		await $`npm i`;
+		await $`npm run test`;
+	});
+}

tsconfig.json

@@ -22,5 +22,5 @@
 		"rootDir": "./",
 	},
 	"include": ["Tone/**/*.ts", "test/**/*.ts"],
-	"exclude": ["node_modules"]
+	"exclude": ["node_modules", "test/integration/**"]
 }