Merge pull request #31 from aviemet/bundle

Bundle

.yarnrc.yml

@@ -1,9 +1,7 @@
-nodeLinker: node-modules
+compressionLevel: mixed
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+enableGlobalCache: true
 
-yarnPath: .yarn/releases/yarn-3.4.1.cjs
+nodeLinker: node-modules
 
-enableGlobalCache: true
+yarnPath: .yarn/releases/yarn-4.5.3.cjs

package.json

@@ -5,6 +5,7 @@
   "main": "dist/useInertiaForm.js",
   "cjs": "dist/useInertiaForm.cjs",
   "unpkg": "dist/useInertiaForm.umd.min.js",
+  "types": "dist/index.d.ts",
   "homepage": "https://github.com/aviemet/useInertiaForm#readme",
   "sideEffects": false,
   "files": [
@@ -14,20 +15,23 @@
     "react",
     "hooks",
     "react-hooks",
-    "inertiajs"
+    "inertiajs",
+    "useForm",
+    "useInertiaForm"
   ],
   "repository": {
     "type": "git",
     "url": "https://github.com/aviemet/useInertiaForm.git"
   },
   "author": "Avram Walden <[email protected]>",
   "license": "MIT",
+  "packageManager": "[email protected]",
   "bugs": {
     "url": "https://github.com/aviemet/useInertiaForm/issues"
   },
   "scripts": {
     "build": "yarn clean && rollup -c --bundleConfigAsCjs",
-    "watch": "rollup --watch -c --bundleConfigAsCjs",
+    "build:watch": "yarn clean && rollup --watch -c --bundleConfigAsCjs",
     "clean": "rimraf dist",
     "lint": "eslint '**/*.{js,ts}'",
     "lint:fix": "npm run lint -- --fix",
@@ -39,14 +43,6 @@
     "release": "semantic-release",
     "cz": "git-cz"
   },
-  "dependencies": {
-    "@inertiajs/react": "^1.2.0",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "axios": "^1.7.8",
-    "lodash": "^4.17.21",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-runtime": "^7.25.9",
@@ -56,11 +52,13 @@
     "@commitlint/cli": "^19.6.0",
     "@commitlint/config-conventional": "^19.6.0",
     "@eslint/compat": "^1.2.3",
+    "@inertiajs/react": "^1.2.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@stylistic/eslint-plugin": "^2.11.0",
@@ -75,6 +73,7 @@
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.16.0",
     "@typescript-eslint/parser": "^8.16.0",
+    "axios": "^1.7.8",
     "axios-mock-adapter": "^2.1.0",
     "circular-json": "^0.5.9",
     "commitizen": "^4.3.1",
@@ -96,10 +95,14 @@
     "jest-fixed-jsdom": "^0.0.9",
     "jest-mock-axios": "^4.8.0",
     "lint-staged": "^15.2.10",
+    "lodash": "^4.17.21",
     "msw": "^2.6.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
     "rollup": "^4.27.4",
+    "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-sourcemaps": "^0.6.3",
@@ -111,7 +114,10 @@
   },
   "peerDependencies": {
     "@inertiajs/react": "^1.0.0",
-    "react": "^16.9.0 || ^17.0.0 || ^18.0.0"
+    "axios": "^1.7.8",
+    "lodash": "^2.0.0 || ^3.0.0 || ^4.0.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
   },
   "husky": {
     "hooks": {

rollup.config.js

@@ -6,6 +6,7 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
 import sourcemaps from 'rollup-plugin-sourcemaps'
 import terser from '@rollup/plugin-terser'
 import filesize from 'rollup-plugin-filesize'
+import { dts } from 'rollup-plugin-dts'
 import pkg from './package.json'
 
 const externalDeps = [
@@ -24,6 +25,7 @@ const basePlugins = [
 	commonjs(),
 	typescript({
 		tsconfig: './tsconfig.build.json',
+		declarationDir: './dist',
 	}),
 	sourcemaps(),
 	filesize({
@@ -78,4 +80,21 @@ export default [
 		plugins: basePlugins,
 		external: externalDeps,
 	},
+	{
+		input: 'src/index.ts',
+		output: [
+			{
+				file: pkg.types,
+				format: 'es',
+			},
+		],
+		plugins: [
+			dts({
+				compilerOptions: {
+					baseUrl: './dist',
+				},
+			}),
+		],
+		external: [...externalDeps],
+	},
 ]

src/Inputs/Submit.tsx

@@ -17,7 +17,7 @@ const Submit = React.forwardRef<HTMLButtonElement, ButtonProps>((
 		if(!requiredFields || requiredFields.length === 0) return false
 
 		return requiredFields.some((field) => isUnset(getData(field)))
-	}, [data])
+	}, [data, requiredFields])
 
 	return (
 		<Component { ...{

src/index.ts

@@ -1,18 +1,28 @@
-export { default as useInertiaForm, type UseInertiaFormProps, type NestedObject } from './useInertiaForm'
-export { default as useInertiaInput, type UseInertiaInputProps } from './useInertiaInput'
+export {
+	default as useInertiaForm,
+	type UseInertiaFormProps,
+	type NestedObject,
+} from './useInertiaForm'
+
+export {
+	default as useInertiaInput,
+	type UseInertiaInputProps,
+} from './useInertiaInput'
+
 export {
 	Form,
 	useForm,
 	type HTTPVerb,
 	type UseFormProps,
 	type FormProps,
 } from './Form'
+
 export {
 	Input,
-	Submit,
+	DynamicInputs,
 	NestedFields,
+	Submit,
 	useDynamicInputs,
 	type NestedFieldsProps,
-	DynamicInputs,
 	type DynamicInputsProps,
 } from './Inputs'

src/utils/isUnset.ts

@@ -4,6 +4,10 @@ import { isEmpty } from 'lodash'
  * Returns whether a value should be considered empty in the context of a form input
  */
 export const isUnset = (v: any) => {
+	if(v === undefined || v === null) {
+		return true
+	}
+
 	if(typeof v === 'string') {
 		return v === ''
 	}
@@ -12,5 +16,13 @@ export const isUnset = (v: any) => {
 		return v === 0 ? false : !Boolean(v)
 	}
 
+	if(v instanceof Date) {
+		return isNaN(v.valueOf())
+	}
+
+	if(typeof v === 'boolean') {
+		return false
+	}
+
 	return isEmpty(v)
 }

tests/server.mock.ts

@@ -22,6 +22,6 @@ export const server = setupServer(
 
 	// Error scenario
 	http.post('/api/data-error', () => {
-		return HttpResponse.json(mockErrorResponse, { status: 404 });
+		return HttpResponse.json(mockErrorResponse, { status: 302 });
 	})
 )

tests/useInertiaForm.server.test.tsx

@@ -1,38 +1,93 @@
-import { setupServer } from 'msw/node'
-import { http } from 'msw'
 import { router } from '@inertiajs/core'
 import { renderHook, act } from '@testing-library/react-hooks'
+import { server } from './server.mock'
 import { useInertiaForm } from '../src'
 
-const server = setupServer(
-	http.post('/form', async () => {})
-)
-
 beforeAll(() => server.listen())
 afterEach(() => server.resetHandlers())
 afterAll(() => server.close())
 
 describe('submit', () => {
-	it('should handle response details correctly', async () => {
-		const testData = {
-			email: 'some name',
-		}
-
-		jest.spyOn(router, 'post').mockImplementation((url, data, options) => {
-			options.onError({
-				// @ts-ignore
+	describe('flat data forms with errors', () => {
+		it('should handle flat data with one key', async () => {
+			const testData = {
+				email: 'some name',
+			}
+
+			jest.spyOn(router, 'post').mockImplementation((url, data, options) => {
+				options.onError({
+					// @ts-ignore
+					email: ['must exist'],
+				})
+			})
+
+			const { result } = renderHook(() => useInertiaForm(testData))
+
+			await act(async () => {
+				result.current.submit('post', '/api/data-error')
+			})
+
+			expect(result.current.errors).toMatchObject({
 				email: ['must exist'],
 			})
 		})
 
-		const { result } = renderHook(() => useInertiaForm(testData))
+		it('should flat data with more than one key', async () => {
+			const testData = {
+				email: 'some email',
+				user: 'some name',
+			}
+
+			jest.spyOn(router, 'post').mockImplementation((url, data, options) => {
+				options.onError({
+					// @ts-ignore
+					email: ['must exist'],
+					// @ts-ignore
+					username: ['must exist'],
+				})
+			})
+
+			const { result } = renderHook(() => useInertiaForm(testData))
+
+			await act(async () => {
+				result.current.submit('post', '/api/data-error')
+			})
 
-		await act(async () => {
-			result.current.submit('post', '/form')
+			expect(result.current.errors).toMatchObject({
+				email: ['must exist'],
+				username: ['must exist'],
+			})
 		})
+	})
+
+	describe('nested data', () => {
+		it('should nest errors', async () => {
+			const testData = {
+				user: {
+					email: 'some email',
+					username: 'some name',
+				},
+			}
 
-		expect(result.current.errors).toMatchObject({
-			email: ['must exist'],
+			jest.spyOn(router, 'post').mockImplementation((url, data, options) => {
+				options.onError({
+					// @ts-ignore
+					email: ['must exist'],
+					// @ts-ignore
+					username: ['must exist'],
+				})
+			})
+
+			const { result } = renderHook(() => useInertiaForm(testData))
+
+			await act(async () => {
+				result.current.submit('post', '/api/data-error')
+			})
+
+			expect(result.current.errors).toMatchObject({
+				'user.email': ['must exist'],
+				'user.username': ['must exist'],
+			})
 		})
 	})
 })