perf: reduce drastically build size

BREAKING CHANGE: This package is now pure ESM

.commitlintrc.json

@@ -0,0 +1 @@
+{ "extends": ["@commitlint/config-conventional"] }

.eslintignore

@@ -1,5 +1,5 @@
-build/
+node_modules
-dist/
+build
-node_modules/
+dist
-.snapshots/
+.parcel-cache
-*.min.js
+example

.eslintrc

@@ -1,36 +0,0 @@
-{
-  "parser": "@typescript-eslint/parser",
-  "extends": [
-    "standard",
-    "standard-react",
-    "plugin:prettier/recommended",
-    "prettier/standard",
-    "prettier/react",
-    "plugin:@typescript-eslint/eslint-recommended"
-  ],
-  "env": {
-    "node": true
-  },
-  "parserOptions": {
-    "ecmaVersion": 2020,
-    "ecmaFeatures": {
-      "legacyDecorators": true,
-      "jsx": true
-    }
-  },
-  "settings": {
-    "react": {
-      "version": "16"
-    }
-  },
-  "rules": {
-    "space-before-function-paren": 0,
-    "react/prop-types": 0,
-    "react/jsx-handler-names": 0,
-    "react/jsx-fragments": 0,
-    "react/no-unused-prop-types": 0,
-    "import/export": 0,
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": "off"
-  }
-}

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": ["conventions", "prettier"],
+  "plugins": ["prettier", "import", "unicorn"],
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "env": {
+    "jest": true,
+    "browser": true
+  },
+  "rules": {
+    "prettier/prettier": "error"
+  }
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/ISSUE_TEMPLATE/BUG.md

@@ -1,6 +1,7 @@
 ---
 name: '🐛 Bug Report'
 about: 'Report an unexpected problem or unintended behavior.'
+title: '[Bug]'
 labels: 'bug'
 ---
 

.github/ISSUE_TEMPLATE/DOCUMENTATION.md

@@ -1,20 +1,18 @@
 ---
 name: '📜 Documentation'
 about: 'Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...).'
+title: '[Documentation]'
 labels: 'documentation'
 ---
 
-<!--
+<!-- Please make sure your issue has not already been fixed. -->
-Please make sure your issue has not already been fixed.
 
-Please place an x (no spaces - [x]) in all [ ] that apply.
+## Documentation
--->
 
-### Documentation :
+<!-- Please uncomment the type of documentation problem this issue address -->
 
-- [ ] Is Missing
+<!-- Documentation is Missing -->
-- [ ] Is Confusing
+<!-- Documentation is Confusing -->
-- [ ] Has Typo errors
+<!-- Documentation has Typo errors -->
-- [ ] Not Sure?
 
-### Proposal
+## Proposal

.github/ISSUE_TEMPLATE/FEATURE_REQUEST.md

@@ -1,19 +1,20 @@
 ---
 name: '✨ Feature Request'
 about: 'Suggest a new feature idea.'
+title: '[Feature]'
 labels: 'feature request'
 ---
 
 <!-- Please make sure your issue has not already been fixed. -->
 
-### Description
+## Description
 
 <!-- A clear and concise description of the problem or missing capability... -->
 
-### Describe the solution you'd like
+## Describe the solution you'd like
 
 <!-- If you have a solution in mind, please describe it. -->
 
-### Describe alternatives you've considered
+## Describe alternatives you've considered
 
 <!-- Have you considered any alternative solutions or workarounds? -->

.github/ISSUE_TEMPLATE/IMPROVEMENT.md

@@ -1,21 +1,20 @@
 ---
 name: '🔧 Improvement'
 about: 'Improve structure/format/performance/refactor/tests of the code.'
+title: '[Improvement]'
 labels: 'improvement'
 ---
 
-<!--.
+<!-- Please make sure your issue has not already been fixed. -->
-Please make sure your issue has not already been fixed.
 
-Please place an x (no spaces - [x]) in all [ ] that apply.
+## Type of Improvement
--->
 
-### Type of Improvement :
+<!-- Please uncomment the type of improvements this issue address -->
 
-- [ ] Files and Folders Structure
+<!-- Files and Folders Structure -->
-- [ ] Performance
+<!-- Performance -->
-- [ ] Refactoring code
+<!-- Refactoring code -->
-- [ ] Tests
+<!-- Tests -->
-- [ ] Not Sure?
+<!-- Not Sure? -->
 
-### Proposal
+## Proposal

.github/ISSUE_TEMPLATE/QUESTION.md

@@ -1,6 +1,7 @@
 ---
 name: '🙋 Question'
 about: 'Further information is requested.'
+title: '[Question]'
 labels: 'question'
 ---
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,29 +1,7 @@
-<!--
+<!-- Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time. -->
 
-Thanks a lot for your interest in contributing to react-component-form! 🎉
+## What changes this PR introduce?
 
-Please first discuss the change you wish to make via issue before making a change. It might avoid a waste of your time.
+## List any relevant issue numbers
 
-Before submitting your contribution, please take a moment to review this document:
+## Is there anything you'd like reviewers to focus on?
-https://github.com/Divlo/react-component-form/blob/master/.github/CONTRIBUTING.md
-
-Please place an x (no spaces - [x]) in all [ ] that apply.
-
--->
-
-### What type of change does this PR introduce?
-
-- [ ] Bugfix
-- [ ] Feature
-- [ ] Refactor
-- [ ] Documentation
-- [ ] Not Sure?
-
-### Does this PR introduce breaking changes?
-
-- [ ] Yes
-- [ ] No
-
-### List any relevant issue numbers:
-
-### Description:

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: 'Build'
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.1.0'
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Build Package'
+        run: 'npm run build'
+
+      - name: 'Build Example'
+        run: 'cd example && npm install && npm run build'

.github/workflows/commitlint.yml

@@ -1,16 +0,0 @@
-name: 'Lint Commit Messages'
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-jobs:
-  commitlint:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v2

.github/workflows/lint.yml

@@ -0,0 +1,28 @@
+name: 'Lint'
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  lint:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.1.0'
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - run: 'npm run lint:commit -- --to "${{ github.sha }}"'
+      - run: 'npm run lint:editorconfig'
+      - run: 'npm run lint:markdown'
+      - run: 'npm run lint:typescript'
+      - run: 'npm run lint:prettier'

.github/workflows/node.js.yml

@@ -1,33 +0,0 @@
-name: Node.js CI
-
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [12.x, 14.x]
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: 'Cache dependencies'
-        uses: actions/cache@v2
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2.1.2
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: 'Install dependencies'
-        run: npm ci
-
-      - name: 'Run the tests'
-        run: npm test

.github/workflows/npm-publish.yml

@@ -1,30 +0,0 @@
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
-
-name: 'Node.js Package'
-
-on:
-  release:
-    types: [created]
-
-jobs:
-  publish-npm:
-    runs-on: 'ubuntu-latest'
-    steps:
-      - uses: 'actions/checkout@v2'
-
-      - name: 'Cache dependencies'
-        uses: 'actions/cache@v2'
-        with:
-          path: '**/node_modules'
-          key: ${{ runner.os }}-${{ hashFiles('**/package.json') }}
-
-      - uses: 'actions/setup-node@v2.1.2'
-        with:
-          node-version: 14
-          registry-url: 'https://registry.npmjs.org/'
-
-      - run: 'npm install'
-      - run: 'npm run build'
-      - run: 'npm publish'
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/release.yml

@@ -0,0 +1,38 @@
+name: 'Release'
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.1.0'
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Build Package'
+        run: 'npm run build'
+
+      - name: 'Build Example'
+        run: 'cd example && npm install && npm run build'
+
+      - name: 'Deploy Example'
+        uses: 'JamesIves/github-pages-deploy-action@v4.3.0'
+        with:
+          branch: 'gh-pages'
+          folder: 'example/dist'
+
+      - name: 'Release'
+        run: 'npm run release'
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/test.yml

@@ -0,0 +1,25 @@
+name: 'Test'
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: 'ubuntu-latest'
+    steps:
+      - uses: 'actions/checkout@v3.0.0'
+
+      - name: 'Use Node.js'
+        uses: 'actions/setup-node@v3.1.0'
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: 'Install'
+        run: 'npm install'
+
+      - name: 'Test'
+        run: 'npm run test'

.gitignore

@@ -1,21 +1,39 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
 # dependencies
 node_modules
+.npm
 
-# builds
+# production
 build
 dist
-.rpt2_cache
+
+# testing
+coverage
+.nyc_output
+
+# envs
+.env
+.env.production
+
+# debug
+npm-debug.log*
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
 # misc
 .DS_Store
-.env
+.parcel-cache
-.env.local
+.cache
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

.markdownlint.json

@@ -0,0 +1,6 @@
+{
+  "default": true,
+  "MD013": false,
+  "MD033": false,
+  "MD041": false
+}

.npmrc

@@ -0,0 +1 @@
+save-exact=true

.prettierrc

@@ -1,10 +0,0 @@
-{
-  "singleQuote": true,
-  "jsxSingleQuote": true,
-  "semi": false,
-  "tabWidth": 2,
-  "bracketSpacing": true,
-  "jsxBracketSameLine": false,
-  "arrowParens": "always",
-  "trailingComma": "none"
-}

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "trailingComma": "none"
+}

.releaserc.json

@@ -0,0 +1,19 @@
+{
+  "branches": ["master"],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "conventionalcommits"
+      }
+    ],
+    [
+      "@semantic-release/release-notes-generator",
+      {
+        "preset": "conventionalcommits"
+      }
+    ],
+    "@semantic-release/npm",
+    "@semantic-release/github"
+  ]
+}

CONTRIBUTING.md

@@ -1,27 +1,33 @@
-# Contributing
+# 💡 Contributing
 
 Thanks a lot for your interest in contributing to **react-component-form**! 🎉
 
+## Code of Conduct
+
+**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.
+
 ## Types of contributions
 
 - Reporting a bug.
 - Suggest a new feature idea.
-- Correct spelling errors, improvements or additions to documentation files (README, CONTRIBUTING...).
+- Correct spelling errors, improvements or additions to documentation files.
 - Improve structure/format/performance/refactor/tests of the code.
 
 ## Pull Requests
 
-- **Please first discuss** the change you wish to make via [issue](https://github.com/Divlo/react-component-form/issues) before making a change. It might avoid a waste of your time.
+- **Please first discuss** the change you wish to make via issues.
 
-- Ensure your code respect [JavaScript Standard Style](https://standardjs.com/).
+- Ensure your code respect linting.
 
-- Make sure your code passes the tests.
+- Make sure your **code passes the tests**.
 
 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.
+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
 
@@ -44,16 +50,3 @@ Types define which kind of changes you made to the project.
 ### Scopes
 
 Scopes define what part of the code changed.
-
-There are 2 principal scopes in the project :
-
-- lib
-- example
-
-### Examples
-
-```sh
-git commit -m "feat(lib): add Form component"
-git commit -m "docs(readme): update installation process"
-git commit -m "fix(example): remove bugs"
-```

README.md

@@ -5,12 +5,17 @@
 </p>
 
 <p align="center">
-  <a href="https://github.com/Divlo/react-component-form/actions?query=workflow%3A%22Node.js+CI%22"><img src="https://github.com/Divlo/react-component-form/workflows/Node.js%20CI/badge.svg" alt="Node.js CI" /></a>
+  <a href="./CONTRIBUTING.md"><img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat" /></a>
-  <a href="https://standardjs.com"><img src="https://img.shields.io/badge/code_style-standard-brightgreen.svg" alt="JavaScript Style Guide"/></a>
-  <a href="https://www.npmjs.com/package/react-component-form"><img src="https://img.shields.io/npm/v/react-component-form.svg" alt="npm version"></a>
   <a href="./LICENSE"><img src="https://img.shields.io/badge/licence-MIT-blue.svg" alt="Licence MIT"/></a>
+  <a href="./CODE_OF_CONDUCT.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Contributor Covenant" /></a>
+  <br />
+  <a href="https://github.com/Divlo/react-component-form/actions/workflows/build.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/build.yml/badge.svg?branch=master" /></a>
+  <a href="https://github.com/Divlo/react-component-form/actions/workflows/lint.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/lint.yml/badge.svg?branch=master" /></a>
+  <a href="https://github.com/Divlo/react-component-form/actions/workflows/test.yml"><img src="https://github.com/Divlo/react-component-form/actions/workflows/test.yml/badge.svg?branch=master" /></a>
+  <br />
   <a href="https://conventionalcommits.org"><img src="https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg" alt="Conventional Commits" /></a>
-  <a href="./.github/CODE_OF_CONDUCT.md"><img src="https://img.shields.io/badge/Contributor%20Covenant-v2.0%20adopted-ff69b4.svg" alt="Contributor Covenant" /></a>
+  <a href="https://github.com/semantic-release/semantic-release"><img src="https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg" alt="semantic-release" /></a>
+  <a href="https://www.npmjs.com/package/react-component-form"><img src="https://img.shields.io/npm/v/react-component-form.svg" alt="npm version"></a>
 </p>
 
 ## 📜 About
@@ -19,8 +24,6 @@
 
 Demo : [https://divlo.github.io/react-component-form/](https://divlo.github.io/react-component-form/).
 
-This project was bootstrapped with [create-react-library](https://www.npmjs.com/package/create-react-library).
-
 ## 💾 Install
 
 ```sh
@@ -31,7 +34,7 @@ npm install --save react-component-form
 
 ```tsx
 import React from 'react'
-import Form, { HandleForm } from 'react-component-form'
+import { Form, HandleForm } from 'react-component-form'
 
 const Example = () => {
   const handleSubmit: HandleForm = (formData, formElement) => {
@@ -57,6 +60,13 @@ Instead to get the `event` param you get `formData` and `formElement` params :
 - `formData`: It's an object where the keys are the name of your inputs and the current value. Behind the scene, it uses the [FormData](https://developer.mozilla.org/docs/Web/API/FormData) constructor.
 - `formElement`: It's the actual HTML form element in the DOM so for example you can access the `.reset()` method on a [HTMLFormElement](https://developer.mozilla.org/docs/Web/API/HTMLFormElement).
 
+## 💡 Contributing
+
+Anyone can help to improve the project, submit a Feature Request, a bug report or
+even correct a simple spelling mistake.
+
+The steps to contribute can be found in [CONTRIBUTING.md](./CONTRIBUTING.md).
+
 ## 📄 License
 
 [MIT](./LICENSE)

commitlint.config.js

@@ -1 +0,0 @@
-module.exports = { extends: ['@commitlint/config-conventional'] }

example/README.md

@@ -1,5 +0,0 @@
-This example was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-It is linked to the react-component-form package in the parent directory for development purposes.
-
-You can run `npm install` and then `npm start` to test your package.

example/globals.d.ts

@@ -0,0 +1 @@
+declare module '*.jpg'

example/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="./github.jpg" type="image/jpg" />
+    <title>react-component-form</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.tsx"></script>
+  </body>
+</html>

example/index.tsx

@@ -1,12 +1,13 @@
-//eslint-disable-next-line
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
-import Form, { HandleForm } from 'react-component-form'
+import { Form, HandleForm } from 'react-component-form'
 
-import GithubLogo from './github.jpg'
 import './index.css'
+import GitHubLogo from 'url:./github.jpg'
 
-const App = () => {
+global.React = React
+
+const App: React.FC = () => {
   const handleSubmit: HandleForm = (formData, formElement) => {
     console.clear()
     console.log('onSubmit: ', formData)
@@ -20,7 +21,7 @@ const App = () => {
   return (
     <div className='container'>
       <h2>{'<Form />'}</h2>
-      <h5 className='title-install'>npm i react-component-form</h5>
+      <h5 className='title-install'>npm install --save react-component-form</h5>
 
       <Form onSubmit={handleSubmit} onChange={handleChange}>
         <div className='form-group'>
@@ -54,11 +55,13 @@ const App = () => {
           rel='noopener noreferrer'
           href='https://github.com/Divlo/react-component-form'
         >
-          <img width='30px' alt='github' src={GithubLogo} />
+          <img width='30px' alt='github' src={GitHubLogo} />
         </a>
       </div>
     </div>
   )
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const container = document.getElementById('root') as HTMLElement
+const root = createRoot(container)
+root.render(<App />)

example/package.json

@@ -1,44 +1,21 @@
 {
-  "name": "react-component-form-example",
+  "name": "example",
-  "homepage": ".",
+  "type": "module",
-  "version": "0.0.0",
   "private": true,
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
   "scripts": {
-    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
+    "start": "parcel index.html",
-    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
+    "build": "parcel build index.html --public-url \"/react-component-form/\""
-    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
-    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
-    "@testing-library/react": "file:../node_modules/@testing-library/react",
-    "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
-    "@types/jest": "file:../node_modules/@types/jest",
-    "@types/node": "file:../node_modules/@types/node",
-    "@types/react": "file:../node_modules/@types/react",
-    "@types/react-dom": "file:../node_modules/@types/react-dom",
     "react": "file:../node_modules/react",
-    "react-component-form": "file:..",
     "react-dom": "file:../node_modules/react-dom",
-    "react-scripts": "file:../node_modules/react-scripts",
+    "react-component-form": "file:.."
-    "typescript": "file:../node_modules/typescript"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
+    "@parcel/transformer-image": "2.4.1",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
+    "parcel": "2.4.1",
+    "typescript": "4.6.3"
   }
 }

example/public/index.html

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>react-component-form</title>
-  </head>
-
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-
-    <div id="root"></div>
-
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

example/public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "react-component-form",
-  "name": "react-component-form",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

example/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

example/tsconfig.json

@@ -1,30 +1,12 @@
 {
   "compilerOptions": {
-    "outDir": "dist",
+    "module": "ESNext",
-    "module": "esnext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "lib": ["dom", "esnext", "DOM.Iterable"],
+    "target": "ESNext",
-    "moduleResolution": "node",
     "jsx": "react",
+    "moduleResolution": "node",
     "sourceMap": true,
-    "declaration": true,
-    "esModuleInterop": true,
-    "noImplicitReturns": true,
-    "noImplicitThis": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "allowSyntheticDefaultImports": true,
-    "target": "es5",
-    "allowJs": true,
-    "skipLibCheck": true,
     "strict": true,
-    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true
-    "resolveJsonModule": true,
+  }
-    "isolatedModules": true,
-    "noEmit": true
-  },
-  "include": ["src"],
-  "exclude": ["node_modules", "build"]
 }

jest.config.json

@@ -0,0 +1,8 @@
+{
+  "testEnvironment": "jsdom",
+  "rootDir": "./src",
+  "setupFilesAfterEnv": ["<rootDir>/__test__/setup.ts"],
+  "transform": {
+    "^.+\\.tsx?$": "esbuild-jest"
+  }
+}

package.json

@@ -1,22 +1,14 @@
 {
   "name": "react-component-form",
-  "version": "1.3.0",
+  "version": "0.0.0-development",
+  "public": true,
+  "type": "module",
   "description": "Manage React Forms with ease.",
   "author": "Divlo <contact@divlo.fr>",
   "license": "MIT",
-  "files": [
-    "dist"
-  ],
-  "main": "dist/index.js",
-  "module": "dist/index.modern.js",
-  "types": "dist/index.d.ts",
-  "source": "src/index.tsx",
-  "engines": {
-    "node": ">=12"
-  },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Divlo/react-component-form.git"
+    "url": "https://github.com/Divlo/react-component-form.git"
   },
   "keywords": [
     "react-form",
@@ -26,61 +18,50 @@
     "url": "https://github.com/Divlo/react-component-form/issues"
   },
   "homepage": "https://github.com/Divlo/react-component-form#readme",
-  "husky": {
+  "main": "dist/index.js",
-    "hooks": {
+  "types": "dist/index.d.ts",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+  "files": [
-    }
+    "dist"
-  },
+  ],
   "scripts": {
-    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "build": "tsup",
-    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "test": "jest",
-    "prepare": "run-s build",
+    "lint:commit": "commitlint",
-    "test": "run-s test:unit test:lint test:build",
+    "lint:editorconfig": "editorconfig-checker",
-    "test:build": "run-s build",
+    "lint:markdown": "markdownlint \"**/*.md\" --dot --ignore-path \".gitignore\"",
-    "test:lint": "eslint ./**/*.{js,jsx,ts,tsx}",
+    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\"",
-    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
-    "test:watch": "react-scripts test --env=jsdom",
+    "release": "semantic-release"
-    "predeploy": "cd example && npm install && npm run build",
-    "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "*"
+    "react": ">=16"
   },
   "devDependencies": {
-    "@commitlint/cli": "^11.0.0",
+    "@commitlint/cli": "16.2.3",
-    "@commitlint/config-conventional": "^11.0.0",
+    "@commitlint/config-conventional": "16.2.1",
-    "@testing-library/jest-dom": "^5.11.6",
+    "@testing-library/react": "13.0.0",
-    "@testing-library/react": "^11.2.2",
+    "@types/jest": "27.4.1",
-    "@testing-library/user-event": "^12.6.0",
+    "@types/react": "17.0.43",
-    "@types/jest": "^26.0.19",
+    "@types/react-dom": "17.0.14",
-    "@types/node": "^14.14.16",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
-    "@types/react": "^17.0.0",
+    "@typescript-eslint/parser": "5.18.0",
-    "@types/react-dom": "^17.0.0",
+    "editorconfig-checker": "4.0.2",
-    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "eslint": "8.12.0",
-    "@typescript-eslint/parser": "^4.0.1",
+    "eslint-config-conventions": "2.0.0",
-    "babel-eslint": "^10.1.0",
+    "eslint-config-prettier": "8.5.0",
-    "cross-env": "^7.0.3",
+    "eslint-plugin-import": "2.26.0",
-    "eslint": "^6.6.0",
+    "eslint-plugin-prettier": "4.0.0",
-    "eslint-config-prettier": "^6.12.0",
+    "eslint-plugin-promise": "6.0.0",
-    "eslint-config-standard": "^14.1.1",
+    "eslint-plugin-unicorn": "42.0.0",
-    "eslint-config-standard-react": "^9.2.0",
+    "esbuild": "0.14.32",
-    "eslint-plugin-import": "^2.22.1",
+    "esbuild-jest": "0.5.0",
-    "eslint-plugin-node": "^11.1.0",
+    "jest": "27.5.1",
-    "eslint-plugin-prettier": "^3.3.0",
+    "markdownlint-cli": "0.31.1",
-    "eslint-plugin-promise": "^4.2.1",
+    "prettier": "2.6.2",
-    "eslint-plugin-react": "^7.21.5",
+    "react": "18.0.0",
-    "eslint-plugin-standard": "^4.0.1",
+    "react-dom": "18.0.0",
-    "gh-pages": "^3.1.0",
+    "semantic-release": "19.0.2",
-    "husky": "^4.3.6",
+    "tsup": "5.12.4",
-    "microbundle-crl": "^0.13.11",
+    "typescript": "4.6.3"
-    "npm-run-all": "^4.1.5",
-    "prettier": "^2.2.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
-    "react-scripts": "^3.4.3",
-    "typescript": "^4.1.3"
-  },
-  "dependencies": {
-    "polyfill-object.fromentries": "^1.0.1"
   }
 }

src/__test__/index.test.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import Form, { HandleForm } from '.'
 import { render, cleanup, fireEvent } from '@testing-library/react'
 
+import { Form, HandleForm } from '..'
+
 afterEach(cleanup)
 
-describe('Form component', () => {
+describe('<Form />', () => {
   it('should get the formData and formElement onSubmit and onChange', () => {
     let formData: { [k: string]: any } = {}
     let formElement: any = null

src/__test__/setup.ts

@@ -0,0 +1,3 @@
+import React from 'react'
+
+global.React = React

src/index.d.ts

@@ -1 +0,0 @@
-declare module 'polyfill-object.fromentries'

src/index.tsx

@@ -1,6 +1,4 @@
-// eslint-disable-next-line
+import { useRef } from 'react'
-import React, { useRef } from 'react'
-import 'polyfill-object.fromentries'
 
 export interface FormDataObject {
   [key: string]: FormDataEntryValue
@@ -11,19 +9,21 @@ export type HandleForm = (
   formElement: HTMLFormElement
 ) => void | Promise<void>
 
-interface ReactFormProps
+export interface ReactFormProps
   extends Omit<React.HTMLProps<HTMLFormElement>, 'onSubmit' | 'onChange'> {}
 
-interface FormProps extends ReactFormProps {
+export interface FormProps extends ReactFormProps {
   onSubmit?: HandleForm
   onChange?: HandleForm
 }
 
-const getFormDataObject = (formElement: HTMLFormElement): FormDataObject => {
+export const getFormDataObject = (
+  formElement: HTMLFormElement
+): FormDataObject => {
   return Object.fromEntries<FormDataEntryValue>(new FormData(formElement))
 }
 
-const Form = (props: FormProps): JSX.Element => {
+export const Form: React.FC<FormProps> = (props) => {
   const { onSubmit, onChange, children, ...rest } = props
   const formRef = useRef<HTMLFormElement>(null)
 
@@ -53,5 +53,3 @@ const Form = (props: FormProps): JSX.Element => {
     </form>
   )
 }
-
-export default Form

src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

tsconfig.json

@@ -1,41 +1,22 @@
 {
+  "include": ["src", "types"],
   "compilerOptions": {
-    "outDir": "dist",
+    "module": "ESNext",
-    "module": "esnext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
-    "target": "ES3",
+    "importHelpers": false,
-    "lib": [
-      "dom",
-      "esnext",
-      "DOM.Iterable"
-    ],
-    "moduleResolution": "node",
-    "jsx": "react",
-    "sourceMap": true,
     "declaration": true,
-    "esModuleInterop": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
     "noImplicitReturns": true,
-    "noImplicitThis": true,
+    "noFallthroughCasesInSwitch": true,
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "suppressImplicitAnyIndexErrors": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "allowSyntheticDefaultImports": true,
+    "moduleResolution": "node",
-    "downlevelIteration": true,
+    "jsx": "react-jsx",
-    "allowJs": true,
+    "esModuleInterop": true,
     "skipLibCheck": true,
-    "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
     "noEmit": true
-  },
+  }
-  "include": [
-    "src"
-  ],
-  "exclude": [
-    "node_modules",
-    "dist",
-    "example"
-  ]
 }

tsconfig.test.json

@@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "module": "commonjs"
-  }
-}

tsup.config.js

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