Load hunspell.wasm from the CDN (#20856)

GitOrigin-RevId: 0fcbc2102e280222ab4b9279f02c820a3b904496

services/web/frontend/js/features/source-editor/hunspell/HunspellManager.ts

@@ -30,6 +30,7 @@ type Message =
     }
 
 export class HunspellManager {
+  baseAssetPath: string
   dictionariesRoot: string
   hunspellWorker!: Worker
   abortController: AbortController | undefined
@@ -42,16 +43,13 @@ export class HunspellManager {
     private readonly language: string,
     private readonly learnedWords: string[]
   ) {
-    const baseAssetPath = new URL(
+    this.baseAssetPath = new URL(
       getMeta('ol-baseAssetPath'),
       window.location.href
-    )
-
-    this.dictionariesRoot = new URL(
-      getMeta('ol-dictionariesRoot'),
-      baseAssetPath
     ).toString()
 
+    this.dictionariesRoot = getMeta('ol-dictionariesRoot')
+
     createWorker(() => {
       this.hunspellWorker = new Worker(
         new URL('./hunspell.worker.ts', import.meta.url),
@@ -97,6 +95,7 @@ export class HunspellManager {
         type: 'init',
         lang: this.language,
         learnedWords: this.learnedWords, // TODO: add words
+        baseAssetPath: this.baseAssetPath,
         dictionariesRoot: this.dictionariesRoot,
       })
       for (const message of this.pendingMessages) {

services/web/frontend/js/features/source-editor/hunspell/hunspell.worker.ts

@@ -1,4 +1,5 @@
 import Hunspell from './wasm/hunspell'
+import hunspellWasmPath from './wasm/hunspell.wasm'
 
 type SpellChecker = {
   spell(words: string[]): { index: number }[]
@@ -11,13 +12,23 @@ type SpellChecker = {
 const createSpellChecker = async ({
   lang,
   learnedWords,
+  baseAssetPath,
   dictionariesRoot,
 }: {
   lang: string
   learnedWords: string[]
+  baseAssetPath: string
   dictionariesRoot: string
 }) => {
-  const hunspell = await Hunspell()
+  const fileLocations: Record<string, string> = {
+    'hunspell.wasm': new URL(hunspellWasmPath, baseAssetPath).toString(),
+  }
+
+  const hunspell = await Hunspell({
+    locateFile(file: string) {
+      return fileLocations[file]
+    },
+  })
 
   const {
     cwrap,
@@ -51,11 +62,13 @@ const createSpellChecker = async ({
 
   FS.mkdir('/dictionaries')
 
+  const dictionariesRootURL = new URL(dictionariesRoot, baseAssetPath)
+
   const [dic, aff] = await Promise.all([
-    fetch(new URL(`./${lang}.dic`, dictionariesRoot)).then(response =>
+    fetch(new URL(`./${lang}.dic`, dictionariesRootURL)).then(response =>
       response.blob()
     ),
-    fetch(new URL(`./${lang}.aff`, dictionariesRoot)).then(response =>
+    fetch(new URL(`./${lang}.aff`, dictionariesRootURL)).then(response =>
       response.blob()
     ),
   ])

services/web/types/assets.d.ts

@@ -1,2 +1,14 @@
-declare module '*.svg'
-declare module '*.png'
+declare module '*.svg' {
+  const src: string
+  export default src
+}
+
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
+declare module '*.wasm' {
+  const src: string
+  export default src
+}