fix: improve bundle sizes

.babelrc

@@ -3,7 +3,7 @@
     "@babel/preset-react",
     ["@babel/preset-env", {
       "targets": {
-        "node": "8"
+        "node": "16"
       }
     }],
     "@babel/preset-typescript"

bin/bundle-globals.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable import/no-extraneous-dependencies */
 /**
  * @private
@@ -67,6 +68,7 @@ const run = async () => {
 }
 
 run().catch((error) => {
+  // eslint-disable-next-line no-console
   console.log(error)
   process.exit(1)
 }).finally(() => {

package.json

@@ -96,20 +96,20 @@
     "babel-plugin-styled-components": "^1.11.1",
     "commander": "^5.1.0",
     "flat": "^4.1.0",
-    "i18next": "^21.6.16",
+    "i18next": "^21.9.2",
     "lodash": "^4.17.21",
     "ora": "^5.4.1",
     "prop-types": "^15.7.2",
     "punycode": "^2.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "react-i18next": "^11.16.7",
+    "react-i18next": "^11.18.6",
     "react-is": "^18.1.0",
     "react-redux": "^8.0.2",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0",
     "redux": "^4.2.0",
-    "rollup": "^2.77.2",
+    "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",
     "slash": "^3.0.0",
     "styled-components": "^5.3.5",
@@ -136,7 +136,7 @@
     "chai": "^4.1.2",
     "chai-as-promised": "^7.1.1",
     "chai-change": "^2.1.2",
-    "core-js": "2.5.7",
+    "core-js": "^3.25.3",
     "cspell": "^4.0.44",
     "eslint": "^8.21.0",
     "eslint-config-airbnb": "^19.0.4",

src/adminjs.ts

@@ -1,4 +1,4 @@
-import * as _ from 'lodash'
+import merge from 'lodash/merge'
 import * as path from 'path'
 import * as fs from 'fs'
 import i18n, { i18n as I18n } from 'i18next'
@@ -110,7 +110,7 @@ class AdminJS {
      * @type {AdminJSOptions}
      * @description Options given by a user
      */
-    this.options = _.merge({}, defaultOptions, options)
+    this.options = merge({}, defaultOptions, options)
 
     this.resolveBabelConfigPath()
 

src/backend/actions/action.interface.ts

@@ -10,6 +10,14 @@ import { RecordJSON } from '../../frontend/interfaces'
 import { NoticeMessage } from '../../frontend/hoc/with-notice'
 import { TranslateFunctions } from '../../utils/translate-functions.factory'
 
+export type ActionQueryParameters = {
+  sortBy?: string
+  direction?: 'asc' | 'desc'
+  filters?: Record<string, unknown>
+  perPage?: number
+  page?: number
+}
+
 export type ActionType = 'resource' | 'record' | 'bulk'
 
 /**

src/backend/actions/list/list-action.ts

@@ -1,5 +1,5 @@
-import * as flat from 'flat'
-import { Action, ActionResponse } from '../action.interface'
+import { flat } from '../../../utils/flat'
+import { Action, ActionResponse, ActionQueryParameters } from '../action.interface'
 import sortSetter from '../../services/sort-setter/sort-setter'
 import Filter from '../../utils/filter/filter'
 import populator from '../../utils/populator/populator'
@@ -32,14 +32,14 @@ export const ListAction: Action<ListActionResponse> = {
    */
   handler: async (request, response, context) => {
     const { query } = request
-    const { sortBy, direction, filters = {} } = flat.unflatten(query || {})
-    const { resource } = context
-    let { page, perPage } = flat.unflatten(query || {})
+    const { sortBy, direction, filters = {} } = flat.unflatten(query || {}) as ActionQueryParameters
+    const { resource, _admin } = context
+    let { page, perPage } = flat.unflatten(query || {}) as ActionQueryParameters
 
     if (perPage) {
       perPage = +perPage > PER_PAGE_LIMIT ? PER_PAGE_LIMIT : +perPage
     } else {
-      perPage = context._admin.options.settings?.defaultPerPage ?? 10
+      perPage = _admin.options.settings?.defaultPerPage ?? 10
     }
     page = Number(page) || 1
 

src/backend/actions/search/search-action.ts

@@ -1,5 +1,5 @@
-import * as flat from 'flat'
-import { Action, ActionResponse } from '../action.interface'
+import { flat } from '../../../utils/flat'
+import { Action, ActionResponse, ActionQueryParameters } from '../action.interface'
 import { RecordJSON } from '../../../frontend/interfaces'
 import Filter from '../../utils/filter/filter'
 
@@ -39,7 +39,7 @@ export const SearchAction: Action<SearchActionResponse> = {
       filters: customFilters = {},
       perPage = 50,
       page = 1,
-    } = flat.unflatten(query || {})
+    } = flat.unflatten(query || {}) as ActionQueryParameters
 
     const queryString = request.params && request.params.query
     const queryFilter = queryString ? { [titlePropertyName]: queryString } : {}

src/backend/bundler/config.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 const { babel } = require('@rollup/plugin-babel')
@@ -8,52 +9,29 @@ const json = require('@rollup/plugin-json')
 const { terser } = require('rollup-plugin-terser')
 
 const external = [
-  'lodash',
   'react',
   'react-dom',
   'redux',
   'react-redux',
-  'flat',
   'react-router',
   'react-router-dom',
-  'react-datepicker',
   'styled-components',
-  'prop-types',
   'adminjs',
   '@adminjs/design-system',
-  'adminjs/property-types',
-  'adminjs/types',
-  'adminjs/style',
-  'axios',
   '@carbon/icons-react',
-  'i18next',
-  'react-i18next',
-  'punycode',
-  'uuid',
 ]
 
 const globals = {
-  lodash: 'Lodash',
   react: 'React',
   redux: 'Redux',
-  axios: 'axios',
-  flat: 'flat',
   '@carbon/icons-react': 'CarbonIcons',
-  'react-datepicker': 'ReactDatepicker',
   'styled-components': 'styled',
   'react-dom': 'ReactDOM',
-  'prop-types': 'PropTypes',
   'react-redux': 'ReactRedux',
   'react-router': 'ReactRouter',
   'react-router-dom': 'ReactRouterDOM',
   adminjs: 'AdminJS',
   '@adminjs/design-system': 'AdminJSDesignSystem',
-  'adminjs/property-types': 'AdminJS.PropertyTypes',
-  'adminjs/types': 'AdminJS.types',
-  'adminjs/style': 'AdminJS.style',
-  i18next: 'i18n',
-  'react-i18next': 'ReactI18Next',
-  punycode: 'punycode',
 }
 
 const extensions = ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx', '.scss']
@@ -66,7 +44,6 @@ const plugins = ({ babelConfig = {}, commonJSConfig = {}, minify = false } = {})
       preferBuiltins: false,
     }),
     json(),
-    // typescript(),
     replace({
       'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
       'process.env.IS_BROWSER': 'true',
@@ -83,7 +60,10 @@ const plugins = ({ babelConfig = {}, commonJSConfig = {}, minify = false } = {})
       babelHelpers: 'bundled',
       exclude: 'node_modules/**/*.js',
       presets: [
-        require.resolve('@babel/preset-env'),
+        require.resolve('@babel/preset-env', {
+          corejs: 3,
+          useBuiltIns: 'usage',
+        }),
         require.resolve('@babel/preset-react'),
         require.resolve('@babel/preset-typescript'),
       ],

src/backend/index.ts

@@ -1,5 +1,3 @@
-export { flatten, unflatten } from 'flat'
-
 export * from './actions'
 export * from './adapters'
 export * from './controllers'

src/backend/utils/custom-views/get-component-html.tsx

@@ -17,7 +17,7 @@ import createStore, {
 } from '../../../frontend/store/store'
 import AdminJS from '../../../adminjs'
 
-export async function getComponentHtml<T>(
+export async function getComponentHtml<T extends Record<string, unknown> = {}>(
   Component: React.FC<T>,
   props: T,
   admin: AdminJS,

src/backend/utils/filter/filter.ts

@@ -1,4 +1,4 @@
-import * as flat from 'flat'
+import { flat } from '../../../utils/flat'
 import BaseProperty from '../../adapters/property/base-property'
 import BaseResource from '../../adapters/resource/base-resource'
 import BaseRecord from '../../adapters/record/base-record'

src/frontend/bundle-entry.jsx

@@ -59,7 +59,4 @@ export default {
   ...AppComponents,
   ...Hooks,
   flat,
-  // TODO: remove this from the next release
-  flatten: flat.flatten,
-  unflatten: flat.unflatten,
 }

src/frontend/components/app/top-bar.tsx

@@ -24,7 +24,7 @@ NavBar.defaultProps = {
 }
 
 type Props = {
-  toggleSidebar: (any) => void
+  toggleSidebar: () => void
 }
 
 const TopBar: React.FC<Props> = (props) => {
@@ -54,6 +54,6 @@ const TopBar: React.FC<Props> = (props) => {
   )
 }
 
-const OverridableTopbar = allowOverride(TopBar, 'TopBar')
+const OverridableTopbar = allowOverride<Props>(TopBar, 'TopBar')
 
 export { OverridableTopbar as default, OverridableTopbar as TopBar }

src/frontend/components/routes/record-action.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import sinon from 'sinon'
 import { expect } from 'chai'
-import _ from 'lodash'
+import merge from 'lodash/merge'
 import i18n from 'i18next'
 import { render, RenderResult } from '@testing-library/react'
 import { Provider } from 'react-redux'
@@ -23,7 +23,8 @@ const defaultStore = {
 
 const renderSubject = (store: Partial<ReduxState> = {}, location?: string): RenderResult => {
   const path = '/resources/:resourceId/records/:recordId/:actionName'
-  const storeWithDefault = _.merge(defaultStore, store)
+  const storeWithDefault = merge(defaultStore, store)
+
   const renderResult = render(
     <TestContextProvider location={location}>
       <Provider store={createStore(storeWithDefault)}>

src/frontend/global-entry.js

@@ -1,47 +1,29 @@
 /* eslint-disable import/first, import/no-extraneous-dependencies */
 window.global = {}
 
-import * as Lodash from 'lodash'
 import React from 'react'
 import Redux from 'redux'
-import axios from 'axios'
 import ReactDOM from 'react-dom'
 import { createRoot } from 'react-dom/client'
 import ReactRedux from 'react-redux'
 import ReactRouter from 'react-router'
 import ReactRouterDOM from 'react-router-dom'
-import PropTypes from 'prop-types'
 import * as styled from 'styled-components'
-import flat from 'flat'
-import ReactDatepicker from 'react-datepicker'
 import ReactSelectAsync from 'react-select/async'
 import ReactSelectCreatable from 'react-select/creatable'
 import * as ReactSelect from 'react-select'
-import i18n from 'i18next'
-import ReactI18Next from 'react-i18next'
-import * as uuid from 'uuid'
-import * as punycode from 'punycode/'
 
-window.Lodash = Lodash
 window.React = React
 window.ReactDOM = ReactDOM
 window.createRoot = createRoot
 window.Redux = Redux
 window.ReactRedux = ReactRedux
-window.flat = flat
 window.ReactRouter = ReactRouter
 window.ReactRouterDOM = ReactRouterDOM
-window.ReactDatepicker = ReactDatepicker
 window.styled = styled
-window.PropTypes = PropTypes
-window.axios = axios
 window.ReactSelect = ReactSelect
 window.ReactSelectAsync = ReactSelectAsync
 window.ReactSelectCreatable = ReactSelectCreatable
-window.i18n = i18n
-window.ReactI18Next = ReactI18Next
-window.punycode = punycode
-window.uuid = uuid
 
 export {
   React,

src/frontend/hoc/allow-override.tsx

@@ -14,7 +14,7 @@ import { OverridableComponent } from '../utils/overridable-component'
  * @example
  * AdminJS.bundle('./path/to/component', 'SidebarFooter')
  */
-function allowOverride<P>(
+function allowOverride<P extends Record<string, unknown> = {}>(
   OriginalComponent: ComponentType<P>,
   name: OverridableComponent,
 ): ComponentType<P & {OriginalComponent?: ComponentType<P>}> {
@@ -23,7 +23,7 @@ function allowOverride<P>(
     return OriginalComponent
   }
 
-  const WrapperComponent: React.FC<P> = (props) => {
+  const WrapperComponent: React.FC<P & { OriginalComponent?: ComponentType<P> | undefined; }> = (props) => {
     let globalAny: any = window
     globalAny = window
 

src/frontend/hooks/use-record/update-record.spec.ts

@@ -1,5 +1,5 @@
 import { expect } from 'chai'
-import { unflatten } from 'flat'
+import { flat } from '../../../utils/flat'
 
 import updateRecord from './update-record'
 import { RecordJSON } from '../../interfaces'
@@ -83,7 +83,7 @@ describe('updateRecord', function () {
 
     const update = updateRecord(arrayPropertyName, value)
     const updatedRecord = update(previousRecord)
-    const unflattenParams = unflatten<Record<string, any>, any>(updatedRecord.params)
+    const unflattenParams = flat.unflatten<Record<string, any>, any>(updatedRecord.params)
 
     expect(unflattenParams[arrayPropertyName]).to.deep.equal(value)
   })

src/frontend/interfaces/action/build-action-api-call-trigger.ts

@@ -14,7 +14,7 @@ export type BuildActionCallApiTriggerOptions = {
   search?: Location['search'];
 }
 
-export const buildActionCallApiTrigger = <K>(
+export const buildActionCallApiTrigger = <K extends ActionResponse>(
   options: BuildActionCallApiTriggerOptions,
 ): CallApiFunction<K> => {
   const { action, params, actionResponseHandler, search } = options