@scrabble-solver/scrabble-solver 2.8.10 → 2.9.0

package/next.config.js

@@ -2,6 +2,7 @@
 
 const fs = require('fs');
 const path = require('path');
+const WorkboxPlugin = require('workbox-webpack-plugin');
 
 const tsConfig = fs.readFileSync(path.resolve(__dirname, 'tsconfig.json'), 'utf-8');
 const tsConfigJson = JSON.parse(tsConfig);
@@ -39,5 +40,15 @@ module.exports = {
         },
       ],
     },
+    plugins: [
+      ...config.plugins,
+      process.env.NODE_ENV === 'production'
+        ? new WorkboxPlugin.InjectManifest({
+            swSrc: path.join(__dirname, 'src/service-worker/index.ts'),
+            swDest: path.join(__dirname, 'public/service-worker.js'),
+            exclude: [/\.map$/, /\.next/, /_next/, /manifest/, /\.htaccess$/, /.*\/static\/.*/, /service-worker\.js$/],
+          })
+        : undefined,
+    ].filter(Boolean),
   }),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrabble-solver/scrabble-solver",
-  "version": "2.8.10",
+  "version": "2.9.0",
   "description": "Scrabble Solver 2 - App",
   "engines": {
     "node": ">=16"
@@ -28,15 +28,16 @@
     "start": "env-cmd next start -p 3333"
   },
   "dependencies": {
+    "@kamilmielnik/trie": "^2.0.1",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.8.6",
-    "@scrabble-solver/configs": "^2.8.10",
-    "@scrabble-solver/constants": "^2.8.10",
-    "@scrabble-solver/dictionaries": "^2.8.10",
-    "@scrabble-solver/logger": "^2.8.10",
-    "@scrabble-solver/solver": "^2.8.10",
-    "@scrabble-solver/types": "^2.8.10",
-    "@scrabble-solver/word-definitions": "^2.8.10",
+    "@scrabble-solver/configs": "^2.9.0",
+    "@scrabble-solver/constants": "^2.9.0",
+    "@scrabble-solver/dictionaries": "^2.9.0",
+    "@scrabble-solver/logger": "^2.9.0",
+    "@scrabble-solver/solver": "^2.9.0",
+    "@scrabble-solver/types": "^2.9.0",
+    "@scrabble-solver/word-definitions": "^2.9.0",
     "classnames": "^2.3.2",
     "next": "^12.3.1",
     "normalize.css": "^8.0.1",
@@ -51,7 +52,11 @@
     "redux": "^4.2.0",
     "redux-saga": "^1.2.1",
     "store2": "^2.14.2",
-    "uuid": "^9.0.0"
+    "uuid": "^9.0.0",
+    "workbox-expiration": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-window": "^6.5.4"
   },
   "devDependencies": {
     "@svgr/webpack": "^6.5.0",
@@ -66,7 +71,8 @@
     "@types/redux-saga": "^0.10.5",
     "@types/uuid": "^8.3.4",
     "env-cmd": "^10.1.0",
-    "sass": "^1.55.0"
+    "sass": "^1.55.0",
+    "workbox-webpack-plugin": "^6.5.4"
   },
-  "gitHead": "8822c74d0d632ee51bca3bf69ccfc7f517bfadb3"
+  "gitHead": "f100d9d52460a68f1fb5a1059cd335029d5e46a8"
 }

package/src/components/Board/components/Cell/CellPure.tsx

@@ -81,39 +81,41 @@ const CellPure: FunctionComponent<Props> = ({
       onFocus={onFocus}
     />
 
-    <div className={styles.actions}>
-      <Button tooltip={translate('cell.toggle-direction')} onClick={onDirectionToggleClick}>
-        <ArrowDown
-          className={classNames(styles.toggleDirection, {
-            [styles.right]: direction === 'horizontal',
-          })}
-        />
-      </Button>
-
-      {isEmpty && (
-        <Button
-          className={classNames(styles.filterCell, {
-            [styles.filtered]: isFiltered,
-          })}
-          tooltip={translate('cell.filter-cell')}
-          onClick={onToggleFilterCellClick}
-        >
-          <Flag />
+    {!cell.isCandidate() && (
+      <div className={styles.actions}>
+        <Button tooltip={translate('cell.toggle-direction')} onClick={onDirectionToggleClick}>
+          <ArrowDown
+            className={classNames(styles.toggleDirection, {
+              [styles.right]: direction === 'horizontal',
+            })}
+          />
         </Button>
-      )}
 
-      {!isEmpty && (
-        <Button
-          className={classNames(styles.blank, {
-            [styles.active]: tile.isBlank,
-          })}
-          tooltip={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
-          onClick={onToggleBlankClick}
-        >
-          B
-        </Button>
-      )}
-    </div>
+        {isEmpty && (
+          <Button
+            className={classNames(styles.filterCell, {
+              [styles.filtered]: isFiltered,
+            })}
+            tooltip={translate('cell.filter-cell')}
+            onClick={onToggleFilterCellClick}
+          >
+            <Flag />
+          </Button>
+        )}
+
+        {!isEmpty && (
+          <Button
+            className={classNames(styles.blank, {
+              [styles.active]: tile.isBlank,
+            })}
+            tooltip={tile.isBlank ? translate('cell.set-not-blank') : translate('cell.set-blank')}
+            onClick={onToggleBlankClick}
+          >
+            B
+          </Button>
+        )}
+      </div>
+    )}
   </div>
 );
 

package/src/components/Board/hooks/useGrid.ts

@@ -15,6 +15,7 @@ import {
 } from 'react';
 import { useDispatch } from 'react-redux';
 import { useLatest } from 'react-use';
+import { AnyAction } from 'redux';
 
 import { createGridOf, createKeyboardNavigation, extractCharacters, extractInputValue, isCtrl } from 'lib';
 import { boardSlice, selectConfig, useTypedSelector } from 'state';
@@ -82,6 +83,7 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
   const insertValue = useCallback(
     (position: Point, value: string) => {
       const characters = value ? extractCharacters(config, value).filter((character) => character !== BLANK) : [BLANK];
+      const actions: AnyAction[] = [];
       let board = new Board({ rows: rows.map((row) => row.map((cell) => cell.clone())) });
       let { x, y } = position;
 
@@ -108,10 +110,9 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
           const twoCharacterCandidate = cellUp.tile.character + character;
 
           if (!cellUp.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            board = boardSlice.reducer(
-              board,
-              boardSlice.actions.changeCellValue({ x, y: y - 1, value: twoCharacterCandidate }),
-            );
+            const action = boardSlice.actions.changeCellValue({ x, y: y - 1, value: twoCharacterCandidate });
+            board = boardSlice.reducer(board, action);
+            actions.push(action);
             return;
           }
         }
@@ -121,8 +122,10 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
           const twoCharacterCandidate = character + cellDown.tile.character;
 
           if (!cellDown.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x, y, value: character }));
-            board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x, y: y + 1, value: EMPTY_CELL }));
+            const action1 = boardSlice.actions.changeCellValue({ x, y, value: character });
+            const action2 = boardSlice.actions.changeCellValue({ x, y: y + 1, value: EMPTY_CELL });
+            board = boardSlice.reducer(boardSlice.reducer(board, action1), action2);
+            actions.push(action1, action2);
             scheduleMoveFocus();
             return;
           }
@@ -133,10 +136,9 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
           const twoCharacterCandidate = cellLeft.tile.character + character;
 
           if (!cellLeft.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            board = boardSlice.reducer(
-              board,
-              boardSlice.actions.changeCellValue({ x: x - 1, y, value: twoCharacterCandidate }),
-            );
+            const action = boardSlice.actions.changeCellValue({ x: x - 1, y, value: twoCharacterCandidate });
+            board = boardSlice.reducer(board, action);
+            actions.push(action);
             return;
           }
         }
@@ -146,8 +148,10 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
           const twoCharacterCandidate = character + cellRight.tile.character;
 
           if (!cellRight.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x, y, value: character }));
-            board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x: x + 1, y, value: EMPTY_CELL }));
+            const action1 = boardSlice.actions.changeCellValue({ x, y, value: character });
+            const action2 = boardSlice.actions.changeCellValue({ x: x + 1, y, value: EMPTY_CELL });
+            board = boardSlice.reducer(boardSlice.reducer(board, action1), action2);
+            actions.push(action1, action2);
             scheduleMoveFocus();
             return;
           }
@@ -158,20 +162,21 @@ const useGrid = (rows: Cell[][]): [State, Actions] => {
           const twoCharacterCandidate = cell.tile.character + character;
 
           if (!cell.tile.isBlank && config.twoCharacterTiles.includes(twoCharacterCandidate)) {
-            board = boardSlice.reducer(
-              board,
-              boardSlice.actions.changeCellValue({ x, y, value: twoCharacterCandidate }),
-            );
+            const action = boardSlice.actions.changeCellValue({ x, y, value: twoCharacterCandidate });
+            board = boardSlice.reducer(board, action);
+            actions.push(action);
             return;
           }
         }
 
-        board = boardSlice.reducer(board, boardSlice.actions.changeCellValue({ x, y, value: character }));
+        const action = boardSlice.actions.changeCellValue({ x, y, value: character });
+        board = boardSlice.reducer(board, action);
+        actions.push(action);
         scheduleMoveFocus();
       });
 
       moveFocus(Math.abs(position.x - x) + Math.abs(position.y - y));
-      dispatch(boardSlice.actions.change(board));
+      actions.forEach(dispatch);
     },
     [config, directionRef, dispatch, moveFocus, rows],
   );

package/src/components/Sidebar/Sidebar.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
-import { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode, useEffect, useState } from 'react';
 import Modal from 'react-modal';
+import { useKey } from 'react-use';
 
 import { CrossFill } from 'icons';
 import { TRANSITION_DURATION_LONG } from 'parameters';
@@ -21,6 +22,23 @@ export interface Props {
 
 const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title, onClose }) => {
   const translate = useTranslate();
+  const [shouldReturnFocusAfterClose, setShouldReturnFocusAfterClose] = useState(true);
+
+  useKey(
+    'Escape',
+    () => {
+      setShouldReturnFocusAfterClose(false);
+      onClose();
+    },
+    undefined,
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldReturnFocusAfterClose(true);
+    }
+  }, [isOpen]);
 
   return (
     <Modal
@@ -33,6 +51,7 @@ const Sidebar: FunctionComponent<Props> = ({ children, className, isOpen, title,
       contentLabel={title}
       isOpen={isOpen}
       overlayClassName={styles.overlay}
+      shouldReturnFocusAfterClose={shouldReturnFocusAfterClose}
       onRequestClose={onClose}
     >
       <div className={classNames(styles.sidebar, className)}>

package/src/components/SvgFontCss/SvgFontCss.tsx

@@ -7,6 +7,7 @@ text {
   font-family: 'Open Sans';
 }`;
 
-const SvgFontCss: FunctionComponent = () => <style type="text/css">{CSS}</style>;
+// eslint-disable-next-line react/no-danger
+const SvgFontCss: FunctionComponent = () => <style type="text/css" dangerouslySetInnerHTML={{ __html: CSS }} />;
 
 export default SvgFontCss;

package/src/pages/api/dictionary/[locale]/index.ts

@@ -0,0 +1,53 @@
+import { dictionaries } from '@scrabble-solver/dictionaries';
+import logger from '@scrabble-solver/logger';
+import { isLocale, Locale } from '@scrabble-solver/types';
+import { NextApiRequest, NextApiResponse } from 'next';
+
+import { getServerLoggingData } from 'api';
+
+interface RequestData {
+  locale: Locale;
+}
+
+const dictionary = async (request: NextApiRequest, response: NextApiResponse): Promise<void> => {
+  const meta = getServerLoggingData(request);
+
+  try {
+    const { locale } = parseRequest(request);
+
+    logger.info('dictionary - request', {
+      meta,
+      payload: {
+        locale,
+      },
+    });
+
+    const trie = await dictionaries.get(locale);
+    response.status(200).send(trie.serialize());
+  } catch (error) {
+    const message = error instanceof Error ? error.message : 'Unknown error';
+    logger.error('dictionary - error', { error, meta });
+    response.status(500).send({ error: 'Server error', message });
+    throw error;
+  }
+};
+
+const parseRequest = (request: NextApiRequest): RequestData => {
+  const { locale } = request.query;
+
+  if (!isLocale(locale)) {
+    throw new Error('Invalid "locale" parameter');
+  }
+
+  return {
+    locale,
+  };
+};
+
+export const config = {
+  api: {
+    responseLimit: '25mb',
+  },
+};
+
+export default dictionary;

package/src/pages/api/solve.ts

@@ -89,4 +89,10 @@ const parseRequest = (request: NextApiRequest): RequestData => {
   };
 };
 
+export const config = {
+  api: {
+    responseLimit: '25mb',
+  },
+};
+
 export default solve;

package/src/pages/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
-import { AnimationEvent, FormEvent, FunctionComponent, useState } from 'react';
+import { AnimationEvent, FormEvent, FunctionComponent, useEffect, useState } from 'react';
 import Modal from 'react-modal';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce, useMeasure } from 'react-use';
@@ -24,6 +24,7 @@ import {
 import { useIsTablet, useLocalStorage } from 'hooks';
 import { getCellSize } from 'lib';
 import { COMPONENTS_SPACING, COMPONENTS_SPACING_MOBILE, DICTIONARY_HEIGHT } from 'parameters';
+import { registerServiceWorker } from 'serviceWorkerManager';
 import { initialize, localStorage, reset, selectConfig, solveSlice, useTypedSelector } from 'state';
 
 import styles from './index.module.scss';
@@ -72,6 +73,12 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     dispatch(initialize());
   });
 
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') {
+      registerServiceWorker();
+    }
+  }, []);
+
   return (
     <>
       <div className={classNames(styles.index, { [styles.initialized]: isInitialized })}>

package/src/sdk/fetch.ts

@@ -0,0 +1,30 @@
+import { isError } from '@scrabble-solver/types';
+
+const fetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
+  let response: Response;
+
+  try {
+    response = await window.fetch(input, init);
+  } catch (error) {
+    const message = isError(error) ? error.message : 'Unknown error';
+    throw new Error(`Network error: ${message}`);
+  }
+
+  if (response.ok) {
+    return response;
+  }
+
+  try {
+    const json = await response.json();
+
+    if (isError(json)) {
+      throw new Error(json.message);
+    }
+  } finally {
+    // do nothing
+  }
+
+  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+};
+
+export default fetch;

package/src/sdk/fetchJson.ts

@@ -1,36 +1,15 @@
-import { isError } from '@scrabble-solver/types';
+import fetch from './fetch';
 
 const fetchJson = async <T>(input: RequestInfo | URL, init?: RequestInit): Promise<T> => {
-  let response: Response;
-
-  try {
-    response = await fetch(input, {
-      ...init,
-      headers: {
-        'Content-Type': 'application/json',
-        ...init?.headers,
-      },
-    });
-  } catch (error) {
-    const message = isError(error) ? error.message : 'Unknown error';
-    throw new Error(`Network error: ${message}`);
-  }
-
-  if (response.ok) {
-    return response.json();
-  }
-
-  try {
-    const json = await response.json();
-
-    if (isError(json)) {
-      throw new Error(json.message);
-    }
-  } finally {
-    // do nothing
-  }
-
-  throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+  const response = await fetch(input, {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...init?.headers,
+    },
+  });
+
+  return response.json();
 };
 
 export default fetchJson;

package/src/sdk/getDictionary.ts

@@ -0,0 +1,11 @@
+import { Trie } from '@kamilmielnik/trie';
+import { Locale } from '@scrabble-solver/types';
+
+import fetchJson from './fetchJson';
+
+const getDictionary = async (locale: Locale): Promise<Trie> => {
+  const serialized = await fetchJson<string>(`/api/dictionary/${locale}`);
+  return Trie.deserialize(serialized);
+};
+
+export default getDictionary;

package/src/service-worker/dictionaries/constants.ts

@@ -0,0 +1,3 @@
+export const DICTIONARY_CACHE = 'dictionary-api-cache';
+
+export const DICTIONARY_CACHE_MAX_AGE = 30 * 24 * 60 * 60 * 1000;

package/src/service-worker/dictionaries/expirationManager.ts

@@ -0,0 +1,9 @@
+import { CacheExpiration } from 'workbox-expiration';
+
+import { DICTIONARY_CACHE, DICTIONARY_CACHE_MAX_AGE } from './constants';
+
+const expirationManager = new CacheExpiration(DICTIONARY_CACHE, {
+  maxAgeSeconds: DICTIONARY_CACHE_MAX_AGE / 1000,
+});
+
+export default expirationManager;

package/src/service-worker/dictionaries/getDictionary.ts

@@ -0,0 +1,22 @@
+import { Locale } from '@scrabble-solver/types';
+
+import { DICTIONARY_CACHE } from './constants';
+import expirationManager from './expirationManager';
+import getDictionaryUrl from './getDictionaryUrl';
+
+const getDictionary = async (locale: Locale): Promise<string | undefined> => {
+  await expirationManager.expireEntries();
+
+  const url = getDictionaryUrl(locale);
+  const cache = await caches.open(DICTIONARY_CACHE);
+  const cached = await cache.match(url);
+
+  if (typeof cached === 'undefined') {
+    return undefined;
+  }
+
+  const serialized = await cached.clone().text();
+  return serialized;
+};
+
+export default getDictionary;

package/src/service-worker/dictionaries/getDictionaryUrl.ts

@@ -0,0 +1,7 @@
+import { Locale } from '@scrabble-solver/types';
+
+const getDictionaryUrl = (locale: Locale): string => {
+  return `/api/dictionary/${locale}`;
+};
+
+export default getDictionaryUrl;

package/src/service-worker/dictionaries/index.ts

@@ -0,0 +1,2 @@
+export { default as getDictionary } from './getDictionary';
+export { default as revalidateDictionary } from './revalidateDictionary';

package/src/service-worker/dictionaries/revalidateDictionary.ts

@@ -0,0 +1,35 @@
+import { Locale } from '@scrabble-solver/types';
+
+import { DICTIONARY_CACHE } from './constants';
+import expirationManager from './expirationManager';
+import getDictionaryUrl from './getDictionaryUrl';
+
+const requests: Partial<Record<Locale, Promise<Response> | undefined>> = {};
+
+const revalidateDictionary = async (locale: Locale): Promise<void> => {
+  if (requests[locale] instanceof Promise) {
+    return;
+  }
+
+  let response: Response | undefined;
+  const url = getDictionaryUrl(locale);
+  const request = fetch(url);
+  requests[locale] = request;
+
+  try {
+    response = await request;
+
+    if (!response.ok) {
+      requests[locale] = undefined;
+      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+    }
+
+    const cache = await caches.open(DICTIONARY_CACHE);
+    await cache.put(url, response.clone());
+    await expirationManager.updateTimestamp(url);
+  } finally {
+    requests[locale] = undefined;
+  }
+};
+
+export default revalidateDictionary;

package/src/service-worker/getTrie.ts

@@ -0,0 +1,26 @@
+import { Trie } from '@kamilmielnik/trie';
+import { Locale } from '@scrabble-solver/types';
+
+import { getDictionary } from './dictionaries';
+
+const cache: Partial<Record<Locale, { trie: Trie; dictionary: string } | undefined>> = {};
+
+const getTrie = async (locale: Locale): Promise<Trie | undefined> => {
+  const dictionary = await getDictionary(locale);
+
+  if (typeof dictionary === 'undefined') {
+    return undefined;
+  }
+
+  const cached = cache[locale];
+
+  if (typeof cached === 'undefined' || cached.dictionary !== dictionary) {
+    const trie = Trie.deserialize(dictionary);
+    cache[locale] = { dictionary, trie };
+    return trie;
+  }
+
+  return cached.trie;
+};
+
+export default getTrie;

package/src/service-worker/index.ts

@@ -0,0 +1,22 @@
+/// <reference lib="WebWorker" />
+
+import { cleanupOutdatedCaches, precacheAndRoute } from 'workbox-precaching';
+
+import routeSolveRequests from './routeSolveRequests';
+import routeVerifyRequests from './routeVerifyRequests';
+
+declare const self: ServiceWorkerGlobalScope;
+
+self.addEventListener('install', () => {
+  self.skipWaiting();
+});
+
+self.addEventListener('activate', () => {
+  self.clients.claim();
+});
+
+cleanupOutdatedCaches();
+// eslint-disable-next-line no-underscore-dangle
+precacheAndRoute(self.__WB_MANIFEST);
+routeSolveRequests();
+routeVerifyRequests();

package/src/service-worker/routeSolveRequests.ts

@@ -0,0 +1,37 @@
+import { getConfig } from '@scrabble-solver/configs';
+import { BLANK } from '@scrabble-solver/constants';
+import { solve } from '@scrabble-solver/solver';
+import { Board, Locale, Tile } from '@scrabble-solver/types';
+import { registerRoute } from 'workbox-routing';
+
+import { revalidateDictionary } from './dictionaries';
+import getTrie from './getTrie';
+
+const headers = {
+  'Content-Type': 'application/json; charset=utf-8',
+};
+
+const routeSolveRequests = () => {
+  registerRoute(
+    ({ url }) => url.origin === location.origin && url.pathname === '/api/solve',
+    async ({ request }) => {
+      const { board, characters, configId, locale } = await request.clone().json();
+      const trie = await getTrie(locale);
+
+      if (!trie) {
+        const response = await fetch(request);
+        revalidateDictionary(locale);
+        return response;
+      }
+
+      const config = getConfig(configId)[locale as Locale];
+      const tiles = characters.map((character: string) => new Tile({ character, isBlank: character === BLANK }));
+      const resultsJson = solve(trie, config, Board.fromJson(board), tiles);
+      const json = JSON.stringify(resultsJson);
+      return new Response(json, { headers });
+    },
+    'POST',
+  );
+};
+
+export default routeSolveRequests;