📦 Reduce import cost:

- Amend tsconfig
- Amend package.json
- Change to named exports

Author: Daniel Requejo

Diff for: package.json

@@ -1,16 +1,20 @@
 {
-  "author": "Dennis R. Bosmans",
   "name": "vue-form-handler",
+  "version": "0.0.4",
+  "type": "module",
+  "license": "MIT",
+  "author": "Dennis R. Bosmans",
+  "sideEffects": false,
   "description": "Vue 3 form handler, with validation, error handling, and more.",
+  "homepage": "https://www.vue-form-handler.com/",
   "repository": {
     "type": "git",
     "url": "https://github.com/dbssman/vue-form-handler"
   },
-  "homepage": "https://www.vue-form-handler.com/",
-  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dbssman/vue-form-handler/issues"
+  },
   "private": false,
-  "version": "0.0.4",
-  "type": "module",
   "keywords": [
     "vue",
     "vue handler",
@@ -21,13 +25,13 @@
   "files": [
     "dist"
   ],
-  "main": "./dist/vue-form-handler.umd.cjs",
-  "module": "./dist/vue-form-handler.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/vue-form-handler.js",
-      "require": "./dist/vue-form-handler.umd.cjs",
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs",
       "types": "./dist/index.d.ts"
     }
   },
@@ -42,6 +46,7 @@
     "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
+    "vue": "^3.2.41",
     "@types/lodash-es": "^4.17.6",
     "@types/node": "^18.11.9",
     "@vitejs/plugin-vue": "^3.2.0",
@@ -55,7 +60,6 @@
     "vite-plugin-dts": "^1.7.1",
     "vitepress": "^1.0.0-alpha.33",
     "vitest": "^0.26.1",
-    "vue": "^3.2.41",
     "vue-tsc": "^1.0.9"
   }
 }

Diff for: src/FormHandler.ts

@@ -1,8 +1,8 @@
-import useFormHandler from './useFormHandler';
+import { useFormHandler } from './useFormHandler';
 import { FormHandlerParams, FormHandlerReturn } from './types/formHandler';
 import { defineComponent, PropType } from 'vue';
 
-export default defineComponent({
+export const FormHandler = defineComponent({
     name: 'FormHandler',
     props: {
         initialValues: Object as PropType<FormHandlerParams['initialValues']>,

Diff for: src/core/constants.ts renamed to src/constants.ts

@@ -1,4 +1,4 @@
-import { BaseControlEmits } from "../types"
+import { BaseControlEmits } from "./types"
 
 export const DEFAULT_FIELD_VALUE = null;
 

Diff for: src/index.ts

@@ -1,5 +1,4 @@
-export { default as FormHandler } from './FormHandler'
-export { default as useFormHandler } from './useFormHandler'
-
-export * from './core/constants'
-export type { Interceptor, FormValidation } from './types'
+export * from './FormHandler'
+export * from './useFormHandler'
+export * from './types'
+export * from './constants'

Diff for: src/logic/getDefaultFieldValue.ts

@@ -1,5 +1,5 @@
 import { isCheckboxInput } from "../utils"
-import { DEFAULT_FIELD_VALUE } from "../core/constants"
+import { DEFAULT_FIELD_VALUE } from "../constants"
 
 export default (el: any) => {
     if (!el) {

Diff for: src/logic/getNativeFieldValue.ts

@@ -1,4 +1,4 @@
-import { DEFAULT_FIELD_VALUE } from '../core/constants';
+import { DEFAULT_FIELD_VALUE } from '../constants';
 import { isCheckboxInput, isMultipleSelect, isRadioInput } from "../utils"
 
 export default (el: any) => {

Diff for: src/test/component.test.ts

@@ -1,4 +1,4 @@
-import FormHandler from '../FormHandler'
+import { FormHandler } from '../FormHandler'
 import { mount } from '@vue/test-utils'
 import { expect, it, describe } from "vitest"
 

Diff for: src/test/handler.test.ts

@@ -1,4 +1,4 @@
-import useFormHandler, { initialState } from '../useFormHandler';
+import { initialState, useFormHandler } from '../useFormHandler';
 import { expect, it, describe } from "vitest"
 
 describe('Form handler testing', () => {

Diff for: src/test/register.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect } from 'vitest'
-import useFormHandler from '../useFormHandler'
+import { useFormHandler } from '../useFormHandler'
 
 describe('Register function testing', () => {
     it('Registering a field', () => {

Diff for: src/types/formHandler.ts

@@ -169,4 +169,4 @@ export interface FormHandlerReturn {
 }
 
 /** Form handler solution as a composable function */
-export type FormHandler = (_?: FormHandlerParams) => FormHandlerReturn
+export type UseFormHandler = (_?: FormHandlerParams) => FormHandlerReturn

Diff for: src/useFormHandler.ts

@@ -1,9 +1,9 @@
 import { NativeValidations } from './types/validations';
-import { DEFAULT_FIELD_VALUE } from './core/constants';
+import { DEFAULT_FIELD_VALUE } from './constants';
 import {
   ModifiedValues,
   TriggerValidation,
-  FormHandler,
+  UseFormHandler,
   ResetField,
   ResetForm,
   InitControl,
@@ -36,7 +36,7 @@ export const initialState = () => ({
   isValid: true,
 })
 
-const useFormHandler: FormHandler = ({
+export const useFormHandler: UseFormHandler = ({
   initialValues = {},
   interceptor,
   validate,
@@ -290,5 +290,3 @@ const useFormHandler: FormHandler = ({
     values: readonly(values)
   }
 }
-
-export default useFormHandler

Diff for: tsconfig.json

@@ -5,6 +5,8 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "strict": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
     "jsx": "preserve",
     "resolveJsonModule": true,
     "isolatedModules": true,
@@ -14,8 +16,13 @@
       "DOM"
     ],
     "skipLibCheck": true,
+    "skipDefaultLibCheck": true,
     "noEmit": true,
     "declaration": true,
+    "declarationMap": true,
+    "noUnusedLocals": true,
+    "sourceMap": true,
+    "noImplicitAny": true,
     "types": [
       "vitest/importMeta"
     ]

Diff for: vite.config.ts

@@ -16,25 +16,23 @@ export default defineConfig({
     reporters: 'verbose',
   },
   build: {
+    sourcemap: true,
+    minify: false,
     lib: {
       entry: resolve(__dirname, 'src/index.ts'),
-      name: 'VueFormHandler',
-      fileName: 'vue-form-handler',
+      name: 'vue-form-handler',
+      fileName: 'index',
     },
     rollupOptions: {
-      external: ['vue'],
       output: {
-        globals: {
-          vue: 'Vue'
-        }
+        sourcemapExcludeSources: true,
       }
     }
   },
   plugins: [
     vue(),
     dts({
       insertTypesEntry: true,
-      exclude: ['**/logic', '**/utils'],
     }),
   ]
 })