Release v1.0.10

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Unreleased
+
+- Update `jxl-oxide-wasm` to v0.10.2
+
 ## v1.0.9 (2024-11-11)
 
 - Update `jxl-oxide-wasm` to v0.10.0

esbuild.mjs

@@ -14,12 +14,14 @@ const esbuildProblemMatcherPlugin = {
 			console.log('[watch] build started');
 		});
 		build.onEnd(result => {
-			result.errors.forEach(({ text, location }) => {
+			for (const { text, location } of result.errors) {
 				console.error(`✘ [ERROR] ${text}`);
-				console.error(
-					`    ${location.file}:${location.line}:${location.column}:`,
-				);
-			});
+				if (location) {
+					console.error(
+						`    ${location.file}:${location.line}:${location.column}:`,
+					);
+				}
+			}
 			console.log('[watch] build finished');
 		});
 	},
@@ -40,12 +42,7 @@ async function main() {
 		loader: {
 			'.wasm': 'binary',
 		},
-		plugins: [
-			// wasmPlugin,
-			// wasmLoader({ mode: 'embedded' }),
-			/* add to the end of plugins array */
-			esbuildProblemMatcherPlugin,
-		],
+		plugins: [esbuildProblemMatcherPlugin],
 	});
 	if (watch) {
 		await ctx.watch();

eslint.config.mjs

@@ -1,25 +1,31 @@
 // @ts-check
 
+import eslint from '@eslint/js';
 import tseslint from 'typescript-eslint';
-import typescriptEslint from '@typescript-eslint/eslint-plugin';
 import tsParser from '@typescript-eslint/parser';
 
 export default tseslint.config(
+	eslint.configs.recommended,
+	...tseslint.configs.strictTypeChecked,
 	{
-		ignores: ['dist'],
+		ignores: [
+			'dist',
+			'.vscode-test.mjs',
+			'esbuild.mjs',
+			'eslint.config.mjs',
+			'media',
+		],
 	},
 	{
-		files: ['**/*.ts'],
+		files: ['./src/**/*.{js,mjs,ts}'],
 	},
 	{
-		plugins: {
-			'@typescript-eslint': typescriptEslint,
-		},
-
 		languageOptions: {
 			parser: tsParser,
-			ecmaVersion: 2022,
-			sourceType: 'module',
+			parserOptions: {
+				projectService: true,
+				tsconfigRootDir: import.meta.dirname,
+			},
 		},
 
 		rules: {
@@ -30,11 +36,13 @@ export default tseslint.config(
 					format: ['camelCase', 'PascalCase'],
 				},
 			],
-
-			curly: 'warn',
-			eqeqeq: 'warn',
-			'no-throw-literal': 'warn',
-			semi: 'warn',
+			'@typescript-eslint/promise-function-async': 'error',
+			'@typescript-eslint/no-unused-vars': [
+				'error',
+				{
+					argsIgnorePattern: '^_',
+				},
+			],
 		},
 	},
 );

media/jxl.js

@@ -2,7 +2,7 @@
 
 // This script is run within the webview itself
 (function () {
-	// @ts-ignore
+	// @ts-expect-error
 	const vscode = acquireVsCodeApi();
 
 	function log(/** @type string */ message) {

package.json

@@ -2,11 +2,11 @@
 	"name": "jpeg-xl",
 	"displayName": "JPEG XL",
 	"description": "JPEG XL support in VS Code",
-	"version": "1.0.9",
+	"version": "1.0.10",
 	"publisher": "printfn",
 	"icon": "images/icon.png",
 	"engines": {
-		"vscode": "^1.92.0"
+		"vscode": "^1.96.0"
 	},
 	"categories": [
 		"Visualization",
@@ -58,7 +58,7 @@
 	},
 	"devDependencies": {
 		"@types/mocha": "^10.0.10",
-		"@types/node": "22.x",
+		"@types/node": "^22.10.2",
 		"@types/vscode": "^1.96.0",
 		"@typescript-eslint/eslint-plugin": "^8.18.0",
 		"@typescript-eslint/parser": "^8.18.0",

src/decoder.ts

@@ -1,7 +1,9 @@
-// @ts-expect-error
 import init, { JxlImage } from 'jxl-oxide-wasm';
-// @ts-expect-error
+
+// @ts-expect-error wasm files are imported as Uint8Arrays
 import module from 'jxl-oxide-wasm/module.wasm';
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const wasmInput: Uint8Array = module;
 
 export type DecodedImage = {
 	png?: Uint8Array;
@@ -19,7 +21,7 @@ export async function decode(data: Uint8Array): Promise<DecodedImage> {
 		};
 	}
 	try {
-		await init(module);
+		await init(wasmInput);
 		const image = new JxlImage();
 		image.feedBytes(data);
 		if (!image.tryInit()) {
@@ -38,6 +40,7 @@ export async function decode(data: Uint8Array): Promise<DecodedImage> {
 		return { png, resolutionX, resolutionY };
 	} catch (e) {
 		return {
+			// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
 			error: e instanceof Error ? e.message : `${e}`,
 			resolutionX: 0,
 			resolutionY: 0,

src/dispose.ts

@@ -14,7 +14,7 @@ export abstract class Disposable {
 
 	protected _disposables: vscode.Disposable[] = [];
 
-	public dispose(): any {
+	public dispose() {
 		if (this._isDisposed) {
 			return;
 		}

src/jpeg-xl-preview.ts

@@ -1,8 +1,15 @@
 import * as vscode from 'vscode';
-import { Disposable, disposeAll } from './dispose.js';
+import { Disposable } from './dispose.js';
 import { formatFileSize, getNonce } from './util.js';
 import { decode, type DecodedImage } from './decoder.js';
 
+type Message =
+	| {
+			type: 'ready';
+	  }
+	| { type: 'log'; body: string }
+	| { type: 'update'; body: { content: DecodedImage } };
+
 /**
  * Define the document (the data model) used for JPEG XL files.
  */
@@ -34,7 +41,9 @@ class JXLDocument extends Disposable implements vscode.CustomDocument {
 		if (!this._decoded.png) {
 			return '';
 		}
-		return `${this._decoded.resolutionX}x${this._decoded.resolutionY}`;
+		const x = this._decoded.resolutionX.toString();
+		const y = this._decoded.resolutionY.toString();
+		return `${x}x${y}`;
 	}
 
 	private constructor(
@@ -107,33 +116,40 @@ export class JXLEditorProvider
 		return document;
 	}
 
-	async resolveCustomEditor(
+	resolveCustomEditor(
 		document: JXLDocument,
 		webviewPanel: vscode.WebviewPanel,
 		_token: vscode.CancellationToken,
-	): Promise<void> {
+	) {
 		// Setup initial content for the webview
 		webviewPanel.webview.options = {
 			enableScripts: true,
 			enableForms: false,
 		};
 		webviewPanel.webview.html = this.getHtmlForWebview(webviewPanel.webview);
 
-		webviewPanel.webview.onDidReceiveMessage(e => this.onMessage(document, e));
+		webviewPanel.webview.onDidReceiveMessage((e: Message) => {
+			this.onMessage(document, e);
+		});
 
 		// Wait for the webview to be properly ready before we init
-		webviewPanel.webview.onDidReceiveMessage(async e => {
+		webviewPanel.webview.onDidReceiveMessage((e: Message) => {
 			if (e.type === 'ready') {
-				this.postMessage(webviewPanel, 'update', {
-					content: document.decodedImage,
+				this.postMessage(webviewPanel, {
+					type: 'update',
+					body: {
+						content: document.decodedImage,
+					},
 				});
 			}
 		});
 
-		webviewPanel.onDidChangeViewState(e =>
-			this.updateStatusBarItems(e.webviewPanel.active, document),
-		);
-		webviewPanel.onDidDispose(() => this.updateStatusBarItems(false, document));
+		webviewPanel.onDidChangeViewState(e => {
+			this.updateStatusBarItems(e.webviewPanel.active, document);
+		});
+		webviewPanel.onDidDispose(() => {
+			this.updateStatusBarItems(false, document);
+		});
 		this.updateStatusBarItems(webviewPanel.active, document);
 	}
 
@@ -179,21 +195,29 @@ export class JXLEditorProvider
 	 */
 	private getHtmlForWebview(webview: vscode.Webview): string {
 		// Local path to script and css for the webview
-		const scriptUri = webview.asWebviewUri(
-			vscode.Uri.joinPath(this.context.extensionUri, 'media', 'jxl.js'),
-		);
-
-		const styleResetUri = webview.asWebviewUri(
-			vscode.Uri.joinPath(this.context.extensionUri, 'media', 'reset.css'),
-		);
-
-		const styleVSCodeUri = webview.asWebviewUri(
-			vscode.Uri.joinPath(this.context.extensionUri, 'media', 'vscode.css'),
-		);
-
-		const styleMainUri = webview.asWebviewUri(
-			vscode.Uri.joinPath(this.context.extensionUri, 'media', 'jxl.css'),
-		);
+		const scriptUri = webview
+			.asWebviewUri(
+				vscode.Uri.joinPath(this.context.extensionUri, 'media', 'jxl.js'),
+			)
+			.toString();
+
+		const styleResetUri = webview
+			.asWebviewUri(
+				vscode.Uri.joinPath(this.context.extensionUri, 'media', 'reset.css'),
+			)
+			.toString();
+
+		const styleVSCodeUri = webview
+			.asWebviewUri(
+				vscode.Uri.joinPath(this.context.extensionUri, 'media', 'vscode.css'),
+			)
+			.toString();
+
+		const styleMainUri = webview
+			.asWebviewUri(
+				vscode.Uri.joinPath(this.context.extensionUri, 'media', 'jxl.css'),
+			)
+			.toString();
 
 		// Use a nonce to whitelist which scripts can be run
 		const nonce = getNonce();
@@ -221,15 +245,11 @@ export class JXLEditorProvider
 			</html>`;
 	}
 
-	private postMessage(
-		panel: vscode.WebviewPanel,
-		type: string,
-		body: any,
-	): void {
-		panel.webview.postMessage({ type, body });
+	private postMessage(panel: vscode.WebviewPanel, message: Message): void {
+		panel.webview.postMessage(message);
 	}
 
-	private onMessage(document: JXLDocument, message: any) {
+	private onMessage(document: JXLDocument, message: Message) {
 		switch (message.type) {
 			case 'log':
 				console.log(message.body);

src/util.ts

@@ -1,11 +1,5 @@
 export function getNonce() {
-	let text = '';
-	const possible =
-		'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-	for (let i = 0; i < 32; i++) {
-		text += possible.charAt(Math.floor(Math.random() * possible.length));
-	}
-	return text;
+	return crypto.randomUUID().replaceAll('-', '');
 }
 
 export function formatFileSize(bytes: number) {

tsconfig.json

@@ -1,16 +1,15 @@
 {
 	"compilerOptions": {
-		"module": "Node16",
+		"module": "Preserve",
 		"target": "ES2022",
 		"lib": ["ES2022"],
+		"moduleResolution": "bundler",
 		"sourceMap": true,
 		"rootDir": "src",
 		"skipLibCheck": true,
 		"noEmit": true,
-		"strict": true /* enable all strict type-checking options */
-		/* Additional Checks */
-		// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
-		// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
-		// "noUnusedParameters": true,  /* Report errors on unused parameters. */
-	}
+		"strict": true,
+		"checkJs": true
+	},
+	"include": ["src"]
 }