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:
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'

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

@@ -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'

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

@@ -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'

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

@@ -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'

39
.gitignore vendored
View File

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

2
.prettierrc.json
View File

@@ -1,6 +1,6 @@
{
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"semi": false,
"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.
- Ensure your code respect the linter.
- Ensure your code respect linting.
- 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>
<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>

14
example/index.tsx
View File

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

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",
"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"
}
}

16
example/tsconfig.json
View File

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

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",
"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"
}
}

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 { Form, HandleForm } from '../src'
import { Form, HandleForm } from '..'
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 {
[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)

4
tsconfig.json
View File

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

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