diff --git a/.gitignore b/.gitignore index 47129496..c90c82d5 100644 --- a/.gitignore +++ b/.gitignore @@ -23,3 +23,4 @@ stats.html docs/.vuepress/dist dist/ +public/dist diff --git a/build/rollup.config.base.js b/build/rollup.config.base.js index 34748208..5cbf3458 100644 --- a/build/rollup.config.base.js +++ b/build/rollup.config.base.js @@ -1,4 +1,4 @@ -import babel from 'rollup-plugin-babel'; +import buble from '@rollup/plugin-buble'; import resolve from '@rollup/plugin-node-resolve'; import vue from 'rollup-plugin-vue'; import cjs from '@rollup/plugin-commonjs'; @@ -6,6 +6,7 @@ import autoprefixer from 'autoprefixer'; import image from '@rollup/plugin-image'; import typescript from '@rollup/plugin-typescript'; import postcss from 'rollup-plugin-postcss'; +import replace from '@rollup/plugin-replace'; export default { input: 'src/wrapper.ts', @@ -27,10 +28,10 @@ export default { postcss({ plugins: [autoprefixer] }), - babel({ - exclude: 'node_modules/**', - runtimeHelpers: true - }), - cjs() + cjs(), + buble(), + replace({ + 'process.env.NODE_ENV': JSON.stringify('production') + }) ] }; diff --git a/build/rollup.config.browser.js b/build/rollup.config.browser.js index 905b0b53..3edc97fe 100644 --- a/build/rollup.config.browser.js +++ b/build/rollup.config.browser.js @@ -3,12 +3,16 @@ import { terser } from 'rollup-plugin-terser'; import analyze from 'rollup-plugin-analyzer'; import visualizer from 'rollup-plugin-visualizer'; +const globals = {}; +globals['vue'] = 'Vue'; + const config = Object.assign({}, base, { output: { exports: 'named', name: 'VueTwemojiPicker', file: 'dist/vue-twemoji-picker.min.js', - format: 'iife' + format: 'iife', + globals }, external: ['vue'] }); diff --git a/build/rollup.config.es.js b/build/rollup.config.es.js index 2ce744b7..dcf110ae 100644 --- a/build/rollup.config.es.js +++ b/build/rollup.config.es.js @@ -1,12 +1,25 @@ import base from './rollup.config.base'; +import { terser } from 'rollup-plugin-terser'; +import analyze from 'rollup-plugin-analyzer'; +import visualizer from 'rollup-plugin-visualizer'; + +const globals = {}; +globals['vue'] = 'Vue'; +globals['vue-clickaway'] = 'vueClickaway'; +globals['twemoji'] = 'Twwemoji'; +globals['@popperjs/core'] = '@popperjs/core'; const config = Object.assign({}, base, { output: { name: 'VueTwemojiPicker', file: 'dist/vue-twemoji-picker.esm.js', - format: 'es' + format: 'es', }, - external: ['twemoji', 'v-tooltip', 'vue'] + external: ['vue', 'vue-clickaway', 'twemoji', '@popperjs/core'] }); +config.plugins.push(analyze()); +config.plugins.push(terser()); +config.plugins.push(visualizer()); + export default config; diff --git a/build/rollup.config.umd.js b/build/rollup.config.umd.js index 6c8581fb..73dac82d 100644 --- a/build/rollup.config.umd.js +++ b/build/rollup.config.umd.js @@ -1,13 +1,24 @@ import base from './rollup.config.base'; +import { terser } from 'rollup-plugin-terser'; +import analyze from 'rollup-plugin-analyzer'; +import visualizer from 'rollup-plugin-visualizer'; + +const globals = {}; +globals['vue'] = 'Vue'; const config = Object.assign({}, base, { output: { exports: 'named', name: 'VueTwemojiPicker', file: 'dist/vue-twemoji-picker.umd.js', - format: 'umd' + format: 'umd', + globals // , 'clickaway', 'Twemoji' }, - external: ['vue'] + external: ['vue'] // , 'vue-clickaway', 'twemoji', '@popperjs/core' }); +config.plugins.push(analyze()); +config.plugins.push(terser()); +config.plugins.push(visualizer()); + export default config; diff --git a/package.json b/package.json index fee85557..7c871fee 100644 --- a/package.json +++ b/package.json @@ -30,7 +30,7 @@ "dev": "cross-env NODE_ENV=development vue-cli-service serve", "docs:dev": "cross-env NODE_ENV=development vuepress dev docs", "docs:build": "cross-env NODE_ENV=production vuepress build docs", - "build:lib": "cross-env NODE_ENV=production yarn run build:browser && yarn run build:es && yarn run build:umd", + "build:lib": "cross-env NODE_ENV=production yarn run build:browser && yarn run build:es && yarn run build:umd && copyfiles ./dist/*.js ./public", "build:browser": "rollup --config build/rollup.config.browser.js", "build:es": "rollup --config build/rollup.config.es.js", "build:umd": "rollup --config build/rollup.config.umd.js", @@ -43,12 +43,16 @@ "twemoji": "^12.1.5", "vue-clickaway": "^2.2.2" }, + "peerDependencies": { + "vue": "^2.6.11" + }, "devDependencies": { "@kevinfaguiar/vue-twemoji-picker": "5.2.4", "@rollup/plugin-buble": "^0.21.1", "@rollup/plugin-commonjs": "^11.0.2", "@rollup/plugin-image": "^2.0.4", "@rollup/plugin-node-resolve": "^7.1.1", + "@rollup/plugin-replace": "^2.3.1", "@rollup/plugin-typescript": "^3.0.0", "@types/jest": "^25.1.2", "@types/node": "^13.7.0", @@ -66,6 +70,7 @@ "@vue/eslint-config-typescript": "^5.0.1", "@vue/test-utils": "1.0.0-beta.31", "@vuepress/plugin-back-to-top": "^1.3.0", + "copyfiles": "^2.2.0", "core-js": "^3.6.4", "cross-env": "^7.0.0", "emojibase-data": "4.1.0", @@ -75,13 +80,11 @@ "prettier": "^1.19.1", "rollup": "^1.31.0", "rollup-plugin-analyzer": "^3.2.2", - "rollup-plugin-babel": "^4.3.3", "rollup-plugin-postcss": "^2.0.6", "rollup-plugin-terser": "^5.2.0", "rollup-plugin-visualizer": "^3.3.1", "rollup-plugin-vue": "^5.1.6", "typescript": "~3.7.5", - "vue": "^2.6.11", "vue-burger-menu": "^2.0.3", "vue-template-compiler": "^2.6.11", "vuepress": "^1.3.0", diff --git a/public/index.html b/public/index.html index a977b47f..bec86beb 100644 --- a/public/index.html +++ b/public/index.html @@ -7,6 +7,8 @@ Vue Twemoji Picker - Sandbox + + diff --git a/src/components/PopperV2.vue b/src/components/PopperV2.vue index eca3023a..1f9222fd 100644 --- a/src/components/PopperV2.vue +++ b/src/components/PopperV2.vue @@ -210,10 +210,10 @@ import flip from '@popperjs/core/lib/modifiers/flip'; import offset from '@popperjs/core/lib/modifiers/offset'; import preventOverflow from '@popperjs/core/lib/modifiers/preventOverflow'; -import { mixin as clickaway } from 'vue-clickaway'; +import VueClickaway from 'vue-clickaway'; export default Vue.extend({ - mixins: [clickaway], + mixins: [VueClickaway.mixin], name: 'PopperV2', data() { return { diff --git a/src/components/Sandbox.vue b/src/components/Sandbox.vue index 3d649773..132aa8ab 100644 --- a/src/components/Sandbox.vue +++ b/src/components/Sandbox.vue @@ -51,8 +51,10 @@ a:hover { }