Replace lodash-es with es-toolkit and bump ECMAScript version to 2022

pascalbaljet · pascalbaljet · commit 3d4ad27799f7 · 2025-11-21T12:04:10.000+01:00
diff --git a/.github/workflows/es2022-compatibility.yml b/.github/workflows/es2022-compatibility.yml
@@ -1,8 +1,8 @@
 name: Compatibility Checks
 on: [push, pull_request]
 jobs:
-  es2020-compatibility:
-    name: ES2020 (${{ matrix.adapter }})
+  es2022-compatibility:
+    name: ES2022 (${{ matrix.adapter }})
     if: github.event_name != 'pull_request' || github.event.pull_request.head.repo.full_name != github.repository
     runs-on: ubuntu-24.04
     timeout-minutes: 15
@@ -34,5 +34,5 @@ jobs:
         if: matrix.adapter != 'core'
         run: pnpm -r --filter ./packages/core build
 
-      - name: Validate ES2020 compatibility
-        run: pnpm -r --filter ./packages/${{ matrix.adapter }}* es2020-check
+      - name: Validate ES2022 compatibility
+        run: pnpm -r --filter ./packages/${{ matrix.adapter }}* es2022-check
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -300,8 +300,8 @@ For changes prior to v1.0.0, see the [legacy releases](https://legacy.inertiajs.
 * Fix for Form Component in Svelte when resetting use input/button by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2525
 * Improve Link component `as` prop by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2524
 * [v2.x] fix: type error by changing page props type to `any` by [@peaklabs-dev](https://github.com/peaklabs-dev) in https://github.com/inertiajs/inertia/pull/2520
-* Revert to back to Lodash to retain ES2020 compatibility by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2527
-* Verify ES2020 compatibility in CI by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2530
+* Revert to back to Lodash to retain ES2022 compatibility by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2527
+* Verify ES2022 compatibility in CI by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2530
 * [Vue] Fixing action attribute on Form Component when using Wayfinder by [@nicolagianelli](https://github.com/nicolagianelli) in https://github.com/inertiajs/inertia/pull/2532
 * Make package.json structure in Svelte package Consistent as Vue and React by [@kresnasatya](https://github.com/kresnasatya) in https://github.com/inertiajs/inertia/pull/2529
 * Remove Svelte 5-next version constraint by [@pascalbaljet](https://github.com/pascalbaljet) in https://github.com/inertiajs/inertia/pull/2533
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "dev:test-app:react": "pnpx concurrently -c \"#c4b5fd,#ffa800\" \"cd tests/app && PACKAGE=react pnpm serve:watch\" \"cd packages/react/test-app && pnpm run dev\" --names=server,vite",
     "dev:test-app:svelte": "pnpx concurrently -c \"#c4b5fd,#ffa800\" \"cd tests/app && PACKAGE=svelte pnpm serve:watch\" \"cd packages/svelte/test-app && pnpm run dev\" --names=server,vite",
     "dev:test-app:vue": "pnpx concurrently -c \"#c4b5fd,#ffa800\" \"cd tests/app && PACKAGE=vue3 pnpm serve:watch\" \"cd packages/vue3/test-app && pnpm run dev\" --names=server,vite",
-    "es2020-check": "pnpm -r --filter './packages/*' es2020-check",
+    "es2022-check": "pnpm -r --filter './packages/*' es2022-check",
     "lint:test-app": "pnpm -r --filter './packages/*/test-app' lint",
     "lint:test-app:react": "cd packages/react/test-app && pnpm run lint",
     "lint:test-app:svelte": "cd packages/svelte/test-app && pnpm run lint",
@@ -41,4 +41,4 @@
   "optionalDependencies": {
     "@rollup/rollup-linux-x64-gnu": "^4.53.3"
   }
-}
+}
diff --git a/packages/core/build.js b/packages/core/build.js
@@ -9,7 +9,7 @@ const config = {
   bundle: true,
   minify: false,
   sourcemap: withDeps ? false : true,
-  target: 'es2020',
+  target: 'es2022',
   plugins: [
     ...(withDeps ? [] : [nodeExternalsPlugin()]),
     {
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -50,12 +50,11 @@
     "dev": "pnpx concurrently -c \"#ffcf00,#3178c6\" \"pnpm dev:build\" \"pnpm dev:types\" --names build,types",
     "dev:build": "./build.js --watch",
     "dev:types": "tsc --watch --preserveWatchOutput",
-    "es2020-check": "pnpm build:with-deps && es-check es2020 \"dist/index.esm.js\" --checkFeatures --module --noCache --verbose"
+    "es2022-check": "pnpm build:with-deps && es-check es2022 \"dist/index.esm.js\" --checkFeatures --module --noCache --verbose"
   },
   "dependencies": {
-    "@types/lodash-es": "^4.17.12",
     "axios": "^1.13.2",
-    "lodash-es": "^4.17.21",
+    "es-toolkit": "^1.42.0",
     "qs": "^6.14.0"
   },
   "devDependencies": {
@@ -68,4 +67,4 @@
     "esbuild-node-externals": "^1.20.1",
     "typescript": "^5.9.3"
   }
-}
+}
diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
@@ -1,4 +1,4 @@
-import { get, has, set } from 'lodash-es'
+import { get, has, set } from 'es-toolkit/compat'
 import { InertiaAppConfig } from './types'
 
 // Generate all possible nested paths
diff --git a/packages/core/src/formObject.ts b/packages/core/src/formObject.ts
@@ -1,4 +1,4 @@
-import { get, set } from 'lodash-es'
+import { get, set } from 'es-toolkit/compat'
 import { isFile } from './files'
 import { FormDataConvertible } from './types'
 
diff --git a/packages/core/src/history.ts b/packages/core/src/history.ts
@@ -1,4 +1,4 @@
-import { cloneDeep, isEqual } from 'lodash-es'
+import { cloneDeep, isEqual } from 'es-toolkit/compat'
 import { decryptHistory, encryptHistory, historySessionStorageKeys } from './encryption'
 import { page as currentPage } from './page'
 import Queue from './queue'
diff --git a/packages/core/src/prefetched.ts b/packages/core/src/prefetched.ts
@@ -1,4 +1,4 @@
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'es-toolkit/compat'
 import { objectsAreEqual } from './objectUtils'
 import { Response } from './response'
 import { timeToMs } from './time'
diff --git a/packages/core/src/response.ts b/packages/core/src/response.ts
@@ -1,5 +1,5 @@
 import { AxiosResponse } from 'axios'
-import { get, isEqual, set } from 'lodash-es'
+import { get, isEqual, set } from 'es-toolkit/compat'
 import { config, router } from '.'
 import dialog from './dialog'
 import {
diff --git a/packages/core/src/router.ts b/packages/core/src/router.ts
@@ -1,4 +1,4 @@
-import { cloneDeep, get, set } from 'lodash-es'
+import { cloneDeep, get, set } from 'es-toolkit/compat'
 import { progress } from '.'
 import { config } from './config'
 import { eventHandler } from './eventHandler'
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
@@ -3,15 +3,15 @@
     "rootDir": "src",
     "noEmitOnError": true,
 
-    "lib": ["DOM", "DOM.Iterable", "ES2020"],
-    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "target": "ES2022",
     "types": ["node"],
 
     "declaration": true,
     "declarationDir": "types",
     "emitDeclarationOnly": true,
 
-    "module": "ES2020",
+    "module": "ES2022",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
diff --git a/packages/react/build.js b/packages/react/build.js
@@ -8,7 +8,7 @@ const withDeps = process.argv.slice(1).includes('--with-deps')
 
 // For regular builds, externalize all dependencies to keep the bundle size small (using nodeExternalsPlugin).
 // For builds with dependencies, only externalize peer dependencies and bundle everything
-// else so we can check ES2020 compatibility without checking framework code.
+// else so we can check ES2022 compatibility without checking framework code.
 let externalDependencies = undefined
 
 if (withDeps) {
@@ -20,7 +20,7 @@ const config = {
   bundle: true,
   minify: false,
   sourcemap: withDeps ? false : true,
-  target: 'es2020',
+  target: 'es2022',
   external: externalDependencies,
   plugins: [
     ...(withDeps ? [] : [nodeExternalsPlugin()]),
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -49,7 +49,7 @@
     "dev": "pnpx concurrently -c \"#ffcf00,#3178c6\" \"pnpm dev:build\" \"pnpm dev:types\" --names build,types",
     "dev:build": "./build.js --watch",
     "dev:types": "tsc --watch --preserveWatchOutput",
-    "es2020-check": "pnpm build:with-deps && es-check es2020 \"dist/index.esm.js\" --checkFeatures --module --noCache --verbose"
+    "es2022-check": "pnpm build:with-deps && es-check es2022 \"dist/index.esm.js\" --checkFeatures --module --noCache --verbose"
   },
   "devDependencies": {
     "@types/react": "^19.2.6",
@@ -66,7 +66,6 @@
   },
   "dependencies": {
     "@inertiajs/core": "workspace:*",
-    "@types/lodash-es": "^4.17.12",
-    "lodash-es": "^4.17.21"
+    "es-toolkit": "^1.42.0"
   }
 }
diff --git a/packages/react/src/Form.ts b/packages/react/src/Form.ts
@@ -10,7 +10,7 @@ import {
   resetFormFields,
   VisitOptions,
 } from '@inertiajs/core'
-import { isEqual } from 'lodash-es'
+import { isEqual } from 'es-toolkit/compat'
 import React, {
   createElement,
   FormEvent,
diff --git a/packages/react/src/Head.ts b/packages/react/src/Head.ts
@@ -1,4 +1,4 @@
-import { escape } from 'lodash-es'
+import { escape } from 'es-toolkit/compat'
 import React, { FunctionComponent, ReactElement, ReactNode, useContext, useEffect, useMemo } from 'react'
 import HeadContext from './HeadContext'
 
diff --git a/packages/react/src/useForm.ts b/packages/react/src/useForm.ts
@@ -13,7 +13,7 @@ import {
   UrlMethodPair,
   VisitOptions,
 } from '@inertiajs/core'
-import { cloneDeep, get, has, isEqual, set } from 'lodash-es'
+import { cloneDeep, get, has, isEqual, set } from 'es-toolkit/compat'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { config } from '.'
 import { useIsomorphicLayoutEffect } from './react'
diff --git a/packages/react/test-app/Pages/InfiniteScroll/Filtering.tsx b/packages/react/test-app/Pages/InfiniteScroll/Filtering.tsx
@@ -1,5 +1,5 @@
 import { InfiniteScroll, Link, useForm } from '@inertiajs/react'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import { useEffect, useMemo } from 'react'
 import UserCard, { User } from './UserCard'
 
diff --git a/packages/react/test-app/eslint.config.js b/packages/react/test-app/eslint.config.js
@@ -23,11 +23,11 @@ export default [
     ...react.configs.flat.recommended,
     ...react.configs.flat['jsx-runtime'],
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 2022,
       sourceType: 'module',
       globals: {
         ...globals.browser,
-        ...globals.es2020,
+        ...globals.es2022,
       },
     },
     rules: {
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
@@ -4,14 +4,14 @@
     "rootDir": "src",
     "noEmitOnError": true,
 
-    "lib": ["DOM", "DOM.Iterable", "ES2020"],
-    "target": "ES2020",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "target": "ES2022",
 
     "declaration": true,
     "declarationDir": "types",
     "emitDeclarationOnly": true,
 
-    "module": "ES2020",
+    "module": "ES2022",
     "moduleResolution": "Node",
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -40,7 +40,7 @@
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "dev": "pnpm package --watch",
-    "es2020-check": "pnpm build:with-deps && es-check es2020 \"dist/**/*.js\" --checkFeatures --module --noCache --verbose",
+    "es2022-check": "pnpm build:with-deps && es-check es2022 \"dist/**/*.js\" --checkFeatures --module --noCache --verbose",
     "package": "svelte-kit sync && svelte-package --input src"
   },
   "devDependencies": {
@@ -62,7 +62,6 @@
   },
   "dependencies": {
     "@inertiajs/core": "workspace:*",
-    "@types/lodash-es": "^4.17.12",
-    "lodash-es": "^4.17.21"
+    "es-toolkit": "^1.42.0"
   }
 }
diff --git a/packages/svelte/src/components/Form.svelte b/packages/svelte/src/components/Form.svelte
@@ -10,7 +10,7 @@
     type VisitOptions,
     isUrlMethodPair,
   } from '@inertiajs/core'
-  import { isEqual } from 'lodash-es'
+  import { isEqual } from 'es-toolkit/compat'
   import { onMount } from 'svelte'
   import useForm from '../useForm'
 
diff --git a/packages/svelte/src/createInertiaApp.ts b/packages/svelte/src/createInertiaApp.ts
@@ -5,7 +5,7 @@ import {
   type InertiaAppResponse,
   type PageProps,
 } from '@inertiajs/core'
-import { escape } from 'lodash-es'
+import { escape } from 'es-toolkit/compat'
 import App, { type InertiaAppProps } from './components/App.svelte'
 import { config } from './index'
 import type { ComponentResolver, SvelteInertiaAppConfig } from './types'
diff --git a/packages/svelte/src/useForm.ts b/packages/svelte/src/useForm.ts
@@ -17,7 +17,7 @@ import type {
 } from '@inertiajs/core'
 import { router } from '@inertiajs/core'
 import type { AxiosProgressEvent } from 'axios'
-import { cloneDeep, get, has, isEqual, set } from 'lodash-es'
+import { cloneDeep, get, has, isEqual, set } from 'es-toolkit/compat'
 import { writable, type Writable } from 'svelte/store'
 import { config } from '.'
 
diff --git a/packages/svelte/test-app/eslint.config.js b/packages/svelte/test-app/eslint.config.js
@@ -16,11 +16,11 @@ export default ts.config(
   ...svelte.configs.recommended,
   {
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 2022,
       sourceType: 'module',
       globals: {
         ...globals.browser,
-        ...globals.es2020,
+        ...globals.es2022,
       },
     },
   },
diff --git a/packages/svelte/tsconfig.json b/packages/svelte/tsconfig.json
@@ -12,7 +12,7 @@
     "declaration": true,
     "declarationDir": "dist",
 
-    "module": "ES2020",
+    "module": "ES2022",
     "moduleResolution": "Node",
     "allowSyntheticDefaultImports": true,
 
diff --git a/packages/vue3/build.js b/packages/vue3/build.js
@@ -8,7 +8,7 @@ const withDeps = process.argv.slice(1).includes('--with-deps')
 
 // For regular builds, externalize all dependencies to keep the bundle size small (using nodeExternalsPlugin).
 // For builds with dependencies, only externalize peer dependencies and bundle everything
-// else so we can check ES2020 compatibility without checking framework code.
+// else so we can check ES2022 compatibility without checking framework code.
 let externalDependencies = undefined
 
 if (withDeps) {
@@ -20,7 +20,7 @@ const config = {
   bundle: true,
   minify: false,
   sourcemap: withDeps ? false : true,
-  target: 'es2020',
+  target: 'es2022',
   external: externalDependencies,
   plugins: [
     ...(withDeps ? [] : [nodeExternalsPlugin()]),
diff --git a/packages/vue3/package.json b/packages/vue3/package.json
@@ -48,7 +48,7 @@
     "dev": "pnpx concurrently -c \"#ffcf00,#3178c6\" \"pnpm dev:build\" \"pnpm dev:types\" --names build,types",
     "dev:build": "./build.js --watch",
     "dev:types": "tsc --watch --preserveWatchOutput",
-    "es2020-check": "pnpm build:with-deps && es-check es2020 \"dist/index.esm.js\" --checkFeatures --module --noCache --verbose"
+    "es2022-check": "pnpm build:with-deps && es-check es2022 \"dist/index.esm.js\" --checkFeatures --module --noCache --verbose"
   },
   "devDependencies": {
     "@types/node": "^22.19.1",
@@ -64,7 +64,6 @@
   },
   "dependencies": {
     "@inertiajs/core": "workspace:*",
-    "@types/lodash-es": "^4.17.12",
-    "lodash-es": "^4.17.21"
+    "es-toolkit": "^1.42.0"
   }
 }
diff --git a/packages/vue3/src/form.ts b/packages/vue3/src/form.ts
@@ -11,7 +11,7 @@ import {
   resetFormFields,
   VisitOptions,
 } from '@inertiajs/core'
-import { isEqual } from 'lodash-es'
+import { isEqual } from 'es-toolkit/compat'
 import { computed, defineComponent, h, onBeforeUnmount, onMounted, PropType, ref, SlotsType } from 'vue'
 import useForm from './useForm'
 
diff --git a/packages/vue3/src/head.ts b/packages/vue3/src/head.ts
@@ -1,4 +1,4 @@
-import { escape } from 'lodash-es'
+import { escape } from 'es-toolkit/compat'
 import { defineComponent, DefineComponent, VNode } from 'vue'
 
 export type InertiaHead = DefineComponent<{
diff --git a/packages/vue3/src/remember.ts b/packages/vue3/src/remember.ts
@@ -1,5 +1,5 @@
 import { router } from '@inertiajs/core'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'es-toolkit/compat'
 import { ComponentOptions } from 'vue'
 
 const remember: ComponentOptions = {
diff --git a/packages/vue3/src/useForm.ts b/packages/vue3/src/useForm.ts
@@ -12,7 +12,7 @@ import {
   UrlMethodPair,
   VisitOptions,
 } from '@inertiajs/core'
-import { cloneDeep, get, has, isEqual, set } from 'lodash-es'
+import { cloneDeep, get, has, isEqual, set } from 'es-toolkit/compat'
 import { reactive, watch } from 'vue'
 import { config } from '.'
 
diff --git a/packages/vue3/src/useRemember.ts b/packages/vue3/src/useRemember.ts
@@ -1,5 +1,5 @@
 import { router } from '@inertiajs/core'
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep } from 'es-toolkit/compat'
 import { isReactive, reactive, ref, Ref, watch } from 'vue'
 
 export default function useRemember<T extends object>(
diff --git a/packages/vue3/test-app/Pages/InfiniteScroll/Filtering.vue b/packages/vue3/test-app/Pages/InfiniteScroll/Filtering.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { InfiniteScroll, Link, useForm } from '@inertiajs/vue3'
-import { debounce } from 'lodash-es'
+import { debounce } from 'es-toolkit/compat'
 import { watch } from 'vue'
 import { User, default as UserCard } from './UserCard.vue'
 
diff --git a/packages/vue3/test-app/eslint.config.js b/packages/vue3/test-app/eslint.config.js
@@ -15,11 +15,11 @@ export default defineConfigWithVueTs(
   vueTsConfigs.recommended,
   {
     languageOptions: {
-      ecmaVersion: 2020,
+      ecmaVersion: 2022,
       sourceType: 'module',
       globals: {
         ...globals.browser,
-        ...globals.es2020,
+        ...globals.es2022,
       },
     },
   },
diff --git a/packages/vue3/tsconfig.json b/packages/vue3/tsconfig.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ const config = {`
`9`	`9`	`bundle: true,`
`10`	`10`	`minify: false,`
`11`	`11`	`sourcemap: withDeps ? false : true,`
`12`		`- target: 'es2020',`
	`12`	`+ target: 'es2022',`
`13`	`13`	`plugins: [`
`14`	`14`	`...(withDeps ? [] : [nodeExternalsPlugin()]),`
`15`	`15`	`{`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { get, has, set } from 'lodash-es'`
	`1`	`+import { get, has, set } from 'es-toolkit/compat'`
`2`	`2`	`import { InertiaAppConfig } from './types'`
`3`	`3`
`4`	`4`	`// Generate all possible nested paths`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { get, set } from 'lodash-es'`
	`1`	`+import { get, set } from 'es-toolkit/compat'`
`2`	`2`	`import { isFile } from './files'`
`3`	`3`	`import { FormDataConvertible } from './types'`
`4`	`4`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { cloneDeep, isEqual } from 'lodash-es'`
	`1`	`+import { cloneDeep, isEqual } from 'es-toolkit/compat'`
`2`	`2`	`import { decryptHistory, encryptHistory, historySessionStorageKeys } from './encryption'`
`3`	`3`	`import { page as currentPage } from './page'`
`4`	`4`	`import Queue from './queue'`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { cloneDeep } from 'lodash-es'`
	`1`	`+import { cloneDeep } from 'es-toolkit/compat'`
`2`	`2`	`import { objectsAreEqual } from './objectUtils'`
`3`	`3`	`import { Response } from './response'`
`4`	`4`	`import { timeToMs } from './time'`