ADD: Now correctly builds UMD

.gitignore

@@ -23,3 +23,4 @@ stats.html
 
 docs/.vuepress/dist
 dist/
+public/dist

build/rollup.config.base.js

@@ -1,11 +1,12 @@
-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';
 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')
+    })
   ]
 };

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']
 });

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;

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;

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",

public/index.html

@@ -7,6 +7,8 @@
     <title>Vue Twemoji Picker - Sandbox</title>
   </head>
   <body>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
+    <script type="text/javascript" src="/dist/vue-twemoji-picker.min.js"></script>
     <noscript>
       <strong>We're sorry but Vue Twemoji Picker - Sandbox doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

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 {

src/components/Sandbox.vue

@@ -51,8 +51,10 @@ a:hover {
 }
 </style>
 <script lang="ts">
+const TwemojiPicker = (window as any).VueTwemojiPicker.TwemojiPicker;
+const TwemojiTextarea = (window as any).VueTwemojiPicker.TwemojiPicker;
+
 import Vue from 'vue';
-import { TwemojiTextarea, TwemojiPicker } from '../wrapper';
 import EmojiDataAll from '@kevinfaguiar/vue-twemoji-picker/emoji-data/en/emoji-all-groups.json';
 import EmojiDataAnimalsNature from '@kevinfaguiar/vue-twemoji-picker/emoji-data/en/emoji-group-animals-nature.json';
 import EmojiDataFoodDrink from '@kevinfaguiar/vue-twemoji-picker/emoji-data/en/emoji-group-food-drink.json';

src/components/TwemojiPicker.vue

@@ -288,11 +288,6 @@ import TwemojiOptions from '../interfaces/TwemojiOptions';
 import EmojiSkin from '../interfaces/EmojiSkin';
 import EmojiGroup from '../interfaces/EmojiGroup';
 
-/**Events */
-// addTextBlur
-// emojiUnicodeAdded
-// emojiImgAdded
-
 export default Vue.extend({
   name: 'TwemojiPicker',
 

vue.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  publicPath: '/vue-twemoji-picker/',
+  publicPath: '/',
   css: { extract: false },
   configureWebpack: {
     output: {

yarn.lock

@@ -1098,6 +1098,14 @@
     is-module "^1.0.0"
     resolve "^1.14.2"
 
+"@rollup/plugin-replace@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.1.tgz#16fb0563628f9e6c6ef9e05d48d3608916d466f5"
+  integrity sha512-qDcXj2VOa5+j0iudjb+LiwZHvBRRgWbHPhRmo1qde2KItTjuxDVQO21rp9/jOlzKR5YO0EsgRQoyox7fnL7y/A==
+  dependencies:
+    "@rollup/pluginutils" "^3.0.4"
+    magic-string "^0.25.5"
+
 "@rollup/plugin-typescript@^3.0.0":
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-typescript/-/plugin-typescript-3.0.0.tgz#9398fcca1cef67ac325fef19c28dece24c9a5263"
@@ -3588,6 +3596,18 @@ copy-webpack-plugin@^5.0.2, copy-webpack-plugin@^5.1.1:
     serialize-javascript "^2.1.2"
     webpack-log "^2.0.0"
 
+copyfiles@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/copyfiles/-/copyfiles-2.2.0.tgz#d9fc6c06f299337fb7eeb7ea5887e9d7188d9d47"
+  integrity sha512-iJbHJI+8OKqsq+4JF0rqgRkZzo++jqO6Wf4FUU1JM41cJF6JcY5968XyF4tm3Kkm7ZOMrqlljdm8N9oyY5raGw==
+  dependencies:
+    glob "^7.0.5"
+    minimatch "^3.0.3"
+    mkdirp "^0.5.1"
+    noms "0.0.0"
+    through2 "^2.0.1"
+    yargs "^13.2.4"
+
 core-js-compat@^3.6.2, core-js-compat@^3.6.4:
   version "3.6.4"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17"
@@ -5372,7 +5392,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -6395,6 +6415,11 @@ is-yarn-global@^0.3.0:
   resolved "https://registry.yarnpkg.com/is-yarn-global/-/is-yarn-global-0.3.0.tgz#d502d3382590ea3004893746754c89139973e232"
   integrity sha512-VjSeb/lHmkoyd8ryPVIKvOCn4D1koMqY+vqyjjUfc3xyKtP4dYOxM44sZrnqQSzSds3xyOrUTLTC9LVCVgLngw==
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8=
+
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -7462,6 +7487,13 @@ magic-string@^0.25.0, magic-string@^0.25.2, magic-string@^0.25.3:
   dependencies:
     sourcemap-codec "^1.4.4"
 
+magic-string@^0.25.5:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -7746,7 +7778,7 @@ minimalistic-crypto-utils@^1.0.0, minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.yarnpkg.com/minimalistic-crypto-utils/-/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.4:
+minimatch@^3.0.3, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
@@ -8019,6 +8051,14 @@ node-releases@^1.1.49:
   dependencies:
     semver "^6.3.0"
 
+noms@0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/noms/-/noms-0.0.0.tgz#da8ebd9f3af9d6760919b27d9cdc8092a7332859"
+  integrity sha1-2o69nzr51nYJGbJ9nNyAkqczKFk=
+  dependencies:
+    inherits "^2.0.1"
+    readable-stream "~1.0.31"
+
 nopt@1.0.10:
   version "1.0.10"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-1.0.10.tgz#6ddd21bd2a31417b92727dd585f8a6f37608ebee"
@@ -9639,6 +9679,16 @@ readable-stream@^3.0.6, readable-stream@^3.1.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@~1.0.31:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  integrity sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readdirp@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-2.2.1.tgz#0e87622a3325aa33e892285caf8b4e846529a525"
@@ -10760,6 +10810,11 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -11031,7 +11086,7 @@ throat@^4.0.0:
   resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
   integrity sha1-iQN8vJLFarGJJua6TLsgDhVnKmo=
 
-through2@^2.0.0:
+through2@^2.0.0, through2@^2.0.1:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
   integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
@@ -11736,7 +11791,7 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.0.0, vue@^2.5.17, vue@^2.6.10, vue@^2.6.11:
+vue@^2.0.0, vue@^2.5.17, vue@^2.6.10:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
   integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
@@ -12273,7 +12328,7 @@ yargs@12.0.5:
     y18n "^3.2.1 || ^4.0.0"
     yargs-parser "^11.1.1"
 
-yargs@^13.3.0:
+yargs@^13.2.4, yargs@^13.3.0:
   version "13.3.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.0.tgz#4c657a55e07e5f2cf947f8a366567c04a0dedc83"
   integrity sha512-2eehun/8ALW8TLoIl7MVaRUrg+yCnenu8B4kBlRxj3GJGDKU1Og7sMXPNm1BYyM1DOJmTZ4YeN/Nwxv+8XJsUA==