moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'twemoji-revert' into 'develop' 

Webpack: move Twemoji icons back to CopyPlugin

Closes #740

See merge request soapbox-pub/soapbox-fe!746
This commit is contained in:
Alex Gleason 2021-09-12 16:22:03 +00:00
parent 139b47eb22 5921fa9b2d
commit 9b40d1a602
9 changed files with 71 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/soapbox/components/__tests__/__snapshots__/autosuggest_emoji-test.js.snap
View File

@ -20,11 +20,7 @@ exports[`<AutosuggestEmoji /> renders native emoji 1`] = `
<img
alt="💙"
className="emojione"
src={
Object {
"process": [Function],
}
}
src="/packs/emoji/1f499.svg"
/>
:foobar:
</div>

12
app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
View File

@ -15,7 +15,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"[object Object]\\" />",
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/packs/emoji/1f44d.svg\\" />",
}
}
onClick={[Function]}
@ -26,7 +26,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"[object Object]\\" />",
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/packs/emoji/2764.svg\\" />",
}
}
onClick={[Function]}
@ -37,7 +37,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"[object Object]\\" />",
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/packs/emoji/1f606.svg\\" />",
}
}
onClick={[Function]}
@ -48,7 +48,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"[object Object]\\" />",
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/packs/emoji/1f62e.svg\\" />",
}
}
onClick={[Function]}
@ -59,7 +59,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"[object Object]\\" />",
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/packs/emoji/1f622.svg\\" />",
}
}
onClick={[Function]}
@ -70,7 +70,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
className="emoji-react-selector__emoji"
dangerouslySetInnerHTML={
Object {
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"[object Object]\\" />",
"__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/packs/emoji/1f629.svg\\" />",
}
}
onClick={[Function]}

3
app/soapbox/components/autosuggest_emoji.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
import { joinPublicPath } from 'soapbox/utils/static';
export default class AutosuggestEmoji extends React.PureComponent {
@ -21,7 +22,7 @@ export default class AutosuggestEmoji extends React.PureComponent {
return null;
}
url = require(`twemoji/assets/svg/${mapping.filename}.svg`);
url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
}
return (

3
app/soapbox/features/compose/components/emoji_picker_dropdown.js
View File

@ -7,6 +7,7 @@ import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { supportsPassiveEvents } from 'detect-passive-events';
import { buildCustomEmojis } from '../../emoji/emoji';
import { joinPublicPath } from 'soapbox/utils/static';
const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@ -357,7 +358,7 @@ class EmojiPickerDropdown extends React.PureComponent {
<img
className={classNames('emojione', { 'pulse-loading': active && loading })}
alt='😂'
src={require('twemoji/assets/svg/1f602.svg')}
src={joinPublicPath('packs/emoji/1f602.svg')}
/>
</div>

32
app/soapbox/features/emoji/__tests__/emoji-test.js
View File

@ -22,23 +22,23 @@ describe('emoji', () => {
it('does unicode', () => {
expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).toEqual(
'<img draggable="false" class="emojione" alt="👩‍👩‍👦‍👦" title=":woman-woman-boy-boy:" src="[object Object]" />');
'<img draggable="false" class="emojione" alt="👩‍👩‍👦‍👦" title=":woman-woman-boy-boy:" src="/packs/emoji/1f469-200d-1f469-200d-1f466-200d-1f466.svg" />');
expect(emojify('👨‍👩‍👧‍👧')).toEqual(
'<img draggable="false" class="emojione" alt="👨‍👩‍👧‍👧" title=":man-woman-girl-girl:" src="[object Object]" />');
expect(emojify('👩‍👩‍👦')).toEqual('<img draggable="false" class="emojione" alt="👩‍👩‍👦" title=":woman-woman-boy:" src="[object Object]" />');
'<img draggable="false" class="emojione" alt="👨‍👩‍👧‍👧" title=":man-woman-girl-girl:" src="/packs/emoji/1f468-200d-1f469-200d-1f467-200d-1f467.svg" />');
expect(emojify('👩‍👩‍👦')).toEqual('<img draggable="false" class="emojione" alt="👩‍👩‍👦" title=":woman-woman-boy:" src="/packs/emoji/1f469-200d-1f469-200d-1f466.svg" />');
expect(emojify('\u2757')).toEqual(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" />');
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" />');
});
it('does multiple unicode', () => {
expect(emojify('\u2757 #\uFE0F\u20E3')).toEqual(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="[object Object]" />');
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/packs/emoji/23-20e3.svg" />');
expect(emojify('\u2757#\uFE0F\u20E3')).toEqual(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" /><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="[object Object]" />');
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" /><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/packs/emoji/23-20e3.svg" />');
expect(emojify('\u2757 #\uFE0F\u20E3 \u2757')).toEqual(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="[object Object]" /> <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" />');
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/packs/emoji/23-20e3.svg" /> <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" />');
expect(emojify('foo \u2757 #\uFE0F\u20E3 bar')).toEqual(
'foo <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="[object Object]" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="[object Object]" /> bar');
'foo <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/packs/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/packs/emoji/23-20e3.svg" /> bar');
});
it('ignores unicode inside of tags', () => {
@ -46,16 +46,16 @@ describe('emoji', () => {
});
it('does multiple emoji properly (issue 5188)', () => {
expect(emojify('👌🌈💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="[object Object]" /><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="[object Object]" /><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="[object Object]" />');
expect(emojify('👌 🌈 💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="[object Object]" /> <img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="[object Object]" /> <img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="[object Object]" />');
expect(emojify('👌🌈💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/packs/emoji/1f44c.svg" /><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/packs/emoji/1f308.svg" /><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/packs/emoji/1f495.svg" />');
expect(emojify('👌 🌈 💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/packs/emoji/1f44c.svg" /> <img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/packs/emoji/1f308.svg" /> <img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/packs/emoji/1f495.svg" />');
});
it('does an emoji that has no shortcode', () => {
expect(emojify('👁‍🗨')).toEqual('<img draggable="false" class="emojione" alt="👁‍🗨" title="" src="[object Object]" />');
expect(emojify('👁‍🗨')).toEqual('<img draggable="false" class="emojione" alt="👁‍🗨" title="" src="/packs/emoji/1f441-200d-1f5e8.svg" />');
});
it('does an emoji whose filename is irregular', () => {
expect(emojify('↙️')).toEqual('<img draggable="false" class="emojione" alt="↙️" title=":arrow_lower_left:" src="[object Object]" />');
expect(emojify('↙️')).toEqual('<img draggable="false" class="emojione" alt="↙️" title=":arrow_lower_left:" src="/packs/emoji/2199.svg" />');
});
it('avoid emojifying on invisible text', () => {
@ -67,16 +67,16 @@ describe('emoji', () => {
it('avoid emojifying on invisible text with nested tags', () => {
expect(emojify('<span class="invisible">😄<span class="foo">bar</span>😴</span>😇'))
.toEqual('<span class="invisible">😄<span class="foo">bar</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="[object Object]" />');
.toEqual('<span class="invisible">😄<span class="foo">bar</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/packs/emoji/1f607.svg" />');
expect(emojify('<span class="invisible">😄<span class="invisible">😕</span>😴</span>😇'))
.toEqual('<span class="invisible">😄<span class="invisible">😕</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="[object Object]" />');
.toEqual('<span class="invisible">😄<span class="invisible">😕</span>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/packs/emoji/1f607.svg" />');
expect(emojify('<span class="invisible">😄<br/>😴</span>😇'))
.toEqual('<span class="invisible">😄<br/>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="[object Object]" />');
.toEqual('<span class="invisible">😄<br/>😴</span><img draggable="false" class="emojione" alt="😇" title=":innocent:" src="/packs/emoji/1f607.svg" />');
});
it('skips the textual presentation VS15 character', () => {
expect(emojify('✴︎')) // This is U+2734 EIGHT POINTED BLACK STAR then U+FE0E VARIATION SELECTOR-15
.toEqual('<img draggable="false" class="emojione" alt="✴" title=":eight_pointed_black_star:" src="[object Object]" />');
.toEqual('<img draggable="false" class="emojione" alt="✴" title=":eight_pointed_black_star:" src="/packs/emoji/2734.svg" />');
});
});
});

3
app/soapbox/features/emoji/emoji.js
View File

@ -1,5 +1,6 @@
import unicodeMapping from './emoji_unicode_mapping_light';
import Trie from 'substring-trie';
import { joinPublicPath } from 'soapbox/utils/static';
const trie = new Trie(Object.keys(unicodeMapping));
@ -60,7 +61,7 @@ const emojify = (str, customEmojis = {}, autoplay = false) => {
} else { // matched to unicode emoji
const { filename, shortCode } = unicodeMapping[match];
const title = shortCode ? `:${shortCode}:` : '';
const src = require(`twemoji/assets/svg/${filename}.svg`);
const src = joinPublicPath(`packs/emoji/${filename}.svg`);
replacement = `<img draggable="false" class="emojione" alt="${match}" title="${title}" src="${src}" />`;
rend = i + match.length;
// If the matched character was followed by VS15 (for selecting text presentation), skip it.

11
app/soapbox/utils/static.js Normal file
View File

@ -0,0 +1,11 @@
/**
* Static: functions related to static files.
* @module soapbox/utils/static
*/
import { join } from 'path';
import { FE_SUBDIRECTORY } from 'soapbox/build_config';
export const joinPublicPath = (...paths) => {
return join(FE_SUBDIRECTORY, ...paths);
};

44
webpack/production.js
View File

@ -1,11 +1,15 @@
// Note: You must restart bin/webpack-dev-server for changes to take effect
console.log('Running in production mode'); // eslint-disable-line no-console
const { join } = require('path');
const { merge } = require('webpack-merge');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const OfflinePlugin = require('@lcdp/offline-plugin');
const sharedConfig = require('./shared');
const { FE_SUBDIRECTORY } = require(join(__dirname, '..', 'app', 'soapbox', 'build_config'));
const joinPublicPath = (...paths) => join(FE_SUBDIRECTORY, ...paths);
module.exports = merge(sharedConfig, {
mode: 'production',
devtool: 'source-map',
@ -26,28 +30,32 @@ module.exports = merge(sharedConfig, {
caches: {
main: [':rest:'],
additional: [
'packs/emoji/1f602-*.svg', // used for emoji picker dropdown
'packs/images/32-*.png', // used in emoji-mart
// Default emoji reacts
'packs/emoji/1f44d-*.svg', // Thumbs up
'packs/emoji/2764-*.svg', // Heart
'packs/emoji/1f606-*.svg', // Laughing
'packs/emoji/1f62e-*.svg', // Surprised
'packs/emoji/1f622-*.svg', // Crying
'packs/emoji/1f629-*.svg', // Weary
'packs/emoji/1f621-*.svg', // Angry (Spinster)
':externals:',
'packs/images/32-*.png', // used in emoji-mart
],
optional: [
'**/locale_*.js', // don't fetch every locale; the user only needs one
'**/*_polyfills-*.js', // the user may not need polyfills
'**/*.chunk.js', // only cache chunks when needed
'**/*.chunk.css',
'**/*.woff2', // the user may have system-fonts enabled
// images can be cached on-demand
'**/*.png',
'**/*.svg',
],
},
externals: [
joinPublicPath('packs/emoji/1f602.svg'), // used for emoji picker dropdown
// Default emoji reacts
joinPublicPath('packs/emoji/1f44d.svg'), // Thumbs up
joinPublicPath('packs/emoji/2764.svg'), // Heart
joinPublicPath('packs/emoji/1f606.svg'), // Laughing
joinPublicPath('packs/emoji/1f62e.svg'), // Surprised
joinPublicPath('packs/emoji/1f622.svg'), // Crying
joinPublicPath('packs/emoji/1f629.svg'), // Weary
joinPublicPath('packs/emoji/1f621.svg'), // Angry (Spinster)
],
excludes: [
'**/*.gz',
'**/*.map',
@ -69,12 +77,16 @@ module.exports = merge(sharedConfig, {
// https://github.com/bromite/bromite/issues/1294
'index.html',
'404.html',
'assets-manifest.json',
// It would be nice to serve these, but they bloat up sw.js
'packs/images/crypto/**/*',
'packs/emoji/**/*',
],
// ServiceWorker: {
// entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
// cacheName: 'soapbox',
// minify: true,
// },
ServiceWorker: {
// entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
// cacheName: 'soapbox',
minify: true,
},
safeToUseOptionalCaches: true,
}),
],

3
webpack/shared.js
View File

@ -88,6 +88,9 @@ module.exports = {
new HtmlWebpackHarddiskPlugin(),
new CopyPlugin({
patterns: [{
from: join(__dirname, '../node_modules/twemoji/assets/svg'),
to: join(output.path, 'packs/emoji'),
}, {
from: join(__dirname, '../app/instance'),
to: join(output.path, 'instance'),
}],