chore: update eslint config and fix errors

.eslintrc.json

@@ -1,8 +1,8 @@
 {
   "extends": [
     "@rambler-tech/eslint-config",
-    "@rambler-tech/eslint-config/ts",
     "@rambler-tech/eslint-config/react",
+    "@rambler-tech/eslint-config/ts",
     "prettier"
   ]
 }

jest.config.js

@@ -6,7 +6,7 @@ module.exports = {
   moduleDirectories: ['packages', 'node_modules'],
   collectCoverage: true,
   coverageReporters: ['text'],
-  transformIgnorePatterns: ['node_modules/(?!' + ['superjson'].join('|') + ')'],
+  transformIgnorePatterns: [`node_modules/(?!${['superjson'].join('|')})`],
   transform: {
     '^.+\\.jsx?$': ['ts-jest', {useESM: true}]
   }

package.json

@@ -56,20 +56,20 @@
   "devDependencies": {
     "@commitlint/cli": "^17.4.1",
     "@commitlint/config-conventional": "^17.4.0",
-    "@rambler-tech/eslint-config": "^0.1.0",
+    "@rambler-tech/eslint-config": "^0.9.1",
     "@rambler-tech/licenselint": "^1.3.0",
     "@rambler-tech/licenselint-config": "^0.0.2",
     "@rambler-tech/prettier-config": "^0.1.0",
-    "@rambler-tech/ts-config": "^0.0.2",
+    "@rambler-tech/ts-config": "^0.1.0",
     "@rambler-tech/typedoc-config": "^0.3.0",
     "@size-limit/preset-small-lib": "^9.0.0",
     "@types/express": "^4.17.17",
     "@types/jest": "^29.2.5",
     "@types/node": "^20.8.2",
     "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8",
-    "eslint": "^8.31.0",
-    "eslint-config-prettier": "^9.0.0",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
     "express": "^4.18.2",
     "history": "^5.3.0",
     "husky": "^8.0.3",

src/client/index.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unused-modules */
 export {type DocumentProps, Document} from '../components/document'
 export {type LayoutProps, Layout} from '../components/layout'
 export {type ComponentFactory, lazy} from '../components/lazy'

src/client/stream.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {hydrateRoot} from 'react-dom/client'
 import {BrowserRouter} from 'react-router-dom'
-import {RenderOptions, TransitionMode} from '../common/types'
+import {type RenderOptions, TransitionMode} from '../common/types'
 import {getState} from '../components/state'
 import {AppContextProvider} from '../components/context'
 import {matchRoute} from '../components/loader'
@@ -45,6 +45,7 @@ export const hydrateFromStream = async (
     ...rest
   } = options
 
+  // eslint-disable-next-line @arthurgeron/react-usememo/require-usememo
   const appContext = {
     ...state,
     ...rest

src/common/json.ts

@@ -1,10 +1,4 @@
-import superjson from 'superjson'
-
-export const stringify = <T extends Record<string, any>>(data: T): string =>
-  escape(superjson.stringify(data))
-
-export const parse = <T extends Record<string, any>>(string: string): T =>
-  superjson.parse(string)
+import {parse as parseJson, stringify as stringifyJson} from 'superjson'
 
 /**
  * NOTE:
@@ -13,12 +7,6 @@ export const parse = <T extends Record<string, any>>(string: string): T =>
  * More info: http://timelessrepo.com/json-isnt-a-javascript-subset
  */
 
-const escape = (value: string): string => value.replace(ESCAPE_REGEX, escaper)
-
-const escaper = (match: string): string => {
-  return ESCAPE_LOOKUP[match]
-}
-
 const ESCAPE_LOOKUP: Record<string, string> = {
   '&': '\\u0026',
   '>': '\\u003e',
@@ -28,3 +16,13 @@ const ESCAPE_LOOKUP: Record<string, string> = {
 }
 
 const ESCAPE_REGEX = /[&><\u2028\u2029]/g
+
+const escape = (value: string): string => value.replace(ESCAPE_REGEX, escaper)
+
+const escaper = (match: string): string => ESCAPE_LOOKUP[match]
+
+export const stringify = <T extends Record<string, any>>(data: T): string =>
+  escape(stringifyJson(data))
+
+export const parse = <T extends Record<string, any>>(string: string): T =>
+  parseJson(string)

src/components/context.tsx

@@ -3,7 +3,7 @@ import type {Request, Response} from 'express'
 import type {InitialData, MetaData} from '../common/types'
 
 /** App context interface */
-export interface AppContextValue extends Record<string, any> {
+interface AppContextValue extends Record<string, any> {
   /** Express.js [request](https://expressjs.com/en/4x/api.html#req) object (server-only) */
   req?: Request
   /** Express [response](https://expressjs.com/en/4x/api.html#res) object (server-only) */
@@ -20,9 +20,9 @@ export interface AppContextValue extends Record<string, any> {
   onChangeMetaData: (meta: MetaData) => void
 }
 
-export const AppContext = createContext({} as AppContextValue)
+const AppContext = createContext({} as AppContextValue)
 
-export interface AppContextProviderProps {
+interface AppContextProviderProps {
   value: Omit<AppContextValue, 'onChangeMetaData'>
   children: React.ReactNode
 }

src/components/lazy.tsx

@@ -9,7 +9,7 @@ import type {
 } from '../common/types'
 
 /** Page component factory */
-export interface ComponentModule {
+interface ComponentModule {
   default: PageComponent
 }
 
@@ -19,7 +19,7 @@ export interface ComponentFactory {
 }
 
 /** Data factory */
-export interface DataFactory<T, C = any> {
+interface DataFactory<T, C = any> {
   (component: PageComponent, context: Context & C): ReturnType<Loader<T, C>>
 }
 

src/components/loader.test.tsx

@@ -1,5 +1,5 @@
-import {loadRouteData} from './loader'
 import {routes} from '../test/routes'
+import {loadRouteData} from './loader'
 
 let context: any
 

src/components/loader.tsx

@@ -1,8 +1,8 @@
 import {matchRoutes, type RouteMatch} from 'react-router-dom'
-import {Context, PageRoute, InitialData, MetaData} from '../common/types'
+import type {Context, PageRoute, InitialData, MetaData} from '../common/types'
 
 /** Match route options */
-export interface MatchRouteOptions {
+interface MatchRouteOptions {
   pathname: string
   routes: PageRoute[]
 }
@@ -18,12 +18,12 @@ export const matchRoute = ({
 }
 
 /** Route loader options */
-export interface LoadRouteDataOptions extends MatchRouteOptions {
+interface LoadRouteDataOptions extends MatchRouteOptions {
   context: Context
 }
 
 /** Route data */
-export interface RouteData {
+interface RouteData {
   data?: InitialData
   meta?: MetaData
   match?: RouteMatch

src/components/meta.tsx

@@ -1,27 +1,6 @@
 import React from 'react'
 import {useAppContext} from './context'
 
-/** Default meta data component */
-export const Meta: React.FC = () => {
-  const {meta = {}} = useAppContext()
-
-  return (
-    <>
-      {Object.entries(meta).map(([name, content = '']) =>
-        name === 'title' ? (
-          <title key={name}>{content}</title>
-        ) : HEAD_LINKS_RELS.includes(name) ? (
-          <link key={`${name}${content}`} rel={name} href={content} />
-        ) : name.startsWith('og:') ? (
-          <meta key={name} property={name} content={content} />
-        ) : (
-          <meta key={name} name={name} content={content} />
-        )
-      )}
-    </>
-  )
-}
-
 const HEAD_LINKS_RELS = [
   'canonical',
   'alternate',
@@ -34,3 +13,28 @@ const HEAD_LINKS_RELS = [
   'preload',
   'stylesheet'
 ]
+
+/** Default meta data component */
+export const Meta: React.FC = () => {
+  const {meta = {}} = useAppContext()
+
+  return (
+    <>
+      {Object.entries(meta).map(([name, content = '']) => {
+        if (name === 'title') {
+          return <title key={name}>{content}</title>
+        }
+
+        if (HEAD_LINKS_RELS.includes(name)) {
+          return <link key={`${name}${content}`} rel={name} href={content} />
+        }
+
+        if (name.startsWith('og:')) {
+          return <meta key={name} property={name} content={content} />
+        }
+
+        return <meta key={name} name={name} content={content} />
+      })}
+    </>
+  )
+}

src/components/routes.tsx

@@ -11,7 +11,7 @@ import {useAppContext} from './context'
 import {loadRouteData, matchRoute} from './loader'
 
 /** Routing props */
-export interface RoutesProps {
+interface RoutesProps {
   routes: PageRoute[]
   scrollToTop?: boolean
   transition?: TransitionMode
@@ -46,7 +46,7 @@ export const Routes: React.FC<RoutesProps> = ({
   const isBlockedMode = !isWaitingMode && transition !== TransitionMode.INSTANT
 
   useEffect(() => {
-    if (location !== currentLocation) {
+    const onNavigate = async (): Promise<void> => {
       const {pathname} = location
 
       const context = {
@@ -57,26 +57,30 @@ export const Routes: React.FC<RoutesProps> = ({
         ...rest
       }
 
-      setRouteData((prevState) => ({...prevState, isLoading: true}))
+      setRouteData((previousState) => ({...previousState, isLoading: true}))
 
       if (scrollToTop && !isBlockedMode) {
         window.scrollTo(0, 0)
       }
 
-      loadRouteData({pathname, routes, context}).then((routeData) => {
-        if (scrollToTop && isBlockedMode) {
-          window.scrollTo(0, 0)
-        }
+      const routeData = await loadRouteData({pathname, routes, context})
+
+      if (scrollToTop && isBlockedMode) {
+        window.scrollTo(0, 0)
+      }
 
-        setRouteData((prevState) => ({
-          ...prevState,
-          ...routeData,
-          isLoading: false
-        }))
+      setRouteData((previousState) => ({
+        ...previousState,
+        ...routeData,
+        isLoading: false
+      }))
 
-        setCurrentLocation(location)
-        onChangeMetaData?.(routeData.meta ?? {})
-      })
+      setCurrentLocation(location)
+      onChangeMetaData?.(routeData.meta ?? {})
+    }
+
+    if (location !== currentLocation) {
+      onNavigate()
     }
   }, [location, currentLocation, scrollToTop]) // eslint-disable-line react-hooks/exhaustive-deps
 

src/components/scripts.tsx

@@ -5,5 +5,7 @@ import {useAppContext} from './context'
 export const Scripts: React.FC = () => {
   const {scripts} = useAppContext()
 
-  return <>{scripts?.map((src) => <script key={src} src={src} defer />)}</>
+  return (
+    <>{scripts?.map((source) => <script key={source} src={source} defer />)}</>
+  )
 }

src/server/index.ts

@@ -1 +1,2 @@
+/* eslint-disable import/no-unused-modules */
 export {type RenderToStreamOptions, renderToStream} from './stream'

src/server/stream.test.tsx

@@ -1,8 +1,8 @@
 import {Writable} from 'stream'
-import {renderToStream} from './stream'
 import {routes} from '../test/routes'
 import {Layout} from '../test/components/layout'
 import {Document} from '../test/components/document'
+import {renderToStream} from './stream'
 
 class MockResponse extends Writable {
   data = ''

src/server/stream.tsx

@@ -3,13 +3,16 @@ import {renderToPipeableStream} from 'react-dom/server'
 import {StaticRouter} from 'react-router-dom/server'
 import type {Location} from 'history'
 import type {Request, Response} from 'express'
-import {RenderOptions} from '../common/types'
+import type {RenderOptions} from '../common/types'
 import {AppContextProvider} from '../components/context'
 import {loadRouteData} from '../components/loader'
 import {Routes} from '../components/routes'
 import {Layout as BaseLayout} from '../components/layout'
 import {Document as BaseDocument} from '../components/document'
 
+const OK = 200
+const FOUND = 302
+
 /** Render to stream options */
 export interface RenderToStreamOptions extends RenderOptions {
   /** Express.js [request](https://expressjs.com/en/4x/api.html#req) object (server-only) */
@@ -86,11 +89,12 @@ export const renderToStream = async (
   const {data, meta} = await loadRouteData({pathname, routes, context})
 
   if (data?.redirect) {
-    return res.redirect(data?.statusCode ?? 302, data.redirect)
+    return res.redirect(data?.statusCode ?? FOUND, data.redirect)
   }
 
-  res.status(data?.statusCode ?? 200)
+  res.status(data?.statusCode ?? OK)
 
+  // eslint-disable-next-line @arthurgeron/react-usememo/require-usememo
   const appContext = {
     req,
     res,

src/test/components/custom-context.tsx

@@ -12,12 +12,13 @@ const CustomContext: PageComponent<CustomContextProps> = ({store}) => (
   </>
 )
 
-CustomContext.getMetaData = async () => ({
-  title: 'Custom context'
-})
+CustomContext.getMetaData = () =>
+  Promise.resolve({
+    title: 'Custom context'
+  })
 
 CustomContext.getInitialData = async ({store}) => {
-  store.dispatch({message: 'Hello'})
+  await store.dispatch({message: 'Hello'})
 }
 
 export default CustomContext

src/test/components/document.tsx

@@ -1,11 +1,11 @@
-import React, {FC, ReactNode} from 'react'
+import React from 'react'
 import {Meta, Preloads, Styles, Scripts, State} from '../../client'
 
-export interface DocumentProps {
-  children: ReactNode
+interface DocumentProps {
+  children: React.ReactNode
 }
 
-export const Document: FC<DocumentProps> = ({children}) => (
+export const Document: React.FC<DocumentProps> = ({children}) => (
   <html lang="ru">
     <head>
       <meta httpEquiv="X-UA-Compatible" content="IE=edge" />