@scrabble-solver/scrabble-solver 2.8.11 → 2.9.1

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.11",
+  "version": "2.9.1",
   "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.11",
-    "@scrabble-solver/constants": "^2.8.11",
-    "@scrabble-solver/dictionaries": "^2.8.11",
-    "@scrabble-solver/logger": "^2.8.11",
-    "@scrabble-solver/solver": "^2.8.11",
-    "@scrabble-solver/types": "^2.8.11",
-    "@scrabble-solver/word-definitions": "^2.8.11",
+    "@scrabble-solver/configs": "^2.9.1",
+    "@scrabble-solver/constants": "^2.9.1",
+    "@scrabble-solver/dictionaries": "^2.9.1",
+    "@scrabble-solver/logger": "^2.9.1",
+    "@scrabble-solver/solver": "^2.9.1",
+    "@scrabble-solver/types": "^2.9.1",
+    "@scrabble-solver/word-definitions": "^2.9.1",
     "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": "ab4bacd7711b47e2392da417225559effe574252"
+  "gitHead": "4849b4d123131fe043174f000c523868f3bd68c5"
 }

package/src/components/Board/BoardPure.tsx

@@ -44,13 +44,7 @@ const BoardPure: FunctionComponent<Props> = ({
   onKeyDown,
   onPaste,
 }) => (
-  <div
-    className={classNames(styles.board, className)}
-    ref={innerRef}
-    onChange={onChange}
-    onKeyDown={onKeyDown}
-    onPaste={onPaste}
-  >
+  <div className={classNames(styles.board, className)} ref={innerRef} onKeyDown={onKeyDown} onPaste={onPaste}>
     {rows.map((cells, y) => (
       <div className={styles.row} key={y}>
         {cells.map((cell, x) => (
@@ -62,6 +56,7 @@ const BoardPure: FunctionComponent<Props> = ({
             isCenter={center.x === x && center.y === y}
             key={x}
             size={cellSize}
+            onChange={onChange}
             onDirectionToggle={onDirectionToggle}
             onFocus={onFocus}
           />

package/src/components/Board/components/Cell/Cell.module.scss

@@ -213,7 +213,7 @@ $icon-size: 16px;
 
 .flag,
 .star {
-  $size: 24px;
+  $size: 50%;
 
   width: $size;
   height: $size;

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

@@ -1,6 +1,6 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
 import { Cell as CellModel } from '@scrabble-solver/types';
-import { FunctionComponent, RefObject, useCallback, useMemo } from 'react';
+import { ChangeEventHandler, FunctionComponent, RefObject, useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { getTileSizes } from 'lib';
@@ -23,6 +23,7 @@ interface Props {
   inputRef: RefObject<HTMLInputElement>;
   isCenter: boolean;
   size: number;
+  onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggle: () => void;
   onFocus: (x: number, y: number) => void;
 }
@@ -34,6 +35,7 @@ const Cell: FunctionComponent<Props> = ({
   inputRef,
   isCenter,
   size,
+  onChange,
   onDirectionToggle,
   onFocus,
 }) => {
@@ -88,6 +90,7 @@ const Cell: FunctionComponent<Props> = ({
       style={style}
       tile={tile}
       translate={translate}
+      onChange={onChange}
       onDirectionToggleClick={handleDirectionToggleClick}
       onFocus={handleFocus}
       onToggleBlankClick={handleToggleBlankClick}

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

@@ -1,6 +1,14 @@
 import { Bonus, Cell, Tile as TileModel } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import { CSSProperties, FocusEventHandler, FunctionComponent, memo, MouseEventHandler, RefObject } from 'react';
+import {
+  ChangeEventHandler,
+  CSSProperties,
+  FocusEventHandler,
+  FunctionComponent,
+  memo,
+  MouseEventHandler,
+  RefObject,
+} from 'react';
 
 import { ArrowDown, Flag, Star } from 'icons';
 import { Translate } from 'types';
@@ -25,6 +33,7 @@ interface Props {
   style?: CSSProperties;
   tile: TileModel;
   translate: Translate;
+  onChange: ChangeEventHandler<HTMLInputElement>;
   onDirectionToggleClick: MouseEventHandler<HTMLButtonElement>;
   onFocus: FocusEventHandler<HTMLInputElement>;
   onToggleBlankClick: MouseEventHandler<HTMLButtonElement>;
@@ -45,6 +54,7 @@ const CellPure: FunctionComponent<Props> = ({
   style,
   tile,
   translate,
+  onChange,
   onDirectionToggleClick,
   onFocus,
   onToggleBlankClick,
@@ -78,6 +88,7 @@ const CellPure: FunctionComponent<Props> = ({
       raised={!isEmpty}
       size={size}
       tabIndex={cell.x === 0 && cell.y === 0 ? undefined : -1}
+      onChange={onChange}
       onFocus={onFocus}
     />
 

package/src/components/Splash/Splash.module.scss

@@ -1,6 +1,6 @@
 @import 'styles/animations';
 
-$loading-duration: 450ms;
+$loading-duration: 250ms;
 $loaded-duration: 100ms;
 $hiding-duration: 200ms;
 

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';
@@ -47,7 +48,8 @@ const Index: FunctionComponent<Props> = ({ version }) => {
     useMeasure<HTMLDivElement>();
   const config = useTypedSelector(selectConfig);
   const cellSize = getCellSize(config, contentWidth - resultsContainerWidth, contentHeight);
-  const isInitialized = contentWidth > 0 && boardHeight > 0 && resultsContainerWidth > 0;
+  const isInitializedInitial = contentWidth > 0 && boardHeight > 0 && resultsContainerWidth > 0;
+  const [isInitialized, setIsInitialized] = useState(isInitializedInitial);
   const resultsHeight = boardHeight - DICTIONARY_HEIGHT - (isTablet ? COMPONENTS_SPACING_MOBILE : COMPONENTS_SPACING);
 
   const handleClear = () => {
@@ -70,8 +72,18 @@ const Index: FunctionComponent<Props> = ({ version }) => {
 
   useEffectOnce(() => {
     dispatch(initialize());
+
+    setTimeout(() => {
+      setIsInitialized(true);
+    }, 100);
   });
 
+  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,5 @@
+export const DICTIONARY_CACHE = 'dictionary-api-cache';
+
+export const DAY = 24 * 60 * 60 * 1000;
+
+export const DICTIONARY_CACHE_MAX_AGE = 1 * DAY; // eslint-disable-line no-implicit-coercion

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;

package/src/service-worker/routeVerifyRequests.ts

@@ -0,0 +1,35 @@
+import { Board } 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 routeVerifyRequests = () => {
+  registerRoute(
+    ({ url }) => url.origin === location.origin && url.pathname === '/api/verify',
+    async ({ request }) => {
+      const { board: boardJson, locale } = await request.clone().json();
+      const trie = await getTrie(locale);
+
+      if (!trie) {
+        const response = await fetch(request);
+        revalidateDictionary(locale);
+        return response;
+      }
+
+      const board = Board.fromJson(boardJson);
+      const words = board.getWords().sort((a, b) => a.localeCompare(b));
+      const invalidWords = words.filter((word) => !trie.has(word));
+      const validWords = words.filter((word) => trie.has(word));
+      const json = JSON.stringify({ invalidWords, validWords });
+      return new Response(json, { headers });
+    },
+    'POST',
+  );
+};
+
+export default routeVerifyRequests;

package/src/serviceWorkerManager.ts

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

package/src/state/sagas.ts

@@ -99,6 +99,7 @@ function* onDictionarySubmit(): AnyGenerator {
 function* onInitialize(): AnyGenerator {
   yield call(visit);
   yield* ensureProperTilesCount();
+  yield put(verifySlice.actions.submit());
 }
 
 function* onReset(): AnyGenerator {