Merge pull request #63 from Justsnoopy30/master

Make the project more modern!
4 years ago · ae623fbe22
9 changed files with 7102 additions and 5071 deletions
--- a/examples/public/index.html
+++ b/examples/public/index.html
@ -32,7 +32,7 @@
      <div id="twemoji-picker">
        <div id="emoji-contenteditable" contenteditable></div>
        <button id="twemoji-button">
-          <img class="emoji" draggable="false" alt="😎" src="https://twemoji.maxcdn.com/v/12.1.5/72x72/1f60e.png">
+          <img class="emoji" draggable="false" alt="😎" src="https://twemoji.maxcdn.com/v/13.0.0/svg/1f60e.svg">
        </button>
      </div>
    </section>
@ -67,7 +67,7 @@ window.addEventListener('DOMContentLoaded', () => {
  button.addEventListener('click', () => {
    picker.togglePicker(button);
  });
-});        
+});
      </code></pre>

      <h1>TypeScript note</h1>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,9 +9,9 @@
  "main": "dist/index.js",
  "types": "index.d.ts",
  "scripts": {
-    "build": "NODE_ENV=production rollup -c",
+    "build": "cross-env NODE_ENV=production rollup -c",
    "build:watch": "rollup -cw",
-    "prepublishOnly": "NODE_ENV=production rollup -c",
+    "prepublishOnly": "cross-env NODE_ENV=production rollup -c",
    "test": "jest",
    "test:watch": "jest --watchAll",
    "lint": "eslint src/*.ts",
@ -26,39 +26,40 @@
  "bugs": "https://github.com/joeattardi/emoji-button/issues",
  "license": "MIT",
  "devDependencies": {
-    "@babel/core": "^7.5.5",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-typescript": "^7.8.3",
-    "@rollup/plugin-replace": "^2.3.0",
-    "@rollup/plugin-typescript": "^3.0.0",
-    "@types/jest": "^25.1.3",
-    "@typescript-eslint/eslint-plugin": "^2.20.0",
-    "@typescript-eslint/parser": "^2.20.0",
-    "babel-jest": "^25.1.0",
+    "@babel/core": "^7.10.2",
+    "@babel/preset-env": "^7.10.2",
+    "@babel/preset-typescript": "^7.10.1",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@rollup/plugin-typescript": "^4.1.2",
+    "@types/jest": "^25.2.3",
+    "@typescript-eslint/eslint-plugin": "^3.1.0",
+    "@typescript-eslint/parser": "^3.1.0",
+    "babel-jest": "^26.0.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
-    "eslint": "^6.4.0",
-    "eslint-config-prettier": "^6.3.0",
-    "eslint-plugin-prettier": "^3.1.0",
-    "jest": "^24.9.0",
-    "prettier": "^1.18.2",
-    "rollup": "^1.20.3",
-    "rollup-plugin-babel": "^4.3.3",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.2.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-plugin-prettier": "^3.1.3",
+    "jest": "^26.0.1",
+    "prettier": "^2.0.5",
+    "rollup": "^2.13.1",
+    "rollup-plugin-babel": "^4.4.0",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^2.0.3",
-    "rollup-plugin-terser": "^5.2.0",
-    "ts-jest": "^25.2.1",
-    "typescript": "^3.7.5"
+    "rollup-plugin-postcss": "^3.1.2",
+    "rollup-plugin-terser": "^6.1.0",
+    "ts-jest": "^26.1.0",
+    "typescript": "^3.9.5"
  },
  "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^1.2.22",
-    "@fortawesome/free-regular-svg-icons": "^5.10.2",
-    "@fortawesome/free-solid-svg-icons": "^5.10.2",
-    "@popperjs/core": "^2.0.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-regular-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
+    "@popperjs/core": "^2.4.0",
    "focus-trap": "^5.1.0",
    "tiny-emitter": "^2.1.0",
-    "tslib": "^1.10.0",
-    "twemoji": "^12.1.5"
+    "tslib": "^2.0.0",
+    "twemoji": "^13.0.0"
  },
  "files": [
    "dist",
--- a/rollup.config.js
+++ b/rollup.config.js
@ -11,7 +11,7 @@ module.exports = {
  input: 'src/index.ts',
  output: {
    file: 'dist/index.js',
-    format: 'umd',
+    format: 'es',
    name: 'EmojiButton'
  },
  plugins: [
--- a/src/emoji.test.ts
+++ b/src/emoji.test.ts
@ -2,6 +2,7 @@ import { TinyEmitter as Emitter } from 'tiny-emitter';

 import { EMOJI, HIDE_PREVIEW, SHOW_PREVIEW } from './events';
 import { Emoji } from './emoji';
+import { EmojiButtonOptions } from './types';

 describe('Emoji', () => {
  let events;
@ -12,7 +13,7 @@ describe('Emoji', () => {
    category: 0,
    version: '11.0'
  };
-  const options = { showRecents: true, style: 'native' };
+  const options: EmojiButtonOptions = { showRecents: true, style: 'native' };

  beforeEach(() => (events = new Emitter()));

--- a/src/emoji.ts
+++ b/src/emoji.ts
@ -9,6 +9,12 @@ import { EmojiButtonOptions, EmojiRecord } from './types';

 const CLASS_EMOJI = 'emoji-picker__emoji';

+// Options for twemoji.parse(emoji, twemojiOptions)
+const twemojiOptions = {
+  ext: '.svg',
+  folder: 'svg'
+}
+
 export class Emoji {
  private emojiButton: HTMLElement;

@ -25,7 +31,7 @@ export class Emoji {
    this.emojiButton.innerHTML =
      this.options.style === 'native'
        ? this.emoji.emoji
-        : twemoji.parse(this.emoji.emoji);
+        : twemoji.parse(this.emoji.emoji, twemojiOptions);
    this.emojiButton.tabIndex = -1;

    this.emojiButton.title = this.emoji.name;
--- a/src/index.ts
+++ b/src/index.ts
@ -26,6 +26,12 @@ import { EmojiArea } from './emojiArea';
 const CLASS_PICKER = 'emoji-picker';
 const CLASS_PICKER_CONTENT = 'emoji-picker__content';

+// Options for twemoji.parse(emoji, twemojiOptions)
+const twemojiOptions = {
+  ext: '.svg',
+  folder: 'svg'
+}
+
 const DEFAULT_OPTIONS: EmojiButtonOptions = {
  position: 'right-start',
  autoHide: true,
@ -172,6 +178,7 @@ export default class EmojiButton {
    }

    let variantPopup: HTMLElement | null;
+
    this.events.on(
      EMOJI,
      ({
@ -201,7 +208,7 @@ export default class EmojiButton {
          }

          if (this.options.style === 'twemoji') {
-            this.publicEvents.emit('emoji', twemoji.parse(emoji.emoji));
+            this.publicEvents.emit('emoji', twemoji.parse(emoji.emoji, twemojiOptions));
          } else {
            this.publicEvents.emit('emoji', emoji.emoji);
          }
--- a/src/preview.ts
+++ b/src/preview.ts
@ -10,6 +10,12 @@ const CLASS_PREVIEW = 'emoji-picker__preview';
 const CLASS_PREVIEW_EMOJI = 'emoji-picker__preview-emoji';
 const CLASS_PREVIEW_NAME = 'emoji-picker__preview-name';

+// Options for twemoji.parse(emoji, twemojiOptions)
+const twemojiOptions = {
+  ext: '.svg',
+  folder: 'svg'
+}
+
 export class EmojiPreview {
  private emoji: HTMLElement;
  private name: HTMLElement;
@ -37,7 +43,7 @@ export class EmojiPreview {
    this.emoji.innerHTML =
      this.options.style === 'native'
        ? emoji.emoji
-        : twemoji.parse(emoji.emoji);
+        : twemoji.parse(emoji.emoji, twemojiOptions);
    this.name.innerHTML = emoji.name;
  }

--- a/tsconfig.json
+++ b/tsconfig.json
@ -2,8 +2,8 @@
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
-    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
-    "module": "es2015",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    "target": "es2020",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "module": "es2020",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
    // "lib": [],                             /* Specify library files to be included in the compilation. */
    // "allowJs": true,                       /* Allow javascript files to be compiled. */
    // "checkJs": true,                       /* Report errors in .js files. */