Update dev dependencies and adapt to splat-transform 2.0 API

.github/workflows/ci.yml

@@ -22,7 +22,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
 
     steps:
     - name: Checkout code
@@ -48,7 +48,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [22.x]
 
     steps:
     - name: Checkout code

global.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="@webgpu/types" />
+/// <reference types="wicg-file-system-access" />
 
 interface FileSystemFileHandle {
     remove(): Promise<void>;

package.json

@@ -21,16 +21,19 @@
         "develop:auto-launch": "concurrently --kill-others \"xdg-open 'http://localhost:3000/'\" \"npm run watch\" \"npm run serve\"",
         "lint": "eslint src"
     },
+    "engines": {
+        "node": ">=20.19.0"
+    },
     "devDependencies": {
         "@playcanvas/eslint-config": "2.1.0",
-        "@playcanvas/splat-transform": "1.10.2",
-        "@playcanvas/pcui": "5.8.0",
+        "@playcanvas/splat-transform": "2.0.1",
+        "@playcanvas/pcui": "6.1.3",
         "@rollup/plugin-alias": "6.0.0",
         "@rollup/plugin-image": "3.0.3",
         "@rollup/plugin-json": "6.1.0",
         "@rollup/plugin-node-resolve": "16.0.3",
         "@rollup/plugin-strip": "3.0.4",
-        "@rollup/plugin-terser": "0.4.4",
+        "@rollup/plugin-terser": "1.0.0",
         "@rollup/plugin-typescript": "12.3.0",
         "@types/wicg-file-system-access": "2023.10.7",
         "@typescript-eslint/eslint-plugin": "8.59.0",
@@ -39,20 +42,20 @@
         "concurrently": "9.2.1",
         "cors": "2.8.6",
         "cross-env": "10.1.0",
-        "eslint": "9.39.4",
+        "eslint": "10.2.1",
         "eslint-import-resolver-typescript": "4.4.4",
         "globals": "17.5.0",
-        "i18next": "25.10.10",
+        "i18next": "26.0.8",
         "i18next-browser-languagedetector": "8.2.1",
         "i18next-http-backend": "3.0.6",
-        "mediabunny": "1.40.1",
+        "mediabunny": "1.41.0",
         "playcanvas": "2.18.0",
-        "postcss": "8.5.10",
+        "postcss": "8.5.12",
         "rollup": "4.60.2",
         "rollup-plugin-scss": "4.0.1",
         "sass": "1.99.0",
         "serve": "14.2.6",
         "tslib": "2.8.1",
-        "typescript": "5.9.3"
+        "typescript": "6.0.3"
     }
 }

src/index.ts

@@ -1,12 +1,13 @@
 import './ui/scss/style.scss';
 import { version as pcuiVersion, revision as pcuiRevision } from '@playcanvas/pcui';
+import { version as stVersion, revision as stRevision } from '@playcanvas/splat-transform';
 import { version as engineVersion, revision as engineRevision } from 'playcanvas';
 
 import { main } from './main';
 import { version as appVersion } from '../package.json';
 
 // print out versions of dependent packages
 // NOTE: add dummy style reference to prevent tree shaking
-console.log(`SuperSplat v${appVersion} | PCUI v${pcuiVersion} (${pcuiRevision}) | Engine v${engineVersion} (${engineRevision})`);
+console.log(`SuperSplat v${appVersion} | SplatTransform v${stVersion} (${stRevision}) | Engine v${engineVersion} (${engineRevision}) | PCUI v${pcuiVersion} (${pcuiRevision})`);
 
 main();

src/io/write/browser-file-system.ts

@@ -18,6 +18,10 @@ class BrowserFileWriter implements Writer {
         this.ready = this.stream.seek(0);
     }
 
+    get bytesWritten(): number {
+        return this.cursor;
+    }
+
     async write(data: Uint8Array): Promise<void> {
         await this.ready;
         this.cursor += data.byteLength;
@@ -72,6 +76,10 @@ class BrowserDownloadWriter implements Writer {
         this.innerWriter = this.memFs.createWriter(filename);
     }
 
+    get bytesWritten(): number {
+        return this.innerWriter.bytesWritten;
+    }
+
     write(data: Uint8Array): void {
         this.innerWriter.write(data);
     }

src/io/write/writer.ts

@@ -11,6 +11,12 @@ class GZipWriter implements Writer {
     write: (data: Uint8Array) => Promise<void>;
     close: () => Promise<void>;
 
+    private cursor = 0;
+
+    get bytesWritten(): number {
+        return this.cursor;
+    }
+
     constructor(writer: Writer) {
         const stream = new CompressionStream('gzip');
         const streamWriter = stream.writable.getWriter();
@@ -26,6 +32,7 @@ class GZipWriter implements Writer {
         })();
 
         this.write = async (data: Uint8Array) => {
+            this.cursor += data.byteLength;
             await streamWriter.ready;
             await streamWriter.write(data as unknown as ArrayBuffer);
         };
@@ -47,20 +54,24 @@ class ProgressWriter implements Writer {
     write: (data: Uint8Array) => Promise<void>;
     close: () => void;
 
-    constructor(writer: Writer, totalBytes: number, progress?: (progress: number, total: number) => void) {
-        let cursor = 0;
+    private cursor = 0;
 
+    get bytesWritten(): number {
+        return this.cursor;
+    }
+
+    constructor(writer: Writer, totalBytes: number, progress?: (progress: number, total: number) => void) {
         this.write = async (data: Uint8Array) => {
-            cursor += data.byteLength;
+            this.cursor += data.byteLength;
             await writer.write(data);
-            progress?.(cursor, totalBytes);
+            progress?.(this.cursor, totalBytes);
         };
 
         this.close = () => {
-            if (cursor !== totalBytes) {
-                throw new Error(`ProgressWriter: expected ${totalBytes} bytes, but wrote ${cursor} bytes`);
+            if (this.cursor !== totalBytes) {
+                throw new Error(`ProgressWriter: expected ${totalBytes} bytes, but wrote ${this.cursor} bytes`);
             }
-            progress?.(cursor, totalBytes);
+            progress?.(this.cursor, totalBytes);
         };
     }
 }

src/picker.ts

@@ -98,8 +98,8 @@ class Picker {
         const { splatLayer } = this.scene;
 
         // Hide non-selected elements
-        const splats = this.scene.getElementsByType(ElementType.splat);
-        splats.forEach((s: Splat) => {
+        const splats = this.scene.getElementsByType(ElementType.splat) as Splat[];
+        splats.forEach((s) => {
             s.entity.enabled = s === splat;
         });
 
@@ -116,7 +116,7 @@ class Picker {
         this.renderPass.render();
 
         // Re-enable all splats
-        splats.forEach((s: Splat) => {
+        splats.forEach((s) => {
             s.entity.enabled = true;
         });
     }
@@ -181,8 +181,8 @@ class Picker {
         const emptyMap = new Map();
 
         // Hide non-selected elements
-        const splats = scene.getElementsByType(ElementType.splat);
-        splats.forEach((s: Splat) => {
+        const splats = scene.getElementsByType(ElementType.splat) as Splat[];
+        splats.forEach((s) => {
             s.entity.enabled = s === splat;
         });
 
@@ -198,7 +198,7 @@ class Picker {
         this.renderPass.render();
 
         // Re-enable all splats
-        splats.forEach((s: Splat) => {
+        splats.forEach((s) => {
             s.entity.enabled = true;
         });
     }

src/publish.ts

@@ -21,8 +21,12 @@ class WriterFileSystem implements FileSystem {
     createWriter(_filename: string): Writer {
         // Return a wrapper that delegates write but makes close a no-op
         // The caller is responsible for closing the underlying writer
+        const inner = this.writer;
         return {
-            write: (data: Uint8Array) => this.writer.write(data),
+            get bytesWritten() {
+                return inner.bytesWritten;
+            },
+            write: (data: Uint8Array) => inner.write(data),
             close: () => Promise.resolve()
         };
     }
@@ -124,6 +128,12 @@ class PublishWriter implements Writer {
     write: (data: Uint8Array) => void;
     close: () => Promise<any>;
 
+    private cursor = 0;
+
+    get bytesWritten(): number {
+        return this.cursor;
+    }
+
     static async create(publishSettings: PublishSettings) {
         const { user } = publishSettings;
 
@@ -210,6 +220,7 @@ class PublishWriter implements Writer {
                     await upload();
                 }
             }
+            result.cursor += data.byteLength;
         };
 
         result.close = async () => {