fix: properly name exported files to avoid dual pkg hazard closes #4905

.changeset/proud-turtles-cough.md

@@ -0,0 +1,11 @@
+---
+"vee-validate": patch
+"@vee-validate/valibot": patch
+"@vee-validate/rules": patch
+"@vee-validate/i18n": patch
+"@vee-validate/joi": patch
+"@vee-validate/yup": patch
+"@vee-validate/zod": patch
+---
+
+fix: specify module type on package.json

packages/i18n/package.json

@@ -5,22 +5,25 @@
   "author": "Abdelrahman Awad <[email protected]>",
   "homepage": "https://vee-validate.logaretm.com/v4/guide/i18n",
   "license": "MIT",
-  "module": "dist/vee-validate-i18n.esm.js",
-  "unpkg": "dist/vee-validate-i18n.js",
-  "main": "dist/vee-validate-i18n.js",
+  "module": "dist/vee-validate-i18n.mjs",
+  "unpkg": "dist/vee-validate-i18n.iife.js",
+  "main": "dist/vee-validate-i18n.mjs",
   "types": "dist/vee-validate-i18n.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/vee-validate-i18n.d.ts",
-      "import": "./dist/vee-validate-i18n.esm.js",
-      "require": "./dist/vee-validate-i18n.js"
+      "import": "./dist/vee-validate-i18n.mjs",
+      "require": "./dist/vee-validate-i18n.cjs"
     },
     "./dist/locale/*.json": "./dist/locale/*.json"
   },
   "sideEffects": false,
   "files": [
     "dist/*.js",
     "dist/*.d.ts",
+    "dist/*.cjs",
+    "dist/*.mjs",
     "dist/locale/*.json"
   ],
   "repository": {

packages/joi/package.json

@@ -5,14 +5,15 @@
   "author": "Abdelrahman Awad <[email protected]>",
   "license": "MIT",
   "module": "dist/vee-validate-joi.esm.js",
-  "unpkg": "dist/vee-validate-joi.js",
-  "main": "dist/vee-validate-joi.js",
+  "unpkg": "dist/vee-validate-joi.iife.js",
+  "main": "dist/vee-validate-joi.mjs",
   "types": "dist/vee-validate-joi.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/vee-validate-joi.d.ts",
-      "import": "./dist/vee-validate-joi.esm.js",
-      "require": "./dist/vee-validate-joi.js"
+      "import": "./dist/vee-validate-joi.mjs",
+      "require": "./dist/vee-validate-joi.cjs"
     }
   },
   "homepage": "https://vee-validate.logaretm.com/v4/integrations/joi-schema-validation/",
@@ -32,7 +33,9 @@
   ],
   "files": [
     "dist/*.js",
-    "dist/*.d.ts"
+    "dist/*.d.ts",
+    "dist/*.cjs",
+    "dist/*.mjs"
   ],
   "dependencies": {
     "joi": "17.11.0",

packages/rules/package.json

@@ -4,15 +4,16 @@
   "description": "Form Validation for Vue.js",
   "author": "Abdelrahman Awad <[email protected]>",
   "license": "MIT",
-  "module": "dist/vee-validate-rules.esm.js",
-  "unpkg": "dist/vee-validate-rules.js",
-  "main": "dist/vee-validate-rules.js",
+  "module": "dist/vee-validate-rules.mjs",
+  "unpkg": "dist/vee-validate-rules.iife.js",
+  "main": "dist/vee-validate-rules.mjs",
   "types": "dist/vee-validate-rules.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/vee-validate-rules.d.ts",
-      "import": "./dist/vee-validate-rules.esm.js",
-      "require": "./dist/vee-validate-rules.js"
+      "import": "./dist/vee-validate-rules.mjs",
+      "require": "./dist/vee-validate-rules.cjs"
     }
   },
   "homepage": "https://vee-validate.logaretm.com/v4/guide/global-validators",
@@ -32,7 +33,9 @@
   ],
   "files": [
     "dist/*.js",
-    "dist/*.d.ts"
+    "dist/*.d.ts",
+    "dist/*.cjs",
+    "dist/*.mjs"
   ],
   "dependencies": {
     "vee-validate": "workspace:*"

packages/valibot/package.json

@@ -4,14 +4,15 @@
   "description": "vee-validate integration with valibot schema validation",
   "author": "Abdelrahman Awad <[email protected]>",
   "license": "MIT",
-  "module": "dist/vee-validate-valibot.esm.js",
-  "unpkg": "dist/vee-validate-valibot.js",
-  "main": "dist/vee-validate-valibot.js",
+  "module": "dist/vee-validate-valibot.mjs",
+  "unpkg": "dist/vee-validate-valibot.iife.js",
+  "main": "dist/vee-validate-valibot.mjs",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/vee-validate-valibot.d.ts",
-      "import": "./dist/vee-validate-valibot.esm.js",
-      "require": "./dist/vee-validate-valibot.js"
+      "import": "./dist/vee-validate-valibot.mjs",
+      "require": "./dist/vee-validate-valibot.cjs"
     }
   },
   "types": "dist/vee-validate-valibot.d.ts",
@@ -32,7 +33,9 @@
   ],
   "files": [
     "dist/*.js",
-    "dist/*.d.ts"
+    "dist/*.d.ts",
+    "dist/*.cjs",
+    "dist/*.mjs"
   ],
   "dependencies": {
     "type-fest": "^4.8.3",

packages/vee-validate/package.json

@@ -4,14 +4,15 @@
   "description": "Painless forms for Vue.js",
   "author": "Abdelrahman Awad <[email protected]>",
   "license": "MIT",
-  "module": "dist/vee-validate.esm.js",
-  "unpkg": "dist/vee-validate.js",
-  "main": "dist/vee-validate.js",
+  "module": "dist/vee-validate.mjs",
+  "unpkg": "dist/vee-validate.iife.js",
+  "main": "dist/vee-validate.mjs",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/vee-validate.d.ts",
-      "import": "./dist/vee-validate.esm.js",
-      "require": "./dist/vee-validate.js"
+      "import": "./dist/vee-validate.mjs",
+      "require": "./dist/vee-validate.cjs"
     }
   },
   "types": "dist/vee-validate.d.ts",
@@ -32,7 +33,9 @@
   ],
   "files": [
     "dist/*.js",
-    "dist/*.d.ts"
+    "dist/*.d.ts",
+    "dist/*.cjs",
+    "dist/*.mjs"
   ],
   "peerDependencies": {
     "vue": "^3.4.26"

packages/vee-validate/src/useFieldState.ts

@@ -1,7 +1,6 @@
 import { computed, isRef, reactive, ref, Ref, unref, watch, MaybeRef, MaybeRefOrGetter, toValue } from 'vue';
-import { FieldMeta, FieldState, FieldValidator, InputType, PrivateFormContext, PathState } from './types';
+import { FieldMeta, FieldState, FieldValidator, InputType, PrivateFormContext, PathState, TypedSchema } from './types';
 import { getFromPath, isEqual, normalizeErrorItem } from './utils';
-import { TypedSchema } from '../dist/vee-validate';
 
 export interface StateSetterInit<TValue = unknown> extends FieldState<TValue> {
   initialValue: TValue;

packages/yup/package.json

@@ -4,15 +4,16 @@
   "description": "vee-validate integration with yup schema validation",
   "author": "Abdelrahman Awad <[email protected]>",
   "license": "MIT",
-  "module": "dist/vee-validate-yup.esm.js",
-  "unpkg": "dist/vee-validate-yup.js",
-  "main": "dist/vee-validate-yup.js",
+  "module": "dist/vee-validate-yup.mjs",
+  "unpkg": "dist/vee-validate-yup.iife.js",
+  "main": "dist/vee-validate-yup.mjs",
   "types": "dist/vee-validate-yup.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/vee-validate-yup.d.ts",
-      "import": "./dist/vee-validate-yup.esm.js",
-      "require": "./dist/vee-validate-yup.js"
+      "import": "./dist/vee-validate-yup.mjs",
+      "require": "./dist/vee-validate-yup.cjs"
     }
   },
   "homepage": "https://vee-validate.logaretm.com/v4/guide/composition-api/typed-schema/",
@@ -32,7 +33,9 @@
   ],
   "files": [
     "dist/*.js",
-    "dist/*.d.ts"
+    "dist/*.d.ts",
+    "dist/*.cjs",
+    "dist/*.mjs"
   ],
   "dependencies": {
     "type-fest": "^4.8.3",

packages/zod/package.json

@@ -4,15 +4,16 @@
   "description": "vee-validate integration with zod schema validation",
   "author": "Abdelrahman Awad <[email protected]>",
   "license": "MIT",
-  "module": "dist/vee-validate-zod.esm.js",
-  "unpkg": "dist/vee-validate-zod.js",
-  "main": "dist/vee-validate-zod.js",
+  "module": "dist/vee-validate-zod.mjs",
+  "unpkg": "dist/vee-validate-zod.iife.js",
+  "main": "dist/vee-validate-zod.mjs",
   "types": "dist/vee-validate-zod.d.ts",
+  "type": "module",
   "exports": {
     ".": {
       "types": "./dist/vee-validate-zod.d.ts",
-      "import": "./dist/vee-validate-zod.esm.js",
-      "require": "./dist/vee-validate-zod.js"
+      "import": "./dist/vee-validate-zod.mjs",
+      "require": "./dist/vee-validate-zod.cjs"
     }
   },
   "homepage": "https://vee-validate.logaretm.com/v4/integrations/zod-schema-validation/",
@@ -32,7 +33,9 @@
   ],
   "files": [
     "dist/*.js",
-    "dist/*.d.ts"
+    "dist/*.d.ts",
+    "dist/*.cjs",
+    "dist/*.mjs"
   ],
   "dependencies": {
     "type-fest": "^4.8.3",

scripts/build.mjs

@@ -38,8 +38,8 @@ async function minify({ code, pkg, bundleName }) {
     mangle: true,
   });
 
-  const fileName = bundleName.replace(/\.js$/, '.min.js');
-  const filePath = `${pkgout}/${fileName}`;
+  const fileName = bundleName.replace(/\.js$/, '.prod.js');
+  const filePath = `${pkgout}/${fileName}.mjs`;
   fs.outputFileSync(filePath, output.code);
   const stats = reportSize({ code: output.code, path: filePath });
   console.log(`${chalk.green('Output File:')} ${fileName} ${stats}`);
@@ -64,7 +64,9 @@ async function build(pkg) {
 
   console.log(chalk.magenta(`Generating bundle for ${pkg}`));
   const pkgout = path.join(__dirname, `../packages/${pkg}/dist`);
-  for (const format of ['es', 'umd']) {
+  await fs.emptyDir(pkgout);
+
+  for (const format of ['esm', 'iife', 'cjs']) {
     const { input, output, bundleName } = await createConfig(pkg, format);
     const bundle = await rollup(input);
     const {
@@ -74,10 +76,10 @@ async function build(pkg) {
     const outputPath = path.join(pkgout, bundleName);
     fs.outputFileSync(outputPath, code);
     const stats = reportSize({ code, path: outputPath });
-     
+
     console.log(`${chalk.green('Output File:')} ${bundleName} ${stats}`);
 
-    if (format === 'umd') {
+    if (format === 'iife') {
       await minify({ bundleName, pkg, code });
     }
   }

scripts/config.mjs

@@ -29,9 +29,10 @@ const pkgNameMap = {
   joi: 'vee-validate-joi',
 };
 
-const formatMap = {
-  es: 'esm',
-  umd: '',
+const formatExt = {
+  esm: 'mjs',
+  iife: 'iife.js',
+  cjs: 'cjs',
 };
 
 async function createConfig(pkg, format) {
@@ -48,7 +49,7 @@ async function createConfig(pkg, format) {
 
   const { version } = info;
 
-  const isEsm = format === 'es';
+  const isEsm = format === 'esm';
 
   const config = {
     input: {
@@ -85,14 +86,15 @@ async function createConfig(pkg, format) {
   * @license MIT
   */`,
       format,
-      name: format === 'umd' ? formatNameMap[pkg] : undefined,
+      name: format === 'iife' ? formatNameMap[pkg] : undefined,
       globals: {
         vue: 'Vue',
+        'vee-validate': 'VeeValidate',
       },
     },
   };
 
-  config.bundleName = `${pkgNameMap[pkg]}${formatMap[format] ? '.' + formatMap[format] : ''}.js`;
+  config.bundleName = `${pkgNameMap[pkg]}.${formatExt[format] ?? 'js'}`;
 
   // if (options.env) {
   //   config.input.plugins.unshift(
@@ -105,4 +107,4 @@ async function createConfig(pkg, format) {
   return config;
 }
 
-export { formatNameMap, pkgNameMap, formatMap, createConfig };
+export { formatNameMap, pkgNameMap, formatExt, createConfig };