@scrabble-solver/scrabble-solver 2.8.11 → 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.11",
+  "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.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.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": "ab4bacd7711b47e2392da417225559effe574252"
+  "gitHead": "f100d9d52460a68f1fb5a1059cd335029d5e46a8"
 }

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;

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 {

package/src/state/slices/settingsInitialState.ts

@@ -1,10 +1,29 @@
 import { scrabble } from '@scrabble-solver/configs';
 import { Locale } from '@scrabble-solver/types';
 
+const getInitialLocale = (): Locale => {
+  if (!globalThis.navigator) {
+    return Locale.EN_US;
+  }
+
+  const locales = Object.values(Locale);
+  const exactMatch = locales.find((locale) => globalThis.navigator.language === locale);
+
+  if (exactMatch) {
+    return exactMatch;
+  }
+
+  const partialMatch = locales.find((locale) => {
+    return globalThis.navigator.language === locale.substring(0, 2);
+  });
+
+  return partialMatch || Locale.EN_US;
+};
+
 const settingsInitialState = {
   autoGroupTiles: 'left' as 'left' | 'right' | null,
   configId: scrabble.id,
-  locale: Locale.EN_US,
+  locale: getInitialLocale(),
 };
 
 export default settingsInitialState;

package/tsconfig.json

@@ -18,6 +18,7 @@
       "pages": ["./src/pages"],
       "parameters": ["./src/parameters"],
       "sdk": ["./src/sdk"],
+      "serviceWorkerManager": ["./src/serviceWorkerManager"],
       "state": ["./src/state"],
       "styles": ["./src/styles"],
       "types": ["./src/types"]