diff options
| -rw-r--r-- | .babelrc | 3 | ||||
| -rw-r--r-- | app/javascript/mastodon/emoji.js | 15 | ||||
| -rw-r--r-- | app/javascript/mastodon/emojione_light.js | 11 | ||||
| -rwxr-xr-x | app/views/layouts/application.html.haml | 1 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | spec/javascript/components/emojify.test.js | 16 | ||||
| -rw-r--r-- | yarn.lock | 12 |
7 files changed, 39 insertions, 20 deletions
diff --git a/.babelrc b/.babelrc index 19968964e..de922f389 100644 --- a/.babelrc +++ b/.babelrc @@ -22,7 +22,8 @@ { "messagesDir": "./build/messages" } - ] + ], + "preval" ], "env": { "development": { diff --git a/app/javascript/mastodon/emoji.js b/app/javascript/mastodon/emoji.js index ed2180cd1..1de41f572 100644 --- a/app/javascript/mastodon/emoji.js +++ b/app/javascript/mastodon/emoji.js @@ -1,8 +1,7 @@ -import emojione from 'emojione'; +import { unicodeToFilename } from './emojione_light'; import Trie from 'substring-trie'; -const mappedUnicode = emojione.mapUnicodeToShort(); -const trie = new Trie(Object.keys(emojione.jsEscapeMap)); +const trie = new Trie(Object.keys(unicodeToFilename)); function emojify(str) { // This walks through the string from start to end, ignoring any tags (<p>, <br>, etc.) @@ -20,12 +19,10 @@ function emojify(str) { insideTag = true; } else if (!insideTag && (match = trie.search(str.substring(i)))) { const unicodeStr = match; - if (unicodeStr in emojione.jsEscapeMap) { - const unicode = emojione.jsEscapeMap[unicodeStr]; - const short = mappedUnicode[unicode]; - const filename = emojione.emojioneList[short].fname; - const alt = emojione.convert(unicode.toUpperCase()); - const replacement = `<img draggable="false" class="emojione" alt="${alt}" title="${short}" src="/emoji/${filename}.svg" />`; + if (unicodeStr in unicodeToFilename) { + const filename = unicodeToFilename[unicodeStr]; + const alt = unicodeStr; + const replacement = `<img draggable="false" class="emojione" alt="${alt}" src="/emoji/${filename}.svg" />`; str = str.substring(0, i) + replacement + str.substring(i + unicodeStr.length); i += (replacement.length - unicodeStr.length); // jump ahead the length we've added to the string } diff --git a/app/javascript/mastodon/emojione_light.js b/app/javascript/mastodon/emojione_light.js new file mode 100644 index 000000000..c75e10a98 --- /dev/null +++ b/app/javascript/mastodon/emojione_light.js @@ -0,0 +1,11 @@ +// @preval +// Force tree shaking on emojione by exposing just a subset of its functionality + +const emojione = require('emojione'); + +const mappedUnicode = emojione.mapUnicodeToShort(); + +module.exports.unicodeToFilename = Object.keys(emojione.jsEscapeMap) + .map(unicodeStr => [unicodeStr, mappedUnicode[emojione.jsEscapeMap[unicodeStr]]]) + .map(([unicodeStr, shortCode]) => ({ [unicodeStr]: emojione.emojioneList[shortCode].fname })) + .reduce((x, y) => Object.assign(x, y), { }); diff --git a/app/views/layouts/application.html.haml b/app/views/layouts/application.html.haml index ef97fb127..82b20810a 100755 --- a/app/views/layouts/application.html.haml +++ b/app/views/layouts/application.html.haml @@ -27,6 +27,7 @@ = javascript_pack_tag 'features/notifications', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' = javascript_pack_tag 'features/community_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' = javascript_pack_tag 'features/public_timeline', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' + = javascript_pack_tag 'emojione_picker', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous' = csrf_meta_tags diff --git a/package.json b/package.json index 5ad576dad..20224796f 100644 --- a/package.json +++ b/package.json @@ -121,6 +121,7 @@ "@storybook/addon-actions": "^3.1.8", "@storybook/react": "^3.1.8", "babel-eslint": "^7.2.3", + "babel-plugin-preval": "^1.3.2", "chai": "^4.1.0", "chai-enzyme": "^0.8.0", "enzyme": "^2.9.1", diff --git a/spec/javascript/components/emojify.test.js b/spec/javascript/components/emojify.test.js index e165b4519..2874bb56d 100644 --- a/spec/javascript/components/emojify.test.js +++ b/spec/javascript/components/emojify.test.js @@ -22,23 +22,23 @@ describe('emojify', () => { it('does unicode', () => { expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).to.equal( - '<img draggable="false" class="emojione" alt="👩👩👦👦" title=":family_wwbb:" src="/emoji/1f469-1f469-1f466-1f466.svg" />'); + '<img draggable="false" class="emojione" alt="👩👩👦👦" src="/emoji/1f469-1f469-1f466-1f466.svg" />'); expect(emojify('\uD83D\uDC68\uD83D\uDC69\uD83D\uDC67\uD83D\uDC67')).to.equal( - '<img draggable="false" class="emojione" alt="👨👩👧👧" title=":family_mwgg:" src="/emoji/1f468-1f469-1f467-1f467.svg" />'); - expect(emojify('\uD83D\uDC69\uD83D\uDC69\uD83D\uDC66')).to.equal('<img draggable="false" class="emojione" alt="👩👩👦" title=":family_wwb:" src="/emoji/1f469-1f469-1f466.svg" />'); + '<img draggable="false" class="emojione" alt="👨👩👧👧" src="/emoji/1f468-1f469-1f467-1f467.svg" />'); + expect(emojify('\uD83D\uDC69\uD83D\uDC69\uD83D\uDC66')).to.equal('<img draggable="false" class="emojione" alt="👩👩👦" src="/emoji/1f469-1f469-1f466.svg" />'); expect(emojify('\u2757')).to.equal( - '<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" />'); + '<img draggable="false" class="emojione" alt="❗" src="/emoji/2757.svg" />'); }); it('does multiple unicode', () => { expect(emojify('\u2757 #\uFE0F\u20E3')).to.equal( - '<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/0023-20e3.svg" />'); + '<img draggable="false" class="emojione" alt="❗" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" src="/emoji/0023-20e3.svg" />'); expect(emojify('\u2757#\uFE0F\u20E3')).to.equal( - '<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/0023-20e3.svg" />'); + '<img draggable="false" class="emojione" alt="❗" src="/emoji/2757.svg" /><img draggable="false" class="emojione" alt="#️⃣" src="/emoji/0023-20e3.svg" />'); expect(emojify('\u2757 #\uFE0F\u20E3 \u2757')).to.equal( - '<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/0023-20e3.svg" /> <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" />'); + '<img draggable="false" class="emojione" alt="❗" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" src="/emoji/0023-20e3.svg" /> <img draggable="false" class="emojione" alt="❗" src="/emoji/2757.svg" />'); expect(emojify('foo \u2757 #\uFE0F\u20E3 bar')).to.equal( - 'foo <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/0023-20e3.svg" /> bar'); + 'foo <img draggable="false" class="emojione" alt="❗" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" src="/emoji/0023-20e3.svg" /> bar'); }); it('ignores unicode inside of tags', () => { diff --git a/yarn.lock b/yarn.lock index 56a9f7798..defd8599f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -681,6 +681,14 @@ babel-plugin-lodash@^3.2.11: glob "^7.1.1" lodash "^4.17.2" +babel-plugin-preval@^1.3.2: + version "1.3.2" + resolved "https://registry.yarnpkg.com/babel-plugin-preval/-/babel-plugin-preval-1.3.2.tgz#44192e6e97b58661bf2c5bcae90bba2a366e0134" + dependencies: + babel-core "^6.25.0" + babylon "^6.17.4" + require-from-string "^1.2.1" + babel-plugin-react-docgen@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-1.5.0.tgz#0339717ad51f4a5ce4349330b8266ea5a56f53b4" @@ -1312,7 +1320,7 @@ babel-types@^6.19.0, babel-types@^6.23.0, babel-types@^6.24.1, babel-types@^6.25 lodash "^4.2.0" to-fast-properties "^1.0.1" -babylon@^6.17.0, babylon@^6.17.2: +babylon@^6.17.0, babylon@^6.17.2, babylon@^6.17.4: version "6.17.4" resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a" @@ -6335,7 +6343,7 @@ require-directory@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" -require-from-string@^1.1.0: +require-from-string@^1.1.0, require-from-string@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418" |