feat!: Vue 3 version of components

BREAKING CHANGE: Build mechanics have changed significantly with the introduction of the version for Vue 3.
Although there shouldn't be any problems (the default export should work the same as before), the update is marked as a major to avoid embarrassment.

.eslintrc.js

@@ -21,5 +21,19 @@ module.exports = {
 				'markdownlint/md046': ['off'],
 			},
 		},
+		{
+			files: ['**/builders/**/*.js', '**/playground/main.js'],
+			rules: {
+				'import/no-extraneous-dependencies': 'off',
+				'node/no-extraneous-import': 'off',
+			},
+		},
+		{
+			files: ['**/scripts/**/*.js'],
+			rules: {
+				'no-console': 'off',
+				'import/no-dynamic-require': 'off',
+			},
+		},
 	],
 };

.github/workflows/build.yaml

@@ -28,8 +28,5 @@ jobs:
       - name: Testing
         run: yarn test
 
-      - name: Build lib
-        run: yarn build:lib
-
-      - name: Build playground
-        run: yarn build:playground
+      - name: Build
+        run: yarn build

.github/workflows/release.yaml

@@ -23,7 +23,7 @@ jobs:
         run: yarn install
 
       - name: Build
-        run: yarn build:lib
+        run: yarn build
 
       - name: Create release
         uses: softprops/action-gh-release@v1

.release-it.yaml

@@ -39,8 +39,7 @@ plugins:
 hooks:
   before:init:
     - yarn lint:fix
-    - yarn build:lib
-    - yarn build:playground
+    - yarn build
   after:init:
     - yarn lint
     - yarn test

README.md

@@ -7,9 +7,7 @@
 ![GitHub Release Date](https://img.shields.io/github/release-date/morevm/vue-transitions)
 ![Keywords](https://img.shields.io/github/package-json/keywords/morevm/vue-transitions)
 
-> Vue 3 version coming soon
-
-Reusable transitions for Vue 2 with no CSS needed ❤️.
+Universal reusable transitions for `Vue 2` and `Vue 3` with no CSS needed ❤️
 
 Originally inspired by the [vue2-transitions](https://github.com/BinarCode/vue2-transitions)
 it goes much further and provides more features with a simpler API.
@@ -65,6 +63,18 @@ pnpm add @morev/vue-transitions
 
 ## Usage
 
+Package exports two versions of components:
+
+* Version for `Vue2` available with named export `/vue2`
+* Version for `Vue3` available with named export `/vue3`
+
+However, there is also a default export mapped to local version of Vue being used. \
+Underhood, it utilized the [postinstall](https://docs.npmjs.com/cli/v8/using-npm/scripts) npm hook. \
+After installing the package, the script will start to check the installed Vue version
+and redirect the exports to based on the local Vue version.
+
+> It feels pretty robust, but if you're worried about, prefer an explicit named import according to the version you're using.
+
 ### Global registration
 
 ```js

bin/fix.js

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

bin/switch.js

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

builders/vue2-builder/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "vue2-builder",
+	"version": "1.0.0",
+	"private": true,
+	"license": "MIT",
+	"scripts": {
+		"dev": "vite --config vite-dev.config.js",
+		"playground": "vite build --config vite-dev.config.js",
+		"build": "vite build --config vite-lib.config.js"
+	},
+	"devDependencies": {
+		"@morev/v-bem-transformer": "^0.0.5",
+		"element-ui": "^2.15.6",
+		"more-sass": "^1.0.7",
+		"vite-plugin-vue2": "^1.9.3",
+		"vue": "^2.6.14",
+		"vue-template-compiler": "^2.6.14"
+	}
+}

vite/vite-dev.config.js → builders/vue2-builder/vite-dev.config.js

@@ -3,7 +3,7 @@ import { createVuePlugin } from 'vite-plugin-vue2';
 import { vitePlugin } from '@morev/v-bem-transformer';
 
 export default defineConfig({
-	root: 'playground',
+	root: '../../playground',
 	base: '/vue-transitions/',
 	plugins: [
 		vitePlugin({
@@ -28,9 +28,9 @@ export default defineConfig({
 		minify: 'terser',
 		rollupOptions: {
 			output: {
-				dir: 'playground-bundle',
+				dir: '../../playground-bundle',
 			},
-			input: './playground/index.html',
+			input: '../../playground/index.html',
 		},
 	},
 });

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

@@ -6,7 +6,7 @@ export default defineConfig({
 	build: {
 		minify: 'terser',
 		lib: {
-			entry: './src/index.js',
+			entry: '../../src/index.js',
 			formats: ['es', 'cjs', 'umd'],
 			name: 'vueTransitions',
 			fileName: (format) => `vue-transitions.${format}.js`,
@@ -15,7 +15,7 @@ export default defineConfig({
 		rollupOptions: {
 			external: ['vue'],
 			output: {
-				dir: 'dist',
+				dir: '../../dist/vue2',
 				globals: {
 					vue: 'Vue',
 				},

builders/vue3-builder/package.json

@@ -0,0 +1,13 @@
+{
+	"name": "vue3-builder",
+	"version": "1.0.0",
+	"private": true,
+	"license": "MIT",
+	"scripts": {
+		"build": "vite build --config vite-lib.config.js"
+	},
+	"devDependencies": {
+		"@vitejs/plugin-vue": "^2.3.1",
+		"vue": "^3.2.31"
+	}
+}

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

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+const transformPlugin = ({
+	name: 'vue2-to-vue3-transformer',
+	transform: (context) => {
+		return context
+			.replace(
+				'...this.$listeners,',
+				'',
+			)
+			.replace(
+				'// BUILD-TIME: TRANSITIONS IMPORT FOR VUE 3',
+				`import { Transition, TransitionGroup } from 'vue';`,
+			)
+			.replace(
+				`'transition-group' : 'transition'`,
+				`TransitionGroup : Transition`,
+			);
+	},
+});
+
+export default defineConfig({
+	plugins: [
+		transformPlugin,
+		vue(),
+	],
+	build: {
+		minify: 'terser',
+		lib: {
+			entry: '../../src/index.js',
+			formats: ['es', 'cjs', 'umd'],
+			name: 'vueTransitions',
+			fileName: (format) => `vue-transitions.${format}.js`,
+		},
+		cssCodeSplit: true,
+		rollupOptions: {
+			external: ['vue'],
+			output: {
+				dir: '../../dist/vue3',
+				globals: {
+					vue: 'Vue',
+				},
+			},
+		},
+	},
+});

package.json

@@ -2,7 +2,10 @@
 	"name": "@morev/vue-transitions",
 	"description": "Shareable Vue transitions library",
 	"version": "1.1.0",
-	"private": false,
+	"private": true,
+	"workspaces": [
+		"builders/*"
+	],
 	"license": "MIT",
 	"publishConfig": {
 		"access": "public",
@@ -29,22 +32,40 @@
 	],
 	"files": [
 		"dist",
-		"vetur"
+		"vetur",
+		"bin",
+		"scripts"
 	],
+	"bin": {
+		"fix": "bin/fix.js",
+		"switch": "bin/switch.js"
+	},
 	"exports": {
 		".": {
 			"import": "./dist/vue-transitions.es.js",
 			"require": "./dist/vue-transitions.cjs.js"
 		},
+		"./vue2": {
+			"import": "./dist/vue2/vue-transitions.es.js",
+			"require": "./dist/vue2/vue-transitions.cjs.js"
+		},
+		"./vue3": {
+			"import": "./dist/vue3/vue-transitions.es.js",
+			"require": "./dist/vue3/vue-transitions.cjs.js"
+		},
 		"./styles": "./dist/index.css"
 	},
 	"main": "./dist/vue-transitions.cjs.js",
 	"module": "./dist/vue-transitions.es.js",
 	"browser": "./dist/vue-transitions.umd.js",
 	"scripts": {
-		"dev": "vite --config vite/vite-dev.config.js",
-		"build:playground": "vite build --config vite/vite-dev.config.js",
-		"build:lib": "vite build --config vite/vite-lib.config.js",
+		"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": "yarn build:playground && yarn build:vue2 && yarn build:vue3",
 		"prepare": "husky install ./.husky && yarn more-sass-clone",
 		"vscode-settings": "cp .vscode/settings.template.json .vscode/settings.json",
 		"more-sass-clone": "rm -rf .more-sass && cp -r ./node_modules/more-sass ./.more-sass",
@@ -59,7 +80,7 @@
 		"test:dev": "jest --watch"
 	},
 	"peerDependencies": {
-		"vue": "^2.6.14"
+		"vue": "^2.6.14 || >=3"
 	},
 	"dependencies": {
 		"@morev/helpers": "^0.8.1"
@@ -72,22 +93,16 @@
 		"@morev/commitlint-config": "^0.1.1",
 		"@morev/eslint-config": "^10.0.3",
 		"@morev/stylelint-config": "^1.0.3",
-		"@morev/v-bem-transformer": "^0.0.5",
 		"@release-it/conventional-changelog": "^4.2.2",
 		"@types/jest": "^27.4.1",
-		"element-ui": "^2.15.6",
 		"eslint": "^8.12.0",
 		"husky": "^7.0.4",
 		"jest": "^27.5.1",
 		"lint-staged": "^12.3.7",
-		"more-sass": "^1.0.7",
 		"release-it": "^14.14.0",
 		"sass": "^1.49.11",
 		"stylelint": "^14.6.1",
 		"vite": "^2.9.1",
-		"vite-plugin-vue2": "^1.9.3",
-		"vue": "^2.6.14",
-		"vue-template-compiler": "^2.6.14",
 		"vue-types": "^4.1.1"
 	},
 	"vetur": {

scripts/postinstall.js

@@ -0,0 +1,13 @@
+const { switchVersion, loadModule, ERROR_PREFIX } = require('./utils.js');
+
+const Vue = loadModule('vue');
+
+if (!Vue || typeof Vue.version !== 'string') {
+	console.warn(`${ERROR_PREFIX} Vue is not found. Please run "npm install vue" to install.`);
+} else if (Vue.version.startsWith('2.')) {
+	switchVersion(2);
+} else if (Vue.version.startsWith('3.')) {
+	switchVersion(3);
+} else {
+	console.warn(`${ERROR_PREFIX} Vue version v${Vue.version} is not suppported.`);
+}

scripts/postpublish.js

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

scripts/prepack.js

@@ -0,0 +1,10 @@
+const fs = require('fs');
+
+const packageJsonContents = fs.readFileSync('package.json', { encoding: 'utf8' });
+
+fs.writeFileSync(
+	'package.json',
+	packageJsonContents
+		.replace('"private": true', '"private": false')
+		.replace('"scripts": {', '"scripts": {\n\t\t"postinstall": "node ./scripts/postinstall.js",'),
+);

scripts/switch-cli.js

@@ -0,0 +1,14 @@
+const { switchVersion, ERROR_PREFIX } = require('./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

@@ -0,0 +1,35 @@
+const fs = require('fs');
+const path = require('path');
+
+const dir = path.resolve(__dirname);
+
+const loadModule = (name) => {
+	try {
+		return require(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);
+	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]';

src/mixins/base-transition.js

@@ -3,6 +3,8 @@ import { validateEasing } from '../utility/validate/validate-easing.js';
 import { validateDelay } from '../utility/validate/validate-delay.js';
 import * as defaults from '../utility/defaults/defaults.js';
 
+// BUILD-TIME: TRANSITIONS IMPORT FOR VUE 3
+
 export const baseTransition = {
 	inheritAttrs: false,
 	props: {