* chore(yarn): Install babel-plugin-preval as development dependency * feat(babel): Add preval as a plugin * feat(emojione_light): Prevaled module what tree-shaked emojione * refactor(emoji): Use emojione_light * feat: Preload emojione_picker bundle * fix(emojione_light): Do not use Object.entries * fix(emojify): Update tests * chore(emojione_light): Remove silly ascii artmaster
@@ -22,7 +22,8 @@ | |||||
{ | { | ||||
"messagesDir": "./build/messages" | "messagesDir": "./build/messages" | ||||
} | } | ||||
] | |||||
], | |||||
"preval" | |||||
], | ], | ||||
"env": { | "env": { | ||||
"development": { | "development": { | ||||
@@ -1,8 +1,7 @@ | |||||
import emojione from 'emojione'; | |||||
import { unicodeToFilename } from './emojione_light'; | |||||
import Trie from 'substring-trie'; | 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) { | function emojify(str) { | ||||
// This walks through the string from start to end, ignoring any tags (<p>, <br>, etc.) | // This walks through the string from start to end, ignoring any tags (<p>, <br>, etc.) | ||||
@@ -20,12 +19,10 @@ function emojify(str) { | |||||
insideTag = true; | insideTag = true; | ||||
} else if (!insideTag && (match = trie.search(str.substring(i)))) { | } else if (!insideTag && (match = trie.search(str.substring(i)))) { | ||||
const unicodeStr = match; | 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); | 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 | i += (replacement.length - unicodeStr.length); // jump ahead the length we've added to the string | ||||
} | } | ||||
@@ -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), { }); |
@@ -27,6 +27,7 @@ | |||||
= javascript_pack_tag 'features/notifications', integrity: true, crossorigin: 'anonymous', rel: 'preload', as: 'script' | = 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/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 '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' | = javascript_pack_tag "locale_#{I18n.locale}", integrity: true, crossorigin: 'anonymous' | ||||
= csrf_meta_tags | = csrf_meta_tags | ||||
@@ -121,6 +121,7 @@ | |||||
"@storybook/addon-actions": "^3.1.8", | "@storybook/addon-actions": "^3.1.8", | ||||
"@storybook/react": "^3.1.8", | "@storybook/react": "^3.1.8", | ||||
"babel-eslint": "^7.2.3", | "babel-eslint": "^7.2.3", | ||||
"babel-plugin-preval": "^1.3.2", | |||||
"chai": "^4.1.0", | "chai": "^4.1.0", | ||||
"chai-enzyme": "^0.8.0", | "chai-enzyme": "^0.8.0", | ||||
"enzyme": "^2.9.1", | "enzyme": "^2.9.1", | ||||
@@ -22,23 +22,23 @@ describe('emojify', () => { | |||||
it('does unicode', () => { | it('does unicode', () => { | ||||
expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).to.equal( | 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( | 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( | 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', () => { | it('does multiple unicode', () => { | ||||
expect(emojify('\u2757 #\uFE0F\u20E3')).to.equal( | 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( | 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( | 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( | 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', () => { | it('ignores unicode inside of tags', () => { | ||||
@@ -681,6 +681,14 @@ babel-plugin-lodash@^3.2.11: | |||||
glob "^7.1.1" | glob "^7.1.1" | ||||
lodash "^4.17.2" | 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: | babel-plugin-react-docgen@^1.5.0: | ||||
version "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" | 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" | lodash "^4.2.0" | ||||
to-fast-properties "^1.0.1" | 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" | version "6.17.4" | ||||
resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.17.4.tgz#3e8b7402b88d22c3423e137a1577883b15ff869a" | 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" | version "2.1.1" | ||||
resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42" | 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" | version "1.2.1" | ||||
resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418" | resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-1.2.1.tgz#529c9ccef27380adfec9a2f965b649bbee636418" | ||||