react-form-with-constraints - npm Package Compare versions

Comparing version 0.6.0-beta.1 to 0.6.0-beta.2

package.json

 {
   "name": "react-form-with-constraints",
-  "version": "0.6.0-beta.1",
+  "version": "0.6.0-beta.2",
   "repository": {
@@ -15,5 +15,7 @@ "type": "git",
   "scripts": {
-    "clean": "del-cli build lib dist/*.js coverage",
+    "clean": "del-cli build lib dist/* !dist/.gitkeep coverage .rpt2_cache",
 
-    "dist": "webpack --config webpack.dist.config.ts || true",
+    "dist:webpack": "webpack -p --config webpack.dist.config.ts || true",
+    "dist:rollup": "rollup --config",
+    "dist": "npm run dist:rollup",
 
@@ -55,7 +57,7 @@ "build": "webpack -d || true",
 
-    "react": "^15.6.1",
+    "react": "^15.6.2",
     "@types/react": "latest",
-    "prop-types": "latest",
+    "prop-types": "^15.6.0",
     "@types/prop-types": "latest",
-    "react-dom": "^15.6.1",
+    "react-dom": "^15.6.2",
     "@types/react-dom": "latest",
@@ -69,2 +71,5 @@
 
+    "node-zopfli": "latest",
+    "node-gyp": "latest",
+
     "webpack": "latest",
@@ -75,3 +80,10 @@ "@types/webpack": "latest",
     "file-loader": "latest",
+    "zopfli-webpack-plugin": "latest",
 
+    "rollup": "latest",
+    "rollup-pluginutils": "latest",
+    "rollup-plugin-typescript2": "latest",
+    "rollup-plugin-uglify": "latest",
+    "rollup-plugin-gzip": "latest",
+
     "del-cli": "latest",
@@ -85,4 +97,4 @@
     "@types/enzyme": "latest",
-    "react-test-renderer": "^15.6.1"
+    "react-test-renderer": "^15.6.2"
   }
 }

README.md

@@ -8,2 +8,3 @@ # react-form-with-constraints
 [![codecov](https://codecov.io/gh/tkrotoff/react-form-with-constraints/branch/master/graph/badge.svg)](https://codecov.io/gh/tkrotoff/react-form-with-constraints)
+[![gzip size](http://img.badgesize.io/https://unpkg.com/react-form-with-constraints/dist/react-form-with-constraints.production.min.js.gz?compression=gzip)](https://unpkg.com/react-form-with-constraints/dist/react-form-with-constraints.production.min.js.gz)
 
@@ -36,6 +37,17 @@ - Installation: `npm install react-form-with-constraints`
 - Control HTML5 error messages: `<FieldFeedback when="valueMissing">My custom error message</FieldFeedback>`
-- Custom constraints beyond HTML5: `<FieldFeedback when={value => ...}>`
+- Custom constraints: `<FieldFeedback when={value => ...}>`
 - Warnings: `<FieldFeedback ... warning>`
 - Infos: `<FieldFeedback ... info>`
 - Multiple feedbacks: `<FieldFeedbacks ... show="all">`
+- Feedbacks groups
+- Fields inter-dependence
+- Multi-step forms
+- Re-render only what's necessary
+- Multiple feedback outputs for the same field
+- No special component like `<TextField>`, just plain old `<input>` or whatever you like
+- No dependency (no Redux, no MobX... just React)
+- Minimal footprint
+- Minimal API
+- Zero magic
+- ...
 
@@ -66,2 +78,4 @@ ```JSX
 
+## How it works
+
 The API works the same way as [React Router v4](https://reacttraining.com/react-router/web/example/basic):
@@ -78,9 +92,14 @@
 
-## react-form-with-constraints demo
+As React Router v4, react-form-with-constraints uses [React context](https://facebook.github.io/react/docs/context.html#parent-child-coupling) to share the fields state.
+If you had to implement validation yourself, you would end up with [a state that keeps track of the errors and warnings for each field](examples/NoFramework/App.tsx). react-form-with-constraints works [the](src/Fields.ts) [same]().
 
-- CodePen basic demo: https://codepen.io/tkrotoff/pen/BRGdqL
-- CodePen Bootstrap demo: https://codepen.io/tkrotoff/pen/oWQeQR
+## react-form-with-constraints examples
 
+- CodePen basic example: https://codepen.io/tkrotoff/pen/BRGdqL
+- CodePen Bootstrap example: https://codepen.io/tkrotoff/pen/oWQeQR
+
 ![demo-password](doc/demo-password.png)
 
+Check all examples inside [the examples directory](examples).
+
 ## API
@@ -154,4 +173,7 @@
 
+react-form-with-constraints itself, like React 16, depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set).
+If you support older browsers (<IE11) you will need a global polyfill such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
+
 ## Notes
 
-A [`readonly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) or `disabled` input won't trigger any HTML5 form constraint like [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required).
+- A [`readonly`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-readonly) or `disabled` input won't trigger any HTML5 form constraint like [`required`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required).

webpack.config.ts

@@ -15,2 +15,3 @@ import * as path from 'path';
     'examples/HTML5Constraints/App': './examples/HTML5Constraints/App.tsx',
+    'examples/SignUp/App': './examples/SignUp/App.tsx',
 
@@ -36,3 +37,3 @@ 'react-form-with-constraints': './src/index.ts',
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {compilerOptions: {declaration: false}} },
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {compilerOptions: {module: 'esnext', declaration: false}} },
       { test: /\.jsx?$/, loader: 'babel-loader', options: {presets: ['react']} },
@@ -39,0 +40,0 @@ { test: /\.(html|css|png)$/, loader: 'file-loader', options: {name: '[path][name].[ext]'} }

webpack.dist.config.ts

 import * as path from 'path';
-import { Configuration } from 'webpack';
+import { Configuration, optimize } from 'webpack';
+const ZopfliPlugin = require('zopfli-webpack-plugin');
 
@@ -9,3 +10,3 @@ const config: Configuration = {
     path: path.join(__dirname, 'dist'),
-    filename: 'react-form-with-constraints.js',
+    filename: 'react-form-with-constraints.production.min.js',
     library: 'ReactFormWithConstraints',
@@ -21,2 +22,26 @@ libraryTarget: 'umd'
 
+  devtool: 'source-map',
+
+  plugins: [
+    // "webpack -p" already uses DefinePlugin and UglifyJsPlugin
+
+    // See What is flat bundling and why is Rollup better at this than Webpack? https://stackoverflow.com/q/43219030
+    //
+    // Results for react-form-with-constraints.js (no minification and no compression):
+    // - Rollup v0.50.0: 31 299 bytes
+    // - Webpack v3.6.0: 42 740 bytes
+    //
+    // Results for react-form-with-constraints.production.min.js (UglifyJS):
+    // - Rollup v0.50.0: 13 385 bytes
+    // - Webpack v3.6.0: 18 827 bytes
+    //
+    // Results for react-form-with-constraints.production.min.js.gz (UglifyJS + Zopfli):
+    // - Rollup v0.50.0: 3 408 bytes
+    // - Webpack v3.6.0: 3 729 bytes
+    new optimize.ModuleConcatenationPlugin(),
+
+    // See https://github.com/webpack-contrib/compression-webpack-plugin/issues/76
+    new ZopfliPlugin()
+  ],
+
   resolve: {
@@ -28,3 +53,3 @@ extensions: ['.js', '.ts', '.tsx']
     rules: [
-      { test: /\.tsx?$/, loader: 'ts-loader', options: {compilerOptions: {declaration: false}} }
+      { test: /\.tsx?$/, loader: 'ts-loader', options: {compilerOptions: {module: 'esnext', declaration: false}} }
     ]
@@ -31,0 +56,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

753036

increased by48.24%

Number of package files

184

increased by32.37%

Number of lines in readme file

175

increased by14.38%

Worsened metrics

Dev dependency count

33

increased by32%

Lines of code

8078

decreased by-4.65%

Number of low quality alerts

3

increased by50%

No dependency changes