fix(loader-utils): ReadableFile implementation to match the interface (#3157)

Author: dariaterekhova-actionengine

examples/experimental/slpk-in-browser/src/app.tsx

@@ -11,9 +11,8 @@ import {MapController, FlyToInterpolator, MapViewState} from '@deck.gl/core/type
 import {COORDINATE_SYSTEM, I3SLoader, parseSLPKArchive} from '@loaders.gl/i3s';
 import {Tileset3D} from '@loaders.gl/tiles';
 import {ControlPanel} from './components/control-panel';
-import {BrowserFile} from './browser-file';
 import {ZipFileSystem} from '@loaders.gl/zip';
-import {LoaderWithParser} from '@loaders.gl/loader-utils';
+import {BlobFile, FileProvider, LoaderWithParser} from '@loaders.gl/loader-utils';
 import CustomTile3DLayer from './custom-tile-3d-layer';
 
 export const TRANSITION_DURAITON = 4000;
@@ -49,7 +48,7 @@ export default function App() {
     }
 
     const createFileSystem = async (file: File) => {
-      const fileProvider = new BrowserFile(file);
+      const fileProvider = await FileProvider.create(new BlobFile(file));
       const archive = await parseSLPKArchive(fileProvider, undefined, file.name);
       const fileSystem = new ZipFileSystem(archive);
       setFileSystem(fileSystem);

examples/experimental/slpk-in-browser/src/browser-file.ts

@@ -14,7 +14,7 @@ const getAliases = async (frameworkName, frameworkRootDir) => {
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({
-  resolve: {alias: await getAliases('@loaders.gl', `${__dirname}/../../..`)},
+  resolve: {alias: await getAliases('@loaders.gl', `${__dirname}/../..`)},
   server: {open: true}
 }))
 

examples/experimental/slpk-in-browser/vite.config.ts

@@ -30,8 +30,10 @@ export class BlobFile implements ReadableFile {
     };
   }
 
-  async read(start: number, length: number): Promise<ArrayBuffer> {
-    const arrayBuffer = await this.handle.slice(start, start + length).arrayBuffer();
+  async read(start?: number | bigint, length?: number): Promise<ArrayBuffer> {
+    const arrayBuffer = await this.handle
+      .slice(Number(start), Number(start) + Number(length))
+      .arrayBuffer();
     return arrayBuffer;
   }
 }

modules/loader-utils/src/lib/files/blob-file.ts

@@ -30,7 +30,7 @@ export class HttpFile implements ReadableFile {
     };
   }
 
-  async read(offset: number | bigint, length: number): Promise<ArrayBuffer> {
+  async read(offset: number | bigint = 0, length: number = 0): Promise<ArrayBuffer> {
     const response = await this.fetchRange(offset, length);
     const arrayBuffer = await response.arrayBuffer();
     return arrayBuffer;

modules/loader-utils/src/lib/files/http-file.ts

@@ -25,7 +25,7 @@ export class NodeFileFacade implements ReadableFile, WritableFile {
     throw new Error('Can\'t instantiate NodeFile. Make sure to import @loaders.gl/polyfills first.');
   }
   /** Read data */
-  async read(start?: number | bigint, end?: number | bigint): Promise<ArrayBuffer> {
+  async read(start?: number | bigint, length?: number): Promise<ArrayBuffer> {
     throw NOT_IMPLEMENTED;
   }
   /** Write to file. The number of bytes written will be returned */