refactor: build step (#1171), fixes #1166, #1153, #1111

* refactor: build step

* refactor: remove node v12 build step

.github/workflows/run-unit-tests.yml

@@ -16,7 +16,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [14.x, 16.x]
 
     steps:
       - uses: actions/checkout@v2

.nvmrc

@@ -1 +1 @@
-12
+14

babel.config.js

@@ -1,19 +1,19 @@
 module.exports = {
-  'presets': [
+  presets: [
     ['@babel/preset-env', {
       modules: false
     }]
   ],
-  'plugins': [
+  plugins: [
     '@babel/plugin-proposal-object-rest-spread'
   ],
-  'comments': false,
+  comments: false,
   env: {
     test: {
-      'presets': [
+      presets: [
         ['@babel/preset-env']
       ],
-      'plugins': ['@babel/plugin-transform-runtime']
+      plugins: ['@babel/plugin-transform-runtime']
     }
   }
 }

package.json

@@ -29,6 +29,10 @@
     "@vue/composition-api": "^1.3.1",
     "@vue/test-utils": "^2.0.0-rc.12",
     "@vue/test-utils-vue2": "npm:@vue/test-utils@1.2.2",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-terser": "^0.4.0",
     "core-js": "^3.16.1",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^7.32.0",
@@ -44,6 +48,7 @@
     "jest-serializer-vue": "^2.0.2",
     "lerna": "^4.0.0",
     "standard-version": "^9.3.1",
+    "rollup": "^3.19.1",
     "vue": "^3.2.2",
     "vue-template-compiler": "^2.6.14",
     "vue-template-compiler2.7": "npm:vue-template-compiler@2.7.5",

packages/components/babel.config.js

@@ -0,0 +1,2 @@
+const config = require('../../babel.config')
+module.exports = config

packages/components/package.json

@@ -8,17 +8,27 @@
     "url": "https://github.com/vuelidate/vuelidate",
     "directory": "packages/components"
   },
-  "module": "dist/index.es.js",
-  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "main": "dist/index.cjs",
   "unpkg": "dist/index.iife.min.js",
   "jsdelivr": "dist/index.iife.min.js",
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "bili"
+    "build": "rollup -c rollup.config.mjs"
   },
   "dependencies": {
-    "@vuelidate/core": "^2.0.0"
+    "@vuelidate/core": "^2.0.0",
+    "vue-demi": "^0.13.11"
+  },
+  "peerDependencies": {
+    "@vue/composition-api": "^1.0.0-rc.1",
+    "vue": "^2.0.0 || >=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
   }
 }

packages/components/rollup.config.mjs

@@ -0,0 +1,15 @@
+import { generateConfigFactory, generateOutputConfig } from '../../rollup.base.mjs'
+
+const config = generateConfigFactory({
+  input: 'index.js',
+  libraryName: 'VuelidateComponents',
+  outputConfigs: generateOutputConfig('index', {
+    globals: {
+      '@vuelidate/core': 'Vuelidate'
+    }
+  })
+})
+config.external = [/packages\/(vuelidate|validators)/, 'vue-demi']
+
+export default config
+

packages/components/src/ValidateEach.js

@@ -1,4 +1,4 @@
-import { toRef } from 'vue'
+import { toRef } from 'vue-demi'
 import { useVuelidate } from '@vuelidate/core'
 
 export default {

packages/validators/babel.config.js

@@ -0,0 +1,2 @@
+const config = require('../../babel.config')
+module.exports = config

packages/validators/package.json

@@ -2,9 +2,9 @@
   "name": "@vuelidate/validators",
   "version": "2.0.0",
   "description": "Validators for Vuelidate",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "types": "index.d.ts",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.mjs",
   "unpkg": "dist/index.iife.min.js",
   "jsdelivr": "dist/index.iife.min.js",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "license": "MIT",
   "scripts": {
-    "build": "bili",
+    "build": "rollup -c rollup.config.mjs",
     "dev": "yarn build --watch",
     "test:unit": "jest",
     "lint": "eslint src"
@@ -32,7 +32,6 @@
     }
   },
   "devDependencies": {
-    "bili": "^5.0.5",
     "flush-promises": "^1.0.2"
   },
   "sideEffects": [

packages/validators/rollup.config.mjs

@@ -0,0 +1,13 @@
+import { generateConfigFactory, generateOutputConfig } from '../../rollup.base.mjs'
+
+export default [
+  generateConfigFactory({
+    libraryName: 'VuelidateValidators',
+    outputConfigs: generateOutputConfig('index')
+  }),
+  generateConfigFactory({
+    libraryName: 'VuelidateValidators',
+    input: 'src/raw.js',
+    outputConfigs: generateOutputConfig('raw')
+  })
+]

packages/vuelidate/babel.config.js

@@ -0,0 +1,2 @@
+const config = require('../../babel.config')
+module.exports = config

packages/vuelidate/package.json

@@ -1,11 +1,10 @@
 {
   "name": "@vuelidate/core",
-  "type": "module",
   "description": "Simple, lightweight model-based validation for Vue.js",
   "version": "2.0.0",
-  "main": "dist/index.js",
+  "main": "dist/index.cjs",
   "types": "index.d.ts",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.mjs",
   "unpkg": "dist/index.iife.min.js",
   "jsdelivr": "dist/index.iife.min.js",
   "repository": {
@@ -20,13 +19,13 @@
   ],
   "exports": {
     ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.js"
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
     },
     "./*": "./*"
   },
   "scripts": {
-    "build": "bili",
+    "build": "rollup -c rollup.config.mjs",
     "test:unit": "jest",
     "lint": "eslint src test",
     "dev": "yarn build --watch"
@@ -48,7 +47,6 @@
     "@babel/plugin-transform-runtime": "^7.15.0",
     "@babel/preset-env": "^7.15.0",
     "@vue/compiler-sfc": "^3.2.2",
-    "bili": "^5.0.5",
     "core-js": "^3.16.1",
     "eslint-plugin-import": "^2.24.0",
     "eslint-plugin-promise": "^5.1.0",

packages/vuelidate/rollup.config.mjs

@@ -0,0 +1,6 @@
+import { generateConfigFactory, generateOutputConfig } from '../../rollup.base.mjs'
+
+export default generateConfigFactory({
+  libraryName: 'Vuelidate',
+  outputConfigs: generateOutputConfig('index')
+})

rollup.base.mjs

@@ -0,0 +1,70 @@
+import terser from '@rollup/plugin-terser'
+import resolve from '@rollup/plugin-node-resolve'
+import commonjs from '@rollup/plugin-commonjs'
+import { babel } from '@rollup/plugin-babel'
+
+export function generateOutputConfig (fileName = 'index', opts) {
+  return {
+    mjs: {
+      file: `dist/${fileName}.mjs`,
+      format: 'es',
+      ...opts,
+    },
+    cjs: {
+      file: `dist/${fileName}.cjs`,
+      format: 'cjs',
+      ...opts,
+    },
+    global: {
+      file: `dist/${fileName}.iife.min.js`,
+      format: 'iife',
+      ...opts,
+    }
+  }
+}
+
+function generateConfigFactory ({ libraryName, input = 'src/index.js', outputConfigs }) {
+  /**
+   * @type {import('rollup').RollupOptions}
+   */
+  const config = {
+    input,
+    external: ['vue-demi'],
+    plugins: [resolve(), commonjs(), babel({ babelHelpers: 'bundled' })],
+    output: []
+  }
+
+  /**
+   * Create config output
+   * @param {string} name
+   * @param {import('rollup').OutputOptions} options
+   * @return {*}
+   */
+  function createConfig (name, options) {
+    const opts = { ...options }
+    opts.exports = 'named'
+    opts.globals = {
+      ...opts.globals,
+      'vue-demi': 'VueDemi'
+    }
+
+    const isGlobalBuild = name === 'global'
+    const isMinified = opts.file.includes('.min.')
+
+    if (isGlobalBuild) opts.name = libraryName
+    opts.plugins = []
+    if (isMinified) {
+      opts.plugins.push(
+        terser()
+      )
+    }
+    return opts
+  }
+
+  const packageBuilds = Object.keys(outputConfigs)
+  config.output = packageBuilds.map(buildName => createConfig(buildName, outputConfigs[buildName]))
+
+  return config
+}
+
+export { generateConfigFactory }