perf: enable tree-shaking

Ref: https://github.blog/2023-04-19-introducing-npm-package-provenance/

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 <!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
 
-## What changes this PR introduce?
+# What changes this PR introduce?
 
 ## List any relevant issue numbers
 

.github/workflows/build.yml

@@ -10,19 +10,19 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Build Package'
         run: 'npm run build'
 
       - name: 'Build Example'
-        run: 'cd example && npm install && npm run build'
+        run: 'cd example && npm clean-install && npm run build'

.github/workflows/lint.yml

@@ -10,16 +10,16 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - run: 'npm run lint:commit -- --to "${{ github.sha }}"'
       - run: 'npm run lint:editorconfig'

.github/workflows/release.yml

@@ -7,21 +7,29 @@ on:
 jobs:
   build:
     runs-on: 'ubuntu-latest'
+    permissions:
+      contents: 'write'
+      issues: 'write'
+      pull-requests: 'write'
+      id-token: 'write'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Build Package'
         run: 'npm run build'
 
+      - name: 'Verify the integrity of provenance attestations and registry signatures for installed dependencies'
+        run: 'npm audit signatures'
+
       - name: 'Release'
         run: 'npm run release'
         env:

.github/workflows/test.yml

@@ -10,16 +10,16 @@ jobs:
   test:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.3.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
+      - name: 'Setup Node.js'
         uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Test'
         run: 'npm run test'
@@ -27,22 +27,22 @@ jobs:
   test-e2e:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v3.0.0'
+      - uses: 'actions/checkout@v3.5.2'
 
-      - name: 'Use Node.js'
-        uses: 'actions/setup-node@v3.1.0'
+      - name: 'Setup Node.js'
+        uses: 'actions/setup-node@v3.6.0'
         with:
           node-version: 'lts/*'
           cache: 'npm'
 
-      - name: 'Install'
-        run: 'npm install'
+      - name: 'Install dependencies'
+        run: 'npm clean-install'
 
       - name: 'Build Package'
         run: 'npm run build'
 
       - name: 'Build Example'
-        run: 'cd example && npm install && npm run build'
+        run: 'cd example && npm clean-install && npm run build'
 
       - name: 'End To End (e2e) Test Example'
         run: 'cd example && npm run test:e2e'

.gitignore

@@ -5,6 +5,7 @@ node_modules
 # production
 build
 dist
+.next
 
 # testing
 coverage

.markdownlint-cli2.jsonc

@@ -1,4 +1,10 @@
 {
+  "config": {
+    "extends": "markdownlint/style/prettier",
+    "relative-links": true,
+    "default": true,
+    "MD033": false
+  },
   "globs": ["**/*.{md,mdx}"],
   "ignores": ["**/node_modules"],
   "customRules": ["markdownlint-rule-relative-links"]

.markdownlint.json

@@ -1,7 +0,0 @@
-{
-  "default": true,
-  "relative-links": true,
-  "extends": "markdownlint/style/prettier",
-  "MD033": false,
-  "MD041": false
-}

.npmrc

@@ -1 +1,2 @@
 save-exact=true
+provenance=true

CODE_OF_CONDUCT.md

@@ -60,7 +60,7 @@ representative at an online or offline event.
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
 reported to the community leaders responsible for enforcement at
-contact@divlo.fr.
+<contact@divlo.fr>.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the

CONTRIBUTING.md

@@ -6,6 +6,10 @@ Thanks a lot for your interest in contributing to **react-component-form**! 🎉
 
 **react-component-form** has adopted the [Contributor Covenant](https://www.contributor-covenant.org/) as its Code of Conduct, and we expect project participants to adhere to it. Please read [the full text](./CODE_OF_CONDUCT.md) so that you can understand what actions will and will not be tolerated.
 
+## Open Development
+
+All work on **react-component-form** happens directly on this repository. Both core team members and external contributors send pull requests which go through the same review process.
+
 ## Types of contributions
 
 - Reporting a bug.
@@ -25,28 +29,4 @@ If you're adding new features to **react-component-form**, please include tests.
 
 ## Commits
 
-The commit message guidelines respect
-[@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/%40commitlint/config-conventional)
-and [Semantic Versioning](https://semver.org/) for releases.
-
-### Types
-
-Types define which kind of changes you made to the project.
-
-| Types    | Description                                                                                                  |
-| -------- | ------------------------------------------------------------------------------------------------------------ |
-| feat     | A new feature.                                                                                               |
-| fix      | A bug fix.                                                                                                   |
-| docs     | Documentation only changes.                                                                                  |
-| style    | Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc).      |
-| refactor | A code change that neither fixes a bug nor adds a feature.                                                   |
-| perf     | A code change that improves performance.                                                                     |
-| test     | Adding missing tests or correcting existing tests.                                                           |
-| build    | Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm).         |
-| ci       | Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs). |
-| chore    | Other changes that don't modify src or test files.                                                           |
-| revert   | Reverts a previous commit.                                                                                   |
-
-### Scopes
-
-Scopes define what part of the code changed.
+The commit message guidelines adheres to [Conventional Commits](https://www.conventionalcommits.org/) and [Semantic Versioning](https://semver.org/) for releases.

README.md

@@ -89,13 +89,13 @@ export const Example = () => {
     formData,
     formElement
   ) => {
-    console.log(formData) // { inputName: 'value of the input validated' }
+    console.log(formData) // { inputName: 'value of the input validated and type-safe' }
     formElement.reset()
 
     // The return can be either `null` or an object with a global message of type `'error' | 'success'`.
     return {
       type: 'success',
-      value: 'Success: Form submitted'
+      message: 'Success: Form submitted'
     }
   }
 

example/components/FormExample.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Form, useForm } from 'react-component-form'
 import type { HandleUseFormCallback } from 'react-component-form'
 import useTranslation from 'next-translate/useTranslation'
@@ -8,7 +10,7 @@ import { useFormTranslation } from '../hooks/useFormTranslation'
 import { userSchema } from '../models/User'
 import { FormState } from './design/FormState'
 
-const simulateServerRequest = async (ms: number): Promise<void> => {
+const fakeServerRequest = async (ms: number): Promise<void> => {
   return await new Promise((resolve) => {
     setTimeout(resolve, ms)
   })
@@ -23,12 +25,12 @@ export const FormExample: React.FC = () => {
     formData,
     formElement
   ) => {
-    await simulateServerRequest(2000)
+    await fakeServerRequest(2_000)
     console.log('onSubmit:', formData)
     formElement.reset()
     return {
       type: 'success',
-      value: 'common:success-message'
+      message: 'common:success-message'
     }
   }
 

example/cypress/e2e/Form.cy.ts

@@ -3,7 +3,7 @@ describe('Form', () => {
     cy.visit('/')
   })
 
-  it('suceeds, reset input values and display the global success message', () => {
+  it('succeeds, reset input values and display the global success message', () => {
     cy.get('[data-cy=input-name]').type('John')
     cy.get('[data-cy=input-email]').type('john@john.com')
     cy.get('#error-name').should('not.exist')

example/models/User.ts

@@ -1,4 +1,5 @@
-import { Static, Type } from '@sinclair/typebox'
+import type { Static } from '@sinclair/typebox'
+import { Type } from '@sinclair/typebox'
 
 export const userSchema = {
   name: Type.String({ minLength: 3, maxLength: 10 }),

example/next.config.js

@@ -1,4 +1,4 @@
-const nextTranslate = require('next-translate')
+const nextTranslate = require('next-translate-plugin')
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {

example/package.json

@@ -11,27 +11,28 @@
     "test:dev": "start-server-and-test \"dev\" \"http://127.0.0.1:3000\" \"cypress open\""
   },
   "dependencies": {
-    "@sinclair/typebox": "0.25.20",
+    "@sinclair/typebox": "0.28.10",
     "clsx": "1.2.1",
-    "next": "13.1.1",
+    "next": "13.2.4",
     "next-themes": "0.2.1",
-    "next-translate": "1.6.0",
+    "next-translate": "2.0.5",
     "react": "18.2.0",
     "react-component-form": "file:..",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@tsconfig/strictest": "1.0.2",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
-    "autoprefixer": "10.4.13",
-    "cypress": "12.3.0",
-    "eslint": "8.31.0",
-    "eslint-config-next": "13.1.1",
-    "postcss": "8.4.21",
-    "start-server-and-test": "1.15.2",
-    "tailwindcss": "3.2.4",
-    "typescript": "4.9.4"
+    "@tsconfig/strictest": "2.0.1",
+    "@types/node": "20.1.4",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.4",
+    "autoprefixer": "10.4.14",
+    "cypress": "12.12.0",
+    "eslint": "8.40.0",
+    "eslint-config-next": "13.2.4",
+    "next-translate-plugin": "2.0.5",
+    "postcss": "8.4.23",
+    "start-server-and-test": "2.0.0",
+    "tailwindcss": "3.3.2",
+    "typescript": "5.0.4"
   }
 }

example/tsconfig.json

@@ -9,10 +9,11 @@
     "noEmit": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
-    "exactOptionalPropertyTypes": false
+    "exactOptionalPropertyTypes": false,
+    "verbatimModuleSyntax": false,
+    "isolatedModules": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

package.json

@@ -18,58 +18,62 @@
     "url": "https://github.com/Divlo/react-component-form/issues"
   },
   "homepage": "https://react-component-form.vercel.app/",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
   "files": [
-    "dist"
+    "build"
   ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "scripts": {
     "build": "tsup",
     "test": "jest",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
     "lint:markdown": "markdownlint-cli2",
-    "lint:eslint": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:eslint": "eslint \".\"",
     "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
     "release": "semantic-release"
   },
   "peerDependencies": {
-    "react": ">=16"
+    "react": ">=18.2.0"
   },
   "dependencies": {
-    "@sinclair/typebox": "0.25.20",
+    "@sinclair/typebox": "0.28.10",
     "ajv": "8.12.0",
     "ajv-formats": "2.1.1"
   },
   "devDependencies": {
-    "@commitlint/cli": "17.4.1",
-    "@commitlint/config-conventional": "17.4.0",
-    "@testing-library/react": "13.4.0",
-    "@tsconfig/strictest": "1.0.2",
-    "@types/jest": "29.2.5",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
-    "@typescript-eslint/eslint-plugin": "5.48.1",
-    "@typescript-eslint/parser": "5.48.1",
-    "editorconfig-checker": "4.0.2",
-    "esbuild": "0.16.16",
+    "@commitlint/cli": "17.6.3",
+    "@commitlint/config-conventional": "17.6.3",
+    "@testing-library/react": "14.0.0",
+    "@tsconfig/strictest": "2.0.1",
+    "@types/jest": "29.5.1",
+    "@types/react": "18.2.6",
+    "@types/react-dom": "18.2.4",
+    "@typescript-eslint/eslint-plugin": "5.59.5",
+    "@typescript-eslint/parser": "5.59.5",
+    "editorconfig-checker": "5.0.1",
+    "esbuild": "0.17.19",
     "esbuild-jest": "0.5.0",
-    "eslint": "8.31.0",
-    "eslint-config-conventions": "6.0.0",
-    "eslint-config-prettier": "8.6.0",
-    "eslint-plugin-import": "2.26.0",
+    "eslint": "8.40.0",
+    "eslint-config-conventions": "9.0.0",
+    "eslint-config-prettier": "8.8.0",
+    "eslint-plugin-import": "2.27.5",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-promise": "6.1.1",
-    "eslint-plugin-unicorn": "45.0.2",
-    "jest": "29.3.1",
-    "jest-environment-jsdom": "29.3.1",
-    "markdownlint-cli2": "0.6.0",
-    "markdownlint-rule-relative-links": "1.1.1",
-    "prettier": "2.8.2",
+    "eslint-plugin-unicorn": "47.0.0",
+    "jest": "29.5.0",
+    "jest-environment-jsdom": "29.5.0",
+    "markdownlint-cli2": "0.7.1",
+    "markdownlint-rule-relative-links": "1.2.0",
+    "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "semantic-release": "20.0.2",
-    "tsup": "6.5.0",
-    "typescript": "4.9.4"
+    "semantic-release": "21.0.2",
+    "tsup": "6.7.0",
+    "typescript": "5.0.4"
   }
 }

src/__test__/index.test.tsx

@@ -29,14 +29,14 @@ describe('<Form />', () => {
     const text = 'some random text'
 
     fireEvent.change(inputForm, { target: { value: text } })
-    expect(formData.inputName).toEqual(text)
+    expect(formData['inputName']).toEqual(text)
     expect(formElement instanceof HTMLFormElement).toBeTruthy()
     formData = {}
     formElement = null
 
     fireEvent.click(buttonSubmit)
     expect(Object.keys(formData).length).toEqual(1)
-    expect(formData.inputName).toEqual(text)
+    expect(formData['inputName']).toEqual(text)
     expect(formElement instanceof HTMLFormElement).toBeTruthy()
   })
 })

src/hooks/useForm.ts

@@ -11,7 +11,7 @@ import { handleCheckboxBoolean } from '../utils/handleCheckboxBoolean'
 import { handleOptionalEmptyStringToNull } from '../utils/handleOptionalEmptyStringToNull'
 
 export interface Schema {
-  [property: string]: any
+  [property: string | symbol]: any
 }
 
 export type Error = ErrorObject
@@ -38,13 +38,13 @@ export type HandleUseForm<K extends Schema> = (
 
 export interface GlobalMessage {
   type: 'error' | 'success'
-  value?: string
+  message?: string
   properties?: undefined
 }
 
 export interface PropertiesMessage<K extends Schema> {
   type: 'error'
-  value?: string
+  message?: string
   properties: { [key in keyof Partial<K>]: string }
 }
 
@@ -129,8 +129,8 @@ export const useForm = <K extends Schema>(
             formElement
           )
           if (message != null) {
-            const { value, type, properties } = message
-            setMessage(value)
+            const { message: messageValue, type, properties } = message
+            setMessage(messageValue)
             setFetchState(type)
             if (type === 'error') {
               const propertiesErrors: ErrorsObject<typeof validationSchema> =

src/utils/handleCheckboxBoolean.ts

@@ -1,11 +1,11 @@
 import type { TObject } from '@sinclair/typebox'
 
-import type { ObjectAny } from './types'
+import type { Schema } from '../hooks/useForm'
 
 export const handleCheckboxBoolean = (
-  object: ObjectAny,
-  validateSchemaObject: TObject<ObjectAny>
-): ObjectAny => {
+  object: Schema,
+  validateSchemaObject: TObject<Schema>
+): Schema => {
   const booleanProperties: string[] = []
   for (const property in validateSchemaObject.properties) {
     const rule = validateSchemaObject.properties[property]

src/utils/handleOptionalEmptyStringToNull.ts

@@ -1,4 +1,6 @@
-export const handleOptionalEmptyStringToNull = <K>(
+import type { Schema } from '../hooks/useForm'
+
+export const handleOptionalEmptyStringToNull = <K extends Schema>(
   object: K,
   required: string[] = []
 ): K => {

src/utils/types.ts

@@ -1,3 +0,0 @@
-export interface ObjectAny {
-  [key: string]: any
-}

tsup.config.js

@@ -1,12 +1,13 @@
 import { defineConfig } from 'tsup'
 
 export default defineConfig({
-  entry: ['src/index.ts'],
-  sourcemap: true,
+  entry: ['src/**/*.{ts,tsx}', '!src/**/*.test.{ts,tsx}'],
+  sourcemap: false,
   clean: true,
   platform: 'browser',
   target: 'esnext',
   format: ['esm'],
-  minify: true,
+  minify: false,
+  outDir: 'build',
   dts: true
 })