scrabble-solver 2.16.7 → 2.17.0

package/packages/scrabble-solver/src/components/Results/types.ts

@@ -1,15 +1,15 @@
 import { type Result } from '@scrabble-solver/types';
-import { type FocusEvent, type MouseEvent } from 'react';
+import { type FocusEvent, type MouseEvent, type MouseEventHandler } from 'react';
 
 export interface ResultCallbacks {
   onBlur?: (result: Result, event: FocusEvent) => void;
   onClick?: (result: Result, event: MouseEvent) => void;
   onFocus?: (result: Result, event: FocusEvent) => void;
   onMouseEnter?: (result: Result, event: MouseEvent) => void;
-  onMouseLeave?: (result: Result, event: MouseEvent) => void;
+  onMouseLeave?: MouseEventHandler;
 }
 
-export interface ResultData extends ResultCallbacks {
+export interface ResultData extends Omit<ResultCallbacks, 'onMouseLeave'> {
   highlightedIndex?: number;
   results: Result[] | undefined;
 }

package/packages/scrabble-solver/src/components/Solver/Solver.tsx

@@ -14,6 +14,7 @@ import {
   solveSlice,
   useTranslate,
   useTypedSelector,
+  useTypedStore,
 } from '@/state';
 
 import { Alert } from '../Alert';
@@ -38,13 +39,13 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
   const { maxControlsWidth, showCompactControls, tileSize } = useAppLayout();
   const error = useTypedSelector(selectSolveError);
   const isOutdated = useTypedSelector(selectAreResultsOutdated);
-  const resultCandidate = useTypedSelector(selectResultCandidate);
   const results = useTypedSelector(selectProcessedResults);
+  const store = useTypedStore();
   const [bestResult] = results || [];
   const touchCallbacks = useMemo(
     () => ({
       onClick: (result: Result) => {
-        const isSelected = result === resultCandidate;
+        const isSelected = result === selectResultCandidate(store.getState());
 
         if (isSelected) {
           dispatch(resultsSlice.actions.applyResult(result));
@@ -53,7 +54,7 @@ const SolverBase: FunctionComponent<Props> = ({ className, onShowResults }) => {
         }
       },
     }),
-    [dispatch, resultCandidate],
+    [dispatch, store],
   );
   const mouseCallbacks = useMemo(
     () => ({

package/packages/scrabble-solver/src/components/Tooltip/useTooltip.ts

@@ -37,7 +37,7 @@ export const useTooltip = ({ placement = 'top' }: TooltipOptions = {}) => {
   const { delay } = useDelayGroup(context);
   const hover = useHover(context, { move: false, delay });
   const focus = useFocus(context);
-  const dismiss = useDismiss(context);
+  const dismiss = useDismiss(context, { ancestorScroll: true });
   const role = useRole(context, { role: 'tooltip' });
   const interactions = useInteractions([hover, focus, dismiss, role]);
 

package/packages/scrabble-solver/src/pages/api/dictionary/[locale]/[word].ts

@@ -30,8 +30,8 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
       },
     });
 
-    const trie = await dictionaries.get(locale);
-    const results = await Promise.all(words.map((word) => getWordDefinition(locale, word, trie.has(word))));
+    const gaddag = await dictionaries.get(locale);
+    const results = await Promise.all(words.map((word) => getWordDefinition(locale, word, gaddag.has(word))));
     response.status(200).send(results.map((result) => result.toJson()));
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/packages/scrabble-solver/src/pages/api/dictionary/[locale]/index.ts

@@ -1,7 +1,10 @@
+import { type Gaddag } from '@kamilmielnik/gaddag';
 import { dictionaries } from '@scrabble-solver/dictionaries';
 import { logger } from '@scrabble-solver/logger';
 import { isLocale, type Locale } from '@scrabble-solver/types';
 import { type NextApiRequest, type NextApiResponse } from 'next';
+import { promisify } from 'util';
+import { gzip } from 'zlib';
 
 import { getServerLoggingData } from '@/api';
 
@@ -22,8 +25,21 @@ const dictionary = async (request: NextApiRequest, response: NextApiResponse): P
       },
     });
 
-    const trie = await dictionaries.get(locale);
-    response.status(200).send(trie.serialize());
+    const gaddag = await dictionaries.get(locale);
+    const isGzip = acceptsGzip(request);
+    const body = isGzip ? await getCompressedDictionary(gaddag) : getSerializedDictionary(gaddag);
+
+    // no-cache makes clients store the payload but revalidate it, so unchanged
+    // re-downloads become 304s, answered by Next's built-in ETag handling.
+    response.setHeader('Cache-Control', 'no-cache');
+    response.setHeader('Content-Type', 'application/octet-stream');
+    response.setHeader('Vary', 'Accept-Encoding');
+
+    if (isGzip) {
+      response.setHeader('Content-Encoding', 'gzip');
+    }
+
+    response.status(200).send(body);
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';
     logger.error('dictionary - error', { error, meta });
@@ -43,9 +59,70 @@ const parseRequest = (request: NextApiRequest): RequestData => {
   };
 };
 
+const acceptsGzip = (request: NextApiRequest): boolean => {
+  const acceptEncoding = request.headers['accept-encoding'];
+  const header = Array.isArray(acceptEncoding) ? acceptEncoding.join(',') : acceptEncoding;
+
+  if (typeof header !== 'string') {
+    return false;
+  }
+
+  let wildcardAccepts = false;
+
+  for (const entry of header.split(',')) {
+    const [encoding, ...parameters] = entry.split(';').map((token) => token.trim().toLowerCase());
+    const isRefused = parameters.some((parameter) => {
+      const [name, quality] = parameter.split('=').map((token) => token.trim());
+      return name === 'q' && parseFloat(quality) === 0;
+    });
+
+    if (encoding === 'gzip' || encoding === 'x-gzip') {
+      return !isRefused;
+    }
+
+    if (encoding === '*') {
+      wildcardAccepts = !isRefused;
+    }
+  }
+
+  return wildcardAccepts;
+};
+
+// Dictionaries rebuild at most daily, so each response variant is produced
+// once and lives exactly as long as the in-memory dictionary it was made from.
+const serializedCache = new WeakMap<Gaddag, Buffer>();
+const compressedCache = new WeakMap<Gaddag, Promise<Buffer>>();
+
+const getSerializedDictionary = (gaddag: Gaddag): Buffer => {
+  let serialized = serializedCache.get(gaddag);
+
+  if (!serialized) {
+    // serialize() returns freshly allocated bytes, so the Buffer wraps them without copying.
+    const bytes = gaddag.serialize();
+    serialized = Buffer.from(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+    serializedCache.set(gaddag, serialized);
+  }
+
+  return serialized;
+};
+
+const gzipAsync = promisify(gzip);
+
+const getCompressedDictionary = (gaddag: Gaddag): Promise<Buffer> => {
+  let compressed = compressedCache.get(gaddag);
+
+  if (!compressed) {
+    compressed = gzipAsync(gaddag.serialize());
+    compressedCache.set(gaddag, compressed);
+    compressed.catch(() => compressedCache.delete(gaddag));
+  }
+
+  return compressed;
+};
+
 export const config = {
   api: {
-    responseLimit: '25mb',
+    responseLimit: '50mb',
   },
 };
 

package/packages/scrabble-solver/src/pages/api/solve.ts

@@ -45,9 +45,9 @@ const solve = async (request: NextApiRequest, response: NextApiResponse): Promis
       },
     });
 
-    const trie = await dictionaries.get(locale);
+    const gaddag = await dictionaries.get(locale);
     const tiles = characters.map((character) => new Tile({ character, isBlank: character === BLANK }));
-    const results = solveScrabble(trie, config, board, tiles);
+    const results = solveScrabble(gaddag, config, board, tiles);
     response.status(200).send(results);
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/packages/scrabble-solver/src/pages/api/verify.ts

@@ -30,10 +30,19 @@ const verify = async (request: NextApiRequest, response: NextApiResponse): Promi
       },
     });
 
-    const trie = await dictionaries.get(locale);
+    const gaddag = await dictionaries.get(locale);
     const words = board.getWords().sort((a, b) => a.localeCompare(b, locale));
-    const invalidWords = words.filter((word) => !trie.has(word));
-    const validWords = words.filter((word) => trie.has(word));
+    const invalidWords: string[] = [];
+    const validWords: string[] = [];
+
+    for (const word of words) {
+      if (gaddag.has(word)) {
+        validWords.push(word);
+      } else {
+        invalidWords.push(word);
+      }
+    }
+
     response.status(200).send({ invalidWords, validWords });
   } catch (error) {
     const message = error instanceof Error ? error.message : 'Unknown error';

package/packages/scrabble-solver/src/sdk/solve.ts

@@ -1,19 +1,25 @@
-import { type BoardJson, type Locale, Result, type ResultJson } from '@scrabble-solver/types';
+import { Board, type BoardJson, type Game, type Locale, Result, type ResultJson } from '@scrabble-solver/types';
+
+import { solveLocally } from '@/solver-worker';
 
 import { fetchJson } from './fetchJson';
 
 interface Payload {
   board: BoardJson;
   characters: string[];
-  game: string;
+  game: Game;
   locale: Locale;
 }
 
 export const solve = async ({ board, characters, game, locale }: Payload): Promise<Result[]> => {
-  const json = await fetchJson<ResultJson[]>('/api/solve', {
-    method: 'POST',
-    body: JSON.stringify({ board, characters, game, locale }),
-  });
+  const payload = { board, characters, game, locale };
+  const json =
+    (await solveLocally(payload)) ??
+    (await fetchJson<ResultJson[]>('/api/solve', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    }));
 
-  return json.map(Result.fromJson);
+  const decodedBoard = Board.fromJson(board);
+  return json.map((result) => Result.fromJson(result, decodedBoard));
 };

package/packages/scrabble-solver/src/sdk/verify.ts

@@ -1,10 +1,12 @@
-import { type BoardJson, type Locale } from '@scrabble-solver/types';
+import { type BoardJson, type Game, type Locale } from '@scrabble-solver/types';
+
+import { verifyLocally } from '@/solver-worker';
 
 import { fetchJson } from './fetchJson';
 
 interface Payload {
   board: BoardJson;
-  game: string;
+  game: Game;
   locale: Locale;
 }
 
@@ -14,8 +16,12 @@ interface Response {
 }
 
 export const verify = async ({ board, game, locale }: Payload): Promise<Response> => {
-  return fetchJson<Response>('/api/verify', {
-    method: 'POST',
-    body: JSON.stringify({ board, game, locale }),
-  });
+  const payload = { board, game, locale };
+  return (
+    (await verifyLocally(payload)) ??
+    fetchJson<Response>('/api/verify', {
+      method: 'POST',
+      body: JSON.stringify(payload),
+    })
+  );
 };

package/packages/scrabble-solver/src/service-worker/appShell.test.ts

@@ -0,0 +1,86 @@
+import { afterAll, beforeEach, describe, expect, it } from 'bun:test';
+
+import { cacheAppShell, respondToNavigation } from './appShell';
+
+const entries = new Map<string, Response>();
+
+let respond: () => Promise<Response> = () => Promise.resolve(html('shell'));
+
+const globals = { caches: globalThis.caches, fetch: globalThis.fetch };
+
+Object.assign(globalThis, {
+  caches: createCacheStorage(entries),
+  fetch: () => respond(),
+});
+
+afterAll(() => {
+  Object.assign(globalThis, globals);
+});
+
+describe('respondToNavigation', () => {
+  beforeEach(() => {
+    entries.clear();
+    respond = () => Promise.resolve(html('shell'));
+  });
+
+  it('serves the network response while online', async () => {
+    await cacheAppShell();
+    respond = () => Promise.resolve(html('deployed shell'));
+    const response = await respondToNavigation({ request: navigation('/') });
+    expect(await response.text()).toEqual('deployed shell');
+  });
+
+  it('serves the shell cached on install when the network is gone', async () => {
+    await cacheAppShell();
+    respond = () => Promise.reject(new Error('offline'));
+    const response = await respondToNavigation({ request: navigation('/') });
+    expect(await response.text()).toEqual('shell');
+  });
+
+  it('serves the shell for any navigated path', async () => {
+    await cacheAppShell();
+    respond = () => Promise.reject(new Error('offline'));
+    const response = await respondToNavigation({ request: navigation('/not-found') });
+    expect(await response.text()).toEqual('shell');
+  });
+
+  /**
+   * The cached shell links to the chunks precached next to it, so a navigation
+   * must not replace it with HTML from a build this worker did not precache.
+   */
+  it('keeps the installed shell when a newer one is served from the network', async () => {
+    await cacheAppShell();
+    respond = () => Promise.resolve(html('deployed shell'));
+    await respondToNavigation({ request: navigation('/') });
+
+    respond = () => Promise.reject(new Error('offline'));
+    const response = await respondToNavigation({ request: navigation('/') });
+    expect(await response.text()).toEqual('shell');
+  });
+
+  it('rethrows when there is nothing to fall back on', async () => {
+    respond = () => Promise.reject(new Error('offline'));
+    const error = await respondToNavigation({ request: navigation('/') }).catch((reason: Error) => reason);
+    expect(error).toEqual(new Error('offline'));
+  });
+});
+
+function navigation(url: string): Request {
+  return new Request(new URL(url, 'https://scrabble-solver.org'));
+}
+
+function html(body: string): Response {
+  return new Response(body, { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
+}
+
+function createCacheStorage(cacheEntries: Map<string, Response>): CacheStorage {
+  return {
+    open: (name: string) =>
+      Promise.resolve({
+        add: async (url: string) => {
+          cacheEntries.set(`${name} ${url}`, await globalThis.fetch(url));
+        },
+        match: (url: string) => Promise.resolve(cacheEntries.get(`${name} ${url}`)?.clone()),
+      }),
+  } as unknown as CacheStorage;
+}

package/packages/scrabble-solver/src/service-worker/appShell.ts

@@ -0,0 +1,39 @@
+import { NavigationRoute, registerRoute } from 'workbox-routing';
+
+const APP_SHELL_CACHE = 'app-shell';
+const APP_SHELL_URL = '/';
+
+/**
+ * Caching the shell on install instead of on navigation pins it to the same build
+ * as the chunks precached alongside it, and covers the first visit, whose
+ * navigation happens before this worker controls the page.
+ */
+export async function cacheAppShell(): Promise<void> {
+  const cache = await caches.open(APP_SHELL_CACHE);
+  await cache.add(APP_SHELL_URL);
+}
+
+export function routeNavigations(): void {
+  registerRoute(new NavigationRoute(respondToNavigation, { denylist: [/^\/api\//] }));
+}
+
+/**
+ * A deploy has to reach online users on their next navigation (see the revalidation
+ * headers in next.config.js), so the shell only stands in when the network is gone.
+ * Solving keeps working from there, off the dictionary the solver worker holds in
+ * the Cache API.
+ */
+export async function respondToNavigation({ request }: { request: Request }): Promise<Response> {
+  try {
+    return await fetch(request);
+  } catch (error) {
+    const cache = await caches.open(APP_SHELL_CACHE);
+    const appShell = await cache.match(APP_SHELL_URL);
+
+    if (!appShell) {
+      throw error;
+    }
+
+    return appShell;
+  }
+}

package/packages/scrabble-solver/src/service-worker/index.ts

@@ -2,12 +2,12 @@
 
 import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
 
-import { routeSolveRequests } from './routeSolveRequests';
-import { routeVerifyRequests } from './routeVerifyRequests';
+import { cacheAppShell, routeNavigations } from './appShell';
 
 declare const self: ServiceWorkerGlobalScope;
 
-self.addEventListener('install', () => {
+self.addEventListener('install', (event) => {
+  event.waitUntil(cacheAppShell());
   // eslint-disable-next-line @typescript-eslint/no-floating-promises
   self.skipWaiting();
 });
@@ -19,5 +19,4 @@ self.addEventListener('activate', () => {
 
 cleanupOutdatedCaches();
 precacheAndRoute(self.__WB_MANIFEST);
-routeSolveRequests();
-routeVerifyRequests();
+routeNavigations();

package/packages/scrabble-solver/src/serviceWorkerManager.ts

@@ -1,26 +1,9 @@
 import { Workbox } from 'workbox-window';
 
-let serviceWorker: Workbox | null = null;
-
 export const registerServiceWorker = async () => {
   if (!globalThis.navigator || !('serviceWorker' in globalThis.navigator)) {
     return;
   }
 
-  serviceWorker = new Workbox('/service-worker.js');
-  await serviceWorker.register({ immediate: true });
-};
-
-export const getServiceWorker = async (): Promise<Workbox | null> => {
-  if (process.env.NODE_ENV !== 'production') {
-    return null;
-  }
-
-  if (serviceWorker) {
-    return serviceWorker;
-  }
-
-  await registerServiceWorker();
-
-  return serviceWorker;
+  await new Workbox('/service-worker.js').register({ immediate: true });
 };

package/packages/scrabble-solver/src/solver-worker/client.test.ts

@@ -0,0 +1,151 @@
+import { type ResultJson } from '@scrabble-solver/types';
+import { afterAll, beforeEach, describe, expect, it } from 'bun:test';
+
+import type * as clientModule from './client';
+import { type SolverWorkerRequest, type SolverWorkerResponse } from './messages';
+
+type Listener = (event: { data: SolverWorkerResponse }) => void;
+
+const posted: SolverWorkerRequest[] = [];
+let listeners: Listener[] = [];
+let errorListeners: (() => void)[] = [];
+let terminated = 0;
+let timeouts: (() => void)[] = [];
+
+class FakeWorker {
+  public postMessage(message: SolverWorkerRequest): void {
+    posted.push(message);
+  }
+
+  public addEventListener(type: string, listener: Listener & (() => void)): void {
+    if (type === 'message') {
+      listeners.push(listener);
+    } else {
+      errorListeners.push(listener);
+    }
+  }
+
+  public terminate(): void {
+    terminated += 1;
+  }
+}
+
+// The client reads these off the global scope on every call, so stubbing them
+// here is what makes the worker round-trip and its timeout observable.
+const globals = { caches: globalThis.caches, clearTimeout, setTimeout, Worker: globalThis.Worker };
+
+Object.assign(globalThis, {
+  caches: {},
+  clearTimeout: () => undefined,
+  setTimeout: (callback: () => void) => timeouts.push(callback),
+  Worker: FakeWorker,
+});
+
+afterAll(() => {
+  Object.assign(globalThis, globals);
+});
+
+const { prefetchDictionary, solveLocally, verifyLocally }: typeof clientModule = await import('./client');
+
+const solvePayload = { board: [], characters: [], game: 'scrabble', locale: 'en-US' } as never;
+const verifyPayload = { board: [], game: 'scrabble', locale: 'en-US' } as never;
+
+describe('solver worker client', () => {
+  beforeEach(() => {
+    posted.length = 0;
+    timeouts = [];
+  });
+
+  it('resolves a solve with the worker results', async () => {
+    const solve = solveLocally(solvePayload);
+    respond({ data: createResults('ab'), id: lastRequestId(), outcome: 'answered' });
+
+    expect(await solve).toEqual(createResults('ab'));
+  });
+
+  it('resolves to undefined when the worker cannot answer, so the caller falls back to the server', async () => {
+    const solve = solveLocally(solvePayload);
+    respond({ id: lastRequestId(), outcome: 'unavailable' });
+
+    expect(await solve).toBeUndefined();
+  });
+
+  it('answers a superseded solve with the newer solve results', async () => {
+    const stale = solveLocally(solvePayload);
+    const staleId = lastRequestId();
+    const latest = solveLocally(solvePayload);
+    const latestId = lastRequestId();
+
+    respond({ id: staleId, outcome: 'superseded' });
+    respond({ data: createResults('cd'), id: latestId, outcome: 'answered' });
+
+    expect(await stale).toEqual(createResults('cd'));
+    expect(await latest).toEqual(createResults('cd'));
+  });
+
+  it('resolves to undefined when the worker never answers', async () => {
+    const solve = solveLocally(solvePayload);
+    expect(timeouts).toHaveLength(1);
+    timeouts[0]();
+
+    expect(await solve).toBeUndefined();
+  });
+
+  it('ignores a late answer to a request that already timed out', async () => {
+    const solve = solveLocally(solvePayload);
+    const id = lastRequestId();
+    timeouts[0]();
+    respond({ data: createResults('ef'), id, outcome: 'answered' });
+
+    expect(await solve).toBeUndefined();
+  });
+
+  it('resolves a verify with the worker words', async () => {
+    const verify = verifyLocally(verifyPayload);
+    respond({ data: { invalidWords: ['zz'], validWords: ['ab'] }, id: lastRequestId(), outcome: 'answered' });
+
+    expect(await verify).toEqual({ invalidWords: ['zz'], validWords: ['ab'] });
+  });
+
+  it('does not wait for a prefetch to answer', () => {
+    prefetchDictionary('pl-PL' as never);
+
+    expect(posted[posted.length - 1].type).toBe('prefetch');
+    expect(timeouts).toHaveLength(0);
+  });
+
+  it('settles in-flight requests and discards the worker when it fails', async () => {
+    const solve = solveLocally(solvePayload);
+    const verify = verifyLocally(verifyPayload);
+    const failuresBefore = terminated;
+
+    for (const listener of errorListeners) {
+      listener();
+    }
+
+    expect(await solve).toBeUndefined();
+    expect(await verify).toBeUndefined();
+    expect(terminated).toBe(failuresBefore + 1);
+
+    listeners = [];
+    errorListeners = [];
+    const restarted = solveLocally(solvePayload);
+    respond({ data: createResults('gh'), id: lastRequestId(), outcome: 'answered' });
+
+    expect(await restarted).toEqual(createResults('gh'));
+  });
+});
+
+function respond(response: SolverWorkerResponse): void {
+  for (const listener of listeners) {
+    listener({ data: response });
+  }
+}
+
+function lastRequestId(): number {
+  return posted[posted.length - 1].id;
+}
+
+function createResults(word: string): ResultJson[] {
+  return [{ blankIndices: [], id: 0, isHorizontal: true, points: 1, tiles: word.split(''), x: 0, y: 0 }];
+}