Switch from yarn to pnpm

wxt isn't compatible with yarn berry. See wxt-dev/wxt#945
wxt + yarn was causing problems generating the sources zip for Firefox.

wxt also has problems with pnpm in a workspace environment. Downloading
"private" packages doesn't work if because wxt uses npm pack to pull in
those packages. npm pack doesn't work with the version name that is
given to linked workspace packages: link:{relative-path}. I'll file
an issue with wxt about this later, but for now I've written a hook in
bandcamp-tempo-adjust/wxt.config.ts that regenerates the Firefox sources
zip.

Firefox sources zip generation for discogs-tempo-adjust isn't fixed in this
commit. I'll get to that later.

Also, a lot of references to yarn still exis in README.md. I'll also get
to that later.

apps/bandcamp-tempo-adjust/SOURCE_CODE_REVIEW.md

@@ -0,0 +1,6 @@
+To build the package from the Firefox source code review zip, you can run:
+
+```
+yarn
+yarn zip:firefox
+```

apps/bandcamp-tempo-adjust/package.json

@@ -13,15 +13,17 @@
     "build": "wxt build",
     "build:firefox": "wxt build --browser firefox --mv3",
     "zip": "wxt zip",
-    "zip:firefox": "wxt zip --browser firefox",
+    "zip:firefox": "wxt zip --browser firefox --mv3",
     "postinstall": "wxt prepare"
   },
   "dependencies": {
     "@json2csv/plainjs": "^7.0.6",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.28.0",
-    "@tempo-adjust/permissions": "0.0.0",
-    "@tempo-adjust/player-components": "0.0.0",
+    "@tempo-adjust/permissions": "workspace:*",
+    "@tempo-adjust/player-components": "workspace:*",
+    "@tempo-adjust/theme-provider": "workspace:*",
+    "@tempo-adjust/to-one-decimal": "workspace:*",
     "immer": "^9.0.17",
     "p-queue": "^8.0.1",
     "react": "^18.3.1",
@@ -31,19 +33,22 @@
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "12",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/chrome": "^0.0.202",
+    "@types/fs-extra": "^11.0.4",
     "@types/json2csv": "^5.0.3",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@types/webextension-polyfill": "^0.9.2",
     "@wxt-dev/module-react": "^1.1.1",
+    "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "html-loader": "^3.1.0",
     "html-webpack-plugin": "^5.5.0",
     "jsdom": "^24.0.0",
+    "jszip": "^3.10.1",
     "parcel": "2.0.0-canary.1728",
     "prettier": "^2.7.1",
     "rimraf": "^6.0.1",
@@ -61,5 +66,5 @@
     "@types/react": "18.3.1"
   },
   "browserslist": "> 0.5%, last 5 versions, not dead",
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]"
 }

apps/bandcamp-tempo-adjust/wxt.config.ts

@@ -1,9 +1,13 @@
 import { defineConfig } from 'wxt';
+import JSZip from 'jszip';
+import fs from 'fs-extra';
+import path from 'node:path';
+import glob from 'fast-glob';
 
 export default defineConfig({
   manifest: {
     name: 'Bandcamp Tempo Adjust',
-    version: '0.8.1',
+    version: '1.0.0',
     description:
       'A browser extension to detect and adjust track tempo on Bandcamp',
     browser_specific_settings: {
@@ -15,6 +19,75 @@ export default defineConfig({
     host_permissions: ['https://*.bcbits.com/stream/*'],
     permissions: ['storage'],
   },
+  hooks: {
+    'zip:sources:done': async (wxt, sourcesZipPath) => {
+      console.log('\x1b[36mℹ\x1b[0m', 'Re-zipping sources...');
+
+      const projectDirName = path.basename(wxt.config.root);
+
+      /*
+       * assumes that the workspace is structured like this:
+       *
+       * packages/
+       *   - package-a/
+       * apps/
+       *   - app-a/ <- wxt.config.root
+       */
+      const workspaceRoot = path.resolve(wxt.config.root, '../..');
+
+      const zip = new JSZip();
+
+      // zip the workspace root's pnpm-workspace.yaml
+      zip.file(
+        'pnpm-workspace.yaml',
+        fs.readFileSync(path.resolve(workspaceRoot, 'pnpm-workspace.yaml'))
+      );
+
+      // zip the workspace root's package.json
+      zip.file(
+        'package.json',
+        fs.readFileSync(path.resolve(workspaceRoot, 'package.json'))
+      );
+
+      // get all files in all packages
+      const packageFiles = glob.sync('packages/**/*', {
+        cwd: workspaceRoot,
+        ignore: ['**/node_modules/**/*'],
+      });
+
+      // get all files in the current app
+      const appFiles = glob.sync(`apps/${projectDirName}/**/*`, {
+        cwd: workspaceRoot,
+        ignore: ['**/node_modules/**/*'],
+      });
+
+      const files = [...packageFiles, ...appFiles];
+
+      for (const file of files) {
+        const absolutePath = path.resolve(workspaceRoot, file);
+        const content = fs.readFileSync(absolutePath);
+        zip.file(file, content);
+      }
+
+      await new Promise((resolve, reject) => {
+        zip
+          .generateNodeStream({
+            type: 'nodebuffer',
+            ...(wxt.config.zip.compressionLevel === 0
+              ? { compression: 'STORE' }
+              : {
+                  compression: 'DEFLATE',
+                  compressionOptions: {
+                    level: wxt.config.zip.compressionLevel,
+                  },
+                }),
+          })
+          .pipe(fs.createWriteStream(sourcesZipPath))
+          .on('error', reject)
+          .on('close', resolve);
+      });
+    },
+  },
   modules: ['@wxt-dev/module-react'],
   srcDir: 'src',
 });

apps/discogs-tempo-adjust/package.json

@@ -20,7 +20,9 @@
     "postinstall": "wxt prepare"
   },
   "dependencies": {
-    "@tempo-adjust/player-components": "0.0.0",
+    "@tempo-adjust/permissions": "workspace:*",
+    "@tempo-adjust/player-components": "workspace:*",
+    "@tempo-adjust/theme-provider": "workspace:*",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "classnames": "^2.5.1",
@@ -31,5 +33,6 @@
     "webextension-polyfill": "^0.10.0",
     "zustand": "^5.0.0-rc.2"
   },
-  "type": "module"
+  "type": "module",
+  "packageManager": "[email protected]"
 }

package.json

@@ -8,22 +8,21 @@
     "url": "https://github.com/azarbayejani/bandcamp-tempo-adjust.git"
   },
   "scripts": {
-    "check": "yarn workspaces foreach -A run tsc",
-    "dev:bandcamp": "yarn workspace bandcamp-tempo-adjust dev",
-    "dev:discogs": "yarn workspace discogs-tempo-adjust dev",
-    "build": "yarn build-chrome && yarn build-firefox",
-    "build-chrome": "yarn workspaces foreach -Ap --include '{bandcamp-tempo-adjust,discogs-tempo-adjust}' run build",
-    "build-firefox": "yarn workspaces foreach -Ap --include '{bandcamp-tempo-adjust,discogs-tempo-adjust}' run build -b firefox --mv3",
-    "zip": "yarn zip-chrome && yarn zip-firefox",
-    "zip-chrome": "yarn workspaces foreach -Ap --include '{bandcamp-tempo-adjust,discogs-tempo-adjust}' run zip",
-    "zip-firefox": "yarn workspaces foreach -Ap --include '{bandcamp-tempo-adjust,discogs-tempo-adjust}' run zip -b firefox --mv3"
+    "preinstall": "npx only-allow pnpm",
+    "check": "pnpm -r exec tsc",
+    "dev:bandcamp": "pnpm --filter bandcamp-tempo-adjust dev",
+    "dev:discogs": "pnpm --filter discogs-tempo-adjust dev",
+    "build": "pnpm build-chrome && pnpm build-firefox",
+    "build:chrome": "pnpm --filter './apps/**' build",
+    "build:firefox": "pnpm --filter './apps/**' build -b firefox --mv3",
+    "zip": "pnpm zip-chrome && pnpm zip-firefox",
+    "zip:chrome": "pnpm --filter './apps/**' zip",
+    "zip:firefox": "pnpm --filter './apps/**' zip -b firefox --mv3"
   },
   "dependencies": {
     "@json2csv/plainjs": "^7.0.6",
     "@tanstack/react-query": "^4.28.0",
     "@tanstack/react-query-devtools": "^4.28.0",
-    "@tempo-adjust/permissions": "0.0.0",
-    "@tempo-adjust/player-components": "0.0.0",
     "immer": "^9.0.17",
     "p-queue": "^8.0.1",
     "react": "^18.3.1",
@@ -33,8 +32,9 @@
     "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "12",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/chrome": "^0.0.202",
     "@types/json2csv": "^5.0.3",
@@ -62,16 +62,12 @@
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.6",
     "typescript": "^5.6.3",
-    "vitest": "^1.3.0",
+    "vitest": "^2.1.3",
     "web-ext": "^7.11.0",
     "wxt": "^0.19.11"
   },
   "resolutions": {
     "@types/react": "18.3.1"
   },
-  "packageManager": "[email protected]",
-  "workspaces": [
-    "packages/*",
-    "apps/*"
-  ]
+  "packageManager": "[email protected]"
 }

packages/permissions/package.json

@@ -1,6 +1,5 @@
 {
   "name": "@tempo-adjust/permissions",
-  "packageManager": "[email protected]",
   "type": "module",
   "version": "0.0.0",
   "main": "index.ts",

packages/player-components/Button.tsx

@@ -19,7 +19,6 @@ const Button = ({
   disabled?: boolean;
 }) => {
   const theme = useTheme();
-  console.log('THEME', theme);
   return (
     <button
       className={classnames(css.button, {

packages/player-components/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@tempo-adjust/player-components",
-  "packageManager": "[email protected]",
   "type": "module",
   "main": "index.ts",
   "private": true,
   "dependencies": {
+    "@tempo-adjust/theme-provider": "workspace:*",
+    "@tempo-adjust/to-one-decimal": "workspace:*",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
     "typescript": "^5.6.3"
   },
-  "version": "0.0.0"
+  "version": "0.0.0",
+  "packageManager": "[email protected]"
 }

packages/theme-provider/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tempo-adjust/theme-provider",
-  "packageManager": "[email protected]",
   "type": "module",
   "main": "index.tsx",
   "private": true,
   "devDependencies": {
     "typescript": "^5.6.3"
-  }
+  },
+  "packageManager": "[email protected]"
 }

packages/theme-provider/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "target": "ESNext",
+      "module": "ESNext",
+      "moduleResolution": "Bundler",
+      "noEmit": true,
+      "esModuleInterop": true,
+      "forceConsistentCasingInFileNames": true,
+      "resolveJsonModule": true,
+      "strict": true,
+      "skipLibCheck": true,
+      "allowImportingTsExtensions": true,
+      "jsx": "react-jsx",
+      "types": ["@testing-library/jest-dom"]
+    }
+  }

packages/to-one-decimal/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@tempo-adjust/to-one-decimal",
-  "packageManager": "[email protected]",
   "type": "module",
   "main": "index.ts",
   "private": true,
   "devDependencies": {
     "typescript": "^5.6.3"
-  }
+  },
+  "packageManager": "[email protected]"
 }