Fix type checking of skin-database

Author: captbaritone

docs/typescript-checking.md

@@ -6,15 +6,19 @@ This document describes the TypeScript checking convention established for the W
 
 Each TypeScript-enabled package in the monorepo now has a consistent `type-check` script that performs type checking without emitting files.
 
+**Progress: 4 out of 5 packages now passing! 🎉**
+
 ### Package Status
 
 #### ✅ Passing Packages
+
 - **webamp**: Clean TypeScript compilation
 - **ani-cursor**: Clean TypeScript compilation
-- **webamp-docs**: Clean TypeScript compilation (after adding webamp workspace dependency)
+- **skin-database**: Clean TypeScript compilation (fixed JSZip types, Jest types, and Buffer compatibility issues)
+- **webamp-docs**: Clean TypeScript compilation
 
 #### ❌ Failing Packages (Need fixes)
-- **skin-database**: 172 TypeScript errors (missing types, test setup issues)
+
 - **webamp-modern**: 390+ TypeScript errors (conflicting type definitions, target issues)
 
 ## Convention
@@ -40,7 +44,7 @@ The root package.json contains a centralized script that runs type checking for
 ```json
 {
   "scripts": {
-    "type-check": "pnpm --filter webamp type-check && pnpm --filter ani-cursor type-check && pnpm --filter webamp-docs type-check"
+    "type-check": "pnpm --filter webamp type-check && pnpm --filter ani-cursor type-check && pnpm --filter skin-database type-check && pnpm --filter webamp-docs type-check"
   }
 }
 ```
@@ -69,19 +73,28 @@ When adding a new TypeScript package to the type-check convention:
 
 ### Common Issues
 
-1. **Missing Jest types** (`skin-database`):
+1. **Missing Jest types** (Fixed in `skin-database`):
+
    - Install `@types/jest` and configure proper Jest setup
    - Ensure test files are properly configured
 
-2. **Conflicting type definitions** (`webamp-modern`):
+2. **Missing package types** (Fixed in `skin-database`):
+
+   - Install missing dependencies like `jszip`, `react-redux`, `express`
+   - Install corresponding `@types/` packages where needed
+   - Note: Some packages like JSZip provide their own types
+
+3. **Buffer compatibility issues** (Fixed in `skin-database`):
+
+   - Newer TypeScript versions require explicit casting for `fs.writeFileSync`
+   - Use `new Uint8Array(buffer)` instead of raw `Buffer` objects
+
+4. **Conflicting type definitions** (`webamp-modern`):
+
    - Multiple versions of `@types/node` causing conflicts
    - Target configuration issues (ES5 vs ES2015+)
    - Dependency type mismatches
 
-3. **Missing dependencies**:
-   - Missing type definitions for imported modules
-   - Incorrect dependency references
-
 ### Recommended Fix Strategy
 
 1. Start with packages that have fewer errors

package.json

@@ -11,7 +11,7 @@
   "scripts": {
     "test": "jest",
     "lint": "eslint . --ext ts,tsx,js,jsx --rulesdir=packages/webamp-modern/tools/eslint-rules",
-    "type-check": "pnpm --filter webamp type-check && pnpm --filter ani-cursor type-check && pnpm --filter webamp-docs type-check",
+    "type-check": "pnpm --filter webamp type-check && pnpm --filter ani-cursor type-check && pnpm --filter skin-database type-check && pnpm --filter webamp-docs type-check",
     "deploy": "sh deploy.sh",
     "format": "prettier --write '**/*.{js,ts,tsx}'"
   },

packages/skin-database/addSkin.ts

@@ -59,7 +59,7 @@ async function addModernSkinFromBuffer(
 ): Promise<Result> {
   console.log("Write temporarty file.");
   const tempFile = temp.path({ suffix: ".wal" });
-  fs.writeFileSync(tempFile, buffer);
+  fs.writeFileSync(tempFile, new Uint8Array(buffer));
   console.log("Put skin to S3.");
   await S3.putSkin(md5, buffer, "wal");
 
@@ -83,7 +83,7 @@ async function addClassicSkinFromBuffer(
   uploader: string
 ): Promise<Result> {
   const tempFile = temp.path({ suffix: ".wsz" });
-  fs.writeFileSync(tempFile, buffer);
+  fs.writeFileSync(tempFile, new Uint8Array(buffer));
   const tempScreenshotPath = temp.path({ suffix: ".png" });
 
   const logLines: string[] = [];

packages/skin-database/package.json

@@ -21,6 +21,7 @@
     "graphql-yoga": "^5.10.10",
     "imagemin": "^7.0.0",
     "imagemin-optipng": "^7.0.0",
+    "jszip": "^3.10.1",
     "knex": "^0.21.1",
     "lru-cache": "^6.0.0",
     "mastodon-api": "^1.3.0",
@@ -33,6 +34,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-dropzone": "^11.1.0",
+    "react-redux": "^8.0.5",
     "react-window": "^1.8.1",
     "redux-observable": "^1.0.0",
     "rxjs": "^6.3.3",
@@ -64,6 +66,8 @@
   "prettier": {},
   "devDependencies": {
     "@types/cookie-session": "^2.0.48",
+    "@types/express": "^5.0.3",
+    "@types/jest": "^30.0.0",
     "@types/lru-cache": "^5.1.0",
     "@types/node-fetch": "^2.5.7",
     "@typescript-eslint/eslint-plugin": "^7.1.0",

packages/skin-database/tasks/screenshotSkin.ts

@@ -28,7 +28,7 @@ export async function screenshot(skin: SkinModel, shooter: typeof Shooter) {
   const tempFile = temp.path({ suffix: ".wsz" });
   const tempScreenshotPath = temp.path({ suffix: ".png" });
 
-  fs.writeFileSync(tempFile, buffer);
+  fs.writeFileSync(tempFile, new Uint8Array(buffer));
 
   const success = await shooter.takeScreenshot(tempFile, tempScreenshotPath, {
     minify: true,

packages/skin-database/tasks/syncToArchive.ts

@@ -138,7 +138,7 @@ async function downloadToTemp(url: string, filename: string): Promise<string> {
   const result = await response.buffer();
   const tempDir = temp.mkdirSync();
   const tempFile = path.join(tempDir, filename);
-  fs.writeFileSync(tempFile, result);
+  fs.writeFileSync(tempFile, new Uint8Array(result));
   return tempFile;
 }
 

packages/skin-database/tasks/tweet.ts

@@ -109,7 +109,7 @@ async function sendTweet(skin: SkinModel): Promise<string> {
   const screenshotBuffer = await getResizedScreenshot(skin.getMd5());
   const filename = await skin.getFileName();
   const tempFile = temp.path({ suffix: ".png" });
-  fs.writeFileSync(tempFile, screenshotBuffer);
+  fs.writeFileSync(tempFile, new Uint8Array(screenshotBuffer));
   const t = getTwitterClient();
 
   const promise: Promise<{ media_id_string: string }> = new Promise(

packages/skin-database/utils.ts

@@ -73,7 +73,7 @@ export async function withBufferAsTempFile<T>(
 ): Promise<T> {
   const tempDir = temp.mkdirSync();
   const tempFile = path.join(tempDir, filename);
-  fs.writeFileSync(tempFile, buffer);
+  fs.writeFileSync(tempFile, new Uint8Array(buffer));
   const r = await cb(tempFile);
   fs.unlinkSync(tempFile);
   fs.rmdirSync(tempDir);

packages/webamp-docs/package.json

@@ -22,8 +22,7 @@
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "webamp": "workspace:*"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.8.1",