fix: type issue

Author: nekomeowww

packages/vitepress-plugin-thumbnail-hash/src/vite/index.ts

@@ -1,3 +1,4 @@
+import type { EmulatedCanvas2DContext } from 'canvaskit-wasm'
 import type { Plugin } from 'vite'
 import type { SiteConfig } from 'vitepress'
 
@@ -14,7 +15,7 @@ import { rgbaToThumbHash, thumbHashToDataURL } from 'thumbhash'
 import { glob } from 'tinyglobby'
 import { normalizePath } from 'vite'
 
-import { binaryToBase64, hash, normalizeBase64 } from './utils'
+import { binaryToBase64, hash, normalizeBase64, toArrayBuffer } from './utils'
 
 interface VitePressConfig {
   vitepress: SiteConfig
@@ -49,7 +50,7 @@ async function calculateThumbHashForFile(imageData: Uint8Array): Promise<ThumbHa
 
   // Paint the image to the canvas.
   const canvas = canvasKit.MakeCanvas(resizedWidth, resizedHeight)
-  const context = canvas.getContext('2d')!
+  const context = canvas.getContext('2d')! as EmulatedCanvas2DContext
   context.drawImage(image as unknown as CanvasImageSource, 0, 0, resizedWidth, resizedHeight)
   // Retrieve back the image data for thumbhash calculation as the
   // form of RGBA matrix.
@@ -200,7 +201,7 @@ export function ThumbnailHashImages(): Plugin {
 
         // The hash implementation is mirrored and simulated from the rollup.
         // But it's never guaranteed to be the same as the rollup's hash.
-        const imageFullHash = await hash(readImageRawData, -1)
+        const imageFullHash = await hash(toArrayBuffer(readImageRawData), -1)
         const imageFileHash = normalizeBase64(imageFullHash.substring(0, 10))
 
         // Calculate the thumbhash data for the image as thumbhash demonstrates.

packages/vitepress-plugin-thumbnail-hash/src/vite/utils.ts

@@ -1,7 +1,19 @@
-// thumbhash/examples/browser/index.html at main · evanw/thumbhash
+import type { Buffer } from 'node:buffer'
 
 import { subtle } from 'uncrypto'
 
+/**
+ * @see https://stackoverflow.com/a/12101012
+ */
+export function toArrayBuffer(buffer: Buffer) {
+  const arrayBuffer = new ArrayBuffer(buffer.length)
+  const view = new Uint8Array(arrayBuffer)
+  for (let i = 0; i < buffer.length; ++i) {
+    view[i] = buffer[i]
+  }
+  return arrayBuffer
+}
+
 // https://github.com/evanw/thumbhash/blob/main/examples/browser/index.html
 export function binaryToBase64(binary: Uint8Array) {
   return btoa(String.fromCharCode(...binary))
@@ -11,10 +23,10 @@ export function binaryToBase64(binary: Uint8Array) {
  * Hashes the given data using SHA-256 algorithm.
  *
  * Official example by MDN: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest
- * @param {Uint8Array} data - The data to be hashed
+ * @param {BufferSource} data - The data to be hashed
  * @returns {Promise<string>} - The SHA-256 hash of the message
  */
-async function digestUint8ArrayDataSha256(data: Uint8Array) {
+async function digestUint8ArrayDataSha256(data: BufferSource) {
   const hashBuffer = await subtle.digest('SHA-256', data) // hash the message
   return Array.from(new Uint8Array(hashBuffer)) // convert buffer to byte array
 }
@@ -30,11 +42,11 @@ async function digestUint8ArrayDataSha256(data: Uint8Array) {
  * https://github.com/rollup/rollup/blob/1b85663fde96d84fceaa2360dba246d3cb92789b/src/utils/FileEmitter.ts#L259
  * https://github.com/rollup/rollup/blob/1b85663fde96d84fceaa2360dba246d3cb92789b/src/utils/crypto.ts#L12
  *
- * @param {Uint8Array} data - The data to be hashed
+ * @param {BufferSource} data - The data to be hashed
  * @param {number} length - The length of the hash
  * @returns {Promise<string>} - The first 10 characters of the SHA-256 hash of the message
  */
-export async function hash(data: Uint8Array, length = 10) {
+export async function hash(data: BufferSource, length = 10) {
   const hashResult = await digestUint8ArrayDataSha256(data)
   const hashBase64 = binaryToBase64(new Uint8Array(hashResult)) // convert bytes to base64 encoded string
   if (length > 0)