fix: build issue with "React is not defined"

BREAKING CHANGE: This package is now pure ESM

.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+build
+dist
+.parcel-cache
+example

.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/workflows/build.yml

@@ -10,20 +10,19 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.1.5'
+        uses: 'actions/setup-node@v3.1.0'
         with:
-          node-version: '14.x'
-
-      - run: 'npm install --global npm@7'
+          node-version: 'lts/*'
+          cache: 'npm'
 
       - name: 'Install'
-        run: 'npm ci'
+        run: 'npm install'
 
       - name: 'Build Package'
         run: 'npm run build'
 
       - name: 'Build Example'
-        run: 'cd example && npm ci && npm run build'
+        run: 'cd example && npm install && npm run build'

.github/workflows/lint.yml

@@ -10,19 +10,19 @@ jobs:
   lint:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.1.5'
+        uses: 'actions/setup-node@v3.1.0'
         with:
-          node-version: '14.x'
-
-      - run: 'npm install --global npm@7'
+          node-version: 'lts/*'
+          cache: 'npm'
 
       - name: 'Install'
-        run: 'npm ci'
+        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/release.yml

@@ -8,26 +8,25 @@ jobs:
   build:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.1.5'
+        uses: 'actions/setup-node@v3.1.0'
         with:
-          node-version: '14.x'
-
-      - run: 'npm install --global npm@7'
+          node-version: 'lts/*'
+          cache: 'npm'
 
       - name: 'Install'
-        run: 'npm ci'
+        run: 'npm install'
 
       - name: 'Build Package'
         run: 'npm run build'
 
       - name: 'Build Example'
-        run: 'cd example && npm ci && npm run build'
+        run: 'cd example && npm install && npm run build'
 
       - name: 'Deploy Example'
-        uses: 'JamesIves/github-pages-deploy-action@4.1.4'
+        uses: 'JamesIves/github-pages-deploy-action@v4.3.0'
         with:
           branch: 'gh-pages'
           folder: 'example/dist'

.github/workflows/test.yml

@@ -10,17 +10,16 @@ jobs:
   test:
     runs-on: 'ubuntu-latest'
     steps:
-      - uses: 'actions/checkout@v2'
+      - uses: 'actions/checkout@v3.0.0'
 
       - name: 'Use Node.js'
-        uses: 'actions/setup-node@v2.1.5'
+        uses: 'actions/setup-node@v3.1.0'
         with:
-          node-version: '14.x'
-
-      - run: 'npm install --global npm@7'
+          node-version: 'lts/*'
+          cache: 'npm'
 
       - name: 'Install'
-        run: 'npm ci'
+        run: 'npm install'
 
       - name: 'Test'
         run: 'npm run test'

.gitignore

@@ -1,6 +1,39 @@
-*.log
-.DS_Store
+# dependencies
 node_modules
-.cache
+.npm
+
+# production
+build
 dist
+
+# 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
 .parcel-cache
+.cache

.prettierrc.json

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

CONTRIBUTING.md

@@ -17,7 +17,7 @@ Thanks a lot for your interest in contributing to **react-component-form**! 🎉
 
 - **Please first discuss** the change you wish to make via issues.
 
-- Ensure your code respect the linter.
+- Ensure your code respect linting.
 
 - Make sure your **code passes the tests**.
 

example/.npmignore

@@ -1,3 +0,0 @@
-node_modules
-.cache
-dist

example/globals.d.ts

@@ -1 +1 @@
-declare module "*.jpg"
+declare module '*.jpg'

example/index.html

@@ -3,12 +3,11 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <link rel="shortcut icon" href="./github.jpg" type="image/jpg">
+    <link rel="shortcut icon" href="./github.jpg" type="image/jpg" />
     <title>react-component-form</title>
   </head>
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>

example/index.tsx

@@ -1,11 +1,11 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-import { Form, HandleForm } from '../.'
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { Form, HandleForm } from 'react-component-form'
 
 import './index.css'
 import GitHubLogo from 'url:./github.jpg'
 
-const App = () => {
+const App: React.FC = () => {
   const handleSubmit: HandleForm = (formData, formElement) => {
     console.clear()
     console.log('onSubmit: ', formData)
@@ -60,4 +60,6 @@ const App = () => {
   )
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const container = document.getElementById('root') as HTMLElement
+const root = createRoot(container)
+root.render(<App />)

example/package.json

@@ -1,20 +1,21 @@
 {
   "name": "example",
-  "version": "1.0.0",
-  "license": "MIT",
+  "type": "module",
+  "private": true,
   "scripts": {
     "start": "parcel index.html",
-    "build": "parcel build index.html --public-url '/react-component-form/'"
+    "build": "parcel build index.html --public-url \"/react-component-form/\""
   },
   "dependencies": {
     "react": "file:../node_modules/react",
-    "react-dom": "file:../node_modules/react-dom"
+    "react-dom": "file:../node_modules/react-dom",
+    "react-component-form": "file:.."
   },
   "devDependencies": {
-    "@parcel/transformer-image": "2.0.0-beta.2",
-    "@types/react": "17.0.11",
-    "@types/react-dom": "17.0.7",
-    "parcel": "2.0.0-beta.2",
-    "typescript": "4.3.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/tsconfig.json

@@ -1,18 +1,12 @@
 {
   "compilerOptions": {
-    "allowSyntheticDefaultImports": false,
-    "target": "es5",
-    "module": "commonjs",
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
     "jsx": "react",
     "moduleResolution": "node",
-    "noImplicitAny": false,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "removeComments": true,
-    "strictNullChecks": true,
-    "preserveConstEnums": true,
     "sourceMap": true,
-    "lib": ["es2015", "es2016", "dom"],
-    "types": ["node"]
+    "strict": true,
+    "esModuleInterop": true
   }
 }

jest.config.json

@@ -0,0 +1,7 @@
+{
+  "testEnvironment": "jsdom",
+  "rootDir": "./src",
+  "transform": {
+    "^.+\\.tsx?$": "esbuild-jest"
+  }
+}

package.json

@@ -1,12 +1,14 @@
 {
   "name": "react-component-form",
   "version": "0.0.0-development",
+  "public": true,
+  "type": "module",
   "description": "Manage React Forms with ease.",
   "author": "Divlo <contact@divlo.fr>",
   "license": "MIT",
   "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",
@@ -16,40 +18,50 @@
     "url": "https://github.com/Divlo/react-component-form/issues"
   },
   "homepage": "https://github.com/Divlo/react-component-form#readme",
-  "module": "dist/react-component-form.esm.js",
   "main": "dist/index.js",
-  "typings": "dist/index.d.ts",
+  "types": "dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "engines": {
-    "node": ">=12"
-  },
   "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
+    "build": "tsup",
+    "test": "jest",
     "lint:commit": "commitlint",
     "lint:editorconfig": "editorconfig-checker",
-    "lint:markdown": "markdownlint '**/*.md' --dot --ignore node_modules",
-    "lint:typescript": "tsdx lint",
+    "lint:markdown": "markdownlint \"**/*.md\" --dot --ignore-path \".gitignore\"",
+    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
     "release": "semantic-release"
   },
   "peerDependencies": {
     "react": ">=16"
   },
   "devDependencies": {
-    "@commitlint/cli": "12.1.4",
-    "@commitlint/config-conventional": "12.1.4",
-    "@testing-library/react": "11.2.7",
-    "@types/react": "17.0.11",
-    "@types/react-dom": "17.0.7",
+    "@commitlint/cli": "16.2.3",
+    "@commitlint/config-conventional": "16.2.1",
+    "@testing-library/react": "13.0.0",
+    "@types/jest": "27.4.1",
+    "@types/react": "17.0.43",
+    "@types/react-dom": "17.0.14",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
     "editorconfig-checker": "4.0.2",
-    "markdownlint-cli": "0.27.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "semantic-release": "17.4.4",
-    "tsdx": "0.14.1",
-    "typescript": "4.3.3"
+    "eslint": "8.12.0",
+    "eslint-config-conventions": "2.0.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-unicorn": "42.0.0",
+    "esbuild": "0.14.32",
+    "esbuild-jest": "0.5.0",
+    "jest": "27.5.1",
+    "markdownlint-cli": "0.31.1",
+    "prettier": "2.6.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "semantic-release": "19.0.2",
+    "tsup": "5.12.4",
+    "typescript": "4.6.3"
   }
 }

src/__test__/index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { render, cleanup, fireEvent } from '@testing-library/react'
 
-import { Form, HandleForm } from '../src'
+import { Form, HandleForm } from '..'
 
 afterEach(cleanup)
 

src/index.tsx

@@ -17,11 +17,13 @@ export interface FormProps extends ReactFormProps {
   onChange?: HandleForm
 }
 
-export const getFormDataObject = (formElement: HTMLFormElement): FormDataObject => {
+export const getFormDataObject = (
+  formElement: HTMLFormElement
+): FormDataObject => {
   return Object.fromEntries<FormDataEntryValue>(new FormData(formElement))
 }
 
-export const Form = (props: FormProps): JSX.Element => {
+export const Form: React.FC<FormProps> = (props) => {
   const { onSubmit, onChange, children, ...rest } = props
   const formRef = useRef<HTMLFormElement>(null)
 

tsconfig.json

@@ -17,6 +17,6 @@
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
+    "noEmit": true
   }
 }

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
+})