arui-scripts 20.0.0 → 20.1.0

package/docs/compression-dictionary.md

@@ -0,0 +1,130 @@
+# Compression dictionary transport
+
+## Настройки
+
+### `dictionaryCompression.dictionaryPath`
+**Тип:** `string[]`
+**По умолчанию:** `[]`
+**Описание:** Массив путей до предыдущих версий ассетов или готовых словарей для сжатия бандла приложения.
+
+- Поддерживает как абсолютные, так и относительные пути (относительно корня проекта)
+- Может содержать как файлы (готовые словари), так и директории (предыдущие версии приложения)
+- Словари будут скопированы в директорию сборки
+- Директории используются для создания DCB-файлов из предыдущих версий
+
+### `dictionaryCompression.enablePreviousVersionHeaders`
+**Тип:** `boolean`
+**По умолчанию:** `false`
+**Описание:** Включает автоматическую простановку заголовка `brotli_auto_dictionary on;` в конфигурации nginx для использования ресурсов приложения как словарей.
+
+## Пример конфигурации
+
+```ts
+import { PackageSettings } from 'arui-scripts';
+
+const settings: PackageSettings = {
+    dictionaryCompression: {
+        dictionaryPath: [
+            './build-v1.0', // Предыдущая версия (директория)
+            './custom.dict'  // Готовый словарь (файл)
+        ],
+        enablePreviousVersionHeaders: true
+    }
+};
+
+export default settings;
+```
+
+## Общее описание механизма
+
+Механизм [compression dictionary transport](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Compression_dictionary_transport)
+позволяет использовать кастомные словари для сжатия ресурсов приложения.
+
+На данный момент arui-scripts поддерживает два механизма работы со словарями:
+1. Использование вашего собственного словаря для сжатия ресурсов приложения
+2. Использование одной версии вашего приложения для сжатия ресурсов другой версии.
+
+Оба механизма работают только для prod сборки приложения при использовании базового docker образа, поставляемого с arui-scripts.
+
+### Использование вашего словаря
+
+По умолчанию brotli использует встроенный в него словарь для более эффективного сжатия. Встроенный в brotli словарь подготовлен
+на основании данных из всего интернета. Если сделать словарь персонально под ваши ресурсы - можно получить более эффективное сжатие, даже
+учитывая дополнительные затраты на загрузку словаря на клиент.
+
+#### Создание персонального словаря
+Для создания персонального словаря вы можете использовать утилиту [brotli-dict](https://www.npmjs.com/package/brotli-dict).
+
+```shell
+npx brotli-dict generate file1.js file2.js file3.css -o dictionary.dict -s 200000
+```
+
+Здесь:
+- `file1.js`, `file2.js`, `file3.css` - произвольные текстовые файлы которые вы хотите использовать для создания словаря
+- `dictionary.dict` - имя файла для создаваемого словаря
+- `-s 200000` - ограничивает максимальную длину словаря в 200000. Имейте в виду, что словарь после создания так же можно сжать, поэтому по сети будет передаваться меньше данных.
+
+Рекомендуется создать 1 словарь на всю систему, живущую на одном домене. Вы можете взять ресурсы с самых посещаемых страниц и использовать их как исходники для словаря.
+Обновлять их при изменении приложений не обязательно - словари скорее всего не будут содержать сильно специфичного для конкретной версии контента.
+
+#### Выбор идентификатора для словаря
+
+Для корректной работы со словарем у него должен быть идентификатор. Он будет:
+- использоваться как имя файла для словаря
+- использоваться как суффикс имени сжатых словарем ассетов
+- использоваться в заголовке `Use-As-Dictionary`.
+
+В дальнейших примерах я буду использовать идентификатор `dict-id`.
+
+#### Загрузка словаря на клиент
+Для того чтобы браузер начал использовать словари их нужно как то загрузить на клиент.
+Это можно сделать 3 способами:
+
+- Указав заголовок `Link '</assets/dict-id.dict>; rel="compression-dictionary"';` в ответе на запрос за любым документом
+- Добавив тег `<link rel="compression-dictionary" href="./assets/dict-id.dict" />` в html вашего приложения
+- Сделав `fetch` адреса словаря из вашего кода (`fetch('./assets/dict-id.dict')`).
+
+В независимости от метода, в ответ браузер **должен** получить помимо контента словаря так же заголовок `Use-As-Dictionary`, например:
+```
+Use-As-Dictionary: 'match="/assets/*", id="dict-id"'
+```
+
+Вы можете добиться этого добавив такие строки в nginx.conf:
+
+```
+    location /assets/dict-id.dict {
+        expires max;
+        add_header Use-As-Dictionary 'match="/assets/*", id="dict-id"';
+        root /src/.build;
+    }
+```
+
+Про то, как корректно настраивать заголовок `Use-As-Dictionary` можно прочитать в [mdn](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Use-As-Dictionary).
+
+### Использование предыдущих версий приложения
+
+Если ваше приложение часто обновляется, а пользователи все время возвращаются - можно использовать механизм сжатия с помощью предыдущих версий.
+Он может давать очень высокий коэффицент сжатия если у пользователя есть предыдущая версия приложения в кеше.
+
+#### Настройка
+
+```ts
+const settings: PackageSettings = {
+    dictionaryCompression: {
+        dictionaryPath: [
+            './previous-builds/v1.0/assets',
+            './previous-builds/v1.1/assets'
+        ],
+        enablePreviousVersionHeaders: true
+    }
+};
+```
+
+При такой конфигурации:
+1. **arui-scripts** найдёт все `.js` и `.css` файлы в указанных директориях
+2. Создаст DCB-файлы (Dictionary Compressed Brotli) для каждого файла текущей сборки, используя соответствующие файлы из предыдущих версий как словари
+3. Nginx будет настроен с `brotli_auto_dictionary on;` для автоматического использования этих словарей
+
+Соответствие файлов определяется по их имени. Считаем что файлы в сборке используют формат вида `{stable-name}.{hash}.{ext}`. Соответствующими считаются файлы с одинаковым
+`{stable-name}` и `{ext}`.
+DCB файлы будут иметь название `{stable-name}.{hash}.{ext}.{dict hash}.dcb`.

package/docs/settings.md

@@ -162,7 +162,6 @@ const settings = {
 Ко всем клиентским entryPoint так же будут добавлены `clientPolyfillsEntry` (если задан)
 и, в dev режиме, необходимые для hot-module-reload файлы
 
-
 ### Настройки сборки артефактов
 
 #### dockerRegistry
@@ -200,6 +199,20 @@ const settings = {
 #### archiveName
 Имя архива, который будет создан при использовании команды [archive-build](./commands.md#archive-build). По умолчанию `'build.tar'`.
 
+#### dictionaryCompression
+
+Настройки сжатия со словарём. Используется для сжатия ассетов с поддержкой compression dictionary transport.
+
+- `dictionaryCompression.dictionaryPath` - массив строк с путями до предыдущих версий ассетов или словарей, с помощью которых будет сжат бандл приложения.
+- `dictionaryCompression.enablePreviousVersionHeaders` - включает автоматическую простановку заголовков `Use-As-Dictionary` для использования ресурсов приложения как словарей. Можно включать только при использовании последних версий базовых докер-образов.
+
+Если `dictionaryPath` содержит путь до единичного файла - этот файл будет использован как словарь для сжатия всех ассетов приложения.
+Сам словарь так же будет добавлен в сборку и сжат с помощью brotli.
+
+Если `dictionaryPath` содержит путь до папки - эта папка будет рассматриваться как папка с предыдущей версией приложения. Файлы из текущей сборки будут сжиматься с помощью совпадающих файлов предыдущей версии.
+
+Подробнее об этой фиче можно почитать в [отдельном документе](./compression-dictionary).
+
 ### Модификация сборки
 #### keepPropTypes
 Позволяет отключить удаление `prop-types` из бандла. По умолчанию `false`.

package/package.json

@@ -1,180 +1,181 @@
 {
-    "name": "arui-scripts",
-    "version": "20.0.0",
-    "main": "./build/index.js",
-    "typings": "./build/index.d.ts",
-    "license": "MPL-2.0",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/core-ds/arui-scripts.git"
-    },
-    "bugs": {
-        "url": "https://github.com/core-ds/arui-scripts/issues"
-    },
-    "homepage": "https://github.com/core-ds/arui-scripts#readme",
-    "bin": "./build/bin/index.js",
-    "dependencies": {
-        "@alfalab/postcss-custom-properties": "^9.1.2",
-        "@babel/core": "7.22.10",
-        "@babel/plugin-proposal-decorators": "^7.23.7",
-        "@babel/plugin-proposal-export-default-from": "^7.23.3",
-        "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@babel/plugin-transform-class-properties": "^7.23.3",
-        "@babel/plugin-transform-export-namespace-from": "^7.23.4",
-        "@babel/plugin-transform-modules-commonjs": "7.22.5",
-        "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
-        "@babel/plugin-transform-numeric-separator": "^7.23.4",
-        "@babel/plugin-transform-object-rest-spread": "^7.23.4",
-        "@babel/plugin-transform-optional-chaining": "^7.23.4",
-        "@babel/plugin-transform-private-methods": "^7.23.3",
-        "@babel/plugin-transform-private-property-in-object": "^7.23.4",
-        "@babel/plugin-transform-proto-to-assign": "^7.23.3",
-        "@babel/plugin-transform-react-constant-elements": "^7.23.3",
-        "@babel/plugin-transform-react-inline-elements": "^7.23.3",
-        "@babel/plugin-transform-runtime": "^7.23.7",
-        "@babel/preset-env": "^7.23.8",
-        "@babel/preset-react": "^7.23.3",
-        "@babel/preset-typescript": "^7.23.3",
-        "@babel/runtime": "^7.23.8",
-        "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
-        "@rsdoctor/rspack-plugin": "0.4.11",
-        "@rspack/cli": "1.1.5",
-        "@rspack/core": "1.1.5",
-        "@rspack/dev-server": "1.0.9",
-        "@rspack/plugin-react-refresh": "^1.0.0",
-        "@swc/core": "1.9.3",
-        "@swc/jest": "^0.2.36",
-        "assets-webpack-plugin": "7.1.1",
-        "autoprefixer": "^10.3.16",
-        "babel-core": "^7.0.0-bridge.0",
-        "babel-jest": "28.1.3",
-        "babel-loader": "9.2.1",
-        "babel-plugin-istanbul": "^7.0.0",
-        "babel-plugin-transform-react-remove-prop-types": "0.4.24",
-        "case-sensitive-paths-webpack-plugin": "2.4.0",
-        "chalk": "^2.4.2",
-        "compression-webpack-plugin": "9.2.0",
-        "core-js": "3.32.0",
-        "css-loader": "6.8.1",
-        "css-minimizer-webpack-plugin": "3.4.1",
-        "expose-loader": "3.1.0",
-        "filesize": "^6.4.0",
-        "fork-ts-checker-webpack-plugin": "6.5.3",
-        "fs-extra": "6.0.1",
-        "gzip-size": "5.1.1",
-        "html-webpack-plugin": "^5.6.0",
-        "image-minimizer-webpack-plugin": "^3.8.3",
-        "imagemin": "^8.0.1",
-        "imagemin-svgo": "^10.0.1",
-        "jest": "^29.7.0",
-        "jest-config": "^29.7.0",
-        "jest-resolve": "^29.7.0",
-        "jest-snapshot-serializer-class-name-to-string": "1.0.0",
-        "lodash.merge": "4.6.2",
-        "mini-css-extract-plugin": "2.7.6",
-        "mini-svg-data-uri": "^1.4.4",
-        "null-loader": "0.1.1",
-        "pnp-webpack-plugin": "1.7.0",
-        "postcss": "^8.4.31",
-        "postcss-calc": "^9.0.0",
-        "postcss-color-function": "^4.0.0",
-        "postcss-color-mod-function": "^3.0.0",
-        "postcss-custom-media": "^9.0.0",
-        "postcss-custom-properties": "^13.0.0",
-        "postcss-discard-comments": "^6.0.0",
-        "postcss-discard-duplicates": "^6.0.0",
-        "postcss-each": "^1.0.0",
-        "postcss-for": "^2.0.0",
-        "postcss-import": "^15.0.0",
-        "postcss-inherit": "^4.0.0",
-        "postcss-loader": "^7.0.0",
-        "postcss-media-query-parser": "^0.2.3",
-        "postcss-mixins": "^9.0.0",
-        "postcss-nested": "^6.0.0",
-        "postcss-omit-import-tilde": "^1.0.0",
-        "postcss-remove-root": "^0.0.2",
-        "postcss-strip-units": "^2.0.0",
-        "postcss-url": "^10.0.0",
-        "react-dev-utils": "12.0.1",
-        "react-refresh": "0.10.0",
-        "react-refresh-typescript": "2.0.2",
-        "rimraf": "^2.7.1",
-        "rspack-manifest-plugin": "5.0.1",
-        "run-script-webpack-plugin": "0.0.11",
-        "semver": "^7.5.4",
-        "shelljs": "0.8.5",
-        "strip-ansi": "6.0.1",
-        "style-loader": "3.3.3",
-        "swc-loader": "^0.2.6",
-        "swc-plugin-coverage-instrument": "^0.0.25",
-        "tar": "6.2.1",
-        "terser-webpack-plugin": "5.3.14",
-        "ts-jest": "28.0.8",
-        "ts-loader": "9.4.4",
-        "ts-node": "9.1.1",
-        "webpack-bundle-analyzer": "4.10.2",
-        "webpack-deduplication-plugin": "^0.0.8",
-        "webpack-manifest-plugin": "3.2.0",
-        "webpack-node-externals": "3.0.0"
-    },
-    "devDependencies": {
-        "@types/assets-webpack-plugin": "6.1.2",
-        "@types/case-sensitive-paths-webpack-plugin": "2.1.6",
-        "@types/compression-webpack-plugin": "4.0.1",
-        "@types/fs-extra": "^9.0.13",
-        "@types/jest": "^29.5.14",
-        "@types/lodash.merge": "^4.6.7",
-        "@types/node": "12.20.55",
-        "@types/postcss-media-query-parser": "0.2.4",
-        "@types/react-dev-utils": "9.0.11",
-        "@types/semver": "^7.5.0",
-        "@types/shelljs": "^0.8.12",
-        "@types/start-server-webpack-plugin": "2.2.2",
-        "@types/tar": "^4.0.5",
-        "@types/webpack": "^5.28.5",
-        "@types/webpack-bundle-analyzer": "4.7.0",
-        "@types/webpack-dev-server": "^4.7.1",
-        "@types/webpack-manifest-plugin": "3.0.5",
-        "@types/webpack-node-externals": "^3.0.0",
-        "eslint": "^8.20.0",
-        "eslint-config-custom": "workspace:*",
-        "prettier": "^2.7.1",
-        "stylelint": "^14.9.1",
-        "type-fest": "2.19.0",
-        "typescript": "5.6.3"
-    },
-    "optionalDependencies": {
-        "brotli-size": "^4.0.0"
-    },
-    "engines": {
-        "node": ">=12.13.0"
-    },
-    "scripts": {
-        "build": "sh bin/build.sh",
-        "test": "jest",
-        "lint:css": "stylelint ./src/**/*.css",
-        "lint:scripts": "eslint \"**/*.{js,jsx,ts,tsx}\" --ext .js,.jsx,.ts,.tsx",
-        "lint": "yarn lint:css && yarn lint:scripts",
-        "lint:fix": "yarn lint:css --fix && yarn lint:scripts --fix",
-        "format": "prettier --write $INIT_CWD/{config,src}/**/*.{ts,tsx,js,jsx,css}",
-        "audit": "yarn npm audit --severity high --environment production"
-    },
-    "peerDependencies": {
-        "imagemin-gifsicle": "^7.0.0",
-        "imagemin-mozjpeg": "^10.0.0",
-        "imagemin-optipng": "^8.0.0",
-        "react": ">=16.3.0",
-        "react-dom": ">=16.3.0",
-        "typescript": ">=4.0.0"
-    },
-    "jest": {
-        "testRegex": "src/.*/__tests__/.*\\.ts$",
-        "moduleFileExtensions": [
-            "ts",
-            "js"
-        ],
-        "transform": {
-            "^.+\\.tsx?$": "ts-jest"
-        }
+  "name": "arui-scripts",
+  "version": "20.1.0",
+  "main": "./build/index.js",
+  "typings": "./build/index.d.ts",
+  "license": "MPL-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/core-ds/arui-scripts.git"
+  },
+  "bugs": {
+    "url": "https://github.com/core-ds/arui-scripts/issues"
+  },
+  "homepage": "https://github.com/core-ds/arui-scripts#readme",
+  "bin": "./build/bin/index.js",
+  "dependencies": {
+    "@alfalab/postcss-custom-properties": "^9.1.2",
+    "@babel/core": "7.22.10",
+    "@babel/plugin-proposal-decorators": "^7.23.7",
+    "@babel/plugin-proposal-export-default-from": "^7.23.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
+    "@babel/plugin-transform-export-namespace-from": "^7.23.4",
+    "@babel/plugin-transform-modules-commonjs": "7.22.5",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.23.4",
+    "@babel/plugin-transform-numeric-separator": "^7.23.4",
+    "@babel/plugin-transform-object-rest-spread": "^7.23.4",
+    "@babel/plugin-transform-optional-chaining": "^7.23.4",
+    "@babel/plugin-transform-private-methods": "^7.23.3",
+    "@babel/plugin-transform-private-property-in-object": "^7.23.4",
+    "@babel/plugin-transform-proto-to-assign": "^7.23.3",
+    "@babel/plugin-transform-react-constant-elements": "^7.23.3",
+    "@babel/plugin-transform-react-inline-elements": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.26.10",
+    "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
+    "@rsdoctor/rspack-plugin": "0.4.11",
+    "@rspack/cli": "1.1.5",
+    "@rspack/core": "1.1.5",
+    "@rspack/dev-server": "1.0.9",
+    "@rspack/plugin-react-refresh": "^1.0.0",
+    "@swc/core": "1.9.3",
+    "@swc/jest": "^0.2.36",
+    "assets-webpack-plugin": "7.1.1",
+    "autoprefixer": "^10.3.16",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "28.1.3",
+    "babel-loader": "9.2.1",
+    "babel-plugin-istanbul": "^7.0.0",
+    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
+    "brotli-dict": "^1.1.4",
+    "case-sensitive-paths-webpack-plugin": "2.4.0",
+    "chalk": "^2.4.2",
+    "compression-webpack-plugin": "9.2.0",
+    "core-js": "3.32.0",
+    "css-loader": "6.8.1",
+    "css-minimizer-webpack-plugin": "3.4.1",
+    "expose-loader": "3.1.0",
+    "filesize": "^6.4.0",
+    "fork-ts-checker-webpack-plugin": "6.5.3",
+    "fs-extra": "6.0.1",
+    "gzip-size": "5.1.1",
+    "html-webpack-plugin": "^5.6.0",
+    "image-minimizer-webpack-plugin": "^3.8.3",
+    "imagemin": "^8.0.1",
+    "imagemin-svgo": "^10.0.1",
+    "jest": "^29.7.0",
+    "jest-config": "^29.7.0",
+    "jest-resolve": "^29.7.0",
+    "jest-snapshot-serializer-class-name-to-string": "1.0.0",
+    "lodash.merge": "4.6.2",
+    "mini-css-extract-plugin": "2.7.6",
+    "mini-svg-data-uri": "^1.4.4",
+    "null-loader": "0.1.1",
+    "pnp-webpack-plugin": "1.7.0",
+    "postcss": "^8.4.31",
+    "postcss-calc": "^9.0.0",
+    "postcss-color-function": "^4.0.0",
+    "postcss-color-mod-function": "^3.0.0",
+    "postcss-custom-media": "^9.0.0",
+    "postcss-custom-properties": "^13.0.0",
+    "postcss-discard-comments": "^6.0.0",
+    "postcss-discard-duplicates": "^6.0.0",
+    "postcss-each": "^1.0.0",
+    "postcss-for": "^2.0.0",
+    "postcss-import": "^15.0.0",
+    "postcss-inherit": "^4.0.0",
+    "postcss-loader": "^7.0.0",
+    "postcss-media-query-parser": "^0.2.3",
+    "postcss-mixins": "^9.0.0",
+    "postcss-nested": "^6.0.0",
+    "postcss-omit-import-tilde": "^1.0.0",
+    "postcss-remove-root": "^0.0.2",
+    "postcss-strip-units": "^2.0.0",
+    "postcss-url": "^10.0.0",
+    "react-dev-utils": "12.0.1",
+    "react-refresh": "0.10.0",
+    "react-refresh-typescript": "2.0.2",
+    "rimraf": "^2.7.1",
+    "rspack-manifest-plugin": "5.0.1",
+    "run-script-webpack-plugin": "0.0.11",
+    "semver": "^7.5.4",
+    "shelljs": "0.8.5",
+    "strip-ansi": "6.0.1",
+    "style-loader": "3.3.3",
+    "swc-loader": "^0.2.6",
+    "swc-plugin-coverage-instrument": "^0.0.25",
+    "tar": "6.2.1",
+    "terser-webpack-plugin": "5.3.14",
+    "ts-jest": "28.0.8",
+    "ts-loader": "9.4.4",
+    "ts-node": "9.1.1",
+    "webpack-bundle-analyzer": "4.10.2",
+    "webpack-deduplication-plugin": "^0.0.8",
+    "webpack-manifest-plugin": "3.2.0",
+    "webpack-node-externals": "3.0.0"
+  },
+  "devDependencies": {
+    "@types/assets-webpack-plugin": "6.1.2",
+    "@types/case-sensitive-paths-webpack-plugin": "2.1.6",
+    "@types/compression-webpack-plugin": "4.0.1",
+    "@types/fs-extra": "^9.0.13",
+    "@types/jest": "^29.5.14",
+    "@types/lodash.merge": "^4.6.7",
+    "@types/node": "18.19.121",
+    "@types/postcss-media-query-parser": "0.2.4",
+    "@types/react-dev-utils": "9.0.11",
+    "@types/semver": "^7.5.0",
+    "@types/shelljs": "^0.8.12",
+    "@types/start-server-webpack-plugin": "2.2.2",
+    "@types/tar": "^4.0.5",
+    "@types/webpack": "^5.28.5",
+    "@types/webpack-bundle-analyzer": "4.7.0",
+    "@types/webpack-dev-server": "^4.7.1",
+    "@types/webpack-manifest-plugin": "3.0.5",
+    "@types/webpack-node-externals": "^3.0.0",
+    "eslint": "^8.20.0",
+    "eslint-config-custom": "0.0.0",
+    "prettier": "^2.7.1",
+    "stylelint": "^14.9.1",
+    "type-fest": "2.19.0",
+    "typescript": "5.6.3"
+  },
+  "optionalDependencies": {
+    "brotli-size": "^4.0.0"
+  },
+  "engines": {
+    "node": ">=12.13.0"
+  },
+  "scripts": {
+    "build": "sh bin/build.sh",
+    "test": "jest",
+    "lint:css": "stylelint ./src/**/*.css",
+    "lint:scripts": "eslint \"**/*.{js,jsx,ts,tsx}\" --ext .js,.jsx,.ts,.tsx",
+    "lint": "yarn lint:css && yarn lint:scripts",
+    "lint:fix": "yarn lint:css --fix && yarn lint:scripts --fix",
+    "format": "prettier --write $INIT_CWD/{config,src}/**/*.{ts,tsx,js,jsx,css}",
+    "audit": "yarn npm audit --severity high --environment production"
+  },
+  "peerDependencies": {
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-mozjpeg": "^10.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0",
+    "typescript": ">=4.0.0"
+  },
+  "jest": {
+    "testRegex": "src/.*/__tests__/.*\\.ts$",
+    "moduleFileExtensions": [
+      "ts",
+      "js"
+    ],
+    "transform": {
+      "^.+\\.tsx?$": "ts-jest"
     }
-}
+  }
+}