feat: allow passing an alternative client URL function

Author: me4502

README.md

@@ -19,7 +19,7 @@ renderSchematic(document.querySelector('#schematicRenderer'), SCHEMATIC_FILE, {
     size: 500,
     renderArrow: false,
     renderBars: false,
-    corsBypassUrl: 'https://url-to-cors-anywhere/'
+    corsBypassUrl: 'https://url-to-cors-anywhere/',
 });
 ```
 
@@ -33,14 +33,50 @@ The final argument is an options object that allows configuring various settings
 
 ```typescript
 interface SchematicRenderOptions {
-    size?: number; // Force the size of the canvas viewport, if not present use canvas size
-    corsBypassUrl: string; // A url of a cors-anywhere instance to allow access to MC server jars
-    resourcePacks?: string[]; // A list of resource pack URLs in priority order
-    renderBars?: boolean; // Whether a grid should be rendered
-    renderArrow?: boolean; // Whether an arrow to show direction should be rendered
-    orbit?: boolean; // Whether the view should automatically rotate when not being dragged by the user
-    antialias?: boolean; // Whether antialiasing should be enabled
-    backgroundColor?: number | 'transparent'; // Background color of the canvas (default: 0xffffff)
+    /**
+     * Usage as number is deprecated and will be removed
+     */
+    size?: number | { width: number; height: number };
+    /**
+     * A url of a cors-anywhere instance to allow access to MC server jars. Required by the default `getClientJarUrl` function
+     */
+    corsBypassUrl?: string;
+    /**
+     * A function that returns the url of the client jar to use. Defaults to using the EngineHub Cassette Deck service
+     */
+    getClientJarUrl?: (props: GetClientJarUrlProps) => Promise<string>;
+    /**
+     * A list of resource pack URLs in priority order
+     */
+    resourcePacks?: string[];
+    /**
+     * Whether a grid should be rendered
+     */
+    renderBars?: boolean;
+    /**
+     * Whether an arrow to show direction should be rendered
+     */
+    renderArrow?: boolean;
+    /**
+     * Whether the view should automatically rotate when not being dragged by the user
+     */
+    orbit?: boolean;
+    /**
+     * Whether antialiasing should be enabled
+     */
+    antialias?: boolean;
+    /**
+     * Background color of the canvas (default: 0xffffff), or if it should be transparent
+     */
+    backgroundColor?: number | 'transparent';
+    /**
+     * Whether to enable further debug information
+     */
+    debug?: boolean;
+    /**
+     * Only update the view when {@link SchematicHandles#render} is called. This is useful if you want to control the rendering yourself
+     */
+    disableAutoRender?: boolean;
 }
 ```
 

package.json

@@ -28,7 +28,7 @@
     "homepage": "https://github.com/EngineHub/SchematicWebViewer#readme",
     "dependencies": {
         "@enginehub/schematicjs": "^0.8.0",
-        "babylonjs": "5.22.1",
+        "babylonjs": "5.32.1",
         "buffer": "^6.0.3",
         "deepmerge": "^4.2.2",
         "gzip-js": "^0.3.2",
@@ -37,15 +37,15 @@
     },
     "devDependencies": {
         "@types/gzip-js": "^0.3.3",
-        "@typescript-eslint/eslint-plugin": "^5.36.1",
-        "@typescript-eslint/parser": "^5.36.1",
-        "eslint": "^8.23.0",
+        "@typescript-eslint/eslint-plugin": "^5.42.1",
+        "@typescript-eslint/parser": "^5.42.1",
+        "eslint": "^8.27.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-prettier": "^4.2.1",
-        "parcel": "^2.7.0",
+        "parcel": "^2.8.0",
         "prettier": "^2.6.2",
         "prettier-eslint": "^15.0.1",
-        "typescript": "^4.8.2"
+        "typescript": "^4.8.4"
     },
     "peerDependencies": {
         "@enginehub/schematicjs": "^0.7.0"

src/renderer/renderer.ts

@@ -1,7 +1,7 @@
 import type { Block } from '@enginehub/schematicjs';
 import { loadSchematic } from '@enginehub/schematicjs';
 import type { SchematicHandles } from '.';
-import type { SchematicRenderOptions } from './types';
+import type { GetClientJarUrlProps, SchematicRenderOptions } from './types';
 import { getModelLoader } from './model/loader';
 import { getResourceLoader } from '../resource/resourceLoader';
 import type { BlockModelData } from './model/types';
@@ -29,11 +29,27 @@ const CASSETTE_DECK_URL = `https://services.enginehub.org/cassette-deck/minecraf
 const URL_1_13 =
     'https://launcher.mojang.com/v1/objects/c0b970952cdd279912da384cdbfc0c26e6c6090b/client.jar';
 
+async function getClientJarUrlDefault({
+    dataVersion,
+    corsBypassUrl,
+}: GetClientJarUrlProps): Promise<string> {
+    const versionManifestFile = dataVersion
+        ? await (
+              await fetch(`${corsBypassUrl}${CASSETTE_DECK_URL}${dataVersion}`)
+          ).json()
+        : undefined;
+
+    return `${corsBypassUrl}${
+        versionManifestFile?.[0]?.clientJarUrl ?? URL_1_13
+    }`;
+}
+
 export async function renderSchematic(
     canvas: HTMLCanvasElement,
     schematic: string,
     {
         corsBypassUrl,
+        getClientJarUrl = getClientJarUrlDefault,
         resourcePacks,
         size,
         orbit = true,
@@ -111,16 +127,11 @@ export async function renderSchematic(
     const cameraOffset = Math.max(worldWidth, worldLength, worldHeight) / 2 + 1;
     camera.radius = cameraOffset * 3;
 
-    const versionManifestFile = loadedSchematic.dataVersion
-        ? await (
-              await fetch(
-                  `${corsBypassUrl}${CASSETTE_DECK_URL}${loadedSchematic.dataVersion}`
-              )
-          ).json()
-        : undefined;
-
     const resourceLoader = await getResourceLoader([
-        `${corsBypassUrl}${versionManifestFile?.[0]?.clientJarUrl ?? URL_1_13}`,
+        await getClientJarUrl({
+            dataVersion: loadedSchematic.dataVersion,
+            corsBypassUrl,
+        }),
         ...(resourcePacks ?? []),
     ]);
     const modelLoader = getModelLoader(resourceLoader);

src/renderer/types.ts

@@ -30,18 +30,54 @@ export interface SchematicHandles {
     getEngine(): Engine;
 }
 
+export interface GetClientJarUrlProps {
+    dataVersion: number;
+    corsBypassUrl: string;
+}
+
 export interface SchematicRenderOptions {
     /**
-     * Usage as number is deprecated and will be removed.
+     * Usage as number is deprecated and will be removed
      */
     size?: number | { width: number; height: number };
-    corsBypassUrl: string;
+    /**
+     * A url of a cors-anywhere instance to allow access to MC server jars. Required by the default `getClientJarUrl` function
+     */
+    corsBypassUrl?: string;
+    /**
+     * A function that returns the url of the client jar to use. Defaults to using the EngineHub Cassette Deck service
+     */
+    getClientJarUrl?: (props: GetClientJarUrlProps) => Promise<string>;
+    /**
+     * A list of resource pack URLs in priority order
+     */
     resourcePacks?: string[];
+    /**
+     * Whether a grid should be rendered
+     */
     renderBars?: boolean;
+    /**
+     * Whether an arrow to show direction should be rendered
+     */
     renderArrow?: boolean;
+    /**
+     * Whether the view should automatically rotate when not being dragged by the user
+     */
     orbit?: boolean;
+    /**
+     * Whether antialiasing should be enabled
+     */
     antialias?: boolean;
+    /**
+     * Background color of the canvas (default: 0xffffff), or if it should be transparent
+     */
     backgroundColor?: number | 'transparent';
+    /**
+     * Whether to enable further debug information
+     */
     debug?: boolean;
+    /**
+     * Only update the view when {@link SchematicHandles#render} is called. This is useful if you want to control the rendering yourself
+     */
     disableAutoRender?: boolean;
 }