refactor!: Migrate repository to ESM

BREAKING CHANGE: The repository is now marked as ESM.
From the end-use perspective this shouldn't cause any problems itself, but if you run into any issues, keep this in mind.

.stylelintrc.js

@@ -1,4 +1,5 @@
-module.exports = {
+/** @type {import('stylelint').Config} */
+export default {
 	extends: [
 		'@morev/stylelint-config/scss',
 	],

bin/fix.js

@@ -1,3 +1,2 @@
 #!/usr/bin/env node
-
-require('../scripts/postinstall.js');
+import '../scripts/postinstall.js';

bin/switch.js

@@ -1,3 +1,2 @@
 #!/usr/bin/env node
-
-require('../scripts/switch-cli.js');
+import '../scripts/switch-cli.js';

builders/vue2-builder/package.json

@@ -1,5 +1,6 @@
 {
 	"name": "vue2-builder",
+	"type": "module",
 	"version": "1.0.0",
 	"private": true,
 	"license": "MIT",

builders/vue2-builder/vite-lib.config.js

@@ -11,7 +11,12 @@ export default defineConfig({
 			entry: '../../src/index.js',
 			formats: ['es', 'cjs', 'umd'],
 			name: 'vueTransitions',
-			fileName: (format) => `vue-transitions.${format}.js`,
+			fileName: (format) => {
+				const extension = format === 'cjs' ? 'cjs' : 'js';
+				const prefix = format === 'umd' ? 'umd' : null;
+
+				return ['vue-transitions', prefix, extension].filter(Boolean).join('.');
+			},
 		},
 		cssCodeSplit: true,
 		rollupOptions: {

builders/vue3-builder/package.json

@@ -1,5 +1,6 @@
 {
 	"name": "vue3-builder",
+	"type": "module",
 	"version": "1.0.0",
 	"private": true,
 	"license": "MIT",

builders/vue3-builder/vite-lib.config.js

@@ -33,7 +33,12 @@ export default defineConfig({
 			entry: '../../src/index.js',
 			formats: ['es', 'cjs', 'umd'],
 			name: 'vueTransitions',
-			fileName: (format) => `vue-transitions.${format}.js`,
+			fileName: (format) => {
+				const extension = format === 'cjs' ? 'cjs' : 'js';
+				const prefix = format === 'umd' ? 'umd' : null;
+
+				return ['vue-transitions', prefix, extension].filter(Boolean).join('.');
+			},
 		},
 		cssCodeSplit: true,
 		rollupOptions: {

nuxt-module/package.json

@@ -1,5 +1,6 @@
 {
 	"name": "@morev/vue-modals-nuxt",
+	"type": "module",
 	"private": "true",
 	"exports": {
 		".": {

package.json

@@ -1,6 +1,7 @@
 {
 	"name": "@morev/vue-transitions",
 	"description": "Shareable Vue transitions library",
+	"type": "module",
 	"version": "2.3.6",
 	"private": true,
 	"workspaces": [
@@ -48,35 +49,53 @@
 	},
 	"exports": {
 		".": {
-			"import": "./dist/vue-transitions.es.js",
-			"require": "./dist/vue-transitions.cjs.js"
+			"import": {
+				"types": "./types/index.d.ts",
+				"default": "./dist/vue-transitions.js"
+			},
+			"require": {
+				"types": "./types/index.d.cts",
+				"default": "./dist/vue-transitions.cjs"
+			}
 		},
 		"./vue2": {
-			"import": "./dist/vue2/vue-transitions.es.js",
-			"require": "./dist/vue2/vue-transitions.cjs.js"
+			"import": {
+				"types": "./types/index.d.ts",
+				"default": "./dist/vue2/vue-transitions.js"
+			},
+			"require": {
+				"types": "./types/index.d.cts",
+				"default": "./dist/vue2/vue-transitions.cjs"
+			}
 		},
 		"./vue3": {
-			"import": "./dist/vue3/vue-transitions.es.js",
-			"require": "./dist/vue3/vue-transitions.cjs.js"
+			"import": {
+				"types": "./types/index.d.ts",
+				"default": "./dist/vue3/vue-transitions.js"
+			},
+			"require": {
+				"types": "./types/index.d.cts",
+				"default": "./dist/vue3/vue-transitions.cjs"
+			}
 		},
 		"./nuxt": {
 			"import": "./nuxt/module.mjs",
 			"require": "./nuxt/module.cjs"
 		},
 		"./styles": "./dist/index.css"
 	},
-	"main": "./dist/vue-transitions.cjs.js",
-	"module": "./dist/vue-transitions.es.js",
+	"main": "./dist/vue-transitions.cjs",
+	"module": "./dist/vue-transitions.js",
 	"browser": "./dist/vue-transitions.umd.js",
-	"types": "types/index.d.ts",
+	"types": "./types/index.d.ts",
 	"scripts": {
 		"prepack": "node ./scripts/prepack.js",
 		"postpublish": "node ./scripts/postpublish.js",
 		"dev": "yarn workspace vue2-builder dev",
 		"build:playground": "yarn workspace vue2-builder playground",
 		"build:vue2": "yarn workspace vue2-builder build",
 		"build:vue3": "yarn workspace vue3-builder build",
-		"build:nuxt": "node ./scripts/nuxt-module-build.mjs",
+		"build:nuxt": "node ./scripts/nuxt-module-build.js",
 		"build": "yarn build:playground && yarn build:vue2 && yarn build:vue3 && yarn build:nuxt",
 		"prepare": "lefthook install && yarn more-sass-clone",
 		"more-sass-clone": "rm -rf .more-sass && cp -r ./node_modules/more-sass ./.more-sass",

scripts/nuxt-module-build.mjs → scripts/nuxt-module-build.js

@@ -1,6 +1,6 @@
-import { copyFileSync } from 'fs';
-import { join, dirname } from 'path';
-import { fileURLToPath } from 'url';
+import { copyFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { build } from 'unbuild';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -10,8 +10,9 @@ const copyNuxtFile = (name) => copyFileSync(
 	join(__dirname, '..', 'nuxt', name),
 );
 
-build('.', false, {
+await build('.', false, {
 	outDir: './nuxt',
+	clean: true,
 	entries: [
 		{
 			input: './nuxt-module/module.ts',

scripts/postinstall.js

@@ -1,6 +1,6 @@
-const { switchVersion, loadModule, ERROR_PREFIX } = require('./utils.js');
+import { switchVersion, loadModule, ERROR_PREFIX } from './utils.js';
 
-const Vue = loadModule('vue');
+const Vue = await loadModule('vue');
 
 if (!Vue || typeof Vue.version !== 'string') {
 	console.warn(`${ERROR_PREFIX} Vue is not found. Please run "npm install vue" to install.`);

scripts/postpublish.js

@@ -1,8 +1,8 @@
-const fs = require('fs');
+import { readFileSync, writeFileSync } from 'node:fs';
 
-const packageJsonContents = fs.readFileSync('package.json', { encoding: 'utf8' });
+const packageJsonContents = readFileSync('package.json', { encoding: 'utf8' });
 
-fs.writeFileSync(
+writeFileSync(
 	'package.json',
 	packageJsonContents.replace('"private": false', '"private": true'),
 );

scripts/prepack.js

@@ -1,12 +1,11 @@
-const fs = require('fs');
+import { readFileSync, writeFileSync } from 'node:fs';
 
-const packageJsonContents = fs.readFileSync('package.json', { encoding: 'utf8' });
+const packageJsonContents = readFileSync('package.json', { encoding: 'utf8' });
 
-fs.writeFileSync(
+writeFileSync(
 	'package.json',
 	packageJsonContents
 		.replace('"private": true', '"private": false')
 		.replace('"scripts": {', '"scripts": {\n\t\t"postinstall": "node ./scripts/postinstall.js",')
-		// eslint-disable-next-line regexp/strict
 		.replaceAll(/"workspaces": \[[^\]]*],\s*/g, ''),
 );

scripts/switch-cli.js

@@ -1,14 +1,12 @@
-const { switchVersion, ERROR_PREFIX } = require('./utils.js');
+import { switchVersion, ERROR_PREFIX } from './utils.js';
 
 const version = process.argv[2];
 const vueEntry = process.argv[3] || 'vue';
 
 if (version === '2') {
 	switchVersion(2, vueEntry);
-	console.log(`${ERROR_PREFIX} Switched for Vue 2 (entry: "${vueEntry}")`);
 } else if (version === '3') {
 	switchVersion(3, vueEntry);
-	console.log(`${ERROR_PREFIX} Switched for Vue 3 (entry: "${vueEntry}")`);
 } else {
 	console.warn(`${ERROR_PREFIX} expecting version "2" or "3" but got "${version}"`);
 }

scripts/utils.js

@@ -1,34 +1,36 @@
-const fs = require('fs');
-const path = require('path');
+import { readFileSync, writeFileSync, unlinkSync } from 'node:fs';
+import { dirname, resolve, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
 
-const dir = path.resolve(__dirname);
+const dir = resolve(dirname(fileURLToPath(import.meta.url)));
 
-const loadModule = (name) => {
+const copy = (name, version) => {
+	const source = join(dir, '..', 'dist', `vue${version}`, name);
+	const destination = join(dir, '..', 'dist', name);
+
+	const content = readFileSync(source, 'utf8');
+
+	// unlink for pnpm, @see https://github.com/vueuse/vue-demi/issues/92
+	try { unlinkSync(destination); } catch {}
+
+	writeFileSync(destination, content, 'utf8');
+};
+
+export const ERROR_PREFIX = '[@morev/vue-transitions]';
+
+export const loadModule = async (name) => {
 	try {
-		return require(name);
+		return import(name);
 	} catch {
 		return undefined;
 	}
 };
 
-const copy = (name, version) => {
-	const src = path.join(dir, '..', 'dist', `vue${version}`, name);
-	const dest = path.join(dir, '..', 'dist', name);
-	const content = fs.readFileSync(src, 'utf8');
-	// unlink for pnpm, @see https://github.com/vueuse/vue-demi/issues/92
-	try {
-		fs.unlinkSync(dest);
-	} catch {}
-	fs.writeFileSync(dest, content, 'utf8');
-};
-
-const switchVersion = (version) => {
-	copy('vue-transitions.cjs.js', version);
-	copy('vue-transitions.es.js', version);
+export const switchVersion = (version, vueEntry = 'vue') => {
+	copy('vue-transitions.cjs', version);
+	copy('vue-transitions.js', version);
 	copy('vue-transitions.umd.js', version);
 	copy('index.css', version);
-};
 
-module.exports.loadModule = loadModule;
-module.exports.switchVersion = switchVersion;
-module.exports.ERROR_PREFIX = '[@morev/vue-transitions]';
+	console.log(`${ERROR_PREFIX} Switched for Vue ${version} (entry: '${vueEntry}')`);
+};

types/index.d.cts

@@ -0,0 +1 @@
+import './index.d.ts';