fixed ramda imports to reduce bundle size

next.config.js

@@ -1,7 +1,11 @@
 /** used to transpile UMD and CJS modules */
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
 const withTM = require('next-transpile-modules')(['ramda']);
 
-module.exports = withTM({
+module.exports = withBundleAnalyzer(
+  withTM({
     /** rewrite old-style node paths */
     async rewrites() {
       return [
@@ -14,4 +18,5 @@ module.exports = withTM({
 
     /** don't try to optimize fonts */
     optimizeFonts: false,
-});
+  })
+);

package.json

@@ -51,14 +51,15 @@
     "yup": "^0.32.9"
   },
   "scripts": {
-    "start": "craco start",
-    "build": "craco build",
     "ts-check": "tsc -p tsconfig.json --noEmit",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prepare": "husky install",
     "next:dev": "next dev",
     "next:build": "next build",
-    "next:start": "next start -p 80"
+    "next:start": "next start -p 80",
+    "analyze": "ANALYZE=true next build",
+    "analyze:server": "BUNDLE_ANALYZE=server next build",
+    "analyze:browser": "BUNDLE_ANALYZE=browser next build"
   },
   "eslintConfig": {
     "extends": [
@@ -79,6 +80,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^6.4.3",
+    "@next/bundle-analyzer": "^12.0.8",
     "@next/eslint-plugin-next": "^12.0.8",
     "@types/classnames": "^2.2.7",
     "@types/marked": "^1.2.2",
@@ -86,6 +88,7 @@
     "@types/ramda": "^0.26.33",
     "@types/throttle-debounce": "^2.1.0",
     "@types/yup": "^0.29.11",
+    "babel-plugin-transform-imports": "^2.0.0",
     "craco-alias": "^2.3.1",
     "eslint-plugin-import": "^2.25.4",
     "husky": "^7.0.4",

src/components/bars/PlayerBar/index.tsx

@@ -1,11 +1,10 @@
 import React, { useCallback, VFC } from 'react';
 
-import { path } from 'ramda';
-
 import { Icon } from '~/components/input/Icon';
 import { PlayerState } from '~/constants/player';
 import { IFile } from '~/types';
 import { PlayerProgress } from '~/types/player';
+import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/components/comment/CommentAvatar/index.tsx

@@ -1,11 +1,11 @@
 import React, { FC, useCallback, useState } from 'react';
 
-import { path } from 'ramda';
 import { Manager, Popper, Reference } from 'react-popper';
 
 import { Avatar } from '~/components/common/Avatar';
 import { useRandomPhrase } from '~/constants/phrases';
 import { IUser } from '~/types/auth';
+import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/components/comment/CommentContent/index.tsx

@@ -2,8 +2,6 @@ import React, { createElement, FC, Fragment, memo, useCallback, useMemo, useStat
 
 import classnames from 'classnames';
 import classNames from 'classnames';
-import { append, assocPath, path } from 'ramda';
-import reduce from 'ramda/es/reduce';
 
 import { CommentForm } from '~/components/comment/CommentForm';
 import { Group } from '~/components/containers/Group';
@@ -13,14 +11,12 @@ import { UploadType } from '~/constants/uploads';
 import { PRESETS } from '~/constants/urls';
 import { IComment, IFile } from '~/types';
 import { formatCommentText, getPrettyDate, getURL } from '~/utils/dom';
+import { append, assocPath, path, reduce } from '~/utils/ramda';
 
 import { CommentMenu } from '../CommentMenu';
 
 import styles from './styles.module.scss';
 
-
-
-
 interface IProps {
   nodeId: number;
   comment: IComment;

src/components/containers/CommentWrapper/index.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 
 import classNames from 'classnames';
-import { path } from 'ramda';
 
 import { CommentAvatar } from '~/components/comment/CommentAvatar';
 import { IUser } from '~/types/auth';
+import { path } from '~/utils/ramda';
 import { DivProps } from '~/utils/types';
 
 import styles from './styles.module.scss';

src/components/editors/AudioEditor/index.tsx

@@ -1,7 +1,5 @@
 import React, { FC, useCallback, useMemo } from 'react';
 
-import { values } from 'ramda';
-
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { UploadType } from '~/constants/uploads';
 import { useNodeAudios } from '~/hooks/node/useNodeAudios';
@@ -9,13 +7,13 @@ import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { NodeEditorProps } from '~/types/node';
 import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+import { values } from '~/utils/ramda';
 
 import { AudioGrid } from '../AudioGrid';
 import { ImageGrid } from '../ImageGrid';
 
 import styles from './styles.module.scss';
 
-
 type IProps = NodeEditorProps;
 
 const AudioEditor: FC<IProps> = () => {

src/components/editors/EditorActionsPanel/index.tsx

@@ -1,9 +1,8 @@
 import React, { createElement, FC } from 'react';
 
-import { has } from 'ramda';
-
 import { NODE_PANEL_COMPONENTS } from '~/constants/node';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
+import { has } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/components/editors/ImageEditor/index.tsx

@@ -1,11 +1,10 @@
 import React, { FC } from 'react';
 
-import { values } from 'ramda';
-
 import { ImageGrid } from '~/components/editors/ImageGrid';
 import { UploadDropzone } from '~/components/upload/UploadDropzone';
 import { NodeEditorProps } from '~/types/node';
 import { useUploaderContext } from '~/utils/context/UploaderContextProvider';
+import { values } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/components/editors/TextEditor/index.tsx

@@ -1,11 +1,10 @@
 import React, { FC, useCallback } from 'react';
 
-import { path } from 'ramda';
-
 import { Textarea } from '~/components/input/Textarea';
 import { useRandomPhrase } from '~/constants/phrases';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 import { NodeEditorProps } from '~/types/node';
+import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/components/editors/VideoEditor/index.tsx

@@ -1,12 +1,12 @@
 import React, { FC, useCallback, useMemo } from 'react';
 
 import classnames from 'classnames';
-import { path } from 'ramda';
 
 import { InputText } from '~/components/input/InputText';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 import { NodeEditorProps } from '~/types/node';
 import { getYoutubeThumb } from '~/utils/dom';
+import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/components/lab/LabText/index.tsx

@@ -1,16 +1,14 @@
 import React, { FC, useMemo } from 'react';
 
-import { path } from 'ramda';
-
 import { Markdown } from '~/components/containers/Markdown';
 import { Paragraph } from '~/components/placeholders/Paragraph';
 import { INodeComponentProps } from '~/constants/node';
 import { useGotoNode } from '~/hooks/node/useGotoNode';
 import { formatTextParagraphs } from '~/utils/dom';
+import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-
 const LabText: FC<INodeComponentProps> = ({ node, isLoading }) => {
   const content = useMemo(() => formatTextParagraphs(path(['blocks', 0, 'text'], node) || ''), [
     node,

src/components/node/NodeAudioImageBlock/index.tsx

@@ -1,11 +1,10 @@
 import React, { FC } from 'react';
 
-import { path } from 'ramda';
-
 import { INodeComponentProps } from '~/constants/node';
 import { PRESETS } from '~/constants/urls';
 import { useNodeImages } from '~/hooks/node/useNodeImages';
 import { getURL } from '~/utils/dom';
+import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/components/node/NodeRelated/placeholder.tsx

@@ -1,15 +1,14 @@
 import React, { FC, memo } from 'react';
 
 import classNames from 'classnames';
-import range from 'ramda/es/range';
 
 import { Group } from '~/components/containers/Group';
 import cell_style from '~/components/node/NodeRelatedItem/styles.module.scss';
 import { Placeholder } from '~/components/placeholders/Placeholder';
+import { range } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-
 interface IProps {}
 
 const NodeRelatedPlaceholder: FC<IProps> = memo(() => {

src/components/node/NodeTextBlock/index.tsx

@@ -1,15 +1,14 @@
 import React, { FC, useMemo } from 'react';
 
 import classNames from 'classnames';
-import { path } from 'ramda';
 
 import { INodeComponentProps } from '~/constants/node';
 import markdown from '~/styles/common/markdown.module.scss';
 import { formatTextParagraphs } from '~/utils/dom';
+import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 
-
 interface IProps extends INodeComponentProps {}
 
 const NodeTextBlock: FC<IProps> = ({ node }) => {

src/components/node/NodeVideoBlock/index.tsx

@@ -1,8 +1,7 @@
 import React, { FC, useMemo } from 'react';
 
-import { path } from 'ramda';
-
 import { INodeComponentProps } from '~/constants/node';
+import { path } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/components/profile/ProfileSettings/index.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
 
 import classNames from 'classnames';
-import { has } from 'ramda';
 
 import { Filler } from '~/components/containers/Filler';
 import { Group } from '~/components/containers/Group';
@@ -13,7 +12,7 @@ import { ProfileAccounts } from '~/containers/profile/ProfileAccounts';
 import { usePatchUser } from '~/hooks/auth/usePatchUser';
 import { useUser } from '~/hooks/auth/useUser';
 import { useProfileForm } from '~/hooks/profile/useProfileForm';
-
+import { has } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/containers/dialogs/EditorCreateDialog/index.tsx

@@ -1,12 +1,11 @@
 import React, { FC, useCallback, useMemo, useRef } from 'react';
 
-import { values } from 'ramda';
-
 import { EMPTY_NODE, NODE_TYPES } from '~/constants/node';
 import { EditorDialog } from '~/containers/dialogs/EditorDialog';
 import { useCreateNode } from '~/hooks/node/useCreateNode';
 import { INode } from '~/types';
 import { DialogComponentProps } from '~/types/modal';
+import { values } from '~/utils/ramda';
 
 export interface EditorCreateDialogProps extends DialogComponentProps {
   type: typeof NODE_TYPES[keyof typeof NODE_TYPES];

src/containers/dialogs/EditorDialog/index.tsx

@@ -2,7 +2,6 @@ import React, { createElement, FC, useCallback, useMemo, useState } from 'react'
 
 import { FormikProvider } from 'formik';
 import { observer } from 'mobx-react-lite';
-import { prop } from 'ramda';
 
 import { CoverBackdrop } from '~/components/containers/CoverBackdrop';
 import { BetterScrollDialog } from '~/components/dialogs/BetterScrollDialog';
@@ -16,7 +15,7 @@ import { useNodeFormFormik } from '~/hooks/node/useNodeFormFormik';
 import { INode } from '~/types';
 import { DialogComponentProps } from '~/types/modal';
 import { UploaderContextProvider } from '~/utils/context/UploaderContextProvider';
-
+import { prop } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/containers/dialogs/Modal/index.tsx

@@ -1,11 +1,11 @@
 import React, { FC } from 'react';
 
 import { observer } from 'mobx-react-lite';
-import { has } from 'ramda';
 
 import { ModalWrapper } from '~/components/dialogs/ModalWrapper';
 import { DIALOG_CONTENT } from '~/constants/modal';
 import { useModalStore } from '~/store/modal/useModalStore';
+import { has } from '~/utils/ramda';
 
 type IProps = {};
 

src/containers/lab/LabGrid/index.tsx

@@ -1,12 +1,12 @@
 import React, { FC } from 'react';
 
-import { values } from 'ramda';
 import Masonry from 'react-masonry-css';
 
 import { InfiniteScroll } from '~/components/containers/InfiniteScroll';
 import { LabNode } from '~/components/lab/LabNode';
 import { EMPTY_NODE, NODE_TYPES } from '~/constants/node';
 import { useLabContext } from '~/utils/context/LabContextProvider';
+import { values } from '~/utils/ramda';
 
 import styles from './styles.module.scss';
 

src/containers/tags/Tags/index.tsx

@@ -1,11 +1,10 @@
 import React, { FC, HTMLAttributes, useCallback, useMemo, useState } from 'react';
 
-import { uniq } from 'ramda';
-
 import { TagField } from '~/components/containers/TagField';
 import { Tag } from '~/components/tags/Tag';
 import { TagInput } from '~/containers/tags/TagInput';
 import { ITag } from '~/types';
+import { uniq } from '~/utils/ramda';
 import { separateTags } from '~/utils/tag';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {

src/hooks/auth/useMessageEventReactions.ts

@@ -1,12 +1,11 @@
 import { useEffect } from 'react';
 
-import { includes, path, values } from 'ramda';
-
 import { EventMessageType } from '~/constants/events';
 import { Dialog } from '~/constants/modal';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { useOAuth } from '~/hooks/auth/useOAuth';
 import { useModal } from '~/hooks/modal/useModal';
+import { includes, path, values } from '~/utils/ramda';
 
 /** reacts to events passed by window.postMessage */
 export const useMessageEventReactions = () => {

src/hooks/auth/useOAuth.ts

@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
 
-import { path } from 'ramda';
 import useSWR from 'swr';
 
 import { apiAttachSocial, apiDropSocial, apiGetSocials, apiLoginWithSocial } from '~/api/auth';
@@ -10,6 +9,7 @@ import { useAuth } from '~/hooks/auth/useAuth';
 import { useModal } from '~/hooks/modal/useModal';
 import { OAuthProvider } from '~/types/auth';
 import { showErrorToast } from '~/utils/errors/showToast';
+import { path } from '~/utils/ramda';
 
 export const useOAuth = () => {
   const { isUser, setToken } = useAuth();

src/hooks/comments/useCommentFormFormik.ts

@@ -1,12 +1,12 @@
 import { useCallback, useEffect, useRef } from 'react';
 
 import { FormikHelpers, useFormik, useFormikContext } from 'formik';
-import { hasPath, path } from 'ramda';
 import { array, object, string } from 'yup';
 
 import { IComment, INode } from '~/types';
 import { Uploader } from '~/utils/context/UploaderContextProvider';
 import { showErrorToast } from '~/utils/errors/showToast';
+import { hasPath, path } from '~/utils/ramda';
 
 const validationSchema = object().shape({
   text: string(),

src/hooks/comments/useGetComments.ts

@@ -1,12 +1,12 @@
 import { useCallback, useMemo } from 'react';
 
-import { flatten, isNil } from 'ramda';
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 
 import { apiGetNodeComments } from '~/api/node';
 import { API } from '~/constants/api';
 import { COMMENTS_DISPLAY } from '~/constants/node';
 import { IComment } from '~/types';
+import { flatten, isNil } from '~/utils/ramda';
 
 const getKey: (nodeId: number) => SWRInfiniteKeyLoader = (nodeId: number) => (
   pageIndex,

src/hooks/data/useTranslatedError.ts

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
 
-import { has } from 'ramda';
-
 import { ERROR_LITERAL } from '~/constants/errors';
+import { has } from '~/utils/ramda';
 
 export const useTranslatedError = (error: string | undefined) => {
   return useMemo(() => {

src/hooks/data/useUploader.ts

@@ -1,7 +1,6 @@
 import { useCallback } from 'react';
 
 import { useLocalObservable } from 'mobx-react-lite';
-import { keys } from 'ramda';
 import uuid from 'uuid4';
 
 import { apiUploadFile } from '~/api/uploads';
@@ -9,7 +8,7 @@ import { UploadSubject, UploadTarget } from '~/constants/uploads';
 import { UploaderStore } from '~/store/uploader/UploaderStore';
 import { IFile } from '~/types';
 import { showErrorToast } from '~/utils/errors/showToast';
-
+import { keys } from '~/utils/ramda';
 
 export const useUploader = (
   subject: UploadSubject,

src/hooks/flow/useFlowLoader.ts

@@ -1,11 +1,11 @@
 import { useCallback, useState } from 'react';
 
 import { runInAction } from 'mobx';
-import { uniq } from 'ramda';
 
 import { getNodeDiff } from '~/api/node';
 import { useFlowStore } from '~/store/flow/useFlowStore';
 import { showErrorToast } from '~/utils/errors/showToast';
+import { uniq } from '~/utils/ramda';
 
 export const useFlowLoader = () => {
   const [isSyncing, setIsSyncing] = useState(false);

src/hooks/lab/useGetLabNodes.ts

@@ -1,6 +1,5 @@
 import { useCallback, useMemo } from 'react';
 
-import { flatten, last, uniqBy } from 'ramda';
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 
 import { getLabNodes } from '~/api/lab';
@@ -8,6 +7,7 @@ import { useAuth } from '~/hooks/auth/useAuth';
 import { useLabStore } from '~/store/lab/useLabStore';
 import { INode } from '~/types';
 import { GetLabNodesRequest, ILabNode } from '~/types/lab';
+import { flatten, last, uniqBy } from '~/utils/ramda';
 
 const getKey: (isUser: boolean) => SWRInfiniteKeyLoader = isUser => (index, prev: ILabNode[]) => {
   if (!isUser) return null;

src/hooks/node/useNodeBlocks.ts

@@ -1,9 +1,14 @@
 import { createElement, FC, useCallback, useMemo } from 'react';
 
-import { isNil, prop } from 'ramda';
+import {
-
+  INodeComponentProps,
-import { INodeComponentProps, LAB_PREVIEW_LAYOUT, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from '~/constants/node';
+  LAB_PREVIEW_LAYOUT,
+  NODE_COMPONENTS,
+  NODE_HEADS,
+  NODE_INLINES,
+} from '~/constants/node';
 import { INode } from '~/types';
+import { isNil, prop } from '~/utils/ramda';
 
 // useNodeBlocks returns head, block and inline blocks of node
 export const useNodeBlocks = (node: INode, isLoading: boolean) => {

src/hooks/search/useSearch.ts

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { flatten } from 'ramda';
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 
 import { getSearchResults } from '~/api/flow';
 import { INode } from '~/types';
 import { GetSearchResultsRequest } from '~/types/flow';
+import { flatten } from '~/utils/ramda';
 
 const RESULTS_COUNT = 20;
 

src/hooks/tag/useTagNodes.ts

@@ -1,11 +1,11 @@
 import { useCallback, useMemo } from 'react';
 
-import { flatten, isNil } from 'ramda';
 import useSWRInfinite, { SWRInfiniteKeyLoader } from 'swr/infinite';
 
 import { apiGetNodesOfTag } from '~/api/tags';
 import { API } from '~/constants/api';
 import { INode } from '~/types';
+import { flatten, isNil } from '~/utils/ramda';
 
 const PAGE_SIZE = 10;
 

src/store/metadata/MetadataStore.tsx

@@ -1,7 +1,7 @@
 import { autorun, makeAutoObservable, runInAction } from 'mobx';
-import { keys, values, without } from 'ramda';
 
 import { EmbedMetadata } from '~/types/metadata';
+import { keys, values, without } from '~/utils/ramda';
 
 const MAX_QUEUE_SIZE = 25;
 

src/store/uploader/UploaderStore.ts

@@ -1,9 +1,9 @@
 import { makeAutoObservable, runInAction } from 'mobx';
-import { has, omit, values } from 'ramda';
 
 import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
 import { UploadType } from '~/constants/uploads';
 import { IFile, UUID } from '~/types';
+import { has, omit, values } from '~/utils/ramda';
 import { getFileType, uploadGetThumb } from '~/utils/uploader';
 
 export interface UploadStatus {

src/utils/api/index.ts

@@ -1,8 +1,8 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
-import { assocPath } from 'ramda';
 
 import { API } from '~/constants/api';
 import { getMOBXStore } from '~/store';
+import { assocPath } from '~/utils/ramda';
 
 export const api = axios.create({
   baseURL: API.BASE,

src/utils/dom.ts

@@ -4,7 +4,6 @@ import format from 'date-fns/format';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import isAfter from 'date-fns/isAfter';
 import ru from 'date-fns/locale/ru';
-import { pipe } from 'ramda';
 
 import { COMMENT_BLOCK_DETECTORS, COMMENT_BLOCK_TYPES, ICommentBlock } from '~/constants/comment';
 import { PRESETS } from '~/constants/urls';
@@ -20,6 +19,7 @@ import {
   formatTextSanitizeYoutube,
   formatTextTodos,
 } from '~/utils/formatText';
+import { pipe } from '~/utils/ramda';
 import { splitTextByYoutube, splitTextOmitEmpty } from '~/utils/splitText';
 
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {

src/utils/errors/getErrorMessage.ts

@@ -1,6 +1,5 @@
-import { has, path } from 'ramda';
-
 import { ERROR_LITERAL, ERRORS } from '~/constants/errors';
+import { has, path } from '~/utils/ramda';
 
 export const getErrorMessage = (error: unknown): string | undefined => {
   if (error === undefined) {

src/utils/errors/getValidationErrors.ts

@@ -1,4 +1,4 @@
-import { hasPath, path } from 'ramda';
+import { hasPath, path } from '~/utils/ramda';
 
 export const getValidationErrors = (error: unknown): Record<string, string> | undefined => {
   if (hasPath(['response', 'data', 'errors'], error)) {

src/utils/fn.ts

@@ -1,7 +1,7 @@
 import { isAfter, isValid, parseISO } from 'date-fns';
-import { curry, insert, nth, path, remove } from 'ramda';
 
 import { IComment, ICommentGroup } from '~/types';
+import { curry, insert, nth, path, remove } from '~/utils/ramda';
 
 export const moveArrItem = curry((at, to, list) => insert(to, nth(at, list), remove(at, 1, list)));
 export const objFromArray = (array: any[], key: string) =>

src/utils/node.ts

@@ -1,9 +1,8 @@
-import { path } from 'ramda';
-
 import { Role } from '~/constants/auth';
 import { NODE_TYPES } from '~/constants/node';
 import { ICommentGroup, INode } from '~/types';
 import { IUser } from '~/types/auth';
+import { path } from '~/utils/ramda';
 
 export const canEditNode = (node?: Partial<INode>, user?: Partial<IUser>): boolean =>
   path(['role'], user) === Role.Admin || path(['user', 'id'], node) === path(['id'], user);

src/utils/providers/AudioPlayerProvider.tsx

@@ -1,11 +1,18 @@
-import React, { createContext, FC, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import React, {
-
+  createContext,
-import { path } from 'ramda';
+  FC,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
 import { PlayerState } from '~/constants/player';
 import { IFile } from '~/types';
 import { PlayerProgress } from '~/types/player';
 import { getURL } from '~/utils/dom';
+import { path } from '~/utils/ramda';
 
 interface AudioPlayerProps {
   file?: IFile;

src/utils/providers/FlowProvider.tsx

@@ -1,11 +1,11 @@
 import React, { createContext, FC, useContext, useMemo } from 'react';
 
 import { observer } from 'mobx-react-lite';
-import { uniq } from 'ramda';
 
 import { useFlow } from '~/hooks/flow/useFlow';
 import { FlowDisplay, IFlowNode, INode } from '~/types';
 import { GetNodeDiffResult } from '~/types/node';
+import { uniq } from '~/utils/ramda';
 
 export interface FlowProviderProps {
   fallbackData?: GetNodeDiffResult;

src/utils/ramda.ts

@@ -0,0 +1,24 @@
+export { default as has } from 'ramda/es/has';
+export { default as path } from 'ramda/es/path';
+export { default as append } from 'ramda/es/append';
+export { default as assocPath } from 'ramda/es/assocPath';
+export { default as reduce } from 'ramda/es/reduce';
+export { default as values } from 'ramda/es/values';
+export { default as range } from 'ramda/es/range';
+export { default as prop } from 'ramda/es/prop';
+export { default as includes } from 'ramda/es/includes';
+export { default as hasPath } from 'ramda/es/hasPath';
+export { default as isNil } from 'ramda/es/isNil';
+export { default as flatten } from 'ramda/es/flatten';
+export { default as keys } from 'ramda/es/keys';
+export { default as uniq } from 'ramda/es/uniq';
+export { default as last } from 'ramda/es/last';
+export { default as uniqBy } from 'ramda/es/uniqBy';
+export { default as omit } from 'ramda/es/omit';
+export { default as curry } from 'ramda/es/curry';
+export { default as pipe } from 'ramda/es/pipe';
+export { default as without } from 'ramda/es/without';
+export { default as nth } from 'ramda/es/nth';
+export { default as insert } from 'ramda/es/insert';
+export { default as isEmpty } from 'ramda/es/isEmpty';
+export { default as remove } from 'ramda/es/remove';

src/utils/splitText.ts

@@ -1,4 +1,4 @@
-import { flatten, isEmpty } from 'ramda';
+import { flatten, isEmpty } from '~/utils/ramda';
 
 export const splitTextByYoutube = (strings: string[]): string[] =>
   flatten(

yarn.lock

@@ -1084,6 +1084,14 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.4":
+  version "7.16.8"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.16.8.tgz#0ba5da91dd71e0a4e7781a30f22770831062e3c1"
+  integrity sha512-smN2DQc5s4M7fntyjGtyIPbRJv6wW4rU/94fmYJ7PKQuZkC0qGMHXJbg6sNGt12JmVr4k5YaptI/XtiLJBnmIg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.16.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1368,6 +1376,13 @@
   resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.3.tgz#76d6d0c3f4d16013c61e45dfca5ff1e6c31ae53c"
   integrity sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==
 
+"@next/bundle-analyzer@^12.0.8":
+  version "12.0.8"
+  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-12.0.8.tgz#a4fef1b14f8a4a87c09d97a3d909deddc88d12f8"
+  integrity sha512-tRwFyAkJA0h+rwt4exq31T59qo4qwp7vPoR3yC8gIpK/E5NAwafyk40aNpk4OWhiQ2IvJMFutukMzY3xl79NXA==
+  dependencies:
+    webpack-bundle-analyzer "4.3.0"
+
 "@next/env@12.0.7":
   version "12.0.7"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-12.0.7.tgz#316f7bd1b6b69f554d2676cfc91a16bc7e32ee79"
@@ -1498,6 +1513,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.21"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
+  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
+
 "@popperjs/core@^2.5.4":
   version "2.11.2"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.2.tgz#830beaec4b4091a9e9398ac50f865ddea52186b9"
@@ -2384,7 +2404,7 @@ acorn-walk@^7.0.0, acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn-walk@^8.1.1:
+acorn-walk@^8.0.0, acorn-walk@^8.1.1:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
   integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
@@ -2399,7 +2419,7 @@ acorn@^7.0.0, acorn@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.2.4, acorn@^8.4.1, acorn@^8.7.0:
+acorn@^8.0.4, acorn@^8.2.4, acorn@^8.4.1, acorn@^8.7.0:
   version "8.7.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
   integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
@@ -2885,6 +2905,14 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.0"
 
+babel-plugin-transform-imports@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-imports/-/babel-plugin-transform-imports-2.0.0.tgz#9e5f49f751a9d34ba8f4bb988c7e48ed2419c6b6"
+  integrity sha512-65ewumYJ85QiXdcB/jmiU0y0jg6eL6CdnDqQAqQ8JMOKh1E52VPG3NJzbVKWcgovUR5GBH8IWpCXQ7I8Q3wjgw==
+  dependencies:
+    "@babel/types" "^7.4"
+    is-valid-path "^0.1.1"
+
 babel-plugin-transform-react-remove-prop-types@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz#f2edaf9b4c6a5fbe5c1d678bfb531078c1555f3a"
@@ -3537,6 +3565,11 @@ commander@^2.20.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
+commander@^6.2.0:
+  version "6.2.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c"
+  integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==
+
 commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
@@ -5951,6 +5984,11 @@ is-docker@^2.0.0, is-docker@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.2.1.tgz#33eeabe23cfe86f14bde4408a02c0cfb853acdaa"
   integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
 
+is-extglob@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-1.0.0.tgz#ac468177c4943405a092fc8f29760c6ffc6206c0"
+  integrity sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=
+
 is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
@@ -5995,6 +6033,13 @@ is-generator-function@^1.0.7:
   dependencies:
     has-tostringtag "^1.0.0"
 
+is-glob@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-2.0.1.tgz#d096f926a3ded5600f3fdfd91198cb0888c2d863"
+  integrity sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=
+  dependencies:
+    is-extglob "^1.0.0"
+
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
@@ -6002,6 +6047,13 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-invalid-path@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/is-invalid-path/-/is-invalid-path-0.1.0.tgz#307a855b3cf1a938b44ea70d2c61106053714f34"
+  integrity sha1-MHqFWzzxqTi0TqcNLGEQYFNxTzQ=
+  dependencies:
+    is-glob "^2.0.0"
+
 is-module@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
@@ -6120,6 +6172,13 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
+is-valid-path@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/is-valid-path/-/is-valid-path-0.1.1.tgz#110f9ff74c37f663e1ec7915eb451f2db93ac9df"
+  integrity sha1-EQ+f90w39mPh7HkV60UfLbk6yd8=
+  dependencies:
+    is-invalid-path "^0.1.0"
+
 is-weakref@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -7256,6 +7315,11 @@ mobx@^6.3.10:
   resolved "https://registry.yarnpkg.com/mobx/-/mobx-6.3.12.tgz#2ceb4f632081a8bf8757ba7e5e01b5810800022f"
   integrity sha512-5Hx2IjhBtySVQlSFe+sHczKgOQ+cCyi8hN2wEvWzpJEEMRflQoDzDwJJ+m7SBWBQhfrWMWb1RGZNk4X1XtxJkQ==
 
+mrmime@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.0.tgz#14d387f0585a5233d291baba339b063752a2398b"
+  integrity sha512-a70zx7zFfVO7XpnQ2IX1Myh9yY4UYvfld/dikWRnsXxbyvMcfz+u6UfgNAtH+k2QqtJuzVpv6eLTx1G2+WKZbQ==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -7670,6 +7734,11 @@ open@^8.0.9, open@^8.4.0:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
+opener@^1.5.2:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
+
 optionator@^0.8.1:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
@@ -9613,6 +9682,15 @@ signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.6.tgz#24e630c4b0f03fea446a2bd299e62b4a6ca8d0af"
   integrity sha512-sDl4qMFpijcGw22U5w63KmD3cZJfBuFlVNbVMKje2keoKML7X2UzWbc4XrmEbDwg0NXJc3yv4/ox7b+JWb57kQ==
 
+sirv@^1.0.7:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
+  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+  dependencies:
+    "@polka/url" "^1.0.0-next.20"
+    mrmime "^1.0.0"
+    totalist "^1.0.0"
+
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -10399,6 +10477,11 @@ toposort@^2.0.2:
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
   integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA=
 
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 tough-cookie@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.0.0.tgz#d822234eeca882f991f0f908824ad2622ddbece4"
@@ -10821,6 +10904,21 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-6.1.0.tgz#9111b4d7ea80acd40f5270d666621afa78b69514"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
+webpack-bundle-analyzer@4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.3.0.tgz#2f3c0ca9041d5ee47fa418693cf56b4a518b578b"
+  integrity sha512-J3TPm54bPARx6QG8z4cKBszahnUglcv70+N+8gUqv2I5KOFHJbzBiLx+pAp606so0X004fxM7hqRu10MLjJifA==
+  dependencies:
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^6.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
+
 webpack-dev-middleware@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-5.3.0.tgz#8fc02dba6e72e1d373eca361623d84610f27be7c"
@@ -11249,7 +11347,7 @@ write-file-atomic@^3.0.0:
     signal-exit "^3.0.2"
     typedarray-to-buffer "^3.1.5"
 
-ws@^7.4.6:
+ws@^7.3.1, ws@^7.4.6:
   version "7.5.6"
   resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.6.tgz#e59fc509fb15ddfb65487ee9765c5a51dec5fe7b"
   integrity sha512-6GLgCqo2cy2A2rjCNFlxQS6ZljG/coZfZXclldI8FB/1G3CCI36Zd8xy2HrFVACi8tfk5XrgLQEk+P0Tnz9UcA==