theoludwig/react-component-form
Archived
1
1
Fork 0
Code Issues Pull Requests Releases Activity

perf: reduce drastically build size

Browse Source 
BREAKING CHANGE: This package is now pure ESM
This commit is contained in:
Divlo
2022-04-06 23:52:50 +02:00
parent ec4929d7d8
commit 686b5643b3
24 changed files with 9454 additions and 13731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
.eslintignore Normal file
View File

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

14
.eslintrc.json Normal file
View File

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

4
.github/workflows/build.yml vendored
View File

@@ -10,10 +10,10 @@ jobs:
build: build:
runs-on: 'ubuntu-latest' runs-on: 'ubuntu-latest'
steps: steps:
- uses: 'actions/checkout@v2' - uses: 'actions/checkout@v3.0.0'
- name: 'Use Node.js' - name: 'Use Node.js'
uses: 'actions/setup-node@v2.5.1' uses: 'actions/setup-node@v3.1.0'
with: with:
node-version: 'lts/*' node-version: 'lts/*'
cache: 'npm' cache: 'npm'

5
.github/workflows/lint.yml vendored
View File

@@ -10,10 +10,10 @@ jobs:
lint: lint:
runs-on: 'ubuntu-latest' runs-on: 'ubuntu-latest'
steps: steps:
- uses: 'actions/checkout@v2' - uses: 'actions/checkout@v3.0.0'
- name: 'Use Node.js' - name: 'Use Node.js'
uses: 'actions/setup-node@v2.5.1' uses: 'actions/setup-node@v3.1.0'
with: with:
node-version: 'lts/*' node-version: 'lts/*'
cache: 'npm' cache: 'npm'
@@ -25,3 +25,4 @@ jobs:
- run: 'npm run lint:editorconfig' - run: 'npm run lint:editorconfig'
- run: 'npm run lint:markdown' - run: 'npm run lint:markdown'
- run: 'npm run lint:typescript' - run: 'npm run lint:typescript'
- run: 'npm run lint:prettier'

6
.github/workflows/release.yml vendored
View File

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

4
.github/workflows/test.yml vendored
View File

@@ -10,10 +10,10 @@ jobs:
test: test:
runs-on: 'ubuntu-latest' runs-on: 'ubuntu-latest'
steps: steps:
- uses: 'actions/checkout@v2' - uses: 'actions/checkout@v3.0.0'
- name: 'Use Node.js' - name: 'Use Node.js'
uses: 'actions/setup-node@v2.5.1' uses: 'actions/setup-node@v3.1.0'
with: with:
node-version: 'lts/*' node-version: 'lts/*'
cache: 'npm' cache: 'npm'

39
.gitignore vendored
View File

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

2
.prettierrc.json
View File

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

2
CONTRIBUTING.md
View File

@@ -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. - **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**. - Make sure your **code passes the tests**.

3
example/.npmignore
View File

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

2
example/globals.d.ts vendored
View File

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

1
example/index.html
View File

@@ -3,7 +3,6 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <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> <title>react-component-form</title>
</head> </head>

14
example/index.tsx
View File

@@ -1,11 +1,13 @@
import * as React from 'react' import React from 'react'
import * as ReactDOM from 'react-dom' import { createRoot } from 'react-dom/client'
import { Form, HandleForm } from '../.' import { Form, HandleForm } from 'react-component-form'
import './index.css' import './index.css'
import GitHubLogo from 'url:./github.jpg' import GitHubLogo from 'url:./github.jpg'
const App = () => { global.React = React
const App: React.FC = () => {
const handleSubmit: HandleForm = (formData, formElement) => { const handleSubmit: HandleForm = (formData, formElement) => {
console.clear() console.clear()
console.log('onSubmit: ', formData) 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 />)

3325
example/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

17
example/package.json
View File

@@ -1,20 +1,21 @@
{ {
"name": "example", "name": "example",
"version": "1.0.0", "type": "module",
"license": "MIT", "private": true,
"scripts": { "scripts": {
"start": "parcel index.html", "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": { "dependencies": {
"react": "file:../node_modules/react", "react": "file:../node_modules/react",
"react-dom": "file:../node_modules/react-dom" "react-dom": "file:../node_modules/react-dom",
"react-component-form": "file:.."
}, },
"devDependencies": { "devDependencies": {
"@parcel/transformer-image": "2.3.2", "@parcel/transformer-image": "2.4.1",
"@types/react": "17.0.39", "@types/react": "17.0.43",
"@types/react-dom": "17.0.11", "@types/react-dom": "17.0.14",
"parcel": "2.3.2", "parcel": "2.4.1",
"typescript": "4.5.5" "typescript": "4.6.3"
} }
} }

16
example/tsconfig.json
View File

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

8
jest.config.json Normal file
View File

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

19647
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

45
package.json
View File

@@ -2,6 +2,7 @@
"name": "react-component-form", "name": "react-component-form",
"version": "0.0.0-development", "version": "0.0.0-development",
"public": true, "public": true,
"type": "module",
"description": "Manage React Forms with ease.", "description": "Manage React Forms with ease.",
"author": "Divlo <contact@divlo.fr>", "author": "Divlo <contact@divlo.fr>",
"license": "MIT", "license": "MIT",
@@ -17,40 +18,50 @@
"url": "https://github.com/Divlo/react-component-form/issues" "url": "https://github.com/Divlo/react-component-form/issues"
}, },
"homepage": "https://github.com/Divlo/react-component-form#readme", "homepage": "https://github.com/Divlo/react-component-form#readme",
"module": "dist/react-component-form.esm.js",
"main": "dist/index.js", "main": "dist/index.js",
"typings": "dist/index.d.ts", "types": "dist/index.d.ts",
"files": [ "files": [
"dist" "dist"
], ],
"engines": {
"node": ">=12"
},
"scripts": { "scripts": {
"start": "tsdx watch", "build": "tsup",
"build": "tsdx build", "test": "jest",
"test": "tsdx test --passWithNoTests",
"lint:commit": "commitlint", "lint:commit": "commitlint",
"lint:editorconfig": "editorconfig-checker", "lint:editorconfig": "editorconfig-checker",
"lint:markdown": "markdownlint \"**/*.md\" --dot --ignore-path \".gitignore\"", "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" "release": "semantic-release"
}, },
"peerDependencies": { "peerDependencies": {
"react": ">=16" "react": ">=16"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "16.2.1", "@commitlint/cli": "16.2.3",
"@commitlint/config-conventional": "16.2.1", "@commitlint/config-conventional": "16.2.1",
"@testing-library/react": "12.1.3", "@testing-library/react": "13.0.0",
"@types/react": "17.0.39", "@types/jest": "27.4.1",
"@types/react-dom": "17.0.11", "@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", "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", "markdownlint-cli": "0.31.1",
"react": "17.0.2", "prettier": "2.6.2",
"react-dom": "17.0.2", "react": "18.0.0",
"react-dom": "18.0.0",
"semantic-release": "19.0.2", "semantic-release": "19.0.2",
"tsdx": "0.14.1", "tsup": "5.12.4",
"typescript": "4.5.5" "typescript": "4.6.3"
} }
} }

3
test/index.test.tsx → src/__test__/index.test.tsx
View File

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

3
src/__test__/setup.ts Normal file
View File

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

4
src/index.tsx
View File

@@ -1,4 +1,4 @@
import React, { useRef } from 'react' import { useRef } from 'react'
export interface FormDataObject { export interface FormDataObject {
[key: string]: FormDataEntryValue [key: string]: FormDataEntryValue
@@ -23,7 +23,7 @@ export const getFormDataObject = (
return Object.fromEntries<FormDataEntryValue>(new FormData(formElement)) 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 { onSubmit, onChange, children, ...rest } = props
const formRef = useRef<HTMLFormElement>(null) const formRef = useRef<HTMLFormElement>(null)

4
tsconfig.json
View File

@@ -13,10 +13,10 @@
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"moduleResolution": "node", "moduleResolution": "node",
"jsx": "react", "jsx": "react-jsx",
"esModuleInterop": true, "esModuleInterop": true,
"skipLibCheck": true, "skipLibCheck": true,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noEmit": true, "noEmit": true
} }
} }

12
tsup.config.js Normal file
View File

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