conf: add mjs/cjs exports (#299)

.gitignore

@@ -12,7 +12,10 @@ documentation/assets/**/*.css
 .DS_Store
 *.log
 packages/vest/dist
+packages/vest/esm
 packages/vest/*.js
+packages/vest/*.cjs
+packages/vest/*.mjs
 packages/vest/utilities/
 packages/n4s/dist
 packages/n4s/*.js

.nvmrc

@@ -1 +1 @@
-13
+14

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
-node_js: node
+node_js: 14
 cache: yarn
 jobs:
   include:

config/babel/babel.config.js

@@ -1,23 +1,28 @@
+const env = api => {
+  const conf = {
+    targets: {},
+    ...(!api.env('test') && {
+      loose: true,
+    }),
+  };
+
+  switch (api.env()) {
+    case 'development':
+      conf.targets.node = 'current';
+      break;
+    case 'es6':
+      conf.targets.chrome = 52;
+      break;
+    default:
+      conf.targets.ie = 10;
+      break;
+  }
+
+  return ['@babel/preset-env', conf];
+};
+
 module.exports = api => {
-  const presets = [
-    [
-      '@babel/preset-env',
-      {
-        targets: {
-          ...(api.env('development')
-            ? {
-                node: 'current',
-              }
-            : {
-                ie: 10,
-              }),
-        },
-        ...(!api.env('test') && {
-          loose: true,
-        }),
-      },
-    ],
-  ];
+  const presets = [env(api)];
 
   const plugins = [
     'babel-plugin-add-module-exports',

config/builds/vest.js

@@ -6,58 +6,112 @@ import resolve from 'rollup-plugin-node-resolve';
 import replace from 'rollup-plugin-replace';
 import { terser } from 'rollup-plugin-terser';
 
+const fs = require('fs-extra');
+
 const { BABEL_CONFIG_PATH } = require('..');
 const { PACKAGE_VEST } = require('../../shared/constants');
 const { packagePath, packageJson } = require('../../util');
 
 const { version } = packageJson(PACKAGE_VEST);
 const PACKAGE_PATH = packagePath(PACKAGE_VEST);
 
-const plugins = ({ development }) => {
+const DIR_NAME_DIST = 'dist';
+const ENV_DEVELOPMENT = 'development';
+const NAME_ES5 = 'es5';
+const FORMAT_UMD = 'umd';
+const FORMAT_ES = 'es';
+const FORMAT_CJS = 'cjs';
+const DIR_ESM = 'esm';
+
+const DIST_PATH = path.join(PACKAGE_PATH, DIR_NAME_DIST);
+
+const plugins = ({ name, format }) => {
+  const babelEnv = () => {
+    if ([FORMAT_CJS, FORMAT_ES].includes(format)) {
+      return 'es6';
+    }
+
+    if ([NAME_ES5, 'min'].includes(name)) {
+      return NAME_ES5;
+    }
+
+    if (name === ENV_DEVELOPMENT) {
+      return ENV_DEVELOPMENT;
+    }
+
+    return NAME_ES5;
+  };
+
+  const envName = babelEnv();
+
   const PLUGINS = [
     resolve(),
     commonjs({
       include: /node_modules\/(anyone|n4s)/,
     }),
     babel({
       configFile: BABEL_CONFIG_PATH,
-      envName: development ? 'development' : 'production',
+      envName,
     }),
     replace({
       VEST_VERSION: JSON.stringify(version),
       LIBRARY_NAME: JSON.stringify(PACKAGE_VEST),
     }),
   ];
 
-  if (!development) {
+  if (envName === NAME_ES5) {
     PLUGINS.push(compiler(), terser());
   }
 
   return PLUGINS;
 };
 
-const buildConfig = ({ min = false, development = false } = {}) => ({
-  input: path.join(PACKAGE_PATH, 'src/index.js'),
+const addEsmDir = () => {
+  const fullPath = path.join(DIST_PATH, DIR_ESM);
+
+  fs.ensureDirSync(fullPath);
+
+  fs.writeFileSync(
+    path.join(fullPath, 'package.json'),
+    JSON.stringify({ type: 'module' })
+  );
+};
+
+const buildConfig = ({
+  format,
+  name,
+  input = 'index.js',
+  outputDir = '',
+} = {}) => ({
+  input: path.join(PACKAGE_PATH, 'src', input),
   output: {
-    file: [
-      path.join(PACKAGE_PATH, 'dist', PACKAGE_VEST),
-      min && 'min',
-      development && 'development',
-      'js',
-    ]
+    file: [path.join(DIST_PATH, outputDir, PACKAGE_VEST), name, 'js']
       .filter(Boolean)
       .join('.'),
-    format: 'umd',
+    format: format || FORMAT_UMD,
     name: PACKAGE_VEST,
+    ...(format === FORMAT_CJS && {
+      exports: 'default',
+    }),
   },
-  plugins: plugins({ development }),
+  plugins: plugins({ name, format }),
 });
 
+addEsmDir();
+
 export default [
-  buildConfig(),
-  /* minified bundle will be deprecated in the next major */
+  buildConfig({ format: FORMAT_UMD }),
+  buildConfig({ name: NAME_ES5, format: FORMAT_UMD }),
+  buildConfig({
+    format: FORMAT_ES,
+    input: 'index.mjs',
+    name: 'mjs',
+    outputDir: DIR_ESM,
+  }),
+  buildConfig({ format: FORMAT_CJS, name: FORMAT_CJS }),
+  buildConfig({ name: ENV_DEVELOPMENT }),
+  /* this bundle will be deprecated in the next major */
   buildConfig({
-    min: true,
+    name: 'min',
   }),
-  buildConfig({ development: true }),
 ];

package.json

@@ -46,7 +46,7 @@
   "scripts": {
     "build": "node ./scripts/buildAll",
     "prettier-watch": "onchange '**/*.js' '**/*.json' -- prettier --write {{changed}}",
-    "test": "jest --projects ./packages/*/ --i",
+    "test": "jest --projects ./packages/*/",
     "lint": "eslint . --ignore-path .gitignore"
   },
   "husky": {

packages/vest/README.md

@@ -52,6 +52,21 @@ res.getErrors(); // returns an object with an array of errors per field
 res.getErrors('username'); // returns an array of errors for the `username` field
 ```
 
+### Nodejs:
+
+When running on the server you should not "create" a suite since validations usually do not need to maintain state. Instaed, call vest.validate directly.
+
+```js
+const vest = require('vest');
+
+const { validate, test, enforce } = vest;
+
+module.exports = data =>
+  validate('form_name', () => {
+    test(/*...*/);
+  });
+```
+
 ## Why Vest?
 
 - Vest is really easy to learn. You can take your existing knowledge of unit tests and transfer it to validations.

packages/vest/docs/_sidebar.md

@@ -7,7 +7,7 @@
 - [Assertions with enforce](./enforce)
 - [Understanding Vest's state](./state)
 - Advanced cases
-  - [Server side and stateless validations](./stateless_validations)
+  - [Using with node](./node)
   - [Excluding or including tests](./exclusion)
   - [Accessing intermediate suite result](./draft)
   - [Utilities](./utilities)