scrabble-solver 2.8.2 → 2.8.4

package/packages/scrabble-solver/src/components/PlainTiles/Tile.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 interface Props {
   character: string;

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

@@ -1,6 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import React, { createRef, FunctionComponent, useCallback, useMemo, useRef } from 'react';
+import { createRef, FunctionComponent, useCallback, useMemo, useRef } from 'react';
 
 import { createArray, createKeyboardNavigation, zipCharactersAndTiles } from 'lib';
 import { selectConfig, selectRack, selectResultCandidateTiles, useTypedSelector } from 'state';

package/packages/scrabble-solver/src/components/Rack/RackTile.tsx

@@ -1,6 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import { Tile as TileModel } from '@scrabble-solver/types';
-import React, {
+import {
   FunctionComponent,
   KeyboardEventHandler,
   MutableRefObject,

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ChangeEventHandler, FunctionComponent, ReactNode } from 'react';
+import { ChangeEventHandler, FunctionComponent, ReactNode } from 'react';
 
 import styles from './Radio.module.scss';
 

package/packages/scrabble-solver/src/components/RemainingTiles/Character.tsx

@@ -1,6 +1,6 @@
 import { BLANK } from '@scrabble-solver/constants';
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { REMAINING_TILES_TILE_SIZE } from 'parameters';
 import { selectCharacterPoints, useTypedSelector } from 'state';

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

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { selectRemainingTilesGroups, useTranslate, useTypedSelector } from 'state';
 

package/packages/scrabble-solver/src/components/Results/Cell.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { useTranslate } from 'state';
 import { TranslationKey } from 'types';

package/packages/scrabble-solver/src/components/Results/HeaderButton.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { SortDown, SortUp } from 'icons';

package/packages/scrabble-solver/src/components/Results/Result.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ReactElement } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { resultsSlice, selectSortedFilteredResults, useTypedSelector } from 'state';

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { FixedSizeList } from 'react-window';
 
 import { RESULTS_HEADER_HEIGHT, RESULTS_INPUT_HEIGHT, RESULTS_ITEM_HEIGHT } from 'parameters';

package/packages/scrabble-solver/src/components/Results/SolveButton.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { Play } from 'icons';

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { resultsSlice, selectResultsQuery, useTranslate, useTypedSelector } from 'state';

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { AnimationEventHandler, FunctionComponent, ReactNode } from 'react';
+import { AnimationEventHandler, FunctionComponent, ReactNode } from 'react';
 
 import styles from './Screen.module.scss';
 

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

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 
 import { useTranslate } from 'state';
 

package/packages/scrabble-solver/src/components/Settings/components/AutoGroupTilesSetting/AutoGroupTilesSetting.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { selectAutoGroupTiles, settingsSlice, useTranslate, useTypedSelector } from 'state';

package/packages/scrabble-solver/src/components/Settings/components/ConfigSetting/ConfigSetting.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { selectConfigId, settingsSlice, useTypedSelector } from 'state';

package/packages/scrabble-solver/src/components/Settings/components/LocaleSetting/LocaleSetting.tsx

@@ -1,6 +1,6 @@
 import { Locale } from '@scrabble-solver/types';
 import classNames from 'classnames';
-import React, { ChangeEvent, FunctionComponent } from 'react';
+import { ChangeEvent, FunctionComponent } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { selectLocale, settingsSlice, useTypedSelector } from 'state';

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 import Modal from 'react-modal';
 
 import { Cross } from 'icons';

package/packages/scrabble-solver/src/components/Sidebar/components/Section/Section.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { FunctionComponent, ReactNode } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 
 import styles from './Section.module.scss';
 

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { AnimationEventHandler, FunctionComponent } from 'react';
+import { AnimationEventHandler, FunctionComponent } from 'react';
 
 import Logo from '../Logo';
 import Screen from '../Screen';

package/packages/scrabble-solver/src/components/SquareButton/Link.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { AnchorHTMLAttributes, FunctionComponent, SVGAttributes } from 'react';
+import { AnchorHTMLAttributes, FunctionComponent, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
+import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler, SVGAttributes } from 'react';
 
 import { useTooltip } from '../Tooltip';
 

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

@@ -0,0 +1,12 @@
+import { FunctionComponent } from 'react';
+
+// eslint-disable-next-line max-len
+const CSS = `@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Open+Sans:wght@400;700&family=Roboto+Mono&display=swap');
+
+text {
+  font-family: 'Open Sans';
+}`;
+
+const SvgFontCss: FunctionComponent = () => <style type="text/css">{CSS}</style>;
+
+export default SvgFontCss;

package/packages/scrabble-solver/src/components/SvgFontCss/index.ts

@@ -0,0 +1 @@
+export { default } from './SvgFontCss';

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

@@ -1,5 +1,5 @@
 import { EMPTY_CELL } from '@scrabble-solver/constants';
-import React, {
+import {
   createRef,
   FocusEventHandler,
   FunctionComponent,

package/packages/scrabble-solver/src/components/Tile/TilePure.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {
+import {
   ChangeEventHandler,
   CSSProperties,
   FocusEventHandler,
@@ -66,7 +66,7 @@ const TilePure: FunctionComponent<Props> = ({
     style={style}
   >
     <input
-      autoCapitalize="off"
+      autoCapitalize="none"
       autoComplete="off"
       autoCorrect="off"
       autoFocus={autoFocus}

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, {
+import {
   FocusEvent,
   FocusEventHandler,
   MouseEvent,

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { forwardRef, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, HTMLAttributes, ReactNode } from 'react';
 
 import styles from './Well.module.scss';
 

package/packages/scrabble-solver/src/components/index.ts

@@ -21,6 +21,7 @@ export { default as Settings } from './Settings';
 export { default as Sidebar } from './Sidebar';
 export { default as Splash } from './Splash';
 export { default as SquareButton } from './SquareButton';
+export { default as SvgFontCss } from './SvgFontCss';
 export { default as Tile } from './Tile';
 export { useTooltip } from './Tooltip';
 export { default as Well } from './Well';

package/packages/scrabble-solver/src/hooks/usePortal.tsx

@@ -1,5 +1,5 @@
-import React, { ReactNode, useLayoutEffect, useMemo } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import { ReactNode, useLayoutEffect, useRef } from 'react';
+import { createRoot, Root } from 'react-dom/client';
 import { Portal } from 'react-portal';
 
 import { canUseDom, noop } from 'lib';
@@ -12,26 +12,36 @@ interface Props {
 type TagName = Parameters<typeof document.createElement>[0];
 
 const usePortal = (children: ReactNode, { disabled = false, tagName = 'div' }: Props = {}): void => {
-  const element = useMemo(() => document.createElement(tagName), [tagName]);
+  const rootRef = useRef<Root | null>(null);
 
   useLayoutEffect(() => {
     if (disabled) {
       return noop;
     }
 
+    const element = document.createElement(tagName);
     document.body.appendChild(element);
+    const root = createRoot(element);
+    rootRef.current = root;
 
     return () => {
-      unmountComponentAtNode(element);
-      document.body.removeChild(element);
+      // We need setTimeout for async unmount, otherwise we get this warning:
+      // "Attempted to synchronously unmount a root while React was already
+      // rendering. React cannot finish unmounting the root until the current
+      // render has completed, which may lead to a race condition.""
+      setTimeout(() => {
+        rootRef.current = null;
+        root.unmount();
+        element.remove();
+      }, 0);
     };
-  }, [disabled, element]);
+  }, [disabled, tagName]);
 
   useLayoutEffect(() => {
-    if (!disabled) {
-      render(<Portal>{children}</Portal>, element);
+    if (rootRef.current) {
+      rootRef.current.render(<Portal>{children}</Portal>);
     }
-  }, [children, disabled, element]);
+  }, [children, disabled, rootRef]);
 };
 
 export default canUseDom ? usePortal : noop;

package/packages/scrabble-solver/src/lib/createKeyboardNavigation.ts

@@ -11,6 +11,7 @@ interface Parameters {
   onDelete?: KeyboardEventHandler<HTMLInputElement>;
   onEnter?: KeyboardEventHandler<HTMLInputElement>;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+  onSpace?: KeyboardEventHandler<HTMLInputElement>;
 }
 
 const createKeyboardNavigation = ({
@@ -22,6 +23,7 @@ const createKeyboardNavigation = ({
   onDelete = noop,
   onEnter = noop,
   onKeyDown = noop,
+  onSpace = noop,
 }: Parameters): KeyboardEventHandler<HTMLInputElement> => {
   const handlers: Record<string, KeyboardEventHandler<HTMLInputElement>> = {
     ArrowUp: onArrowUp,
@@ -31,6 +33,7 @@ const createKeyboardNavigation = ({
     Backspace: onBackspace,
     Delete: onDelete,
     Enter: onEnter,
+    ' ': onSpace,
   };
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {

package/packages/scrabble-solver/src/lib/memoize.ts

@@ -1,5 +1,5 @@
 interface AnyFunction {
-  (...parameters: any): any; // eslint-disable-line @typescript-eslint/no-explicit-any
+  (...parameters: any[]): any; // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 interface AnyCachedFunction<T extends AnyFunction> extends AnyFunction {

package/packages/scrabble-solver/src/pages/_app.tsx

@@ -1,6 +1,6 @@
 import { AppProps } from 'next/app';
 import Head from 'next/head';
-import React, { FunctionComponent } from 'react';
+import { FunctionComponent } from 'react';
 import { Provider } from 'react-redux';
 
 import { createAppStore } from 'state';

package/packages/scrabble-solver/src/pages/_document.tsx

@@ -1,5 +1,5 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document';
-import React, { ReactElement } from 'react';
+import { ReactElement } from 'react';
 
 class MyDocument extends Document {
   render(): ReactElement {

package/packages/scrabble-solver/src/pages/index.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import fs from 'fs';
 import path from 'path';
-import React, { AnimationEvent, FormEvent, FunctionComponent, useState } from 'react';
+import { AnimationEvent, FormEvent, FunctionComponent, useState } from 'react';
 import Modal from 'react-modal';
 import { useDispatch } from 'react-redux';
 import { useEffectOnce, useMeasure } from 'react-use';
@@ -134,20 +134,11 @@ export const getStaticProps = async (): Promise<{ props: Props }> => {
   return { props: { version } };
 };
 
-const readVersion = (): Promise<string> => {
-  return new Promise((resolve, reject) => {
-    const packageJsonFilepath = path.resolve(process.cwd(), 'package.json');
-
-    fs.readFile(packageJsonFilepath, 'utf-8', (error, data) => {
-      if (error) {
-        reject(error);
-        return;
-      }
-
-      const packageJson = JSON.parse(data);
-      resolve(packageJson.version);
-    });
-  });
+const readVersion = async (): Promise<string> => {
+  const packageJsonFilepath = path.resolve(process.cwd(), 'package.json');
+  const data = await fs.promises.readFile(packageJsonFilepath, 'utf-8');
+  const packageJson = JSON.parse(data);
+  return packageJson.version;
 };
 
 export default Index;

package/packages/scrabble-solver/src/styles/global.scss

@@ -15,6 +15,9 @@ html,
 body {
   margin: 0 auto;
   padding: 0;
+}
+
+body {
   background-color: var(--color--background);
   color: var(--color--foreground);
   font-family: var(--font--family);

package/packages/solver/build/PatternsFiller.js

@@ -1,104 +1,70 @@
 "use strict";
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var constants_1 = require("@scrabble-solver/constants");
-var types_1 = require("@scrabble-solver/types");
-var PatternsFiller = /** @class */ (function () {
-    function PatternsFiller(config, trie) {
+const constants_1 = require("@scrabble-solver/constants");
+const types_1 = require("@scrabble-solver/types");
+class PatternsFiller {
+    constructor(config, trie) {
         this.config = config;
         this.trie = trie;
     }
-    PatternsFiller.prototype.fill = function (pattern, tiles) {
-        var patterns = [];
+    fill(pattern, tiles) {
+        const patterns = [];
         if (pattern.getNumberOfEmptyCells() > tiles.length) {
             return [];
         }
-        var onPatternFound = function (newPattern) { return patterns.push(newPattern); };
-        var tilesPermutations = this.generateBlankTilesPermutations(tiles);
-        for (var index = 0; index < tilesPermutations.length; ++index) {
-            var tilesPermutation = tilesPermutations[index];
-            this.fillPattern(pattern, String(pattern), tilesPermutation, onPatternFound);
+        const onPatternFound = (newPattern) => patterns.push(newPattern);
+        const tilesPermutations = this.generateBlankTilesPermutations(tiles);
+        for (let index = 0; index < tilesPermutations.length; ++index) {
+            const tilesPermutation = tilesPermutations[index];
+            this.fillPattern(pattern, pattern.toString(), tilesPermutation, onPatternFound);
         }
         return patterns;
-    };
-    PatternsFiller.prototype.fillPattern = function (pattern, word, tiles, onPatternFound) {
-        var indexOfFirstCellWithoutTile = pattern.getIndexOfFirstCellWithoutTile();
+    }
+    fillPattern(pattern, word, tiles, onPatternFound) {
+        const indexOfFirstCellWithoutTile = pattern.getIndexOfFirstCellWithoutTile();
         if (indexOfFirstCellWithoutTile === -1) {
             if (this.canAddPattern(pattern, word)) {
                 onPatternFound(pattern.clone());
             }
         }
         else {
-            for (var index = 0; index < tiles.length; ++index) {
-                var tile = tiles[index];
-                var remainingTiles = tiles.slice(0, index).concat(tiles.slice(index + 1));
-                var previousTile = pattern.cells[indexOfFirstCellWithoutTile].tile;
+            for (let index = 0; index < tiles.length; ++index) {
+                const tile = tiles[index];
+                const previousTile = pattern.cells[indexOfFirstCellWithoutTile].tile;
                 pattern.cells[indexOfFirstCellWithoutTile].tile = tile;
-                var indexOfNextCellWithoutTile = pattern.getIndexOfFirstCellWithoutTile();
-                var indexOfFirstEmptyLetter = word.indexOf(constants_1.EMPTY_CELL);
-                var newWordPrefix = word.substring(0, indexOfFirstEmptyLetter) + tile.character;
-                var newWord = newWordPrefix + word.substring(indexOfFirstEmptyLetter + 1);
+                const indexOfNextCellWithoutTile = pattern.getIndexOfFirstCellWithoutTile();
+                const indexOfFirstEmptyLetter = word.indexOf(constants_1.EMPTY_CELL);
+                const newWordPrefix = word.substring(0, indexOfFirstEmptyLetter) + tile.character;
+                const newWord = newWordPrefix + word.substring(indexOfFirstEmptyLetter + 1);
                 if (indexOfNextCellWithoutTile === -1) {
                     if (this.canAddPattern(pattern, newWord)) {
                         onPatternFound(pattern.clone());
                     }
                 }
                 else if (this.trie.hasPrefix(newWordPrefix)) {
-                    this.fillPattern(pattern, newWord, remainingTiles, onPatternFound);
+                    tiles.splice(index, 1);
+                    this.fillPattern(pattern, newWord, tiles, onPatternFound);
+                    tiles.splice(index, 0, tile);
                 }
                 pattern.cells[indexOfFirstCellWithoutTile].tile = previousTile;
             }
         }
-    };
-    PatternsFiller.prototype.canAddPattern = function (pattern, word) {
-        var _this = this;
-        return (this.trie.has(word) &&
-            pattern
-                .getCollisions()
-                .map(String)
-                .every(function (collision) { return _this.trie.has(collision); }));
-    };
-    PatternsFiller.prototype.generateBlankTilesPermutations = function (tiles) {
-        var _this = this;
-        var alphabet = this.config.alphabet;
-        var firstBlankIndex = tiles.findIndex(function (_a) {
-            var character = _a.character, isBlank = _a.isBlank;
-            return isBlank && !alphabet.includes(character);
-        });
+    }
+    canAddPattern(pattern, word) {
+        return this.trie.has(word) && pattern.getCollisions().every((collision) => this.trie.has(collision.toString()));
+    }
+    generateBlankTilesPermutations(tiles) {
+        const { alphabet } = this.config;
+        const firstBlankIndex = tiles.findIndex(({ character, isBlank }) => isBlank && !alphabet.includes(character));
         if (firstBlankIndex === -1) {
             return [tiles];
         }
-        var remainingTiles = tiles.slice(0, firstBlankIndex).concat(tiles.slice(firstBlankIndex + 1));
-        return this.config.alphabet.reduce(function (permutations, character) {
-            var newTile = new types_1.Tile({ character: character, isBlank: true });
-            var newTiles = __spreadArray(__spreadArray([], __read(remainingTiles), false), [newTile], false);
-            return permutations.concat(_this.generateBlankTilesPermutations(newTiles));
+        const remainingTiles = tiles.slice(0, firstBlankIndex).concat(tiles.slice(firstBlankIndex + 1));
+        return this.config.alphabet.reduce((permutations, character) => {
+            const newTile = new types_1.Tile({ character, isBlank: true });
+            const newTiles = [...remainingTiles, newTile];
+            return permutations.concat(this.generateBlankTilesPermutations(newTiles));
         }, []);
-    };
-    return PatternsFiller;
-}());
+    }
+}
 exports.default = PatternsFiller;