perf: reduce drastically build size

BREAKING CHANGE: This package is now pure ESM
2024-07-12 13:30:12 +02:00 · 2022-04-06 23:52:50 +02:00 · 2022-04-06 23:52:50 +02:00 · 686b5643b3
commit 686b5643b3
parent ec4929d7d8
24 changed files with 9454 additions and 13731 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,5 @@
+node_modules
+build
+dist
+.parcel-cache
+example
--- a/.eslintrc.json
+++ b/.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"
+  }
+}
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@ -10,10 +10,10 @@ 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.5.1'
+        uses: 'actions/setup-node@v3.1.0'
        with:
          node-version: 'lts/*'
          cache: 'npm'
--- a/.github/workflows/lint.yml
+++ b/.github/workflows/lint.yml
@ -10,10 +10,10 @@ 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.5.1'
+        uses: 'actions/setup-node@v3.1.0'
        with:
          node-version: 'lts/*'
          cache: 'npm'
@ -25,3 +25,4 @@ jobs:
      - run: 'npm run lint:editorconfig'
      - run: 'npm run lint:markdown'
      - run: 'npm run lint:typescript'
+      - run: 'npm run lint:prettier'
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@ -8,10 +8,10 @@ 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.5.1'
+        uses: 'actions/setup-node@v3.1.0'
        with:
          node-version: 'lts/*'
          cache: 'npm'
@ -26,7 +26,7 @@ jobs:
        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'
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -10,10 +10,10 @@ 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.5.1'
+        uses: 'actions/setup-node@v3.1.0'
        with:
          node-version: 'lts/*'
          cache: 'npm'
--- a/.gitignore
+++ b/.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
--- a/.prettierrc.json
+++ b/.prettierrc.json
@ -1,6 +1,6 @@
 {
-  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
+  "semi": false,
  "trailingComma": "none"
 }
--- a/CONTRIBUTING.md
+++ b/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**.

--- a/example/.npmignore
+++ b/example/.npmignore
@ -1,3 +0,0 @@
-node_modules
-.cache
-dist
--- a/example/globals.d.ts
+++ b/example/globals.d.ts
@ -1 +1 @@
-declare module "*.jpg"
+declare module '*.jpg'
--- a/example/index.html
+++ b/example/index.html
@ -3,7 +3,6 @@
  <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" />
    <title>react-component-form</title>
  </head>
--- a/example/index.tsx
+++ b/example/index.tsx
@ -1,11 +1,13 @@
-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 = () => {
+global.React = React
+
+const App: React.FC = () => {
  const handleSubmit: HandleForm = (formData, formElement) => {
    console.clear()
    console.log('onSubmit: ', formData)
@ -60,4 +62,6 @@ const App = () => {
  )
 }

-ReactDOM.render(<App />, document.getElementById('root'))
+const container = document.getElementById('root') as HTMLElement
+const root = createRoot(container)
+root.render(<App />)
--- a/example/package-lock.json
+++ b/example/package-lock.json
--- a/example/package.json
+++ b/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/\""
  },
  "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.3.2",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
-    "parcel": "2.3.2",
-    "typescript": "4.5.5"
+    "@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"
  }
 }
--- a/example/tsconfig.json
+++ b/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
  }
 }
--- a/jest.config.json
+++ b/jest.config.json
@ -0,0 +1,8 @@
+{
+  "testEnvironment": "jsdom",
+  "rootDir": "./src",
+  "setupFilesAfterEnv": ["<rootDir>/__test__/setup.ts"],
+  "transform": {
+    "^.+\\.tsx?$": "esbuild-jest"
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -2,6 +2,7 @@
  "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",
@ -17,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-path \".gitignore\"",
-    "lint:typescript": "tsdx lint",
+    "lint:typescript": "eslint \"**/*.{js,jsx,ts,tsx}\"",
+    "lint:prettier": "prettier \".\" --check --ignore-path \".gitignore\"",
    "release": "semantic-release"
  },
  "peerDependencies": {
    "react": ">=16"
  },
  "devDependencies": {
-    "@commitlint/cli": "16.2.1",
+    "@commitlint/cli": "16.2.3",
    "@commitlint/config-conventional": "16.2.1",
-    "@testing-library/react": "12.1.3",
-    "@types/react": "17.0.39",
-    "@types/react-dom": "17.0.11",
+    "@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",
+    "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",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "prettier": "2.6.2",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
    "semantic-release": "19.0.2",
-    "tsdx": "0.14.1",
-    "typescript": "4.5.5"
+    "tsup": "5.12.4",
+    "typescript": "4.6.3"
  }
 }
--- a/src/test/index.test.tsx
+++ b/src/test/index.test.tsx
@ -1,7 +1,6 @@
-import React from 'react'
 import { render, cleanup, fireEvent } from '@testing-library/react'

-import { Form, HandleForm } from '../src'
+import { Form, HandleForm } from '..'

 afterEach(cleanup)

--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@ -0,0 +1,3 @@
+import React from 'react'
+
+global.React = React
--- a/src/index.tsx
+++ b/src/index.tsx
@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'

 export interface FormDataObject {
  [key: string]: FormDataEntryValue
@ -23,7 +23,7 @@ export const getFormDataObject = (
  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)

--- a/tsconfig.json
+++ b/tsconfig.json
@ -13,10 +13,10 @@
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "moduleResolution": "node",
-    "jsx": "react",
+    "jsx": "react-jsx",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
+    "noEmit": true
  }
 }
--- a/tsup.config.js
+++ b/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
+})